@omnifyjp/ui 0.5.3 → 1.0.1

package/dist/chunk-7IRLBU2I.js

@@ -0,0 +1,114 @@
+import { buttonVariants } from './chunk-55E7D2HR.js';
+import { cn } from './chunk-DGPY4WP3.js';
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Pagination({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function PaginationContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: cn("flex flex-row items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({ ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size
+        }),
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to previous page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Previous" })
+      ]
+    }
+  );
+}
+function PaginationNext({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to next page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      ]
+    }
+  );
+}
+function PaginationEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+//# sourceMappingURL=chunk-7IRLBU2I.js.map
+//# sourceMappingURL=chunk-7IRLBU2I.js.map

package/dist/chunk-7IRLBU2I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/pagination.tsx"],"names":[],"mappings":"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","file":"chunk-7IRLBU2I.js","sourcesContent":["import * as React from \"react\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  MoreHorizontalIcon,\n} from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\nimport { Button, buttonVariants } from \"./button\";\n\n/**\n * Page navigation component with numbered links, previous/next buttons, and ellipsis indicators.\n *\n * Renders as a `<nav>` with `aria-label=\"pagination\"` for accessibility.\n * Compose with `PaginationContent`, `PaginationItem`, `PaginationLink`,\n * `PaginationPrevious`, `PaginationNext`, and `PaginationEllipsis`.\n *\n * @example\n * ```tsx\n * <Pagination>\n *   <PaginationContent>\n *     <PaginationItem>\n *       <PaginationPrevious href=\"#\" />\n *     </PaginationItem>\n *     <PaginationItem>\n *       <PaginationLink href=\"#\" isActive>1</PaginationLink>\n *     </PaginationItem>\n *     <PaginationItem>\n *       <PaginationLink href=\"#\">2</PaginationLink>\n *     </PaginationItem>\n *     <PaginationItem>\n *       <PaginationEllipsis />\n *     </PaginationItem>\n *     <PaginationItem>\n *       <PaginationLink href=\"#\">10</PaginationLink>\n *     </PaginationItem>\n *     <PaginationItem>\n *       <PaginationNext href=\"#\" />\n *     </PaginationItem>\n *   </PaginationContent>\n * </Pagination>\n * ```\n */\nfunction Pagination({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      role=\"navigation\"\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn(\"mx-auto flex w-full justify-center\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Flex container for pagination items. Renders as a `<ul>`. */\nfunction PaginationContent({\n  className,\n  ...props\n}: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"pagination-content\"\n      className={cn(\"flex flex-row items-center gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n/** List item wrapper for a single pagination element. */\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n  return <li data-slot=\"pagination-item\" {...props} />;\n}\n\ntype PaginationLinkProps = {\n  /** When true, renders the link with an `outline` variant and `aria-current=\"page\"`. */\n  isActive?: boolean;\n} & Pick<React.ComponentProps<typeof Button>, \"size\"> &\n  React.ComponentProps<\"a\">;\n\n/** Styled pagination link using button variants. Supports `isActive` for the current page. */\nfunction PaginationLink({\n  className,\n  isActive,\n  size = \"icon\",\n  ...props\n}: PaginationLinkProps) {\n  return (\n    <a\n      aria-current={isActive ? \"page\" : undefined}\n      data-slot=\"pagination-link\"\n      data-active={isActive}\n      className={cn(\n        buttonVariants({\n          variant: isActive ? \"outline\" : \"ghost\",\n          size,\n        }),\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** \"Previous\" pagination link with a left chevron icon. */\nfunction PaginationPrevious({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pl-2.5\", className)}\n      {...props}\n    >\n      <ChevronLeftIcon />\n      <span className=\"hidden sm:block\">Previous</span>\n    </PaginationLink>\n  );\n}\n\n/** \"Next\" pagination link with a right chevron icon. */\nfunction PaginationNext({\n  className,\n  ...props\n}: React.ComponentProps<typeof PaginationLink>) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size=\"default\"\n      className={cn(\"gap-1 px-2.5 sm:pr-2.5\", className)}\n      {...props}\n    >\n      <span className=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </PaginationLink>\n  );\n}\n\n/** Ellipsis indicator for omitted page numbers. Renders a `MoreHorizontal` icon with screen-reader text. */\nfunction PaginationEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontalIcon className=\"size-4\" />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  );\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationLink,\n  PaginationItem,\n  PaginationPrevious,\n  PaginationNext,\n  PaginationEllipsis,\n};\n"]}

