@hex-core/components 1.3.1 → 1.4.0

package/dist/input-otp.d.ts

@@ -0,0 +1,19 @@
+import { OTPInput } from 'input-otp';
+import * as React from 'react';
+
+/** Props for the root InputOTP component (mirrors input-otp's OTPInput). */
+type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
+/** Root OTP input. Wraps input-otp's OTPInput and exposes slot context to children. */
+declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<HTMLInputElement>>;
+/** Groups slots together; place between runs of slots to add visual dividers. */
+declare const InputOTPGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Index of the slot in the underlying OTP value. */
+    index: number;
+}
+/** A single character slot. Reads its state from OTPInputContext. */
+declare const InputOTPSlot: React.ForwardRefExoticComponent<InputOTPSlotProps & React.RefAttributes<HTMLDivElement>>;
+/** Visual separator between slot groups (a bullet by default). */
+declare const InputOTPSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot };

package/dist/input-otp.js

@@ -0,0 +1,71 @@
+"use client";
+import { OTPInput, OTPInputContext } from 'input-otp';
+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 InputOTP = React.forwardRef(
+  ({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      ref,
+      containerClassName: cn(
+        "flex items-center gap-[var(--gap-sm,0.5rem)] has-[:disabled]:opacity-50",
+        containerClassName
+      ),
+      className: cn("disabled:cursor-not-allowed", className),
+      ...props
+    }
+  )
+);
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props }));
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React.forwardRef(
+  ({ index, className, ...props }, ref) => {
+    const inputOTPContext = React.useContext(OTPInputContext);
+    const slot = inputOTPContext.slots[index];
+    const char = slot?.char ?? null;
+    const hasFakeCaret = slot?.hasFakeCaret ?? false;
+    const isActive = slot?.isActive ?? false;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative flex h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)] items-center justify-center border-y border-r border-input text-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "inset-ring-1 inset-ring-foreground/[0.06]",
+          "first:rounded-l-md first:border-l last:rounded-r-md",
+          isActive && "z-10 ring-2 ring-ring ring-offset-2 ring-offset-background",
+          className
+        ),
+        ...props,
+        children: [
+          char,
+          hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-pulse bg-foreground duration-1000" }) })
+        ]
+      }
+    );
+  }
+);
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    className: "h-2 w-2 text-muted-foreground",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "6" })
+  }
+) }));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+//# sourceMappingURL=input-otp.js.map
+//# sourceMappingURL=input-otp.js.map

