@giddaa-housing/ui 0.1.0

package/dist/table.js

@@ -0,0 +1,197 @@
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/table.tsx
+import { jsx } from "react/jsx-runtime";
+function Table({
+  className,
+  containerClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: cn(
+        "relative w-full overflow-x-auto rounded-xl border border-line bg-surface-overlay",
+        containerClassName
+      ),
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("min-w-full caption-bottom", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({
+  className,
+  sticky = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn(
+        "bg-surface-raised",
+        sticky && "sticky top-0 z-2 shadow-(--elevation-e2-shadow)",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tfoot",
+    {
+      "data-slot": "table-footer",
+      className: cn(
+        "border-t border-line bg-surface-raised font-medium [&>tr]:last:border-b-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "group border-b border-line-subtle transition-colors",
+        "hover:bg-surface has-aria-expanded:bg-surface",
+        "data-[state=selected]:bg-surface-brand-subtle",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "h-11 px-5 py-3.5 text-left align-middle bg-surface-raised",
+        "text-gdt-capitalized font-bold uppercase tracking-wide text-fg-secondary",
+        "whitespace-nowrap has-[[role=checkbox]]:pr-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({
+  className,
+  pinned = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "px-5 py-3.5 align-middle text-gdt-sm text-fg-primary",
+        "whitespace-nowrap",
+        pinned && "bg-surface-raised group-hover:bg-surface group-data-[state=selected]:bg-surface-brand-subtle",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCellTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "table-cell-title",
+      className: cn("text-gdt-sm font-semibold", className),
+      ...props
+    }
+  );
+}
+function TableCellCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "table-cell-caption",
+      className: cn("text-gdt-xs text-fg-secondary", className),
+      ...props
+    }
+  );
+}
+function TableCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("mt-4 text-gdt-sm text-fg-secondary", className),
+      ...props
+    }
+  );
+}
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableCellCaption,
+  TableCellTitle,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow
+};
+//# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/cn.ts","../src/components/ui/table.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport type * as React from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\n/**\n * Outer card wrapper.\n *\n * Tokens: bg-surface-overlay (container fill), border-line (container border).\n * Pass `containerClassName` to override scroll, sizing, or rounding for\n * individual call-sites (e.g. the data-table's max-height + rounded-[20px]).\n */\nfunction Table({\n\tclassName,\n\tcontainerClassName,\n\t...props\n}: React.ComponentProps<\"table\"> & { containerClassName?: string }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"table-container\"\n\t\t\tclassName={cn(\n\t\t\t\t\"relative w-full overflow-x-auto rounded-xl border border-line bg-surface-overlay\",\n\t\t\t\tcontainerClassName,\n\t\t\t)}\n\t\t>\n\t\t\t<table\n\t\t\t\tdata-slot=\"table\"\n\t\t\t\tclassName={cn(\"min-w-full caption-bottom\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\n/**\n * Header band (thead).\n *\n * Token: bg-surface-raised (header fill).\n * Add `sticky` to pin the header and show Shadow-2 elevation while scrolled.\n */\nfunction TableHeader({\n\tclassName,\n\tsticky = false,\n\t...props\n}: React.ComponentProps<\"thead\"> & { sticky?: boolean }) {\n\treturn (\n\t\t<thead\n\t\t\tdata-slot=\"table-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-surface-raised\",\n\t\t\t\tsticky && \"sticky top-0 z-2 shadow-(--elevation-e2-shadow)\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n\treturn (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cn(\"[&_tr:last-child]:border-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Footer band (tfoot).\n *\n * Shares the same raised surface as the header.\n */\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n\treturn (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"border-t border-line bg-surface-raised font-medium [&>tr]:last:border-b-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Table row (tr).\n *\n * Token: border-line-subtle (row divider). The last body row has no border\n * via the [&_tr:last-child]:border-0 rule on TableBody.\n */\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n\treturn (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group border-b border-line-subtle transition-colors\",\n\t\t\t\t\"hover:bg-surface has-aria-expanded:bg-surface\",\n\t\t\t\t\"data-[state=selected]:bg-surface-brand-subtle\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Header cell (th).\n *\n * Tokens: bg-surface-raised (always applied so sticky/pinned th cells correctly\n * cover scrolling content), text-fg-secondary, text-gdt-capitalized + uppercase\n * for the tiny-caps column label style described in the design system.\n */\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n\treturn (\n\t\t<th\n\t\t\tdata-slot=\"table-head\"\n\t\t\tclassName={cn(\n\t\t\t\t\"h-11 px-5 py-3.5 text-left align-middle bg-surface-raised\",\n\t\t\t\t\"text-gdt-capitalized font-bold uppercase tracking-wide text-fg-secondary\",\n\t\t\t\t\"whitespace-nowrap has-[[role=checkbox]]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Standard body cell (td).\n *\n * Token: text-fg-primary (body cell text), text-gdt-sm.\n * Pass `pinned` when the column is sticky. Pinned cells get an opaque\n * bg-canvas cover so scrolling content doesn't bleed through, and they\n * mirror the parent row's hover/selected states via group variants.\n * Non-pinned cells are left transparent so the parent row's surface shows through.\n */\nfunction TableCell({\n\tclassName,\n\tpinned = false,\n\t...props\n}: React.ComponentProps<\"td\"> & { pinned?: boolean }) {\n\treturn (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tclassName={cn(\n\t\t\t\t\"px-5 py-3.5 align-middle text-gdt-sm text-fg-primary\",\n\t\t\t\t\"whitespace-nowrap\",\n\t\t\t\tpinned &&\n\t\t\t\t\t\"bg-surface-raised group-hover:bg-surface group-data-[state=selected]:bg-surface-brand-subtle\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Formatted cell title, for use within a TableCell\n */\nfunction TableCellTitle({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"table-cell-title\"\n\t\t\tclassName={cn(\"text-gdt-sm font-semibold\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Formatted cell caption, for use within a TableCell. Usually for auxiliary info below the title, uses the secondary text token and smaller size.\n */\nfunction TableCellCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"table-cell-caption\"\n\t\t\tclassName={cn(\"text-gdt-xs text-fg-secondary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Caption — rendered below the table, uses secondary text token.\n */\nfunction TableCaption({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"caption\">) {\n\treturn (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tclassName={cn(\"mt-4 text-gdt-sm text-fg-secondary\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCellTitle,\n\tTableCellCaption,\n\tTableCaption,\n};\n"],"mappings":"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","names":[]}

