@hex-core/components 1.3.0 → 1.4.0

package/dist/card.js

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/card/card.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Card = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-lg border border-foreground/[0.08] bg-card text-card-foreground",
+        "shadow-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
+        "hover:shadow-md",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-[var(--space-6,1.5rem)]", className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-2xl font-semibold leading-none tracking-tight", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-[var(--space-6,1.5rem)] pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center p-[var(--space-6,1.5rem)] pt-0", className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=card.js.map
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/card/card.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,IAAA,GAAa,KAAA,CAAA,UAAA;AAAA,EAClB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACzB,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,yEAAA;AAAA,QACA,2EAAA;AAAA,QACA,iBAAA;AAAA,QACA;AAAA,OACD;AAAA,MACC,GAAG;AAAA;AAAA;AAGP;AACA,IAAA,CAAK,WAAA,GAAc,MAAA;AAGnB,IAAM,UAAA,GAAmB,KAAA,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACzB,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,qDAAA,EAAuD,SAAS,CAAA;AAAA,MAC7E,GAAG;AAAA;AAAA;AAGP;AACA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGzB,IAAM,SAAA,GAAkB,KAAA,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACzB,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,oDAAA,EAAsD,SAAS,CAAA;AAAA,MAC5E,GAAG;AAAA;AAAA;AAGP;AACA,SAAA,CAAU,WAAA,GAAc,WAAA;AAGxB,IAAM,kBAAwB,KAAA,CAAA,UAAA,CAG5B,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,EAAG,GAAA,yBAC1B,GAAA,EAAA,EAAE,GAAA,EAAU,WAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA,EAAI,GAAG,OAAO,CACnF;AACD,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAG9B,IAAM,WAAA,GAAoB,KAAA,CAAA,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACzB,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAW,EAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO;AAExF;AACA,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,UAAA,GAAmB,KAAA,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAA,qBACzB,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA,CAAG,kDAAA,EAAoD,SAAS,CAAA;AAAA,MAC1E,GAAG;AAAA;AAAA;AAGP;AACA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"card.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\n// Card consumes tokens --space-6, --space-4, --duration-normal.\n// Fallbacks match Tailwind defaults for consumers without a theme loaded.\n\n/** A container card with subtle shadow and border. */\nconst Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-lg border border-foreground/[0.08] bg-card text-card-foreground\",\n\t\t\t\t\"shadow-sm transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\"hover:shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCard.displayName = \"Card\";\n\n/** The header section of a Card. */\nconst CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex flex-col space-y-1.5 p-[var(--space-6,1.5rem)]\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCardHeader.displayName = \"CardHeader\";\n\n/** The title element inside a CardHeader. */\nconst CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<h3\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"text-2xl font-semibold leading-none tracking-tight\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCardTitle.displayName = \"CardTitle\";\n\n/** A description element inside a CardHeader. */\nconst CardDescription = React.forwardRef<\n\tHTMLParagraphElement,\n\tReact.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n\t<p ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n));\nCardDescription.displayName = \"CardDescription\";\n\n/** The main content area of a Card. */\nconst CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<div ref={ref} className={cn(\"p-[var(--space-6,1.5rem)] pt-0\", className)} {...props} />\n\t),\n);\nCardContent.displayName = \"CardContent\";\n\n/** The footer section of a Card. */\nconst CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, ...props }, ref) => (\n\t\t<div\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"flex items-center p-[var(--space-6,1.5rem)] pt-0\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nCardFooter.displayName = \"CardFooter\";\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };\n"]}

package/dist/checkbox.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+
+/**
+ * An accessible checkbox component built on Radix UI.
+ * Supports checked, unchecked, and indeterminate states with smooth animations.
+ */
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/checkbox.js

