@cognite/aura 1.46768.0 → 1.46870.0

package/DESIGN.md

@@ -991,6 +991,12 @@ Anytime you need to reference a component in Storybook, use the following URL an
 
 Anytime you need to reference a component in docs, use the following URL and replace the slug with the component's doc slug: https://docs.cognite.com/aura-design-system/primitives/{docs-slug}
 
+#### Component guidance files
+
+Some components have full usage guidance in a Markdown file next to their source, linked from their section below as **Full guidance**.
+These files ship in the npm package and are importable as `@cognite/aura/docs/{component}`, with a matching example gallery at `@cognite/aura/examples/{component}`.
+When a component has a guidance file, treat it as the primary reference and its section below as a summary.
+
 #### Accordion
 
 **Storybook-slug:** accordion
@@ -1068,6 +1074,7 @@ Action toolbar is a transient bottom-aligned action row that appears when users
 
 **Storybook-slug:** alert
 **Docs-slug:** alert
+**Full guidance:** [alert.md](./src/components/ui/core/alert/alert.md)
 
 **Definition**
 Alert communicates contextual, medium-emphasis information inside page/task flow. It is not a blocking modal.
@@ -1126,6 +1133,7 @@ Short, focused confirmation or acknowledgment that interrupts the user for a cle
 
 **Storybook-slug:** avatar
 **Docs-slug:** avatar
+**Full guidance:** [avatar.md](./src/components/ui/core/avatar/avatar.md)
 
 **Definition**
 Avatar visually represents a user, team, or concept and helps recognition in collaborative UI.
@@ -1151,6 +1159,7 @@ Avatar visually represents a user, team, or concept and helps recognition in col
 
 **Storybook-slug:** badge
 **Docs-slug:** badge
+**Full guidance:** [badge.md](./src/components/ui/core/badge/badge.md)
 
 **Definition**
 Compact label for status, category, or metadata.
@@ -1227,6 +1236,7 @@ Hierarchical navigation aid that shows users their current location within the p
 
 **Storybook-slug:** button
 **Docs-slug:** button
+**Full guidance:** [button.md](./src/components/ui/core/button/button.md)
 
 **Definition**
 Primary control for discrete actions.
@@ -1299,6 +1309,7 @@ A structural container with optional header, body, and footer slots for displayi
 
 **Storybook-slug:** checkbox
 **Docs-slug:** checkbox
+**Full guidance:** [checkbox.md](./src/components/ui/core/checkbox/checkbox.md)
 
 **Definition**
 Enables users to independently select one or multiple options. Can appear standalone or within menus, tree views, tables, or cards.
@@ -2074,6 +2085,7 @@ Lightweight, auto-dismiss feedback for outcomes that do not need a blocking surf
 
 **Storybook-slug:** switch
 **Docs-slug:** switch
+**Full guidance:** [switch.md](./src/components/ui/core/switch/switch.md)
 
 **Definition**
 A binary toggle control that turns a setting on or off, with changes taking effect immediately.

package/dist/components/ui/core/alert/alert.gallery.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement } from "react";
+export declare function AlertGallery(): ReactElement;

