@karakuri-ui/react 0.2.2 → 0.2.4

package/dist/components/ui/divider.d.mts

@@ -0,0 +1,27 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "solid" | "dashed" | "dotted" | null | undefined;
+    color?: "default" | "strong" | "muted" | null | undefined;
+    spacing?: "default" | "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DividerProps extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {
+    /** Direction of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Line style */
+    variant?: 'solid' | 'dashed' | 'dotted';
+    /** Line color intensity */
+    color?: 'default' | 'muted' | 'strong';
+    /** Spacing around the divider */
+    spacing?: 'sm' | 'md' | 'default' | 'lg';
+    /** Content to display on the divider line (horizontal only) */
+    label?: React.ReactNode;
+    /** Label position along the line */
+    labelPosition?: 'left' | 'center' | 'right';
+}
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Divider, type DividerProps, dividerVariants };

package/dist/components/ui/divider.d.ts

@@ -0,0 +1,27 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "solid" | "dashed" | "dotted" | null | undefined;
+    color?: "default" | "strong" | "muted" | null | undefined;
+    spacing?: "default" | "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface DividerProps extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {
+    /** Direction of the divider */
+    orientation?: 'horizontal' | 'vertical';
+    /** Line style */
+    variant?: 'solid' | 'dashed' | 'dotted';
+    /** Line color intensity */
+    color?: 'default' | 'muted' | 'strong';
+    /** Spacing around the divider */
+    spacing?: 'sm' | 'md' | 'default' | 'lg';
+    /** Content to display on the divider line (horizontal only) */
+    label?: React.ReactNode;
+    /** Label position along the line */
+    labelPosition?: 'left' | 'center' | 'right';
+}
+declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Divider, type DividerProps, dividerVariants };

package/dist/components/ui/divider.js

@@ -0,0 +1,147 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var divider_exports = {};
+__export(divider_exports, {
+  Divider: () => Divider,
+  dividerVariants: () => dividerVariants
+});
+module.exports = __toCommonJS(divider_exports);
+var React = __toESM(require("react"));
+var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"));
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const dividerVariants = (0, import_class_variance_authority.cva)("shrink-0", {
+  variants: {
+    orientation: {
+      horizontal: "w-full",
+      vertical: "h-full self-stretch"
+    },
+    variant: {
+      solid: "border-solid",
+      dashed: "border-dashed",
+      dotted: "border-dotted"
+    },
+    color: {
+      default: "border-border-subtle",
+      muted: "border-border-subtle",
+      strong: "border-border-strong"
+    },
+    spacing: {
+      sm: "",
+      md: "",
+      default: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    // Horizontal spacing
+    { orientation: "horizontal", spacing: "sm", className: "my-2" },
+    { orientation: "horizontal", spacing: "md", className: "my-3" },
+    { orientation: "horizontal", spacing: "default", className: "my-4" },
+    { orientation: "horizontal", spacing: "lg", className: "my-8" },
+    // Vertical spacing
+    { orientation: "vertical", spacing: "sm", className: "mx-2" },
+    { orientation: "vertical", spacing: "md", className: "mx-3" },
+    { orientation: "vertical", spacing: "default", className: "mx-4" },
+    { orientation: "vertical", spacing: "lg", className: "mx-8" },
+    // Horizontal line style (border-top)
+    { orientation: "horizontal", className: "border-t border-l-0" },
+    // Vertical line style (border-left)
+    { orientation: "vertical", className: "border-l border-t-0" }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid",
+    color: "default",
+    spacing: "default"
+  }
+});
+const Divider = React.forwardRef(({
+  className,
+  orientation = "horizontal",
+  variant = "solid",
+  color = "default",
+  spacing = "default",
+  label,
+  labelPosition = "center",
+  decorative = true,
+  ...props
+}, ref) => {
+  const lineClass = (0, import_utils.cn)(
+    "flex-1",
+    variant === "dashed" ? "border-dashed" : variant === "dotted" ? "border-dotted" : "border-solid",
+    color === "muted" ? "border-border-subtle" : color === "strong" ? "border-border-strong" : "border-border-subtle",
+    "border-t"
+  );
+  const spacingClass = spacing === "sm" ? "my-2" : spacing === "md" ? "my-3" : spacing === "lg" ? "my-8" : "my-4";
+  if (label && orientation === "horizontal") {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: decorative ? "none" : "separator",
+        "aria-orientation": "horizontal",
+        className: (0, import_utils.cn)(
+          "flex items-center w-full",
+          spacingClass,
+          className
+        )
+      },
+      /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
+        lineClass,
+        labelPosition === "left" ? "max-w-[10%]" : ""
+      ) }),
+      /* @__PURE__ */ React.createElement("span", { className: "px-3 text-sm text-text-muted shrink-0 select-none" }, label),
+      /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)(
+        lineClass,
+        labelPosition === "right" ? "max-w-[10%]" : ""
+      ) })
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: (0, import_utils.cn)(
+        dividerVariants({ orientation, variant, color, spacing }),
+        className
+      ),
+      ...props
+    }
+  );
+});
+Divider.displayName = "Divider";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Divider,
+  dividerVariants
+});
+//# sourceMappingURL=divider.js.map

