@hex-core/components 1.3.1 → 1.4.0

package/dist/command.js

@@ -0,0 +1,232 @@
+"use client";
+import { Command as Command$1 } from 'cmdk';
+import * as React2 from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Dialog = DialogPrimitive.Root;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React2.forwardRef(({ className, children, scrollable = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
+        scrollable ? "max-h-[calc(100vh-2rem)] border border-foreground/[0.08] bg-background shadow-lg rounded-lg" : "gap-[var(--gap-md,1rem)] border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg",
+        "duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className
+      ),
+      ...props,
+      children: [
+        scrollable ? /* @__PURE__ */ jsx("div", { className: "grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]", children }) : children,
+        /* @__PURE__ */ jsxs(
+          DialogPrimitive.Close,
+          {
+            className: cn(
+              "absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background bg-background/80 backdrop-blur-sm",
+              "transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "disabled:pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: "h-4 w-4",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+var DialogTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var Command = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = "Command";
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run.",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0", scrollable: false, children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) })
+  ] });
+}
+var CommandInput = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-b-foreground/[0.08] px-[var(--space-3,0.75rem)]", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "mr-[var(--space-2,0.5rem)] h-4 w-4 shrink-0 opacity-50",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      ]
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-[var(--control-height-lg,2.75rem)] w-full rounded-md bg-transparent py-[var(--space-3,0.75rem)] text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = "CommandInput";
+var CommandList = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = "CommandList";
+var CommandEmpty = React2.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, { ref, className: "py-[var(--space-6,1.5rem)] text-center text-sm", ...props }));
+CommandEmpty.displayName = "CommandEmpty";
+var CommandGroup = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-[var(--space-1,0.25rem)] text-foreground [&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = "CommandGroup";
+var CommandSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "none",
+    "data-cmdk-separator": "",
+    className: cn("-mx-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = "CommandSeparator";
+var CommandItem = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground",
+      "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = "CommandItem";
+function CommandShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+CommandShortcut.displayName = "CommandShortcut";
+
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };
+//# sourceMappingURL=command.js.map
+//# sourceMappingURL=command.js.map

package/dist/command.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/dialog/dialog.tsx","../src/components/command/command.tsx"],"names":["React","jsx","CommandPrimitive","jsxs"],"mappings":";;;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,MAAA,GAAyB,eAAA,CAAA,IAAA;AAM/B,IAAM,YAAA,GAA+B,eAAA,CAAA,MAAA;AAMrC,IAAM,aAAA,GAAsBA,kBAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAiB,eAAA,CAAA,OAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,sDAAA;AAAA,MACA,8DAAA;AAAA,MACA,4DAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA,CAAA;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAkB5B,IAAM,aAAA,GAAsBA,MAAA,CAAA,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,UAAA,GAAa,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,0BACvD,YAAA,EAAA,EACA,QAAA,EAAA;AAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,CAAA;AAAA,kBACf,IAAA;AAAA,IAAiB,eAAA,CAAA,OAAA;AAAA,IAAhB;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,4FAAA;AAAA,QACA,aACG,6FAAA,GACA,uHAAA;AAAA,QACH,sGAAA;AAAA,QACA,4DAAA;AAAA,QACA,8DAAA;AAAA,QACA;AAAA,OACD;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,mBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yEAAA,EACb,UACF,CAAA,GAEA,QAAA;AAAA,wBAED,IAAA;AAAA,UAAiB,eAAA,CAAA,KAAA;AAAA,UAAhB;AAAA,YACA,SAAA,EAAW,EAAA;AAAA,cACV,4GAAA;AAAA,cACA,mFAAA;AAAA,cACA,qGAAA;AAAA,cACA;AAAA,aACD;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,IAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACA,KAAA,EAAM,4BAAA;AAAA,kBACN,OAAA,EAAQ,WAAA;AAAA,kBACR,IAAA,EAAK,MAAA;AAAA,kBACL,MAAA,EAAO,cAAA;AAAA,kBACP,WAAA,EAAY,GAAA;AAAA,kBACZ,aAAA,EAAc,OAAA;AAAA,kBACd,cAAA,EAAe,OAAA;AAAA,kBACf,SAAA,EAAU,SAAA;AAAA,kBACV,aAAA,EAAY,MAAA;AAAA,kBAEZ,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,oCACrB,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,YAAA,EAAa;AAAA;AAAA;AAAA,eACtB;AAAA,8BACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,OAAA,EAAK;AAAA;AAAA;AAAA;AAChC;AAAA;AAAA;AACD,CAAA,EACD,CACA,CAAA;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAQ5B,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,GAAG,OAAM,EAAyC;AACpF,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,oDAAA,EAAsD,SAAS,CAAA;AAAA,MAC5E,GAAG;AAAA;AAAA,GACL;AAEF;AAmBA,IAAM,WAAA,GAAoBA,kBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAiB,eAAA,CAAA,KAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,IAC3E,GAAG;AAAA;AACL,CACA,CAAA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,iBAAA,GAA0BA,kBAG9B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAiB,eAAA,CAAA,WAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,IACvD,GAAG;AAAA;AACL,CACA,CAAA;AACD,iBAAA,CAAkB,WAAA,GAAc,mBAAA;ACrJhC,IAAM,OAAA,GAAgB,kBAGpB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BC,GAAAA;AAAA,EAACC,SAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,2FAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,OAAA,CAAQ,WAAA,GAAc,SAAA;AAgBtB,SAAS,aAAA,CAAc;AAAA,EACtB,KAAA,GAAQ,iBAAA;AAAA,EACR,WAAA,GAAc,8BAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACJ,CAAA,EAAuB;AACtB,EAAA,uBACCC,IAAAA,CAAC,MAAA,EAAA,EAAQ,GAAG,KAAA,EACX,QAAA,EAAA;AAAA,oBAAAA,IAAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,SAAA,EACvB,QAAA,EAAA;AAAA,sBAAAF,GAAAA,CAAC,eAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBACpBA,GAAAA,CAAC,iBAAA,EAAA,EAAmB,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EACjC,CAAA;AAAA,oBACAA,GAAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,qBAAA,EAAsB,UAAA,EAAY,KAAA,EAC1D,QAAA,kBAAAA,GAAAA,CAAC,OAAA,EAAA,EAAQ,SAAA,EAAU,scAAA,EACjB,UACF,CAAA,EACD;AAAA,GAAA,EACD,CAAA;AAEF;AAGA,IAAM,YAAA,GAAqB,MAAA,CAAA,UAAA,CAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BE,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mFAAA,EAAoF,sBAAmB,EAAA,EACrH,QAAA,EAAA;AAAA,kBAAAA,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,KAAA,EAAM,4BAAA;AAAA,MACN,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA,EAAK,MAAA;AAAA,MACL,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAY,GAAA;AAAA,MACZ,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe,OAAA;AAAA,MACf,SAAA,EAAU,wDAAA;AAAA,MACV,aAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAAF,IAAC,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,wBAC9BA,GAAAA,CAAC,MAAA,EAAA,EAAK,EAAA,EAAG,IAAA,EAAK,IAAG,IAAA,EAAK,EAAA,EAAG,OAAA,EAAQ,EAAA,EAAG,OAAA,EAAQ;AAAA;AAAA;AAAA,GAC7C;AAAA,kBACAA,GAAAA;AAAA,IAACC,SAAA,CAAiB,KAAA;AAAA,IAAjB;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,+MAAA;AAAA,QACA;AAAA,OACD;AAAA,MACC,GAAG;AAAA;AAAA;AACL,CAAA,EACD,CACA;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;AAG3B,IAAM,WAAA,GAAoB,kBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BD,GAAAA;AAAA,EAACC,SAAA,CAAiB,IAAA;AAAA,EAAjB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,iDAAA,EAAmD,SAAS,CAAA;AAAA,IACzE,GAAG;AAAA;AACL,CACA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,YAAA,GAAqB,MAAA,CAAA,UAAA,CAGzB,CAAC,KAAA,EAAO,wBACTD,GAAAA,CAACC,SAAA,CAAiB,KAAA,EAAjB,EAAuB,GAAA,EAAU,SAAA,EAAU,gDAAA,EAAkD,GAAG,OAAO,CACxG;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;AAG3B,IAAM,YAAA,GAAqB,kBAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BD,GAAAA;AAAA,EAACC,SAAA,CAAiB,KAAA;AAAA,EAAjB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,qQAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,YAAA,CAAa,WAAA,GAAc,cAAA;AAY3B,IAAM,gBAAA,GAAyB,kBAG7B,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BD,GAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA,EAAK,MAAA;AAAA,IACL,qBAAA,EAAoB,EAAA;AAAA,IACpB,SAAA,EAAW,EAAA,CAAG,wDAAA,EAA0D,SAAS,CAAA;AAAA,IAChF,GAAG;AAAA;AACL,CACA;AACD,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAG/B,IAAM,WAAA,GAAoB,kBAGxB,CAAC,EAAE,WAAW,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3BA,GAAAA;AAAA,EAACC,SAAA,CAAiB,IAAA;AAAA,EAAjB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,oNAAA;AAAA,MACA,0EAAA;AAAA,MACA,4EAAA;AAAA,MACA,6DAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CACA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAM1B,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAA0C;AACxF,EAAA,uBACCD,GAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,uDAAA;AAAA,QACA;AAAA,OACD;AAAA,MACC,GAAG;AAAA;AAAA,GACL;AAEF;AACA,eAAA,CAAgB,WAAA,GAAc,iBAAA","file":"command.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container controlling open state of a modal dialog. */\nconst Dialog = DialogPrimitive.Root;\n\n/** The element (usually a button) that opens the dialog when clicked. */\nconst DialogTrigger = DialogPrimitive.Trigger;\n\n/** Portals the dialog overlay and content into the body. */\nconst DialogPortal = DialogPrimitive.Portal;\n\n/** Closes the dialog when rendered inside DialogContent. */\nconst DialogClose = DialogPrimitive.Close;\n\n/** Dimmed backdrop rendered behind the dialog content. */\nconst DialogOverlay = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Overlay>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Overlay\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm\",\n\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nDialogOverlay.displayName = \"DialogOverlay\";\n\ninterface DialogContentProps\n\textends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n\t/**\n\t * When `true` (the default), DialogContent caps its height at viewport-2rem\n\t * and renders children inside a padded inner scroll container. The Close\n\t * button stays anchored to the (non-scrolling) outer panel so it remains\n\t * visible even when the user scrolls long content.\n\t *\n\t * Pass `scrollable={false}` to opt out — useful when the consumer manages\n\t * its own scroll surface (e.g. CommandDialog defers scroll to cmdk's\n\t * internal CommandList).\n\t */\n\tscrollable?: boolean;\n}\n\n/** The dialog content panel, centered on the overlay. Includes a close button by default. */\nconst DialogContent = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Content>,\n\tDialogContentProps\n>(({ className, children, scrollable = true, ...props }, ref) => (\n\t<DialogPortal>\n\t\t<DialogOverlay />\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]\",\n\t\t\t\tscrollable\n\t\t\t\t\t? \"max-h-[calc(100vh-2rem)] border border-foreground/[0.08] bg-background shadow-lg rounded-lg\"\n\t\t\t\t\t: \"gap-[var(--gap-md,1rem)] border border-foreground/[0.08] bg-background p-[var(--space-6,1.5rem)] shadow-lg rounded-lg\",\n\t\t\t\t\"duration-[var(--duration-normal,200ms)] data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{scrollable ? (\n\t\t\t\t<div className=\"grid gap-[var(--gap-md,1rem)] overflow-y-auto p-[var(--space-6,1.5rem)]\">\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t)}\n\t\t\t<DialogPrimitive.Close\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute right-4 top-4 z-10 rounded-sm opacity-70 ring-offset-background bg-background/80 backdrop-blur-sm\",\n\t\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out hover:opacity-100\",\n\t\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\t\t\"disabled:pointer-events-none\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\tclassName=\"h-4 w-4\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M18 6 6 18\" />\n\t\t\t\t\t<path d=\"m6 6 12 12\" />\n\t\t\t\t</svg>\n\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t</DialogPrimitive.Close>\n\t\t</DialogPrimitive.Content>\n\t</DialogPortal>\n));\nDialogContent.displayName = \"DialogContent\";\n\nexport type { DialogContentProps };\n\n/**\n * Header container inside DialogContent; stacks title and description.\n * @returns A div wrapping title/description with vertical rhythm\n */\nfunction DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/**\n * Footer container inside DialogContent; aligns action buttons.\n * @returns A div that stacks buttons on mobile and right-aligns on desktop\n */\nfunction DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\n/** Accessible dialog title; Radix wires it to aria-labelledby automatically. */\nconst DialogTitle = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Title>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nDialogTitle.displayName = \"DialogTitle\";\n\n/** Accessible dialog description; Radix wires it to aria-describedby automatically. */\nconst DialogDescription = React.forwardRef<\n\tReact.ComponentRef<typeof DialogPrimitive.Description>,\n\tReact.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n\t<DialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-sm text-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nDialogDescription.displayName = \"DialogDescription\";\n\nexport {\n\tDialog,\n\tDialogPortal,\n\tDialogOverlay,\n\tDialogTrigger,\n\tDialogClose,\n\tDialogContent,\n\tDialogHeader,\n\tDialogFooter,\n\tDialogTitle,\n\tDialogDescription,\n};\n","\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport * as React from \"react\";\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogHeader,\n\tDialogTitle,\n} from \"../dialog/dialog.js\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root Command container — drives search, filtering, and keyboard navigation over items. */\nconst Command = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommand.displayName = \"Command\";\n\ninterface CommandDialogProps extends React.ComponentPropsWithoutRef<typeof Dialog> {\n\t/** Command children (CommandInput + CommandList + CommandItem, etc.) */\n\tchildren: React.ReactNode;\n\t/** Accessible title for the dialog (screen-reader only by default). */\n\ttitle?: string;\n\t/** Accessible description for the dialog (screen-reader only by default). */\n\tdescription?: string;\n}\n\n/**\n * Command menu rendered inside a Dialog — a ⌘K-style launcher.\n * @param props - Forwarded to the underlying Dialog (open, onOpenChange, etc.)\n * @returns A Dialog containing a Command menu.\n */\nfunction CommandDialog({\n\ttitle = \"Command Palette\",\n\tdescription = \"Search for a command to run.\",\n\tchildren,\n\t...props\n}: CommandDialogProps) {\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t<DialogHeader className=\"sr-only\">\n\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t<DialogDescription>{description}</DialogDescription>\n\t\t\t</DialogHeader>\n\t\t\t<DialogContent className=\"overflow-hidden p-0\" scrollable={false}>\n\t\t\t\t<Command className=\"[&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-[var(--space-2,0.5rem)] [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-[var(--space-2,0.5rem)] [&_[cmdk-item]]:py-[var(--space-3,0.75rem)] [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n\t\t\t\t\t{children}\n\t\t\t\t</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\n/** Search input for the Command menu. Fires onValueChange as the user types. */\nconst CommandInput = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Input>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div className=\"flex items-center border-b border-b-foreground/[0.08] px-[var(--space-3,0.75rem)]\" cmdk-input-wrapper=\"\">\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"2\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"mr-[var(--space-2,0.5rem)] h-4 w-4 shrink-0 opacity-50\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<circle cx=\"11\" cy=\"11\" r=\"8\" />\n\t\t\t<line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n\t\t</svg>\n\t\t<CommandPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-[var(--control-height-lg,2.75rem)] w-full rounded-md bg-transparent py-[var(--space-3,0.75rem)] text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = \"CommandInput\";\n\n/** Scrollable list that contains CommandGroup / CommandItem / CommandEmpty. */\nconst CommandList = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.List>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tclassName={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = \"CommandList\";\n\n/** Rendered when no items match the current search. */\nconst CommandEmpty = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Empty>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n\t<CommandPrimitive.Empty ref={ref} className=\"py-[var(--space-6,1.5rem)] text-center text-sm\" {...props} />\n));\nCommandEmpty.displayName = \"CommandEmpty\";\n\n/** Logical group of items — renders a heading and filters as a unit. */\nconst CommandGroup = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Group>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden p-[var(--space-1,0.25rem)] text-foreground [&_[cmdk-group-heading]]:px-[var(--space-2,0.5rem)] [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = \"CommandGroup\";\n\n/**\n * Horizontal rule between groups. Renders as a presentational `<div>` (no role)\n * so it can sit inside CommandList (role=listbox) without violating ARIA's\n * required-children rule for listbox. The line is purely decorative — cmdk's\n * built-in Separator hardcodes `role=\"separator\"`, which axe rejects in this\n * context, so we render the divider directly.\n *\n * The `data-cmdk-separator` attribute is preserved so existing CSS / test\n * selectors that target cmdk's separator continue to match.\n */\nconst CommandSeparator = React.forwardRef<\n\tHTMLDivElement,\n\tReact.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n\t<div\n\t\tref={ref}\n\t\trole=\"none\"\n\t\tdata-cmdk-separator=\"\"\n\t\tclassName={cn(\"-mx-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]\", className)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = \"CommandSeparator\";\n\n/** Selectable item. onSelect fires on Enter or click. */\nconst CommandItem = React.forwardRef<\n\tReact.ComponentRef<typeof CommandPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50\",\n\t\t\t\"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground\",\n\t\t\t\"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = \"CommandItem\";\n\n/**\n * Keyboard shortcut hint (e.g. '⌘K') aligned to the right of an item.\n * @returns A muted inline span rendered at the end of a CommandItem.\n */\nfunction CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"ml-auto text-xs tracking-widest text-muted-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCommandShortcut.displayName = \"CommandShortcut\";\n\nexport {\n\tCommand,\n\tCommandDialog,\n\tCommandInput,\n\tCommandList,\n\tCommandEmpty,\n\tCommandGroup,\n\tCommandItem,\n\tCommandShortcut,\n\tCommandSeparator,\n};\n"]}