@@ -0,0 +1,65 @@
+"use client";
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "group h-4 w-4 shrink-0 rounded-sm border border-input",
+      "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+      "shadow-sm inset-ring-1 inset-ring-foreground/[0.06]",
+      "hover:border-ring/50 hover:shadow-md",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground",
+      "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), 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: "hidden h-3.5 w-3.5 group-data-[state=checked]:block",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+        }
+      ),
+      /* @__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: "hidden h-3.5 w-3.5 group-data-[state=indeterminate]:block",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+        }
+      )
+    ] })
+  }
+));
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
+//# sourceMappingURL=checkbox.js.map
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/checkbox/checkbox.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACEA,IAAM,QAAA,GAAiB,iBAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,qBAC3B,GAAA;AAAA,EAAmB,iBAAA,CAAA,IAAA;AAAA,EAAlB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,uDAAA;AAAA,MACA,iEAAA;AAAA,MACA,qDAAA;AAAA,MACA,sCAAA;AAAA,MACA,qGAAA;AAAA,MACA,iDAAA;AAAA,MACA,kHAAA;AAAA,MACA,oIAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,+BAAmB,iBAAA,CAAA,SAAA,EAAlB,EAA4B,SAAA,EAAW,EAAA,CAAG,+CAA+C,CAAA,EAGzF,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,KAAA,EAAM,4BAAA;AAAA,UACN,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,WAAA,EAAY,GAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UACf,SAAA,EAAU,qDAAA;AAAA,UACV,aAAA,EAAY,MAAA;AAAA,UAEZ,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAS,MAAA,EAAO,gBAAA,EAAiB;AAAA;AAAA,OACnC;AAAA,sBACA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,KAAA,EAAM,4BAAA;AAAA,UACN,OAAA,EAAQ,WAAA;AAAA,UACR,IAAA,EAAK,MAAA;AAAA,UACL,MAAA,EAAO,cAAA;AAAA,UACP,WAAA,EAAY,GAAA;AAAA,UACZ,aAAA,EAAc,OAAA;AAAA,UACd,cAAA,EAAe,OAAA;AAAA,UACf,SAAA,EAAU,2DAAA;AAAA,UACV,aAAA,EAAY,MAAA;AAAA,UAEZ,QAAA,kBAAA,GAAA,CAAC,UAAK,EAAA,EAAG,GAAA,EAAI,IAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK,EAAA,EAAG,IAAA,EAAK;AAAA;AAAA;AACtC,KAAA,EACD;AAAA;AACD,CACA;AACD,QAAA,CAAS,WAAA,GAAc,UAAA","file":"checkbox.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 React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cn } from \"../../lib/utils.js\";\n\n/**\n * An accessible checkbox component built on Radix UI.\n * Supports checked, unchecked, and indeterminate states with smooth animations.\n */\nexport type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;\n\nconst Checkbox = React.forwardRef<\n\tReact.ComponentRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxProps\n>(({ className, ...props }, ref) => (\n\t<CheckboxPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"group h-4 w-4 shrink-0 rounded-sm border border-input\",\n\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\"shadow-sm inset-ring-1 inset-ring-foreground/[0.06]\",\n\t\t\t\"hover:border-ring/50 hover:shadow-md\",\n\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\t\"disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\"data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground\",\n\t\t\t\"data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CheckboxPrimitive.Indicator className={cn(\"flex items-center justify-center text-current\")}>\n\t\t\t{/* ✓ when checked; dash when indeterminate. The Root has `group`, so each icon\n\t\t\t    shows only when the Root's data-state matches. */}\n\t\t\t<svg\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeWidth=\"3\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\tclassName=\"hidden h-3.5 w-3.5 group-data-[state=checked]:block\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<polyline points=\"20 6 9 17 4 12\" />\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\tfill=\"none\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeWidth=\"3\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\tclassName=\"hidden h-3.5 w-3.5 group-data-[state=indeterminate]:block\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\" />\n\t\t\t</svg>\n\t\t</CheckboxPrimitive.Indicator>\n\t</CheckboxPrimitive.Root>\n));\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n"]}

package/dist/cluster.d.ts

