UNPKG

@postenbring/hedwig-react

Version:

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

1 lines 2.05 kB
{"version":3,"sources":["../src/spinner/spinner.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\n\ninterface SpinnerPropsInner extends React.HTMLAttributes<HTMLDivElement> {\n /**\n * The size of the Spinner\n *\n * @default \"medium\"\n */\n size?: \"small\" | \"medium\" | \"large\";\n\n /**\n * The tooltip title\n *\n * @default \"\"\n */\n title?: string;\n\n /**\n * Delay before the spinner fades in\n *\n * If set to `true`, a default delay of `800ms` will be applied.\n *\n * @example\n * 0.8s\n *\n * @default false\n */\n delay?: `${string}ms` | `${string}s` | boolean;\n}\n\nexport type SpinnerProps = SpinnerPropsInner;\n\n/**\n * Use spinner loading states as placeholder for your content while waiting for data to load.\n */\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n ({ size = \"medium\", title = \"\", delay = false, className, style: _style, ...rest }, ref) => {\n const style: React.CSSProperties & { \"--hds-spinner-delay\"?: string } = {\n ..._style,\n ...(typeof delay === \"string\" && { \"--hds-spinner-delay\": delay }),\n };\n return (\n <div\n title={title}\n style={style}\n className={clsx(\n \"hds-spinner\",\n `hds-spinner--${size}`,\n delay && \"hds-spinner--delay\",\n className as undefined,\n )}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nSpinner.displayName = \"Spinner\";\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AA0Cf;AAPC,IAAM,UAAU;AAAA,EACrB,CAAC,IAAmF,QAAQ;AAA3F,iBAAE,SAAO,UAAU,QAAQ,IAAI,QAAQ,OAAO,WAAW,OAAO,OArCnE,IAqCG,IAA2E,iBAA3E,IAA2E,CAAzE,QAAiB,SAAY,SAAe,aAAW;AACxD,UAAM,QAAkE,kCACnE,SACC,OAAO,UAAU,YAAY,EAAE,uBAAuB,MAAM;AAElE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,IAAI;AAAA,UACpB,SAAS;AAAA,UACT;AAAA,QACF;AAAA,QACA;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;","names":[]}