@karakuri-ui/react 0.2.2 → 0.2.4

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,209 @@
+"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 breadcrumb_exports = {};
+__export(breadcrumb_exports, {
+  Breadcrumb: () => Breadcrumb,
+  BreadcrumbEllipsis: () => BreadcrumbEllipsis,
+  BreadcrumbItem: () => BreadcrumbItem,
+  BreadcrumbLink: () => BreadcrumbLink,
+  BreadcrumbList: () => BreadcrumbList,
+  BreadcrumbPage: () => BreadcrumbPage,
+  BreadcrumbSeparator: () => BreadcrumbSeparator,
+  breadcrumbSizeMap: () => breadcrumbSizeMap
+});
+module.exports = __toCommonJS(breadcrumb_exports);
+var React = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_utils = require("../../lib/utils");
+const BreadcrumbContext = React.createContext({});
+const useBreadcrumbContext = () => React.useContext(BreadcrumbContext);
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2
+    },
+    /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+  );
+}
+function EllipsisIcon({ className }) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      viewBox: "0 0 24 24"
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "6", cy: "12", r: "1.5" }),
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "1.5" }),
+    /* @__PURE__ */ React.createElement("circle", { cx: "18", cy: "12", r: "1.5" })
+  );
+}
+const breadcrumbSizeMap = {
+  sm: { text: "text-xs", icon: "icon-xs", gap: "gap-1.5" },
+  default: { text: "text-sm", icon: "icon-xs", gap: "gap-2" },
+  lg: { text: "text-md", icon: "icon-sm", gap: "gap-2" }
+};
+const BreadcrumbRoot = React.forwardRef(
+  ({ className, separator, size = "default", ...props }, ref) => /* @__PURE__ */ React.createElement(BreadcrumbContext.Provider, { value: { size, separator } }, /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      "aria-label": "breadcrumb",
+      className: (0, import_utils.cn)("", className),
+      ...props
+    }
+  ))
+);
+BreadcrumbRoot.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size = "default" } = useBreadcrumbContext();
+    const sizeClass = breadcrumbSizeMap[size];
+    return /* @__PURE__ */ React.createElement(
+      "ol",
+      {
+        ref,
+        className: (0, import_utils.cn)(
+          "flex flex-wrap items-center",
+          sizeClass.gap,
+          sizeClass.text,
+          "text-text-muted",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      ref,
+      className: (0, import_utils.cn)("inline-flex items-center gap-1.5", className),
+      ...props
+    }
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "a";
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        ref,
+        className: (0, import_utils.cn)(
+          "transition-colors duration-fast hover:text-foreground",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref,
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: (0, import_utils.cn)("text-foreground", className),
+      ...props
+    }
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { separator, size = "default" } = useBreadcrumbContext();
+    const sizeClass = breadcrumbSizeMap[size];
+    return /* @__PURE__ */ React.createElement(
+      "li",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        className: (0, import_utils.cn)("flex items-center text-text-subtle", className),
+        ...props
+      },
+      children ?? separator ?? /* @__PURE__ */ React.createElement(ChevronRightIcon, { className: sizeClass.icon })
+    );
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size = "default" } = useBreadcrumbContext();
+    const sizeClass = breadcrumbSizeMap[size];
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        className: (0, import_utils.cn)("flex items-center justify-center", className),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(EllipsisIcon, { className: sizeClass.icon }),
+      /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "More")
+    );
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+const Breadcrumb = Object.assign(BreadcrumbRoot, {
+  List: BreadcrumbList,
+  Item: BreadcrumbItem,
+  Link: BreadcrumbLink,
+  Page: BreadcrumbPage,
+  Separator: BreadcrumbSeparator,
+  Ellipsis: BreadcrumbEllipsis
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  breadcrumbSizeMap
+});
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n  size?: 'sm' | 'default' | 'lg'\n  separator?: React.ReactNode\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n    >\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n    </svg>\n  )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n  sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n  default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n  lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n  /** Separator element between items */\n  separator?: React.ReactNode\n  /** Size of the breadcrumb */\n  size?: 'sm' | 'default' | 'lg'\n  /** Max items before collapsing (undefined = no collapse) */\n  maxItems?: number\n  /** Items visible before the ellipsis when collapsed */\n  itemsBeforeCollapse?: number\n  /** Items visible after the ellipsis when collapsed */\n  itemsAfterCollapse?: number\n}\n\nconst BreadcrumbRoot = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ className, separator, size = 'default', ...props }, ref) => (\n    <BreadcrumbContext.Provider value={{ size, separator }}>\n      <nav\n        ref={ref}\n        aria-label=\"breadcrumb\"\n        className={cn('', className)}\n        {...props}\n      />\n    </BreadcrumbContext.Provider>\n  )\n)\nBreadcrumbRoot.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n  ({ className, ...props }, ref) => {\n    const { size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <ol\n        ref={ref}\n        className={cn(\n          'flex flex-wrap items-center',\n          sizeClass.gap,\n          sizeClass.text,\n          'text-text-muted',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    />\n  )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  /** Use Radix Slot to compose with custom link components */\n  asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild, className, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'a'\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          'transition-colors duration-fast hover:text-foreground',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn('text-foreground', className)}\n      {...props}\n    />\n  )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ children, className, ...props }, ref) => {\n    const { separator, size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex items-center text-text-subtle', className)}\n        {...props}\n      >\n        {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n      </li>\n    )\n  }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n  ({ className, ...props }, ref) => {\n    const { size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <span\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex items-center justify-center', className)}\n        {...props}\n      >\n        <EllipsisIcon className={sizeClass.icon} />\n        <span className=\"sr-only\">More</span>\n      </span>\n    )\n  }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Exports ──────────────────────────────────────────────\n\n// ─── Namespace ──────────────────────────────────────────\nconst Breadcrumb = Object.assign(BreadcrumbRoot, {\n  List: BreadcrumbList,\n  Item: BreadcrumbItem,\n  Link: BreadcrumbLink,\n  Page: BreadcrumbPage,\n  Separator: BreadcrumbSeparator,\n  Ellipsis: BreadcrumbEllipsis,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Breadcrumb {\n  export type LinkProps = BreadcrumbLinkProps\n  export type EllipsisProps = BreadcrumbEllipsisProps\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n  breadcrumbSizeMap,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/breadcrumb.mjs

@@ -0,0 +1,168 @@
+"use client";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/utils";
+const BreadcrumbContext = React.createContext({});
+const useBreadcrumbContext = () => React.useContext(BreadcrumbContext);
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      className,
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      strokeWidth: 2
+    },
+    /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+  );
+}
+function EllipsisIcon({ className }) {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      className,
+      fill: "currentColor",
+      viewBox: "0 0 24 24"
+    },
+    /* @__PURE__ */ React.createElement("circle", { cx: "6", cy: "12", r: "1.5" }),
+    /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "1.5" }),
+    /* @__PURE__ */ React.createElement("circle", { cx: "18", cy: "12", r: "1.5" })
+  );
+}
+const breadcrumbSizeMap = {
+  sm: { text: "text-xs", icon: "icon-xs", gap: "gap-1.5" },
+  default: { text: "text-sm", icon: "icon-xs", gap: "gap-2" },
+  lg: { text: "text-md", icon: "icon-sm", gap: "gap-2" }
+};
+const BreadcrumbRoot = React.forwardRef(
+  ({ className, separator, size = "default", ...props }, ref) => /* @__PURE__ */ React.createElement(BreadcrumbContext.Provider, { value: { size, separator } }, /* @__PURE__ */ React.createElement(
+    "nav",
+    {
+      ref,
+      "aria-label": "breadcrumb",
+      className: cn("", className),
+      ...props
+    }
+  ))
+);
+BreadcrumbRoot.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size = "default" } = useBreadcrumbContext();
+    const sizeClass = breadcrumbSizeMap[size];
+    return /* @__PURE__ */ React.createElement(
+      "ol",
+      {
+        ref,
+        className: cn(
+          "flex flex-wrap items-center",
+          sizeClass.gap,
+          sizeClass.text,
+          "text-text-muted",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      ref,
+      className: cn("inline-flex items-center gap-1.5", className),
+      ...props
+    }
+  )
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(
+  ({ asChild, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "transition-colors duration-fast hover:text-foreground",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref,
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("text-foreground", className),
+      ...props
+    }
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { separator, size = "default" } = useBreadcrumbContext();
+    const sizeClass = breadcrumbSizeMap[size];
+    return /* @__PURE__ */ React.createElement(
+      "li",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn("flex items-center text-text-subtle", className),
+        ...props
+      },
+      children ?? separator ?? /* @__PURE__ */ React.createElement(ChevronRightIcon, { className: sizeClass.icon })
+    );
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { size = "default" } = useBreadcrumbContext();
+    const sizeClass = breadcrumbSizeMap[size];
+    return /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn("flex items-center justify-center", className),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(EllipsisIcon, { className: sizeClass.icon }),
+      /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "More")
+    );
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+const Breadcrumb = Object.assign(BreadcrumbRoot, {
+  List: BreadcrumbList,
+  Item: BreadcrumbItem,
+  Link: BreadcrumbLink,
+  Page: BreadcrumbPage,
+  Separator: BreadcrumbSeparator,
+  Ellipsis: BreadcrumbEllipsis
+});
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  breadcrumbSizeMap
+};
+//# sourceMappingURL=breadcrumb.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Context ──────────────────────────────────────────────\n\ntype BreadcrumbContextValue = {\n  size?: 'sm' | 'default' | 'lg'\n  separator?: React.ReactNode\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\nconst useBreadcrumbContext = () => React.useContext(BreadcrumbContext)\n\n// ─── Default Separator Icon ───────────────────────────────\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n    >\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n    </svg>\n  )\n}\n\n// ─── Ellipsis Icon ────────────────────────────────────────\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      fill=\"currentColor\"\n      viewBox=\"0 0 24 24\"\n    >\n      <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n      <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n    </svg>\n  )\n}\n\n// ─── Breadcrumb (Root) ────────────────────────────────────\n\nconst breadcrumbSizeMap = {\n  sm: { text: 'text-xs', icon: 'icon-xs', gap: 'gap-1.5' },\n  default: { text: 'text-sm', icon: 'icon-xs', gap: 'gap-2' },\n  lg: { text: 'text-md', icon: 'icon-sm', gap: 'gap-2' },\n} as const\n\nexport interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {\n  /** Separator element between items */\n  separator?: React.ReactNode\n  /** Size of the breadcrumb */\n  size?: 'sm' | 'default' | 'lg'\n  /** Max items before collapsing (undefined = no collapse) */\n  maxItems?: number\n  /** Items visible before the ellipsis when collapsed */\n  itemsBeforeCollapse?: number\n  /** Items visible after the ellipsis when collapsed */\n  itemsAfterCollapse?: number\n}\n\nconst BreadcrumbRoot = React.forwardRef<HTMLElement, BreadcrumbProps>(\n  ({ className, separator, size = 'default', ...props }, ref) => (\n    <BreadcrumbContext.Provider value={{ size, separator }}>\n      <nav\n        ref={ref}\n        aria-label=\"breadcrumb\"\n        className={cn('', className)}\n        {...props}\n      />\n    </BreadcrumbContext.Provider>\n  )\n)\nBreadcrumbRoot.displayName = 'Breadcrumb'\n\n// ─── BreadcrumbList ───────────────────────────────────────\n\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(\n  ({ className, ...props }, ref) => {\n    const { size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <ol\n        ref={ref}\n        className={cn(\n          'flex flex-wrap items-center',\n          sizeClass.gap,\n          sizeClass.text,\n          'text-text-muted',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ─── BreadcrumbItem ───────────────────────────────────────\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ className, ...props }, ref) => (\n    <li\n      ref={ref}\n      className={cn('inline-flex items-center gap-1.5', className)}\n      {...props}\n    />\n  )\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ─── BreadcrumbLink ───────────────────────────────────────\n\nexport interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  /** Use Radix Slot to compose with custom link components */\n  asChild?: boolean\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild, className, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'a'\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          'transition-colors duration-fast hover:text-foreground',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ─── BreadcrumbPage ───────────────────────────────────────\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n  ({ className, ...props }, ref) => (\n    <span\n      ref={ref}\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn('text-foreground', className)}\n      {...props}\n    />\n  )\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ─── BreadcrumbSeparator ──────────────────────────────────\n\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n  ({ children, className, ...props }, ref) => {\n    const { separator, size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex items-center text-text-subtle', className)}\n        {...props}\n      >\n        {children ?? separator ?? <ChevronRightIcon className={sizeClass.icon} />}\n      </li>\n    )\n  }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ─── BreadcrumbEllipsis ───────────────────────────────────\n\nexport interface BreadcrumbEllipsisProps extends React.ComponentPropsWithoutRef<'span'> {}\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisProps>(\n  ({ className, ...props }, ref) => {\n    const { size = 'default' } = useBreadcrumbContext()\n    const sizeClass = breadcrumbSizeMap[size]\n    return (\n      <span\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn('flex items-center justify-center', className)}\n        {...props}\n      >\n        <EllipsisIcon className={sizeClass.icon} />\n        <span className=\"sr-only\">More</span>\n      </span>\n    )\n  }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\n// ─── Exports ──────────────────────────────────────────────\n\n// ─── Namespace ──────────────────────────────────────────\nconst Breadcrumb = Object.assign(BreadcrumbRoot, {\n  List: BreadcrumbList,\n  Item: BreadcrumbItem,\n  Link: BreadcrumbLink,\n  Page: BreadcrumbPage,\n  Separator: BreadcrumbSeparator,\n  Ellipsis: BreadcrumbEllipsis,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Breadcrumb {\n  export type LinkProps = BreadcrumbLinkProps\n  export type EllipsisProps = BreadcrumbEllipsisProps\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n  breadcrumbSizeMap,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/button-group.d.mts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+type ButtonGroupContextValue = {
+    variant?: 'outline' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'default' | 'lg';
+    radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    fontWeight?: 'normal' | 'semibold';
+    disabled?: boolean;
+};
+declare function useButtonGroup(): ButtonGroupContextValue | null;
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+    attached?: boolean;
+    variant?: 'outline' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'default' | 'lg';
+    radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    fontWeight?: 'normal' | 'semibold';
+    disabled?: boolean;
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ButtonGroup, type ButtonGroupProps, useButtonGroup };