package/dist/components/ui/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/divider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Divider ─────────────────────────────────────────────────\n\nconst dividerVariants = cva('shrink-0', {\n  variants: {\n    orientation: {\n      horizontal: 'w-full',\n      vertical: 'h-full self-stretch',\n    },\n    variant: {\n      solid: 'border-solid',\n      dashed: 'border-dashed',\n      dotted: 'border-dotted',\n    },\n    color: {\n      default: 'border-border-subtle',\n      muted: 'border-border-subtle',\n      strong: 'border-border-strong',\n    },\n    spacing: {\n      sm: '',\n      md: '',\n      default: '',\n      lg: '',\n    },\n  },\n  compoundVariants: [\n    // Horizontal spacing\n    { orientation: 'horizontal', spacing: 'sm', className: 'my-2' },\n    { orientation: 'horizontal', spacing: 'md', className: 'my-3' },\n    { orientation: 'horizontal', spacing: 'default', className: 'my-4' },\n    { orientation: 'horizontal', spacing: 'lg', className: 'my-8' },\n    // Vertical spacing\n    { orientation: 'vertical', spacing: 'sm', className: 'mx-2' },\n    { orientation: 'vertical', spacing: 'md', className: 'mx-3' },\n    { orientation: 'vertical', spacing: 'default', className: 'mx-4' },\n    { orientation: 'vertical', spacing: 'lg', className: 'mx-8' },\n    // Horizontal line style (border-top)\n    { orientation: 'horizontal', className: 'border-t border-l-0' },\n    // Vertical line style (border-left)\n    { orientation: 'vertical', className: 'border-l border-t-0' },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    variant: 'solid',\n    color: 'default',\n    spacing: 'default',\n  },\n})\n\nexport interface DividerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {\n  /** Direction of the divider */\n  orientation?: 'horizontal' | 'vertical'\n  /** Line style */\n  variant?: 'solid' | 'dashed' | 'dotted'\n  /** Line color intensity */\n  color?: 'default' | 'muted' | 'strong'\n  /** Spacing around the divider */\n  spacing?: 'sm' | 'md' | 'default' | 'lg'\n  /** Content to display on the divider line (horizontal only) */\n  label?: React.ReactNode\n  /** Label position along the line */\n  labelPosition?: 'left' | 'center' | 'right'\n}\n\nconst Divider = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  DividerProps\n>(({\n  className,\n  orientation = 'horizontal',\n  variant = 'solid',\n  color = 'default',\n  spacing = 'default',\n  label,\n  labelPosition = 'center',\n  decorative = true,\n  ...props\n}, ref) => {\n  // Line style class for label mode\n  const lineClass = cn(\n    'flex-1',\n    variant === 'dashed' ? 'border-dashed' : variant === 'dotted' ? 'border-dotted' : 'border-solid',\n    color === 'muted' ? 'border-border-subtle' : color === 'strong' ? 'border-border-strong' : 'border-border-subtle',\n    'border-t'\n  )\n\n  // Spacing class for label wrapper\n  const spacingClass =\n    spacing === 'sm' ? 'my-2'\n    : spacing === 'md' ? 'my-3'\n    : spacing === 'lg' ? 'my-8'\n    : 'my-4'\n\n  // Horizontal with label: render as flex container with two lines\n  if (label && orientation === 'horizontal') {\n    return (\n      <div\n        role={decorative ? 'none' : 'separator'}\n        aria-orientation=\"horizontal\"\n        className={cn(\n          'flex items-center w-full',\n          spacingClass,\n          className\n        )}\n      >\n        <div className={cn(\n          lineClass,\n          labelPosition === 'left' ? 'max-w-[10%]' : ''\n        )} />\n        <span className=\"px-3 text-sm text-text-muted shrink-0 select-none\">{label}</span>\n        <div className={cn(\n          lineClass,\n          labelPosition === 'right' ? 'max-w-[10%]' : ''\n        )} />\n      </div>\n    )\n  }\n\n  // Default: Radix Separator\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        dividerVariants({ orientation, variant, color, spacing }),\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDivider.displayName = 'Divider'\n\n// ─── Exports ─────────────────────────────────────────────────\n\nexport { Divider, dividerVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,yBAAoC;AACpC,sCAAuC;AACvC,mBAAmB;AAInB,MAAM,sBAAkB,qCAAI,YAAY;AAAA,EACtC,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA;AAAA,IAEhB,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA,IAC9D,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA,IAC9D,EAAE,aAAa,cAAc,SAAS,WAAW,WAAW,OAAO;AAAA,IACnE,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA;AAAA,IAE9D,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA,IAC5D,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA,IAC5D,EAAE,aAAa,YAAY,SAAS,WAAW,WAAW,OAAO;AAAA,IACjE,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA;AAAA,IAE5D,EAAE,aAAa,cAAc,WAAW,sBAAsB;AAAA;AAAA,IAE9D,EAAE,aAAa,YAAY,WAAW,sBAAsB;AAAA,EAC9D;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF,CAAC;AAkBD,MAAM,UAAU,MAAM,WAGpB,CAAC;AAAA,EACD;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,GAAG,QAAQ;AAET,QAAM,gBAAY;AAAA,IAChB;AAAA,IACA,YAAY,WAAW,kBAAkB,YAAY,WAAW,kBAAkB;AAAA,IAClF,UAAU,UAAU,yBAAyB,UAAU,WAAW,yBAAyB;AAAA,IAC3F;AAAA,EACF;AAGA,QAAM,eACJ,YAAY,OAAO,SACjB,YAAY,OAAO,SACnB,YAAY,OAAO,SACnB;AAGJ,MAAI,SAAS,gBAAgB,cAAc;AACzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,aAAa,SAAS;AAAA,QAC5B,oBAAiB;AAAA,QACjB,eAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEA,oCAAC,SAAI,eAAW;AAAA,QACd;AAAA,QACA,kBAAkB,SAAS,gBAAgB;AAAA,MAC7C,GAAG;AAAA,MACH,oCAAC,UAAK,WAAU,uDAAqD,KAAM;AAAA,MAC3E,oCAAC,SAAI,eAAW;AAAA,QACd;AAAA,QACA,kBAAkB,UAAU,gBAAgB;AAAA,MAC9C,GAAG;AAAA,IACL;AAAA,EAEJ;AAGA,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAW;AAAA,QACT,gBAAgB,EAAE,aAAa,SAAS,OAAO,QAAQ,CAAC;AAAA,QACxD;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,QAAQ,cAAc;","names":[]}

package/dist/components/ui/divider.mjs

@@ -0,0 +1,112 @@
+"use client";
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const dividerVariants = cva("shrink-0", {
+  variants: {
+    orientation: {
+      horizontal: "w-full",
+      vertical: "h-full self-stretch"
+    },
+    variant: {
+      solid: "border-solid",
+      dashed: "border-dashed",
+      dotted: "border-dotted"
+    },
+    color: {
+      default: "border-border-subtle",
+      muted: "border-border-subtle",
+      strong: "border-border-strong"
+    },
+    spacing: {
+      sm: "",
+      md: "",
+      default: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    // Horizontal spacing
+    { orientation: "horizontal", spacing: "sm", className: "my-2" },
+    { orientation: "horizontal", spacing: "md", className: "my-3" },
+    { orientation: "horizontal", spacing: "default", className: "my-4" },
+    { orientation: "horizontal", spacing: "lg", className: "my-8" },
+    // Vertical spacing
+    { orientation: "vertical", spacing: "sm", className: "mx-2" },
+    { orientation: "vertical", spacing: "md", className: "mx-3" },
+    { orientation: "vertical", spacing: "default", className: "mx-4" },
+    { orientation: "vertical", spacing: "lg", className: "mx-8" },
+    // Horizontal line style (border-top)
+    { orientation: "horizontal", className: "border-t border-l-0" },
+    // Vertical line style (border-left)
+    { orientation: "vertical", className: "border-l border-t-0" }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid",
+    color: "default",
+    spacing: "default"
+  }
+});
+const Divider = React.forwardRef(({
+  className,
+  orientation = "horizontal",
+  variant = "solid",
+  color = "default",
+  spacing = "default",
+  label,
+  labelPosition = "center",
+  decorative = true,
+  ...props
+}, ref) => {
+  const lineClass = cn(
+    "flex-1",
+    variant === "dashed" ? "border-dashed" : variant === "dotted" ? "border-dotted" : "border-solid",
+    color === "muted" ? "border-border-subtle" : color === "strong" ? "border-border-strong" : "border-border-subtle",
+    "border-t"
+  );
+  const spacingClass = spacing === "sm" ? "my-2" : spacing === "md" ? "my-3" : spacing === "lg" ? "my-8" : "my-4";
+  if (label && orientation === "horizontal") {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: decorative ? "none" : "separator",
+        "aria-orientation": "horizontal",
+        className: cn(
+          "flex items-center w-full",
+          spacingClass,
+          className
+        )
+      },
+      /* @__PURE__ */ React.createElement("div", { className: cn(
+        lineClass,
+        labelPosition === "left" ? "max-w-[10%]" : ""
+      ) }),
+      /* @__PURE__ */ React.createElement("span", { className: "px-3 text-sm text-text-muted shrink-0 select-none" }, label),
+      /* @__PURE__ */ React.createElement("div", { className: cn(
+        lineClass,
+        labelPosition === "right" ? "max-w-[10%]" : ""
+      ) })
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        dividerVariants({ orientation, variant, color, spacing }),
+        className
+      ),
+      ...props
+    }
+  );
+});
+Divider.displayName = "Divider";
+export {
+  Divider,
+  dividerVariants
+};
+//# sourceMappingURL=divider.mjs.map

package/dist/components/ui/divider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/divider.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as SeparatorPrimitive from '@radix-ui/react-separator'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Divider ─────────────────────────────────────────────────\n\nconst dividerVariants = cva('shrink-0', {\n  variants: {\n    orientation: {\n      horizontal: 'w-full',\n      vertical: 'h-full self-stretch',\n    },\n    variant: {\n      solid: 'border-solid',\n      dashed: 'border-dashed',\n      dotted: 'border-dotted',\n    },\n    color: {\n      default: 'border-border-subtle',\n      muted: 'border-border-subtle',\n      strong: 'border-border-strong',\n    },\n    spacing: {\n      sm: '',\n      md: '',\n      default: '',\n      lg: '',\n    },\n  },\n  compoundVariants: [\n    // Horizontal spacing\n    { orientation: 'horizontal', spacing: 'sm', className: 'my-2' },\n    { orientation: 'horizontal', spacing: 'md', className: 'my-3' },\n    { orientation: 'horizontal', spacing: 'default', className: 'my-4' },\n    { orientation: 'horizontal', spacing: 'lg', className: 'my-8' },\n    // Vertical spacing\n    { orientation: 'vertical', spacing: 'sm', className: 'mx-2' },\n    { orientation: 'vertical', spacing: 'md', className: 'mx-3' },\n    { orientation: 'vertical', spacing: 'default', className: 'mx-4' },\n    { orientation: 'vertical', spacing: 'lg', className: 'mx-8' },\n    // Horizontal line style (border-top)\n    { orientation: 'horizontal', className: 'border-t border-l-0' },\n    // Vertical line style (border-left)\n    { orientation: 'vertical', className: 'border-l border-t-0' },\n  ],\n  defaultVariants: {\n    orientation: 'horizontal',\n    variant: 'solid',\n    color: 'default',\n    spacing: 'default',\n  },\n})\n\nexport interface DividerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {\n  /** Direction of the divider */\n  orientation?: 'horizontal' | 'vertical'\n  /** Line style */\n  variant?: 'solid' | 'dashed' | 'dotted'\n  /** Line color intensity */\n  color?: 'default' | 'muted' | 'strong'\n  /** Spacing around the divider */\n  spacing?: 'sm' | 'md' | 'default' | 'lg'\n  /** Content to display on the divider line (horizontal only) */\n  label?: React.ReactNode\n  /** Label position along the line */\n  labelPosition?: 'left' | 'center' | 'right'\n}\n\nconst Divider = React.forwardRef<\n  React.ElementRef<typeof SeparatorPrimitive.Root>,\n  DividerProps\n>(({\n  className,\n  orientation = 'horizontal',\n  variant = 'solid',\n  color = 'default',\n  spacing = 'default',\n  label,\n  labelPosition = 'center',\n  decorative = true,\n  ...props\n}, ref) => {\n  // Line style class for label mode\n  const lineClass = cn(\n    'flex-1',\n    variant === 'dashed' ? 'border-dashed' : variant === 'dotted' ? 'border-dotted' : 'border-solid',\n    color === 'muted' ? 'border-border-subtle' : color === 'strong' ? 'border-border-strong' : 'border-border-subtle',\n    'border-t'\n  )\n\n  // Spacing class for label wrapper\n  const spacingClass =\n    spacing === 'sm' ? 'my-2'\n    : spacing === 'md' ? 'my-3'\n    : spacing === 'lg' ? 'my-8'\n    : 'my-4'\n\n  // Horizontal with label: render as flex container with two lines\n  if (label && orientation === 'horizontal') {\n    return (\n      <div\n        role={decorative ? 'none' : 'separator'}\n        aria-orientation=\"horizontal\"\n        className={cn(\n          'flex items-center w-full',\n          spacingClass,\n          className\n        )}\n      >\n        <div className={cn(\n          lineClass,\n          labelPosition === 'left' ? 'max-w-[10%]' : ''\n        )} />\n        <span className=\"px-3 text-sm text-text-muted shrink-0 select-none\">{label}</span>\n        <div className={cn(\n          lineClass,\n          labelPosition === 'right' ? 'max-w-[10%]' : ''\n        )} />\n      </div>\n    )\n  }\n\n  // Default: Radix Separator\n  return (\n    <SeparatorPrimitive.Root\n      ref={ref}\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        dividerVariants({ orientation, variant, color, spacing }),\n        className\n      )}\n      {...props}\n    />\n  )\n})\nDivider.displayName = 'Divider'\n\n// ─── Exports ─────────────────────────────────────────────────\n\nexport { Divider, dividerVariants }\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,YAAY,wBAAwB;AACpC,SAAS,WAA8B;AACvC,SAAS,UAAU;AAInB,MAAM,kBAAkB,IAAI,YAAY;AAAA,EACtC,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IACA,SAAS;AAAA,MACP,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA;AAAA,IAEhB,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA,IAC9D,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA,IAC9D,EAAE,aAAa,cAAc,SAAS,WAAW,WAAW,OAAO;AAAA,IACnE,EAAE,aAAa,cAAc,SAAS,MAAM,WAAW,OAAO;AAAA;AAAA,IAE9D,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA,IAC5D,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA,IAC5D,EAAE,aAAa,YAAY,SAAS,WAAW,WAAW,OAAO;AAAA,IACjE,EAAE,aAAa,YAAY,SAAS,MAAM,WAAW,OAAO;AAAA;AAAA,IAE5D,EAAE,aAAa,cAAc,WAAW,sBAAsB;AAAA;AAAA,IAE9D,EAAE,aAAa,YAAY,WAAW,sBAAsB;AAAA,EAC9D;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,EACX;AACF,CAAC;AAkBD,MAAM,UAAU,MAAM,WAGpB,CAAC;AAAA,EACD;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,GAAG,QAAQ;AAET,QAAM,YAAY;AAAA,IAChB;AAAA,IACA,YAAY,WAAW,kBAAkB,YAAY,WAAW,kBAAkB;AAAA,IAClF,UAAU,UAAU,yBAAyB,UAAU,WAAW,yBAAyB;AAAA,IAC3F;AAAA,EACF;AAGA,QAAM,eACJ,YAAY,OAAO,SACjB,YAAY,OAAO,SACnB,YAAY,OAAO,SACnB;AAGJ,MAAI,SAAS,gBAAgB,cAAc;AACzC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,aAAa,SAAS;AAAA,QAC5B,oBAAiB;AAAA,QACjB,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEA,oCAAC,SAAI,WAAW;AAAA,QACd;AAAA,QACA,kBAAkB,SAAS,gBAAgB;AAAA,MAC7C,GAAG;AAAA,MACH,oCAAC,UAAK,WAAU,uDAAqD,KAAM;AAAA,MAC3E,oCAAC,SAAI,WAAW;AAAA,QACd;AAAA,QACA,kBAAkB,UAAU,gBAAgB;AAAA,MAC9C,GAAG;AAAA,IACL;AAAA,EAEJ;AAGA,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,gBAAgB,EAAE,aAAa,SAAS,OAAO,QAAQ,CAAC;AAAA,QACxD;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,QAAQ,cAAc;","names":[]}

package/dist/components/ui/drawer.d.mts

@@ -0,0 +1,51 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+declare const drawerSizeHorizontal: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const drawerSizeVertical: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function DrawerRoot(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DrawerContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {
+    /** Side from which the drawer slides in */
+    side?: DrawerSide;
+    /** Panel size (width for left/right, height for top/bottom) */
+    size?: DrawerSize;
+    /** Show built-in close button */
+    showCloseButton?: boolean;
+    /** Custom close icon (replaces default X) */
+    closeIcon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Drawer: typeof DrawerRoot & {
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: React.FC<DialogPrimitive.DialogPortalProps>;
+    Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+};
+declare namespace Drawer {
+    type ContentProps = DrawerContentProps;
+}
+
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerRoot, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, drawerSizeHorizontal, drawerSizeVertical };

package/dist/components/ui/drawer.d.ts

@@ -0,0 +1,51 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
+type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+declare const drawerSizeHorizontal: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const drawerSizeVertical: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function DrawerRoot(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): React.JSX.Element;
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DrawerContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'children'> {
+    /** Side from which the drawer slides in */
+    side?: DrawerSide;
+    /** Panel size (width for left/right, height for top/bottom) */
+    size?: DrawerSize;
+    /** Show built-in close button */
+    showCloseButton?: boolean;
+    /** Custom close icon (replaces default X) */
+    closeIcon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const DrawerFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Drawer: typeof DrawerRoot & {
+    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Portal: React.FC<DialogPrimitive.DialogPortalProps>;
+    Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Body: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+};
+declare namespace Drawer {
+    type ContentProps = DrawerContentProps;
+}
+
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerRoot, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, drawerSizeHorizontal, drawerSizeVertical };