package/dist/container.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+/**
+ * CVA variants for Container — max-width wrapper bound to `--container-*` tokens.
+ * Variant names match token names (`sm`/`md`/`lg`/`xl`/`full`); `full` removes the clamp.
+ * Padding maps to `--space-*` tokens.
+ */
+declare const containerVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | "xl" | "full" | null | undefined;
+    padding?: "none" | "sm" | "lg" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Props for the Container component. */
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
+    /**
+     * Render as a different element via Radix `Slot`. Pass `<Container asChild><main>...</main></Container>`
+     * to render the layout as a `<main>` (or `<section>`, `<article>`, etc.) and inherit landmark semantics.
+     */
+    asChild?: boolean;
+}
+/**
+ * A centered max-width wrapper for page content. Use to constrain reading-width sections.
+ * Pass `asChild` to render as a semantic landmark (`<main>`, `<section>`, etc.) instead of a plain `<div>`.
+ *
+ * @param props - Container props including `size`, `padding`, and optional `asChild`.
+ * @returns A wrapper element with `mx-auto`, max-width clamp, and optional horizontal padding.
+ * @example
+ * ```tsx
+ * <Container size="lg" padding="md" asChild>
+ *   <main>
+ *     <h1>Article title</h1>
+ *     <p>Reading-width content...</p>
+ *   </main>
+ * </Container>
+ * ```
+ */
+declare function Container({ className, size, padding, asChild, ...props }: ContainerProps): react_jsx_runtime.JSX.Element;
+
+export { Container, type ContainerProps, containerVariants };

