@dirstack/ui 1.0.0

package/dist/lib/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","names":[],"sources":["../../src/lib/icons.tsx"],"mappings":";;;YAmBY,YAAY,KAAK;YACjB,gBAAgB,cAAc;qBAqB7B,WAAS;qBACT,iBAAe;qBACf,iBAAe;qBACf,kBAAgB;qBAChB,eAAa;qBACb,oBAAkB;qBAClB,iBAAe;qBACf,gBAAc;qBACd,YAAU;qBACV,aAAW;qBACX,UAAQ;qBACR,YAAU;qBACV,YAAU;qBACV,OAAK"}

package/dist/lib/icons.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { ArrowDown01Icon, ArrowLeft01Icon, ArrowRight01Icon, ArrowUp01Icon, Cancel01Icon, CancelCircleIcon, CheckmarkCircle02Icon, CircleIcon as CircleIcon$1, Copy01Icon, HelpCircleIcon, Loading03Icon, Search01Icon, Tick02Icon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+//#region src/lib/icons.tsx
+/**
+* Internal, non-exported icon helper. The package deliberately ships no public icon registry
+* (icon choice is product-specific and lives in each consuming app); this file only carries the
+* handful of structural glyphs the package's own components render. It lives in `lib/` rather
+* than `components/` so the `"./*": "./dist/components/*"` wildcard export never exposes it.
+*
+* Wraps a Hugeicons definition as a plain icon component, so call sites render `<CheckIcon />`.
+* Sizes to `1em` so a `size-*` class or the surrounding font size drives it.
+*/
+function icon(def, name) {
+	function Icon(props) {
+		return /* @__PURE__ */ jsx(HugeiconsIcon, {
+			icon: def,
+			size: "1em",
+			strokeWidth: 1.75,
+			...props
+		});
+	}
+	Icon.displayName = name;
+	return Icon;
+}
+const CheckIcon = icon(Tick02Icon, "CheckIcon");
+const ChevronDownIcon = icon(ArrowDown01Icon, "ChevronDownIcon");
+const ChevronLeftIcon = icon(ArrowLeft01Icon, "ChevronLeftIcon");
+const ChevronRightIcon = icon(ArrowRight01Icon, "ChevronRightIcon");
+const ChevronUpIcon = icon(ArrowUp01Icon, "ChevronUpIcon");
+const ChevronsUpDownIcon = icon(UnfoldMoreIcon, "ChevronsUpDownIcon");
+const CircleCheckIcon = icon(CheckmarkCircle02Icon, "CircleCheckIcon");
+const CircleHelpIcon = icon(HelpCircleIcon, "CircleHelpIcon");
+const CircleIcon = icon(CircleIcon$1, "CircleIcon");
+const CircleXIcon = icon(CancelCircleIcon, "CircleXIcon");
+const CopyIcon = icon(Copy01Icon, "CopyIcon");
+const LoaderIcon = icon(Loading03Icon, "LoaderIcon");
+const SearchIcon = icon(Search01Icon, "SearchIcon");
+const XIcon = icon(Cancel01Icon, "XIcon");
+//#endregion
+export { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleCheckIcon, CircleHelpIcon, CircleIcon, CircleXIcon, CopyIcon, LoaderIcon, SearchIcon, XIcon };
+
+//# sourceMappingURL=icons.js.map

package/dist/lib/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","names":["CircleDef"],"sources":["../../src/lib/icons.tsx"],"sourcesContent":["import {\n  ArrowDown01Icon,\n  ArrowLeft01Icon,\n  ArrowRight01Icon,\n  ArrowUp01Icon,\n  Cancel01Icon,\n  CancelCircleIcon,\n  CheckmarkCircle02Icon,\n  CircleIcon as CircleDef,\n  Copy01Icon,\n  HelpCircleIcon,\n  Loading03Icon,\n  Search01Icon,\n  Tick02Icon,\n  UnfoldMoreIcon,\n} from \"@hugeicons/core-free-icons\"\nimport { HugeiconsIcon, type HugeiconsProps, type IconSvgElement } from \"@hugeicons/react\"\nimport type { ComponentType } from \"react\"\n\nexport type IconProps = Omit<HugeiconsProps, \"icon\" | \"altIcon\" | \"showAlt\">\nexport type IconComponent = ComponentType<IconProps>\n\n/**\n * Internal, non-exported icon helper. The package deliberately ships no public icon registry\n * (icon choice is product-specific and lives in each consuming app); this file only carries the\n * handful of structural glyphs the package's own components render. It lives in `lib/` rather\n * than `components/` so the `\"./*\": \"./dist/components/*\"` wildcard export never exposes it.\n *\n * Wraps a Hugeicons definition as a plain icon component, so call sites render `<CheckIcon />`.\n * Sizes to `1em` so a `size-*` class or the surrounding font size drives it.\n */\nfunction icon(def: IconSvgElement, name: string): IconComponent {\n  function Icon(props: IconProps) {\n    return <HugeiconsIcon icon={def} size=\"1em\" strokeWidth={1.75} {...props} />\n  }\n\n  Icon.displayName = name\n\n  return Icon\n}\n\nexport const CheckIcon = icon(Tick02Icon, \"CheckIcon\")\nexport const ChevronDownIcon = icon(ArrowDown01Icon, \"ChevronDownIcon\")\nexport const ChevronLeftIcon = icon(ArrowLeft01Icon, \"ChevronLeftIcon\")\nexport const ChevronRightIcon = icon(ArrowRight01Icon, \"ChevronRightIcon\")\nexport const ChevronUpIcon = icon(ArrowUp01Icon, \"ChevronUpIcon\")\nexport const ChevronsUpDownIcon = icon(UnfoldMoreIcon, \"ChevronsUpDownIcon\")\nexport const CircleCheckIcon = icon(CheckmarkCircle02Icon, \"CircleCheckIcon\")\nexport const CircleHelpIcon = icon(HelpCircleIcon, \"CircleHelpIcon\")\nexport const CircleIcon = icon(CircleDef, \"CircleIcon\")\nexport const CircleXIcon = icon(CancelCircleIcon, \"CircleXIcon\")\nexport const CopyIcon = icon(Copy01Icon, \"CopyIcon\")\nexport const LoaderIcon = icon(Loading03Icon, \"LoaderIcon\")\nexport const SearchIcon = icon(Search01Icon, \"SearchIcon\")\nexport const XIcon = icon(Cancel01Icon, \"XIcon\")\n"],"mappings":";;;;;;;;;;;;;AA+BA,SAAS,KAAK,KAAqB,MAA6B;CAC9D,SAAS,KAAK,OAAkB;EAC9B,OAAO,oBAAC,eAAD;GAAe,MAAM;GAAK,MAAK;GAAM,aAAa;GAAM,GAAI;EAAQ,CAAA;CAC7E;CAEA,KAAK,cAAc;CAEnB,OAAO;AACT;AAEA,MAAa,YAAY,KAAK,YAAY,WAAW;AACrD,MAAa,kBAAkB,KAAK,iBAAiB,iBAAiB;AACtE,MAAa,kBAAkB,KAAK,iBAAiB,iBAAiB;AACtE,MAAa,mBAAmB,KAAK,kBAAkB,kBAAkB;AACzE,MAAa,gBAAgB,KAAK,eAAe,eAAe;AAChE,MAAa,qBAAqB,KAAK,gBAAgB,oBAAoB;AAC3E,MAAa,kBAAkB,KAAK,uBAAuB,iBAAiB;AAC5E,MAAa,iBAAiB,KAAK,gBAAgB,gBAAgB;AACnE,MAAa,aAAa,KAAKA,cAAW,YAAY;AACtD,MAAa,cAAc,KAAK,kBAAkB,aAAa;AAC/D,MAAa,WAAW,KAAK,YAAY,UAAU;AACnD,MAAa,aAAa,KAAK,eAAe,YAAY;AAC1D,MAAa,aAAa,KAAK,cAAc,YAAY;AACzD,MAAa,QAAQ,KAAK,cAAc,OAAO"}