package/dist/input-otp.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/input-otp/input-otp.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACAA,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,oBAAoB,GAAG,KAAA,IAAS,GAAA,qBAC9C,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,kBAAA,EAAoB,EAAA;AAAA,QACnB,yEAAA;AAAA,QACA;AAAA,OACD;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,MACrD,GAAG;AAAA;AAAA;AAEL;AACD,QAAA,CAAS,WAAA,GAAc,UAAA;AAGvB,IAAM,gBAAsB,KAAA,CAAA,UAAA,CAG1B,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,EAAG,GAAA,yBAC1B,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,EAAA,CAAG,mBAAA,EAAqB,SAAS,CAAA,EAAI,GAAG,OAAO,CACzE;AACD,aAAA,CAAc,WAAA,GAAc,eAAA;AAQ5B,IAAM,YAAA,GAAqB,KAAA,CAAA,UAAA;AAAA,EAC1B,CAAC,EAAE,KAAA,EAAO,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AACxC,IAAA,MAAM,eAAA,GAAwB,iBAAW,eAAe,CAAA;AACxD,IAAA,MAAM,IAAA,GAAO,eAAA,CAAgB,KAAA,CAAM,KAAK,CAAA;AACxC,IAAA,MAAM,IAAA,GAAO,MAAM,IAAA,IAAQ,IAAA;AAC3B,IAAA,MAAM,YAAA,GAAe,MAAM,YAAA,IAAgB,KAAA;AAC3C,IAAA,MAAM,QAAA,GAAW,MAAM,QAAA,IAAY,KAAA;AAEnC,IAAA,uBACC,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACV,0NAAA;AAAA,UACA,2CAAA;AAAA,UACA,qDAAA;AAAA,UACA,QAAA,IAAY,4DAAA;AAAA,UACZ;AAAA,SACD;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA;AAAA,UACA,YAAA,wBACC,KAAA,EAAA,EAAI,SAAA,EAAU,yEACd,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EAAqD,CAAA,EACrE;AAAA;AAAA;AAAA,KAEF;AAAA,EAEF;AACD;AACA,YAAA,CAAa,WAAA,GAAc,cAAA;AAG3B,IAAM,iBAAA,GAA0B,KAAA,CAAA,UAAA,CAG9B,CAAC,EAAE,GAAG,KAAA,EAAM,EAAG,GAAA,qBAChB,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,IAAA,EAAK,WAAA,EAAa,GAAG,KAAA,EACnC,QAAA,kBAAA,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACA,KAAA,EAAM,4BAAA;AAAA,IACN,OAAA,EAAQ,WAAA;AAAA,IACR,IAAA,EAAK,cAAA;AAAA,IACL,SAAA,EAAU,+BAAA;AAAA,IACV,aAAA,EAAY,MAAA;AAAA,IAEZ,8BAAC,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI;AAAA;AAC/B,CAAA,EACD,CACA;AACD,iBAAA,CAAkB,WAAA,GAAc,mBAAA","file":"input-otp.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 { OTPInput, OTPInputContext } from \"input-otp\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Props for the root InputOTP component (mirrors input-otp's OTPInput). */\ntype InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;\n\n/** Root OTP input. Wraps input-otp's OTPInput and exposes slot context to children. */\nconst InputOTP = React.forwardRef<React.ComponentRef<typeof OTPInput>, InputOTPProps>(\n\t({ className, containerClassName, ...props }, ref) => (\n\t<OTPInput\n\t\tref={ref}\n\t\tcontainerClassName={cn(\n\t\t\t\"flex items-center gap-[var(--gap-sm,0.5rem)] has-[:disabled]:opacity-50\",\n\t\t\tcontainerClassName,\n\t\t)}\n\t\tclassName={cn(\"disabled:cursor-not-allowed\", className)}\n\t\t{...props}\n\t/>\n));\nInputOTP.displayName = \"InputOTP\";\n\n/** Groups slots together; place between runs of slots to add visual dividers. */\nconst InputOTPGroup = React.forwardRef<\n\tReact.ComponentRef<\"div\">,\n\tReact.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n\t<div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n));\nInputOTPGroup.displayName = \"InputOTPGroup\";\n\ninterface InputOTPSlotProps extends React.ComponentPropsWithoutRef<\"div\"> {\n\t/** Index of the slot in the underlying OTP value. */\n\tindex: number;\n}\n\n/** A single character slot. Reads its state from OTPInputContext. */\nconst InputOTPSlot = React.forwardRef<HTMLDivElement, InputOTPSlotProps>(\n\t({ index, className, ...props }, ref) => {\n\t\tconst inputOTPContext = React.useContext(OTPInputContext);\n\t\tconst slot = inputOTPContext.slots[index];\n\t\tconst char = slot?.char ?? null;\n\t\tconst hasFakeCaret = slot?.hasFakeCaret ?? false;\n\t\tconst isActive = slot?.isActive ?? false;\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"relative flex h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)] items-center justify-center border-y border-r border-input text-sm transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t\"inset-ring-1 inset-ring-foreground/[0.06]\",\n\t\t\t\t\t\"first:rounded-l-md first:border-l last:rounded-r-md\",\n\t\t\t\t\tisActive && \"z-10 ring-2 ring-ring ring-offset-2 ring-offset-background\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{char}\n\t\t\t\t{hasFakeCaret && (\n\t\t\t\t\t<div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n\t\t\t\t\t\t<div className=\"h-4 w-px animate-pulse bg-foreground duration-1000\" />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nInputOTPSlot.displayName = \"InputOTPSlot\";\n\n/** Visual separator between slot groups (a bullet by default). */\nconst InputOTPSeparator = React.forwardRef<\n\tReact.ComponentRef<\"div\">,\n\tReact.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n\t<div ref={ref} role=\"separator\" {...props}>\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=\"currentColor\"\n\t\t\tclassName=\"h-2 w-2 text-muted-foreground\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"6\" />\n\t\t</svg>\n\t</div>\n));\nInputOTPSeparator.displayName = \"InputOTPSeparator\";\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };\nexport type { InputOTPProps };\n"]}

