@helpwave/hightide/dist/components/InputGroup.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../src/components/InputGroup.tsx","../../src/util/noop.ts"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { useEffect, useState } from 'react'\nimport { ChevronDown, ChevronUp } from 'lucide-react'\nimport clsx from 'clsx'\nimport { noop } from '../util/noop'\n\nexport type InputGroupProps = PropsWithChildren<{\n  title: string,\n  expanded?: boolean,\n  isExpandable?: boolean,\n  disabled?: boolean,\n  onChange?: (value: boolean) => void,\n  className?: string,\n}>\n\n/**\n * A Component for layouting inputs in an expandable group\n */\nexport const InputGroup = ({\n  children,\n  title,\n  expanded = true,\n  isExpandable = true,\n  disabled = false,\n  onChange = noop,\n  className = '',\n}: InputGroupProps) => {\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded)\n\n  useEffect(() => {\n    setIsExpanded(expanded)\n  }, [expanded])\n\n  return (\n    <div className={clsx('col gap-y-4 p-4 bg-white rounded-xl', className)}>\n      <div\n        className={clsx('row justify-between items-center', {\n          'cursor-pointer': isExpandable && !disabled,\n          'cursor-not-allowed': disabled,\n        },\n        {\n          'text-primary': !disabled,\n          'text-primary/40': disabled\n        })}\n        onClick={() => {\n          if (!isExpandable) {\n            return\n          }\n          const updatedIsExpanded = !isExpanded\n          onChange(updatedIsExpanded)\n          setIsExpanded(updatedIsExpanded)\n        }}\n      >\n        <span className=\"textstyle-title-md\">{title}</span>\n        <div className={clsx('rounded-full text-white w-6 h-6', {\n          'bg-primary': (isExpandable && !disabled) || expanded,\n          'bg-primary/40': disabled,\n        })}>\n          {isExpanded\n            ? <ChevronUp className=\"-translate-y-[1px]\" size={24}/>\n            : <ChevronDown className=\"translate-y-[1px]\" size={24}/>\n          }\n        </div>\n      </div>\n      {isExpanded && (\n        <div className=\"col gap-y-2 h-full\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n","export const noop = () => undefined\n"],"mappings":";AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,aAAa,iBAAiB;AACvC,OAAO,UAAU;;;ACHV,IAAM,OAAO,MAAM;;;ADmCpB,SAkBE,KAlBF;AAjBC,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,eAAe;AAAA,EACf,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AACd,MAAuB;AACrB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAkB,QAAQ;AAE9D,YAAU,MAAM;AACd,kBAAc,QAAQ;AAAA,EACxB,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE,qBAAC,SAAI,WAAW,KAAK,uCAAuC,SAAS,GACnE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UAAK;AAAA,UAAoC;AAAA,YAClD,kBAAkB,gBAAgB,CAAC;AAAA,YACnC,sBAAsB;AAAA,UACxB;AAAA,UACA;AAAA,YACE,gBAAgB,CAAC;AAAA,YACjB,mBAAmB;AAAA,UACrB;AAAA,QAAC;AAAA,QACD,SAAS,MAAM;AACb,cAAI,CAAC,cAAc;AACjB;AAAA,UACF;AACA,gBAAM,oBAAoB,CAAC;AAC3B,mBAAS,iBAAiB;AAC1B,wBAAc,iBAAiB;AAAA,QACjC;AAAA,QAEA;AAAA,8BAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,UAC5C,oBAAC,SAAI,WAAW,KAAK,mCAAmC;AAAA,YACtD,cAAe,gBAAgB,CAAC,YAAa;AAAA,YAC7C,iBAAiB;AAAA,UACnB,CAAC,GACE,uBACG,oBAAC,aAAU,WAAU,sBAAqB,MAAM,IAAG,IACnD,oBAAC,eAAY,WAAU,qBAAoB,MAAM,IAAG,GAE1D;AAAA;AAAA;AAAA,IACF;AAAA,IACC,cACC,oBAAC,SAAI,WAAU,sBACZ,UACH;AAAA,KAEJ;AAEJ;","names":[]}