@chassis-ui/react 0.4.0 → 0.4.1

package/dist/chunks/skeleton-CmZBLJwp.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeleton-CmZBLJwp.js","names":[],"sources":["../../src/components/skeleton/Skeleton.tsx","../../src/components/skeleton/SkeletonLoader.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport { WidthSpan, responsiveClassNames, responsiveProp } from '../../utils/breakpoints'\nimport { ContextColor, Responsive } from '../../types'\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\n\ntype SkeletonOwnProps<C extends ElementType> = {\n  /**\n   * Adds `skeleton-{animation}` alongside the base `skeleton` class, so the element animates\n   * itself as well as any nested `<Skeleton>` children. Nest plain `<Skeleton>` children inside\n   * it for the glow pulse to reach them too, or apply `wave` to a container of one or more\n   * `<Skeleton>` children for a directional sweep across the whole group.\n   */\n  animation?: 'glow' | 'wave'\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Component used for the root node. Either a string to use an HTML element or a component —\n   * e.g. `Avatar` or `Button`. Its own props are type-checked at the call site once passed here.\n   *\n   * @default 'span'\n   */\n  component?: C\n  /**\n   * Width of the skeleton in twelfths of its parent (`span={6}` is half, mapped to the\n   * `w-{n}/12` class; `span={12}` is `w-100`), `'auto'` for its natural width (`w-auto`), or\n   * `true` to fill the rest of a flex row (`flex-fill`). Unset by default, so the rendered\n   * element's own intrinsic width applies — set it explicitly (e.g. `span={12}`) for a\n   * full-width text line; leave it unset when `component` is something that sizes itself, like\n   * `Avatar` or `Button`. An object sets the width from a breakpoint up: `{ base: 12, md: 6 }`.\n   *\n   * @type { Responsive<'auto' | number | string | boolean> }\n   */\n  span?: Responsive<WidthSpan>\n}\n\nexport type SkeletonProps<C extends ElementType = 'span'> = PolymorphicComponentProps<\n  C,\n  SkeletonOwnProps<C>\n>\n\ntype SkeletonComponent = (<C extends ElementType = 'span'>(\n  props: SkeletonProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n// chassis-css has the fractions `w-1/12` to `w-11/12`; twelve twelfths is `w-100`.\nconst spanClassName = (span: WidthSpan, prefix: string) => {\n  if (span === true) return `${prefix}flex-fill`\n  if (span === 'auto') return `${prefix}w-auto`\n  if (typeof span === 'number' || typeof span === 'string') {\n    return Number(span) === 12 ? `${prefix}w-100` : `${prefix}w-${span}/12`\n  }\n  return null\n}\n\nfunction SkeletonRender<C extends ElementType = 'span'>(\n  { children, animation, className, color, component, span, ...rest }: SkeletonProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'span'\n  const _className = classNames(\n    'skeleton',\n    animation && `skeleton-${animation}`,\n    { [`bg-${color}`]: color },\n    responsiveClassNames([responsiveProp(span, spanClassName)]),\n    className\n  )\n\n  return (\n    <Component className={_className} {...rest} ref={ref}>\n      {children}\n    </Component>\n  )\n}\n\nexport const Skeleton = createPolymorphicComponent<SkeletonComponent>(\n  SkeletonRender as ForwardRefRenderFunction<Element, SkeletonProps<ElementType>>,\n  'Skeleton'\n)\n","import React, {\n  ComponentPropsWithoutRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ForwardRefRenderFunction,\n  Fragment,\n  ReactElement,\n  ReactNode\n} from 'react'\n\nimport { WidthSpan } from '../../utils/breakpoints'\nimport { PolymorphicRef } from '../../utils/polymorphic'\nimport { ContextColor } from '../../types'\nimport { Skeleton, SkeletonProps } from './Skeleton'\n\ntype SkeletonLoaderOwnProps<C extends ElementType> = {\n  /**\n   * The real content, rendered unchanged (no wrapping element) once `loading` is `false`.\n   */\n  children: ReactNode\n  /**\n   * Sets the color of the generated skeleton lines to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Component used for the generated skeleton(s) — e.g. `Avatar` or `Button` — for swapping\n   * non-text content, not just text runs. Its own props are type-checked at the call site once\n   * passed here, same as `Skeleton`'s own `component` prop.\n   *\n   * @default 'span'\n   */\n  component?: C\n  /**\n   * Swaps `children` for one `<Skeleton>` per entry in `spans` while `true`.\n   */\n  loading: boolean\n  /**\n   * One skeleton line per entry, using the same values as `Skeleton`'s `span` prop — e.g.\n   * `[12, 6]` for a full-width line followed by a half-width one. A single value (e.g. `6`) is\n   * shorthand for a single line, equivalent to `[6]`. Leave unset for a single skeleton sized by\n   * `component`'s own intrinsic width instead — e.g. an `Avatar`'s `size` prop. Rendered instead\n   * of `children` while `loading` is `true`; ignored once `loading` is `false`.\n   *\n   * @type { 'auto' | number | string | boolean | Array<'auto' | number | string | boolean> }\n   */\n  spans?: WidthSpan | WidthSpan[]\n}\n\n// Spelled out rather than `PolymorphicComponentProps`, which adds `asChild`: `SkeletonLoader`\n// renders no element of its own (it swaps its `children` for generated `Skeleton` lines), so\n// there's nothing for a child element to stand in for. (`Omit`-ing it from that type instead\n// breaks `C`'s inference from `component`.)\nexport type SkeletonLoaderProps<C extends ElementType = 'span'> = SkeletonLoaderOwnProps<C> &\n  Omit<ComponentPropsWithoutRef<C>, keyof SkeletonLoaderOwnProps<C> | 'asChild'>\n\ntype SkeletonLoaderComponent = (<C extends ElementType = 'span'>(\n  props: SkeletonLoaderProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\n/**\n * A pure content swap: no wrapping element of its own, so `.skeleton-glow`/`.skeleton-wave`\n * won't reach the lines it generates unless applied to a container already in the tree — see\n * `Skeleton`'s own docs for why the animation classes need a `.skeleton` descendant to animate.\n *\n * The ref goes to the first generated skeleton while `loading`, and is `null` once the real\n * content shows: that content is the caller's, with refs of its own.\n */\nfunction SkeletonLoaderRender<C extends ElementType = 'span'>(\n  { children, color, component, loading, spans, ...rest }: SkeletonLoaderProps<C>,\n  ref: ForwardedRef<Element>\n) {\n  if (!loading) return <>{children}</>\n\n  const spanList = spans === undefined ? [undefined] : Array.isArray(spans) ? spans : [spans]\n\n  return (\n    <>\n      {spanList.map((span, index) => (\n        // eslint-disable-next-line react/no-array-index-key -- `spans` is a static prop array\n        <Fragment key={index}>\n          {index > 0 && ' '}\n          {/* `rest` is `C`'s own props minus `SkeletonLoaderOwnProps`'s keys, which structurally\n              satisfies what `Skeleton<C>` wants (`C`'s own props minus its own, different, key\n              set) — TS can't verify that across two independently-generic components, hence the\n              cast. */}\n          <Skeleton\n            component={component}\n            span={span}\n            color={color}\n            {...(rest as unknown as SkeletonProps<C>)}\n            ref={index === 0 ? ref : undefined}\n          />\n        </Fragment>\n      ))}\n    </>\n  )\n}\n\n// `forwardRef` takes a render function that isn't generic, so the generic type is cast back on,\n// as `createPolymorphicComponent` does.\nexport const SkeletonLoader = forwardRef(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  SkeletonLoaderRender as ForwardRefRenderFunction<Element, any>\n) as unknown as SkeletonLoaderComponent\n\nSkeletonLoader.displayName = 'SkeletonLoader'\n"],"mappings":"kNAyDA,MAAM,GAAiB,EAAiB,IAClC,IAAS,GAAa,GAAG,EAAO,WAChC,IAAS,OAAe,GAAG,EAAO,QAClC,OAAO,GAAS,UAAY,OAAO,GAAS,SACvC,OAAO,CAAI,IAAM,GAAK,GAAG,EAAO,OAAS,GAAG,EAAO,IAAI,EAAK,KAE9D,KAGT,SAAS,EACP,CAAE,WAAU,YAAW,YAAW,QAAO,YAAW,OAAM,GAAG,GAC7D,EACA,CACA,IAAM,EAAY,GAAa,OACzB,EAAa,EACjB,WACA,GAAa,YAAY,IACzB,EAAG,MAAM,KAAU,CAAM,EACzB,EAAqB,CAAC,EAAe,EAAM,CAAa,CAAC,CAAC,EAC1D,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,GAAI,EAAW,KAEtC,EADR,CACQ,CAEf,CAEA,MAAa,EAAW,EACtB,EACA,UACF,ECrBA,SAAS,EACP,CAAE,WAAU,QAAO,YAAW,UAAS,QAAO,GAAG,GACjD,EACA,CACA,GAAI,CAAC,EAAS,OAAO,EAAA,cAAA,EAAA,SAAA,KAAG,CAAW,EAEnC,IAAM,EAAW,IAAU,IAAA,GAAY,CAAC,IAAA,EAAS,EAAI,MAAM,QAAQ,CAAK,EAAI,EAAQ,CAAC,CAAK,EAE1F,OACE,EAAA,cAAA,EAAA,SAAA,KACG,EAAS,KAAK,EAAM,IAEnB,EAAA,cAAC,EAAD,CAAU,IAAK,CAaL,EAZP,EAAQ,GAAK,IAKd,EAAA,cAAC,EAAD,CACa,YACL,OACC,QACP,GAAK,EACL,IAAK,IAAU,EAAI,EAAM,IAAA,EAC1B,CAAA,CACO,CACX,CACD,CAEN,CAIA,MAAa,EAAiB,EAE5B,CACF,EAEA,EAAe,YAAc"}

package/dist/chunks/spinner-DblhvrHL.js

@@ -1,2 +0,0 @@
-import"./focus-ring-SR_LwaN7.js";import{t as e}from"./polymorphic-BhGNZQja.js";import{t}from"./VisuallyHidden-C2dM7HhC.js";import n from"react";import r from"classnames";function i({className:e,color:i,component:a,size:o,variant:s=`border`,visuallyHiddenLabel:c=`Loading...`,...l},u){let d=a??`div`,f=r(`spinner-${s}`,i?`fg-${i}`:null,o&&`spinner-${s}-${o}`,e);return n.createElement(d,{className:f,role:`status`,...l,ref:u},n.createElement(t,null,c))}const a=e(i,`Spinner`);export{a as t};
-//# sourceMappingURL=spinner-DblhvrHL.js.map

package/dist/chunks/spinner-DblhvrHL.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spinner-DblhvrHL.js","names":[],"sources":["../../src/components/spinner/Spinner.tsx"],"sourcesContent":["import React, { ElementType, ForwardRefRenderFunction, ReactElement } from 'react'\nimport classNames from 'classnames'\n\nimport {\n  createPolymorphicComponent,\n  PolymorphicComponentProps,\n  PolymorphicRef\n} from '../../utils/polymorphic'\nimport { ContextColor } from '../../types'\nimport { VisuallyHidden } from '../visually-hidden/VisuallyHidden'\n\ntype SpinnerOwnProps<C extends ElementType> = {\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component to one of Chassis context colors.\n   */\n  color?: ContextColor\n  /**\n   * Component used for the root node. Either a string to use a HTML element or a component.\n   */\n  component?: C\n  /**\n   * Size the component sm.\n   */\n  size?: 'sm'\n  /**\n   * Set the button variant to an outlined button or a ghost button.\n   */\n  variant?: 'border' | 'grow'\n  /**\n   * Set visually hidden label for accessibility purposes.\n   */\n  visuallyHiddenLabel?: string\n}\n\nexport type SpinnerProps<C extends ElementType = 'div'> = PolymorphicComponentProps<\n  C,\n  SpinnerOwnProps<C>\n>\n\ntype SpinnerComponent = (<C extends ElementType = 'div'>(\n  props: SpinnerProps<C> & { ref?: PolymorphicRef<C> }\n) => ReactElement | null) & { displayName?: string }\n\nfunction SpinnerRender<C extends ElementType = 'div'>(\n  {\n    className,\n    color,\n    component,\n    size,\n    variant = 'border',\n    visuallyHiddenLabel = 'Loading...',\n    ...rest\n  }: SpinnerProps<C>,\n  ref: PolymorphicRef<C>\n) {\n  const Component = component ?? 'div'\n  const _className = classNames(\n    `spinner-${variant}`,\n    color ? `fg-${color}` : null,\n    size && `spinner-${variant}-${size}`,\n    className\n  )\n\n  return (\n    <Component className={_className} role=\"status\" {...rest} ref={ref}>\n      <VisuallyHidden>{visuallyHiddenLabel}</VisuallyHidden>\n    </Component>\n  )\n}\n\nexport const Spinner = createPolymorphicComponent<SpinnerComponent>(\n  SpinnerRender as ForwardRefRenderFunction<Element, SpinnerProps<ElementType>>,\n  'Spinner'\n)\n"],"mappings":"0KA+CA,SAAS,EACP,CACE,YACA,QACA,YACA,OACA,UAAU,SACV,sBAAsB,aACtB,GAAG,GAEL,EACA,CACA,IAAM,EAAY,GAAa,MACzB,EAAa,EACjB,WAAW,IACX,EAAQ,MAAM,IAAU,KACxB,GAAQ,WAAW,EAAQ,GAAG,IAC9B,CACF,EAEA,OACE,EAAA,cAAC,EAAD,CAAW,UAAW,EAAY,KAAK,SAAS,GAAI,EAAW,KAEpD,EADT,EAAA,cAAC,EAAA,KAAgB,CAAoC,CAC5C,CAEf,CAEA,MAAa,EAAU,EACrB,EACA,SACF"}

package/dist/chunks/static-table-D0M4oc_t.js

@@ -1,2 +0,0 @@
-import{n as e,t}from"./tableClassName-CZA2Bse8.js";import n,{forwardRef as r}from"react";const i=r(({align:r,bordered:i,borderless:a,caption:o,children:s,className:c,color:l,hover:u,responsive:d,sm:f,stacked:p,striped:m,...h},g)=>{let _=n.createElement(`table`,{...h,className:t({align:r,bordered:i,borderless:a,className:c,color:l,hover:u,sm:f,stacked:p,striped:m}),ref:g},o&&n.createElement(`caption`,null,o),s),v=e({responsive:d,stacked:p});return v?n.createElement(`div`,{className:v},_):_});i.displayName=`StaticTable`;export{i as t};
-//# sourceMappingURL=static-table-D0M4oc_t.js.map

package/dist/chunks/tableClassName-CZA2Bse8.js

@@ -1,2 +0,0 @@
-import e from"classnames";function t({align:t,bordered:n,borderless:r,className:i,color:a,hover:o,sm:s,stacked:c,striped:l}){return e(`table`,a,{[`align-${t}`]:t,bordered:n,borderless:r,hoverable:o,sm:s,stacked:c===!0,striped:l},typeof c==`string`?`max-${c}:stacked`:void 0,i)||void 0}function n({responsive:e,stacked:t}){if(e||t)return!e||e===!0?`table-responsive`:`max-${e}:table-responsive`}export{n,t};
-//# sourceMappingURL=tableClassName-CZA2Bse8.js.map

package/dist/chunks/tableClassName-CZA2Bse8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tableClassName-CZA2Bse8.js","names":[],"sources":["../../src/utils/tableClassName.ts"],"sourcesContent":["import classNames from 'classnames'\n\nimport { Breakpoint, ContextColor } from '../types'\n\n// The styling props `Table` and `StaticTable` share. Kept in one place so the two can't drift into\n// applying different chassis-css classes for the same prop — `StaticTable` exists to be the\n// zero-JS twin of `Table`'s look, so a prop meaning something different on each would defeat it.\nexport interface TableStyleProps {\n  /**\n   * Set the vertical alignment of cell content.\n   */\n  align?: 'bottom' | 'middle' | 'top'\n  /**\n   * Add borders on all sides of the table and cells.\n   */\n  bordered?: boolean\n  /**\n   * Remove borders on all sides of the table and cells.\n   */\n  borderless?: boolean\n  /**\n   * A string of all className you want applied to the component.\n   */\n  className?: string\n  /**\n   * Sets the color of the component.\n   */\n  color?: ContextColor\n  /**\n   * Enable a hover state on table rows.\n   */\n  hover?: boolean\n  /**\n   * Make any table responsive across all viewports or pick a maximum breakpoint.\n   */\n  responsive?: boolean | Breakpoint\n  /**\n   * Make table more compact by cutting all cell padding.\n   */\n  sm?: boolean\n  /**\n   * Convert rows into stacked label/value blocks below a container width, for tables with too\n   * many columns to read comfortably even with horizontal scrolling. `true` always stacks; a\n   * breakpoint name stacks only below it. Implies `responsive` when `responsive` isn't set\n   * separately, since stacking needs the same `.table-responsive` container-query ancestor.\n   */\n  stacked?: boolean | Breakpoint\n  /**\n   * Add zebra-striping to table rows.\n   */\n  striped?: boolean\n}\n\nexport function tableClassName({\n  align,\n  bordered,\n  borderless,\n  className,\n  color,\n  hover,\n  sm,\n  stacked,\n  striped\n}: TableStyleProps): string | undefined {\n  return (\n    classNames(\n      'table',\n      color,\n      {\n        [`align-${align}`]: align,\n        bordered,\n        borderless,\n        hoverable: hover,\n        sm,\n        stacked: stacked === true,\n        striped\n      },\n      typeof stacked === 'string' ? `max-${stacked}:stacked` : undefined,\n      className\n    ) || undefined\n  )\n}\n\n// `undefined` when the table needs no wrapper at all. Stacking needs the same `.table-responsive`\n// container-query ancestor as horizontal scrolling, so `stacked` alone still gets one.\nexport function tableWrapperClassName({\n  responsive,\n  stacked\n}: Pick<TableStyleProps, 'responsive' | 'stacked'>): string | undefined {\n  if (!responsive && !stacked) return undefined\n  if (!responsive || responsive === true) return 'table-responsive'\n  return `max-${responsive}:table-responsive`\n}\n"],"mappings":"0BAqDA,SAAgB,EAAe,CAC7B,QACA,WACA,aACA,YACA,QACA,QACA,KACA,UACA,WACsC,CACtC,OACE,EACE,QACA,EACA,EACG,SAAS,KAAU,EACpB,WACA,aACA,UAAW,EACX,KACA,QAAS,IAAY,GACrB,SACF,EACA,OAAO,GAAY,SAAW,OAAO,EAAQ,UAAY,IAAA,GACzD,CACF,GAAK,IAAA,EAET,CAIA,SAAgB,EAAsB,CACpC,aACA,WACsE,CAClE,GAAC,GAAe,EAEpB,MADI,CAAC,GAAc,IAAe,GAAa,mBACxC,OAAO,EAAW,kBAC3B"}