package/dist/tabs.d.ts

@@ -0,0 +1,18 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+
+type TabsListVariant = "default" | "line" | "secondary" | "underline";
+declare function Tabs({ className, orientation, ...props }: Tabs$1.Root.Props): React.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "secondary" | "underline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, children, ...props }: Tabs$1.List.Props & {
+    variant?: TabsListVariant;
+}): React.JSX.Element;
+declare function TabsTrigger({ className, nativeButton, ...props }: Tabs$1.Tab.Props): React.JSX.Element;
+declare function TabsCount({ className, ...props }: ComponentPropsWithoutRef<"span">): React.JSX.Element;
+declare function TabsContent({ className, ...props }: Tabs$1.Panel.Props): React.JSX.Element;
+
+export { Tabs, TabsContent, TabsCount, TabsList, TabsTrigger, tabsListVariants };

package/dist/tabs.js

@@ -0,0 +1,159 @@
+// src/components/ui/tabs.tsx
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/tabs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function resolveTabsListVariant(variant) {
+  return variant === "default" ? "secondary" : variant === "line" ? "underline" : variant;
+}
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      className: cn(
+        "group/tabs flex gap-3 data-[orientation=horizontal]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var tabsListVariants = cva(
+  "group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle",
+  {
+    variants: {
+      variant: {
+        underline: "rounded-none bg-transparent p-0",
+        secondary: "rounded-4xl bg-transparent p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "underline"
+    }
+  }
+);
+function TabsList({
+  className,
+  variant = "underline",
+  children,
+  ...props
+}) {
+  const resolvedVariant = resolveTabsListVariant(variant);
+  return /* @__PURE__ */ jsxs(
+    TabsPrimitive.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": resolvedVariant,
+      className: cn(tabsListVariants({ variant: resolvedVariant }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          TabsPrimitive.Indicator,
+          {
+            className: cn(
+              "pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out",
+              "group-data-[variant=secondary]/tabs-list:hidden",
+              "group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none",
+              "group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0",
+              "group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  nativeButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Tab,
+    {
+      "data-slot": "tabs-trigger",
+      nativeButton,
+      className: cn(
+        "group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:py-3 group-data-[variant=underline]/tabs-list:text-gdt-md group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary max-sm:group-data-[variant=underline]/tabs-list:px-3 max-sm:group-data-[variant=underline]/tabs-list:py-2.5 max-sm:group-data-[variant=underline]/tabs-list:text-gdt-sm",
+        "group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:py-3 group-data-[variant=secondary]/tabs-list:text-gdt-md group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand max-sm:group-data-[variant=secondary]/tabs-list:px-3 max-sm:group-data-[variant=secondary]/tabs-list:py-2.5 max-sm:group-data-[variant=secondary]/tabs-list:text-gdt-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsCount({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "tabs-count",
+      className: cn(
+        "inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[11px] leading-none font-semibold transition-[background-color,color]",
+        "group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand",
+        "group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Panel,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 text-sm outline-none", className),
+      ...props
+    }
+  );
+}
+export {
+  Tabs,
+  TabsContent,
+  TabsCount,
+  TabsList,
+  TabsTrigger,
+  tabsListVariants
+};
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/tabs.tsx","../src/lib/cn.ts"],"sourcesContent":["\"use client\";\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\";\nimport { cva } from \"class-variance-authority\";\nimport type { ComponentPropsWithoutRef } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\n\ntype TabsListVariant = \"default\" | \"line\" | \"secondary\" | \"underline\";\n\nfunction resolveTabsListVariant(variant: TabsListVariant) {\n\treturn variant === \"default\"\n\t\t? \"secondary\"\n\t\t: variant === \"line\"\n\t\t\t? \"underline\"\n\t\t\t: variant;\n}\n\nfunction Tabs({\n\tclassName,\n\torientation = \"horizontal\",\n\t...props\n}: TabsPrimitive.Root.Props) {\n\treturn (\n\t\t<TabsPrimitive.Root\n\t\t\tdata-slot=\"tabs\"\n\t\t\tdata-orientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tabs flex gap-3 data-[orientation=horizontal]:flex-col\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst tabsListVariants = cva(\n\t\"group/tabs-list relative inline-flex w-fit shrink-0 items-center gap-1 text-fg-secondary group-data-[orientation=horizontal]/tabs:border-b group-data-[orientation=horizontal]/tabs:border-line-subtle group-data-[orientation=vertical]/tabs:flex-col group-data-[orientation=vertical]/tabs:border-l group-data-[orientation=vertical]/tabs:border-line-subtle\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tunderline: \"rounded-none bg-transparent p-0\",\n\t\t\t\tsecondary: \"rounded-4xl bg-transparent p-0\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"underline\",\n\t\t},\n\t},\n);\n\nfunction TabsList({\n\tclassName,\n\tvariant = \"underline\",\n\tchildren,\n\t...props\n}: TabsPrimitive.List.Props & {\n\tvariant?: TabsListVariant;\n}) {\n\tconst resolvedVariant = resolveTabsListVariant(variant);\n\n\treturn (\n\t\t<TabsPrimitive.List\n\t\t\tdata-slot=\"tabs-list\"\n\t\t\tdata-variant={resolvedVariant}\n\t\t\tclassName={cn(tabsListVariants({ variant: resolvedVariant }), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<TabsPrimitive.Indicator\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"pointer-events-none absolute left-0 top-0 z-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) translate-y-(--active-tab-top) transition-[transform,width,height] duration-200 ease-in-out\",\n\t\t\t\t\t\"group-data-[variant=secondary]/tabs-list:hidden\",\n\t\t\t\t\t\"group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:bg-line-focus group-data-[variant=underline]/tabs-list:shadow-none\",\n\t\t\t\t\t\"group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:top-auto group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:bottom-[-1px] group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:h-0.5! group-data-[orientation=horizontal]/tabs:group-data-[variant=underline]/tabs-list:translate-y-0\",\n\t\t\t\t\t\"group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:left-auto group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:right-[-1px] group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:w-0.5! group-data-[orientation=vertical]/tabs:group-data-[variant=underline]/tabs-list:translate-x-0\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</TabsPrimitive.List>\n\t);\n}\n\nfunction TabsTrigger({\n\tclassName,\n\tnativeButton = true,\n\t...props\n}: TabsPrimitive.Tab.Props) {\n\treturn (\n\t\t<TabsPrimitive.Tab\n\t\t\tdata-slot=\"tabs-trigger\"\n\t\t\tnativeButton={nativeButton}\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tabs-trigger relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap border border-transparent font-semibold outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:text-current [&_svg:not([class*='size-'])]:size-4\",\n\t\t\t\t\"group-data-[variant=underline]/tabs-list:-mb-px group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:py-3 group-data-[variant=underline]/tabs-list:text-gdt-md group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:hover:text-fg-primary group-data-[variant=underline]/tabs-list:data-active:text-fg-primary max-sm:group-data-[variant=underline]/tabs-list:px-3 max-sm:group-data-[variant=underline]/tabs-list:py-2.5 max-sm:group-data-[variant=underline]/tabs-list:text-gdt-sm\",\n\t\t\t\t\"group-data-[variant=secondary]/tabs-list:rounded-4xl group-data-[variant=secondary]/tabs-list:bg-surface-raised group-data-[variant=secondary]/tabs-list:px-4 group-data-[variant=secondary]/tabs-list:py-3 group-data-[variant=secondary]/tabs-list:text-gdt-md group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:hover:bg-surface group-data-[variant=secondary]/tabs-list:hover:text-fg-primary group-data-[variant=secondary]/tabs-list:data-active:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:text-fg-on-brand group-data-[variant=secondary]/tabs-list:data-active:shadow-(--elevation-e1-shadow) group-data-[variant=secondary]/tabs-list:data-active:hover:bg-surface-brand group-data-[variant=secondary]/tabs-list:data-active:hover:text-fg-on-brand max-sm:group-data-[variant=secondary]/tabs-list:px-3 max-sm:group-data-[variant=secondary]/tabs-list:py-2.5 max-sm:group-data-[variant=secondary]/tabs-list:text-gdt-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TabsCount({ className, ...props }: ComponentPropsWithoutRef<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"tabs-count\"\n\t\t\tclassName={cn(\n\t\t\t\t\"inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-[11px] leading-none font-semibold transition-[background-color,color]\",\n\t\t\t\t\"group-data-[variant=underline]/tabs-list:bg-surface-raised group-data-[variant=underline]/tabs-list:text-fg-secondary group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=underline]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand\",\n\t\t\t\t\"group-data-[variant=secondary]/tabs-list:bg-surface-overlay group-data-[variant=secondary]/tabs-list:text-fg-secondary group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:bg-surface-brand-subtle group-data-[variant=secondary]/tabs-list:group-data-[active]/tabs-trigger:text-fg-brand\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n\treturn (\n\t\t<TabsPrimitive.Panel\n\t\t\tdata-slot=\"tabs-content\"\n\t\t\tclassName={cn(\"flex-1 text-sm outline-none\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tTabs,\n\tTabsList,\n\tTabsTrigger,\n\tTabsCount,\n\tTabsContent,\n\ttabsListVariants,\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n"],"mappings":";AAEA,SAAS,QAAQ,qBAAqB;AACtC,SAAS,WAAW;;;ACHpB,SAA0B,YAAY;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EACnC,QAAQ;AAAA,IACP,aAAa;AAAA,MACZ,aAAa;AAAA,QACZ;AAAA,UACC,MAAM;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC3C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC5B;;;ADPE,cAsCA,YAtCA;AAdF,SAAS,uBAAuB,SAA0B;AACzD,SAAO,YAAY,YAChB,cACA,YAAY,SACX,cACA;AACL;AAEA,SAAS,KAAK;AAAA,EACb;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACJ,GAA6B;AAC5B,SACC;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACA,aAAU;AAAA,MACV,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACV;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,IAAM,mBAAmB;AAAA,EACxB;AAAA,EACA;AAAA,IACC,UAAU;AAAA,MACT,SAAS;AAAA,QACR,WAAW;AAAA,QACX,WAAW;AAAA,MACZ;AAAA,IACD;AAAA,IACA,iBAAiB;AAAA,MAChB,SAAS;AAAA,IACV;AAAA,EACD;AACD;AAEA,SAAS,SAAS;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACJ,GAEG;AACF,QAAM,kBAAkB,uBAAuB,OAAO;AAEtD,SACC;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACA,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,iBAAiB,EAAE,SAAS,gBAAgB,CAAC,GAAG,SAAS;AAAA,MACtE,GAAG;AAAA,MAEH;AAAA;AAAA,QACD;AAAA,UAAC,cAAc;AAAA,UAAd;AAAA,YACA,WAAW;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACD;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,YAAY;AAAA,EACpB;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACJ,GAA4B;AAC3B,SACC;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,MAAM,GAAqC;AAC7E,SACC;AAAA,IAAC;AAAA;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAA8B;AACxE,SACC;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACrD,GAAG;AAAA;AAAA,EACL;AAEF;","names":[]}

package/dist/tag.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { ReactNode, MouseEvent } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ComponentSize } from './size-context.js';
+
+declare const tagVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    border?: boolean | null | undefined;
+    clickable?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TagProps {
+    label: string;
+    leadingIcon?: ReactNode;
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onClick?: () => void;
+    size?: ComponentSize;
+    border?: boolean;
+    clickable?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+declare function Tag({ label, leadingIcon, onClose, onClick, size, border, clickable, disabled, className, }: TagProps): React.JSX.Element;
+
+export { Tag, tagVariants };

package/dist/tag.js

@@ -0,0 +1,160 @@
+// src/components/ui/tag.tsx
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "gdt-display",
+            "gdt-h1",
+            "gdt-h2",
+            "gdt-h3",
+            "gdt-h4",
+            "gdt-h5",
+            "gdt-xl",
+            "gdt-lg",
+            "gdt-md",
+            "gdt-sm",
+            "gdt-xs",
+            "gdt-subtext",
+            "gdt-capitalized"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/ui/size-context.tsx
+import { createContext, useContext } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+var SizeContext = createContext(void 0);
+function useComponentSize(size, fallback = "md") {
+  const inheritedSize = useContext(SizeContext);
+  return size ?? inheritedSize ?? fallback;
+}
+
+// src/components/ui/tag.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var tagVariants = cva(
+  "group/tag inline-flex w-fit shrink-0 items-center font-bold leading-none whitespace-nowrap rounded-4xl border bg-surface-raised text-fg-secondary transition-[background-color,border-color] select-none",
+  {
+    variants: {
+      size: {
+        sm: "gap-1 py-0.5 pl-2 pr-1 text-gdt-xs",
+        md: "gap-1.5 py-1 pl-2.5 pr-1.5 text-gdt-sm",
+        lg: "gap-2 py-1.5 pl-3 pr-2 text-gdt-md"
+      },
+      border: {
+        true: "border-line",
+        false: "border-transparent"
+      },
+      clickable: {
+        true: "cursor-pointer hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]",
+        false: "cursor-default"
+      },
+      disabled: {
+        true: "opacity-50 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      border: false,
+      clickable: false,
+      disabled: false
+    }
+  }
+);
+var tagCloseVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-full text-fg-secondary transition-[background-color,color] outline-none hover:bg-action-tertiary-hover hover:text-fg-primary focus-visible:bg-action-tertiary-hover focus-visible:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-action-tertiary-pressed disabled:pointer-events-none",
+  {
+    variants: {
+      size: {
+        sm: "size-4 [&>svg]:size-2.5",
+        md: "size-5 [&>svg]:size-3",
+        lg: "size-5 [&>svg]:size-3.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Tag({
+  label,
+  leadingIcon,
+  onClose,
+  onClick,
+  size,
+  border = false,
+  clickable = false,
+  disabled = false,
+  className
+}) {
+  const resolvedSize = useComponentSize(size);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick?.();
+    }
+  };
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: clickable tags set button semantics, focus, and keyboard activation while still allowing a nested close action.
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: clickable ? "button" : void 0,
+        tabIndex: clickable && !disabled ? 0 : void 0,
+        "aria-disabled": disabled ? true : void 0,
+        "data-slot": "tag",
+        className: cn(
+          tagVariants({ size: resolvedSize, border, clickable, disabled }),
+          className
+        ),
+        onClick: clickable ? onClick : void 0,
+        onKeyDown: clickable ? handleKeyDown : void 0,
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx2(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "tag-leading-icon",
+              className: "inline-flex shrink-0 items-center [&>svg]:size-[1em]",
+              children: leadingIcon
+            }
+          ),
+          /* @__PURE__ */ jsx2("span", { children: label }),
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${label}`,
+              disabled,
+              className: cn(tagCloseVariants({ size: resolvedSize })),
+              onClick: (e) => {
+                e.stopPropagation();
+                onClose?.(e);
+              },
+              children: /* @__PURE__ */ jsx2(X, { "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+export {
+  Tag,
+  tagVariants
+};
+//# sourceMappingURL=tag.js.map

package/dist/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/tag.tsx","../src/lib/cn.ts","../src/components/ui/size-context.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport type { KeyboardEvent, MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { type ComponentSize, useComponentSize } from \"./size-context\";\n\nconst tagVariants = cva(\n\t\"group/tag inline-flex w-fit shrink-0 items-center font-bold leading-none whitespace-nowrap rounded-4xl border bg-surface-raised text-fg-secondary transition-[background-color,border-color] select-none\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"gap-1 py-0.5 pl-2 pr-1 text-gdt-xs\",\n\t\t\t\tmd: \"gap-1.5 py-1 pl-2.5 pr-1.5 text-gdt-sm\",\n\t\t\t\tlg: \"gap-2 py-1.5 pl-3 pr-2 text-gdt-md\",\n\t\t\t},\n\t\t\tborder: {\n\t\t\t\ttrue: \"border-line\",\n\t\t\t\tfalse: \"border-transparent\",\n\t\t\t},\n\t\t\tclickable: {\n\t\t\t\ttrue: \"cursor-pointer hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed outline-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)]\",\n\t\t\t\tfalse: \"cursor-default\",\n\t\t\t},\n\t\t\tdisabled: {\n\t\t\t\ttrue: \"opacity-50 pointer-events-none\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\tborder: false,\n\t\t\tclickable: false,\n\t\t\tdisabled: false,\n\t\t},\n\t},\n);\n\nconst tagCloseVariants = cva(\n\t\"inline-flex shrink-0 items-center justify-center rounded-full text-fg-secondary transition-[background-color,color] outline-none hover:bg-action-tertiary-hover hover:text-fg-primary focus-visible:bg-action-tertiary-hover focus-visible:text-fg-primary focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:bg-action-tertiary-pressed disabled:pointer-events-none\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"size-4 [&>svg]:size-2.5\",\n\t\t\t\tmd: \"size-5 [&>svg]:size-3\",\n\t\t\t\tlg: \"size-5 [&>svg]:size-3.5\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ninterface TagProps {\n\tlabel: string;\n\tleadingIcon?: ReactNode;\n\tonClose?: (e: MouseEvent<HTMLButtonElement>) => void;\n\tonClick?: () => void;\n\tsize?: ComponentSize;\n\tborder?: boolean;\n\tclickable?: boolean;\n\tdisabled?: boolean;\n\tclassName?: string;\n}\n\nfunction Tag({\n\tlabel,\n\tleadingIcon,\n\tonClose,\n\tonClick,\n\tsize,\n\tborder = false,\n\tclickable = false,\n\tdisabled = false,\n\tclassName,\n}: TagProps) {\n\tconst resolvedSize = useComponentSize(size);\n\n\tconst handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\te.preventDefault();\n\t\t\tonClick?.();\n\t\t}\n\t};\n\n\treturn (\n\t\t// biome-ignore lint/a11y/noStaticElementInteractions: clickable tags set button semantics, focus, and keyboard activation while still allowing a nested close action.\n\t\t<div\n\t\t\trole={clickable ? \"button\" : undefined}\n\t\t\ttabIndex={clickable && !disabled ? 0 : undefined}\n\t\t\taria-disabled={disabled ? true : undefined}\n\t\t\tdata-slot=\"tag\"\n\t\t\tclassName={cn(\n\t\t\t\ttagVariants({ size: resolvedSize, border, clickable, disabled }),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={clickable ? onClick : undefined}\n\t\t\tonKeyDown={clickable ? handleKeyDown : undefined}\n\t\t>\n\t\t\t{leadingIcon && (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-slot=\"tag-leading-icon\"\n\t\t\t\t\tclassName=\"inline-flex shrink-0 items-center [&>svg]:size-[1em]\"\n\t\t\t\t>\n\t\t\t\t\t{leadingIcon}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<span>{label}</span>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-label={`Remove ${label}`}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={cn(tagCloseVariants({ size: resolvedSize }))}\n\t\t\t\tonClick={(e) => {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t\tonClose?.(e);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<X aria-hidden=\"true\" />\n\t\t\t</button>\n\t\t</div>\n\t);\n}\n\nexport { Tag, tagVariants };\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n\textend: {\n\t\tclassGroups: {\n\t\t\t\"font-size\": [\n\t\t\t\t{\n\t\t\t\t\ttext: [\n\t\t\t\t\t\t\"gdt-display\",\n\t\t\t\t\t\t\"gdt-h1\",\n\t\t\t\t\t\t\"gdt-h2\",\n\t\t\t\t\t\t\"gdt-h3\",\n\t\t\t\t\t\t\"gdt-h4\",\n\t\t\t\t\t\t\"gdt-h5\",\n\t\t\t\t\t\t\"gdt-xl\",\n\t\t\t\t\t\t\"gdt-lg\",\n\t\t\t\t\t\t\"gdt-md\",\n\t\t\t\t\t\t\"gdt-sm\",\n\t\t\t\t\t\t\"gdt-xs\",\n\t\t\t\t\t\t\"gdt-subtext\",\n\t\t\t\t\t\t\"gdt-capitalized\",\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n});\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { createContext, type ReactNode, useContext } from \"react\";\n\ntype ComponentSize = \"sm\" | \"md\" | \"lg\";\n\nconst SizeContext = createContext<ComponentSize | undefined>(undefined);\n\nfunction SizeProvider({\n\tchildren,\n\tsize,\n}: {\n\tchildren: ReactNode;\n\tsize?: ComponentSize | null;\n}) {\n\tif (!size) {\n\t\treturn <>{children}</>;\n\t}\n\n\treturn <SizeContext.Provider value={size}>{children}</SizeContext.Provider>;\n}\n\nfunction useComponentSize(\n\tsize?: ComponentSize | null,\n\tfallback: ComponentSize = \"md\",\n) {\n\tconst inheritedSize = useContext(SizeContext);\n\treturn size ?? inheritedSize ?? fallback;\n}\n\nexport { SizeProvider, useComponentSize, type ComponentSize };\n"],"mappings":"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","names":["jsx"]}

package/dist/textarea.d.ts

@@ -0,0 +1,12 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const textareaVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & VariantProps<typeof textareaVariants>;
+type TextareaSize = NonNullable<VariantProps<typeof textareaVariants>["size"]>;
+declare function Textarea({ className, size, ...props }: TextareaProps): React.JSX.Element;
+
+export { Textarea, type TextareaSize, textareaVariants };