package/dist/components/ui/core/alert/alert.gallery.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, AlertDescription, AlertTitle } from "./alert.js";
+export function AlertGallery() {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "w-100 space-y-4",
+        children: [
+            /*#__PURE__*/ _jsxs(Alert, {
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: "Default Alert"
+                    }),
+                    /*#__PURE__*/ _jsx(AlertDescription, {
+                        children: "This is the default alert style."
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Alert, {
+                variant: "info",
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: "Info Alert"
+                    }),
+                    /*#__PURE__*/ _jsx(AlertDescription, {
+                        children: "This is the info alert style."
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Alert, {
+                variant: "warning",
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: "Warning Alert"
+                    }),
+                    /*#__PURE__*/ _jsx(AlertDescription, {
+                        children: "This is the warning alert style."
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Alert, {
+                variant: "error",
+                children: [
+                    /*#__PURE__*/ _jsx(AlertTitle, {
+                        children: "Error Alert"
+                    }),
+                    /*#__PURE__*/ _jsx(AlertDescription, {
+                        children: "This is the error alert style."
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=alert.gallery.js.map

package/dist/components/ui/core/alert/alert.gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/alert/alert.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { Alert, AlertDescription, AlertTitle } from './alert';\n\nexport function AlertGallery(): ReactElement {\n  return (\n    <div className=\"w-100 space-y-4\">\n      <Alert>\n        <AlertTitle>Default Alert</AlertTitle>\n        <AlertDescription>This is the default alert style.</AlertDescription>\n      </Alert>\n      <Alert variant=\"info\">\n        <AlertTitle>Info Alert</AlertTitle>\n        <AlertDescription>This is the info alert style.</AlertDescription>\n      </Alert>\n      <Alert variant=\"warning\">\n        <AlertTitle>Warning Alert</AlertTitle>\n        <AlertDescription>This is the warning alert style.</AlertDescription>\n      </Alert>\n      <Alert variant=\"error\">\n        <AlertTitle>Error Alert</AlertTitle>\n        <AlertDescription>This is the error alert style.</AlertDescription>\n      </Alert>\n    </div>\n  );\n}\n"],"names":["Alert","AlertDescription","AlertTitle","AlertGallery","div","className","variant"],"mappings":";AAEA,SAASA,KAAK,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,aAAU;AAE9D,OAAO,SAASC;IACd,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACL;;kCACC,KAACE;kCAAW;;kCACZ,KAACD;kCAAiB;;;;0BAEpB,MAACD;gBAAMM,SAAQ;;kCACb,KAACJ;kCAAW;;kCACZ,KAACD;kCAAiB;;;;0BAEpB,MAACD;gBAAMM,SAAQ;;kCACb,KAACJ;kCAAW;;kCACZ,KAACD;kCAAiB;;;;0BAEpB,MAACD;gBAAMM,SAAQ;;kCACb,KAACJ;kCAAW;;kCACZ,KAACD;kCAAiB;;;;;;AAI1B"}

package/dist/components/ui/core/avatar/avatar.gallery.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement } from "react";
+export declare function AvatarGallery(): ReactElement;

package/dist/components/ui/core/avatar/avatar.gallery.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, AvatarFallback } from "./avatar.js";
+export function AvatarGallery() {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-wrap gap-4",
+        children: [
+            /*#__PURE__*/ _jsx(Avatar, {
+                variant: "decorative-1",
+                "aria-label": "Mountain decorative avatar",
+                children: /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: "PJ"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Avatar, {
+                variant: "decorative-2",
+                "aria-label": "Fjord decorative avatar",
+                children: /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: "PJ"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Avatar, {
+                variant: "decorative-3",
+                "aria-label": "Nordic decorative avatar",
+                children: /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: "PJ"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Avatar, {
+                variant: "decorative-4",
+                "aria-label": "Aurora decorative avatar",
+                children: /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: "PJ"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Avatar, {
+                variant: "decorative-5",
+                "aria-label": "Dusk decorative avatar",
+                children: /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: "PJ"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Avatar, {
+                variant: "decorative-6",
+                "aria-label": "Amber decorative avatar",
+                children: /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: "PJ"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Avatar, {
+                variant: "decorative-7",
+                "aria-label": "Pink decorative avatar",
+                children: /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: "PJ"
+                })
+            }),
+            /*#__PURE__*/ _jsx(Avatar, {
+                variant: "overflow",
+                "aria-label": "Overflow colorway avatar",
+                children: /*#__PURE__*/ _jsx(AvatarFallback, {
+                    children: "+4"
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=avatar.gallery.js.map

package/dist/components/ui/core/avatar/avatar.gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/avatar/avatar.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { Avatar, AvatarFallback } from './avatar';\n\nexport function AvatarGallery(): ReactElement {\n  return (\n    <div className=\"flex flex-wrap gap-4\">\n      <Avatar variant=\"decorative-1\" aria-label=\"Mountain decorative avatar\">\n        <AvatarFallback>PJ</AvatarFallback>\n      </Avatar>\n      <Avatar variant=\"decorative-2\" aria-label=\"Fjord decorative avatar\">\n        <AvatarFallback>PJ</AvatarFallback>\n      </Avatar>\n      <Avatar variant=\"decorative-3\" aria-label=\"Nordic decorative avatar\">\n        <AvatarFallback>PJ</AvatarFallback>\n      </Avatar>\n      <Avatar variant=\"decorative-4\" aria-label=\"Aurora decorative avatar\">\n        <AvatarFallback>PJ</AvatarFallback>\n      </Avatar>\n      <Avatar variant=\"decorative-5\" aria-label=\"Dusk decorative avatar\">\n        <AvatarFallback>PJ</AvatarFallback>\n      </Avatar>\n      <Avatar variant=\"decorative-6\" aria-label=\"Amber decorative avatar\">\n        <AvatarFallback>PJ</AvatarFallback>\n      </Avatar>\n      <Avatar variant=\"decorative-7\" aria-label=\"Pink decorative avatar\">\n        <AvatarFallback>PJ</AvatarFallback>\n      </Avatar>\n      <Avatar variant=\"overflow\" aria-label=\"Overflow colorway avatar\">\n        <AvatarFallback>+4</AvatarFallback>\n      </Avatar>\n    </div>\n  );\n}\n"],"names":["Avatar","AvatarFallback","AvatarGallery","div","className","variant","aria-label"],"mappings":";AAEA,SAASA,MAAM,EAAEC,cAAc,QAAQ,cAAW;AAElD,OAAO,SAASC;IACd,qBACE,MAACC;QAAIC,WAAU;;0BACb,KAACJ;gBAAOK,SAAQ;gBAAeC,cAAW;0BACxC,cAAA,KAACL;8BAAe;;;0BAElB,KAACD;gBAAOK,SAAQ;gBAAeC,cAAW;0BACxC,cAAA,KAACL;8BAAe;;;0BAElB,KAACD;gBAAOK,SAAQ;gBAAeC,cAAW;0BACxC,cAAA,KAACL;8BAAe;;;0BAElB,KAACD;gBAAOK,SAAQ;gBAAeC,cAAW;0BACxC,cAAA,KAACL;8BAAe;;;0BAElB,KAACD;gBAAOK,SAAQ;gBAAeC,cAAW;0BACxC,cAAA,KAACL;8BAAe;;;0BAElB,KAACD;gBAAOK,SAAQ;gBAAeC,cAAW;0BACxC,cAAA,KAACL;8BAAe;;;0BAElB,KAACD;gBAAOK,SAAQ;gBAAeC,cAAW;0BACxC,cAAA,KAACL;8BAAe;;;0BAElB,KAACD;gBAAOK,SAAQ;gBAAWC,cAAW;0BACpC,cAAA,KAACL;8BAAe;;;;;AAIxB"}

package/dist/components/ui/core/badge/badge.gallery.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement } from "react";
+export declare function BadgeGallery(): ReactElement;

package/dist/components/ui/core/badge/badge.gallery.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconAlertTriangle, IconArchive, IconCircleCheck, IconHexagon, IconInnerShadowTopLeft } from "@tabler/icons-react";
+import { Badge } from "./badge.js";
+export function BadgeGallery() {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex max-w-120 flex-wrap justify-center gap-2",
+        children: [
+            /*#__PURE__*/ _jsx(Badge, {
+                variant: "decorative-1",
+                children: "Decorative 1"
+            }),
+            /*#__PURE__*/ _jsx(Badge, {
+                variant: "decorative-3",
+                children: "Decorative 3"
+            }),
+            /*#__PURE__*/ _jsx(Badge, {
+                variant: "decorative-5",
+                children: "Decorative 5"
+            }),
+            /*#__PURE__*/ _jsxs(Badge, {
+                variant: "inProgress",
+                children: [
+                    /*#__PURE__*/ _jsx(IconInnerShadowTopLeft, {}),
+                    "In progress"
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Badge, {
+                variant: "success",
+                children: [
+                    /*#__PURE__*/ _jsx(IconCircleCheck, {}),
+                    "Success"
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Badge, {
+                variant: "warning",
+                children: [
+                    /*#__PURE__*/ _jsx(IconAlertTriangle, {}),
+                    "Warning"
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Badge, {
+                variant: "error",
+                children: [
+                    /*#__PURE__*/ _jsx(IconHexagon, {}),
+                    "Error"
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Badge, {
+                variant: "archived",
+                children: [
+                    /*#__PURE__*/ _jsx(IconArchive, {}),
+                    "Archived"
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Badge, {
+                variant: "secondary",
+                dot: true,
+                children: "12"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=badge.gallery.js.map

package/dist/components/ui/core/badge/badge.gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/badge/badge.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport {\n  IconAlertTriangle,\n  IconArchive,\n  IconCircleCheck,\n  IconHexagon,\n  IconInnerShadowTopLeft,\n} from '@tabler/icons-react';\n\nimport { Badge } from './badge';\n\nexport function BadgeGallery(): ReactElement {\n  return (\n    <div className=\"flex max-w-120 flex-wrap justify-center gap-2\">\n      <Badge variant=\"decorative-1\">Decorative 1</Badge>\n      <Badge variant=\"decorative-3\">Decorative 3</Badge>\n      <Badge variant=\"decorative-5\">Decorative 5</Badge>\n      <Badge variant=\"inProgress\">\n        <IconInnerShadowTopLeft />\n        In progress\n      </Badge>\n      <Badge variant=\"success\">\n        <IconCircleCheck />\n        Success\n      </Badge>\n      <Badge variant=\"warning\">\n        <IconAlertTriangle />\n        Warning\n      </Badge>\n      <Badge variant=\"error\">\n        <IconHexagon />\n        Error\n      </Badge>\n      <Badge variant=\"archived\">\n        <IconArchive />\n        Archived\n      </Badge>\n      <Badge variant=\"secondary\" dot>\n        12\n      </Badge>\n    </div>\n  );\n}\n"],"names":["IconAlertTriangle","IconArchive","IconCircleCheck","IconHexagon","IconInnerShadowTopLeft","Badge","BadgeGallery","div","className","variant","dot"],"mappings":";AAEA,SACEA,iBAAiB,EACjBC,WAAW,EACXC,eAAe,EACfC,WAAW,EACXC,sBAAsB,QACjB,sBAAsB;AAE7B,SAASC,KAAK,QAAQ,aAAU;AAEhC,OAAO,SAASC;IACd,qBACE,MAACC;QAAIC,WAAU;;0BACb,KAACH;gBAAMI,SAAQ;0BAAe;;0BAC9B,KAACJ;gBAAMI,SAAQ;0BAAe;;0BAC9B,KAACJ;gBAAMI,SAAQ;0BAAe;;0BAC9B,MAACJ;gBAAMI,SAAQ;;kCACb,KAACL;oBAAyB;;;0BAG5B,MAACC;gBAAMI,SAAQ;;kCACb,KAACP;oBAAkB;;;0BAGrB,MAACG;gBAAMI,SAAQ;;kCACb,KAACT;oBAAoB;;;0BAGvB,MAACK;gBAAMI,SAAQ;;kCACb,KAACN;oBAAc;;;0BAGjB,MAACE;gBAAMI,SAAQ;;kCACb,KAACR;oBAAc;;;0BAGjB,KAACI;gBAAMI,SAAQ;gBAAYC,GAAG;0BAAC;;;;AAKrC"}

package/dist/components/ui/core/checkbox/checkbox.gallery.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement } from "react";
+export declare function CheckboxGallery(): ReactElement;

package/dist/components/ui/core/checkbox/checkbox.gallery.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckboxGroup, CheckboxItem, CheckboxItemControl, CheckboxItemLabel } from "./checkbox.js";
+export function CheckboxGallery() {
+    return /*#__PURE__*/ _jsxs(CheckboxGroup, {
+        children: [
+            /*#__PURE__*/ _jsxs(CheckboxItem, {
+                children: [
+                    /*#__PURE__*/ _jsx(CheckboxItemControl, {
+                        defaultChecked: true
+                    }),
+                    /*#__PURE__*/ _jsx(CheckboxItemLabel, {
+                        children: "Option 1"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(CheckboxItem, {
+                children: [
+                    /*#__PURE__*/ _jsx(CheckboxItemControl, {}),
+                    /*#__PURE__*/ _jsx(CheckboxItemLabel, {
+                        children: "Option 2"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(CheckboxItem, {
+                children: [
+                    /*#__PURE__*/ _jsx(CheckboxItemControl, {}),
+                    /*#__PURE__*/ _jsx(CheckboxItemLabel, {
+                        children: "Option 3"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=checkbox.gallery.js.map

package/dist/components/ui/core/checkbox/checkbox.gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/checkbox/checkbox.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport {\n  CheckboxGroup,\n  CheckboxItem,\n  CheckboxItemControl,\n  CheckboxItemLabel,\n} from './checkbox';\n\nexport function CheckboxGallery(): ReactElement {\n  return (\n    <CheckboxGroup>\n      <CheckboxItem>\n        <CheckboxItemControl defaultChecked />\n        <CheckboxItemLabel>Option 1</CheckboxItemLabel>\n      </CheckboxItem>\n      <CheckboxItem>\n        <CheckboxItemControl />\n        <CheckboxItemLabel>Option 2</CheckboxItemLabel>\n      </CheckboxItem>\n      <CheckboxItem>\n        <CheckboxItemControl />\n        <CheckboxItemLabel>Option 3</CheckboxItemLabel>\n      </CheckboxItem>\n    </CheckboxGroup>\n  );\n}\n"],"names":["CheckboxGroup","CheckboxItem","CheckboxItemControl","CheckboxItemLabel","CheckboxGallery","defaultChecked"],"mappings":";AAEA,SACEA,aAAa,EACbC,YAAY,EACZC,mBAAmB,EACnBC,iBAAiB,QACZ,gBAAa;AAEpB,OAAO,SAASC;IACd,qBACE,MAACJ;;0BACC,MAACC;;kCACC,KAACC;wBAAoBG,cAAc;;kCACnC,KAACF;kCAAkB;;;;0BAErB,MAACF;;kCACC,KAACC;kCACD,KAACC;kCAAkB;;;;0BAErB,MAACF;;kCACC,KAACC;kCACD,KAACC;kCAAkB;;;;;;AAI3B"}

package/dist/components/ui/core/data-grid/data-grid.utils.js

@@ -1,4 +1,30 @@
+import dayjs from "dayjs";
+import { getDateTimeDisplayFormat } from "../date-time-pickers/utils/format-utils.js";
 const PINNED_COLUMN_Z_INDEX = 10;
+// Only pulls the year/month/day for the calendar check below, plus whether a `T`
+// time section is present at all — everything inside that section (seconds, offset,
+// shape) is validated by `Date` itself instead of being re-modeled here.
+const ISO_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})(T.*)?$/;
+const DATE_DISPLAY_FORMAT = 'DD/MM/YYYY';
+/** Built with a placeholder year (2000) then `setFullYear`, since `Date(year, ...)`
+ *  remaps any year 0-99 into 1900-1999 (e.g. "0029" → 1929). */ function isRealCalendarDate(year, month, day) {
+    const date = new Date(2000, month - 1, day);
+    date.setFullYear(year);
+    return date.getMonth() === month - 1 && date.getDate() === day;
+}
+/**
+ * API responses serialize dates as ISO strings; without this, cells would show
+ * "2026-04-11T14:30:00Z" verbatim.
+ */ function formatIsoDateString(value) {
+    const match = ISO_DATE_PATTERN.exec(value);
+    if (match === null) return undefined;
+    const [, year, month, day, time] = match;
+    if (!isRealCalendarDate(Number(year), Number(month), Number(day))) return undefined;
+    // `Date`'s own ISO 8601 parser rejects a bad time, offset, or shape — the
+    // regex above only needs to isolate the date-only vs. datetime distinction.
+    if (Number.isNaN(new Date(value).getTime())) return undefined;
+    return dayjs(value).format(time ? getDateTimeDisplayFormat() : DATE_DISPLAY_FORMAT);
+}
 function getAriaSort(sortDirection, canSort) {
     if (sortDirection === 'asc') return 'ascending';
     if (sortDirection === 'desc') return 'descending';
@@ -7,6 +33,7 @@ function getAriaSort(sortDirection, canSort) {
 function getTextValue(value) {
     if (value === null || value === undefined) return undefined;
     if (value instanceof Date) return value.toLocaleString();
+    if (typeof value === 'string') return formatIsoDateString(value) ?? value;
     if (typeof value === 'object' || typeof value === 'function') return undefined;
     return String(value);
 }

package/dist/components/ui/core/data-grid/data-grid.utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ui/core/data-grid/data-grid.utils.ts"],"sourcesContent":["import type { ColumnDef } from '@tanstack/react-table';\n\nconst PINNED_COLUMN_Z_INDEX = 10;\n\nfunction getAriaSort(\n  sortDirection: false | 'asc' | 'desc',\n  canSort: boolean\n): 'ascending' | 'descending' | 'none' | undefined {\n  if (sortDirection === 'asc') return 'ascending';\n  if (sortDirection === 'desc') return 'descending';\n  return canSort ? 'none' : undefined;\n}\n\nfunction getTextValue(value: unknown): string | undefined {\n  if (value === null || value === undefined) return undefined;\n  if (value instanceof Date) return value.toLocaleString();\n  if (typeof value === 'object' || typeof value === 'function')\n    return undefined;\n  return String(value);\n}\n\nfunction isAccessorColumn<TData>(def: ColumnDef<TData>): boolean {\n  const hasAccessorKey = 'accessorKey' in def && def.accessorKey !== undefined;\n  const hasAccessorFn = 'accessorFn' in def && def.accessorFn !== undefined;\n  return hasAccessorKey || hasAccessorFn;\n}\n\nfunction isFromIgnoredCellTarget(target?: EventTarget | null): boolean {\n  return target instanceof Element\n    ? Boolean(target.closest('[data-row-activation=\"ignore\"]'))\n    : false;\n}\n\nfunction isFromExpandToggleTarget(target?: EventTarget | null): boolean {\n  return target instanceof Element\n    ? Boolean(target.closest('[data-row-expand-toggle=\"true\"]'))\n    : false;\n}\n\nexport {\n  PINNED_COLUMN_Z_INDEX,\n  getAriaSort,\n  getTextValue,\n  isAccessorColumn,\n  isFromExpandToggleTarget,\n  isFromIgnoredCellTarget,\n};\n"],"names":["PINNED_COLUMN_Z_INDEX","getAriaSort","sortDirection","canSort","undefined","getTextValue","value","Date","toLocaleString","String","isAccessorColumn","def","hasAccessorKey","accessorKey","hasAccessorFn","accessorFn","isFromIgnoredCellTarget","target","Element","Boolean","closest","isFromExpandToggleTarget"],"mappings":"AAEA,MAAMA,wBAAwB;AAE9B,SAASC,YACPC,aAAqC,EACrCC,OAAgB;IAEhB,IAAID,kBAAkB,OAAO,OAAO;IACpC,IAAIA,kBAAkB,QAAQ,OAAO;IACrC,OAAOC,UAAU,SAASC;AAC5B;AAEA,SAASC,aAAaC,KAAc;IAClC,IAAIA,UAAU,QAAQA,UAAUF,WAAW,OAAOA;IAClD,IAAIE,iBAAiBC,MAAM,OAAOD,MAAME,cAAc;IACtD,IAAI,OAAOF,UAAU,YAAY,OAAOA,UAAU,YAChD,OAAOF;IACT,OAAOK,OAAOH;AAChB;AAEA,SAASI,iBAAwBC,GAAqB;IACpD,MAAMC,iBAAiB,iBAAiBD,OAAOA,IAAIE,WAAW,KAAKT;IACnE,MAAMU,gBAAgB,gBAAgBH,OAAOA,IAAII,UAAU,KAAKX;IAChE,OAAOQ,kBAAkBE;AAC3B;AAEA,SAASE,wBAAwBC,MAA2B;IAC1D,OAAOA,kBAAkBC,UACrBC,QAAQF,OAAOG,OAAO,CAAC,qCACvB;AACN;AAEA,SAASC,yBAAyBJ,MAA2B;IAC3D,OAAOA,kBAAkBC,UACrBC,QAAQF,OAAOG,OAAO,CAAC,sCACvB;AACN;AAEA,SACEpB,qBAAqB,EACrBC,WAAW,EACXI,YAAY,EACZK,gBAAgB,EAChBW,wBAAwB,EACxBL,uBAAuB,GACvB"}
+{"version":3,"sources":["../../../../../src/components/ui/core/data-grid/data-grid.utils.ts"],"sourcesContent":["import type { ColumnDef } from '@tanstack/react-table';\nimport dayjs from 'dayjs';\n\nimport { getDateTimeDisplayFormat } from '../date-time-pickers/utils/format-utils';\n\nconst PINNED_COLUMN_Z_INDEX = 10;\n\n// Only pulls the year/month/day for the calendar check below, plus whether a `T`\n// time section is present at all — everything inside that section (seconds, offset,\n// shape) is validated by `Date` itself instead of being re-modeled here.\nconst ISO_DATE_PATTERN = /^(\\d{4})-(\\d{2})-(\\d{2})(T.*)?$/;\n\nconst DATE_DISPLAY_FORMAT = 'DD/MM/YYYY';\n\n/** Built with a placeholder year (2000) then `setFullYear`, since `Date(year, ...)`\n *  remaps any year 0-99 into 1900-1999 (e.g. \"0029\" → 1929). */\nfunction isRealCalendarDate(year: number, month: number, day: number): boolean {\n  const date = new Date(2000, month - 1, day);\n  date.setFullYear(year);\n  return date.getMonth() === month - 1 && date.getDate() === day;\n}\n\n/**\n * API responses serialize dates as ISO strings; without this, cells would show\n * \"2026-04-11T14:30:00Z\" verbatim.\n */\nfunction formatIsoDateString(value: string): string | undefined {\n  const match = ISO_DATE_PATTERN.exec(value);\n  if (match === null) return undefined;\n\n  const [, year, month, day, time] = match;\n  if (!isRealCalendarDate(Number(year), Number(month), Number(day)))\n    return undefined;\n  // `Date`'s own ISO 8601 parser rejects a bad time, offset, or shape — the\n  // regex above only needs to isolate the date-only vs. datetime distinction.\n  if (Number.isNaN(new Date(value).getTime())) return undefined;\n\n  return dayjs(value).format(\n    time ? getDateTimeDisplayFormat() : DATE_DISPLAY_FORMAT\n  );\n}\n\nfunction getAriaSort(\n  sortDirection: false | 'asc' | 'desc',\n  canSort: boolean\n): 'ascending' | 'descending' | 'none' | undefined {\n  if (sortDirection === 'asc') return 'ascending';\n  if (sortDirection === 'desc') return 'descending';\n  return canSort ? 'none' : undefined;\n}\n\nfunction getTextValue(value: unknown): string | undefined {\n  if (value === null || value === undefined) return undefined;\n  if (value instanceof Date) return value.toLocaleString();\n  if (typeof value === 'string') return formatIsoDateString(value) ?? value;\n  if (typeof value === 'object' || typeof value === 'function')\n    return undefined;\n  return String(value);\n}\n\nfunction isAccessorColumn<TData>(def: ColumnDef<TData>): boolean {\n  const hasAccessorKey = 'accessorKey' in def && def.accessorKey !== undefined;\n  const hasAccessorFn = 'accessorFn' in def && def.accessorFn !== undefined;\n  return hasAccessorKey || hasAccessorFn;\n}\n\nfunction isFromIgnoredCellTarget(target?: EventTarget | null): boolean {\n  return target instanceof Element\n    ? Boolean(target.closest('[data-row-activation=\"ignore\"]'))\n    : false;\n}\n\nfunction isFromExpandToggleTarget(target?: EventTarget | null): boolean {\n  return target instanceof Element\n    ? Boolean(target.closest('[data-row-expand-toggle=\"true\"]'))\n    : false;\n}\n\nexport {\n  PINNED_COLUMN_Z_INDEX,\n  getAriaSort,\n  getTextValue,\n  isAccessorColumn,\n  isFromExpandToggleTarget,\n  isFromIgnoredCellTarget,\n};\n"],"names":["dayjs","getDateTimeDisplayFormat","PINNED_COLUMN_Z_INDEX","ISO_DATE_PATTERN","DATE_DISPLAY_FORMAT","isRealCalendarDate","year","month","day","date","Date","setFullYear","getMonth","getDate","formatIsoDateString","value","match","exec","undefined","time","Number","isNaN","getTime","format","getAriaSort","sortDirection","canSort","getTextValue","toLocaleString","String","isAccessorColumn","def","hasAccessorKey","accessorKey","hasAccessorFn","accessorFn","isFromIgnoredCellTarget","target","Element","Boolean","closest","isFromExpandToggleTarget"],"mappings":"AACA,OAAOA,WAAW,QAAQ;AAE1B,SAASC,wBAAwB,QAAQ,6CAA0C;AAEnF,MAAMC,wBAAwB;AAE9B,iFAAiF;AACjF,oFAAoF;AACpF,yEAAyE;AACzE,MAAMC,mBAAmB;AAEzB,MAAMC,sBAAsB;AAE5B;8DAC8D,GAC9D,SAASC,mBAAmBC,IAAY,EAAEC,KAAa,EAAEC,GAAW;IAClE,MAAMC,OAAO,IAAIC,KAAK,MAAMH,QAAQ,GAAGC;IACvCC,KAAKE,WAAW,CAACL;IACjB,OAAOG,KAAKG,QAAQ,OAAOL,QAAQ,KAAKE,KAAKI,OAAO,OAAOL;AAC7D;AAEA;;;CAGC,GACD,SAASM,oBAAoBC,KAAa;IACxC,MAAMC,QAAQb,iBAAiBc,IAAI,CAACF;IACpC,IAAIC,UAAU,MAAM,OAAOE;IAE3B,MAAM,GAAGZ,MAAMC,OAAOC,KAAKW,KAAK,GAAGH;IACnC,IAAI,CAACX,mBAAmBe,OAAOd,OAAOc,OAAOb,QAAQa,OAAOZ,OAC1D,OAAOU;IACT,0EAA0E;IAC1E,4EAA4E;IAC5E,IAAIE,OAAOC,KAAK,CAAC,IAAIX,KAAKK,OAAOO,OAAO,KAAK,OAAOJ;IAEpD,OAAOlB,MAAMe,OAAOQ,MAAM,CACxBJ,OAAOlB,6BAA6BG;AAExC;AAEA,SAASoB,YACPC,aAAqC,EACrCC,OAAgB;IAEhB,IAAID,kBAAkB,OAAO,OAAO;IACpC,IAAIA,kBAAkB,QAAQ,OAAO;IACrC,OAAOC,UAAU,SAASR;AAC5B;AAEA,SAASS,aAAaZ,KAAc;IAClC,IAAIA,UAAU,QAAQA,UAAUG,WAAW,OAAOA;IAClD,IAAIH,iBAAiBL,MAAM,OAAOK,MAAMa,cAAc;IACtD,IAAI,OAAOb,UAAU,UAAU,OAAOD,oBAAoBC,UAAUA;IACpE,IAAI,OAAOA,UAAU,YAAY,OAAOA,UAAU,YAChD,OAAOG;IACT,OAAOW,OAAOd;AAChB;AAEA,SAASe,iBAAwBC,GAAqB;IACpD,MAAMC,iBAAiB,iBAAiBD,OAAOA,IAAIE,WAAW,KAAKf;IACnE,MAAMgB,gBAAgB,gBAAgBH,OAAOA,IAAII,UAAU,KAAKjB;IAChE,OAAOc,kBAAkBE;AAC3B;AAEA,SAASE,wBAAwBC,MAA2B;IAC1D,OAAOA,kBAAkBC,UACrBC,QAAQF,OAAOG,OAAO,CAAC,qCACvB;AACN;AAEA,SAASC,yBAAyBJ,MAA2B;IAC3D,OAAOA,kBAAkBC,UACrBC,QAAQF,OAAOG,OAAO,CAAC,sCACvB;AACN;AAEA,SACEtC,qBAAqB,EACrBsB,WAAW,EACXG,YAAY,EACZG,gBAAgB,EAChBW,wBAAwB,EACxBL,uBAAuB,GACvB"}

package/dist/components/ui/core/switch/switch.gallery.d.ts

@@ -0,0 +1,2 @@
+import type { ReactElement } from "react";
+export declare function SwitchGallery(): ReactElement;

package/dist/components/ui/core/switch/switch.gallery.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from "../label/label.js";
+import { Switch } from "./switch.js";
+export function SwitchGallery() {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex w-48 flex-col items-start",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex h-9 w-full items-center gap-3",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: "default-email",
+                        className: "flex-1 pb-0",
+                        children: "Email"
+                    }),
+                    /*#__PURE__*/ _jsx(Switch, {
+                        id: "default-email",
+                        defaultChecked: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex h-9 w-full items-center gap-3",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: "default-slack",
+                        className: "flex-1 pb-0",
+                        children: "Slack"
+                    }),
+                    /*#__PURE__*/ _jsx(Switch, {
+                        id: "default-slack"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex h-9 w-full items-center gap-3",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: "default-in-app",
+                        className: "flex-1 pb-0",
+                        children: "In app"
+                    }),
+                    /*#__PURE__*/ _jsx(Switch, {
+                        id: "default-in-app",
+                        defaultChecked: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex h-9 w-full items-center gap-3",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: "default-sms",
+                        className: "flex-1 pb-0",
+                        children: "SMS"
+                    }),
+                    /*#__PURE__*/ _jsx(Switch, {
+                        id: "default-sms",
+                        disabled: true
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=switch.gallery.js.map

package/dist/components/ui/core/switch/switch.gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/switch/switch.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport { Label } from '../label/label';\n\nimport { Switch } from './switch';\n\nexport function SwitchGallery(): ReactElement {\n  return (\n    <div className=\"flex w-48 flex-col items-start\">\n      <div className=\"flex h-9 w-full items-center gap-3\">\n        <Label htmlFor=\"default-email\" className=\"flex-1 pb-0\">\n          Email\n        </Label>\n        <Switch id=\"default-email\" defaultChecked />\n      </div>\n      <div className=\"flex h-9 w-full items-center gap-3\">\n        <Label htmlFor=\"default-slack\" className=\"flex-1 pb-0\">\n          Slack\n        </Label>\n        <Switch id=\"default-slack\" />\n      </div>\n      <div className=\"flex h-9 w-full items-center gap-3\">\n        <Label htmlFor=\"default-in-app\" className=\"flex-1 pb-0\">\n          In app\n        </Label>\n        <Switch id=\"default-in-app\" defaultChecked />\n      </div>\n      <div className=\"flex h-9 w-full items-center gap-3\">\n        <Label htmlFor=\"default-sms\" className=\"flex-1 pb-0\">\n          SMS\n        </Label>\n        <Switch id=\"default-sms\" disabled />\n      </div>\n    </div>\n  );\n}\n"],"names":["Label","Switch","SwitchGallery","div","className","htmlFor","id","defaultChecked","disabled"],"mappings":";AAEA,SAASA,KAAK,QAAQ,oBAAiB;AAEvC,SAASC,MAAM,QAAQ,cAAW;AAElC,OAAO,SAASC;IACd,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACD;gBAAIC,WAAU;;kCACb,KAACJ;wBAAMK,SAAQ;wBAAgBD,WAAU;kCAAc;;kCAGvD,KAACH;wBAAOK,IAAG;wBAAgBC,cAAc;;;;0BAE3C,MAACJ;gBAAIC,WAAU;;kCACb,KAACJ;wBAAMK,SAAQ;wBAAgBD,WAAU;kCAAc;;kCAGvD,KAACH;wBAAOK,IAAG;;;;0BAEb,MAACH;gBAAIC,WAAU;;kCACb,KAACJ;wBAAMK,SAAQ;wBAAiBD,WAAU;kCAAc;;kCAGxD,KAACH;wBAAOK,IAAG;wBAAiBC,cAAc;;;;0BAE5C,MAACJ;gBAAIC,WAAU;;kCACb,KAACJ;wBAAMK,SAAQ;wBAAcD,WAAU;kCAAc;;kCAGrD,KAACH;wBAAOK,IAAG;wBAAcE,QAAQ;;;;;;AAIzC"}