package/dist/chunk-7RMTPT6O.js

@@ -0,0 +1,99 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Breadcrumb({ ...props }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn("inline-flex items-center gap-1.5", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "breadcrumb-link",
+      className: cn("hover:text-foreground transition-colors", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("text-foreground font-normal", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+    }
+  );
+}
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };
+//# sourceMappingURL=chunk-7RMTPT6O.js.map
+//# sourceMappingURL=chunk-7RMTPT6O.js.map

package/dist/chunk-7RMTPT6O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/breadcrumb.tsx"],"names":[],"mappings":";;;;;AAgCA,SAAS,UAAA,CAAW,EAAE,GAAG,KAAA,EAAM,EAAgC;AAC7D,EAAA,2BAAQ,KAAA,EAAA,EAAI,YAAA,EAAW,cAAa,WAAA,EAAU,YAAA,EAAc,GAAG,KAAA,EAAO,CAAA;AACxE;AAGA,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AAC3E,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,0FAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAGA,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAA+B;AAC3E,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,kCAAA,EAAoC,SAAS,CAAA;AAAA,MAC1D,GAAG;AAAA;AAAA,GACN;AAEJ;AAOA,SAAS,cAAA,CAAe;AAAA,EACtB,OAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEG;AACD,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,GAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG;AAAA;AAAA,GACN;AAEJ;AAGA,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAiC;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,IAAA,EAAK,MAAA;AAAA,MACL,eAAA,EAAc,MAAA;AAAA,MACd,cAAA,EAAa,MAAA;AAAA,MACb,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,MACrD,GAAG;AAAA;AAAA,GACN;AAEJ;AAGA,SAAS,mBAAA,CAAoB;AAAA,EAC3B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA+B;AAC7B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,sBAAA;AAAA,MACV,IAAA,EAAK,cAAA;AAAA,MACL,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,SAAS,CAAA;AAAA,MAC1C,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA,wBAAa,YAAA,EAAA,EAAa;AAAA;AAAA,GAC7B;AAEJ;AAGA,SAAS,kBAAA,CAAmB;AAAA,EAC1B,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiC;AAC/B,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,qBAAA;AAAA,MACV,IAAA,EAAK,cAAA;AAAA,MACL,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,WAAU,QAAA,EAAS,CAAA;AAAA,wBACnC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,MAAA,EAAI;AAAA;AAAA;AAAA,GAChC;AAEJ","file":"chunk-7RMTPT6O.js","sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Navigation breadcrumb trail showing the current page hierarchy.\n *\n * Renders as a `<nav>` with `aria-label=\"breadcrumb\"` for accessibility.\n * Use `BreadcrumbSeparator` between items (defaults to a chevron icon)\n * and `BreadcrumbEllipsis` for collapsed intermediate items.\n *\n * @example\n * ```tsx\n * <Breadcrumb>\n *   <BreadcrumbList>\n *     <BreadcrumbItem>\n *       <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbLink href=\"/projects\">Projects</BreadcrumbLink>\n *     </BreadcrumbItem>\n *     <BreadcrumbSeparator />\n *     <BreadcrumbItem>\n *       <BreadcrumbPage>Current Project</BreadcrumbPage>\n *     </BreadcrumbItem>\n *   </BreadcrumbList>\n * </Breadcrumb>\n * ```\n */\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\n/** Ordered list container for breadcrumb items. Handles wrapping and spacing. */\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Individual breadcrumb list item wrapping a link or page indicator. */\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * Clickable breadcrumb link. Set `asChild` to render a custom element (e.g., React Router `Link`).\n *\n * @param asChild - When true, renders the child element instead of an `<a>` tag.\n */\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot : \"a\";\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Non-interactive breadcrumb label for the current page. Rendered with `aria-current=\"page\"`. */\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Visual separator between breadcrumb items. Defaults to a `ChevronRight` icon; pass custom children to override. */\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\n    </li>\n  );\n}\n\n/** Ellipsis indicator for collapsed breadcrumb items. Renders a `MoreHorizontal` icon with screen-reader text. */\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n};\n"]}

