@sableui/react 0.6.2 → 0.7.1

package/dist/components/switch/index.js

@@ -0,0 +1,7 @@
+// src/components/switch/index.ts
+import { Switch } from "./switch.js";
+import { switchMeta } from "./switch.meta.js";
+export {
+  Switch,
+  switchMeta
+};

package/dist/components/switch/switch.js

@@ -0,0 +1,26 @@
+// src/components/switch/switch.tsx
+import { Switch as Base } from "@base-ui/react/switch";
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Root,
+    {
+      className: cn(
+        "inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full p-0.5 motion-interactive",
+        // Off, the track is the whole control (the thumb is light in both modes), so
+        // it takes the 3:1 control edge, not the quiet `input` hairline.
+        "bg-control-border data-[checked]:bg-primary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Base.Thumb, { className: "block h-5 w-5 rounded-full bg-(--switch-thumb) shadow-(--knob-shadow) motion-interactive ease-spring data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4 data-[checked]:bg-primary-foreground" })
+    }
+  );
+}
+Switch.displayName = "Switch";
+export {
+  Switch
+};

package/dist/components/switch/switch.meta.js

@@ -0,0 +1,133 @@
+// src/components/switch/switch.meta.ts
+var switchMeta = {
+  name: "Switch",
+  summary: "Binary on/off toggle for immediate-effect settings. Track fills with the primary tone when checked; the thumb slides on a spring-eased transform (mirrored in RTL).",
+  status: "stable",
+  keywords: [
+    "switch",
+    "toggle setting",
+    "on off",
+    "form control"
+  ],
+  usage: {
+    description: "Use Switch for immediate on/off settings that take effect as a persistent preference or mode.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for binary settings where the label describes the enabled state."
+      },
+      {
+        guidance: "do",
+        description: "Make the current state obvious through both position and accessible text."
+      },
+      {
+        guidance: "dont",
+        description: `Do not phrase the label as a negative, such as "Don't send read receipts". Turning off a negative is a double negative, and the user has to solve it before they can act.`
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Switch for one-time agreement, multi-select choices, or submit-only booleans."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use a Switch whose effect is not immediately visible somewhere. A toggle flipped with no observable consequence gives no confirmation it worked, so the user flips it again to check."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Checkbox",
+      "Toggle",
+      "ThemeSwitcher"
+    ]
+  },
+  props: [
+    {
+      name: "checked",
+      type: "boolean",
+      description: "Controlled on/off state. Pair with onCheckedChange. Omit for an uncontrolled switch."
+    },
+    {
+      name: "defaultChecked",
+      type: "boolean",
+      default: "false",
+      description: "Initial state for an uncontrolled switch."
+    },
+    {
+      name: "onCheckedChange",
+      type: "(checked: boolean, eventDetails) => void",
+      description: "Fired when the switch is toggled. Note: Base UI passes a second eventDetails arg \u2014 not the common (checked) => void, so a single-arg handler must widen its signature."
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      default: "false",
+      description: "Dims the control and ignores user interaction."
+    },
+    {
+      name: "readOnly",
+      type: "boolean",
+      default: "false",
+      description: "Prevents toggling while keeping the control fully visible."
+    },
+    {
+      name: "required",
+      type: "boolean",
+      default: "false",
+      description: "Marks the switch as required when inside a form."
+    },
+    {
+      name: "name",
+      type: "string",
+      description: "Identifies the field when the enclosing form is submitted."
+    }
+  ],
+  tokensUsed: ["input", "primary", "primary-foreground", "ring"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "Switches arrive as part of a settings list. Animating each one in turns a form into a title sequence."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "The track is small and its hover change is subtle; without the ease the colour shift reads as a rendering glitch rather than a reaction."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Thumb",
+      why: "The thumb sliding IS the affordance \u2014 it shows the control has two ends and which one you are now at. Teleporting the thumb makes on and off two unrelated pictures, and users re-read the label to work out which they are looking at. motion-interactive is the right recipe because it declares `translate`, so the thumb transform and the track colour ease on one timeline instead of two."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "A switch commits instantly. If the write is slow enough to need a pending state, the surrounding form owns that, not the control."
+    }
+  ],
+  a11y: [
+    "Renders Base UI's Switch with a hidden native <input> \u2014 role, ARIA, and keyboard (Space/Enter) toggling come for free.",
+    "Focus-visible draws a 2px ring in the --ring token.",
+    "Disabled state sets cursor-not-allowed and 50% opacity; readOnly keeps full contrast but blocks changes.",
+    'Give it an accessible name: wrap it in <Field label=\u2026 orientation="horizontal">, which wires the label for you.'
+  ],
+  examples: [
+    { label: "Default (uncontrolled)", code: "<Switch defaultChecked />" },
+    {
+      label: "Controlled",
+      code: "<Switch checked={on} onCheckedChange={setOn} />"
+    },
+    { label: "Disabled", code: "<Switch disabled defaultChecked />" },
+    {
+      label: "With a label",
+      code: '<Field label="Reduce motion" orientation="horizontal"><Switch defaultChecked /></Field>'
+    }
+  ]
+};
+export {
+  switchMeta
+};