package/dist/input.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps };

package/dist/input.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/primitives/input/input.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Input = React.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-[var(--control-height-md,2.5rem)] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm",
+          "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          // inset-ring gives a self-borne edge so the input field is visible on flat
+          // surfaces (token border alone is too low-contrast on bg-background=white).
+          "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "focus-visible:shadow-md focus-visible:border-ring/50",
+          "hover:border-ring/30 hover:shadow-md",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };
+//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/input/input.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACLA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,MAAM,GAAG,KAAA,IAAS,GAAA,KAAQ;AACvC,IAAA,uBACC,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACA,IAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACV,6JAAA;AAAA,UACA,iEAAA;AAAA;AAAA;AAAA,UAGA,qDAAA;AAAA,UACA,sFAAA;AAAA,UACA,mCAAA;AAAA,UACA,qGAAA;AAAA,UACA,sDAAA;AAAA,UACA,sCAAA;AAAA,UACA,iDAAA;AAAA,UACA;AAAA,SACD;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACL;AAAA,EAEF;AACD;AACA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"input.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","import * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n\t({ className, type, ...props }, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype={type}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex h-[var(--control-height-md,2.5rem)] w-full rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm\",\n\t\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\t// inset-ring gives a self-borne edge so the input field is visible on flat\n\t\t\t\t\t// surfaces (token border alone is too low-contrast on bg-background=white).\n\t\t\t\t\t\"shadow-sm inset-ring-1 inset-ring-foreground/[0.06]\",\n\t\t\t\t\t\"file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground\",\n\t\t\t\t\t\"placeholder:text-muted-foreground\",\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\"focus-visible:shadow-md focus-visible:border-ring/50\",\n\t\t\t\t\t\"hover:border-ring/30 hover:shadow-md\",\n\t\t\t\t\t\"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n"]}

package/dist/label.d.ts

@@ -0,0 +1,11 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const labelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
+}
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+export { Label, type LabelProps };

package/dist/label.js

@@ -0,0 +1,22 @@
+"use client";
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props })
+);
+Label.displayName = "Label";
+
+export { Label };
+//# sourceMappingURL=label.js.map
+//# sourceMappingURL=label.js.map

package/dist/label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/label/label.tsx"],"names":[],"mappings":";;;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,aAAA,GAAgB,GAAA;AAAA,EACrB;AACD,CAAA;AAMA,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA;AAAA,EACnB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,wBACzB,GAAA,CAAgB,cAAA,CAAA,IAAA,EAAf,EAAoB,GAAA,EAAU,WAAW,EAAA,CAAG,aAAA,IAAiB,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO;AAEvF;AACA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"label.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 LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n);\n\nexport interface LabelProps\n\textends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n\t\tVariantProps<typeof labelVariants> {}\n\nconst Label = React.forwardRef<React.ComponentRef<typeof LabelPrimitive.Root>, LabelProps>(\n\t({ className, ...props }, ref) => (\n\t\t<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport { Label };\n"]}

package/dist/menubar.d.ts

@@ -0,0 +1,35 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import * as React from 'react';
+
+/** Top-level menu bar (File / Edit / View style). */
+declare const Menubar: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A top-level menu in the bar (e.g. "File"). */
+declare const MenubarMenu: typeof MenubarPrimitive.Menu;
+/** Groups related items inside a menu content. */
+declare const MenubarGroup: typeof MenubarPrimitive.Group;
+/** Portals menu content into the body. */
+declare const MenubarPortal: typeof MenubarPrimitive.Portal;
+/** Group for checkable radio items. */
+declare const MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup;
+/** The clickable menu label in the bar. */
+declare const MenubarTrigger: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/** The menu panel shown when a trigger opens. */
+declare const MenubarContent: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** A clickable menu item. */
+declare const MenubarItem: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** A non-interactive heading label. */
+declare const MenubarLabel: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+/** Horizontal divider. */
+declare const MenubarSeparator: React.ForwardRefExoticComponent<Omit<MenubarPrimitive.MenubarSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Right-aligned keyboard shortcut text.
+ * @returns A span with muted typography
+ */
+declare function MenubarShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+
+export { Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger };

package/dist/menubar.js

@@ -0,0 +1,106 @@
+"use client";
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Menubar = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "flex h-[var(--control-height-md,2.5rem)] items-center space-x-1 rounded-md border border-foreground/[0.08] bg-background p-[var(--space-1,0.25rem)]",
+      className
+    ),
+    ...props
+  }
+));
+Menubar.displayName = "Menubar";
+var MenubarMenu = MenubarPrimitive.Menu;
+var MenubarGroup = MenubarPrimitive.Group;
+var MenubarPortal = MenubarPrimitive.Portal;
+var MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+var MenubarTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-[var(--space-3,0.75rem)] py-1.5 text-sm font-medium outline-none",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "focus:bg-accent focus:text-accent-foreground",
+      "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    ),
+    ...props
+  }
+));
+MenubarTrigger.displayName = "MenubarTrigger";
+var MenubarContent = React.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  MenubarPrimitive.Content,
+  {
+    ref,
+    align,
+    alignOffset,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[12rem] 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
+  }
+) }));
+MenubarContent.displayName = "MenubarContent";
+var MenubarItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.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
+  }
+));
+MenubarItem.displayName = "MenubarItem";
+var MenubarLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Label,
+  {
+    ref,
+    className: cn("px-[var(--space-2,0.5rem)] py-1.5 text-sm font-semibold", inset && "pl-[var(--space-8,2rem)]", className),
+    ...props
+  }
+));
+MenubarLabel.displayName = "MenubarLabel";
+var MenubarSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  MenubarPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-[var(--space-1,0.25rem)] my-[var(--space-1,0.25rem)] h-px bg-foreground/[0.12]", className),
+    ...props
+  }
+));
+MenubarSeparator.displayName = "MenubarSeparator";
+function MenubarShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+export { Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger };
+//# sourceMappingURL=menubar.js.map
+//# sourceMappingURL=menubar.js.map