package/dist/container.js

@@ -0,0 +1,39 @@
+"use client";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var containerVariants = cva("mx-auto w-full", {
+  variants: {
+    size: {
+      sm: "max-w-[var(--container-sm,33rem)]",
+      md: "max-w-[var(--container-md,40rem)]",
+      lg: "max-w-[var(--container-lg,50rem)]",
+      xl: "max-w-[var(--container-xl,66rem)]",
+      full: "max-w-full"
+    },
+    padding: {
+      none: "",
+      sm: "px-[var(--space-3,0.75rem)]",
+      md: "px-[var(--space-4,1rem)]",
+      lg: "px-[var(--space-8,2rem)]"
+    }
+  },
+  defaultVariants: {
+    size: "lg",
+    padding: "md"
+  }
+});
+function Container({ className, size, padding, asChild = false, ...props }) {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(Comp, { className: cn(containerVariants({ size, padding }), className), ...props });
+}
+
+export { Container, containerVariants };
+//# sourceMappingURL=container.js.map
+//# sourceMappingURL=container.js.map

package/dist/container.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/container/container.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACEA,IAAM,iBAAA,GAAoB,IAAI,gBAAA,EAAkB;AAAA,EAC/C,QAAA,EAAU;AAAA,IACT,IAAA,EAAM;AAAA,MACL,EAAA,EAAI,mCAAA;AAAA,MACJ,EAAA,EAAI,mCAAA;AAAA,MACJ,EAAA,EAAI,mCAAA;AAAA,MACJ,EAAA,EAAI,mCAAA;AAAA,MACJ,IAAA,EAAM;AAAA,KACP;AAAA,IACA,OAAA,EAAS;AAAA,MACR,IAAA,EAAM,EAAA;AAAA,MACN,EAAA,EAAI,6BAAA;AAAA,MACJ,EAAA,EAAI,0BAAA;AAAA,MACJ,EAAA,EAAI;AAAA;AACL,GACD;AAAA,EACA,eAAA,EAAiB;AAAA,IAChB,IAAA,EAAM,IAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEX,CAAC;AA6BD,SAAS,SAAA,CAAU,EAAE,SAAA,EAAW,IAAA,EAAM,SAAS,OAAA,GAAU,KAAA,EAAO,GAAG,KAAA,EAAM,EAAmB;AAC3F,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,KAAA;AAC9B,EAAA,uBAAO,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,iBAAA,CAAkB,EAAE,IAAA,EAAM,OAAA,EAAS,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACzF","file":"container.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * CVA variants for Container — max-width wrapper bound to `--container-*` tokens.\n * Variant names match token names (`sm`/`md`/`lg`/`xl`/`full`); `full` removes the clamp.\n * Padding maps to `--space-*` tokens.\n */\nconst containerVariants = cva(\"mx-auto w-full\", {\n\tvariants: {\n\t\tsize: {\n\t\t\tsm: \"max-w-[var(--container-sm,33rem)]\",\n\t\t\tmd: \"max-w-[var(--container-md,40rem)]\",\n\t\t\tlg: \"max-w-[var(--container-lg,50rem)]\",\n\t\t\txl: \"max-w-[var(--container-xl,66rem)]\",\n\t\t\tfull: \"max-w-full\",\n\t\t},\n\t\tpadding: {\n\t\t\tnone: \"\",\n\t\t\tsm: \"px-[var(--space-3,0.75rem)]\",\n\t\t\tmd: \"px-[var(--space-4,1rem)]\",\n\t\t\tlg: \"px-[var(--space-8,2rem)]\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: \"lg\",\n\t\tpadding: \"md\",\n\t},\n});\n\n/** Props for the Container component. */\nexport interface ContainerProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof containerVariants> {\n\t/**\n\t * Render as a different element via Radix `Slot`. Pass `<Container asChild><main>...</main></Container>`\n\t * to render the layout as a `<main>` (or `<section>`, `<article>`, etc.) and inherit landmark semantics.\n\t */\n\tasChild?: boolean;\n}\n\n/**\n * A centered max-width wrapper for page content. Use to constrain reading-width sections.\n * Pass `asChild` to render as a semantic landmark (`<main>`, `<section>`, etc.) instead of a plain `<div>`.\n *\n * @param props - Container props including `size`, `padding`, and optional `asChild`.\n * @returns A wrapper element with `mx-auto`, max-width clamp, and optional horizontal padding.\n * @example\n * ```tsx\n * <Container size=\"lg\" padding=\"md\" asChild>\n *   <main>\n *     <h1>Article title</h1>\n *     <p>Reading-width content...</p>\n *   </main>\n * </Container>\n * ```\n */\nfunction Container({ className, size, padding, asChild = false, ...props }: ContainerProps) {\n\tconst Comp = asChild ? Slot : \"div\";\n\treturn <Comp className={cn(containerVariants({ size, padding }), className)} {...props} />;\n}\n\nexport { Container, containerVariants };\n"]}