package/dist/components/table/index.js

@@ -0,0 +1,23 @@
+// src/components/table/index.ts
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption
+} from "./table.js";
+import { tableMeta } from "./table.meta.js";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  tableMeta
+};

package/dist/components/table/table.js

@@ -0,0 +1,117 @@
+// src/components/table/table.tsx
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+function Table({ className, ...props }) {
+  return (
+    // Thin scrollbar so a wide table's horizontal bar reads as part of the
+    // table rather than as chrome, and contained overscroll so swiping past
+    // the last column does not trigger the browser's back gesture.
+    /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto overscroll-x-contain scrollbar-quiet", children: /* @__PURE__ */ jsx(
+      "table",
+      {
+        className: cn("w-full caption-bottom text-body-sm", className),
+        ...props
+      }
+    ) })
+  );
+}
+Table.displayName = "Table";
+function TableHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("thead", { className: cn("[&_tr]:border-b", className), ...props });
+}
+TableHeader.displayName = "TableHeader";
+function TableBody({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("tbody", { className: cn("[&_tr:last-child]:border-0", className), ...props });
+}
+TableBody.displayName = "TableBody";
+function TableFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      className: cn(
+        "border-t border-border bg-muted/50 text-label-md [&>tr]:last:border-b-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+TableFooter.displayName = "TableFooter";
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        "border-b border-border motion-interactive [tbody>&:hover]:bg-muted/50",
+        "*:motion-interactive data-[selected]:*:bg-muted data-[selected]:*:shadow-[1px_0_0_var(--muted)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+TableRow.displayName = "TableRow";
+var NUMERIC = "text-end tabular-nums";
+function TableHead({ className, numeric = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: cn(
+        "h-10 px-3 text-start align-middle text-label-md text-muted-foreground first:ps-[var(--table-edge-px,--spacing(3))] last:pe-[var(--table-edge-px,--spacing(3))]",
+        numeric && NUMERIC,
+        className
+      ),
+      ...props
+    }
+  );
+}
+TableHead.displayName = "TableHead";
+function TableCell({ className, numeric = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: cn(
+        "px-3 py-2.5 align-middle first:ps-[var(--table-edge-px,--spacing(3))] last:pe-[var(--table-edge-px,--spacing(3))]",
+        numeric && NUMERIC,
+        className
+      ),
+      ...props
+    }
+  );
+}
+TableCell.displayName = "TableCell";
+function TableCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      className: cn(
+        "border-t border-border py-3 ps-[var(--table-edge-px,--spacing(3))] pe-[var(--table-edge-px,--spacing(3))] text-start text-caption text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+TableCaption.displayName = "TableCaption";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};

package/dist/components/table/table.meta.js

@@ -0,0 +1,143 @@
+// src/components/table/table.meta.ts
+var tableMeta = {
+  name: "Table",
+  summary: "Styled native table subcomponents (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption). Horizontally scrollable frame, hairline row borders, hover-lift, and selectable rows via data-selected.",
+  keywords: [
+    "table",
+    "data table",
+    "rows",
+    "columns",
+    "grid",
+    "caption",
+    "header",
+    "cell",
+    "tabular"
+  ],
+  usage: {
+    description: "Use Table for structured data with consistent columns and rows. Use DataTable when the table should be data-driven with sorting or empty state behavior, and use lists or cards when each item has a different shape.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use TableCaption and TableHead so the table has a clear purpose and column semantics."
+      },
+      {
+        guidance: "do",
+        description: "Keep cells concise and scannable; compose Badge, StatusDot, Avatar, or Button only when they clarify the row."
+      },
+      {
+        guidance: "do",
+        description: "Use the built-in horizontal frame for overflow instead of squeezing columns until content becomes unreadable."
+      },
+      {
+        guidance: "do",
+        description: "Put a table in a card with `<CardContent flush>`. The first and last columns then take the card's own padding (`--table-edge-px`), so they line up with the CardHeader at any density. Never hand-set `pl-6`/`pr-6` on edge cells."
+      },
+      {
+        guidance: "dont",
+        description: "Use Table for heterogeneous items with no stable columns. Use Card, Entity, or a list composition instead."
+      },
+      {
+        guidance: "dont",
+        description: "Put every possible action in every row. Use one primary row action, an OverflowMenu, or row detail navigation."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Caption",
+        required: false,
+        description: "Accessible summary of what the table contains."
+      },
+      {
+        name: "Header",
+        required: true,
+        description: "Column labels rendered with TableHead cells."
+      },
+      {
+        name: "Body",
+        required: true,
+        description: "Rows and cells containing the tabular data."
+      },
+      {
+        name: "Footer",
+        required: false,
+        description: "Optional totals or summary row group."
+      }
+    ]
+  },
+  related: {
+    components: ["DataTable", "Pagination", "Badge", "StatusDot", "Avatar"],
+    patterns: ["DashboardPage", "ListDetailPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "className",
+      type: "string",
+      description: "The root renders a horizontally scrollable frame around a native <table>; forwards all native table attributes plus className. Each subcomponent likewise forwards its element's native attributes + className."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "TableHeader",
+      type: 'ComponentPropsWithRef<"thead">',
+      description: "The header row group (thead)."
+    },
+    {
+      name: "TableBody",
+      type: 'ComponentPropsWithRef<"tbody">',
+      description: "The data row group (tbody)."
+    },
+    {
+      name: "TableFooter",
+      type: 'ComponentPropsWithRef<"tfoot">',
+      description: "Summary row group (tfoot) with a muted fill."
+    },
+    {
+      name: "TableRow",
+      type: 'ComponentPropsWithRef<"tr">',
+      description: "A row (tr) \u2014 hairline bottom border, hover lift, and a selected state via the data-selected attribute."
+    },
+    {
+      name: "TableHead",
+      type: 'ComponentPropsWithRef<"th">',
+      description: "A column header cell (th) in muted label styling."
+    },
+    {
+      name: "TableCell",
+      type: 'ComponentPropsWithRef<"td">',
+      description: "A data cell (td)."
+    },
+    {
+      name: "TableCaption",
+      type: 'ComponentPropsWithRef<"caption">',
+      description: "Accessible description of the table (caption), muted."
+    }
+  ],
+  tokensUsed: ["border", "muted", "muted-foreground"],
+  a11y: [
+    "Renders semantic native table elements (thead/tbody/tfoot/th/td/caption) preserving built-in table semantics.",
+    "Use TableHead (th) for column headers and TableCaption for an accessible description.",
+    "Mark the active row with the data-selected attribute for a visible selected state."
+  ],
+  examples: [
+    {
+      label: "Collectors",
+      code: "<Table>\n	<TableCaption>Recent collectors</TableCaption>\n	<TableHeader>\n		<TableRow>\n			<TableHead>Collector</TableHead>\n			<TableHead>Edition</TableHead>\n			<TableHead>Paid</TableHead>\n		</TableRow>\n	</TableHeader>\n	<TableBody>\n		<TableRow>\n			<TableCell>@nova</TableCell>\n			<TableCell>#012</TableCell>\n			<TableCell>0.5 SOL</TableCell>\n		</TableRow>\n	</TableBody>\n</Table>"
+    },
+    {
+      label: "Rich status cells",
+      code: '<Table><TableCaption>Deployments</TableCaption><TableHeader><TableRow><TableHead>Name</TableHead><TableHead>Status</TableHead><TableHead>Owner</TableHead><TableHead className="text-end">Actions</TableHead></TableRow></TableHeader><TableBody><TableRow data-selected><TableCell>Catalog API</TableCell><TableCell><Badge appearance="plain" tone="warning" dot pulse>Building</Badge></TableCell><TableCell><Row gap={1}><Avatar fallback="NR" alt="Nova Reed" size="sm" /><span>Nova</span></Row></TableCell><TableCell className="text-end"><Button size="sm" variant="ghost">View</Button></TableCell></TableRow></TableBody></Table>'
+    },
+    {
+      label: "Flush in a card",
+      code: "<Card><CardHeader><CardTitle>Collectors</CardTitle></CardHeader><CardContent flush><Table><TableHeader><TableRow><TableHead>Collector</TableHead><TableHead>Paid</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>@nova</TableCell><TableCell>0.5 SOL</TableCell></TableRow></TableBody></Table></CardContent></Card>"
+    },
+    {
+      label: "Summary footer",
+      code: '<Table><TableHeader><TableRow><TableHead>Item</TableHead><TableHead className="text-end">Amount</TableHead></TableRow></TableHeader><TableBody><TableRow><TableCell>Primary sale</TableCell><TableCell className="text-end">42 SOL</TableCell></TableRow></TableBody><TableFooter><TableRow><TableCell>Total</TableCell><TableCell className="text-end">42 SOL</TableCell></TableRow></TableFooter></Table>'
+    }
+  ]
+};
+export {
+  tableMeta
+};