package/dist/lib/interactive.d.ts

@@ -0,0 +1,41 @@
+//#region src/lib/interactive.d.ts
+/**
+ * The hover and focus treatment every interactive surface shares (buttons, inputs, select
+ * triggers, switches, tabs): a soft 3px outline, plus a stronger border on surfaces that draw
+ * one (`bordered`). Borderless surfaces keep a transparent border of the same width, so
+ * nothing shifts between states. Components layer their own colors on top with `cn`, which
+ * resolves conflicting utilities in order, so no `!important` is needed.
+ */
+export declare const interactiveVariants: import("tailwind-variants").TVReturnType<{
+  hover: {
+    true: "not-disabled:cursor-pointer hover:not-disabled:outline-[3px] hover:not-disabled:outline-border/50";
+  };
+  focus: {
+    true: "focus-visible:outline-[3px] focus-visible:outline-border/50";
+  };
+  bordered: {
+    true: "border-border";
+  };
+}, undefined, "border border-transparent outline-transparent", {
+  hover: {
+    true: "not-disabled:cursor-pointer hover:not-disabled:outline-[3px] hover:not-disabled:outline-border/50";
+  };
+  focus: {
+    true: "focus-visible:outline-[3px] focus-visible:outline-border/50";
+  };
+  bordered: {
+    true: "border-border";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  hover: {
+    true: "not-disabled:cursor-pointer hover:not-disabled:outline-[3px] hover:not-disabled:outline-border/50";
+  };
+  focus: {
+    true: "focus-visible:outline-[3px] focus-visible:outline-border/50";
+  };
+  bordered: {
+    true: "border-border";
+  };
+}, undefined>>;
+//#endregion
+//# sourceMappingURL=interactive.d.ts.map

package/dist/lib/interactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive.d.ts","names":[],"sources":["../../src/lib/interactive.ts"],"mappings":";;;;;;;;qBASa,iDAAmB"}

package/dist/lib/interactive.js

@@ -0,0 +1,30 @@
+import { variants } from "./variants.js";
+//#region src/lib/interactive.ts
+/**
+* The hover and focus treatment every interactive surface shares (buttons, inputs, select
+* triggers, switches, tabs): a soft 3px outline, plus a stronger border on surfaces that draw
+* one (`bordered`). Borderless surfaces keep a transparent border of the same width, so
+* nothing shifts between states. Components layer their own colors on top with `cn`, which
+* resolves conflicting utilities in order, so no `!important` is needed.
+*/
+const interactiveVariants = variants({
+	base: "border border-transparent outline-transparent",
+	variants: {
+		hover: { true: "not-disabled:cursor-pointer hover:not-disabled:outline-[3px] hover:not-disabled:outline-border/50" },
+		focus: { true: "focus-visible:outline-[3px] focus-visible:outline-border/50" },
+		bordered: { true: "border-border" }
+	},
+	compoundVariants: [{
+		hover: true,
+		bordered: true,
+		class: "hover:not-disabled:border-ring"
+	}, {
+		focus: true,
+		bordered: true,
+		class: "focus-visible:border-ring"
+	}]
+});
+//#endregion
+export { interactiveVariants };
+
+//# sourceMappingURL=interactive.js.map

package/dist/lib/interactive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive.js","names":[],"sources":["../../src/lib/interactive.ts"],"sourcesContent":["import { variants } from \"~/lib/variants\"\n\n/**\n * The hover and focus treatment every interactive surface shares (buttons, inputs, select\n * triggers, switches, tabs): a soft 3px outline, plus a stronger border on surfaces that draw\n * one (`bordered`). Borderless surfaces keep a transparent border of the same width, so\n * nothing shifts between states. Components layer their own colors on top with `cn`, which\n * resolves conflicting utilities in order, so no `!important` is needed.\n */\nexport const interactiveVariants = variants({\n  base: \"border border-transparent outline-transparent\",\n\n  variants: {\n    hover: {\n      true: \"not-disabled:cursor-pointer hover:not-disabled:outline-[3px] hover:not-disabled:outline-border/50\",\n    },\n    focus: {\n      true: \"focus-visible:outline-[3px] focus-visible:outline-border/50\",\n    },\n    bordered: {\n      true: \"border-border\",\n    },\n  },\n\n  compoundVariants: [\n    { hover: true, bordered: true, class: \"hover:not-disabled:border-ring\" },\n    { focus: true, bordered: true, class: \"focus-visible:border-ring\" },\n  ],\n})\n"],"mappings":";;;;;;;;;AASA,MAAa,sBAAsB,SAAS;CAC1C,MAAM;CAEN,UAAU;EACR,OAAO,EACL,MAAM,oGACR;EACA,OAAO,EACL,MAAM,8DACR;EACA,UAAU,EACR,MAAM,gBACR;CACF;CAEA,kBAAkB,CAChB;EAAE,OAAO;EAAM,UAAU;EAAM,OAAO;CAAiC,GACvE;EAAE,OAAO;EAAM,UAAU;EAAM,OAAO;CAA4B,CACpE;AACF,CAAC"}

