@atom-learning/components 11.6.0 → 12.0.0-beta.1

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

@@ -19,12 +19,12 @@ var StyledContainer = styled("div", { base: [
 	"justify-between",
 	"items-center",
 	"rounded-lg",
-	"bg-primary-800",
+	"bg-accent-emphasis",
 	"pointer-events-auto",
 	"z-2",
 	"w-full",
 	"mx-4",
-	"shadow-lg",
+	"shadow-(--shadow-floating-lg)",
 	"sm:max-w-200",
 	"lg:max-w-250",
 	"lg:mb-8",
@@ -49,7 +49,7 @@ var DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(({ children, ..
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-auto items-center justify-start gap-2",
 				children: [/* @__PURE__ */ jsx(Badge, {
-					theme: "success",
+					tone: "success",
 					size: "xs",
 					emphasis: "subtle",
 					className: "h-6 min-w-6",
@@ -57,14 +57,14 @@ var DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(({ children, ..
 				}), /* @__PURE__ */ jsx(Text, {
 					size: "sm",
 					weight: "bold",
-					className: "text-white",
+					className: "text-on-accent-emphasis",
 					children: "selected"
 				})]
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-auto items-center justify-end gap-3",
 				children: [children, /* @__PURE__ */ jsx(ActionIcon, {
 					appearance: "simple",
-					theme: "white",
+					inverse: true,
 					size: "md",
 					onClick: handleDeselectAllPageRows,
 					label: "close",

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'pl-3',\n    'pr-1',\n    'py-2',\n    'mb-4',\n    'mt-2',\n    'justify-between',\n    'items-center',\n    'rounded-lg',\n    'bg-primary-800',\n    'pointer-events-auto',\n    'z-2',\n    'w-full',\n    'mx-4',\n    'shadow-lg',\n    'sm:max-w-200',\n    'lg:max-w-250',\n    'lg:mb-8',\n    'lg:pl-4',\n    'lg:pr-1',\n    'lg:py-3',\n    'xl:max-w-350',\n    'xl:mb-8',\n    'xl:pl-6',\n    'xl:pr-2',\n    'xl:py-4'\n  ]\n})\n\nexport const DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(\n  ({\n    children,\n    ...rest\n  }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n    const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n    const numberOfSelectedRows = Object.keys(rowSelection || {}).length\n\n    const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n    if (numberOfSelectedRows === 0) return null\n\n    return (\n      <section className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\">\n        <StyledContainer {...rest}>\n          <div className=\"flex flex-auto items-center justify-start gap-2\">\n            <Badge\n              theme=\"success\"\n              size=\"xs\"\n              emphasis=\"subtle\"\n              className=\"h-6 min-w-6\"\n            >\n              {numberOfSelectedRows}\n            </Badge>\n            <Text size=\"sm\" weight=\"bold\" className=\"text-white\">\n              selected\n            </Text>\n          </div>\n          <div className=\"flex flex-auto items-center justify-end gap-3\">\n            {children}\n            <ActionIcon\n              appearance=\"simple\"\n              theme=\"white\"\n              size=\"md\"\n              onClick={handleDeselectAllPageRows}\n              label=\"close\"\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          </div>\n        </StyledContainer>\n      </section>\n    )\n  },\n  {\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,+BAA+C,uBAAO,QAChE,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,aAAa;CAEjE,MAAM,uBAAuB,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;CAE7D,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,yBAAyB,GAAG,OAAO;CAEvC,OACE,oBAAC,WAAD;EAAS,WAAU;YACjB,qBAAC,iBAAD;GAAiB,GAAI;aAArB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KACE,OAAM;KACN,MAAK;KACL,UAAS;KACT,WAAU;eAET;IACI,CAAA,GACP,oBAAC,MAAD;KAAM,MAAK;KAAK,QAAO;KAAO,WAAU;eAAa;IAE/C,CAAA,CACH;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UACD,oBAAC,YAAD;KACE,YAAW;KACX,OAAM;KACN,MAAK;KACL,SAAS;KACT,OAAM;eAEN,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;IACR,CAAA,CACT;KACU;;CACV,CAAA;AAEb,GACA,EACE,oBAAoB,8BACtB,CACF"}
+{"version":3,"file":"DataTableBulkActionsFloating.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsFloating.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Badge } from '../badge/Badge'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\nimport { BulkActionsSelectedRowActions } from './DataTableBulkActionsSelectedRowActions'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'pl-3',\n    'pr-1',\n    'py-2',\n    'mb-4',\n    'mt-2',\n    'justify-between',\n    'items-center',\n    'rounded-lg',\n    'bg-accent-emphasis',\n    'pointer-events-auto',\n    'z-2',\n    'w-full',\n    'mx-4',\n    'shadow-(--shadow-floating-lg)',\n    'sm:max-w-200',\n    'lg:max-w-250',\n    'lg:mb-8',\n    'lg:pl-4',\n    'lg:pr-1',\n    'lg:py-3',\n    'xl:max-w-350',\n    'xl:mb-8',\n    'xl:pl-6',\n    'xl:pr-2',\n    'xl:py-4'\n  ]\n})\n\nexport const DataTableBulkActionsFloating = /* @__PURE__ */ Object.assign(\n  ({\n    children,\n    ...rest\n  }: React.PropsWithChildren<React.ComponentProps<typeof StyledContainer>>) => {\n    const { rowSelection, toggleAllPageRowsSelected } = useDataTable()\n\n    const numberOfSelectedRows = Object.keys(rowSelection || {}).length\n\n    const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n    if (numberOfSelectedRows === 0) return null\n\n    return (\n      <section className=\"pointer-events-none sticky bottom-0 left-0 flex justify-center\">\n        <StyledContainer {...rest}>\n          <div className=\"flex flex-auto items-center justify-start gap-2\">\n            <Badge\n              tone=\"success\"\n              size=\"xs\"\n              emphasis=\"subtle\"\n              className=\"h-6 min-w-6\"\n            >\n              {numberOfSelectedRows}\n            </Badge>\n            <Text size=\"sm\" weight=\"bold\" className=\"text-on-accent-emphasis\">\n              selected\n            </Text>\n          </div>\n          <div className=\"flex flex-auto items-center justify-end gap-3\">\n            {children}\n            <ActionIcon\n              appearance=\"simple\"\n              inverse\n              size=\"md\"\n              onClick={handleDeselectAllPageRows}\n              label=\"close\"\n            >\n              <Icon is={Close} />\n            </ActionIcon>\n          </div>\n        </StyledContainer>\n      </section>\n    )\n  },\n  {\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,+BAA+C,uBAAO,QAChE,EACC,UACA,GAAG,WACwE;CAC3E,MAAM,EAAE,cAAc,8BAA8B,aAAa;CAEjE,MAAM,uBAAuB,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC;CAE7D,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,yBAAyB,GAAG,OAAO;CAEvC,OACE,oBAAC,WAAD;EAAS,WAAU;YACjB,qBAAC,iBAAD;GAAiB,GAAI;aAArB,CACE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,OAAD;KACE,MAAK;KACL,MAAK;KACL,UAAS;KACT,WAAU;eAET;IACI,CAAA,GACP,oBAAC,MAAD;KAAM,MAAK;KAAK,QAAO;KAAO,WAAU;eAA0B;IAE5D,CAAA,CACH;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,UACD,oBAAC,YAAD;KACE,YAAW;KACX,SAAA;KACA,MAAK;KACL,SAAS;KACT,OAAM;eAEN,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;IACR,CAAA,CACT;KACU;;CACV,CAAA;AAEb,GACA,EACE,oBAAoB,8BACtB,CACF"}

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

@@ -15,7 +15,7 @@ var BulkActionsSelectedRowActions = ({ cancelLabel = "Cancel", showDividers = tr
 			className: "mx-4"
 		}),
 		/* @__PURE__ */ jsx(Button, {
-			theme: "neutral",
+			inverse: true,
 			onClick: handleDeselectAllPageRows,
 			children: cancelLabel
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTable.context'\n\nexport const BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  showDividers = true,\n  children\n}: {\n  cancelLabel?: string\n  showDividers?: boolean\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {showDividers && React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,iCAAiC,EAC5C,cAAc,UACd,eAAe,MACf,eAKI;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,aAAa;CAEjE,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,OAAO;CAEzD,OACE,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,gBAAgB,QAAM,SAAS,MAAM,QAAQ,IAAI,KAChD,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;EAAQ,CAAA;EAEpD,oBAAC,QAAD;GAAQ,OAAM;GAAU,SAAS;aAC9B;EACK,CAAA;CACR,EAAA,CAAA;AAEN"}
+{"version":3,"file":"DataTableBulkActionsSelectedRowActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActionsSelectedRowActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTable.context'\n\nexport const BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  showDividers = true,\n  children\n}: {\n  cancelLabel?: string\n  showDividers?: boolean\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {showDividers && React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button inverse onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAa,iCAAiC,EAC5C,cAAc,UACd,eAAe,MACf,eAKI;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,aAAa;CAEjE,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,OAAO;CAEzD,OACE,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,gBAAgB,QAAM,SAAS,MAAM,QAAQ,IAAI,KAChD,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;EAAQ,CAAA;EAEpD,oBAAC,QAAD;GAAQ,SAAA;GAAQ,SAAS;aACtB;EACK,CAAA;CACR,EAAA,CAAA;AAEN"}

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

@@ -7,5 +7,5 @@ type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>, 'child
     showTotalInFirstColumn?: boolean;
     totalSuffix?: string;
 };
-export declare const DataTableHead: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...rest }: DataTableHeadProps) => React.ReactElement<unknown>;
+export declare const DataTableHead: ({ sortable, appearance, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...rest }: DataTableHeadProps) => React.ReactElement<unknown>;
 export {};

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

@@ -6,7 +6,7 @@ import { DataTableSelectAllRowsCheckbox } from "./DataTableSelectAllRowsCheckbox
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableHead.tsx
-var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...rest }) => {
+var DataTableHead = ({ sortable = true, appearance = "inset", isSticky = false, stickyOffset = 0, showTotalInFirstColumn, totalSuffix, style, className, ...rest }) => {
 	const { getHeaderGroups, setIsSortable, enableRowSelection, getCanSomeRowsExpand, tablePosition } = useDataTable();
 	React$1.useEffect(() => {
 		setIsSortable(sortable);
@@ -35,7 +35,7 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 		tablePosition
 	]);
 	return /* @__PURE__ */ jsx(Table.Header, {
-		theme,
+		appearance,
 		style: {
 			...style,
 			"--header-offset": `${headerOffset}px`
@@ -45,7 +45,7 @@ var DataTableHead = ({ sortable = true, theme = "light", isSticky = false, stick
 		children: getHeaderGroups().map((headerGroup, headerGroupIndex) => {
 			return /* @__PURE__ */ jsxs(Table.Row, {
 				ref: headerGroupIndex === 0 ? tableHeaderRowRef : void 0,
-				className: isSticky && headerOffset !== 0 ? cn("translate-y-(--header-offset)", headerHide ? "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,
+				className: isSticky && headerOffset !== 0 ? cn("translate-y-(--header-offset)", headerHide ? "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-(--shadow-resting-sm)", "[&_th]:last:before:top-0", "[&_th]:last:before:w-full") : void 0,
 				children: [
 					getCanSomeRowsExpand() && /* @__PURE__ */ jsx(Table.HeaderCell, { className: "w-10" }),
 					enableRowSelection && /* @__PURE__ */ jsx(Table.HeaderCell, {

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...rest\n}: DataTableHeadProps): React.ReactElement<unknown> => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        setHeaderOffset(newOffset)\n\n        const rafId = requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n\n        return () => cancelAnimationFrame(rafId)\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      theme={theme}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...rest}\n      className={cn(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup, headerGroupIndex) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            // Single ref slot: only the first header row may carry it, or\n            // each successive header group would silently clobber it.\n            ref={headerGroupIndex === 0 ? tableHeaderRowRef : undefined}\n            className={\n              isSticky && headerOffset !== 0\n                ? cn(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-sm',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"mappings":";;;;;;;;AAmBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,QAAQ,SACR,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,WACkD;CACrD,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,kBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,cAAc,QAAQ;CACxB,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,oBAAoB,QAAM,OAA4B,IAAI;CAChE,MAAM,WAAW,QAAM,OAAgC,IAAI;CAE3D,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,KAAK;CAEjE,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,IAAI,CAAC,SAAS,WAAW,kBAAkB,SACzC,SAAS,UAAU,kBAAkB,QAAQ,QAC3C,OACF;EAGF,IAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;IAEN,IAAI,cAAc,GAAG,cAAc,IAAI;IAEvC,gBAAgB,SAAS;IAEzB,MAAM,QAAQ,4BAA4B;KACxC,cAAc,KAAK;IACrB,CAAC;IAED,aAAa,qBAAqB,KAAK;GACzC;;CAEJ,GAAG;EAAC;EAAU;EAAc;CAAa,CAAC;CAE1C,OACE,oBAAC,MAAM,QAAP;EACS;EACP,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;EACrC;EACA,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,SACF;YAEC,gBAAgB,CAAC,CAAC,KAAK,aAAa,qBAAqB;GACxD,OACE,qBAAC,MAAM,KAAP;IAIE,KAAK,qBAAqB,IAAI,oBAAoB,KAAA;IAClD,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,gCACA,4BACA,2BACF,IACA,KAAA;cApBR;KAuBG,qBAAqB,KAAK,oBAAC,MAAM,YAAP,EAAkB,WAAU,OAAQ,CAAA;KAC9D,sBACC,oBAAC,MAAM,YAAP;MAAkB,WAAU;gBAC1B,oBAAC,gCAAD,CAAiC,CAAA;KACjB,CAAA;KAEnB,YAAY,QAAQ,KAAK,QAAQ,UAChC,oBAAC,qBAAD;MACU;MAER,cAAc,UAAU,KAAK;MAChB;KACd,GAHM,OAAO,EAGb,CACF;IACQ;MApCJ,YAAY,EAoCR;EAEf,CAAC;CACW,CAAA;AAElB"}
+{"version":3,"file":"DataTableHead.js","names":[],"sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  stickyOffset?: number\n  showTotalInFirstColumn?: boolean\n  totalSuffix?: string\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  appearance = 'inset',\n  isSticky = false,\n  stickyOffset = 0,\n  showTotalInFirstColumn,\n  totalSuffix,\n  style,\n  className,\n  ...rest\n}: DataTableHeadProps): React.ReactElement<unknown> => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand,\n    tablePosition\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  const tableHeaderRowRef = React.useRef<HTMLTableRowElement>(null)\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n\n  const [headerOffset, setHeaderOffset] = React.useState<number>(0)\n  const [headerHide, setHeaderHide] = React.useState<boolean>(false)\n\n  React.useEffect(() => {\n    if (!isSticky) return\n\n    if (!tableRef.current && tableHeaderRowRef.current) {\n      tableRef.current = tableHeaderRowRef.current.closest(\n        'table'\n      ) as HTMLTableElement | null\n    }\n\n    if (tableRef.current) {\n      if (tablePosition?.top !== null && tablePosition?.bottom !== null) {\n        const newOffset =\n          tablePosition?.top != null &&\n          tablePosition?.bottom != null &&\n          tablePosition.top < stickyOffset &&\n          tablePosition.bottom > 100\n            ? -tablePosition.top + stickyOffset\n            : 0\n\n        if (newOffset !== 0) setHeaderHide(true)\n\n        setHeaderOffset(newOffset)\n\n        const rafId = requestAnimationFrame(() => {\n          setHeaderHide(false)\n        })\n\n        return () => cancelAnimationFrame(rafId)\n      }\n    }\n  }, [isSticky, stickyOffset, tablePosition])\n\n  return (\n    <Table.Header\n      appearance={appearance}\n      style={{\n        ...style,\n        '--header-offset': `${headerOffset}px`\n      }}\n      {...rest}\n      className={cn(\n        'relative',\n        'z-3',\n        '[&_tr:not(:last-child)>th]:border-b-none',\n        '[&_tr:not(:first-child)>th]:rounded-none!',\n        className\n      )}\n    >\n      {getHeaderGroups().map((headerGroup, headerGroupIndex) => {\n        return (\n          <Table.Row\n            key={headerGroup.id}\n            // Single ref slot: only the first header row may carry it, or\n            // each successive header group would silently clobber it.\n            ref={headerGroupIndex === 0 ? tableHeaderRowRef : undefined}\n            className={\n              isSticky && headerOffset !== 0\n                ? cn(\n                    'translate-y-(--header-offset)',\n                    headerHide\n                      ? 'delay-0ms opacity-0 transition-none'\n                      : 'delay-150ms opacity-100 transition-opacity duration-100',\n                    '[&_th]:last:before:absolute',\n                    '[&_th]:last:before:bottom-0',\n                    '[&_th]:last:before:pointer-events-none',\n                    '[&_th]:last:before:right-0',\n                    '[&_th]:last:before:shadow-(--shadow-resting-sm)',\n                    '[&_th]:last:before:top-0',\n                    '[&_th]:last:before:w-full'\n                  )\n                : undefined\n            }\n          >\n            {getCanSomeRowsExpand() && <Table.HeaderCell className=\"w-10\" />}\n            {enableRowSelection && (\n              <Table.HeaderCell className=\"w-10\">\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header, index) => (\n              <DataTableHeaderCell\n                header={header}\n                key={header.id}\n                includeTotal={index === 0 && showTotalInFirstColumn}\n                totalSuffix={totalSuffix}\n              />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"mappings":";;;;;;;;AAmBA,IAAa,iBAAiB,EAC5B,WAAW,MACX,aAAa,SACb,WAAW,OACX,eAAe,GACf,wBACA,aACA,OACA,WACA,GAAG,WACkD;CACrD,MAAM,EACJ,iBACA,eACA,oBACA,sBACA,kBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,cAAc,QAAQ;CACxB,GAAG,CAAC,UAAU,aAAa,CAAC;CAE5B,MAAM,oBAAoB,QAAM,OAA4B,IAAI;CAChE,MAAM,WAAW,QAAM,OAAgC,IAAI;CAE3D,MAAM,CAAC,cAAc,mBAAmB,QAAM,SAAiB,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAkB,KAAK;CAEjE,QAAM,gBAAgB;EACpB,IAAI,CAAC,UAAU;EAEf,IAAI,CAAC,SAAS,WAAW,kBAAkB,SACzC,SAAS,UAAU,kBAAkB,QAAQ,QAC3C,OACF;EAGF,IAAI,SAAS;OACP,eAAe,QAAQ,QAAQ,eAAe,WAAW,MAAM;IACjE,MAAM,YACJ,eAAe,OAAO,QACtB,eAAe,UAAU,QACzB,cAAc,MAAM,gBACpB,cAAc,SAAS,MACnB,CAAC,cAAc,MAAM,eACrB;IAEN,IAAI,cAAc,GAAG,cAAc,IAAI;IAEvC,gBAAgB,SAAS;IAEzB,MAAM,QAAQ,4BAA4B;KACxC,cAAc,KAAK;IACrB,CAAC;IAED,aAAa,qBAAqB,KAAK;GACzC;;CAEJ,GAAG;EAAC;EAAU;EAAc;CAAa,CAAC;CAE1C,OACE,oBAAC,MAAM,QAAP;EACc;EACZ,OAAO;GACL,GAAG;GACH,mBAAmB,GAAG,aAAa;EACrC;EACA,GAAI;EACJ,WAAW,GACT,YACA,OACA,4CACA,6CACA,SACF;YAEC,gBAAgB,CAAC,CAAC,KAAK,aAAa,qBAAqB;GACxD,OACE,qBAAC,MAAM,KAAP;IAIE,KAAK,qBAAqB,IAAI,oBAAoB,KAAA;IAClD,WACE,YAAY,iBAAiB,IACzB,GACE,iCACA,aACI,wCACA,2DACJ,+BACA,+BACA,0CACA,8BACA,mDACA,4BACA,2BACF,IACA,KAAA;cApBR;KAuBG,qBAAqB,KAAK,oBAAC,MAAM,YAAP,EAAkB,WAAU,OAAQ,CAAA;KAC9D,sBACC,oBAAC,MAAM,YAAP;MAAkB,WAAU;gBAC1B,oBAAC,gCAAD,CAAiC,CAAA;KACjB,CAAA;KAEnB,YAAY,QAAQ,KAAK,QAAQ,UAChC,oBAAC,qBAAD;MACU;MAER,cAAc,UAAU,KAAK;MAChB;KACd,GAHM,OAAO,EAGb,CACF;IACQ;MApCJ,YAAY,EAoCR;EAEf,CAAC;CACW,CAAA;AAElB"}

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

@@ -11,7 +11,7 @@ import { flexRender } from "@tanstack/react-table";
 import { useHover } from "react-aria";
 //#region src/components/data-table/DataTableHeaderCell.tsx
 var StyledCount = styled(Text, { base: [
-	"text-grey-600",
+	"text-subtlest",
 	"whitespace-nowrap",
 	"hidden",
 	"min-[800px]:block"
@@ -21,7 +21,7 @@ var StyledTableHeaderCell = styled(Table.HeaderCell, {
 	variants: { isSortable: { true: [
 		"*:relative",
 		"before:absolute",
-		"before:bg-primary-100",
+		"before:bg-accent-subtle",
 		"before:duration-200",
 		"before:ease-in",
 		"before:inset-0",
@@ -39,7 +39,7 @@ var sortIcons = {
 var SortIcon = ({ direction }) => /* @__PURE__ */ jsx(Icon, {
 	is: sortIcons[direction],
 	size: "sm",
-	className: "stroke-primary-900 absolute left-1"
+	className: "absolute left-1 stroke-(--text-color-accent-hover)"
 });
 var handleKeyDown = (event, callback) => {
 	if (event.key === "Enter" || event.key === " ") {
@@ -68,7 +68,7 @@ var DataTableHeaderCell = ({ header, includeTotal = false, totalSuffix = "items"
 			children: [
 				flexRender(header.column.columnDef.header, header.getContext()),
 				sortDirection && isSortableTable && /* @__PURE__ */ jsx("div", {
-					className: cn("flex", "items-center", "relative", "size-6", "ml-2", isHovered ? "bg-primary-200" : "bg-primary-100", "rounded-sm"),
+					className: cn("flex", "items-center", "relative", "size-6", "ml-2", isHovered ? "bg-accent-subtle-hover" : "bg-accent-subtle", "rounded-sm"),
 					children: /* @__PURE__ */ jsx(SortIcon, { direction: sortDirection })
 				}),
 				includeTotal ? /* @__PURE__ */ jsxs(StyledCount, {

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","names":[],"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 * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\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\nconst 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\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...rest\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 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      {...rest}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\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          </div>\n        )}\n        {includeTotal ? (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        ) : null}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;AAAmB,EAC5E,CAAC;AAED,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,CAAC;CACP,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAED,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;AACR;AAEA,IAAM,YAAY,EAAE,gBAClB,oBAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;AACX,CAAA;AAGH,IAAM,iBACJ,OACA,aACG;CACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAC9C,MAAM,eAAe;EACrB,SAAS,KAAgB;CAC3B;AACF;AAEA,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,WACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,YAAY;CAChD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,aAAa;CAElE,MAAM,eAAe,OAAO,OAAO,WAAW;CAE9C,MAAM,YAAY,YAAY,CAAC,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,CAAC,CAAC;CAE7C,MAAM,uBAAuB,OAAO,OAAO,wBAAwB;CAEnE,OACE,oBAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,oBAAoB;EAE3C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;YAEJ,qBAAC,OAAD;GACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,eAC1C;aANF;IAQG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IAC9D,iBAAiB,mBAChB,oBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,mBAAmB,kBAC/B,YACF;eAEA,oBAAC,UAAD,EAAU,WAAW,cAAgB,CAAA;IAClC,CAAA;IAEN,eACC,qBAAC,aAAD;KAAa,MAAK;KAAK,QAAO;eAA9B;MAAuC;MACnC;MAAU;MAAE;MAAY;KACf;SACX;GACD;;CACgB,CAAA;AAE3B"}
+{"version":3,"file":"DataTableHeaderCell.js","names":[],"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 * as React from 'react'\nimport { useHover } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTable.context'\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-subtlest', '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-accent-subtle',\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=\"absolute left-1 stroke-(--text-color-accent-hover)\"\n  />\n)\n\nconst 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\nexport const DataTableHeaderCell = ({\n  header,\n  includeTotal = false,\n  totalSuffix = 'items',\n  children,\n  className,\n  ...rest\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 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      {...rest}\n    >\n      <div\n        className={cn(\n          'flex',\n          'gap-1',\n          'items-center',\n          header.colSpan > 1 ? 'justify-center' : 'justify-start'\n        )}\n      >\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <div\n            className={cn(\n              'flex',\n              'items-center',\n              'relative',\n              'size-6',\n              'ml-2',\n              isHovered ? 'bg-accent-subtle-hover' : 'bg-accent-subtle',\n              'rounded-sm'\n            )}\n          >\n            <SortIcon direction={sortDirection} />\n          </div>\n        )}\n        {includeTotal ? (\n          <StyledCount size=\"sm\" weight=\"normal\">\n            ({totalRows} {totalSuffix})\n          </StyledCount>\n        ) : null}\n      </div>\n    </StyledTableHeaderCell>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAM,cAAc,OAAO,MAAM,EAC/B,MAAM;CAAC;CAAiB;CAAqB;CAAU;AAAmB,EAC5E,CAAC;AAED,IAAM,wBAAwB,OAAO,MAAM,YAAY;CACrD,MAAM,CAAC;CACP,UAAU,EACR,YAAY,EACV,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,EACF,EACF;AACF,CAAC;AAED,IAAM,YAAY;CAChB,KAAK;CACL,MAAM;AACR;AAEA,IAAM,YAAY,EAAE,gBAClB,oBAAC,MAAD;CACE,IAAI,UAAU;CACd,MAAK;CACL,WAAU;AACX,CAAA;AAGH,IAAM,iBACJ,OACA,aACG;CACH,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;EAC9C,MAAM,eAAe;EACrB,SAAS,KAAgB;CAC3B;AACF;AAEA,IAAa,uBAAuB,EAClC,QACA,eAAe,OACf,cAAc,SACd,UACA,WACA,GAAG,WACuB;CAC1B,MAAM,gBAAgB,OAAO,OAAO,YAAY;CAChD,MAAM,EAAE,YAAY,iBAAiB,gBAAgB,aAAa;CAElE,MAAM,eAAe,OAAO,OAAO,WAAW;CAE9C,MAAM,YAAY,YAAY,CAAC,EAAE,MAAM;CAEvC,MAAM,EAAE,YAAY,cAAc,SAAS,CAAC,CAAC;CAE7C,MAAM,uBAAuB,OAAO,OAAO,wBAAwB;CAEnE,OACE,oBAAC,uBAAD;EACE,YAAY,mBAAmB;EAC/B,SAAS,OAAO;EAChB,SACE,mBAAmB,gBAAgB,uBAC/B,uBACA,KAAA;EAEN,YAAY,UACV,mBACA,gBACA,wBACA,cAAc,OAAO,oBAAoB;EAE3C,UAAU,mBAAmB,eAAe,IAAI;EAChD,GAAI;EACO;EACX,GAAI;YAEJ,qBAAC,OAAD;GACE,WAAW,GACT,QACA,SACA,gBACA,OAAO,UAAU,IAAI,mBAAmB,eAC1C;aANF;IAQG,WAAW,OAAO,OAAO,UAAU,QAAQ,OAAO,WAAW,CAAC;IAC9D,iBAAiB,mBAChB,oBAAC,OAAD;KACE,WAAW,GACT,QACA,gBACA,YACA,UACA,QACA,YAAY,2BAA2B,oBACvC,YACF;eAEA,oBAAC,UAAD,EAAU,WAAW,cAAgB,CAAA;IAClC,CAAA;IAEN,eACC,qBAAC,aAAD;KAAa,MAAK;KAAK,QAAO;eAA9B;MAAuC;MACnC;MAAU;MAAE;MAAY;KACf;SACX;GACD;;CACgB,CAAA;AAE3B"}

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

@@ -12,7 +12,7 @@ import { ChevronDown, ChevronRight } from "@atom-learning/icons";
 var StyledRow = styled(Table.Row, {
 	base: ["bg-[initial]", "relative"],
 	variants: {
-		isSelected: { true: ["bg-primary-100!"] },
+		isSelected: { true: ["bg-accent-subtle!"] },
 		isDisabled: { true: ["opacity-30"] },
 		isFocusable: { true: [
 			"translate-y-0",
@@ -20,14 +20,14 @@ var StyledRow = styled(Table.Row, {
 			"ease-out",
 			"transition-shadow",
 			"transition-transform",
-			"hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]",
+			"hover:shadow-(--shadow-floating-md)",
 			"hover:-translate-y-px",
 			"hover:z-3",
-			"focus:outline-2",
-			"focus:outline-primary-500",
-			"focus:outline-solid",
-			"focus:-outline-offset-4",
-			"focus:[&_td]:bg-transparent"
+			"focus-visible:outline-2",
+			"focus-visible:outline-focus",
+			"focus-visible:outline-solid",
+			"focus-visible:-outline-offset-4",
+			"focus-visible:[&_td]:bg-transparent"
 		] }
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","names":[],"sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-100!']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={cn(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,UAAU;CACjC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,iBAAiB,EAC1B;EACA,YAAY,EACV,MAAM,CAAC,YAAY,EACrB;EACA,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF;AACF,CAAC;AAED,IAAM,wBAAwB,YAAqC;CACjE,IAAI,CAAC,SAAS,OAAO;CACrB,IAAI,QAAQ,QAAQ,oCAAoC,GAAG,OAAO;CAClE,IAAI,QAAQ,aAAa,MAAM,MAAM,UAAU,OAAO;CACtD,OAAO;AACT;AAEA,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,aAAa;CAEf,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,yBAAyB;CACzD,MAAM,sBAAsB,IAAI,yBAAyB;CAEzD,MAAM,wBAAmD;EACvD,IAAI,IAAI,kBAAkB,GAAG,OAAO;EACpC,OAAO,IAAI,cAAc;CAC3B;CAEA,MAAM,kBACJ,SACA,UACG;EACH,IAAI,CAAC,WAAW;EAIhB,IAAI,CADgB,MAAM,OAAmB,QAAQ,IAChD,KAAc,qBAAqB,MAAM,MAAiB,GAC7D;EAGF,UAAU,QAAQ,UAAU,KAAK;CACnC;CAEA,MAAM,iBAAiB,UAAoD;EACzE,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,IAAI,qBAAqB,MAAM,MAAiB,GAC9C;GAEF,MAAM,eAAe;GACrB,eACE,KACA,KACF;EACF;EACA,IAAI,MAAM,QAAQ,aAAa;GAC7B,MAAM,eAAe;GAErB,MAAM,UADc,MAAM,OAAuB,QAAQ,IACzC,CAAA,EAAY;GAC5B,IAAI,WAAW,QAAQ,YAAY,MACjC,QAAQ,MAAM;EAElB;EACA,IAAI,MAAM,QAAQ,WAAW;GAC3B,MAAM,eAAe;GAErB,MAAM,cADc,MAAM,OAAuB,QAAQ,IACrC,CAAA,EAAY;GAChC,IAAI,eAAe,YAAY,YAAY,MACzC,YAAY,MAAM;EAEtB;CACF;CAEA,OACE,qBAAC,WAAD;EACE,YAAY,IAAI,cAAc;EAClB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,KAAK;GAC7C,UAAU;GACV,WAAW;GACX,WAAW;EACb;YATF;GAWG,qBAAqB,KACpB,oBAAC,MAAM,MAAP;IACE,eAAa,eAAe,IAAI;IAChC,SAAS;IACT,WAAW,GACT,QACA,IAAI,aAAa,IAAI,mBAAmB,aAC1C;cAEC,IAAI,aAAa,KAChB,oBAAC,MAAD,EAAM,IAAI,IAAI,cAAc,IAAI,cAAc,aAAe,CAAA;GAErD,CAAA;GAGb,sBACC,oBAAC,MAAM,MAAP;IAAY,WAAU;cACpB,oBAAC,+BAAD;KACO;KACL,SAAS,gBAAgB;KACzB,iBAAiB;IAClB,CAAA;GACS,CAAA;GAEb,IAAI,gBAAgB,CAAC,CAAC,KAAK,SAAS;IACnC,OAAO,oBAAC,mBAAD,EAAuC,KAAO,GAAtB,KAAK,EAAiB;GACvD,CAAC;EACQ;;AAEf"}
+{"version":3,"file":"DataTableRow.js","names":[],"sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['bg-accent-subtle!']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-(--shadow-floating-md)',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus-visible:outline-2',\n        'focus-visible:outline-focus',\n        'focus-visible:outline-solid',\n        'focus-visible:-outline-offset-4',\n        'focus-visible:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={cn(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,UAAU;CACjC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,mBAAmB,EAC5B;EACA,YAAY,EACV,MAAM,CAAC,YAAY,EACrB;EACA,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,EACF;CACF;AACF,CAAC;AAED,IAAM,wBAAwB,YAAqC;CACjE,IAAI,CAAC,SAAS,OAAO;CACrB,IAAI,QAAQ,QAAQ,oCAAoC,GAAG,OAAO;CAClE,IAAI,QAAQ,aAAa,MAAM,MAAM,UAAU,OAAO;CACtD,OAAO;AACT;AAEA,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,aAAa;CAEf,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,yBAAyB;CACzD,MAAM,sBAAsB,IAAI,yBAAyB;CAEzD,MAAM,wBAAmD;EACvD,IAAI,IAAI,kBAAkB,GAAG,OAAO;EACpC,OAAO,IAAI,cAAc;CAC3B;CAEA,MAAM,kBACJ,SACA,UACG;EACH,IAAI,CAAC,WAAW;EAIhB,IAAI,CADgB,MAAM,OAAmB,QAAQ,IAChD,KAAc,qBAAqB,MAAM,MAAiB,GAC7D;EAGF,UAAU,QAAQ,UAAU,KAAK;CACnC;CAEA,MAAM,iBAAiB,UAAoD;EACzE,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,IAAI,qBAAqB,MAAM,MAAiB,GAC9C;GAEF,MAAM,eAAe;GACrB,eACE,KACA,KACF;EACF;EACA,IAAI,MAAM,QAAQ,aAAa;GAC7B,MAAM,eAAe;GAErB,MAAM,UADc,MAAM,OAAuB,QAAQ,IACzC,CAAA,EAAY;GAC5B,IAAI,WAAW,QAAQ,YAAY,MACjC,QAAQ,MAAM;EAElB;EACA,IAAI,MAAM,QAAQ,WAAW;GAC3B,MAAM,eAAe;GAErB,MAAM,cADc,MAAM,OAAuB,QAAQ,IACrC,CAAA,EAAY;GAChC,IAAI,eAAe,YAAY,YAAY,MACzC,YAAY,MAAM;EAEtB;CACF;CAEA,OACE,qBAAC,WAAD;EACE,YAAY,IAAI,cAAc;EAClB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,KAAK;GAC7C,UAAU;GACV,WAAW;GACX,WAAW;EACb;YATF;GAWG,qBAAqB,KACpB,oBAAC,MAAM,MAAP;IACE,eAAa,eAAe,IAAI;IAChC,SAAS;IACT,WAAW,GACT,QACA,IAAI,aAAa,IAAI,mBAAmB,aAC1C;cAEC,IAAI,aAAa,KAChB,oBAAC,MAAD,EAAM,IAAI,IAAI,cAAc,IAAI,cAAc,aAAe,CAAA;GAErD,CAAA;GAGb,sBACC,oBAAC,MAAM,MAAP;IAAY,WAAU;cACpB,oBAAC,+BAAD;KACO;KACL,SAAS,gBAAgB;KACzB,iBAAiB;IAClB,CAAA;GACS,CAAA;GAEb,IAAI,gBAAgB,CAAC,CAAC,KAAK,SAAS;IACnC,OAAO,oBAAC,mBAAD,EAAuC,KAAO,GAAtB,KAAK,EAAiB;GACvD,CAAC;EACQ;;AAEf"}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Table } from '../table/Table';
 import { TableBody } from '../table/TableBody';
 import { DataTableHead } from './DataTableHead';
-export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns'> & Partial<Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {
+export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns'> & Partial<Pick<React.ComponentProps<typeof DataTableHead>, 'appearance' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {
     scrollOptions?: {
         hasStickyHeader?: boolean;
         stickyHeaderOffset?: number;
@@ -15,4 +15,4 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
     rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
     withContainer?: boolean;
 };
-export declare const DataTableTable: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...rest }: DataTableTableProps) => React.JSX.Element | null;
+export declare const DataTableTable: ({ sortable, striped, appearance, className, scrollOptions, rowAction, withContainer, ...rest }: DataTableTableProps) => React.JSX.Element | null;

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

@@ -11,10 +11,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableTable.tsx
 var TableContainer = styled("div", { base: [
 	"p-2",
-	"bg-white",
+	"bg-surface",
 	"rounded-lg"
 ] });
-var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOptions = {
+var DataTableTable = ({ sortable, striped, appearance = "surface", className, scrollOptions = {
 	numberOfStickyColumns: 0,
 	stickyHeaderOffset: 0,
 	hasStickyHeader: false,
@@ -107,7 +107,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 			"delay-150"
 		], className),
 		children: [/* @__PURE__ */ jsx(DataTableHead, {
-			theme,
+			appearance,
 			sortable,
 			isSticky: scrollOptions.hasStickyHeader,
 			stickyOffset: scrollOptions.stickyHeaderOffset,

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...rest\n}: DataTableTableProps): React.JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n  const scrollRafIdRef = React.useRef<number | null>(null)\n\n  const scrollTarget = typeof window === 'undefined' ? null : window\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        scrollRafIdRef.current = requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollRafIdRef.current !== null) {\n        cancelAnimationFrame(scrollRafIdRef.current)\n        scrollRafIdRef.current = null\n      }\n      isScrolling.current = false\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...rest}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CAAC;CAAO;CAAY;AAAY,EACxC,CAAC;AAuBD,IAAa,kBAAkB,EAC7B,UACA,SACA,QAAQ,SACR,WACA,gBAAgB;CACd,uBAAuB;CACvB,oBAAoB;CACpB,iBAAiB;CACjB,wBAAwB;CACxB,aAAa;AACf,GACA,WACA,gBAAgB,OAChB,GAAG,WACgD;CACnD,MAAM,EACJ,gBACA,cACA,sBACA,cACA,oBACA,SACA,qBACE,aAAa;CAEjB,MAAM,WAAW,QAAM,OAAgC,IAAI;CAC3D,MAAM,iBAAiB,QAAM,OAAO,KAAK;CACzC,MAAM,cAAc,QAAM,OAAgB,KAAK;CAC/C,MAAM,iBAAiB,QAAM,OAAsB,IAAI;CAEvD,MAAM,eAAe,OAAO,WAAW,cAAc,OAAO;CAE5D,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,OAAO,yBAAyB,aACnD;EAGF,MAAM,uBAAuB;GAC3B,IAAI,SAAS,SAAS;IACpB,MAAM,WAAW,SAAS,QAAQ,sBAAsB,CAAC,CAAC;IAC1D,MAAM,cAAc,SAAS,QAAQ,sBAAsB,CAAC,CAAC;IAE7D,kBAAkB,kBAAkB;KAClC,GAAG;KACH,KAAK;KACL,QAAQ;IACV,EAAE;GACJ;GACA,YAAY,UAAU;EACxB;EAEA,MAAM,qBAAqB;GACzB,IAAI,CAAC,YAAY,SAAS;IACxB,eAAe,UAAU,sBAAsB,cAAc;IAC7D,YAAY,UAAU;GACxB;EACF;EAEA,IAAI,CAAC,SAAS,SAAS;EAEvB,MAAM,iBAAiB,eAAe,sBAAsB;EAE5D,MAAM,kBAAkB;GACtB,YAAY,IAAI,eAAe,UAAU,eAAe;GACxD,WAAW;EACb;EAEA,MAAM,2BAA2B,YAAyC;GACxE,IAAI,CAAC,WAAW,QAAQ,WAAW,GAAG;GACtC,MAAM,QAAQ,QAAQ;GAEtB,eAAe,UAAU,MAAM;GAE/B,IAAI,cACF,IAAI,MAAM,gBAER,cAAc,iBAAiB,UAAU,YAAY;QAGrD,cAAc,oBAAoB,UAAU,YAAY;GAI5D,kBAAkB,kBAAkB;IAClC,GAAG;IACH,WAAW,MAAM;GACnB,EAAE;EACJ;EAEA,MAAM,gBAAgB,IAAI,qBACxB,yBACA,eACF;EAGA,IACE,SAAS,YACR,cAAc,mBACb,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,IAE3C,cAAc,QAAQ,SAAS,OAAO;EAGxC,aAAa;GACX,cAAc,WAAW;GACzB,IAAI,eAAe,YAAY,MAAM;IACnC,qBAAqB,eAAe,OAAO;IAC3C,eAAe,UAAU;GAC3B;GACA,YAAY,UAAU;GACtB,IAAI,cACF,cAAc,oBAAoB,UAAU,YAAY;EAE5D;CACF,GAAG;EACD;EACA,cAAc;EACd,eAAe;EACf;CACF,CAAC;CAED,MAAM,YAAY,mBAAmB,eAAe;CACpD,MAAM,UAAU,CAAC,aAAa,aAAa,MAAM;CAEjD,MAAM,gCAAwC;EAC5C,IAAI,qBAAqB;EAEzB,IAAI,qBAAqB,KAAK,CAAC,CAAC,oBAC9B,qBAAqB;OAChB,IAAI,qBAAqB,KAAK,CAAC,CAAC,oBACrC,qBAAqB;EAGvB,OAAO,GAAG,QAAQ,GAAG,mBAAmB;CAC1C;CAEA,IAAI,SAAS,OAAO;CAEpB,MAAM,iBACJ,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,GAAI;EACJ,KAAK;EACL,uBAAuB,cAAc;EACrC,oBAAoB,cAAc;EAClC,oBAAoB,wBAAwB;EAC5C,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;EACF,GACA,SACF;YAlBF,CAoBE,oBAAC,eAAD;GACS;GACG;GACV,UAAU,cAAc;GACxB,cAAc,cAAc;GAC5B,WAAW,cAAc;GACzB,wBAAwB,cAAc;GACtC,aAAa,cAAc;EAC5B,CAAA,GACD,oBAAC,eAAD;GAAwB;GAAoB;EAAY,CAAA,CACnD;;CAGT,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,kBAAD,CAAmB,CAAA,GAClB,gBACC,oBAAC,gBAAD;EACE,WAAW,GACT,cAAc,0BAA0B,KAAK,iBAC/C;YAEC;CACa,CAAA,IAEhB,cAEF,EAAA,CAAA;AAEN"}
+{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { useDataTable } from './DataTable.context'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-surface', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'appearance' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  appearance = 'surface',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...rest\n}: DataTableTableProps): React.JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n  const scrollRafIdRef = React.useRef<number | null>(null)\n\n  const scrollTarget = typeof window === 'undefined' ? null : window\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        scrollRafIdRef.current = requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollRafIdRef.current !== null) {\n        cancelAnimationFrame(scrollRafIdRef.current)\n        scrollRafIdRef.current = null\n      }\n      isScrolling.current = false\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...rest}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        appearance={appearance}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

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

@@ -10,5 +10,5 @@ type DragAndDropTableProps = DataTableTableProps & {
         newData: AsyncDataResult;
     }) => void;
 };
-export declare const DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, className, ...rest }: DragAndDropTableProps) => React.JSX.Element;
+export declare const DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, appearance, className, ...rest }: DragAndDropTableProps) => React.JSX.Element;
 export {};

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

@@ -10,7 +10,7 @@ import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { arrayMove } from "@dnd-kit/sortable";
 //#region src/components/data-table/drag-and-drop/DragAndDropTable.tsx
-var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, theme, className, ...rest }) => {
+var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, appearance, className, ...rest }) => {
 	const { asyncDataState, data, setData } = useDataTable();
 	const isPending = asyncDataState === AsyncDataState.PENDING;
 	const rowIds = React$1.useMemo(() => data.results.map((row) => {
@@ -45,7 +45,7 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 				"delay-150"
 			], className),
 			children: [/* @__PURE__ */ jsx(DataTableHead, {
-				theme,
+				appearance,
 				sortable
 			}), /* @__PURE__ */ jsx(DragAndDropTableBody, {
 				striped,

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState, type AsyncDataResult } from '../DataTable.types'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: AsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  className,\n  ...rest\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as string | number\n      }),\n    [data, idColumn]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...rest}\n        className={cn(\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity',\n            'duration-250',\n            'linear',\n            'delay-150'\n          ],\n          className\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,WACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,aAAa;CACvD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;EACxB,OAAO,IAAI;CACb,CAAC,GACH,CAAC,MAAM,QAAQ,CACjB;CAWA,OACE,qBAAC,cAAD;EAAe,cAXQ,QAAM,aAC5B,EAAE,UAAU,eAAe;GAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,QAAQ;GAChE,MAAM,UAAU;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM;GAC5D,QAAQ;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM,CAAC;GACrD,gBAAgB;IAAE;IAAU;IAAU;GAAQ,CAAC;EACjD,GACA,CAAC,MAAM,aAAa,CAIS;EAAkB,aAAa;YAA5D,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,qBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GACT,aAAa;IACX;IACA;IACA;IACA;IACA;IACA;GACF,GACA,SACF;aAZF,CAcE,oBAAC,eAAD;IAAsB;IAAiB;GAAW,CAAA,GAClD,oBAAC,sBAAD;IAA+B;IAAmB;GAAW,CAAA,CACxD;IACM;;AAEnB"}
+{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState, type AsyncDataResult } from '../DataTable.types'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: AsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  appearance,\n  className,\n  ...rest\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as string | number\n      }),\n    [data, idColumn]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...rest}\n        className={cn(\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity',\n            'duration-250',\n            'linear',\n            'delay-150'\n          ],\n          className\n        )}\n      >\n        <DataTableHead appearance={appearance} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAuBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,YACA,WACA,GAAG,WACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,aAAa;CACvD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;EACxB,OAAO,IAAI;CACb,CAAC,GACH,CAAC,MAAM,QAAQ,CACjB;CAWA,OACE,qBAAC,cAAD;EAAe,cAXQ,QAAM,aAC5B,EAAE,UAAU,eAAe;GAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,QAAQ;GAChE,MAAM,UAAU;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM;GAC5D,QAAQ;IAAE,SAAS;IAAe,OAAO,KAAK;GAAM,CAAC;GACrD,gBAAgB;IAAE;IAAU;IAAU;GAAQ,CAAC;EACjD,GACA,CAAC,MAAM,aAAa,CAIS;EAAkB,aAAa;YAA5D,CACE,oBAAC,kBAAD,CAAmB,CAAA,GACnB,qBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GACT,aAAa;IACX;IACA;IACA;IACA;IACA;IACA;GACF,GACA,SACF;aAZF,CAcE,oBAAC,eAAD;IAA2B;IAAsB;GAAW,CAAA,GAC5D,oBAAC,sBAAD;IAA+B;IAAmB;GAAW,CAAA,CACxD;IACM;;AAEnB"}

package/dist/components/data-table/pagination/Pagination.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
-import type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme';
 declare const StyledNav: import("../../..").PolymorphicComponent<"nav", unknown>;
-type PaginationProps = React.ComponentProps<typeof StyledNav> & {
-    colorScheme?: TcolorScheme;
-};
-export declare function Pagination({ colorScheme, ...rest }: PaginationProps): React.JSX.Element | null;
+type PaginationProps = React.ComponentProps<typeof StyledNav>;
+export declare function Pagination(props: PaginationProps): React.JSX.Element | null;
 export declare namespace Pagination {
     var displayName: string;
 }

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

@@ -19,7 +19,7 @@ var StyledNav = styled("nav", { base: [
 	"md:flex-row"
 ] });
 /** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
-var Pagination = ({ colorScheme, ...rest }) => {
+var Pagination = (props) => {
 	const { applyPagination, removePagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
 	React$1.useEffect(() => {
 		applyPagination();
@@ -38,12 +38,11 @@ var Pagination = ({ colorScheme, ...rest }) => {
 	};
 	const pageCount = hasAsyncData ? getPageCount() : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize));
 	return /* @__PURE__ */ jsxs(StyledNav, {
-		...rest,
+		...props,
 		children: [/* @__PURE__ */ jsx(Text, {
 			size: "sm",
 			children: `${start} - ${end} of ${hasAsyncData ? getTotalRows() : totalVisibleRows} items`
 		}), /* @__PURE__ */ jsx(Pagination$1, {
-			colorScheme,
 			selectedPage: paginationState.pageIndex + 1,
 			pagesCount: pageCount,
 			onSelectedPageChange: setPage

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../../styled'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState } from '../DataTable.types'\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, ...rest }: PaginationProps) => {\n  const {\n    applyPagination,\n    removePagination,\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    return () => removePagination()\n  }, [applyPagination, removePagination])\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 {...rest}>\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"],"mappings":";;;;;;;;AASA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;;AAOD,IAAa,cAAc,EAAE,aAAa,GAAG,WAA4B;CACvE,MAAM,EACJ,iBACA,kBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,gBAAgB;EAChB,aAAa,iBAAiB;CAChC,GAAG,CAAC,iBAAiB,gBAAgB,CAAC;CAEtC,MAAM,EAAE,YAAY,oBAAoB,SAAS;CAEjD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM;CAEjD,MAAM,iBAAiB,eACnB,aAAa,IAAI,IACjB,oBAAoB,CAAC,CAAC,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,CAAC,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,CAAC,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,gBAAgB;CAGnE,MAAM,WAAW,UAAkB;EACjC,aAAa,QAAQ,CAAC;CACxB;CAEA,MAAM,YAAY,eACd,aAAa,IACb,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,QAAQ,CAAC;CAEtE,OACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC;EAAc,CAAA,GACf,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;EACvB,CAAA,CACQ;;AAEf;AAEA,WAAW,cAAc"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { useDataTable } from '../DataTable.context'\nimport { AsyncDataState } from '../DataTable.types'\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\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = (props: PaginationProps) => {\n  const {\n    applyPagination,\n    removePagination,\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    return () => removePagination()\n  }, [applyPagination, removePagination])\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        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AAQA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;;AAKD,IAAa,cAAc,UAA2B;CACpD,MAAM,EACJ,iBACA,kBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,aAAa;CAEjB,QAAM,gBAAgB;EACpB,gBAAgB;EAChB,aAAa,iBAAiB;CAChC,GAAG,CAAC,iBAAiB,gBAAgB,CAAC;CAEtC,MAAM,EAAE,YAAY,oBAAoB,SAAS;CAEjD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,aAAa,MAAM;CAEjD,MAAM,iBAAiB,eACnB,aAAa,IAAI,IACjB,oBAAoB,CAAC,CAAC,KAAK,SAAS,gBAAgB,WAAW;CAEnE,IAAI,WAAW,CAAC,gBAAgB,OAAO;CACvC,MAAM,mBAAmB,oBAAoB,CAAC,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,YAAY,CAAC,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,gBAAgB;CAGnE,MAAM,WAAW,UAAkB;EACjC,aAAa,QAAQ,CAAC;CACxB;CAEA,MAAM,YAAY,eACd,aAAa,IACb,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,QAAQ,CAAC;CAEtE,OACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,aAAa,IAAI,iBACjC;EAAc,CAAA,GACf,oBAAC,cAAD;GACE,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;EACvB,CAAA,CACQ;;AAEf;AAEA,WAAW,cAAc"}

package/dist/components/date-field/DateField.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type DateInputProps } from '../date-input/DateInput';
 import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
 type DateFieldProps = DateInputProps & FieldElementWrapperProps;
-export declare function DateField({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }: DateFieldProps): React.JSX.Element;
+export declare function DateField({ className, hideLabel, label, name, validation, prompt, description, appearance, fill, ...rest }: DateFieldProps): React.JSX.Element;
 export declare namespace DateField {
     var displayName: string;
 }

package/dist/components/date-field/DateField.js

@@ -6,13 +6,13 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/date-field/DateField.tsx
-var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }) => {
+var DateField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, fill, ...rest }) => {
 	const { register, trigger } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
-	const formTheme = context?.theme ?? theme;
+	const formFill = context?.fill ?? fill;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		description,
@@ -28,7 +28,7 @@ var DateField = ({ className, hideLabel, label, name, validation, prompt, descri
 			name,
 			ref,
 			appearance: formAppearance,
-			theme: formTheme,
+			fill: formFill,
 			...error && { state: "error" },
 			...rest,
 			revalidate: trigger

package/dist/components/date-field/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","names":[],"sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, type DateInputProps } from '../date-input/DateInput'\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...rest\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...rest}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"mappings":";;;;;;;;AAaA,IAAa,aAAa,EACxB,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,WACiB;CACpB,MAAM,EAAE,UAAU,YAAY,eAAe;CAC7C,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAEhD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,WAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;GACJ,YAAY;EACb,CAAA;CACW,CAAA;AAElB;AAEA,UAAU,cAAc"}
+{"version":3,"file":"DateField.js","names":[],"sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, type DateInputProps } from '../date-input/DateInput'\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  fill,\n  ...rest\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  const formAppearance = context?.appearance || appearance\n  const formFill = context?.fill ?? fill\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        fill={formFill}\n        {...(error && { state: 'error' })}\n        {...rest}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"mappings":";;;;;;;;AAaA,IAAa,aAAa,EACxB,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,MACA,GAAG,WACiB;CACpB,MAAM,EAAE,UAAU,YAAY,eAAe;CAC7C,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAEhD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,WAAW,SAAS,QAAQ;CAElC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,WAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,MAAM;GACN,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;GACJ,YAAY;EACb,CAAA;CACW,CAAA;AAElB;AAEA,UAAU,cAAc"}

package/dist/components/date-input/DateInput.d.ts

@@ -7,9 +7,9 @@ export type DateInputProps = Omit<DayzedInterface, 'onDateSelected'> & CalendarT
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     appearance?: 'standard' | 'modern';
-    theme?: 'white' | 'grey';
+    fill?: 'surface' | 'subtle';
     revalidate?: () => Promise<boolean>;
     onChange?: (value?: Date) => void;
     ref?: React.Ref<HTMLInputElement>;
 };
-export declare const DateInput: ({ ref, initialDate, dateFormat, firstDayOfWeek, disabled, monthNames, weekdayNames, size, appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...rest }: DateInputProps) => React.JSX.Element;
+export declare const DateInput: ({ ref, initialDate, dateFormat, firstDayOfWeek, disabled, monthNames, weekdayNames, size, appearance, fill, labels, revalidate, onChange, minDate, maxDate, ...rest }: DateInputProps) => React.JSX.Element;

package/dist/components/date-input/DateInput.js

@@ -16,7 +16,7 @@ import customParseFormat from "dayjs/plugin/customParseFormat.js";
 //#region src/components/date-input/DateInput.tsx
 dayjs.extend(customParseFormat);
 var formatDateToString = (date, dateFormat = DEFAULT_DATE_FORMAT) => date ? dayjs(date).format(dateFormat) : "";
-var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, theme, labels, revalidate, onChange, minDate, maxDate, ...rest }) => {
+var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayOfWeek = 1, disabled, monthNames, weekdayNames, size = "md", appearance, fill, labels, revalidate, onChange, minDate, maxDate, ...rest }) => {
 	const [date, setDate] = React$1.useState(initialDate ? dayjs(initialDate).toDate() : void 0);
 	const [inputElRef, setInputElRef] = useCallbackRefState();
 	const composedInputRef = useComposedRefs(ref, setInputElRef);
@@ -53,7 +53,7 @@ var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayO
 			disabled,
 			size,
 			appearance,
-			theme,
+			fill,
 			...rest,
 			onChange: handleInputChange,
 			ref: composedInputRef,
@@ -68,7 +68,7 @@ var DateInput = ({ ref, initialDate, dateFormat = DEFAULT_DATE_FORMAT, firstDayO
 					disabled,
 					label: updatedLabels.open,
 					size: iconSize,
-					theme: "neutral",
+					tone: "neutral",
 					hasTooltip: false,
 					className: "absolute top-1/2 right-0 -translate-y-1/2",
 					children: /* @__PURE__ */ jsx(Icon, { is: CalendarEvent })