@cognite/aura 1.46768.0 → 1.46840.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/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"}