@shadow-js/ui 0.0.0-stage → 1.0.1

package/registry/table/table.tsx

@@ -0,0 +1,373 @@
+import { splitProps } from "@shadow-js/core";
+import type { ComponentProps, JSX } from "@shadow-js/web";
+import { cn } from "@/lib/utils";
+
+/** The attributes that make a scroll container a named region. @internal */
+interface RegionAttributes {
+  readonly role?: "region" | undefined;
+  readonly "aria-label"?: string | null | undefined;
+  readonly "aria-labelledby"?: string | null | undefined;
+}
+
+/**
+ * A responsive table. The `table` sits in a container that scrolls horizontally when the table is
+ * wider than the space it has. `class` goes on the `table` element.
+ *
+ * Keyboard and ARIA: the container takes keyboard focus (`tabindex="0"`), so keyboard users can
+ * scroll a wide table. The component adds no keys of its own. When the table has an accessible name
+ * (`aria-label` or `aria-labelledby`), the container is a `role="region"` with the same name, so the
+ * scrolling area is announced by name. Name the table with a {@link TableCaption} or an
+ * `aria-label`.
+ *
+ * shadcn/ui differences: the scroll container is focusable and, for a named table, a labeled
+ * region. shadcn/ui sets neither. `class` replaces `className`.
+ *
+ * @param props - The props: the attributes of the `table`, and `class`.
+ * @returns The scroll container, with the table inside.
+ * @example
+ * ```tsx
+ * import {
+ *   Table,
+ *   TableBody,
+ *   TableCaption,
+ *   TableCell,
+ *   TableHead,
+ *   TableHeader,
+ *   TableRow,
+ * } from "@/components/ui/table";
+ *
+ * export function Invoices() {
+ *   return (
+ *     <Table>
+ *       <TableCaption>Recent invoices</TableCaption>
+ *       <TableHeader>
+ *         <TableRow>
+ *           <TableHead scope="col">Invoice</TableHead>
+ *           <TableHead scope="col">Amount</TableHead>
+ *         </TableRow>
+ *       </TableHeader>
+ *       <TableBody>
+ *         <TableRow>
+ *           <TableCell>INV001</TableCell>
+ *           <TableCell>$250.00</TableCell>
+ *         </TableRow>
+ *       </TableBody>
+ *     </Table>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link TableCaption}
+ */
+function Table(props: ComponentProps<"table">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  // A named table names its scroll region too; an unnamed one is not a region at all.
+  const region = (): RegionAttributes =>
+    props["aria-label"] === undefined && props["aria-labelledby"] === undefined
+      ? {}
+      : {
+          role: "region",
+          "aria-label": props["aria-label"],
+          "aria-labelledby": props["aria-labelledby"],
+        };
+  return (
+    <div
+      data-slot="table-container"
+      class="relative w-full overflow-x-auto"
+      tabindex={0}
+      {...region()}
+    >
+      <table data-slot="table" class={cn("w-full caption-bottom text-sm", local.class)} {...rest}>
+        {local.children}
+      </table>
+    </div>
+  );
+}
+
+/**
+ * The `thead` of a table. Its rows get a bottom border.
+ *
+ * Keyboard and ARIA: no keys, and no role of its own (it is a row group). Its header cells are
+ * column headers (see {@link TableHead}).
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: the attributes of the `thead`, and `class`.
+ * @returns The `thead` element.
+ * @example
+ * ```tsx
+ * import { Table, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+ *
+ * export function Columns() {
+ *   return (
+ *     <Table>
+ *       <TableHeader>
+ *         <TableRow>
+ *           <TableHead scope="col">Invoice</TableHead>
+ *         </TableRow>
+ *       </TableHeader>
+ *     </Table>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TableHeader(props: ComponentProps<"thead">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <thead data-slot="table-header" class={cn("[&_tr]:border-b", local.class)} {...rest}>
+      {local.children}
+    </thead>
+  );
+}
+
+/**
+ * The `tbody` of a table. Its last row has no bottom border.
+ *
+ * Keyboard and ARIA: no keys, and no role of its own (it is a row group).
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: the attributes of the `tbody`, and `class`.
+ * @returns The `tbody` element.
+ * @example
+ * ```tsx
+ * import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+ *
+ * export function Rows() {
+ *   return (
+ *     <Table>
+ *       <TableBody>
+ *         <TableRow>
+ *           <TableCell>INV001</TableCell>
+ *         </TableRow>
+ *       </TableBody>
+ *     </Table>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TableBody(props: ComponentProps<"tbody">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <tbody data-slot="table-body" class={cn("[&_tr:last-child]:border-0", local.class)} {...rest}>
+      {local.children}
+    </tbody>
+  );
+}
+
+/**
+ * The `tfoot` of a table, for totals. It has a top border and a muted background, and its last row
+ * has no bottom border.
+ *
+ * Keyboard and ARIA: no keys, and no role of its own (it is a row group).
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: the attributes of the `tfoot`, and `class`.
+ * @returns The `tfoot` element.
+ * @example
+ * ```tsx
+ * import { Table, TableCell, TableFooter, TableRow } from "@/components/ui/table";
+ *
+ * export function Total() {
+ *   return (
+ *     <Table>
+ *       <TableFooter>
+ *         <TableRow>
+ *           <TableCell>Total</TableCell>
+ *           <TableCell>$250.00</TableCell>
+ *         </TableRow>
+ *       </TableFooter>
+ *     </Table>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TableFooter(props: ComponentProps<"tfoot">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <tfoot
+      data-slot="table-footer"
+      class={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </tfoot>
+  );
+}
+
+/**
+ * A row of cells. It highlights on hover, and with `data-state="selected"` it takes the selected
+ * background.
+ *
+ * Keyboard and ARIA: no keys; the row has the `row` role. Set `data-state="selected"` for the
+ * highlight only; it is not announced, so mark a selected row with `aria-selected` if assistive
+ * technology must know.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: the attributes of the `tr`, and `class`.
+ * @returns The `tr` element.
+ * @example
+ * ```tsx
+ * import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+ *
+ * export function SelectedRow() {
+ *   return (
+ *     <Table>
+ *       <TableBody>
+ *         <TableRow data-state="selected" aria-selected="true">
+ *           <TableCell>INV001</TableCell>
+ *         </TableRow>
+ *       </TableBody>
+ *     </Table>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TableRow(props: ComponentProps<"tr">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <tr
+      data-slot="table-row"
+      class={cn(
+        "border-b transition-colors hover:bg-muted/50 motion-reduce:transition-none data-[state=selected]:bg-muted forced-colors:data-[state=selected]:bg-[Highlight] forced-colors:data-[state=selected]:text-[HighlightText]",
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </tr>
+  );
+}
+
+/**
+ * A header cell (`th`). Give it `scope="col"` (a column header) or `scope="row"` (a row header), so
+ * assistive technology knows what the cell heads.
+ *
+ * Keyboard and ARIA: no keys. In a header row it is a `columnheader`; `scope="row"` makes it a
+ * row header.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: the attributes of the `th`, and `class`.
+ * @returns The `th` element.
+ * @example
+ * ```tsx
+ * import { Table, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+ *
+ * export function AmountHead() {
+ *   return (
+ *     <Table>
+ *       <TableHeader>
+ *         <TableRow>
+ *           <TableHead scope="col">Amount</TableHead>
+ *         </TableRow>
+ *       </TableHeader>
+ *     </Table>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TableHead(props: ComponentProps<"th">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <th
+      data-slot="table-head"
+      class={cn(
+        "h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </th>
+  );
+}
+
+/**
+ * A data cell (`td`).
+ *
+ * Keyboard and ARIA: no keys; the cell has the `cell` role.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: the attributes of the `td`, and `class`.
+ * @returns The `td` element.
+ * @example
+ * ```tsx
+ * import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+ *
+ * export function Amount() {
+ *   return (
+ *     <Table>
+ *       <TableBody>
+ *         <TableRow>
+ *           <TableCell>$250.00</TableCell>
+ *         </TableRow>
+ *       </TableBody>
+ *     </Table>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TableCell(props: ComponentProps<"td">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <td
+      data-slot="table-cell"
+      class={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0 [&>[role=checkbox]]:translate-y-[2px]",
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </td>
+  );
+}
+
+/**
+ * The caption of a table. It is shown below the table and is the table's accessible name.
+ *
+ * Keyboard and ARIA: no keys. The caption names the table, so a table needs a caption or an
+ * `aria-label` for its name.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: the attributes of the `caption`, and `class`.
+ * @returns The `caption` element.
+ * @example
+ * ```tsx
+ * import { Table, TableCaption } from "@/components/ui/table";
+ *
+ * export function Captioned() {
+ *   return (
+ *     <Table>
+ *       <TableCaption>A list of your recent invoices.</TableCaption>
+ *     </Table>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TableCaption(props: ComponentProps<"caption">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "children"]);
+  return (
+    <caption
+      data-slot="table-caption"
+      class={cn("mt-4 text-sm text-muted-foreground", local.class)}
+      {...rest}
+    >
+      {local.children}
+    </caption>
+  );
+}
+
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/registry/tabs/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Tabs",
+  "description": "A set of layered sections of content, known as tab panels, that are displayed one at a time."
+}

package/registry/tabs/tabs.tsx

@@ -0,0 +1,209 @@
+import { splitProps } from "@shadow-js/core";
+import {
+  type TabsContentProps,
+  type TabsListProps,
+  Tabs as TabsPrimitive,
+  type TabsProps,
+  type TabsTriggerProps,
+} from "@shadow-js/primitives";
+import type { JSX } from "@shadow-js/web";
+import { cn } from "@/lib/utils";
+
+/**
+ * A set of sections, one visible at a time, switched with tabs. Control the selected tab with
+ * `value` and `onValueChange`, or start it with `defaultValue`. `orientation` (`"horizontal"` or
+ * `"vertical"`), `dir` and `activationMode` are passed to the primitive.
+ *
+ * Keyboard and ARIA: the selected tab is the one tab stop of the list. Arrow keys move between
+ * enabled tabs (Up and Down when vertical, Left and Right when horizontal, swapped in a
+ * right-to-left layout), Home and End go to the first and last tabs, and the arrows wrap around.
+ * With `activationMode="automatic"` (the default) moving focus selects the tab; with `"manual"` only
+ * Enter, Space or a click selects it. A click always selects. The list is `role="tablist"` and each
+ * tab is `role="tab"` with `aria-selected`. The panel is `role="tabpanel"`, named by its tab, and
+ * focusable so its content can be reached. Name the list with a `TabsList` `aria-label`.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props, see {@link TabsProps}.
+ * @returns The root `div` with the list and the panels inside.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+ *
+ * export function SettingsTabs() {
+ *   return (
+ *     <Tabs defaultValue="account">
+ *       <TabsList aria-label="Settings">
+ *         <TabsTrigger value="account">Account</TabsTrigger>
+ *         <TabsTrigger value="password">Password</TabsTrigger>
+ *       </TabsList>
+ *       <TabsContent value="account">Account settings</TabsContent>
+ *       <TabsContent value="password">Password settings</TabsContent>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link TabsList}
+ */
+function Tabs(props: TabsProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <TabsPrimitive
+      data-slot="tabs"
+      class={cn("group/tabs flex flex-col gap-2 data-[orientation=vertical]:flex-row", local.class)}
+      {...rest}
+    />
+  );
+}
+
+/**
+ * The own props of {@link TabsList}, on top of the primitive's list props.
+ * @since 1.0.0
+ * @see {@link TabsList}
+ */
+export interface TabsListOwnProps {
+  /**
+   * The look of the list. `"default"` is a muted pill; `"line"` is a transparent list whose selected tab
+   * has an underline.
+   * @default "default"
+   */
+  readonly variant?: "default" | "line" | undefined;
+}
+
+/**
+ * The row (or column, when vertical) of tabs. It is a `role="tablist"` and owns the arrow-key
+ * movement between its tabs. Name it with `aria-label` or `aria-labelledby`.
+ *
+ * Keyboard and ARIA: see {@link Tabs}. The list sets `aria-orientation="vertical"` only when the
+ * tabs are stacked. Pass `loop={false}` to stop the arrows at the ends instead of wrapping.
+ *
+ * `variant` is `"default"` (a muted pill behind the tabs) or `"line"` (a transparent list, with an
+ * underline under the selected tab). It is styled by the list and the trigger together, so the line
+ * variant works through the triggers' own classes.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: `loop`, `variant` and the attributes of the list `div`.
+ * @returns The `div` with the tabs inside.
+ * @default variant "default"
+ * @example
+ * ```tsx
+ * import { TabsList, TabsTrigger } from "@/components/ui/tabs";
+ *
+ * export function Sections() {
+ *   return (
+ *     <TabsList aria-label="Sections">
+ *       <TabsTrigger value="overview">Overview</TabsTrigger>
+ *       <TabsTrigger value="activity">Activity</TabsTrigger>
+ *     </TabsList>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TabsList(props: TabsListProps & TabsListOwnProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["class", "variant"]);
+  const variant = (): "default" | "line" => local.variant ?? "default";
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant()}
+      class={cn(
+        "group/tabs-list inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground data-[orientation=vertical]:h-fit data-[orientation=vertical]:flex-col",
+        variant() === "line" ? "gap-1 bg-transparent" : "bg-muted",
+        local.class,
+      )}
+      {...rest}
+    />
+  );
+}
+
+/**
+ * One tab of a {@link Tabs}: the button that selects the panel with the same `value`. A disabled
+ * tab cannot be selected and the arrow keys skip it.
+ *
+ * Keyboard and ARIA: a `button` with `role="tab"`, `aria-selected` (`"true"` or `"false"`),
+ * `aria-controls` pointing at its panel, and `data-state` (`"active"` or `"inactive"`). It is in the
+ * tab order only when selected. Enter and Space select it, and so does a click. Arrow keys and
+ * Home and End are handled by the list (see {@link Tabs}).
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: `value` (required), `disabled`, and the attributes of the `button`.
+ * @returns The tab `button`.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+ *
+ * export function Billing() {
+ *   return (
+ *     <Tabs defaultValue="plans">
+ *       <TabsList aria-label="Billing">
+ *         <TabsTrigger value="plans">Plans</TabsTrigger>
+ *         <TabsTrigger value="invoices" disabled>
+ *           Invoices
+ *         </TabsTrigger>
+ *       </TabsList>
+ *       <TabsContent value="plans">Choose a plan.</TabsContent>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TabsTrigger(props: TabsTriggerProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      class={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring motion-reduce:transition-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:shadow-sm dark:text-muted-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground forced-colors:disabled:opacity-100 forced-colors:data-[state=active]:bg-[Highlight] forced-colors:data-[state=active]:text-[HighlightText] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent",
+        local.class,
+      )}
+      {...rest}
+    />
+  );
+}
+
+/**
+ * The panel of the tab with the same `value`. Only the selected panel is rendered; the others are
+ * removed until they are selected again.
+ *
+ * Keyboard and ARIA: a `div` with `role="tabpanel"`, named by its tab (`aria-labelledby`), with
+ * `tabindex="0"` so keyboard users can reach its content, and `data-state` (`"active"` or
+ * `"inactive"`). The component adds no key handling.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: `value` (required), `forceMount`, and the attributes of the `div`.
+ * @returns The panel `div`.
+ * @example
+ * ```tsx
+ * import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+ *
+ * export function Profile() {
+ *   return (
+ *     <Tabs defaultValue="general">
+ *       <TabsList aria-label="Profile">
+ *         <TabsTrigger value="general">General</TabsTrigger>
+ *       </TabsList>
+ *       <TabsContent value="general">Name and email.</TabsContent>
+ *     </Tabs>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ */
+function TabsContent(props: TabsContentProps): JSX.Element {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      class={cn("flex-1 outline-none", local.class)}
+      {...rest}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/registry/textarea/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Textarea",
+  "description": "A multi-line text field that grows with its content."
+}