package/dist/chunk-7XH3MGBR.js

@@ -0,0 +1,128 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import { Drawer as Drawer$1 } from 'vaul';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Drawer$1.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn("flex flex-col gap-1.5 p-6", className),
+      ...props
+    }
+  );
+}
+function DrawerBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-body",
+      className: cn("flex-1 overflow-y-auto px-6 py-4", className),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-6", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };
+//# sourceMappingURL=chunk-7XH3MGBR.js.map
+//# sourceMappingURL=chunk-7XH3MGBR.js.map

package/dist/chunk-7XH3MGBR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/drawer.tsx"],"names":["DrawerPrimitive"],"mappings":"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","file":"chunk-7XH3MGBR.js","sourcesContent":["import * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"../lib/utils\";\n\n/**\n * Swipeable drawer component built on Vaul.\n *\n * Slides from any edge of the screen and can be dismissed by swiping.\n * Set the `direction` prop on the root to control direction (`\"top\"`, `\"bottom\"`,\n * `\"left\"`, `\"right\"`). Always wrap content in `DrawerBody` for proper scrolling.\n *\n * @example\n * ```tsx\n * <Drawer open={open} onOpenChange={setOpen}>\n *   <DrawerTrigger asChild>\n *     <Button variant=\"outline\">Open Drawer</Button>\n *   </DrawerTrigger>\n *   <DrawerContent>\n *     <DrawerHeader>\n *       <DrawerTitle>Task Details</DrawerTitle>\n *       <DrawerDescription>\n *         View and edit task information.\n *       </DrawerDescription>\n *     </DrawerHeader>\n *     <DrawerBody>\n *       <p>Scrollable content goes here.</p>\n *     </DrawerBody>\n *     <DrawerFooter>\n *       <Button>Save</Button>\n *       <DrawerClose asChild>\n *         <Button variant=\"outline\">Cancel</Button>\n *       </DrawerClose>\n *     </DrawerFooter>\n *   </DrawerContent>\n * </Drawer>\n * ```\n */\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\n/** Element that opens the drawer when clicked. Use `asChild` to merge into your own button. */\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\n/** Portal that renders drawer content outside the DOM hierarchy. */\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\n/** Button that closes the drawer. Use `asChild` to merge into your own button. */\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\n/** Semi-transparent backdrop rendered behind the drawer panel. */\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Drawer content panel that slides in from the configured direction. Includes a drag handle for bottom drawers. */\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\n/** Container for DrawerTitle and DrawerDescription at the top of the drawer. */\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Scrollable body area for drawer content. Always wrap main content in this component. */\nfunction DrawerBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-body\"\n      className={cn(\"flex-1 overflow-y-auto px-6 py-4\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Container for action buttons at the bottom of the drawer. Pushed to the bottom via `mt-auto`. */\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-6\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Accessible title rendered inside DrawerHeader. */\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Accessible description rendered inside DrawerHeader below the title. */\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerBody,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};"]}

package/dist/chunk-A3BB5ZOC.js

