@cognite/aura 1.46870.0 → 1.47006.0

package/DESIGN.md

@@ -1182,6 +1182,7 @@ Compact label for status, category, or metadata.
 
 **Storybook-slug:** banner
 **Docs-slug:** banner-alert
+**Full guidance:** [banner.md](./src/components/ui/core/banner/banner.md)
 
 **Definition**
 Persistent or dismissible message scoped at page or section level — stronger than inline helper text, broader than a single-field `Alert` in some layouts.
@@ -1665,6 +1666,7 @@ A structural wrapper for form fields that manages layout, spacing, validation st
 
 **Storybook-slug:** input
 **Docs-slug:** input
+**Full guidance:** [input.md](./src/components/ui/core/input/input.md)
 
 **Definition**
 Single-line text field for capturing short text-based information in forms and toolbars.
@@ -1740,6 +1742,7 @@ A flexible list-row primitive for displaying a title, optional description, lead
 
 **Storybook-slug:** label
 **Docs-slug:** label
+**Full guidance:** [label.md](./src/components/ui/core/label/label.md)
 
 **Definition**
 A form label that identifies and is programmatically associated with an input field. Not intended as general-purpose text.
@@ -1862,6 +1865,7 @@ A click-triggered panel for interactive or structured supplemental content. Stay
 
 **Storybook-slug:** radio
 **Docs-slug:** radio
+**Full guidance:** [radio-group.md](./src/components/ui/core/radio-group/radio-group.md)
 
 **Definition**
 Allows users to select exactly one option from a small set of mutually exclusive choices.
@@ -2176,6 +2180,7 @@ Organizes related content into switchable sections, allowing users to navigate b
 
 **Storybook-slug:** textarea
 **Docs-slug:** textarea