package/dist/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/menubar/menubar.tsx"],"names":[],"mappings":"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","file":"menubar.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 MenubarPrimitive from \"@radix-ui/react-menubar\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Top-level menu bar (File / Edit / View style). */\nconst Menubar = React.forwardRef<\n\tReact.ComponentRef<typeof MenubarPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-[var(--control-height-md,2.5rem)] items-center space-x-1 rounded-md border border-foreground/[0.08] bg-background p-[var(--space-1,0.25rem)]\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nMenubar.displayName = \"Menubar\";\n\n// The explicit `as typeof ...Primitive.X` casts below are load-bearing: without them,\n// tsup's dts build fails with TS2742 \"The inferred type of X cannot be named without a\n// reference to @radix-ui/react-context\" on direct re-exports of Radix primitives. Do not\n// remove without verifying `pnpm --filter @hex-core/components build` still succeeds.\n\n/** A top-level menu in the bar (e.g. \"File\"). */\nconst MenubarMenu = MenubarPrimitive.Menu as typeof MenubarPrimitive.Menu;\n\n/** Groups related items inside a menu content. */\nconst MenubarGroup = MenubarPrimitive.Group as typeof MenubarPrimitive.Group;\n\n/** Portals menu content into the body. */\nconst MenubarPortal = MenubarPrimitive.Portal as typeof MenubarPrimitive.Portal;\n\n/** Group for checkable radio items. */\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup as typeof MenubarPrimitive.RadioGroup;\n\n/** The clickable menu label in the bar. */\nconst MenubarTrigger = React.forwardRef<\n\tReact.ComponentRef<typeof MenubarPrimitive.Trigger>,\n\tReact.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.Trigger\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex cursor-default select-none items-center rounded-sm px-[var(--space-3,0.75rem)] py-1.5 text-sm font-medium 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-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nMenubarTrigger.displayName = \"MenubarTrigger\";\n\n/** The menu panel shown when a trigger opens. */\nconst MenubarContent = React.forwardRef<\n\tReact.ComponentRef<typeof MenubarPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(({ className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props }, ref) => (\n\t<MenubarPrimitive.Portal>\n\t\t<MenubarPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\talignOffset={alignOffset}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 min-w-[12rem] 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</MenubarPrimitive.Portal>\n));\nMenubarContent.displayName = \"MenubarContent\";\n\n/** A clickable menu item. */\nconst MenubarItem = React.forwardRef<\n\tReact.ComponentRef<typeof MenubarPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n\t<MenubarPrimitive.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));\nMenubarItem.displayName = \"MenubarItem\";\n\n/** A non-interactive heading label. */\nconst MenubarLabel = React.forwardRef<\n\tReact.ComponentRef<typeof MenubarPrimitive.Label>,\n\tReact.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => (\n\t<MenubarPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cn(\"px-[var(--space-2,0.5rem)] py-1.5 text-sm font-semibold\", inset && \"pl-[var(--space-8,2rem)]\", className)}\n\t\t{...props}\n\t/>\n));\nMenubarLabel.displayName = \"MenubarLabel\";\n\n/** Horizontal divider. */\nconst MenubarSeparator = React.forwardRef<\n\tReact.ComponentRef<typeof MenubarPrimitive.Separator>,\n\tReact.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<MenubarPrimitive.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));\nMenubarSeparator.displayName = \"MenubarSeparator\";\n\n/**\n * Right-aligned keyboard shortcut text.\n * @returns A span with muted typography\n */\nfunction MenubarShortcut({ 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\tMenubar,\n\tMenubarMenu,\n\tMenubarTrigger,\n\tMenubarContent,\n\tMenubarItem,\n\tMenubarLabel,\n\tMenubarSeparator,\n\tMenubarShortcut,\n\tMenubarGroup,\n\tMenubarPortal,\n\tMenubarRadioGroup,\n};\n"]}

package/dist/multi-combobox.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface MultiComboboxOption {
+    /** The value returned in the onChange array (stable, unique). */
+    value: string;
+    /** The display label shown in the list and the trigger. */
+    label: string;
+    /** Mark as non-selectable. */
+    disabled?: boolean;
+}
+interface MultiComboboxProps {
+    /** The list of selectable options. */
+    options: MultiComboboxOption[];
+    /** Controlled selected values. */
+    value?: string[];
+    /** Fired when the user toggles an option: (values: string[]) => void */
+    onChange?: (values: string[]) => void;
+    /** Text shown on the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Input placeholder inside the popover list. */
+    searchPlaceholder?: string;
+    /** Text shown when no options match the search. */
+    emptyText?: string;
+    /** Soft cap on selections. Once reached, unselected options become non-selectable. */
+    maxSelected?: number;
+    /** Close the popover after every pick. Default false (multi-select UX expects staying open). */
+    closeOnSelect?: boolean;
+    /** Disable the trigger. */
+    disabled?: boolean;
+    /** Extra class names on the trigger button. */
+    className?: string;
+    /** Accessible label for the trigger (required when no adjacent visible label). */
+    "aria-label"?: string;
+    /** Id of an external visible label that names this combobox. */
+    "aria-labelledby"?: string;
+}
+/**
+ * Searchable multi-select input built on Command + Popover.
+ *
+ * Pass `options` with `{ value, label }` and bind `value` (string[]) +
+ * `onChange`. The trigger shows "{n} selected" once any option is picked, with
+ * the comma-separated label list mirrored into the `title` attribute for
+ * pointer/screen-reader fallback. Each option is announced with `aria-selected`.
+ * @returns A trigger button that opens a multi-select option list.
+ */
+declare function MultiCombobox({ options, value, onChange, placeholder, searchPlaceholder, emptyText, maxSelected, closeOnSelect, disabled, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: MultiComboboxProps): react_jsx_runtime.JSX.Element;
+declare namespace MultiCombobox {
+    var displayName: string;
+}
+
+export { MultiCombobox, type MultiComboboxOption, type MultiComboboxProps };