package/dist/lib/slot.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+//#region src/lib/slot.d.ts
+/**
+ * Merges props onto a React element without adding a wrapper DOM node.
+ * Uses Base UI's `mergeProps` for type-safe className concatenation,
+ * event handler composition, and style merging.
+ *
+ * Returns the element as-is if it's not a valid React element (null, undefined, text).
+ */
+export declare function slot(element: ReactNode, props: Record<string, unknown>): ReactNode;
+//#endregion
+//# sourceMappingURL=slot.d.ts.map

package/dist/lib/slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","names":[],"sources":["../../src/lib/slot.ts"],"mappings":";;;;;;;;;wBAUgB,KAAK,SAAS,WAAW,OAAO,0BAA0B"}

package/dist/lib/slot.js

@@ -0,0 +1,19 @@
+import { mergeProps } from "@base-ui/react";
+import { cloneElement, isValidElement } from "react";
+//#region src/lib/slot.ts
+/**
+* Merges props onto a React element without adding a wrapper DOM node.
+* Uses Base UI's `mergeProps` for type-safe className concatenation,
+* event handler composition, and style merging.
+*
+* Returns the element as-is if it's not a valid React element (null, undefined, text).
+*/
+function slot(element, props) {
+	if (!isValidElement(element)) return element;
+	const el = element;
+	return cloneElement(el, mergeProps(props, el.props));
+}
+//#endregion
+export { slot };
+
+//# sourceMappingURL=slot.js.map