package/dist/components/ui/button-group.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+type ButtonGroupContextValue = {
+    variant?: 'outline' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'default' | 'lg';
+    radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    fontWeight?: 'normal' | 'semibold';
+    disabled?: boolean;
+};
+declare function useButtonGroup(): ButtonGroupContextValue | null;
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+    attached?: boolean;
+    variant?: 'outline' | 'ghost';
+    size?: 'xs' | 'sm' | 'md' | 'default' | 'lg';
+    radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    fontWeight?: 'normal' | 'semibold';
+    disabled?: boolean;
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ButtonGroup, type ButtonGroupProps, useButtonGroup };

package/dist/components/ui/button-group.js

@@ -0,0 +1,107 @@
+"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 button_group_exports = {};
+__export(button_group_exports, {
+  ButtonGroup: () => ButtonGroup,
+  useButtonGroup: () => useButtonGroup
+});
+module.exports = __toCommonJS(button_group_exports);
+var React = __toESM(require("react"));
+var import_utils = require("../../lib/utils");
+const ButtonGroupContext = React.createContext(null);
+function useButtonGroup() {
+  return React.useContext(ButtonGroupContext);
+}
+const ButtonGroup = React.forwardRef(
+  ({
+    className,
+    orientation = "horizontal",
+    attached = true,
+    variant,
+    size,
+    radius,
+    fontWeight,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const contextValue = React.useMemo(() => ({
+      variant,
+      size,
+      radius,
+      fontWeight,
+      disabled
+    }), [variant, size, radius, fontWeight, disabled]);
+    return /* @__PURE__ */ React.createElement(ButtonGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: (0, import_utils.cn)(
+          "inline-flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          // Attached mode: use negative margin to overlap borders, raise z-index on hover/focus
+          attached && orientation === "horizontal" && [
+            "[&>*:not(:first-child)]:rounded-l-none",
+            "[&>*:not(:last-child)]:rounded-r-none",
+            "[&>*:not(:first-child)]:-ml-px",
+            "[&>*]:relative",
+            "[&>*:hover]:z-10",
+            "[&>*:focus-visible]:z-10",
+            "[&>*:active]:scale-none",
+            "[&>*:hover]:border-border-form"
+          ],
+          attached && orientation === "vertical" && [
+            "[&>*:not(:first-child)]:rounded-t-none",
+            "[&>*:not(:last-child)]:rounded-b-none",
+            "[&>*:not(:first-child)]:-mt-px",
+            "[&>*]:relative",
+            "[&>*]:w-full",
+            "[&>*:hover]:z-10",
+            "[&>*:focus-visible]:z-10",
+            "[&>*:active]:scale-none",
+            "[&>*:hover]:border-border-form"
+          ],
+          !attached && "gap-2",
+          className
+        ),
+        ...props
+      },
+      children
+    ));
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ButtonGroup,
+  useButtonGroup
+});
+//# sourceMappingURL=button-group.js.map