@@ -0,0 +1,77 @@
+import { cn } from './chunk-DGPY4WP3.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        // Solid — color applied via compoundVariants
+        default: "",
+        // Legacy — maps to solid + destructive color (backward compatible)
+        destructive: "",
+        // Color-independent
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        // Color-aware — applied via compoundVariants
+        outline: "",
+        soft: ""
+      },
+      color: {
+        primary: "",
+        destructive: "",
+        success: "",
+        warning: "",
+        info: ""
+      }
+    },
+    compoundVariants: [
+      // ── Solid (default variant) × color ──
+      { variant: "default", color: "primary", className: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90" },
+      { variant: "default", color: "destructive", className: "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90" },
+      { variant: "default", color: "success", className: "border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90" },
+      { variant: "default", color: "warning", className: "border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90" },
+      { variant: "default", color: "info", className: "border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90" },
+      // ── Legacy destructive variant (backward compat) ──
+      { variant: "destructive", className: "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90" },
+      // ── Outline × color ──
+      { variant: "outline", color: "primary", className: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground" },
+      { variant: "outline", color: "destructive", className: "border-destructive/50 text-destructive [a&]:hover:bg-destructive/10" },
+      { variant: "outline", color: "success", className: "border-success/50 text-success [a&]:hover:bg-success/10" },
+      { variant: "outline", color: "warning", className: "border-warning/50 text-warning [a&]:hover:bg-warning/10" },
+      { variant: "outline", color: "info", className: "border-info/50 text-info [a&]:hover:bg-info/10" },
+      // ── Soft × color ──
+      { variant: "soft", color: "primary", className: "border-transparent bg-primary/10 text-primary [a&]:hover:bg-primary/20" },
+      { variant: "soft", color: "destructive", className: "border-transparent bg-destructive/10 text-destructive [a&]:hover:bg-destructive/20" },
+      { variant: "soft", color: "success", className: "border-transparent bg-success/10 text-success [a&]:hover:bg-success/20" },
+      { variant: "soft", color: "warning", className: "border-transparent bg-warning/10 text-warning [a&]:hover:bg-warning/20" },
+      { variant: "soft", color: "info", className: "border-transparent bg-info/10 text-info [a&]:hover:bg-info/20" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "primary"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  color,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant, color }), className),
+      ...props
+    }
+  );
+}
+
+export { Badge, badgeVariants };
+//# sourceMappingURL=chunk-A3BB5ZOC.js.map
+//# sourceMappingURL=chunk-A3BB5ZOC.js.map