package/dist/context-menu.d.ts

@@ -0,0 +1,37 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as React from 'react';
+
+/** Root container for a context menu (right-click menu). */
+declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+/** The element that triggers the context menu on right-click. */
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+/** Groups related items for a11y. */
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** Portals content into the body. */
+declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+/** Group for checkable radio items. */
+declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+/** The menu panel shown when the trigger is right-clicked. */
+declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A clickable menu item. */
+declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** A checkable menu item. */
+declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A radio menu item. */
+declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A non-interactive heading label. */
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** Horizontal divider. */
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Right-aligned shortcut text (e.g. ⌘⇧N).
+ * @returns A span with muted typography
+ */
+declare function ContextMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger };

package/dist/context-menu.js

@@ -0,0 +1,130 @@
+"use client";
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuPortal = ContextMenuPrimitive.Portal;
+var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+var ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      className
+    ),
+    ...props
+  }
+) }));
+ContextMenuContent.displayName = "ContextMenuContent";
+var ContextMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-[var(--space-8,2rem)]",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = "ContextMenuItem";
+var ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "3",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "h-4 w-4",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+        }
+      ) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+var ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-2 w-2 fill-current", "aria-hidden": "true", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }) }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+var ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("px-[var(--space-2,0.5rem)] py-1.5 text-sm font-semibold text-foreground", inset && "pl-[var(--space-8,2rem)]", className),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = "ContextMenuLabel";
+var ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+function ContextMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger };
+//# sourceMappingURL=context-menu.js.map
+//# sourceMappingURL=context-menu.js.map