package/dist/lib/slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.js","names":[],"sources":["../../src/lib/slot.ts"],"sourcesContent":["import { mergeProps } from \"@base-ui/react\"\nimport { cloneElement, isValidElement, type ReactElement, type ReactNode } from \"react\"\n\n/**\n * Merges props onto a React element without adding a wrapper DOM node.\n * Uses Base UI's `mergeProps` for type-safe className concatenation,\n * event handler composition, and style merging.\n *\n * Returns the element as-is if it's not a valid React element (null, undefined, text).\n */\nexport function slot(element: ReactNode, props: Record<string, unknown>): ReactNode {\n  if (!isValidElement(element)) {\n    return element\n  }\n\n  const el = element as ReactElement<Record<string, unknown>>\n\n  return cloneElement(el, mergeProps(props, el.props))\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,KAAK,SAAoB,OAA2C;CAClF,IAAI,CAAC,eAAe,OAAO,GACzB,OAAO;CAGT,MAAM,KAAK;CAEX,OAAO,aAAa,IAAI,WAAW,OAAO,GAAG,KAAK,CAAC;AACrD"}

package/dist/lib/variants.d.ts

@@ -0,0 +1,3 @@
+import { cn } from "cn";
+import { VariantProps, tv as variants } from "tailwind-variants";
+export { type VariantProps, cn, variants };

