@atom-learning/components 6.0.0-beta.31 → 6.0.0-beta.33

package/dist/components/chip/Chip.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Icon as l}from"../icon/Icon.js";import{styled as m}from"../../styled.js";import{overrideStyledVariantValue as x}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";const d=m("span",{base:["inline-flex","items-center","px-1","grow","overflow-hidden","text-ellipsis","whitespace-nowrap","*:not-last:mr-1"]}),f={sm:"sm",md:"sm",lg:"md"},r=t=>{const o=e.useContext(a),{size:n}=o,s=e.useMemo(()=>x(n,i=>f[i]),[n]);return e.createElement(l,{...t,size:s})},C=({children:t,...o})=>{const n=e.Children.toArray(t),s=n.length<=1;return e.createElement(d,{...o},n.map((i,y)=>!s&&typeof i=="string"?e.createElement("span",{key:i,className:"overflow-hidden text-ellipsis whitespace-nowrap"},i):e.isValidElement(i)&&i.type===l?e.createElement(r,{key:`icon-${y}`,...i.props}):i))},p=m("div",{base:["px-2","border","rounded-md","items-center","font-body","max-w-full","border-primary-800","text-primary-900","bg-primary-100","disabled:opacity-30","disabled:pointer-events-none"],variants:{size:{sm:["h-6","text-sm","leading-[1.53]","capsize-[0.4056]"],md:["h-8","text-sm","leading-[1.53]","capsize-[0.4056]"],lg:["h-10","text-md","leading-normal","capsize-[0.3864]"]}}}),a=e.createContext({}),c=({size:t,children:o})=>{const n=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:n},o)},h=e.forwardRef(({size:t="md",...o},n)=>e.createElement(c,{size:t},e.createElement(p,{ref:n,size:t,...o}))),z=Object.assign(h,{Content:C,Icon:r});h.displayName="Chip";export{z as Chip,r as ChipIcon,a as ChipRootContext,c as ChipRootProvider,d as StyledChipContent,p as StyledRoot};
+import*as e from"react";import{Icon as l}from"../icon/Icon.js";import{styled as m}from"../../styled.js";import{overrideStyledVariantValue as y}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";const d=m("span",{base:["inline-flex","items-center","px-1","grow","overflow-hidden","text-ellipsis","whitespace-nowrap","*:not-last:mr-1"]}),f={sm:"sm",md:"sm",lg:"md"},r=t=>{const o=e.useContext(a),{size:n}=o,s=e.useMemo(()=>y(n,i=>f[i]),[n]);return e.createElement(l,{...t,size:s})},C=({children:t,...o})=>{const n=e.Children.toArray(t),s=n.length<=1;return e.createElement(d,{...o},n.map((i,x)=>!s&&typeof i=="string"?e.createElement("span",{key:i,className:"overflow-hidden text-ellipsis whitespace-nowrap"},i):e.isValidElement(i)&&i.type===l?e.createElement(r,{key:`icon-${x}`,...i.props}):i))},p=m("div",{base:["flex","px-2","border","rounded-md","items-center","font-body","max-w-full","border-primary-800","text-primary-900","bg-primary-100","disabled:opacity-30","disabled:pointer-events-none"],variants:{size:{sm:["h-6","text-sm","leading-[1.53]","capsize-[0.4056]"],md:["h-8","text-sm","leading-[1.53]","capsize-[0.4056]"],lg:["h-10","text-md","leading-normal","capsize-[0.3864]"]}}}),a=e.createContext({}),c=({size:t,children:o})=>{const n=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:n},o)},h=e.forwardRef(({size:t="md",...o},n)=>e.createElement(c,{size:t},e.createElement(p,{ref:n,size:t,...o}))),z=Object.assign(h,{Content:C,Icon:r});h.displayName="Chip";export{z as Chip,r as ChipIcon,a as ChipRootContext,c as ChipRootProvider,d as StyledChipContent,p as StyledRoot};
 //# sourceMappingURL=Chip.js.map

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nexport const StyledChipContent = styled('span', {\n  base: [\n    'inline-flex',\n    'items-center',\n    'px-1',\n    'grow',\n    'overflow-hidden',\n    'text-ellipsis',\n    'whitespace-nowrap',\n    '*:not-last:mr-1'\n  ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.useContext(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <span\n                key={child}\n                className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n              >\n                {child}\n              </span>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <ChipIcon key={`icon-${index}`} {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled('div', {\n  base: [\n    'px-2',\n    'border',\n    'rounded-md',\n    'items-center',\n    'font-body',\n    'max-w-full',\n    'border-primary-800',\n    'text-primary-900',\n    'bg-primary-100',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n    }\n  }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n  size,\n  children\n}: TChipRootProviderProps) => {\n  const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n  return (\n    <ChipRootContext.Provider value={value}>\n      {children}\n    </ChipRootContext.Provider>\n  )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot = React.forwardRef<HTMLDivElement, TChipRootProps>(\n  ({ size = 'md', ...rest }, ref) => {\n    return (\n      <ChipRootProvider size={size}>\n        <StyledRoot ref={ref} size={size} {...rest} />\n      </ChipRootProvider>\n    )\n  }\n)\n\nexport const Chip = Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStyledVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","StyledRoot","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"iOAMO,MAAMA,EAAoBC,EAAO,OAAQ,CAC9C,KAAM,CACJ,cACA,eACA,OACA,OACA,kBACA,gBACA,oBACA,iBACF,CACF,CAAC,EAEKC,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA2BF,EAAOG,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,CAAAA,CAAU,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,EAAA,CAAmB,GAAGe,CAAAA,EAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAAC,OACC,CAAA,IAAKY,EACL,UAAU,iDAETA,EAAAA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,EAAS,CAAA,IAAK,QAAQgB,CAAK,GAAK,GAAGD,EAAM,KAAA,CAAO,EAEnDA,CACR,CAEL,CAEJ,EAEaE,EAAanB,EAAO,MAAO,CACtC,KAAM,CACJ,OACA,SACA,aACA,eACA,YACA,aACA,qBACA,mBACA,iBACA,sBACA,8BACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,MAAO,UAAW,iBAAkB,kBAAkB,EAC3D,GAAI,CAAC,MAAO,UAAW,iBAAkB,kBAAkB,EAC3D,GAAI,CAAC,OAAQ,UAAW,iBAAkB,kBAAkB,CAC9D,CACF,CACF,CAAC,EAKYM,EAAkBD,EAAM,cAAgC,CAAE,CAAA,EAE1De,EAAmB,CAAC,CAC/B,KAAAb,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMQ,EAAQhB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOe,CAAAA,EAC9BR,CACH,CAEJ,EAIMS,EAAWjB,EAAM,WACrB,CAAC,CAAE,KAAAE,EAAO,KAAM,GAAGO,CAAK,EAAGS,IAEvBlB,EAAA,cAACe,GAAiB,KAAMb,CAAAA,EACtBF,EAAA,cAACc,EAAW,CAAA,IAAKI,EAAK,KAAMhB,EAAO,GAAGO,CAAAA,CAAM,CAC9C,CAGN,EAEaU,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASV,EACT,KAAMV,CACR,CAAC,EAEDoB,EAAS,YAAc"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nexport const StyledChipContent = styled('span', {\n  base: [\n    'inline-flex',\n    'items-center',\n    'px-1',\n    'grow',\n    'overflow-hidden',\n    'text-ellipsis',\n    'whitespace-nowrap',\n    '*:not-last:mr-1'\n  ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.useContext(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <span\n                key={child}\n                className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n              >\n                {child}\n              </span>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <ChipIcon key={`icon-${index}`} {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled('div', {\n  base: [\n    'flex',\n    'px-2',\n    'border',\n    'rounded-md',\n    'items-center',\n    'font-body',\n    'max-w-full',\n    'border-primary-800',\n    'text-primary-900',\n    'bg-primary-100',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n    }\n  }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n  size,\n  children\n}: TChipRootProviderProps) => {\n  const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n  return (\n    <ChipRootContext.Provider value={value}>\n      {children}\n    </ChipRootContext.Provider>\n  )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot = React.forwardRef<HTMLDivElement, TChipRootProps>(\n  ({ size = 'md', ...rest }, ref) => {\n    return (\n      <ChipRootProvider size={size}>\n        <StyledRoot ref={ref} size={size} {...rest} />\n      </ChipRootProvider>\n    )\n  }\n)\n\nexport const Chip = Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStyledVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","StyledRoot","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"iOAMO,MAAMA,EAAoBC,EAAO,OAAQ,CAC9C,KAAM,CACJ,cACA,eACA,OACA,OACA,kBACA,gBACA,oBACA,iBACF,CACF,CAAC,EAEKC,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA2BF,EAAOG,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,CAAU,CAAA,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,EAAmB,CAAA,GAAGe,CAEnBC,EAAAA,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAAC,OAAA,CACC,IAAKY,EACL,UAAU,iDAAA,EAETA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,GAAS,IAAK,QAAQgB,CAAK,GAAK,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaE,EAAanB,EAAO,MAAO,CACtC,KAAM,CACJ,OACA,OACA,SACA,aACA,eACA,YACA,aACA,qBACA,mBACA,iBACA,sBACA,8BACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,MAAO,UAAW,iBAAkB,kBAAkB,EAC3D,GAAI,CAAC,MAAO,UAAW,iBAAkB,kBAAkB,EAC3D,GAAI,CAAC,OAAQ,UAAW,iBAAkB,kBAAkB,CAC9D,CACF,CACF,CAAC,EAKYM,EAAkBD,EAAM,cAAgC,CAAA,CAAE,EAE1De,EAAmB,CAAC,CAC/B,KAAAb,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMQ,EAAQhB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOe,CAAAA,EAC9BR,CACH,CAEJ,EAIMS,EAAWjB,EAAM,WACrB,CAAC,CAAE,KAAAE,EAAO,KAAM,GAAGO,CAAK,EAAGS,IAEvBlB,EAAA,cAACe,GAAiB,KAAMb,CAAAA,EACtBF,EAAA,cAACc,EAAW,CAAA,IAAKI,EAAK,KAAMhB,EAAO,GAAGO,CAAAA,CAAM,CAC9C,CAGN,EAEaU,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASV,EACT,KAAMV,CACR,CAAC,EAEDoB,EAAS,YAAc"}

package/dist/components/data-table/DataTable.d.ts

@@ -6,7 +6,7 @@
 export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defaultSort, initialState, disabledRows, enableRowSelection, onRowSelectionChange, children }: {
     columns: any;
     defaultSort?: import("./DataTable.types").TDefaultSort;
-    children: React.ReactNode;
+    children: import("react").ReactNode;
     initialState?: import("./DataTable.types").InitialState;
     disabledRows?: Record<string, boolean>;
     enableRowSelection?: boolean | ((row: import("@tanstack/table-core").Row<unknown>) => boolean);
@@ -30,7 +30,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     } & {
         as?: import("react").ElementType;
     }, "children"> & {
-        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
     }) => import("react").JSX.Element;
     /** Default table data cell implementation for `DataTable`
      *
@@ -83,7 +83,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             showTotalInFirstColumn?: boolean;
             totalSuffix?: string;
         };
-        rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
+        rowAction?: (row: Record<string, unknown>, event: import("react").MouseEvent) => void;
         withContainer?: boolean;
     } & {
         className?: string;
@@ -121,7 +121,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         stickyOffset?: number;
         showTotalInFirstColumn?: boolean;
         totalSuffix?: string;
-    }) => React.ReactElement;
+    }) => import("react").ReactElement;
     /** Default header implementation for `DataTable`
      *
      * Can be configured to make the column sortable. If you need more customisation options,
@@ -142,7 +142,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * you can build your own implementation with `useDataTable` and other UI components.
      *
      */
-    MetaData: ({ copy, ...rest }: React.ComponentProps<typeof import("..").Text> & {
+    MetaData: ({ copy, ...rest }: import("react").ComponentProps<typeof import("..").Text> & {
         copy?: {
             sorted_by?: string;
             ascending?: string;
@@ -187,7 +187,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation, you can compose your own implentation, `asyncDataState`
      * can be retrieved from `useDataTable`
      */
-    Loading: (props: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    Loading: (props: import("react").ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, "direction" | "align" | "wrap" | "justify" | "gap"> & {
         direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
@@ -215,7 +215,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Error: ({ children }: {
-        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => React.ReactElement;
+        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => import("react").ReactElement;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     /** Empty state implementation for `DataTable`.
      *
@@ -252,37 +252,37 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         checked: boolean | "indeterminate";
         onCheckedChange: (value: boolean) => void;
         label?: string;
-    }) => React.ReactElement;
+    }) => import("react").ReactElement;
     /** Bulk actions for selected rows.
      *
      * Renders a toolbar with actions that can be applied to all selected rows
      */
     BulkActions: (({ children, ...rest }: {
-        children: React.ReactElement<React.ComponentProps<({ children }: {
-            children: React.ReactElement;
-        }) => React.ReactElement | null>> | React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
+        children: import("react").ReactElement<import("react").ComponentProps<({ children }: {
+            children: import("react").ReactElement;
+        }) => import("react").ReactElement | null>> | import("react").ReactElement<import("react").ComponentProps<({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: React.ReactNode;
-        }) => import("react").JSX.Element | null>> | [React.ReactElement<React.ComponentProps<({ children }: {
-            children: React.ReactElement;
-        }) => React.ReactElement | null>>, React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
+            children: import("react").ReactNode;
+        }) => import("react").JSX.Element | null>> | [import("react").ReactElement<import("react").ComponentProps<({ children }: {
+            children: import("react").ReactElement;
+        }) => import("react").ReactElement | null>>, import("react").ReactElement<import("react").ComponentProps<({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: React.ReactNode;
+            children: import("react").ReactNode;
         }) => import("react").JSX.Element | null>>];
     }) => import("react").JSX.Element) & {
         DefaultActions: ({ children }: {
-            children: React.ReactElement;
-        }) => React.ReactElement | null;
+            children: import("react").ReactElement;
+        }) => import("react").ReactElement | null;
         SelectedRowActions: ({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: React.ReactNode;
+            children: import("react").ReactNode;
         }) => import("react").JSX.Element | null;
     };
     /** Bulk actions for selected rows.
      *
      * Renders a toolbar with actions that can be applied to all selected rows
      */
-    BulkActionsFloating: (({ children, ...rest }: React.PropsWithChildren<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    BulkActionsFloating: (({ children, ...rest }: import("react").PropsWithChildren<import("react").ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, "direction" | "align" | "wrap" | "justify" | "gap"> & {
         direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
@@ -298,7 +298,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         SelectedRowActions: ({ cancelLabel, showDividers, children }: {
             cancelLabel?: string;
             showDividers?: boolean;
-            children: React.ReactNode;
+            children: import("react").ReactNode;
         }) => import("react").JSX.Element | null;
     };
 };

package/dist/components/data-table/DataTable.types.d.ts

@@ -31,6 +31,7 @@ export type DataTableContextType<T = unknown> = Table<T> & {
     isSortable: boolean;
     asyncDataState?: AsyncDataState;
     runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>;
+    hasAsyncData: boolean;
     disabledRows?: Record<string, boolean>;
     enableRowSelection?: boolean | ((row: Row<unknown>) => boolean);
     rowSelection: RowSelectionState;

package/dist/components/data-table/DataTable.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.types.js","sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: TAsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"names":["AsyncDataState"],"mappings":"AAkBO,IAAKA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WAJDA,IAAAA,GAAA,CAAA,CAAA"}
+{"version":3,"file":"DataTable.types.js","sources":["../../../src/components/data-table/DataTable.types.ts"],"sourcesContent":["import type {\n  ColumnOrderTableState,\n  ColumnPinningTableState,\n  ColumnSizingTableState,\n  ExpandedTableState,\n  FiltersTableState,\n  GroupingTableState,\n  PaginationTableState,\n  Row,\n  RowSelectionState,\n  RowSelectionTableState,\n  SortDirection,\n  SortingTableState,\n  Table,\n  VisibilityTableState\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nexport enum AsyncDataState {\n  NONE = 'none',\n  PENDING = 'pending',\n  FULFILLED = 'fulfilled',\n  REJECTED = 'rejected'\n}\n\nexport type TAsyncDataResult = {\n  total: number\n  results: TableData\n}\n\nexport type TAsyncDataOptions = {\n  pageIndex: number\n  pageSize: number\n  sortBy?: string\n  sortDirection?: SortDirection\n  globalFilter?: string\n}\n\nexport type TGetAsyncData = (\n  options: TAsyncDataOptions\n) => Promise<TAsyncDataResult | undefined>\n\nexport type TablePosition = {\n  top: number | null\n  bottom: number | null\n  offsetTop: number\n  isVisible: boolean\n}\n\nexport type DataTableContextType<T = unknown> = Table<T> & {\n  setIsSortable: React.Dispatch<React.SetStateAction<boolean>>\n  applyPagination: () => void\n  getTotalRows: () => number\n  isSortable: boolean\n  asyncDataState?: AsyncDataState\n  runAsyncData?: (options: Partial<TAsyncDataOptions>) => Promise<void>\n  hasAsyncData: boolean\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  rowSelection: RowSelectionState\n  tablePosition?: TablePosition\n  setTablePosition: React.Dispatch<React.SetStateAction<TablePosition>>\n  data: TAsyncDataResult\n  columns: any\n  tableId: string\n  /**\n   * Directly update the data array that the table rows are built from.\n   * This is useful when re-ordering rows, but is high-risk if you're not sure what you're doing!\n   *\n   *  Note in particular that this value is also updated if you update the value of the `DataTable`'s `data` prop\n   *  — it's probably best to only use one of those two methods for any given table.\n   */\n  setData: React.Dispatch<React.SetStateAction<TAsyncDataResult>>\n}\n\nexport type TableData = Array<Record<string, unknown>>\n\nexport type InitialState = Partial<\n  VisibilityTableState &\n    ColumnOrderTableState &\n    ColumnPinningTableState &\n    FiltersTableState &\n    SortingTableState &\n    ExpandedTableState &\n    GroupingTableState &\n    ColumnSizingTableState &\n    PaginationTableState &\n    RowSelectionTableState\n>\n\nexport type TDefaultSort = { column: string; direction: SortDirection }\n"],"names":["AsyncDataState"],"mappings":"AAkBO,IAAKA,GAAAA,IACVA,EAAA,KAAO,OACPA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WAJDA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/components/data-table/DataTableContext.js

@@ -1,2 +1,2 @@
-import{v4 as U}from"@lukeed/uuid";import{useReactTable as Y,getCoreRowModel as q,getPaginationRowModel as H,getSortedRowModel as K,getFilteredRowModel as Q,getExpandedRowModel as W}from"@tanstack/react-table";import*as e from"react";import X from"use-deep-compare-effect";import{AsyncDataState as i}from"./DataTable.types.js";import{getNewAsyncData as Z}from"./getNewAsyncData.js";import{usePagination as _}from"./usePagination.js";import{useSortByColumn as $}from"./useSorting.js";const M=e.createContext(null),ee=({columns:l,data:a=[],getAsyncData:n,defaultSort:T,initialState:g=void 0,disabledRows:x,enableRowSelection:u,onRowSelectionChange:C,children:F})=>{const P=e.useRef(U()),[d,c]=e.useState({results:a??[],total:(a==null?void 0:a.length)??0}),[S,I]=e.useState({}),[N,L]=e.useState({}),[A,G]=e.useState({top:null,bottom:null,offsetTop:0,isVisible:!0}),{isPaginated:s,applyPagination:D,paginationState:o,setPaginationState:k}=_(g==null?void 0:g.pagination),[y,b]=e.useState(i.NONE),[w,z]=e.useState(""),{setIsSortable:O,isSortable:p,sorting:r,setSorting:j}=$(T),m=e.useCallback(async t=>{if(n)try{b(i.PENDING);const f=await Z(n,t,o,r,w);c(f),b(i.FULFILLED)}catch{b(i.REJECTED)}},[n,o==null?void 0:o.pageIndex,o==null?void 0:o.pageSize,r,w]);e.useEffect(()=>{m({})},[m]),X(()=>{a&&c({results:a,total:a.length})},[a]);const R=()=>d.total;Object.keys(S||{}).length>0;const E=Y({columns:l,data:d.results,pageCount:o?Math.ceil(R()/o.pageSize):-1,initialState:g,state:{sorting:r,globalFilter:w,pagination:o,rowSelection:S,expanded:N},manualPagination:n&&s,manualSorting:n&&s,enableSorting:y!==i.PENDING,enableGlobalFilter:!n,enableRowSelection:u,onExpandedChange:L,getSubRows:t=>t.subRows,onRowSelectionChange:t=>{C&&C(t),I(t)},getCoreRowModel:q(),getPaginationRowModel:s?H():void 0,getSortedRowModel:p||r.length?K():void 0,getFilteredRowModel:Q(),getExpandedRowModel:W(),onPaginationChange:s?k:void 0,onSortingChange:j,onGlobalFilterChange:z,globalFilterFn:(t,f,V)=>{const v=B=>B.toLowerCase().includes(V.toLowerCase());if(t.depth>0)return!0;const h=t.getValue(f);switch(typeof h){case"string":return v(h);case"boolean":case"number":return v(String(h));default:return!1}}}),J=e.useMemo(()=>({...E,columns:l,data:d,setData:c,setIsSortable:O,applyPagination:D,getTotalRows:R,isSortable:p,asyncDataState:y,runAsyncData:m,disabledRows:x,enableRowSelection:u,rowSelection:S,tablePosition:A,setTablePosition:G,tableId:P.current}),[E,D,R,p,u,P]);return e.createElement(M.Provider,{value:J},F)},te=()=>{const l=e.useContext(M);if(!l)throw new Error("useDataTable can only be called from inside a DataTableProvider");return l};export{ee as DataTableProvider,te as useDataTable};
+import{v4 as Y}from"@lukeed/uuid";import{useReactTable as j,getCoreRowModel as q,getPaginationRowModel as H,getSortedRowModel as K,getFilteredRowModel as Q,getExpandedRowModel as W}from"@tanstack/react-table";import*as e from"react";import X from"use-deep-compare-effect";import{AsyncDataState as i}from"./DataTable.types.js";import{getNewAsyncData as Z}from"./getNewAsyncData.js";import{usePagination as _}from"./usePagination.js";import{useSortByColumn as $}from"./useSorting.js";const M=e.createContext(null),ee=({columns:l,data:n=[],getAsyncData:t,defaultSort:T,initialState:g=void 0,disabledRows:x,enableRowSelection:u,onRowSelectionChange:h,children:F})=>{const C=e.useRef(Y()),[d,c]=e.useState({results:n??[],total:(n==null?void 0:n.length)??0}),[P,I]=e.useState({}),[N,A]=e.useState({}),[L,G]=e.useState({top:null,bottom:null,offsetTop:0,isVisible:!0}),{isPaginated:s,applyPagination:D,paginationState:a,setPaginationState:z}=_(g==null?void 0:g.pagination),[y,S]=e.useState(i.NONE),[b,k]=e.useState(""),{setIsSortable:B,isSortable:w,sorting:r,setSorting:J}=$(T),m=e.useCallback(async o=>{if(t)try{S(i.PENDING);const R=await Z(t,o,a,r,b);c(R),S(i.FULFILLED)}catch{S(i.REJECTED)}},[t,a==null?void 0:a.pageIndex,a==null?void 0:a.pageSize,r,b]);e.useEffect(()=>{m({})},[m]),X(()=>{n&&c({results:n,total:n.length})},[n]);const p=()=>d.total,E=j({columns:l,data:d.results,pageCount:t&&a?Math.ceil(p()/a.pageSize):-1,initialState:g,state:{sorting:r,globalFilter:b,pagination:a,rowSelection:P,expanded:N},manualPagination:t&&s,manualSorting:t&&s,enableSorting:y!==i.PENDING,enableGlobalFilter:!t,enableRowSelection:u,onExpandedChange:A,getSubRows:o=>o.subRows,onRowSelectionChange:o=>{h&&h(o),I(o)},getCoreRowModel:q(),getPaginationRowModel:s?H():void 0,getSortedRowModel:w||r.length?K():void 0,getFilteredRowModel:Q(),getExpandedRowModel:W(),onPaginationChange:s?z:void 0,onSortingChange:J,onGlobalFilterChange:k,globalFilterFn:(o,R,V)=>{const v=U=>U.toLowerCase().includes(V.toLowerCase());if(o.depth>0)return!0;const f=o.getValue(R);switch(typeof f){case"string":return v(f);case"boolean":case"number":return v(String(f));default:return!1}}}),O=e.useMemo(()=>({...E,columns:l,data:d,setData:c,setIsSortable:B,applyPagination:D,getTotalRows:p,isSortable:w,asyncDataState:y,runAsyncData:m,hasAsyncData:!!t,disabledRows:x,enableRowSelection:u,rowSelection:P,tablePosition:L,setTablePosition:G,tableId:C.current}),[E,D,p,w,u,C,t]);return e.createElement(M.Provider,{value:O},F)},te=()=>{const l=e.useContext(M);if(!l)throw new Error("useDataTable can only be called from inside a DataTableProvider");return l};export{ee as DataTableProvider,te as useDataTable};
 //# sourceMappingURL=DataTableContext.js.map

package/dist/components/data-table/DataTableContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  Row,\n  RowSelectionState\n} from '@tanstack/react-table'\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n  AsyncDataState,\n  DataTableContextType,\n  InitialState,\n  TableData,\n  TablePosition,\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TDefaultSort,\n  TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n  React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n  columns\n  defaultSort?: TDefaultSort\n  children: React.ReactNode\n  initialState?: InitialState\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n  | { data: TableData; getAsyncData?: never }\n  | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n  columns,\n  data: dataProp = [],\n  getAsyncData,\n  defaultSort,\n  initialState = undefined,\n  disabledRows,\n  enableRowSelection,\n  onRowSelectionChange,\n  children\n}: DataTableProviderProps): JSX.Element => {\n  const tableId = React.useRef(uuid())\n\n  const [data, setData] = React.useState<TAsyncDataResult>({\n    results: dataProp ?? [],\n    total: dataProp?.length ?? 0\n  })\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n  const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n  const [tablePosition, setTablePosition] = React.useState<TablePosition>({\n    top: null,\n    bottom: null,\n    offsetTop: 0,\n    isVisible: true\n  })\n\n  const { isPaginated, applyPagination, paginationState, setPaginationState } =\n    usePagination(initialState?.pagination)\n\n  const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n    AsyncDataState.NONE\n  )\n\n  const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n  const { setIsSortable, isSortable, sorting, setSorting } =\n    useSortByColumn(defaultSort)\n\n  const runAsyncData = React.useCallback(\n    async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n      if (!getAsyncData) return\n\n      try {\n        setAsyncDataState(AsyncDataState.PENDING)\n\n        const newData = await getNewAsyncData(\n          getAsyncData,\n          overrideAsyncDataOptions,\n          paginationState as PaginationState,\n          sorting,\n          globalFilter\n        )\n\n        setData(newData as TAsyncDataResult)\n        setAsyncDataState(AsyncDataState.FULFILLED)\n      } catch (error) {\n        setAsyncDataState(AsyncDataState.REJECTED)\n      }\n    },\n    [\n      getAsyncData,\n      paginationState?.pageIndex,\n      paginationState?.pageSize,\n      sorting,\n      globalFilter\n    ]\n  )\n\n  React.useEffect(() => {\n    runAsyncData({})\n  }, [runAsyncData])\n\n  useDeepCompareEffect(() => {\n    if (!dataProp) return\n\n    setData({ results: dataProp, total: dataProp.length })\n  }, [dataProp])\n\n  const getTotalRows = () => data.total\n\n  const hasSelectedRows = Object.keys(rowSelection || {}).length > 0\n\n  const table = useReactTable<unknown>({\n    columns,\n    data: data.results,\n    pageCount: paginationState\n      ? Math.ceil(getTotalRows() / paginationState.pageSize)\n      : -1,\n    initialState: initialState,\n    state: {\n      sorting,\n      globalFilter,\n      pagination: paginationState,\n      rowSelection,\n      expanded\n    },\n    manualPagination: getAsyncData && isPaginated,\n    manualSorting: getAsyncData && isPaginated,\n    enableSorting: asyncDataState !== AsyncDataState.PENDING,\n    enableGlobalFilter: !getAsyncData,\n    enableRowSelection,\n    onExpandedChange: setExpanded,\n    getSubRows: (row: Row<unknown>) => row.subRows,\n    onRowSelectionChange: (updaterOrValue) => {\n      if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n      setRowSelection(updaterOrValue)\n    },\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n    getSortedRowModel:\n      isSortable || sorting.length ? getSortedRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    onPaginationChange: isPaginated ? setPaginationState : undefined,\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    globalFilterFn: (row, columnId, filterValue) => {\n      const checkFilterMatchesCell = (cellValue: string) =>\n        cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n      const isSubRow = row.depth > 0\n\n      if (isSubRow) return true\n\n      const value = row.getValue(columnId)\n      switch (typeof value) {\n        case 'string':\n          return checkFilterMatchesCell(value)\n        case 'boolean':\n        case 'number':\n          return checkFilterMatchesCell(String(value))\n        default:\n          return false\n      }\n    }\n  })\n\n  const value: DataTableContextType = React.useMemo(() => {\n    return {\n      ...table,\n      columns,\n      data,\n      setData,\n      setIsSortable,\n      applyPagination,\n      getTotalRows,\n      isSortable,\n      asyncDataState,\n      runAsyncData,\n      disabledRows,\n      enableRowSelection,\n      rowSelection,\n      tablePosition,\n      setTablePosition,\n      tableId: tableId.current\n    }\n  }, [\n    table,\n    applyPagination,\n    getTotalRows,\n    isSortable,\n    enableRowSelection,\n    tableId\n  ])\n\n  return (\n    <DataTableContext.Provider value={value}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n  const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n  if (!context)\n    throw new Error(\n      'useDataTable can only be called from inside a DataTableProvider'\n    )\n\n  return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","disabledRows","enableRowSelection","onRowSelectionChange","children","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","tablePosition","setTablePosition","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","updaterOrValue","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}
+{"version":3,"file":"DataTableContext.js","sources":["../../../src/components/data-table/DataTableContext.tsx"],"sourcesContent":["import { v4 as uuid } from '@lukeed/uuid'\nimport type {\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  Row,\n  RowSelectionState\n} from '@tanstack/react-table'\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table'\nimport * as React from 'react'\nimport useDeepCompareEffect from 'use-deep-compare-effect'\n\nimport {\n  AsyncDataState,\n  DataTableContextType,\n  InitialState,\n  TableData,\n  TablePosition,\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TDefaultSort,\n  TGetAsyncData\n} from './DataTable.types'\nimport { getNewAsyncData } from './getNewAsyncData'\nimport { usePagination } from './usePagination'\nimport { useSortByColumn } from './useSorting'\n\nconst DataTableContext =\n  React.createContext<DataTableContextType<unknown> | null>(null)\n\ntype DataTableProviderProps = {\n  columns\n  defaultSort?: TDefaultSort\n  children: React.ReactNode\n  initialState?: InitialState\n  disabledRows?: Record<string, boolean>\n  enableRowSelection?: boolean | ((row: Row<unknown>) => boolean)\n  onRowSelectionChange?: OnChangeFn<RowSelectionState>\n} & (\n  | { data: TableData; getAsyncData?: never }\n  | { data?: never; getAsyncData: TGetAsyncData }\n)\n\nexport const DataTableProvider = ({\n  columns,\n  data: dataProp = [],\n  getAsyncData,\n  defaultSort,\n  initialState = undefined,\n  disabledRows,\n  enableRowSelection,\n  onRowSelectionChange,\n  children\n}: DataTableProviderProps): JSX.Element => {\n  const tableId = React.useRef(uuid())\n\n  const [data, setData] = React.useState<TAsyncDataResult>({\n    results: dataProp ?? [],\n    total: dataProp?.length ?? 0\n  })\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})\n  const [expanded, setExpanded] = React.useState<ExpandedState>({})\n\n  const [tablePosition, setTablePosition] = React.useState<TablePosition>({\n    top: null,\n    bottom: null,\n    offsetTop: 0,\n    isVisible: true\n  })\n\n  const { isPaginated, applyPagination, paginationState, setPaginationState } =\n    usePagination(initialState?.pagination)\n\n  const [asyncDataState, setAsyncDataState] = React.useState<AsyncDataState>(\n    AsyncDataState.NONE\n  )\n\n  const [globalFilter, setGlobalFilter] = React.useState<string>('')\n\n  const { setIsSortable, isSortable, sorting, setSorting } =\n    useSortByColumn(defaultSort)\n\n  const runAsyncData = React.useCallback(\n    async (overrideAsyncDataOptions: Partial<TAsyncDataOptions>) => {\n      if (!getAsyncData) return\n\n      try {\n        setAsyncDataState(AsyncDataState.PENDING)\n\n        const newData = await getNewAsyncData(\n          getAsyncData,\n          overrideAsyncDataOptions,\n          paginationState as PaginationState,\n          sorting,\n          globalFilter\n        )\n\n        setData(newData as TAsyncDataResult)\n        setAsyncDataState(AsyncDataState.FULFILLED)\n      } catch (error) {\n        setAsyncDataState(AsyncDataState.REJECTED)\n      }\n    },\n    [\n      getAsyncData,\n      paginationState?.pageIndex,\n      paginationState?.pageSize,\n      sorting,\n      globalFilter\n    ]\n  )\n\n  React.useEffect(() => {\n    runAsyncData({})\n  }, [runAsyncData])\n\n  useDeepCompareEffect(() => {\n    if (!dataProp) return\n\n    setData({ results: dataProp, total: dataProp.length })\n  }, [dataProp])\n\n  const getTotalRows = () => data.total\n\n  const table = useReactTable<unknown>({\n    columns,\n    data: data.results,\n    pageCount:\n      getAsyncData && paginationState\n        ? Math.ceil(getTotalRows() / paginationState.pageSize)\n        : -1,\n    initialState: initialState,\n    state: {\n      sorting,\n      globalFilter,\n      pagination: paginationState,\n      rowSelection,\n      expanded\n    },\n    manualPagination: getAsyncData && isPaginated,\n    manualSorting: getAsyncData && isPaginated,\n    enableSorting: asyncDataState !== AsyncDataState.PENDING,\n    enableGlobalFilter: !getAsyncData,\n    enableRowSelection,\n    onExpandedChange: setExpanded,\n    getSubRows: (row: Row<unknown>) => row.subRows,\n    onRowSelectionChange: (updaterOrValue) => {\n      if (onRowSelectionChange) onRowSelectionChange(updaterOrValue)\n      setRowSelection(updaterOrValue)\n    },\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: isPaginated ? getPaginationRowModel() : undefined,\n    getSortedRowModel:\n      isSortable || sorting.length ? getSortedRowModel() : undefined,\n    getFilteredRowModel: getFilteredRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    onPaginationChange: isPaginated ? setPaginationState : undefined,\n    onSortingChange: setSorting,\n    onGlobalFilterChange: setGlobalFilter,\n    globalFilterFn: (row, columnId, filterValue) => {\n      const checkFilterMatchesCell = (cellValue: string) =>\n        cellValue.toLowerCase().includes(filterValue.toLowerCase())\n\n      const isSubRow = row.depth > 0\n\n      if (isSubRow) return true\n\n      const value = row.getValue(columnId)\n      switch (typeof value) {\n        case 'string':\n          return checkFilterMatchesCell(value)\n        case 'boolean':\n        case 'number':\n          return checkFilterMatchesCell(String(value))\n        default:\n          return false\n      }\n    }\n  })\n\n  const value: DataTableContextType = React.useMemo(() => {\n    return {\n      ...table,\n      columns,\n      data,\n      setData,\n      setIsSortable,\n      applyPagination,\n      getTotalRows,\n      isSortable,\n      asyncDataState,\n      runAsyncData,\n      hasAsyncData: !!getAsyncData,\n      disabledRows,\n      enableRowSelection,\n      rowSelection,\n      tablePosition,\n      setTablePosition,\n      tableId: tableId.current\n    }\n  }, [\n    table,\n    applyPagination,\n    getTotalRows,\n    isSortable,\n    enableRowSelection,\n    tableId,\n    getAsyncData\n  ])\n\n  return (\n    <DataTableContext.Provider value={value}>\n      {children}\n    </DataTableContext.Provider>\n  )\n}\n\nexport const useDataTable = <T extends Record<string, unknown>>() => {\n  const context = React.useContext(DataTableContext) as DataTableContextType<T>\n\n  if (!context)\n    throw new Error(\n      'useDataTable can only be called from inside a DataTableProvider'\n    )\n\n  return context\n}\n"],"names":["DataTableContext","React","DataTableProvider","columns","dataProp","getAsyncData","defaultSort","initialState","disabledRows","enableRowSelection","onRowSelectionChange","children","tableId","uuid","data","setData","rowSelection","setRowSelection","expanded","setExpanded","tablePosition","setTablePosition","isPaginated","applyPagination","paginationState","setPaginationState","usePagination","asyncDataState","setAsyncDataState","AsyncDataState","globalFilter","setGlobalFilter","setIsSortable","isSortable","sorting","setSorting","useSortByColumn","runAsyncData","overrideAsyncDataOptions","newData","getNewAsyncData","useDeepCompareEffect","getTotalRows","table","useReactTable","row","updaterOrValue","getCoreRowModel","getPaginationRowModel","getSortedRowModel","getFilteredRowModel","getExpandedRowModel","columnId","filterValue","checkFilterMatchesCell","cellValue","value","useDataTable","context"],"mappings":"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"}

package/dist/components/data-table/DataTableHead.js

@@ -1,2 +1,2 @@
-import h from"clsx";import*as t from"react";import{Table as n}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as D}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as N}from"./DataTableContext.js";import{DataTable as A}from"./DataTable.js";const F=({sortable:u=!0,theme:p="light",isSticky:s=!1,stickyOffset:a=0,showTotalInFirstColumn:y,totalSuffix:v,style:E,className:S,...T})=>{var c;const{getHeaderGroups:_,setIsSortable:f,enableRowSelection:w,getCanSomeRowsExpand:R,tablePosition:e,setTablePosition:g}=N();t.useEffect(()=>{f(u)},[u,f]);const o=t.useRef(null),i=t.useRef(null),x=t.useRef(0),[m,C]=t.useState(0),[H,d]=t.useState(!1),b=(c=o==null?void 0:o.current)==null?void 0:c.closest("thead");if(b&&(e==null?void 0:e.offsetTop)===null){const l=b.getBoundingClientRect().height,r=a+l;e&&g({...e,offsetTop:r||0})}return t.useEffect(()=>{if(s&&(!i.current&&o.current&&(i.current=o.current.closest("table")),i.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const l=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<a&&e.bottom>100?-e.top+a:0;l!==0&&d(!0),x.current=l,C(l),requestAnimationFrame(()=>{d(!1)})}},[s,a,e]),t.createElement(n.Header,{theme:p,style:{...E,"--header-offset":`${m}px`},...T,className:h("relative","z-3","[&_tr:not(:last-child)>th]:border-b-none","[&_tr:not(:first-child)>th]:rounded-none!",S)},_().map(l=>t.createElement(n.Row,{key:l.id,ref:o,className:s&&m!==0?h("translate-y-(--header-offset)",H?"delay-0ms opacity-0 transition-none":"delay-150ms opacity-100 transition-opacity duration-100","[&_th]:last:before:absolute","[&_th]:last:before:bottom-0","[&_th]:last:before:pointer-events-none","[&_th]:last:before:right-0","[&_th]:last:before:shadow-sm","[&_th]:last:before:top-0","[&_th]:last:before:w-full"):void 0},R()&&t.createElement(n.HeaderCell,{className:"w-10"}),w&&t.createElement(n.HeaderCell,{className:"w-10"},t.createElement(D,null)),l.headers.map((r,k)=>t.createElement(A.HeaderCell,{header:r,key:r.id,includeTotal:k===0&&y,totalSuffix:v})))))};export{F as DataTableHead};
+import h from"clsx";import*as t from"react";import{Table as n}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as D}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as N}from"./DataTableContext.js";import{DataTable as $}from"./DataTable.js";const A=({sortable:u=!0,theme:p="light",isSticky:s=!1,stickyOffset:a=0,showTotalInFirstColumn:y,totalSuffix:v,style:E,className:S,...T})=>{var c;const{getHeaderGroups:_,setIsSortable:f,enableRowSelection:w,getCanSomeRowsExpand:R,tablePosition:e,setTablePosition:g}=N();t.useEffect(()=>{f(u)},[u,f]);const o=t.useRef(null),i=t.useRef(null),x=t.useRef(0),[m,C]=t.useState(0),[H,d]=t.useState(!1),b=(c=o==null?void 0:o.current)==null?void 0:c.closest("thead");if(b&&(e==null?void 0:e.offsetTop)===null){const l=b.getBoundingClientRect().height,r=a+l;e&&g({...e,offsetTop:r||0})}return t.useEffect(()=>{if(s&&(!i.current&&o.current&&(i.current=o.current.closest("table")),i.current&&(e==null?void 0:e.top)!==null&&(e==null?void 0:e.bottom)!==null)){const l=(e==null?void 0:e.top)!=null&&(e==null?void 0:e.bottom)!=null&&e.top<a&&e.bottom>100?-e.top+a:0;l!==0&&d(!0),x.current=l,C(l),requestAnimationFrame(()=>{d(!1)})}},[s,a,e]),t.createElement(n.Header,{theme:p,style:{...E,"--header-offset":`${m}px`},...T,className:h("relative","z-3","[&_tr:not(:last-child)>th]:border-b-none","[&_tr:not(:first-child)>th]:rounded-none!",S)},_().map(l=>t.createElement(n.Row,{key:l.id,ref:o,className:s&&m!==0?h("translate-y-(--header-offset)",H?"delay-0ms opacity-0 transition-none":"delay-150ms opacity-100 transition-opacity duration-100","[&_th]:last:before:absolute","[&_th]:last:before:bottom-0","[&_th]:last:before:pointer-events-none","[&_th]:last:before:right-0","[&_th]:last:before:shadow-sm","[&_th]:last:before:top-0","[&_th]:last:before:w-full"):void 0},R()&&t.createElement(n.HeaderCell,{className:"w-10"}),w&&t.createElement(n.HeaderCell,{className:"w-10"},t.createElement(D,null)),l.headers.map((r,k)=>t.createElement($.HeaderCell,{header:r,key:r.id,includeTotal:k===0&&y,totalSuffix:v})))))};export{A as DataTableHead};
 //# sourceMappingURL=DataTableHead.js.map

package/dist/components/data-table/DataTableHeaderCell.js

@@ -1,2 +1,2 @@
-import{ArrowUp as x,ArrowDown as h}from"@atom-learning/icons";import{flexRender as E}from"@tanstack/react-table";import D from"clsx";import*as o from"react";import{useHover as T}from"react-aria";import{styled as s}from"../../styled.js";import{Flex as c}from"../flex/Flex.js";import{Icon as k}from"../icon/Icon.js";import{Table as C}from"../table/Table.js";import{Text as H}from"../text/Text.js";import{useDataTable as N}from"./DataTableContext.js";const z=s(H,{base:["text-grey-600","whitespace-nowrap","hidden","min-[800px]:block"]}),I=s(C.HeaderCell,{base:[],variants:{isSortable:{true:["*:relative","before:absolute","before:bg-primary-100","before:content-['']","before:duration-200","before:ease-in","before:inset-0","before:opacity-0","before:transition-opacity","cursor-pointer","hover:before:opacity-50","relative"]}}}),A={asc:x,desc:h},F=({direction:e})=>o.createElement(k,{is:A[e],size:"sm",className:"stroke-primary-900 absolute left-1"}),K=({header:e,includeTotal:p=!1,totalSuffix:f="items",children:R,className:b,...d})=>{var n,i;const m=e.column.getIsSorted(),{isSortable:t,getRowModel:u}=N(),a=e.column.getCanSort(),g=(i=(n=u())==null?void 0:n.rows)==null?void 0:i.length,{hoverProps:y,isHovered:v}=T({}),S=(r,w)=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),w(r))},l=e.column.getToggleSortingHandler();return o.createElement(I,{isSortable:t&&a,colSpan:e.colSpan,onClick:t&&a&&l?l:void 0,onKeyDown:r=>t&&a&&l&&S(r,l),tabIndex:t&&a?0:-1,...y,className:b,...d},o.createElement(c,{align:"center",gap:1,justify:e.colSpan>1?"center":"flex-start"},E(e.column.columnDef.header,e.getContext()),m&&t&&o.createElement(c,{align:"center",className:D("relative","size-6","ml-2",v?"bg-primary-200":"bg-primary-100","rounded-sm")},o.createElement(F,{direction:m})),p&&o.createElement(z,{size:"sm",weight:"normal"},"(",g," ",f,")")))};export{K as DataTableHeaderCell};
+import{ArrowUp as x,ArrowDown as h}from"@atom-learning/icons";import{flexRender as E}from"@tanstack/react-table";import D from"clsx";import*as t from"react";import{useHover as T}from"react-aria";import{styled as s}from"../../styled.js";import{Flex as c}from"../flex/Flex.js";import{Icon as k}from"../icon/Icon.js";import{Table as C}from"../table/Table.js";import{Text as H}from"../text/Text.js";import{useDataTable as N}from"./DataTableContext.js";const z=s(H,{base:["text-grey-600","whitespace-nowrap","hidden","min-[800px]:block"]}),I=s(C.HeaderCell,{base:[],variants:{isSortable:{true:["*:relative","before:absolute","before:bg-primary-100","before:duration-200","before:ease-in","before:inset-0","before:opacity-0","before:transition-opacity","cursor-pointer","hover:before:opacity-50","relative"]}}}),A={asc:x,desc:h},F=({direction:e})=>t.createElement(k,{is:A[e],size:"sm",className:"stroke-primary-900 absolute left-1"}),K=({header:e,includeTotal:p=!1,totalSuffix:f="items",children:R,className:d,...b})=>{var i,n;const m=e.column.getIsSorted(),{isSortable:o,getRowModel:u}=N(),a=e.column.getCanSort(),g=(n=(i=u())==null?void 0:i.rows)==null?void 0:n.length,{hoverProps:y,isHovered:v}=T({}),S=(r,w)=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),w(r))},l=e.column.getToggleSortingHandler();return t.createElement(I,{isSortable:o&&a,colSpan:e.colSpan,onClick:o&&a&&l?l:void 0,onKeyDown:r=>o&&a&&l&&S(r,l),tabIndex:o&&a?0:-1,...y,className:d,...b},t.createElement(c,{align:"center",gap:1,justify:e.colSpan>1?"center":"flex-start"},E(e.column.columnDef.header,e.getContext()),m&&o&&t.createElement(c,{align:"center",className:D("relative","size-6","ml-2",v?"bg-primary-200":"bg-primary-100","rounded-sm")},t.createElement(F,{direction:m})),p&&t.createElement(z,{size:"sm",weight:"normal"},"(",g," ",f,")")))};export{K as DataTableHeaderCell};
 //# sourceMappingURL=DataTableHeaderCell.js.map

package/dist/components/data-table/DataTableHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { Text } from '../text'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        \"before:content-['']\",\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...props}\n    >\n      <Flex\n        align=\"center\"\n        gap={1}\n        justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex\n            align=\"center\"\n            className={clsx(\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </Flex>\n    </StyledTableHeaderCell>\n  )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","className","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender","clsx"],"mappings":"gcAqBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CAAC,gBAAiB,oBAAqB,SAAU,mBAAmB,CAC5E,CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,KAAM,CACN,EAAA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,aACA,kBACA,wBACA,sBACA,sBACA,iBACA,iBACA,mBACA,4BACA,iBACA,0BACA,UACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,CAAS,EACvB,KAAK,KACL,UAAU,oCACZ,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA4B,CAnE5B,IAAAC,EAAAC,EAoEE,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,EAAa,EAE5DC,EAAeZ,EAAO,OAAO,WAE7Ba,EAAAA,GAAYN,GAAAD,EAAAI,EAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAE,CAAA,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,UAAWV,EACV,GAAGC,CAEJR,EAAAA,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,YAExCsB,EAAAA,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAY,CAAA,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,UAAWE,EACT,WACA,SACA,OACAR,EAAY,iBAAmB,iBAC/B,YACF,CAEAlB,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAAA,CAAe,CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,QAAS,EAAA,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}
+{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { ArrowDown, ArrowUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport clsx from 'clsx'\nimport * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled } from '~/styled'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { Text } from '../text'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n  includeTotal?: boolean\n  totalSuffix?: string\n}\n\nconst StyledCount = styled(Text, {\n  base: ['text-grey-600', 'whitespace-nowrap', 'hidden', 'min-[800px]:block']\n})\n\nconst StyledTableHeaderCell = styled(Table.HeaderCell, {\n  base: [],\n  variants: {\n    isSortable: {\n      true: [\n        '*:relative',\n        'before:absolute',\n        'before:bg-primary-100',\n        'before:duration-200',\n        'before:ease-in',\n        'before:inset-0',\n        'before:opacity-0',\n        'before:transition-opacity',\n        'cursor-pointer',\n        'hover:before:opacity-50',\n        'relative'\n      ]\n    }\n  }\n})\n\nconst sortIcons = {\n  asc: ArrowUp,\n  desc: ArrowDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    className=\"stroke-primary-900 absolute left-1\"\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable, getRowModel } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const { hoverProps, isHovered } = useHover({})\n\n  const handleKeyDown = (\n    event: React.KeyboardEvent<HTMLTableCellElement>,\n    callback: (event: unknown) => void | undefined\n  ) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      callback(event as unknown)\n    }\n  }\n\n  const headerSortingHandler = header.column.getToggleSortingHandler()\n\n  return (\n    <StyledTableHeaderCell\n      isSortable={isSortableTable && isDataColumn}\n      colSpan={header.colSpan}\n      onClick={\n        isSortableTable && isDataColumn && headerSortingHandler\n          ? headerSortingHandler\n          : undefined\n      }\n      onKeyDown={(event) =>\n        isSortableTable &&\n        isDataColumn &&\n        headerSortingHandler &&\n        handleKeyDown(event, headerSortingHandler)\n      }\n      tabIndex={isSortableTable && isDataColumn ? 0 : -1}\n      {...hoverProps}\n      className={className}\n      {...props}\n    >\n      <Flex\n        align=\"center\"\n        gap={1}\n        justify={header.colSpan > 1 ? 'center' : 'flex-start'}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex\n            align=\"center\"\n            className={clsx(\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-primary-200' : 'bg-primary-100',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n        {includeTotal && (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        )}\n      </Flex>\n    </StyledTableHeaderCell>\n  )\n}\n"],"names":["StyledCount","styled","Text","StyledTableHeaderCell","Table","sortIcons","ArrowUp","ArrowDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","includeTotal","totalSuffix","children","className","props","_a","_b","sortDirection","isSortableTable","getRowModel","useDataTable","isDataColumn","totalRows","hoverProps","isHovered","useHover","handleKeyDown","event","callback","headerSortingHandler","Flex","flexRender","clsx"],"mappings":"gcAqBA,MAAMA,EAAcC,EAAOC,EAAM,CAC/B,KAAM,CAAC,gBAAiB,oBAAqB,SAAU,mBAAmB,CAC5E,CAAC,EAEKC,EAAwBF,EAAOG,EAAM,WAAY,CACrD,KAAM,CACN,EAAA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,aACA,kBACA,wBACA,sBACA,iBACA,iBACA,mBACA,4BACA,iBACA,0BACA,UACF,CACF,CACF,CACF,CAAC,EAEKC,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,CAAS,EACvB,KAAK,KACL,UAAU,oCAAA,CACZ,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,aAAAC,EAAe,GACf,YAAAC,EAAc,QACd,SAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA4B,CAlE5B,IAAAC,EAAAC,EAmEE,MAAMC,EAAgBR,EAAO,OAAO,YAAY,EAC1C,CAAE,WAAYS,EAAiB,YAAAC,CAAY,EAAIC,EAAa,EAE5DC,EAAeZ,EAAO,OAAO,WAAA,EAE7Ba,GAAYN,GAAAD,EAAAI,EAAAA,IAAA,KAAA,OAAAJ,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjC,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CAAA,CAAE,EAEvCC,EAAgB,CACpBC,EACAC,IACG,EACCD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAASD,CAAgB,EAE7B,EAEME,EAAuBpB,EAAO,OAAO,wBAAwB,EAEnE,OACEH,EAAA,cAACP,EAAA,CACC,WAAYmB,GAAmBG,EAC/B,QAASZ,EAAO,QAChB,QACES,GAAmBG,GAAgBQ,EAC/BA,EACA,OAEN,UAAYF,GACVT,GACAG,GACAQ,GACAH,EAAcC,EAAOE,CAAoB,EAE3C,SAAUX,GAAmBG,EAAe,EAAI,GAC/C,GAAGE,EACJ,UAAWV,EACV,GAAGC,CAEJR,EAAAA,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,IAAK,EACL,QAASrB,EAAO,QAAU,EAAI,SAAW,YAExCsB,EAAAA,EAAWtB,EAAO,OAAO,UAAU,OAAQA,EAAO,YAAY,EAC9DQ,GAAiBC,GAChBZ,EAAA,cAACwB,EAAA,CACC,MAAM,SACN,UAAWE,EACT,WACA,SACA,OACAR,EAAY,iBAAmB,iBAC/B,YACF,CAEAlB,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWa,CAAAA,CAAe,CACtC,EAEDP,GACCJ,EAAA,cAACV,EAAA,CAAY,KAAK,KAAK,OAAO,QAAS,EAAA,IACnC0B,EAAU,IAAEX,EAAY,GAC5B,CAEJ,CACF,CAEJ"}

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js

@@ -1,2 +1,2 @@
-import{arrayMove as T}from"@dnd-kit/sortable";import E from"clsx";import*as t from"react";import{Sortable as I}from"../../sortable/index.js";import{Table as g}from"../../table/Table.js";import{DataTable as x}from"../DataTable.js";import{AsyncDataState as A}from"../DataTable.types.js";import{useDataTable as C}from"../DataTableContext.js";import{DataTableLoading as N}from"../DataTableLoading.js";import{DragAndDropTableBody as S}from"./DragAndDropTableBody.js";const h=({idColumn:r="id",onDragAndDrop:o,sortable:m,striped:s,theme:i,className:d,...p})=>{const{asyncDataState:c,data:e,setData:D}=C(),u=c===A.PENDING,b=t.useMemo(()=>e.results.map(a=>a[r]),[e]),f=t.useCallback(({oldIndex:a,newIndex:l})=>{const n=T(e.results,a,l),y={results:n,total:e.total};D({results:n,total:e.total}),o==null||o({oldIndex:a,newIndex:l,newData:y})},[e,o]);return t.createElement(I.Root,{onSortChange:f,sortableIds:b},t.createElement(N,null),t.createElement(g,{...p,className:E(d,u&&["opacity-50","pointer-events-none","transition-opacity,duration-250,linear,delay-150"])},t.createElement(x.Head,{theme:i,sortable:m}),t.createElement(S,{striped:s,idColumn:r})))};export{h as DragAndDropTable};
+import{arrayMove as T}from"@dnd-kit/sortable";import E from"clsx";import*as e from"react";import{Sortable as I}from"../../sortable/index.js";import{Table as g}from"../../table/Table.js";import{DataTable as x}from"../DataTable.js";import{AsyncDataState as A}from"../DataTable.types.js";import{useDataTable as C}from"../DataTableContext.js";import{DataTableLoading as N}from"../DataTableLoading.js";import{DragAndDropTableBody as S}from"./DragAndDropTableBody.js";const h=({idColumn:r="id",onDragAndDrop:o,sortable:m,striped:s,theme:i,className:d,...p})=>{const{asyncDataState:c,data:t,setData:D}=C(),u=c===A.PENDING,b=e.useMemo(()=>t.results.map(a=>a[r]),[t]),f=e.useCallback(({oldIndex:a,newIndex:l})=>{const n=T(t.results,a,l),y={results:n,total:t.total};D({results:n,total:t.total}),o==null||o({oldIndex:a,newIndex:l,newData:y})},[t,o]);return e.createElement(I.Root,{onSortChange:f,sortableIds:b},e.createElement(N,null),e.createElement(g,{...p,className:E(d,u&&["opacity-50","pointer-events-none","transition-opacity,duration-250,linear,delay-150"])},e.createElement(x.Head,{theme:i,sortable:m}),e.createElement(S,{striped:s,idColumn:r})))};export{h as DragAndDropTable};
 //# sourceMappingURL=DragAndDropTable.js.map

package/dist/components/data-table/getNewAsyncData.js

@@ -1,2 +1,2 @@
-import n from"invariant";const p=e=>{if(e[0])return e[0].desc?"desc":"asc"},d=async(e,t,i,o,s)=>{var a;const{pageIndex:l,pageSize:u}=i,c={pageIndex:(t==null?void 0:t.pageIndex)??l,pageSize:(t==null?void 0:t.pageSize)??u,sortBy:(t==null?void 0:t.sortBy)??((a=o[0])==null?void 0:a.id),sortDirection:(t==null?void 0:t.sortDirection)??p(o),globalFilter:t.globalFilter??s},r=await e(c);return n(Array.isArray(r==null?void 0:r.results),"The getAsyncData function must return an object with a property `result` which must be an array"),n(r&&Number.isInteger(r.total)&&r.total>=0,"The getAsyncData function must return an object with a property `total` which must be a positive integer or zero"),r};export{d as getNewAsyncData};
+import n from"invariant";const d=e=>{if(e[0])return e[0].desc?"desc":"asc"},g=async(e,t,i,o,l)=>{var a;const{pageIndex:s,pageSize:u}=i,c={pageIndex:(t==null?void 0:t.pageIndex)??s,pageSize:(t==null?void 0:t.pageSize)??u,sortBy:(t==null?void 0:t.sortBy)??((a=o[0])==null?void 0:a.id),sortDirection:(t==null?void 0:t.sortDirection)??d(o),globalFilter:t.globalFilter??l},r=await e(c);return n(Array.isArray(r==null?void 0:r.results),"The getAsyncData function must return an object with a property `result` which must be an array"),n(r&&Number.isInteger(r.total)&&r.total>=0,"The getAsyncData function must return an object with a property `total` which must be a positive integer or zero"),r};export{g as getNewAsyncData};
 //# sourceMappingURL=getNewAsyncData.js.map

package/dist/components/data-table/pagination/Pagination.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as S}from"../../../styled.js";import{Pagination as w}from"../../pagination/Pagination.js";import{Text as y}from"../../text/Text.js";import{AsyncDataState as E}from"../DataTable.types.js";import{useDataTable as $}from"../DataTableContext.js";const b=S("nav",{base:["flex","flex-col","justify-between","items-center","tabular-nums","flex-wrap","w-full","gap-4","mt-4","md:flex-row"]}),i=({colorScheme:l,...m})=>{const{applyPagination:a,getState:s,getRowModel:g,getPageCount:o,setPageIndex:c,getTotalRows:n,asyncDataState:p}=$();e.useEffect(()=>{a()},[a]);const{pagination:t}=s(),f=p!==E.PENDING&&n()===0,u=o()>1;if(f||!u)return null;const r=t.pageIndex*t.pageSize+1,P=r+g().rows.length-1,d=x=>{c(x-1)};return e.createElement(b,{...m},e.createElement(y,{size:"sm"},`${r.toString()} - ${P.toString()} of ${n()} items`),e.createElement(w,{colorScheme:l,selectedPage:t.pageIndex+1,pagesCount:o(),onSelectedPageChange:d}))};i.displayName="Pagination";export{i as Pagination};
+import*as n from"react";import{styled as E}from"../../../styled.js";import{Pagination as z}from"../../pagination/Pagination.js";import{Text as M}from"../../text/Text.js";import{AsyncDataState as $}from"../DataTable.types.js";import{useDataTable as b}from"../DataTableContext.js";const I=E("nav",{base:["flex","flex-col","justify-between","items-center","tabular-nums","flex-wrap","w-full","gap-4","mt-4","md:flex-row"]}),m=({colorScheme:c,...p})=>{const{applyPagination:i,getState:f,getExpandedRowModel:r,getRowModel:d,setPageIndex:u,getTotalRows:s,getPageCount:l,asyncDataState:h,hasAsyncData:t}=b();n.useEffect(()=>{i()},[i]);const{pagination:e}=f(),w=h!==$.PENDING&&s()===0,x=t?l()>1:r().rows.length/e.pageSize>1;if(w||!x)return null;const a=r().rows.length,o=a===0?0:e.pageIndex*e.pageSize+1,g=d().rows.length,P=t?g===0?o:o+g-1:Math.min(o+e.pageSize-1,a),S=D=>{u(D-1)},y=t?l():Math.max(1,Math.ceil(a/e.pageSize));return n.createElement(I,{...p},n.createElement(M,{size:"sm"},`${o} - ${P} of ${t?s():a} items`),n.createElement(z,{colorScheme:c,selectedPage:e.pageIndex+1,pagesCount:y,onSelectedPageChange:S}))};m.displayName="Pagination";export{m as Pagination};
 //# sourceMappingURL=Pagination.js.map

package/dist/components/data-table/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme'\nimport { Pagination as PaginationComponent } from '../../pagination'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  // Show pagination only if total pages are more than 1\n  const showPagination = getPageCount() > 1\n\n  if (isEmpty || !showPagination) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n\n  //indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={getPageCount()}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getRowModel","getPageCount","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","isEmpty","AsyncDataState","showPagination","recordsCountFrom","recordsCountTo","setPage","index","Text","PaginationComponent"],"mappings":"uRAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,KAAM,CACJ,OACA,WACA,kBACA,eACA,eACA,YACA,SACA,QACA,OACA,aACF,CACF,CAAC,EAOYC,EAAa,CAAC,CAAE,YAAAC,EAAa,GAAGC,CAAM,IAAuB,CACxE,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EAEJC,EAAAA,EAAM,UAAU,IAAM,CACpBR,GACF,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYS,CAAgB,EAAIR,EAAS,EAE3CS,EADYJ,IAAmBK,EAAe,SACtBN,EAAAA,IAAmB,EAG3CO,EAAiBT,EAAa,EAAI,EAExC,GAAIO,GAAW,CAACE,EAAgB,OAAO,KAEvC,MAAMC,EACJJ,EAAgB,UAAYA,EAAgB,SAAW,EACnDK,EAAiBD,EAAmBX,IAAc,KAAK,OAAS,EAGhEa,EAAWC,GAAkB,CACjCZ,EAAaY,EAAQ,CAAC,CACxB,EAEA,OACER,EAAA,cAACb,EAAA,CAAW,GAAGI,CAAAA,EACbS,EAAA,cAACS,EAAA,CAAK,KAAK,IAAA,EACR,GAAGJ,EAAiB,UAAU,MAAMC,EAAe,SAAU,CAAA,OAAOT,EAAa,CAAC,QACrF,EACAG,EAAA,cAACU,EAAA,CACC,YAAapB,EACb,aAAcW,EAAgB,UAAY,EAC1C,WAAYN,IACZ,qBAAsBY,CAAAA,CACxB,CACF,CAEJ,EAEAlB,EAAW,YAAc"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme'\nimport { Pagination as PaginationComponent } from '../../pagination'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getExpandedRowModel","getRowModel","setPageIndex","getTotalRows","getPageCount","asyncDataState","hasAsyncData","useDataTable","React","paginationState","isEmpty","AsyncDataState","showPagination","totalVisibleRows","start","asyncRowCount","end","setPage","index","pageCount","Text","PaginationComponent"],"mappings":"uRAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,KAAM,CACJ,OACA,WACA,kBACA,eACA,eACA,YACA,SACA,QACA,OACA,aACF,CACF,CAAC,EAOYC,EAAa,CAAC,CAAE,YAAAC,EAAa,GAAGC,CAAM,IAAuB,CACxE,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,oBAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,EACA,aAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBV,EAAgB,CAClB,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,EAAS,EAE3CW,EADYL,IAAmBM,EAAe,SACtBR,MAAmB,EAE3CS,EAAiBN,EACnBF,EAAa,EAAI,EACjBJ,EAAsB,EAAA,KAAK,OAASS,EAAgB,SAAW,EAEnE,GAAIC,GAAW,CAACE,EAAgB,OAAO,KACvC,MAAMC,EAAmBb,EAAoB,EAAE,KAAK,OAE9Cc,EACJD,IAAqB,EACjB,EACAJ,EAAgB,UAAYA,EAAgB,SAAW,EAEvDM,EAAgBd,EAAY,EAAE,KAAK,OACnCe,EAAMV,EACRS,IAAkB,EAChBD,EACAA,EAAQC,EAAgB,EAC1B,KAAK,IAAID,EAAQL,EAAgB,SAAW,EAAGI,CAAgB,EAG7DI,EAAWC,GAAkB,CACjChB,EAAagB,EAAQ,CAAC,CACxB,EAEMC,EAAYb,EACdF,EACA,EAAA,KAAK,IAAI,EAAG,KAAK,KAAKS,EAAmBJ,EAAgB,QAAQ,CAAC,EAEtE,OACED,EAAA,cAACf,EAAA,CAAW,GAAGI,CAAAA,EACbW,EAAA,cAACY,EAAA,CAAK,KAAK,IAAM,EAAA,GAAGN,CAAK,MAAME,CAAG,OAChCV,EAAeH,EAAa,EAAIU,CAClC,QAAS,EACTL,EAAA,cAACa,EAAA,CACC,YAAazB,EACb,aAAca,EAAgB,UAAY,EAC1C,WAAYU,EACZ,qBAAsBF,EACxB,CACF,CAEJ,EAEAtB,EAAW,YAAc"}

package/dist/components/dialog/Dialog.d.ts

@@ -13,8 +13,8 @@ export declare const Dialog: import("react").FC<import("@radix-ui/react-dialog")
         closeDialogText?: string;
         showCloseButton?: boolean;
     }) => import("react").JSX.Element;