package/dist/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/context-menu/context-menu.tsx"],"names":[],"mappings":"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","file":"context-menu.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container for a context menu (right-click menu). */\nconst ContextMenu = ContextMenuPrimitive.Root;\n\n/** The element that triggers the context menu on right-click. */\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger;\n\n/** Groups related items for a11y. */\nconst ContextMenuGroup = ContextMenuPrimitive.Group;\n\n/** Portals content into the body. */\nconst ContextMenuPortal = ContextMenuPrimitive.Portal;\n\n/** Group for checkable radio items. */\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;\n\n/** The menu panel shown when the trigger is right-clicked. */\nconst ContextMenuContent = React.forwardRef<\n\tReact.ComponentRef<typeof ContextMenuPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n\t<ContextMenuPrimitive.Portal>\n\t\t<ContextMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 min-w-[8rem] overflow-hidden rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-1,0.25rem)] text-popover-foreground shadow-md\",\n\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</ContextMenuPrimitive.Portal>\n));\nContextMenuContent.displayName = \"ContextMenuContent\";\n\n/** A clickable menu item. */\nconst ContextMenuItem = React.forwardRef<\n\tReact.ComponentRef<typeof ContextMenuPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n\t<ContextMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default select-none items-center gap-[var(--gap-sm,0.5rem)] rounded-sm px-[var(--space-2,0.5rem)] py-1.5 text-sm outline-none\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\tinset && \"pl-[var(--space-8,2rem)]\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nContextMenuItem.displayName = \"ContextMenuItem\";\n\n/** A checkable menu item. */\nconst ContextMenuCheckboxItem = React.forwardRef<\n\tReact.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,\n\tReact.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<ContextMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<ContextMenuPrimitive.ItemIndicator>\n\t\t\t\t<svg\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth=\"3\"\n\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\tclassName=\"h-4 w-4\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t<polyline points=\"20 6 9 17 4 12\" />\n\t\t\t\t</svg>\n\t\t\t</ContextMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</ContextMenuPrimitive.CheckboxItem>\n));\nContextMenuCheckboxItem.displayName = \"ContextMenuCheckboxItem\";\n\n/** A radio menu item. */\nconst ContextMenuRadioItem = React.forwardRef<\n\tReact.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,\n\tReact.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n\t<ContextMenuPrimitive.RadioItem\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-[var(--space-8,2rem)] pr-[var(--space-2,0.5rem)] text-sm outline-none\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<ContextMenuPrimitive.ItemIndicator>\n\t\t\t\t<svg viewBox=\"0 0 24 24\" className=\"h-2 w-2 fill-current\" aria-hidden=\"true\">\n\t\t\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t\t</svg>\n\t\t\t</ContextMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</ContextMenuPrimitive.RadioItem>\n));\nContextMenuRadioItem.displayName = \"ContextMenuRadioItem\";\n\n/** A non-interactive heading label. */\nconst ContextMenuLabel = React.forwardRef<\n\tReact.ComponentRef<typeof ContextMenuPrimitive.Label>,\n\tReact.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n\t<ContextMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\"px-[var(--space-2,0.5rem)] py-1.5 text-sm font-semibold text-foreground\", inset && \"pl-[var(--space-8,2rem)]\", className)}\n\t\t{...props}\n\t/>\n));\nContextMenuLabel.displayName = \"ContextMenuLabel\";\n\n/** Horizontal divider. */\nconst ContextMenuSeparator = React.forwardRef<\n\tReact.ComponentRef<typeof ContextMenuPrimitive.Separator>,\n\tReact.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<ContextMenuPrimitive.Separator\n\t\tref={ref}\n\t\tclassName={cn(\"-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]\", className)}\n\t\t{...props}\n\t/>\n));\nContextMenuSeparator.displayName = \"ContextMenuSeparator\";\n\n/**\n * Right-aligned shortcut text (e.g. ⌘⇧N).\n * @returns A span with muted typography\n */\nfunction ContextMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport {\n\tContextMenu,\n\tContextMenuTrigger,\n\tContextMenuContent,\n\tContextMenuItem,\n\tContextMenuCheckboxItem,\n\tContextMenuRadioItem,\n\tContextMenuLabel,\n\tContextMenuSeparator,\n\tContextMenuShortcut,\n\tContextMenuGroup,\n\tContextMenuPortal,\n\tContextMenuRadioGroup,\n};\n"]}