package/dist/chunk-A3BB5ZOC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/badge.tsx"],"names":[],"mappings":";;;;;AAOA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACpB,gZAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA;AAAA,QAEP,OAAA,EAAS,EAAA;AAAA;AAAA,QAET,WAAA,EAAa,EAAA;AAAA;AAAA,QAEb,SAAA,EACE,sFAAA;AAAA;AAAA,QAEF,OAAA,EAAS,EAAA;AAAA,QACT,IAAA,EAAM;AAAA,OACR;AAAA,MACA,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,EAAA;AAAA,QACT,WAAA,EAAa,EAAA;AAAA,QACb,OAAA,EAAS,EAAA;AAAA,QACT,OAAA,EAAS,EAAA;AAAA,QACT,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA;AAAA,MAEhB,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,SAAA,EAAW,WAAW,gFAAA,EAAiF;AAAA,MACpI,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,aAAA,EAAe,WAAW,4FAAA,EAA6F;AAAA,MACpJ,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,SAAA,EAAW,WAAW,gFAAA,EAAiF;AAAA,MACpI,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,SAAA,EAAW,WAAW,gFAAA,EAAiF;AAAA,MACpI,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,MAAA,EAAQ,WAAW,uEAAA,EAAwE;AAAA;AAAA,MAGxH,EAAE,OAAA,EAAS,aAAA,EAAe,SAAA,EAAW,4FAAA,EAA6F;AAAA;AAAA,MAGlI,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,SAAA,EAAW,WAAW,wEAAA,EAAyE;AAAA,MAC5H,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,aAAA,EAAe,WAAW,qEAAA,EAAsE;AAAA,MAC7H,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,SAAA,EAAW,WAAW,yDAAA,EAA0D;AAAA,MAC7G,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,SAAA,EAAW,WAAW,yDAAA,EAA0D;AAAA,MAC7G,EAAE,OAAA,EAAS,SAAA,EAAW,KAAA,EAAO,MAAA,EAAQ,WAAW,gDAAA,EAAiD;AAAA;AAAA,MAGjG,EAAE,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,WAAW,wEAAA,EAAyE;AAAA,MACzH,EAAE,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,aAAA,EAAe,WAAW,oFAAA,EAAqF;AAAA,MACzI,EAAE,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,WAAW,wEAAA,EAAyE;AAAA,MACzH,EAAE,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,WAAW,wEAAA,EAAyE;AAAA,MACzH,EAAE,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAQ,WAAW,+DAAA;AAAgE,KAC/G;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT;AAEJ;AA4CA,SAAS,KAAA,CAAM;AAAA,EACb,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,MAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,OAAA;AAAA,MACV,SAAA,EAAW,GAAG,aAAA,CAAc,EAAE,SAAS,KAAA,EAAO,GAAG,SAAS,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-A3BB5ZOC.js","sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../lib/utils\";\nimport type { UIColor } from \"../lib/types\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        // Solid — color applied via compoundVariants\n        default: \"\",\n        // Legacy — maps to solid + destructive color (backward compatible)\n        destructive: \"\",\n        // Color-independent\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        // Color-aware — applied via compoundVariants\n        outline: \"\",\n        soft: \"\",\n      },\n      color: {\n        primary: \"\",\n        destructive: \"\",\n        success: \"\",\n        warning: \"\",\n        info: \"\",\n      },\n    },\n    compoundVariants: [\n      // ── Solid (default variant) × color ──\n      { variant: \"default\", color: \"primary\", className: \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\" },\n      { variant: \"default\", color: \"destructive\", className: \"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90\" },\n      { variant: \"default\", color: \"success\", className: \"border-transparent bg-success text-success-foreground [a&]:hover:bg-success/90\" },\n      { variant: \"default\", color: \"warning\", className: \"border-transparent bg-warning text-warning-foreground [a&]:hover:bg-warning/90\" },\n      { variant: \"default\", color: \"info\", className: \"border-transparent bg-info text-info-foreground [a&]:hover:bg-info/90\" },\n\n      // ── Legacy destructive variant (backward compat) ──\n      { variant: \"destructive\", className: \"border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90\" },\n\n      // ── Outline × color ──\n      { variant: \"outline\", color: \"primary\", className: \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\" },\n      { variant: \"outline\", color: \"destructive\", className: \"border-destructive/50 text-destructive [a&]:hover:bg-destructive/10\" },\n      { variant: \"outline\", color: \"success\", className: \"border-success/50 text-success [a&]:hover:bg-success/10\" },\n      { variant: \"outline\", color: \"warning\", className: \"border-warning/50 text-warning [a&]:hover:bg-warning/10\" },\n      { variant: \"outline\", color: \"info\", className: \"border-info/50 text-info [a&]:hover:bg-info/10\" },\n\n      // ── Soft × color ──\n      { variant: \"soft\", color: \"primary\", className: \"border-transparent bg-primary/10 text-primary [a&]:hover:bg-primary/20\" },\n      { variant: \"soft\", color: \"destructive\", className: \"border-transparent bg-destructive/10 text-destructive [a&]:hover:bg-destructive/20\" },\n      { variant: \"soft\", color: \"success\", className: \"border-transparent bg-success/10 text-success [a&]:hover:bg-success/20\" },\n      { variant: \"soft\", color: \"warning\", className: \"border-transparent bg-warning/10 text-warning [a&]:hover:bg-warning/20\" },\n      { variant: \"soft\", color: \"info\", className: \"border-transparent bg-info/10 text-info [a&]:hover:bg-info/20\" },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      color: \"primary\",\n    },\n  },\n);\n\ninterface BadgeProps\n  extends React.ComponentProps<\"span\">,\n    Omit<VariantProps<typeof badgeVariants>, \"color\"> {\n  /**\n   * Semantic color intent.\n   *\n   * @default \"primary\"\n   * @example\n   * ```tsx\n   * <Badge color=\"success\">Done</Badge>\n   * <Badge color=\"warning\">Pending</Badge>\n   * <Badge variant=\"soft\" color=\"destructive\">Failed</Badge>\n   * ```\n   */\n  color?: UIColor;\n  /** Render as a child component using Radix Slot. @default false */\n  asChild?: boolean;\n}\n\n/**\n * Inline status descriptor with semantic colors and visual variants.\n *\n * @example\n * ```tsx\n * // Solid (default)\n * <Badge>New</Badge>\n * <Badge color=\"success\">Done</Badge>\n * <Badge color=\"warning\">Pending</Badge>\n *\n * // Soft (light tinted background)\n * <Badge variant=\"soft\" color=\"success\">Approved</Badge>\n * <Badge variant=\"soft\" color=\"destructive\">Rejected</Badge>\n *\n * // Outline\n * <Badge variant=\"outline\">v1.0.0</Badge>\n * <Badge variant=\"outline\" color=\"info\">Beta</Badge>\n *\n * // Legacy (still works)\n * <Badge variant=\"destructive\">Error</Badge>\n * <Badge variant=\"secondary\">Draft</Badge>\n * ```\n */\nfunction Badge({\n  className,\n  variant,\n  color,\n  asChild = false,\n  ...props\n}: BadgeProps) {\n  const Comp = asChild ? Slot : \"span\";\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant, color }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Badge, badgeVariants };\nexport type { BadgeProps };\n"]}