package/dist/components/ui/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../../lib/utils'\n\n// ButtonGroup Context\ntype ButtonGroupContextValue = {\n  variant?: 'outline' | 'ghost'\n  size?: 'xs' | 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n  fontWeight?: 'normal' | 'semibold'\n  disabled?: boolean\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  variant?: 'outline' | 'ghost'\n  size?: 'xs' | 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n  fontWeight?: 'normal' | 'semibold'\n  disabled?: boolean\n}\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({\n    className,\n    orientation = 'horizontal',\n    attached = true,\n    variant,\n    size,\n    radius,\n    fontWeight,\n    disabled,\n    children,\n    ...props\n  }, ref) => {\n    const contextValue = React.useMemo(() => ({\n      variant,\n      size,\n      radius,\n      fontWeight,\n      disabled,\n    }), [variant, size, radius, fontWeight, disabled])\n\n    return (\n      <ButtonGroupContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row',\n            // Attached mode: use negative margin to overlap borders, raise z-index on hover/focus\n            attached && orientation === 'horizontal' && [\n              '[&>*:not(:first-child)]:rounded-l-none',\n              '[&>*:not(:last-child)]:rounded-r-none',\n              '[&>*:not(:first-child)]:-ml-px',\n              '[&>*]:relative',\n              '[&>*:hover]:z-10',\n              '[&>*:focus-visible]:z-10',\n              '[&>*:active]:scale-none',\n              '[&>*:hover]:border-border-form',\n            ],\n            attached && orientation === 'vertical' && [\n              '[&>*:not(:first-child)]:rounded-t-none',\n              '[&>*:not(:last-child)]:rounded-b-none',\n              '[&>*:not(:first-child)]:-mt-px',\n              '[&>*]:relative',\n              '[&>*]:w-full',\n              '[&>*:hover]:z-10',\n              '[&>*:focus-visible]:z-10',\n              '[&>*:active]:scale-none',\n              '[&>*:hover]:border-border-form',\n            ],\n            !attached && 'gap-2',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  }\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,mBAAmB;AAWnB,MAAM,qBAAqB,MAAM,cAA8C,IAAI;AAE5E,SAAS,iBAAiB;AAC/B,SAAO,MAAM,WAAW,kBAAkB;AAC5C;AAYA,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC;AAAA,IACC;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,UAAM,eAAe,MAAM,QAAQ,OAAO;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,CAAC,SAAS,MAAM,QAAQ,YAAY,QAAQ,CAAC;AAEjD,WACE,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,gBAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAW;AAAA,UACT;AAAA,UACA,gBAAgB,aAAa,aAAa;AAAA;AAAA,UAE1C,YAAY,gBAAgB,gBAAgB;AAAA,YAC1C;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,YAAY,gBAAgB,cAAc;AAAA,YACxC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,CAAC,YAAY;AAAA,UACb;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}