package/dist/data-table.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+
+/**
+ * Generic DataTable wrapper that renders a TanStack Table model using Hex UI's
+ * Table primitives. Pass columns + data; use TanStack hooks for sorting,
+ * filtering, pagination, row-selection as needed.
+ * @template TData - Row data type. Cell value types are inferred per column by TanStack.
+ */
+interface DataTableProps<TData> {
+    columns: ColumnDef<TData, unknown>[];
+    data: TData[];
+    /**
+     * Visible caption rendered below the table. Announced by screen readers
+     * when the user enters the table. Provide either `caption` or `aria-label`.
+     */
+    caption?: React.ReactNode;
+    /**
+     * Accessible label for the table when no visible caption is shown.
+     * Forwarded as `aria-label` on the underlying `<table>` element. Kebab-case
+     * to match the canonical ARIA prop convention used elsewhere in Hex UI.
+     */
+    "aria-label"?: string;
+}
+/**
+ * Render a data-driven table from TanStack column definitions.
+ * @param props - Columns, data, and optional accessible labelling (`caption` or `aria-label`)
+ * @returns A styled Table rendered from the TanStack row model
+ */
+declare function DataTable<TData>({ columns, data, caption, "aria-label": ariaLabel, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+
+export { DataTable, type DataTableProps };