package/dist/chunk-BAQWGQJG.js

@@ -0,0 +1,106 @@
+import { Badge } from './chunk-A3BB5ZOC.js';
+import { cn } from './chunk-DGPY4WP3.js';
+import { useState } from 'react';
+import { ChevronRight, MapPin, GitBranch, Building2, Globe } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_ICON_MAP = {
+  global: Globe,
+  organization: Building2,
+  branch: GitBranch,
+  location: MapPin
+};
+function getIcon(type, iconMap) {
+  if (iconMap?.[type]) return iconMap[type];
+  return DEFAULT_ICON_MAP[type] ?? Globe;
+}
+function ScopeTree({
+  nodes,
+  selectedScope,
+  onSelect,
+  defaultExpandDepth = 1,
+  iconMap
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "space-y-1", children: nodes.map((node) => /* @__PURE__ */ jsx(
+    ScopeTreeNodeItem,
+    {
+      node,
+      selectedScope,
+      onSelect,
+      depth: 0,
+      defaultExpandDepth,
+      iconMap
+    },
+    `${node.type}-${node.id}`
+  )) });
+}
+function ScopeTreeNodeItem({
+  node,
+  selectedScope,
+  onSelect,
+  depth,
+  defaultExpandDepth,
+  iconMap
+}) {
+  const [open, setOpen] = useState(depth < defaultExpandDepth);
+  const Icon = getIcon(node.type, iconMap);
+  const isSelected = selectedScope?.type === node.type && selectedScope?.id === node.id;
+  const children = node.children ?? [];
+  const hasChildren = children.length > 0;
+  const paddingLeft = depth * 16;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors text-left",
+          isSelected ? "bg-accent text-accent-foreground font-medium" : "hover:bg-accent/50 text-foreground"
+        ),
+        style: { paddingLeft: `${paddingLeft + 12}px` },
+        onClick: () => {
+          onSelect?.({ type: node.type, id: node.id });
+          if (hasChildren) setOpen((prev) => !prev);
+        },
+        children: [
+          hasChildren ? /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: cn(
+                "w-4 h-4 shrink-0 transition-transform",
+                open && "rotate-90"
+              )
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "w-4" }),
+          /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: node.name }),
+          node.badges?.map((badge, i) => /* @__PURE__ */ jsx(
+            Badge,
+            {
+              variant: "outline",
+              className: cn("text-[10px] px-1 py-0", badge.className),
+              children: badge.label
+            },
+            i
+          ))
+        ]
+      }
+    ),
+    open && hasChildren && /* @__PURE__ */ jsx("div", { children: children.map((child) => /* @__PURE__ */ jsx(
+      ScopeTreeNodeItem,
+      {
+        node: child,
+        selectedScope,
+        onSelect,
+        depth: depth + 1,
+        defaultExpandDepth,
+        iconMap
+      },
+      `${child.type}-${child.id}`
+    )) })
+  ] });
+}
+
+export { ScopeTree };
+//# sourceMappingURL=chunk-BAQWGQJG.js.map
+//# sourceMappingURL=chunk-BAQWGQJG.js.map