package/registry/textarea/textarea.tsx

@@ -0,0 +1,51 @@
+import { splitProps } from "@shadow-js/core";
+import type { ComponentProps, JSX } from "@shadow-js/web";
+import { cn } from "@/lib/utils";
+
+/**
+ * A multi-line text field that grows with its content (`field-sizing: content`). It is a native
+ * `textarea`, so every `textarea` attribute passes through (`value`, `rows`, `disabled`, `name`,
+ * `onInput`, and so on). `aria-invalid="true"` turns the border and the focus ring destructive.
+ *
+ * Keyboard and ARIA: the browser's own keys apply. Tab moves focus in and out, Enter inserts a line
+ * break, and the arrow keys move the caret. It has the `textbox` role. Name it with a
+ * {@link Label} (`id` on the textarea, `htmlFor` on the label) or with `aria-label`. Set
+ * `aria-invalid="true"` and `aria-describedby` on the textarea to show an error.
+ *
+ * shadcn/ui differences: `class` replaces `className`.
+ *
+ * @param props - The props: the attributes of the native `textarea`. `class` is merged with the base
+ * classes.
+ * @returns The `textarea` element.
+ * @example
+ * ```tsx
+ * import { Label } from "@/components/ui/label";
+ * import { Textarea } from "@/components/ui/textarea";
+ *
+ * export function Feedback() {
+ *   return (
+ *     <div class="grid gap-2">
+ *       <Label htmlFor="feedback">Feedback</Label>
+ *       <Textarea id="feedback" placeholder="Type your message here." rows={3} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ * @since 1.0.0
+ * @see {@link Label}
+ */
+function Textarea(props: ComponentProps<"textarea">): JSX.Element {
+  const [local, rest] = splitProps(props, ["class"]);
+  return (
+    <textarea
+      data-slot="textarea"
+      class={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 motion-reduce:transition-none md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-transparent",
+        local.class,
+      )}
+      {...rest}
+    />
+  );
+}
+
+export { Textarea };

package/registry/toast/item.json

@@ -0,0 +1,4 @@
+{
+  "title": "Toast",
+  "description": "Toast stores (useToast in components, createToaster in module code) and the Toaster that shows their notifications, after Sonner."
+}