package/dist/components/ui/button-group.mjs

@@ -0,0 +1,72 @@
+"use client";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+const ButtonGroupContext = React.createContext(null);
+function useButtonGroup() {
+  return React.useContext(ButtonGroupContext);
+}
+const ButtonGroup = React.forwardRef(
+  ({
+    className,
+    orientation = "horizontal",
+    attached = true,
+    variant,
+    size,
+    radius,
+    fontWeight,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const contextValue = React.useMemo(() => ({
+      variant,
+      size,
+      radius,
+      fontWeight,
+      disabled
+    }), [variant, size, radius, fontWeight, disabled]);
+    return /* @__PURE__ */ React.createElement(ButtonGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          "inline-flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          // Attached mode: use negative margin to overlap borders, raise z-index on hover/focus
+          attached && orientation === "horizontal" && [
+            "[&>*:not(:first-child)]:rounded-l-none",
+            "[&>*:not(:last-child)]:rounded-r-none",
+            "[&>*:not(:first-child)]:-ml-px",
+            "[&>*]:relative",
+            "[&>*:hover]:z-10",
+            "[&>*:focus-visible]:z-10",
+            "[&>*:active]:scale-none",
+            "[&>*:hover]:border-border-form"
+          ],
+          attached && orientation === "vertical" && [
+            "[&>*:not(:first-child)]:rounded-t-none",
+            "[&>*:not(:last-child)]:rounded-b-none",
+            "[&>*:not(:first-child)]:-mt-px",
+            "[&>*]:relative",
+            "[&>*]:w-full",
+            "[&>*:hover]:z-10",
+            "[&>*:focus-visible]:z-10",
+            "[&>*:active]:scale-none",
+            "[&>*:hover]:border-border-form"
+          ],
+          !attached && "gap-2",
+          className
+        ),
+        ...props
+      },
+      children
+    ));
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+export {
+  ButtonGroup,
+  useButtonGroup
+};
+//# sourceMappingURL=button-group.mjs.map