package/dist/lib/variants.js

@@ -0,0 +1,3 @@
+import { cn } from "cn";
+import { tv as variants } from "tailwind-variants";
+export { cn, variants };

package/dist/styles.css

@@ -0,0 +1,169 @@
+@plugin "tailwindcss-animate";
+
+/*
+ * Scan this library's own source for utility classes. `@source` resolves relative to
+ * THIS stylesheet, so the same directive works in both consumption modes:
+ *   - built:  node_modules/@dirstack/ui/dist/styles.css scans the sibling dist folder (.js)
+ *   - source: @dirstack/ui/src/styles.css scans the sibling src folder (.ts, .tsx)
+ * Either way the class names baked into the components (bg-background,
+ * text-muted-foreground, the popover animation utilities, etc.) get generated.
+ * The consuming app still owns the `@import "tailwindcss"` in its own entry.
+ */
+@source "./";
+
+/*
+ * Every color is a `light-dark()` pair, resolved by the element's `color-scheme`: unset
+ * follows the OS, `[data-theme="dark"|"light"]` forces one (see the base layer below).
+ * One declaration per token, no duplicated palette. The token set mirrors shadcn/ui
+ * (background … sidebar-ring, chart-1…5) so app themes port over unchanged; the
+ * success/warning/danger trios are this library's additions.
+ */
+@theme {
+  --system-font:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+
+  --color-background: light-dark(oklch(0.985 0.001 106.423), oklch(0.147 0.004 49.25));
+  --color-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+  --color-card: light-dark(oklch(1 0 0), oklch(0.216 0.006 56.043));
+  --color-card-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+  --color-popover: light-dark(oklch(1 0 0), oklch(0.216 0.006 56.043));
+  --color-popover-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+  --color-primary: light-dark(oklch(0.205 0 0), oklch(0.97 0.001 106.424));
+  --color-primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --color-secondary: light-dark(oklch(0.97 0.001 106.424), oklch(0.268 0.007 34.298));
+  --color-secondary-foreground: light-dark(oklch(0.371 0 0), oklch(0.985 0 0));
+  --color-muted: light-dark(oklch(0.97 0.001 106.424), oklch(0.268 0.007 34.298));
+  --color-muted-foreground: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
+  --color-accent: light-dark(oklch(0.97 0.001 106.424), oklch(0.268 0.007 34.298));
+  --color-accent-foreground: light-dark(oklch(0.371 0 0), oklch(0.985 0 0));
+  --color-destructive: light-dark(oklch(0.545 0.167 25.73), oklch(0.704 0.191 22.216));
+
+  /*
+   * Status tones, this library's addition to the shadcn set (`danger` mirrors `destructive`).
+   * Each is a trio: the solid (dots, filled chips, toasts),
+   * `-foreground` for text on the page canvas (>= 4.5:1 there — amber-600
+   * only reaches 3.19:1, hence amber-700), and `-subtle` for tinted fills.
+   */
+  --color-success: oklch(0.627 0.194 149.214);
+  --color-success-foreground: light-dark(oklch(0.527 0.154 150.069), oklch(0.792 0.209 151.711));
+  --color-success-subtle: light-dark(
+    oklch(0.527 0.154 150.069 / 5%),
+    oklch(0.871 0.15 154.449 / 10%)
+  );
+  --color-warning: oklch(0.769 0.188 70.08);
+  --color-warning-foreground: light-dark(oklch(0.555 0.163 48.998), oklch(0.828 0.189 84.429));
+  --color-warning-subtle: light-dark(
+    oklch(0.555 0.163 48.998 / 5%),
+    oklch(0.879 0.169 91.605 / 10%)
+  );
+  --color-danger: light-dark(oklch(0.545 0.167 25.73), oklch(0.704 0.191 22.216));
+  --color-danger-foreground: light-dark(oklch(0.505 0.213 27.518), oklch(0.704 0.191 22.216));
+  --color-danger-subtle: light-dark(
+    oklch(0.505 0.213 27.518 / 5%),
+    oklch(0.808 0.114 19.571 / 10%)
+  );
+
+  --color-border: light-dark(oklch(0.923 0.003 48.717), oklch(1 0 0 / 8%));
+  --color-input: light-dark(oklch(0.869 0.005 56.366), oklch(1 0 0 / 14%));
+  --color-ring: light-dark(oklch(0.869 0.005 56.366), oklch(1 0 0 / 18%));
+
+  /* Categorical chart palette: five hues far enough apart to read as different series. */
+  --color-chart-1: light-dark(oklch(0.52 0.11 245), oklch(0.68 0.13 245));
+  --color-chart-2: light-dark(oklch(0.6 0.14 160), oklch(0.72 0.15 160));
+  --color-chart-3: light-dark(oklch(0.7 0.15 70), oklch(0.8 0.16 75));
+  --color-chart-4: light-dark(oklch(0.55 0.15 300), oklch(0.7 0.15 300));
+  --color-chart-5: light-dark(oklch(0.58 0.17 25), oklch(0.7 0.17 25));
+
+  /* Sidebar surface, mirrored from the shadcn set so app themes can restyle it on its own. */
+  --color-sidebar: light-dark(oklch(0.985 0.001 106.423), oklch(0.147 0.004 49.25));
+  --color-sidebar-foreground: light-dark(oklch(0.205 0 0), oklch(0.985 0 0));
+  --color-sidebar-primary: light-dark(oklch(0.205 0 0), oklch(0.97 0.001 106.424));
+  --color-sidebar-primary-foreground: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
+  --color-sidebar-accent: light-dark(oklch(0.97 0.001 106.424), oklch(0.268 0.007 34.298));
+  --color-sidebar-accent-foreground: light-dark(oklch(0.371 0 0), oklch(0.985 0 0));
+  --color-sidebar-border: light-dark(oklch(0.923 0.003 48.717), oklch(1 0 0 / 8%));
+  --color-sidebar-ring: light-dark(oklch(0.869 0.005 56.366), oklch(1 0 0 / 18%));
+
+  --tracking-micro: -0.0125em;
+
+  /*
+   * The text of a default control: buttons, inputs, select triggers, menu items, tabs,
+   * toasts. Spelled as `text-control` so the number lives in one place.
+   */
+  --text-control: 0.8125rem;
+  --text-control--line-height: 1.25;
+
+  /*
+   * The height of a default control: an `md` Button, a segmented Tabs track, and the
+   * skeletons that stand in for either. Spelled as `h-control` / `min-h-control` so the
+   * number lives in one place.
+   */
+  --spacing-control: 34px;
+
+  --font-sans: "Inter Variable", var(--system-font);
+  --font-display: "Inter Variable", var(--system-font);
+  --font-mono: monospace;
+
+  /* The one motion curve: popups, tab pills, number spins, chart draws, step bars. */
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+
+  --animate-fill-bar: fill-bar 0.5s var(--ease-out-expo);
+
+  @keyframes fill-bar {
+    from {
+      transform: scaleX(0);
+    }
+    to {
+      transform: scaleX(1);
+    }
+  }
+}
+
+/*
+ * Base helpers the components depend on to render correctly. Kept minimal on purpose; the
+ * consuming app still supplies the global reset, fonts, and `@import "tailwindcss"`.
+ */
+@layer base {
+  /* Theme switch: unset follows the OS, `data-theme` forces one. Drives every `light-dark()`. */
+  :root {
+    color-scheme: light dark;
+  }
+
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  /* Tailwind v4 defaults `border` to currentColor; the components expect the hairline token. */
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
+  }
+
+  /* Dashed background used by the Dialog backdrop and the dashed empty state. */
+  .bg-dashed {
+    background-image: linear-gradient(
+      45deg,
+      var(--color-border) 12.5%,
+      transparent 12.5%,
+      transparent 50%,
+      var(--color-border) 50%,
+      var(--color-border) 62.5%,
+      transparent 62.5%,
+      transparent 100%
+    );
+    background-color: color-mix(in oklch, var(--color-foreground), transparent 90%);
+    background-size: 0.25rem 0.25rem;
+  }
+}
+
+/* Default every icon to 1em unless the call site sets an explicit size. */
+svg[aria-label*="Icon"]:not([class*="size-"]):not([class*="h-"]) {
+  @apply size-[1em]!;
+}

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@dirstack/ui",
+  "description": "A shared React component library",
+  "keywords": [
+    "components",
+    "design-system",
+    "react",
+    "tailwind",
+    "ui"
+  ],
+  "homepage": "https://github.com/dirstack/ui#readme",
+  "bugs": "https://github.com/dirstack/ui/issues",
+  "license": "MIT",
+  "author": {
+    "name": "Piotr Kulpinski",
+    "email": "piotr@kulpinski.pl",
+    "url": "https://kulpinski.pl"
+  },
+  "repository": "git+https://github.com/dirstack/ui.git",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "./styles.css": "./dist/styles.css",
+    "./variants": {
+      "types": "./dist/lib/variants.d.ts",
+      "default": "./dist/lib/variants.js"
+    },
+    "./classes": {
+      "types": "./dist/lib/classes.d.ts",
+      "default": "./dist/lib/classes.js"
+    },
+    "./interactive": {
+      "types": "./dist/lib/interactive.d.ts",
+      "default": "./dist/lib/interactive.js"
+    },
+    "./slot": {
+      "types": "./dist/lib/slot.d.ts",
+      "default": "./dist/lib/slot.js"
+    },
+    "./*": {
+      "types": "./dist/components/*.d.ts",
+      "default": "./dist/components/*.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "prebuild": "bun run clean",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "sandbox": "cosmos",
+    "sandbox:build": "cosmos-export",
+    "test": "bun test",
+    "typecheck": "tsc --noEmit",
+    "lint": "oxlint --fix .",
+    "format": "oxfmt --write .",
+    "prepare": "lefthook install"
+  },
+  "dependencies": {
+    "@hugeicons/core-free-icons": "^4.3.0",
+    "@hugeicons/react": "^1.1.10",
+    "@number-flow/react": "^0.6.1",
+    "cn": "^0.2.4",
+    "recharts": "^3.9.2",
+    "sonner": "^2.0.8",
+    "tailwind-variants": "^3.2.2"
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.7.0",
+    "@commitlint/cli": "^20.4.2",
+    "@commitlint/config-conventional": "^20.4.2",
+    "@dirstack/kodeks": "1.1.2",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/bun": "^1.2.21",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.2.0",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
+    "lefthook": "^2.1.1",
+    "oxfmt": "^0.44.0",
+    "oxlint": "^1.59.0",
+    "react": "^19.2.7",
+    "react-cosmos": "^7.4.1",
+    "react-cosmos-plugin-vite": "^7.4.0",
+    "react-dom": "^19.2.7",
+    "react-hook-form": "^7.87.0",
+    "rimraf": "^6.0.1",
+    "semantic-release": "^25.0.3",
+    "tailwindcss": "^4.1.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tsdown": "^0.23.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.6"
+  },
+  "peerDependencies": {
+    "@base-ui/react": ">=1",
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-hook-form": ">=7",
+    "tailwindcss": ">=4",
+    "tailwindcss-animate": ">=1"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "version": "1.0.0"
+}