+**Full guidance:** [textarea.md](./src/components/ui/core/textarea/textarea.md)
 
 **Definition**
 A multi-line text field for extended free-form input such as comments, feedback, messages, descriptions, or notes.

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

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

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconAlertCircleFilled, IconAlertTriangleFilled, IconInfoCircleFilled } from "@tabler/icons-react";
+import { Banner, BannerIcon, BannerTitle } from "./banner.js";
+export function BannerGallery() {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "w-full space-y-4",
+        children: [
+            /*#__PURE__*/ _jsxs(Banner, {
+                variant: "default",
+                children: [
+                    /*#__PURE__*/ _jsx(BannerIcon, {
+                        icon: IconInfoCircleFilled
+                    }),
+                    /*#__PURE__*/ _jsx(BannerTitle, {
+                        children: "Default variant"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Banner, {
+                variant: "info",
+                children: [
+                    /*#__PURE__*/ _jsx(BannerIcon, {
+                        icon: IconInfoCircleFilled
+                    }),
+                    /*#__PURE__*/ _jsx(BannerTitle, {
+                        children: "Info variant"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Banner, {
+                variant: "warning",
+                children: [
+                    /*#__PURE__*/ _jsx(BannerIcon, {
+                        icon: IconAlertTriangleFilled
+                    }),
+                    /*#__PURE__*/ _jsx(BannerTitle, {
+                        children: "Warning variant"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Banner, {
+                variant: "destructive",
+                children: [
+                    /*#__PURE__*/ _jsx(BannerIcon, {
+                        icon: IconAlertCircleFilled
+                    }),
+                    /*#__PURE__*/ _jsx(BannerTitle, {
+                        children: "Destructive variant"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=banner.gallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/banner/banner.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport {\n  IconAlertCircleFilled,\n  IconAlertTriangleFilled,\n  IconInfoCircleFilled,\n} from '@tabler/icons-react';\n\nimport { Banner, BannerIcon, BannerTitle } from './banner';\n\nexport function BannerGallery(): ReactElement {\n  return (\n    <div className=\"w-full space-y-4\">\n      <Banner variant=\"default\">\n        <BannerIcon icon={IconInfoCircleFilled} />\n        <BannerTitle>Default variant</BannerTitle>\n      </Banner>\n      <Banner variant=\"info\">\n        <BannerIcon icon={IconInfoCircleFilled} />\n        <BannerTitle>Info variant</BannerTitle>\n      </Banner>\n      <Banner variant=\"warning\">\n        <BannerIcon icon={IconAlertTriangleFilled} />\n        <BannerTitle>Warning variant</BannerTitle>\n      </Banner>\n      <Banner variant=\"destructive\">\n        <BannerIcon icon={IconAlertCircleFilled} />\n        <BannerTitle>Destructive variant</BannerTitle>\n      </Banner>\n    </div>\n  );\n}\n"],"names":["IconAlertCircleFilled","IconAlertTriangleFilled","IconInfoCircleFilled","Banner","BannerIcon","BannerTitle","BannerGallery","div","className","variant","icon"],"mappings":";AAEA,SACEA,qBAAqB,EACrBC,uBAAuB,EACvBC,oBAAoB,QACf,sBAAsB;AAE7B,SAASC,MAAM,EAAEC,UAAU,EAAEC,WAAW,QAAQ,cAAW;AAE3D,OAAO,SAASC;IACd,qBACE,MAACC;QAAIC,WAAU;;0BACb,MAACL;gBAAOM,SAAQ;;kCACd,KAACL;wBAAWM,MAAMR;;kCAClB,KAACG;kCAAY;;;;0BAEf,MAACF;gBAAOM,SAAQ;;kCACd,KAACL;wBAAWM,MAAMR;;kCAClB,KAACG;kCAAY;;;;0BAEf,MAACF;gBAAOM,SAAQ;;kCACd,KAACL;wBAAWM,MAAMT;;kCAClB,KAACI;kCAAY;;;;0BAEf,MAACF;gBAAOM,SAAQ;;kCACd,KAACL;wBAAWM,MAAMV;;kCAClB,KAACK;kCAAY;;;;;;AAIrB"}

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

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

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { HelperText } from "../helper-text/helper-text.js";
+import { Label } from "../label/label.js";
+import { Input } from "./input.js";
+export function InputGallery() {
+    const id = useId();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "w-75 space-y-4",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid w-full items-center gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-default`,
+                        children: "Default"
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        id: `${id}-default`,
+                        placeholder: "Placeholder"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid w-full items-center gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-filled`,
+                        children: "Filled"
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        id: `${id}-filled`,
+                        defaultValue: "Input text"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "group grid w-full items-center gap-1",
+                "data-disabled": "true",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-disabled`,
+                        children: "Disabled"
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        id: `${id}-disabled`,
+                        placeholder: "Placeholder",
+                        disabled: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid w-full items-center gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-readonly`,
+                        children: "Read-only"
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        id: `${id}-readonly`,
+                        defaultValue: "Input text",
+                        readOnly: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid w-full items-center gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-error`,
+                        children: "Error"
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        id: `${id}-error`,
+                        placeholder: "Placeholder",
+                        "aria-invalid": true
+                    }),
+                    /*#__PURE__*/ _jsx(HelperText, {
+                        isError: true,
+                        className: "pt-1",
+                        children: "Help text"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=input.gallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/input/input.gallery.tsx"],"sourcesContent":["import { type ReactElement, useId } from 'react';\n\nimport { HelperText } from '../helper-text/helper-text';\nimport { Label } from '../label/label';\n\nimport { Input } from './input';\n\nexport function InputGallery(): ReactElement {\n  const id = useId();\n\n  return (\n    <div className=\"w-75 space-y-4\">\n      <div className=\"grid w-full items-center gap-1\">\n        <Label htmlFor={`${id}-default`}>Default</Label>\n        <Input id={`${id}-default`} placeholder=\"Placeholder\" />\n      </div>\n      <div className=\"grid w-full items-center gap-1\">\n        <Label htmlFor={`${id}-filled`}>Filled</Label>\n        <Input id={`${id}-filled`} defaultValue=\"Input text\" />\n      </div>\n      <div\n        className=\"group grid w-full items-center gap-1\"\n        data-disabled=\"true\"\n      >\n        <Label htmlFor={`${id}-disabled`}>Disabled</Label>\n        <Input id={`${id}-disabled`} placeholder=\"Placeholder\" disabled />\n      </div>\n      <div className=\"grid w-full items-center gap-1\">\n        <Label htmlFor={`${id}-readonly`}>Read-only</Label>\n        <Input id={`${id}-readonly`} defaultValue=\"Input text\" readOnly />\n      </div>\n      <div className=\"grid w-full items-center gap-1\">\n        <Label htmlFor={`${id}-error`}>Error</Label>\n        <Input id={`${id}-error`} placeholder=\"Placeholder\" aria-invalid />\n        <HelperText isError className=\"pt-1\">\n          Help text\n        </HelperText>\n      </div>\n    </div>\n  );\n}\n"],"names":["useId","HelperText","Label","Input","InputGallery","id","div","className","htmlFor","placeholder","defaultValue","data-disabled","disabled","readOnly","aria-invalid","isError"],"mappings":";AAAA,SAA4BA,KAAK,QAAQ,QAAQ;AAEjD,SAASC,UAAU,QAAQ,gCAA6B;AACxD,SAASC,KAAK,QAAQ,oBAAiB;AAEvC,SAASC,KAAK,QAAQ,aAAU;AAEhC,OAAO,SAASC;IACd,MAAMC,KAAKL;IAEX,qBACE,MAACM;QAAIC,WAAU;;0BACb,MAACD;gBAAIC,WAAU;;kCACb,KAACL;wBAAMM,SAAS,GAAGH,GAAG,QAAQ,CAAC;kCAAE;;kCACjC,KAACF;wBAAME,IAAI,GAAGA,GAAG,QAAQ,CAAC;wBAAEI,aAAY;;;;0BAE1C,MAACH;gBAAIC,WAAU;;kCACb,KAACL;wBAAMM,SAAS,GAAGH,GAAG,OAAO,CAAC;kCAAE;;kCAChC,KAACF;wBAAME,IAAI,GAAGA,GAAG,OAAO,CAAC;wBAAEK,cAAa;;;;0BAE1C,MAACJ;gBACCC,WAAU;gBACVI,iBAAc;;kCAEd,KAACT;wBAAMM,SAAS,GAAGH,GAAG,SAAS,CAAC;kCAAE;;kCAClC,KAACF;wBAAME,IAAI,GAAGA,GAAG,SAAS,CAAC;wBAAEI,aAAY;wBAAcG,QAAQ;;;;0BAEjE,MAACN;gBAAIC,WAAU;;kCACb,KAACL;wBAAMM,SAAS,GAAGH,GAAG,SAAS,CAAC;kCAAE;;kCAClC,KAACF;wBAAME,IAAI,GAAGA,GAAG,SAAS,CAAC;wBAAEK,cAAa;wBAAaG,QAAQ;;;;0BAEjE,MAACP;gBAAIC,WAAU;;kCACb,KAACL;wBAAMM,SAAS,GAAGH,GAAG,MAAM,CAAC;kCAAE;;kCAC/B,KAACF;wBAAME,IAAI,GAAGA,GAAG,MAAM,CAAC;wBAAEI,aAAY;wBAAcK,cAAY;;kCAChE,KAACb;wBAAWc,OAAO;wBAACR,WAAU;kCAAO;;;;;;AAM7C"}

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

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

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Input } from "../input/input.js";
+import { Label } from "./label.js";
+export function LabelGallery() {
+    const id = useId();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "w-75 space-y-4",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid w-full items-center gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-name`,
+                        children: "Name"
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        id: `${id}-name`,
+                        placeholder: "Enter name"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid w-full items-center gap-1",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-email`,
+                        required: true,
+                        children: "Email address"
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        id: `${id}-email`,
+                        type: "email",
+                        required: true
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "group grid w-full items-center gap-1",
+                "data-disabled": "true",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-workspace`,
+                        children: "Workspace"
+                    }),
+                    /*#__PURE__*/ _jsx(Input, {
+                        id: `${id}-workspace`,
+                        defaultValue: "Default",
+                        disabled: true
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=label.gallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/label/label.gallery.tsx"],"sourcesContent":["import { type ReactElement, useId } from 'react';\n\nimport { Input } from '../input/input';\n\nimport { Label } from './label';\n\nexport function LabelGallery(): ReactElement {\n  const id = useId();\n\n  return (\n    <div className=\"w-75 space-y-4\">\n      <div className=\"grid w-full items-center gap-1\">\n        <Label htmlFor={`${id}-name`}>Name</Label>\n        <Input id={`${id}-name`} placeholder=\"Enter name\" />\n      </div>\n      <div className=\"grid w-full items-center gap-1\">\n        <Label htmlFor={`${id}-email`} required>\n          Email address\n        </Label>\n        <Input id={`${id}-email`} type=\"email\" required />\n      </div>\n      <div\n        className=\"group grid w-full items-center gap-1\"\n        data-disabled=\"true\"\n      >\n        <Label htmlFor={`${id}-workspace`}>Workspace</Label>\n        <Input id={`${id}-workspace`} defaultValue=\"Default\" disabled />\n      </div>\n    </div>\n  );\n}\n"],"names":["useId","Input","Label","LabelGallery","id","div","className","htmlFor","placeholder","required","type","data-disabled","defaultValue","disabled"],"mappings":";AAAA,SAA4BA,KAAK,QAAQ,QAAQ;AAEjD,SAASC,KAAK,QAAQ,oBAAiB;AAEvC,SAASC,KAAK,QAAQ,aAAU;AAEhC,OAAO,SAASC;IACd,MAAMC,KAAKJ;IAEX,qBACE,MAACK;QAAIC,WAAU;;0BACb,MAACD;gBAAIC,WAAU;;kCACb,KAACJ;wBAAMK,SAAS,GAAGH,GAAG,KAAK,CAAC;kCAAE;;kCAC9B,KAACH;wBAAMG,IAAI,GAAGA,GAAG,KAAK,CAAC;wBAAEI,aAAY;;;;0BAEvC,MAACH;gBAAIC,WAAU;;kCACb,KAACJ;wBAAMK,SAAS,GAAGH,GAAG,MAAM,CAAC;wBAAEK,QAAQ;kCAAC;;kCAGxC,KAACR;wBAAMG,IAAI,GAAGA,GAAG,MAAM,CAAC;wBAAEM,MAAK;wBAAQD,QAAQ;;;;0BAEjD,MAACJ;gBACCC,WAAU;gBACVK,iBAAc;;kCAEd,KAACT;wBAAMK,SAAS,GAAGH,GAAG,UAAU,CAAC;kCAAE;;kCACnC,KAACH;wBAAMG,IAAI,GAAGA,GAAG,UAAU,CAAC;wBAAEQ,cAAa;wBAAUC,QAAQ;;;;;;AAIrE"}

package/dist/components/ui/core/radio-group/radio-group.gallery.d.ts

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

package/dist/components/ui/core/radio-group/radio-group.gallery.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemLabel } from "./radio-group.js";
+export function RadioGroupGallery() {
+    return /*#__PURE__*/ _jsxs(RadioGroup, {
+        defaultValue: "option1",
+        children: [
+            /*#__PURE__*/ _jsxs(RadioGroupItem, {
+                children: [
+                    /*#__PURE__*/ _jsx(RadioGroupItemControl, {
+                        value: "option1",
+                        "aria-label": "Option 1"
+                    }),
+                    /*#__PURE__*/ _jsx(RadioGroupItemLabel, {
+                        children: "Option 1"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(RadioGroupItem, {
+                children: [
+                    /*#__PURE__*/ _jsx(RadioGroupItemControl, {
+                        value: "option2",
+                        "aria-label": "Option 2"
+                    }),
+                    /*#__PURE__*/ _jsx(RadioGroupItemLabel, {
+                        children: "Option 2"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(RadioGroupItem, {
+                children: [
+                    /*#__PURE__*/ _jsx(RadioGroupItemControl, {
+                        value: "option3",
+                        "aria-label": "Option 3"
+                    }),
+                    /*#__PURE__*/ _jsx(RadioGroupItemLabel, {
+                        children: "Option 3"
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=radio-group.gallery.js.map

package/dist/components/ui/core/radio-group/radio-group.gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/radio-group/radio-group.gallery.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\n\nimport {\n  RadioGroup,\n  RadioGroupItem,\n  RadioGroupItemControl,\n  RadioGroupItemLabel,\n} from './radio-group';\n\nexport function RadioGroupGallery(): ReactElement {\n  return (\n    <RadioGroup defaultValue=\"option1\">\n      <RadioGroupItem>\n        <RadioGroupItemControl value=\"option1\" aria-label=\"Option 1\" />\n        <RadioGroupItemLabel>Option 1</RadioGroupItemLabel>\n      </RadioGroupItem>\n      <RadioGroupItem>\n        <RadioGroupItemControl value=\"option2\" aria-label=\"Option 2\" />\n        <RadioGroupItemLabel>Option 2</RadioGroupItemLabel>\n      </RadioGroupItem>\n      <RadioGroupItem>\n        <RadioGroupItemControl value=\"option3\" aria-label=\"Option 3\" />\n        <RadioGroupItemLabel>Option 3</RadioGroupItemLabel>\n      </RadioGroupItem>\n    </RadioGroup>\n  );\n}\n"],"names":["RadioGroup","RadioGroupItem","RadioGroupItemControl","RadioGroupItemLabel","RadioGroupGallery","defaultValue","value","aria-label"],"mappings":";AAEA,SACEA,UAAU,EACVC,cAAc,EACdC,qBAAqB,EACrBC,mBAAmB,QACd,mBAAgB;AAEvB,OAAO,SAASC;IACd,qBACE,MAACJ;QAAWK,cAAa;;0BACvB,MAACJ;;kCACC,KAACC;wBAAsBI,OAAM;wBAAUC,cAAW;;kCAClD,KAACJ;kCAAoB;;;;0BAEvB,MAACF;;kCACC,KAACC;wBAAsBI,OAAM;wBAAUC,cAAW;;kCAClD,KAACJ;kCAAoB;;;;0BAEvB,MAACF;;kCACC,KAACC;wBAAsBI,OAAM;wBAAUC,cAAW;;kCAClD,KAACJ;kCAAoB;;;;;;AAI7B"}

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

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

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { HelperText } from "../helper-text/helper-text.js";
+import { Label } from "../label/label.js";
+import { Textarea } from "./textarea.js";
+export function TextareaGallery() {
+    const id = useId();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "w-88 space-y-4",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid w-full gap-1.5",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-message`,
+                        children: "Your message"
+                    }),
+                    /*#__PURE__*/ _jsx(Textarea, {
+                        id: `${id}-message`,
+                        placeholder: "Type your message here..."
+                    }),
+                    /*#__PURE__*/ _jsx(HelperText, {
+                        className: "pt-2",
+                        children: "Visible to everyone on the team."
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "grid w-full gap-1.5",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        htmlFor: `${id}-comments`,
+                        children: "Comments"
+                    }),
+                    /*#__PURE__*/ _jsx(Textarea, {
+                        id: `${id}-comments`,
+                        defaultValue: "Too short",
+                        "aria-invalid": true
+                    }),
+                    /*#__PURE__*/ _jsx(HelperText, {
+                        className: "pt-2",
+                        isError: true,
+                        children: "Enter at least 20 characters."
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=textarea.gallery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/textarea/textarea.gallery.tsx"],"sourcesContent":["import { type ReactElement, useId } from 'react';\n\nimport { HelperText } from '../helper-text/helper-text';\nimport { Label } from '../label/label';\n\nimport { Textarea } from './textarea';\n\nexport function TextareaGallery(): ReactElement {\n  const id = useId();\n\n  return (\n    <div className=\"w-88 space-y-4\">\n      <div className=\"grid w-full gap-1.5\">\n        <Label htmlFor={`${id}-message`}>Your message</Label>\n        <Textarea\n          id={`${id}-message`}\n          placeholder=\"Type your message here...\"\n        />\n        <HelperText className=\"pt-2\">\n          Visible to everyone on the team.\n        </HelperText>\n      </div>\n      <div className=\"grid w-full gap-1.5\">\n        <Label htmlFor={`${id}-comments`}>Comments</Label>\n        <Textarea id={`${id}-comments`} defaultValue=\"Too short\" aria-invalid />\n        <HelperText className=\"pt-2\" isError>\n          Enter at least 20 characters.\n        </HelperText>\n      </div>\n    </div>\n  );\n}\n"],"names":["useId","HelperText","Label","Textarea","TextareaGallery","id","div","className","htmlFor","placeholder","defaultValue","aria-invalid","isError"],"mappings":";AAAA,SAA4BA,KAAK,QAAQ,QAAQ;AAEjD,SAASC,UAAU,QAAQ,gCAA6B;AACxD,SAASC,KAAK,QAAQ,oBAAiB;AAEvC,SAASC,QAAQ,QAAQ,gBAAa;AAEtC,OAAO,SAASC;IACd,MAAMC,KAAKL;IAEX,qBACE,MAACM;QAAIC,WAAU;;0BACb,MAACD;gBAAIC,WAAU;;kCACb,KAACL;wBAAMM,SAAS,GAAGH,GAAG,QAAQ,CAAC;kCAAE;;kCACjC,KAACF;wBACCE,IAAI,GAAGA,GAAG,QAAQ,CAAC;wBACnBI,aAAY;;kCAEd,KAACR;wBAAWM,WAAU;kCAAO;;;;0BAI/B,MAACD;gBAAIC,WAAU;;kCACb,KAACL;wBAAMM,SAAS,GAAGH,GAAG,SAAS,CAAC;kCAAE;;kCAClC,KAACF;wBAASE,IAAI,GAAGA,GAAG,SAAS,CAAC;wBAAEK,cAAa;wBAAYC,cAAY;;kCACrE,KAACV;wBAAWM,WAAU;wBAAOK,OAAO;kCAAC;;;;;;AAM7C"}