package/dist/components/tabs/index.js

@@ -0,0 +1,17 @@
+// src/components/tabs/index.ts
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsPanel,
+  TabsPanel as TabsPanel2
+} from "./tabs.js";
+import { tabsMeta } from "./tabs.meta.js";
+export {
+  Tabs,
+  TabsPanel2 as TabsContent,
+  TabsList,
+  TabsPanel,
+  TabsTrigger,
+  tabsMeta
+};

package/dist/components/tabs/tabs.js

@@ -0,0 +1,58 @@
+// src/components/tabs/tabs.tsx
+import { Tabs as Base } from "@base-ui/react/tabs";
+import { createContext, useContext } from "react";
+import { cn } from "../../lib/cn.js";
+import { trimLabel } from "../../lib/trim-label.js";
+import { jsx } from "react/jsx-runtime";
+var Tabs = Base.Root;
+var TabsVariantContext = createContext("underline");
+function TabsList({ className, variant = "underline", ...props }) {
+  return /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(
+    Base.List,
+    {
+      "data-variant": variant,
+      className: cn(
+        variant === "underline" ? "inline-flex items-center gap-1 border-b border-border" : "inline-flex items-center gap-1",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function TabsTrigger({ className, children, ...props }) {
+  const variant = useContext(TabsVariantContext);
+  return /* @__PURE__ */ jsx(
+    Base.Tab,
+    {
+      className: cn(
+        "cursor-pointer text-label-lg text-muted-foreground motion-interactive hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[active]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        variant === "underline" ? (
+          // On the control ladder like the pill variant (it was py-2 plus
+          // the label's line, ~36px — no rung).
+          "-mb-px inline-flex h-(--control-md) items-center gap-(--control-gap) border-b-2 border-transparent px-3 data-[active]:border-foreground"
+        ) : "inline-flex h-(--control-sm) items-center gap-(--control-gap) rounded-[var(--button-radius,9999px)] px-3 data-[active]:bg-muted",
+        className
+      ),
+      ...props,
+      children: variant === "pill" && typeof children !== "function" ? trimLabel(children) : children
+    }
+  );
+}
+function TabsPanel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Panel,
+    {
+      className: cn(
+        "pt-4 text-foreground focus-visible:outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTrigger
+};

package/dist/components/tabs/tabs.meta.js

@@ -0,0 +1,120 @@
+// src/components/tabs/tabs.meta.ts
+var tabsMeta = {
+  name: "Tabs",
+  summary: "Tabs over Base UI Tabs (roving focus, arrow-key nav, ARIA tablist wiring) in two styles: underline (page sections) or pill (compact switchers). Tabs (Root) + TabsList + TabsTrigger + TabsPanel.",
+  status: "stable",
+  keywords: [
+    "tabs",
+    "tablist",
+    "panels",
+    "segmented content"
+  ],
+  usage: {
+    description: "Use Tabs to switch between related panels within the same page context.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use tabs when each panel is peer content and users may compare or switch often."
+      },
+      {
+        guidance: "do",
+        description: "Keep tab labels short and make the active tab unmistakable."
+      },
+      {
+        guidance: "do",
+        description: 'Use variant="pill" for a short switcher inside a card or toolbar (Preview / Code, List / Grid); keep the default underline for sections of a page.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Tabs for unrelated pages or primary navigation that needs distinct URLs."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use tabs for sequential steps. Tabs are peer views the user returns to in any order; a process with an order needs a stepper, or the user will skip ahead."
+      }
+    ],
+    anatomy: [
+      {
+        name: "TabsList",
+        required: true,
+        description: "The list of tab triggers."
+      },
+      {
+        name: "TabsTrigger",
+        required: true,
+        description: "One selectable tab."
+      },
+      {
+        name: "TabsPanel",
+        required: true,
+        description: "The content associated with a trigger."
+      },
+      {
+        name: "TabsContent",
+        required: false,
+        description: "Compatibility alias for panel content."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Accordion",
+      "BottomNav",
+      "SideNav"
+    ]
+  },
+  props: [
+    {
+      name: "Tabs (Root)",
+      type: "Base UI Tabs.Root props (value, defaultValue, onValueChange, orientation)",
+      default: "defaultValue: 0",
+      description: "Controls the active tab. Uncontrolled via defaultValue; controlled via value + onValueChange."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "TabsList",
+      type: 'Base UI Tabs.List props (activateOnFocus, loopFocus) + variant?: "underline" | "pill" + className',
+      description: `The tablist row. variant="underline" (default) draws a divider rule beneath the triggers; variant="pill" drops the rule and fills the active trigger, which takes the theme's button shape (--button-radius). Triggers inherit the variant.`
+    },
+    {
+      name: "TabsTrigger",
+      type: "Base UI Tabs.Tab props (value, disabled) + className",
+      description: "A single tab button. value pairs it with the panel of the same value."
+    },
+    {
+      name: "TabsPanel",
+      type: "Base UI Tabs.Panel props (value, keepMounted) + className",
+      description: "The content shown when the matching trigger is active."
+    },
+    {
+      name: "TabsContent",
+      type: "Alias of TabsPanel",
+      description: "Re-export of TabsPanel for consumers that prefer this name."
+    }
+  ],
+  tokensUsed: ["border", "muted", "muted-foreground", "foreground", "ring"],
+  a11y: [
+    "Base UI provides the tablist/tab/tabpanel roles, aria-selected, and roving tabindex.",
+    "Arrow keys move between tabs; Home/End jump to first/last; panels are linked via aria-controls.",
+    "Active tab styling reads from the data-active attribute; disabled tabs from data-disabled. Disabled tabs are skipped by arrow-key navigation.",
+    "Keyboard focus shows a ring on the focused trigger in both variants; the panel remains focusable."
+  ],
+  examples: [
+    {
+      label: "Basic",
+      code: '<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel><TabsPanel value="activity">Activity content</TabsPanel></Tabs>'
+    },
+    {
+      label: "Pill switcher",
+      code: '<Tabs defaultValue="preview"><TabsList variant="pill"><TabsTrigger value="preview">Preview</TabsTrigger><TabsTrigger value="code">Code</TabsTrigger></TabsList><TabsPanel value="preview">Rendered example</TabsPanel><TabsPanel value="code">Source</TabsPanel></Tabs>'
+    },
+    {
+      label: "With a disabled tab",
+      code: '<Tabs defaultValue="overview"><TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="holders" disabled>Holders</TabsTrigger></TabsList><TabsPanel value="overview">Overview content</TabsPanel></Tabs>'
+    }
+  ]
+};
+export {
+  tabsMeta
+};

package/dist/components/textarea/index.js

@@ -0,0 +1,7 @@
+// src/components/textarea/index.ts
+import { Textarea } from "./textarea.js";
+import { textareaMeta } from "./textarea.meta.js";
+export {
+  Textarea,
+  textareaMeta
+};