@@ -0,0 +1,34 @@
+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 Cluster — horizontal flex flow with wrap.
+ * `gap` and `justify` pull from shared layout-variant maps; `align` adds
+ * `baseline` (text-baseline alignment for mixed-size siblings).
+ */
+declare const clusterVariants: (props?: ({
+    gap?: "sm" | "lg" | "md" | "xl" | "xs" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "start" | "end" | "between" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Props for the Cluster component. */
+interface ClusterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof clusterVariants> {
+}
+/**
+ * Horizontal flex flow with wrap. Children flow left-to-right and wrap to next line as needed.
+ * @param props - Cluster props including `gap`, `align`, and `justify` variant keys.
+ * @returns A flex row that wraps with consistent gap.
+ * @example
+ * ```tsx
+ * <Cluster gap="sm">
+ *   <Badge>react</Badge>
+ *   <Badge>typescript</Badge>
+ *   <Badge>tailwind</Badge>
+ * </Cluster>
+ * ```
+ */
+declare function Cluster({ className, gap, align, justify, ...props }: ClusterProps): react_jsx_runtime.JSX.Element;
+
+export { Cluster, type ClusterProps, clusterVariants };

package/dist/cluster.js

@@ -0,0 +1,50 @@
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/primitives/cluster/cluster.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/primitives/_shared/layout-variants.ts
+var gapVariants = {
+  xs: "gap-[var(--gap-xs,0.25rem)]",
+  sm: "gap-[var(--gap-sm,0.5rem)]",
+  md: "gap-[var(--gap-md,1rem)]",
+  lg: "gap-[var(--gap-lg,1.5rem)]",
+  xl: "gap-[var(--gap-xl,2rem)]"
+};
+var justifyVariants = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+var clusterAlignVariants = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var clusterVariants = cva("flex flex-wrap", {
+  variants: {
+    gap: gapVariants,
+    align: clusterAlignVariants,
+    justify: justifyVariants
+  },
+  defaultVariants: {
+    gap: "md",
+    align: "center",
+    justify: "start"
+  }
+});
+function Cluster({ className, gap, align, justify, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(clusterVariants({ gap, align, justify }), className), ...props });
+}
+
+export { Cluster, clusterVariants };
+//# sourceMappingURL=cluster.js.map
+//# sourceMappingURL=cluster.js.map

package/dist/cluster.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/_shared/layout-variants.ts","../src/primitives/cluster/cluster.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;;;ACCO,IAAM,WAAA,GAAc;AAAA,EAC1B,EAAA,EAAI,6BAAA;AAAA,EACJ,EAAA,EAAI,4BAAA;AAAA,EACJ,EAAA,EAAI,0BAAA;AAAA,EACJ,EAAA,EAAI,4BAAA;AAAA,EACJ,EAAA,EAAI;AACL,CAAA;AAGO,IAAM,eAAA,GAAkB;AAAA,EAC9B,KAAA,EAAO,eAAA;AAAA,EACP,MAAA,EAAQ,gBAAA;AAAA,EACR,GAAA,EAAK,aAAA;AAAA,EACL,OAAA,EAAS;AACV,CAAA;AAWO,IAAM,oBAAA,GAAuB;AAAA,EACnC,KAAA,EAAO,aAAA;AAAA,EACP,MAAA,EAAQ,cAAA;AAAA,EACR,GAAA,EAAK,WAAA;AAAA,EACL,OAAA,EAAS,eAAA;AAAA,EACT,QAAA,EAAU;AACX,CAAA;AC5BA,IAAM,eAAA,GAAkB,IAAI,gBAAA,EAAkB;AAAA,EAC7C,QAAA,EAAU;AAAA,IACT,GAAA,EAAK,WAAA;AAAA,IACL,KAAA,EAAO,oBAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACV;AAAA,EACA,eAAA,EAAiB;AAAA,IAChB,GAAA,EAAK,IAAA;AAAA,IACL,KAAA,EAAO,QAAA;AAAA,IACP,OAAA,EAAS;AAAA;AAEX,CAAC;AAoBD,SAAS,OAAA,CAAQ,EAAE,SAAA,EAAW,GAAA,EAAK,OAAO,OAAA,EAAS,GAAG,OAAM,EAAiB;AAC5E,EAAA,uBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,gBAAgB,EAAE,GAAA,EAAK,KAAA,EAAO,OAAA,EAAS,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAEtF","file":"cluster.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","/**\n * Single source of truth for layout-primitive CVA variant maps.\n *\n * Stack, Cluster, Grid all share `gap` and `justify` value sets; align values\n * differ slightly (`stretch` for column-like flows, `baseline` for row flows).\n * Centralizing the maps here keeps token names and Tailwind classes in one\n * file — when the gap scale changes (renamed token, new step, etc.), all\n * three components update together.\n */\n\n/** Gap scale bound to `--gap-*` tokens. Used by Stack, Cluster, Grid. */\nexport const gapVariants = {\n\txs: \"gap-[var(--gap-xs,0.25rem)]\",\n\tsm: \"gap-[var(--gap-sm,0.5rem)]\",\n\tmd: \"gap-[var(--gap-md,1rem)]\",\n\tlg: \"gap-[var(--gap-lg,1.5rem)]\",\n\txl: \"gap-[var(--gap-xl,2rem)]\",\n} as const;\n\n/** `justify-content` values shared by Stack and Cluster. */\nexport const justifyVariants = {\n\tstart: \"justify-start\",\n\tcenter: \"justify-center\",\n\tend: \"justify-end\",\n\tbetween: \"justify-between\",\n} as const;\n\n/** Cross-axis `align-items` values for vertical/grid flows (column-like). */\nexport const flexAlignVariants = {\n\tstart: \"items-start\",\n\tcenter: \"items-center\",\n\tend: \"items-end\",\n\tstretch: \"items-stretch\",\n} as const;\n\n/** Cross-axis `align-items` values for horizontal flows. Includes `baseline`. */\nexport const clusterAlignVariants = {\n\tstart: \"items-start\",\n\tcenter: \"items-center\",\n\tend: \"items-end\",\n\tstretch: \"items-stretch\",\n\tbaseline: \"items-baseline\",\n} as const;\n","import { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport {\n\tclusterAlignVariants,\n\tgapVariants,\n\tjustifyVariants,\n} from \"../_shared/layout-variants.js\";\n\n/**\n * CVA variants for Cluster — horizontal flex flow with wrap.\n * `gap` and `justify` pull from shared layout-variant maps; `align` adds\n * `baseline` (text-baseline alignment for mixed-size siblings).\n */\nconst clusterVariants = cva(\"flex flex-wrap\", {\n\tvariants: {\n\t\tgap: gapVariants,\n\t\talign: clusterAlignVariants,\n\t\tjustify: justifyVariants,\n\t},\n\tdefaultVariants: {\n\t\tgap: \"md\",\n\t\talign: \"center\",\n\t\tjustify: \"start\",\n\t},\n});\n\n/** Props for the Cluster component. */\nexport interface ClusterProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof clusterVariants> {}\n\n/**\n * Horizontal flex flow with wrap. Children flow left-to-right and wrap to next line as needed.\n * @param props - Cluster props including `gap`, `align`, and `justify` variant keys.\n * @returns A flex row that wraps with consistent gap.\n * @example\n * ```tsx\n * <Cluster gap=\"sm\">\n *   <Badge>react</Badge>\n *   <Badge>typescript</Badge>\n *   <Badge>tailwind</Badge>\n * </Cluster>\n * ```\n */\nfunction Cluster({ className, gap, align, justify, ...props }: ClusterProps) {\n\treturn (\n\t\t<div className={cn(clusterVariants({ gap, align, justify }), className)} {...props} />\n\t);\n}\n\nexport { Cluster, clusterVariants };\n"]}

package/dist/collapsible.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+/** Root container controlling the expanded state of the content. */
+declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+/** The element that toggles the Collapsible open/closed. */
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** The collapsible content shown/hidden by the trigger. */
+declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/collapsible.js

@@ -0,0 +1,10 @@
+"use client";
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger };
+//# sourceMappingURL=collapsible.js.map
+//# sourceMappingURL=collapsible.js.map