package/dist/chunk-BAQWGQJG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/scope-tree.tsx"],"names":[],"mappings":"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","file":"chunk-BAQWGQJG.js","sourcesContent":["import { useState } from 'react';\nimport { ChevronRight, Globe, Building2, GitBranch, MapPin, type LucideIcon } from 'lucide-react';\nimport { Badge } from './badge';\nimport { cn } from '../lib/utils';\n\n/** A small badge displayed next to a tree node name. */\nexport interface ScopeTreeBadge {\n  /** Badge display text. */\n  label: string;\n  /** Optional className to style this badge. */\n  className?: string;\n}\n\n/** A node in the scope tree hierarchy. */\nexport interface ScopeTreeNode {\n  /** Unique identifier for this node, or `null` for root/global nodes. */\n  id: string | null;\n  /** Display name of this scope. */\n  name: string;\n  /** Scope type key (e.g. \"global\", \"organization\", \"branch\", \"location\"). Determines the icon. */\n  type: string;\n  /** Optional child nodes for nested hierarchy. */\n  children?: ScopeTreeNode[];\n  /** Optional badges displayed next to the node name. */\n  badges?: ScopeTreeBadge[];\n}\n\n/** Represents the currently selected scope in the tree. */\nexport interface ScopeTreeSelectedScope {\n  /** The scope type key of the selected node. */\n  type: string;\n  /** The ID of the selected node, or `null` for root/global nodes. */\n  id: string | null;\n}\n\n/** Localizable labels for the scope tree. Currently reserved for future extensibility. */\nexport interface ScopeTreeLabels {\n  /** No labels are required by default; provided for future extensibility. */\n  [key: string]: string;\n}\n\nexport interface ScopeTreeProps {\n  /** Tree data: an array of root-level scope nodes. */\n  nodes: ScopeTreeNode[];\n  /** The currently selected scope (type + id). Used for highlighting. */\n  selectedScope?: ScopeTreeSelectedScope;\n  /** Callback when a node is clicked. */\n  onSelect?: (scope: ScopeTreeSelectedScope) => void;\n  /** Localizable labels. Currently reserved for future extensibility. */\n  labels?: Partial<ScopeTreeLabels>;\n  /** Default expansion depth. Nodes at depth < this value start expanded. Defaults to `1`. */\n  defaultExpandDepth?: number;\n  /** Custom icon map keyed by scope type. Falls back to built-in icons for global/organization/branch/location. */\n  iconMap?: Record<string, LucideIcon>;\n}\n\nconst DEFAULT_ICON_MAP: Record<string, LucideIcon> = {\n  global: Globe,\n  organization: Building2,\n  branch: GitBranch,\n  location: MapPin,\n};\n\nfunction getIcon(type: string, iconMap?: Record<string, LucideIcon>): LucideIcon {\n  if (iconMap?.[type]) return iconMap[type];\n  return DEFAULT_ICON_MAP[type] ?? Globe;\n}\n\n/**\n * Hierarchical tree view for selecting organizational scopes (e.g. global,\n * organization, branch, location). Nodes are expandable/collapsible with\n * chevron icons. Each node type has a dedicated icon. Supports custom icons\n * via `iconMap` and optional badges on nodes.\n *\n * @example\n * ```tsx\n * const nodes: ScopeTreeNode[] = [\n *   {\n *     id: null, name: \"Global\", type: \"global\",\n *     children: [\n *       { id: \"org-1\", name: \"Acme Corp\", type: \"organization\", children: [\n *         { id: \"br-1\", name: \"Tokyo HQ\", type: \"branch\" },\n *       ]},\n *     ],\n *   },\n * ];\n *\n * <ScopeTree\n *   nodes={nodes}\n *   selectedScope={{ type: \"branch\", id: \"br-1\" }}\n *   onSelect={(scope) => setSelected(scope)}\n * />\n * ```\n */\nexport function ScopeTree({\n  nodes,\n  selectedScope,\n  onSelect,\n  defaultExpandDepth = 1,\n  iconMap,\n}: ScopeTreeProps) {\n  return (\n    <div className=\"space-y-1\">\n      {nodes.map(node => (\n        <ScopeTreeNodeItem\n          key={`${node.type}-${node.id}`}\n          node={node}\n          selectedScope={selectedScope}\n          onSelect={onSelect}\n          depth={0}\n          defaultExpandDepth={defaultExpandDepth}\n          iconMap={iconMap}\n        />\n      ))}\n    </div>\n  );\n}\n\ninterface ScopeTreeNodeItemProps {\n  node: ScopeTreeNode;\n  selectedScope?: ScopeTreeSelectedScope;\n  onSelect?: (scope: ScopeTreeSelectedScope) => void;\n  depth: number;\n  defaultExpandDepth: number;\n  iconMap?: Record<string, LucideIcon>;\n}\n\nfunction ScopeTreeNodeItem({\n  node,\n  selectedScope,\n  onSelect,\n  depth,\n  defaultExpandDepth,\n  iconMap,\n}: ScopeTreeNodeItemProps) {\n  const [open, setOpen] = useState(depth < defaultExpandDepth);\n  const Icon = getIcon(node.type, iconMap);\n  const isSelected =\n    selectedScope?.type === node.type && selectedScope?.id === node.id;\n  const children = node.children ?? [];\n  const hasChildren = children.length > 0;\n  const paddingLeft = depth * 16;\n\n  return (\n    <div>\n      <button\n        type=\"button\"\n        className={cn(\n          'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors text-left',\n          isSelected\n            ? 'bg-accent text-accent-foreground font-medium'\n            : 'hover:bg-accent/50 text-foreground',\n        )}\n        style={{ paddingLeft: `${paddingLeft + 12}px` }}\n        onClick={() => {\n          onSelect?.({ type: node.type, id: node.id });\n          if (hasChildren) setOpen(prev => !prev);\n        }}\n      >\n        {hasChildren ? (\n          <ChevronRight\n            className={cn(\n              'w-4 h-4 shrink-0 transition-transform',\n              open && 'rotate-90',\n            )}\n          />\n        ) : (\n          <span className=\"w-4\" />\n        )}\n        <Icon className=\"w-4 h-4 shrink-0 text-muted-foreground\" />\n        <span className=\"truncate flex-1\">{node.name}</span>\n        {node.badges?.map((badge, i) => (\n          <Badge\n            key={i}\n            variant=\"outline\"\n            className={cn('text-[10px] px-1 py-0', badge.className)}\n          >\n            {badge.label}\n          </Badge>\n        ))}\n      </button>\n      {open && hasChildren && (\n        <div>\n          {children.map(child => (\n            <ScopeTreeNodeItem\n              key={`${child.type}-${child.id}`}\n              node={child}\n              selectedScope={selectedScope}\n              onSelect={onSelect}\n              depth={depth + 1}\n              defaultExpandDepth={defaultExpandDepth}\n              iconMap={iconMap}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"]}