@helpwave/hightide/dist/components/layout-and-navigation/Tile.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../../src/components/layout-and-navigation/Tile.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport clsx from 'clsx'\nimport { Check } from 'lucide-react'\n\nexport type TileProps = {\n  title: ReactNode,\n  titleClassName?: string,\n  description?: ReactNode,\n  descriptionClassName?: string,\n  onClick?: () => void,\n  disabled?: boolean,\n  isSelected?: boolean,\n  isListItem?: boolean,\n  prefix?: ReactNode,\n  suffix?: ReactNode,\n  className?: string,\n  normalClassName?: string,\n  selectedClassName?: string,\n  disabledClassName?: string,\n}\n\n/**\n * A component for creating a tile similar to the flutter ListTile\n */\nexport const Tile = ({\n                       title,\n                       titleClassName,\n                       description,\n                       descriptionClassName,\n                       onClick,\n                       isSelected = false,\n                       disabled = false,\n                       prefix,\n                       suffix,\n                       normalClassName = 'hover:bg-primary/40 cursor-pointer',\n                       selectedClassName = 'bg-primary/20',\n                       disabledClassName = 'text-disabled-text bg-disabled-background cursor-not-allowed',\n                       className\n                     }: TileProps) => {\n  return (\n    <div\n      className={clsx(\n        'flex-row-2 w-full items-center',\n        {\n          [normalClassName]: onClick && !disabled,\n          [selectedClassName]: isSelected && !disabled,\n          [disabledClassName]: disabled,\n        },\n        className\n      )}\n      onClick={disabled ? undefined : onClick}\n    >\n      {prefix}\n      <div className=\"flex-col-0 w-full\">\n        <span className={clsx(titleClassName ?? ('textstyle-title-normal'))}>{title}</span>\n        {!!description &&\n          <span className={clsx(descriptionClassName ?? 'textstyle-description')}>{description}</span>}\n      </div>\n      {suffix ?? (isSelected ? (<Check size={24}/>) : undefined)}\n    </div>\n  )\n}\n\nexport type ListTileProps = TileProps\n\nexport const ListTile = ({\n  ...props\n}: ListTileProps) => {\n  return (\n    <Tile\n      {...props}\n      titleClassName={props.titleClassName ?? 'font-semibold'}\n      className={clsx('px-2 py-1 rounded-md', props.className)}\n      disabledClassName={props.disabledClassName ?? 'text-disabled-text cursor-not-allowed'}\n    />\n  )\n}\n"],"mappings":";AACA,OAAO,UAAU;AACjB,SAAS,aAAa;AAmDhB,SACE,KADF;AA7BC,IAAM,OAAO,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,oBAAoB;AAAA,EACpB,oBAAoB;AAAA,EACpB;AACF,MAAiB;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,CAAC,eAAe,GAAG,WAAW,CAAC;AAAA,UAC/B,CAAC,iBAAiB,GAAG,cAAc,CAAC;AAAA,UACpC,CAAC,iBAAiB,GAAG;AAAA,QACvB;AAAA,QACA;AAAA,MACF;AAAA,MACA,SAAS,WAAW,SAAY;AAAA,MAE/B;AAAA;AAAA,QACD,qBAAC,SAAI,WAAU,qBACb;AAAA,8BAAC,UAAK,WAAW,KAAK,kBAAmB,wBAAyB,GAAI,iBAAM;AAAA,UAC3E,CAAC,CAAC,eACD,oBAAC,UAAK,WAAW,KAAK,wBAAwB,uBAAuB,GAAI,uBAAY;AAAA,WACzF;AAAA,QACC,WAAW,aAAc,oBAAC,SAAM,MAAM,IAAG,IAAM;AAAA;AAAA;AAAA,EAClD;AAEJ;AAIO,IAAM,WAAW,CAAC;AAAA,EACvB,GAAG;AACL,MAAqB;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAgB,MAAM,kBAAkB;AAAA,MACxC,WAAW,KAAK,wBAAwB,MAAM,SAAS;AAAA,MACvD,mBAAmB,MAAM,qBAAqB;AAAA;AAAA,EAChD;AAEJ;","names":[]}