package/dist/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/collapsible/collapsible.tsx"],"names":["CollapsibleTrigger","CollapsibleContent"],"mappings":";;AAKA,IAAM,WAAA,GAAmC,oBAAA,CAAA;AAGzC,IAAMA,mBAAAA,GAA0C,oBAAA,CAAA;AAGhD,IAAMC,mBAAAA,GAA0C,oBAAA,CAAA","file":"collapsible.js","sourcesContent":["\"use client\";\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\n\n/** Root container controlling the expanded state of the content. */\nconst Collapsible = CollapsiblePrimitive.Root;\n\n/** The element that toggles the Collapsible open/closed. */\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;\n\n/** The collapsible content shown/hidden by the trigger. */\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"]}

package/dist/color-picker.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Props for the ColorPicker component. */
+interface ColorPickerProps {
+    /**
+     * Current color as an HSL triplet string (`"<H> <S>% <L>%"`, e.g. `"240 5.9% 10%"`).
+     * Match the format used by `@hex-core/tokens`; round-trip safe.
+     */
+    value: string;
+    /**
+     * Called with the next HSL triplet whenever the user drags a slider or commits a valid hex value.
+     * Not called for invalid hex input — the picker keeps the prior value until the input parses cleanly.
+     */
+    onChange: (value: string) => void;
+    /**
+     * Disable interaction. Native `disabled` attribute is set on the trigger so the
+     * popover doesn't open via mouse or keyboard activation. Tab focus still lands
+     * on the trigger per browser defaults; if you want to fully remove it from the
+     * tab order, wrap in a parent that handles `tabIndex` accordingly.
+     */
+    disabled?: boolean;
+    /** Accessible name for the trigger button (defaults to "Pick color"). */
+    "aria-label"?: string;
+    /** Additional class names merged onto the trigger. */
+    className?: string;
+}
+/**
+ * HSL-native color picker. Edits an HSL triplet directly via three sliders
+ * (H/S/L), with a hex input as a display adapter.
+ *
+ * Round-trip safe: triplet → hex → triplet preserves the slider state because
+ * sliders are the source of truth and hex updates them only when valid.
+ *
+ * @param props - Controlled component; `value` and `onChange` are required.
+ * @returns A trigger button that opens a popover with H/S/L sliders + hex input.
+ * @example
+ * ```tsx
+ * const [color, setColor] = React.useState("240 5.9% 10%");
+ * <ColorPicker value={color} onChange={setColor} aria-label="Primary color" />
+ * ```
+ */
+declare function ColorPicker({ value, onChange, disabled, "aria-label": ariaLabel, className, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+export { ColorPicker, type ColorPickerProps };

package/dist/color-picker.js

@@ -0,0 +1,321 @@
+"use client";
+import * as React5 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/lib/color.ts
+function parseHslTriplet(triplet) {
+  const parts = triplet.trim().split(/\s+/);
+  return {
+    h: Number.parseFloat(parts[0]) || 0,
+    s: Number.parseFloat(parts[1]) || 0,
+    l: Number.parseFloat(parts[2]) || 0
+  };
+}
+function formatHslTriplet({ h, s, l }) {
+  const round = (n) => Math.abs(n - Math.round(n)) < 1e-6 ? `${Math.round(n)}` : n.toFixed(1);
+  return `${Math.round(h)} ${round(s)}% ${round(l)}%`;
+}
+function hslToRgb(h, s, l) {
+  const sN = s / 100;
+  const lN = l / 100;
+  const k = (n) => (n + h / 30) % 12;
+  const a = sN * Math.min(lN, 1 - lN);
+  const f = (n) => lN - a * Math.max(-1, Math.min(k(n) - 3, 9 - k(n), 1));
+  return {
+    r: Math.round(255 * f(0)),
+    g: Math.round(255 * f(8)),
+    b: Math.round(255 * f(4))
+  };
+}
+function rgbToHsl(r, g, b) {
+  const rN = r / 255;
+  const gN = g / 255;
+  const bN = b / 255;
+  const max = Math.max(rN, gN, bN);
+  const min = Math.min(rN, gN, bN);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    if (max === rN) h = (gN - bN) / d + (gN < bN ? 6 : 0);
+    else if (max === gN) h = (bN - rN) / d + 2;
+    else h = (rN - gN) / d + 4;
+    h /= 6;
+  }
+  return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hslTripletToHex(triplet) {
+  const { h, s, l } = parseHslTriplet(triplet);
+  const { r, g, b } = hslToRgb(h, s, l);
+  const toHex = (n) => n.toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function hexToHslTriplet(hex) {
+  const clean = hex.trim().replace(/^#/, "");
+  let normalized;
+  if (/^[0-9a-fA-F]{3}$/.test(clean)) {
+    normalized = clean.split("").map((c) => c + c).join("");
+  } else if (/^[0-9a-fA-F]{6}$/.test(clean)) {
+    normalized = clean;
+  } else {
+    return null;
+  }
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  return formatHslTriplet(rgbToHsl(r, g, b));
+}
+var Input = React5.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";
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React5.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props })
+);
+Label.displayName = "Label";
+var Slider = React5.forwardRef(({ className, thumbLabels, ...props }, ref) => {
+  const values = props.value ?? props.defaultValue ?? [0];
+  const rootLabel = props["aria-label"];
+  const rootLabelledBy = props["aria-labelledby"];
+  if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && thumbLabels && thumbLabels.length !== values.length) {
+    console.warn(
+      `Slider: thumbLabels.length (${thumbLabels.length}) does not match value.length (${values.length}). Missing labels fall back to indexed names; extra labels are ignored.`
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      ref,
+      className: cn("relative flex w-full touch-none select-none items-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full border border-foreground/[0.08] bg-secondary", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
+        values.map((_, i) => {
+          const explicit = thumbLabels?.[i];
+          const fallback = values.length === 1 ? rootLabel : rootLabel ? `${rootLabel} (${i + 1} of ${values.length})` : void 0;
+          return /* @__PURE__ */ jsx(
+            SliderPrimitive.Thumb,
+            {
+              "aria-label": explicit ?? fallback,
+              "aria-labelledby": explicit || fallback ? void 0 : rootLabelledBy,
+              className: cn(
+                "block h-5 w-5 rounded-full border-2 border-primary bg-background",
+                "transition-all duration-[var(--duration-normal,200ms)] ease-out shadow-md",
+                "hover:shadow-lg hover:scale-110",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                "disabled:pointer-events-none disabled:opacity-50"
+              )
+            },
+            i
+          );
+        })
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverContent = React5.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
+      "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",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+var INTEGER_EPSILON = 1e-6;
+var looksInteger = (n) => Math.abs(n - Math.round(n)) < INTEGER_EPSILON;
+function ColorPicker({
+  value,
+  onChange,
+  disabled,
+  "aria-label": ariaLabel = "Pick color",
+  className
+}) {
+  const hsl = React5.useMemo(() => parseHslTriplet(value), [value]);
+  const hex = React5.useMemo(() => hslTripletToHex(value), [value]);
+  const update = React5.useCallback(
+    (patch) => {
+      onChange(formatHslTriplet({ ...hsl, ...patch }));
+    },
+    [hsl, onChange]
+  );
+  const hexInputRef = React5.useRef(null);
+  const [hexBuffer, setHexBuffer] = React5.useState(hex);
+  React5.useEffect(() => {
+    if (typeof document === "undefined" || document.activeElement !== hexInputRef.current) {
+      setHexBuffer(hex);
+    }
+  }, [hex]);
+  const handleHexChange = (e) => {
+    const next = e.target.value;
+    setHexBuffer(next);
+    const triplet = hexToHslTriplet(next);
+    if (triplet !== null) onChange(triplet);
+  };
+  const hexId = React5.useId();
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": ariaLabel,
+        className: cn(
+          "inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 text-sm shadow-sm",
+          "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "hover:shadow-md disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "h-5 w-5 rounded-sm border border-border",
+              style: { backgroundColor: `hsl(${value})` }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-xs uppercase", children: hex })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-72 p-4", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        SliderRow,
+        {
+          label: "Hue",
+          suffix: "\xB0",
+          value: hsl.h,
+          max: 360,
+          step: 1,
+          onChange: (h) => update({ h })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SliderRow,
+        {
+          label: "Saturation",
+          suffix: "%",
+          value: hsl.s,
+          max: 100,
+          step: 0.1,
+          onChange: (s) => update({ s })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SliderRow,
+        {
+          label: "Lightness",
+          suffix: "%",
+          value: hsl.l,
+          max: 100,
+          step: 0.1,
+          onChange: (l) => update({ l })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: hexId, className: "text-xs", children: "Hex" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: hexId,
+              ref: hexInputRef,
+              value: hexBuffer,
+              onChange: handleHexChange,
+              className: "font-mono text-xs uppercase",
+              spellCheck: false,
+              autoComplete: "off"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "h-9 w-9 shrink-0 rounded-md border border-border",
+            style: { backgroundColor: `hsl(${value})` }
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+function SliderRow({ label, suffix, value, max, step, onChange }) {
+  const display = looksInteger(value) ? `${Math.round(value)}` : value.toFixed(1);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Label, { className: "text-xs", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: [
+        display,
+        suffix
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Slider,
+      {
+        value: [value],
+        min: 0,
+        max,
+        step,
+        "aria-label": label,
+        onValueChange: (values) => onChange(values[0] ?? 0)
+      }
+    )
+  ] });
+}
+
+export { ColorPicker };
+//# sourceMappingURL=color-picker.js.map
+//# sourceMappingURL=color-picker.js.map