-    Heading: ({ className, ...rest }: React.ComponentProps<typeof import("..").Heading>) => import("react").JSX.Element;
-    Footer: ({ className, ...rest }: React.ComponentProps<typeof import("..").Flex>) => import("react").JSX.Element;
+    Heading: ({ className, ...rest }: import("react").ComponentProps<typeof import("..").Heading>) => import("react").JSX.Element;
+    Footer: ({ className, ...rest }: import("react").ComponentProps<typeof import("..").Flex>) => import("react").JSX.Element;
     Description: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
     Title: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
     Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/dialog/DialogContent.js

@@ -1,2 +1,2 @@
-import{Close as c}from"@atom-learning/icons";import{Overlay as p,Content as h,Portal as u,Close as f}from"@radix-ui/react-dialog";import*as o from"react";import{styled as s}from"../../styled.js";import{backdropOverlay as v}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as x}from"../icon/Icon.js";import{DialogBackground as l}from"./DialogBackground.js";const r="modal_overlay",b=s(p,{base:v}),g=s(h,{base:["-translate-1/2","bg-white","shadow-xl","box-border","left-1/2","h-auto","max-w-[90vw]","max-h-[90vh]","overflow-y-auto","rounded-md","p-8","fixed","top-1/2","z-1147483646","focus:outline-none","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{xs:["w-95"],sm:["w-120"],md:["w-150"],lg:["w-200"],xl:["w-275"],fullscreen:["rounded-none","w-screen","h-screen","max-w-screen","max-h-screen","supports-svh:h-svh","supports-svh:max-h-svh"]}}},{enabledResponsiveVariants:!0}),C=({size:n="sm",children:t,closeDialogText:i="Close dialog",showCloseButton:m=!0,...d})=>o.createElement(u,null,o.createElement(b,{id:r},o.Children.map(t,e=>(e==null?void 0:e.type)===l&&e),o.createElement(g,{size:n,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==r&&e.preventDefault()},...d},m&&o.createElement(w,{as:f,label:i,hasTooltip:!1,size:"md",theme:"neutral",className:"absolute top-4 right-4 size-12"},o.createElement(x,{is:c})),o.Children.map(t,e=>(e==null?void 0:e.type)!==l&&e))));export{C as DialogContent};
+import{Close as p}from"@atom-learning/icons";import{Overlay as u,Content as v,Portal as d,Close as w}from"@radix-ui/react-dialog";import*as o from"react";import{styled as s}from"../../styled.js";import{backdropOverlay as x}from"../../utilities/style/backdrop-overlay.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as f}from"../icon/Icon.js";import{DialogBackground as r}from"./DialogBackground.js";const h="modal_overlay",b=s(u,{base:x}),g=s(v,{base:["-translate-1/2","bg-white","shadow-xl","box-border","left-1/2","h-auto","max-w-[90vw]","max-h-[90vh]","overflow-y-auto","rounded-md","p-8","fixed","top-1/2","z-1147483646","focus:outline-none","motion-safe:data-[state=open]:animate-slide-in-center","motion-safe:data-[state=closed]:animate-slide-out-center"],variants:{size:{xs:["w-auto","h-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-95"],sm:["w-auto","h-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-120"],md:["w-auto","h-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-150"],lg:["w-auto","h-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-200"],xl:["w-auto","h-auto","max-w-[90vw]","max-h-[90vh]","supports-svh:h-auto","supports-svh:max-h-[90vh]","w-275"],fullscreen:["rounded-none","w-screen","h-screen","max-w-screen","max-h-screen","supports-svh:h-svh","supports-svh:max-h-svh"]}}},{enabledResponsiveVariants:!0}),C=({size:l="sm",children:t,closeDialogText:m="Close dialog",showCloseButton:n=!0,...i})=>o.createElement(d,null,o.createElement(b,{id:h},o.Children.map(t,e=>(e==null?void 0:e.type)===r&&e),o.createElement(g,{size:l,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==h&&e.preventDefault()},...i},n&&o.createElement(c,{as:w,label:m,hasTooltip:!1,size:"md",theme:"neutral",className:"absolute top-4 right-4 size-12"},o.createElement(f,{is:p})),o.Children.map(t,e=>(e==null?void 0:e.type)!==r&&e))));export{C as DialogContent};
 //# sourceMappingURL=DialogContent.js.map

package/dist/components/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst sizeReset = ['w-auto', 'h-auto', 'supports-svh:h-auto']\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      '-translate-1/2',\n      'bg-white',\n      'shadow-xl',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-md',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: ['w-95'],\n        sm: ['w-120'],\n        md: ['w-150'],\n        lg: ['w-200'],\n        xl: ['w-275'],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh'\n        ]\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"names":["modalOverlayId","StyledDialogOverlay","styled","Overlay","backdropOverlay","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"yaAWMA,MAAAA,EAAiB,gBAEjBC,EAAsBC,EAAOC,EAAS,CAC1C,KAAMC,CACR,CAAC,EAIKC,EAAsBH,EAC1BI,EACA,CACE,KAAM,CACJ,iBACA,WACA,YACA,aACA,WACA,SACA,eACA,eACA,kBACA,aACA,MACA,QACA,UACA,eACA,qBACA,wDACA,0DACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,GAAI,CAAC,OAAO,EACZ,WAAY,CACV,eACA,WACA,WACA,eACA,eACA,qBACA,wBACF,CACF,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaC,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,GAClB,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACZ,EAAA,CAAoB,GAAID,GACtBa,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,YAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,YAAAA,EAAS,MAAOlB,GAClBiB,EAAM,eAAe,CAEzB,EACC,GAAGL,CAAAA,EAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,UACN,UAAU,gCAEVG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAAA,CAAW,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}
+{"version":3,"file":"DialogContent.js","sources":["../../../src/components/dialog/DialogContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Close, Content, Overlay, Portal } from '@radix-ui/react-dialog'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { backdropOverlay } from '~/utilities/style/backdrop-overlay'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { DialogBackground } from './DialogBackground'\n\nconst modalOverlayId = 'modal_overlay'\n\nconst StyledDialogOverlay = styled(Overlay, {\n  base: backdropOverlay\n})\n\nconst StyledDialogContent = styled(\n  Content,\n  {\n    base: [\n      '-translate-1/2',\n      'bg-white',\n      'shadow-xl',\n      'box-border',\n      'left-1/2',\n      'h-auto',\n      'max-w-[90vw]',\n      'max-h-[90vh]',\n      'overflow-y-auto',\n      'rounded-md',\n      'p-8',\n      'fixed',\n      'top-1/2',\n      'z-1147483646',\n      'focus:outline-none',\n      'motion-safe:data-[state=open]:animate-slide-in-center',\n      'motion-safe:data-[state=closed]:animate-slide-out-center'\n    ],\n    variants: {\n      size: {\n        xs: [\n          'w-auto',\n          'h-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-95'\n        ],\n        sm: [\n          'w-auto',\n          'h-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-120'\n        ],\n        md: [\n          'w-auto',\n          'h-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-150'\n        ],\n        lg: [\n          'w-auto',\n          'h-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-200'\n        ],\n        xl: [\n          'w-auto',\n          'h-auto',\n          'max-w-[90vw]',\n          'max-h-[90vh]',\n          'supports-svh:h-auto',\n          'supports-svh:max-h-[90vh]',\n          'w-275'\n        ],\n        fullscreen: [\n          'rounded-none',\n          'w-screen',\n          'h-screen',\n          'max-w-screen',\n          'max-h-screen',\n          'supports-svh:h-svh',\n          'supports-svh:max-h-svh'\n        ]\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\ntype DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {\n  closeDialogText?: string\n  showCloseButton?: boolean\n}\n\nexport const DialogContent = ({\n  size = 'sm',\n  children,\n  closeDialogText = 'Close dialog',\n  showCloseButton = true,\n  ...remainingProps\n}: DialogContentProps) => (\n  <Portal>\n    <StyledDialogOverlay id={modalOverlayId}>\n      {React.Children.map(\n        children,\n        (child?: React.ReactElement) =>\n          child?.type === DialogBackground && child\n      )}\n      <StyledDialogContent\n        size={size}\n        aria-label=\"Dialog\"\n        onPointerDownOutside={(event) => {\n          const element = event.target as HTMLElement\n          if (element?.id !== modalOverlayId) {\n            event.preventDefault()\n          }\n        }}\n        {...remainingProps}\n      >\n        {showCloseButton && (\n          <ActionIcon\n            as={Close}\n            label={closeDialogText}\n            hasTooltip={false}\n            size=\"md\"\n            theme=\"neutral\"\n            className=\"absolute top-4 right-4 size-12\"\n          >\n            <Icon is={CloseIcon} />\n          </ActionIcon>\n        )}\n        {React.Children.map(\n          children,\n          (child?: React.ReactElement) =>\n            child?.type !== DialogBackground && child\n        )}\n      </StyledDialogContent>\n    </StyledDialogOverlay>\n  </Portal>\n)\n"],"names":["modalOverlayId","StyledDialogOverlay","styled","Overlay","backdropOverlay","StyledDialogContent","Content","DialogContent","size","children","closeDialogText","showCloseButton","remainingProps","React","Portal","child","DialogBackground","event","element","ActionIcon","Close","Icon","CloseIcon"],"mappings":"yaAWA,MAAMA,EAAiB,gBAEjBC,EAAsBC,EAAOC,EAAS,CAC1C,KAAMC,CACR,CAAC,EAEKC,EAAsBH,EAC1BI,EACA,CACE,KAAM,CACJ,iBACA,WACA,YACA,aACA,WACA,SACA,eACA,eACA,kBACA,aACA,MACA,QACA,UACA,eACA,qBACA,wDACA,0DACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,SACA,SACA,eACA,eACA,sBACA,4BACA,MACF,EACA,GAAI,CACF,SACA,SACA,eACA,eACA,sBACA,4BACA,OACF,EACA,GAAI,CACF,SACA,SACA,eACA,eACA,sBACA,4BACA,OACF,EACA,GAAI,CACF,SACA,SACA,eACA,eACA,sBACA,4BACA,OACF,EACA,GAAI,CACF,SACA,SACA,eACA,eACA,sBACA,4BACA,OACF,EACA,WAAY,CACV,eACA,WACA,WACA,eACA,eACA,qBACA,wBACF,CACF,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaC,EAAgB,CAAC,CAC5B,KAAAC,EAAO,KACP,SAAAC,EACA,gBAAAC,EAAkB,eAClB,gBAAAC,EAAkB,GAClB,GAAGC,CACL,IACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACZ,EAAA,CAAoB,GAAID,CACtBa,EAAAA,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,EACAF,EAAA,cAACR,EAAA,CACC,KAAMG,EACN,aAAW,SACX,qBAAuBS,GAAU,CAC/B,MAAMC,EAAUD,EAAM,QAClBC,GAAA,KAAAA,OAAAA,EAAS,MAAOlB,GAClBiB,EAAM,gBAEV,EACC,GAAGL,CAAAA,EAEHD,GACCE,EAAA,cAACM,EAAA,CACC,GAAIC,EACJ,MAAOV,EACP,WAAY,GACZ,KAAK,KACL,MAAM,UACN,UAAU,gCAEVG,EAAAA,EAAA,cAACQ,EAAA,CAAK,GAAIC,CAAW,CAAA,CACvB,EAEDT,EAAM,SAAS,IACdJ,EACCM,IACCA,GAAA,KAAA,OAAAA,EAAO,QAASC,GAAoBD,CACxC,CACF,CACF,CACF"}

package/dist/components/dialog/DialogFooter.js

@@ -1,2 +1,2 @@
-import t from"clsx";import*as m from"react";import{Flex as r}from"../flex/Flex.js";const a=({className:o,...e})=>m.createElement(r,{justify:"end",gap:3,...e,className:t("pt-4",o)});export{a as DialogFooter};
+import t from"clsx";import*as m from"react";import{Flex as r}from"../flex/Flex.js";const a=({className:e,...o})=>m.createElement(r,{justify:"end",gap:3,...o,className:t("pt-4",e)});export{a as DialogFooter};
 //# sourceMappingURL=DialogFooter.js.map

package/dist/components/dismissible/index.d.ts

@@ -1,6 +1,6 @@
 export declare const Dismissible: {
-    ({ disabled, dismissed, onDismiss, ...rest }: React.PropsWithChildren<import("./DismissibleRoot").IDismissibleRootInternalProps & import("./DismissibleRoot").IDismissibleRootProps>): import("react").JSX.Element;
+    ({ disabled, dismissed, onDismiss, ...rest }: import("react").PropsWithChildren<import("./DismissibleRoot").IDismissibleRootInternalProps & import("./DismissibleRoot").IDismissibleRootProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("./DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+    Trigger: ({ asChild, ...rest }: import("react").PropsWithChildren<import("./DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
 };

package/dist/components/dismissible-group/index.d.ts

@@ -1,7 +1,7 @@
 export declare const DismissibleGroup: {
-    ({ as: Component, disabled, onDismiss, ...rest }: React.PropsWithChildren<import("./DismissibleGroupRoot").IDismissibleGroupRootProps>): import("react").JSX.Element;
+    ({ as: Component, disabled, onDismiss, ...rest }: import("react").PropsWithChildren<import("./DismissibleGroupRoot").IDismissibleGroupRootProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    Item: ({ children, value, disabled: itemDisabled, ...rest }: React.PropsWithChildren<import("./DismissibleGroupItem").TDismissibleGroupItemProps>) => import("react").JSX.Element;
-    Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("../../components/dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+    Item: ({ children, value, disabled: itemDisabled, ...rest }: import("react").PropsWithChildren<import("./DismissibleGroupItem").TDismissibleGroupItemProps>) => import("react").JSX.Element;
+    Trigger: ({ asChild, ...rest }: import("react").PropsWithChildren<import("../../components/dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
 };

package/dist/components/index.d.ts

@@ -64,6 +64,7 @@ export { SelectField } from './select-field';
 export { SideBar, useSidebarState } from './side-bar';
 export { Slider } from './slider';
 export { SliderField } from './slider-field';
+export * as Skeleton from './skeleton-loader';
 export { Sortable } from './sortable';
 export { Spacer } from './spacer';
 export { Stepper } from './stepper';

package/dist/components/input/Input.d.ts

@@ -1,14 +1,6 @@
 import * as React from 'react';
-export declare const InputBackground: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const InputBackground: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
-    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
-    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
-} & {
-    as?: React.ElementType;
 }, "disabled" | "size" | "appearance" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | undefined;

package/dist/components/input/Input.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as u}from"../../styled.js";import{overrideStyledVariantValue as c}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Flex as m}from"../flex/Flex.js";import{Text as b}from"../text/Text.js";const d=u(m,{base:["text-grey-1000","transition-[background]","duration-100","ease-out","transition-[border-color]","duration-100","ease-out","w-full","placeholder:opacity-100","placeholder:text-grey-700"],variants:{appearance:{standard:["bg-white","border","border-grey-800","focus-within:border-blue-800","rounded-md"],modern:["bg-grey-100","border-none","focus-within:outline-2","focus-within:outline-blue-800","focus-within:outline-offset-1","focus-within:outline-solid","focus-within:z-1","rounded-md"]},size:{sm:["h-8"],md:["h-10"],lg:["h-12"],xl:["h-16"]},disabled:{true:["cursor-not-allowed","opacity-30"]},state:{error:[]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus-within:outline-danger"]}]});d.displayName="InputBackground";const f=u(b,{base:["appearance-none","border-none","bg-none","bg-none","bg-transparent","shadow-none","box-border","focus:outline-none","px-3","size-full"]}),g={sm:"sm",md:"md",lg:"md",xl:"lg"},i=r.forwardRef(({type:e="text",size:t,...a},n)=>{const o=r.useMemo(()=>c(t,s=>g[s]),[t]);return r.createElement(f,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:o,...a})});i.displayName="InputText";const l=r.forwardRef(({className:e,size:t="md",appearance:a="standard",state:n,disabled:o,...s},p)=>r.createElement(d,{size:t,appearance:a,disabled:o,state:n,className:e},r.createElement(i,{size:t,ref:p,disabled:o,...s})));l.displayName="Input";export{l as Input,d as InputBackground,i as InputText};
+import*as r from"react";import{styled as l}from"../../styled.js";import{overrideStyledVariantValue as p}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Text as m}from"../text/Text.js";const d=l("div",{base:["flex","text-grey-1000","transition-[background]","duration-100","ease-out","transition-[border-color]","duration-100","ease-out","w-full"],variants:{appearance:{standard:["bg-white","border","border-grey-800","focus-within:border-blue-800","rounded-md"],modern:["bg-grey-100","border-none","focus-within:outline-2","focus-within:outline-blue-800","focus-within:outline-offset-1","focus-within:outline-solid","focus-within:z-1","rounded-md"]},size:{sm:["h-8"],md:["h-10"],lg:["h-12"],xl:["h-16"]},disabled:{true:["cursor-not-allowed","opacity-30"]},state:{error:[]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus-within:outline-danger"]}]});d.displayName="InputBackground";const b=l(m,{base:["appearance-none","border-none","bg-none","bg-transparent","shadow-none","box-border","focus:outline-none","px-3","size-full","placeholder:opacity-100","placeholder:text-grey-700"]}),f={sm:"sm",md:"md",lg:"md",xl:"lg"},i=r.forwardRef(({type:e="text",size:t,...o},n)=>{const a=r.useMemo(()=>p(t,s=>f[s]),[t]);return r.createElement(b,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:a,...o})});i.displayName="InputText";const u=r.forwardRef(({className:e,size:t="md",appearance:o="standard",state:n,disabled:a,...s},c)=>r.createElement(d,{size:t,appearance:o,disabled:a,state:n,className:e},r.createElement(i,{size:t,ref:c,disabled:a,...s})));u.displayName="Input";export{u as Input,d as InputBackground,i as InputText};
 //# sourceMappingURL=Input.js.map