@hex-core/components 1.3.1 → 1.4.0

package/dist/time-picker.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+interface TimePickerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "size"> {
+    /** Controlled time value as `"HH:MM"` or `"HH:MM:SS"` (24-hour). */
+    value?: string;
+    /** Fired with the new `"HH:MM"` (or `"HH:MM:SS"`) string when the user picks a time. */
+    onChange?: (value: string) => void;
+    /**
+     * Step in seconds — `60` shows HH:MM only (default), `1` shows HH:MM:SS.
+     * Smaller values change the spinner increment in supported browsers.
+     */
+    step?: number;
+    /** Earliest selectable time as `"HH:MM"`. */
+    min?: string;
+    /** Latest selectable time as `"HH:MM"`. */
+    max?: string;
+    /** Disable the input. */
+    disabled?: boolean;
+    /** Accessible label for the trigger (required when no adjacent visible <label>). */
+    "aria-label"?: string;
+}
+/**
+ * Time input — styled wrapper around the native `<input type="time">` so the
+ * browser handles 12/24-hour locale, keyboard arrow stepping, and screen-reader
+ * announcement. Value is a `"HH:MM"` (or `"HH:MM:SS"` when `step={1}`) string.
+ *
+ * For free-form composite hour/minute fields with explicit AM/PM segments,
+ * compose Input + Select yourself — the native input covers ~95% of TimePicker
+ * use cases with full a11y, including keyboard-driven hour/minute spinning.
+ * @returns A token-styled native time input.
+ */
+declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLInputElement>>;
+
+export { TimePicker, type TimePickerProps };

package/dist/time-picker.js

@@ -0,0 +1,50 @@
+"use client";
+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 TimePicker = React.forwardRef(
+  ({
+    value,
+    onChange,
+    step,
+    min,
+    max,
+    disabled,
+    className,
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "time",
+        value: value ?? "",
+        step,
+        min,
+        max,
+        disabled,
+        "aria-label": ariaLabel,
+        onChange: (e) => onChange?.(e.target.value),
+        className: cn(
+          "inline-flex h-[var(--control-height-md,2.5rem)] w-[160px] items-center rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm font-normal 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",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "[&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 hover:[&::-webkit-calendar-picker-indicator]:opacity-100",
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+TimePicker.displayName = "TimePicker";
+
+export { TimePicker };
+//# sourceMappingURL=time-picker.js.map
+//# sourceMappingURL=time-picker.js.map

package/dist/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/time-picker/time-picker.tsx"],"names":[],"mappings":";;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;AC6BA,IAAM,UAAA,GAAmB,KAAA,CAAA,UAAA;AAAA,EACxB,CACC;AAAA,IACC,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,KAEJ,GAAA,KACI;AACJ,IAAA,uBACC,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,IAAA,EAAK,MAAA;AAAA,QACL,OAAO,KAAA,IAAS,EAAA;AAAA,QAChB,IAAA;AAAA,QACA,GAAA;AAAA,QACA,GAAA;AAAA,QACA,QAAA;AAAA,QACA,YAAA,EAAY,SAAA;AAAA,QACZ,UAAU,CAAC,CAAA,KAAM,QAAA,GAAW,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,QAC1C,SAAA,EAAW,EAAA;AAAA,UACV,gQAAA;AAAA,UACA,qGAAA;AAAA,UACA,kDAAA;AAAA,UACA,kKAAA;AAAA,UACA;AAAA,SACD;AAAA,QACC,GAAG;AAAA;AAAA,KACL;AAAA,EAEF;AACD;AACA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"time-picker.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 { cn } from \"../../lib/utils.js\";\n\ninterface TimePickerProps\n\textends Omit<\n\t\tReact.InputHTMLAttributes<HTMLInputElement>,\n\t\t\"type\" | \"value\" | \"onChange\" | \"size\"\n\t> {\n\t/** Controlled time value as `\"HH:MM\"` or `\"HH:MM:SS\"` (24-hour). */\n\tvalue?: string;\n\t/** Fired with the new `\"HH:MM\"` (or `\"HH:MM:SS\"`) string when the user picks a time. */\n\tonChange?: (value: string) => void;\n\t/**\n\t * Step in seconds — `60` shows HH:MM only (default), `1` shows HH:MM:SS.\n\t * Smaller values change the spinner increment in supported browsers.\n\t */\n\tstep?: number;\n\t/** Earliest selectable time as `\"HH:MM\"`. */\n\tmin?: string;\n\t/** Latest selectable time as `\"HH:MM\"`. */\n\tmax?: string;\n\t/** Disable the input. */\n\tdisabled?: boolean;\n\t/** Accessible label for the trigger (required when no adjacent visible <label>). */\n\t\"aria-label\"?: string;\n}\n\n/**\n * Time input — styled wrapper around the native `<input type=\"time\">` so the\n * browser handles 12/24-hour locale, keyboard arrow stepping, and screen-reader\n * announcement. Value is a `\"HH:MM\"` (or `\"HH:MM:SS\"` when `step={1}`) string.\n *\n * For free-form composite hour/minute fields with explicit AM/PM segments,\n * compose Input + Select yourself — the native input covers ~95% of TimePicker\n * use cases with full a11y, including keyboard-driven hour/minute spinning.\n * @returns A token-styled native time input.\n */\nconst TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(\n\t(\n\t\t{\n\t\t\tvalue,\n\t\t\tonChange,\n\t\t\tstep,\n\t\t\tmin,\n\t\t\tmax,\n\t\t\tdisabled,\n\t\t\tclassName,\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\tref={ref}\n\t\t\t\ttype=\"time\"\n\t\t\t\tvalue={value ?? \"\"}\n\t\t\t\tstep={step}\n\t\t\t\tmin={min}\n\t\t\t\tmax={max}\n\t\t\t\tdisabled={disabled}\n\t\t\t\taria-label={ariaLabel}\n\t\t\t\tonChange={(e) => onChange?.(e.target.value)}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"inline-flex h-[var(--control-height-md,2.5rem)] w-[160px] items-center rounded-md border border-input bg-background px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] text-sm font-normal transition-all duration-[var(--duration-normal,200ms)] ease-out\",\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 disabled:opacity-50\",\n\t\t\t\t\t\"[&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-60 hover:[&::-webkit-calendar-picker-indicator]:opacity-100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t/>\n\t\t);\n\t},\n);\nTimePicker.displayName = \"TimePicker\";\n\nexport { TimePicker };\nexport type { TimePickerProps };\n"]}

package/dist/timeline.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type TimelineStatus = "default" | "success" | "warning" | "error" | "info";
+interface TimelineEvent {
+    /** Stable unique id used as the React key. */
+    id: string;
+    /** Headline for the event. */
+    title: string;
+    /** Optional timestamp/metadata (e.g. "2 hours ago", "2026-04-27 14:30"). */
+    timestamp?: React.ReactNode;
+    /** Optional secondary text/body. */
+    description?: React.ReactNode;
+    /** Optional icon override for the indicator. Replaces the default dot. */
+    icon?: React.ReactNode;
+    /** Color variant for the indicator. */
+    status?: TimelineStatus;
+}
+interface TimelineProps extends Omit<React.HTMLAttributes<HTMLOListElement>, "aria-label"> {
+    /** Ordered list of chronological events. */
+    events: TimelineEvent[];
+    /** Indicator size — `"md"` by default. */
+    size?: "sm" | "md";
+    /** Required accessible name for the ordered list. */
+    "aria-label": string;
+}
+/**
+ * Vertical chronological event feed (activity log, audit trail, release notes).
+ * Pure semantic HTML — `<ol>` of `<li>`. Events expose an optional icon, a
+ * status color, a timestamp, and a description; status is purely visual, no
+ * aria-current is set since events are historical, not navigational.
+ *
+ * For Gantt-style project timelines, build a custom layout — Timeline is for
+ * event feeds, not scheduling.
+ * @returns An accessible vertical event list.
+ */
+declare function Timeline({ events, size, "aria-label": ariaLabel, className, ...rest }: TimelineProps): react_jsx_runtime.JSX.Element;
+declare namespace Timeline {
+    var displayName: string;
+}
+
+export { Timeline, type TimelineEvent, type TimelineProps, type TimelineStatus };

package/dist/timeline.js

@@ -0,0 +1,84 @@
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/timeline/timeline.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var indicator = cva(
+  "relative z-10 inline-flex shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-[var(--duration-normal,200ms)] ease-out",
+  {
+    variants: {
+      status: {
+        default: "bg-background border-input text-muted-foreground",
+        success: "bg-background border-primary text-primary",
+        warning: "bg-background border-[var(--color-warning,oklch(0.78_0.16_82))] text-[var(--color-warning,oklch(0.78_0.16_82))]",
+        error: "bg-destructive border-destructive text-destructive-foreground",
+        info: "bg-background border-ring text-ring"
+      },
+      size: {
+        sm: "h-5 w-5 text-[10px]",
+        md: "h-7 w-7 text-xs"
+      }
+    },
+    defaultVariants: { status: "default", size: "md" }
+  }
+);
+function DefaultDot() {
+  return /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current", "aria-hidden": "true" });
+}
+function Timeline({
+  events,
+  size = "md",
+  "aria-label": ariaLabel,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "aria-label": ariaLabel,
+      className: cn("flex flex-col list-none p-0 m-0", className),
+      ...rest,
+      children: events.map((event, index) => {
+        const isLast = index === events.length - 1;
+        const status = event.status ?? "default";
+        return /* @__PURE__ */ jsxs("li", { className: "relative flex gap-[var(--space-3,0.75rem)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsx("span", { className: indicator({ status, size }), children: event.icon ?? /* @__PURE__ */ jsx(DefaultDot, {}) }),
+            !isLast ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "w-px flex-1 bg-input min-h-[var(--space-6,1.5rem)]"
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex flex-col gap-[var(--space-1,0.25rem)] min-w-0",
+                !isLast && "pb-[var(--space-6,1.5rem)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-[var(--space-2,0.5rem)]", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: event.title }),
+                  event.timestamp ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: event.timestamp }) : null
+                ] }),
+                event.description ? /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: event.description }) : null
+              ]
+            }
+          )
+        ] }, event.id);
+      })
+    }
+  );
+}
+Timeline.displayName = "Timeline";
+
+export { Timeline };
+//# sourceMappingURL=timeline.js.map
+//# sourceMappingURL=timeline.js.map

package/dist/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/timeline/timeline.tsx"],"names":[],"mappings":"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","file":"timeline.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 { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\ntype TimelineStatus = \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\ninterface TimelineEvent {\n\t/** Stable unique id used as the React key. */\n\tid: string;\n\t/** Headline for the event. */\n\ttitle: string;\n\t/** Optional timestamp/metadata (e.g. \"2 hours ago\", \"2026-04-27 14:30\"). */\n\ttimestamp?: React.ReactNode;\n\t/** Optional secondary text/body. */\n\tdescription?: React.ReactNode;\n\t/** Optional icon override for the indicator. Replaces the default dot. */\n\ticon?: React.ReactNode;\n\t/** Color variant for the indicator. */\n\tstatus?: TimelineStatus;\n}\n\n/*\n * `warning` uses a token-with-fallback so themes can override `--color-warning`\n * without touching component source. The OKLCH default lands at a desaturated\n * amber that holds AA contrast on both light and dark backgrounds.\n */\nconst indicator = cva(\n\t\"relative z-10 inline-flex shrink-0 items-center justify-center rounded-full border-2 transition-colors duration-[var(--duration-normal,200ms)] ease-out\",\n\t{\n\t\tvariants: {\n\t\t\tstatus: {\n\t\t\t\tdefault: \"bg-background border-input text-muted-foreground\",\n\t\t\t\tsuccess: \"bg-background border-primary text-primary\",\n\t\t\t\twarning:\n\t\t\t\t\t\"bg-background border-[var(--color-warning,oklch(0.78_0.16_82))] text-[var(--color-warning,oklch(0.78_0.16_82))]\",\n\t\t\t\terror: \"bg-destructive border-destructive text-destructive-foreground\",\n\t\t\t\tinfo: \"bg-background border-ring text-ring\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tsm: \"h-5 w-5 text-[10px]\",\n\t\t\t\tmd: \"h-7 w-7 text-xs\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { status: \"default\", size: \"md\" },\n\t},\n);\n\ninterface TimelineProps\n\textends Omit<React.HTMLAttributes<HTMLOListElement>, \"aria-label\"> {\n\t/** Ordered list of chronological events. */\n\tevents: TimelineEvent[];\n\t/** Indicator size — `\"md\"` by default. */\n\tsize?: \"sm\" | \"md\";\n\t/** Required accessible name for the ordered list. */\n\t\"aria-label\": string;\n}\n\n/** Solid dot rendered inside the indicator when no per-event icon is supplied. */\nfunction DefaultDot() {\n\treturn <span className=\"h-1.5 w-1.5 rounded-full bg-current\" aria-hidden=\"true\" />;\n}\n\n/**\n * Vertical chronological event feed (activity log, audit trail, release notes).\n * Pure semantic HTML — `<ol>` of `<li>`. Events expose an optional icon, a\n * status color, a timestamp, and a description; status is purely visual, no\n * aria-current is set since events are historical, not navigational.\n *\n * For Gantt-style project timelines, build a custom layout — Timeline is for\n * event feeds, not scheduling.\n * @returns An accessible vertical event list.\n */\nfunction Timeline({\n\tevents,\n\tsize = \"md\",\n\t\"aria-label\": ariaLabel,\n\tclassName,\n\t...rest\n}: TimelineProps) {\n\treturn (\n\t\t<ol\n\t\t\taria-label={ariaLabel}\n\t\t\tclassName={cn(\"flex flex-col list-none p-0 m-0\", className)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{events.map((event, index) => {\n\t\t\t\tconst isLast = index === events.length - 1;\n\t\t\t\tconst status = event.status ?? \"default\";\n\t\t\t\treturn (\n\t\t\t\t\t<li key={event.id} className=\"relative flex gap-[var(--space-3,0.75rem)]\">\n\t\t\t\t\t\t<div className=\"flex flex-col items-center\">\n\t\t\t\t\t\t\t<span className={indicator({ status, size })}>\n\t\t\t\t\t\t\t\t{event.icon ?? <DefaultDot />}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{!isLast ? (\n\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\tclassName=\"w-px flex-1 bg-input min-h-[var(--space-6,1.5rem)]\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex flex-col gap-[var(--space-1,0.25rem)] min-w-0\",\n\t\t\t\t\t\t\t\t!isLast && \"pb-[var(--space-6,1.5rem)]\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"flex flex-wrap items-baseline gap-[var(--space-2,0.5rem)]\">\n\t\t\t\t\t\t\t\t<span className=\"text-sm font-medium text-foreground\">\n\t\t\t\t\t\t\t\t\t{event.title}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{event.timestamp ? (\n\t\t\t\t\t\t\t\t\t<span className=\"text-xs text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t{event.timestamp}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{event.description ? (\n\t\t\t\t\t\t\t\t<div className=\"text-sm text-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{event.description}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ol>\n\t);\n}\nTimeline.displayName = \"Timeline\";\n\nexport { Timeline };\nexport type { TimelineEvent, TimelineProps, TimelineStatus };\n"]}

package/dist/toggle-group.d.ts

@@ -0,0 +1,17 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+/** Root container for a set of toggles (single-select or multi-select). */
+declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
+/** A single toggle option within a ToggleGroup. Inherits variant/size from context. */
+declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+
+export { ToggleGroup, ToggleGroupItem };

package/dist/toggle-group.js

@@ -0,0 +1,83 @@
+"use client";
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var toggleVariants = cva(
+  [
+    "inline-flex items-center justify-center rounded-md text-sm font-medium",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+    "hover:bg-muted hover:text-muted-foreground",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-sm inset-ring-1 inset-ring-foreground/[0.06] hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-[var(--control-height-md,2.5rem)] px-[var(--space-3,0.75rem)] min-w-[var(--control-height-md,2.5rem)]",
+        sm: "h-[var(--control-height-sm,2.25rem)] px-2.5 min-w-[var(--control-height-sm,2.25rem)]",
+        lg: "h-[var(--control-height-lg,2.75rem)] px-5 min-w-[var(--control-height-lg,2.75rem)]"
+      }
+    },
+    defaultVariants: { variant: "default", size: "default" }
+  }
+);
+var Toggle = React2.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    ref,
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+));
+Toggle.displayName = "Toggle";
+var ToggleGroupContext = React2.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroup = React2.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex items-center justify-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroup.displayName = "ToggleGroup";
+var ToggleGroupItem = React2.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React2.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({
+          variant: variant ?? context.variant,
+          size: size ?? context.size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+export { ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=toggle-group.js.map
+//# sourceMappingURL=toggle-group.js.map

package/dist/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/toggle/toggle.tsx","../src/primitives/toggle-group/toggle-group.tsx"],"names":["React","jsx"],"mappings":";;;;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACtB;AAAA,IACC,wEAAA;AAAA,IACA,iEAAA;AAAA,IACA,4CAAA;AAAA,IACA,qGAAA;AAAA,IACA,kDAAA;AAAA,IACA,kEAAA;AAAA,IACA;AAAA,GACD,CAAE,KAAK,GAAG,CAAA;AAAA,EACV;AAAA,IACC,QAAA,EAAU;AAAA,MACT,OAAA,EAAS;AAAA,QACR,OAAA,EAAS,gBAAA;AAAA,QACT,OAAA,EACC;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACL,OAAA,EAAS,yGAAA;AAAA,QACT,EAAA,EAAI,sFAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACL,KACD;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA,EAAW,MAAM,SAAA;AAAU;AAEzD,CAAA;AAMA,IAAM,MAAA,GAAeA,MAAA,CAAA,UAAA,CAGnB,CAAC,EAAE,SAAA,EAAW,SAAS,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1C,GAAA;AAAA,EAAiB,eAAA,CAAA,IAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,IACzD,GAAG;AAAA;AACL,CACA,CAAA;AACD,MAAA,CAAO,WAAA,GAAc,QAAA;ACtCrB,IAAM,qBAA2B,MAAA,CAAA,aAAA,CAAuC;AAAA,EACvE,IAAA,EAAM,SAAA;AAAA,EACN,OAAA,EAAS;AACV,CAAC,CAAA;AAGD,IAAM,WAAA,GAAoB,MAAA,CAAA,UAAA,CAIxB,CAAC,EAAE,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qBACpDC,GAAAA;AAAA,EAAsB,oBAAA,CAAA,IAAA;AAAA,EAArB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,EAAA,CAAG,wCAAA,EAA0C,SAAS,CAAA;AAAA,IAChE,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAAA,GAAAA,CAAC,kBAAA,CAAmB,QAAA,EAAnB,EAA4B,OAAO,EAAE,OAAA,EAAS,IAAA,EAAK,EAAI,QAAA,EAAS;AAAA;AAClE,CACA;AACD,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAM,eAAA,GAAwB,MAAA,CAAA,UAAA,CAI5B,CAAC,EAAE,SAAA,EAAW,QAAA,EAAU,OAAA,EAAS,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC5D,EAAA,MAAM,OAAA,GAAgB,kBAAW,kBAAkB,CAAA;AACnD,EAAA,uBACCA,GAAAA;AAAA,IAAsB,oBAAA,CAAA,IAAA;AAAA,IAArB;AAAA,MACA,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACV,cAAA,CAAe;AAAA,UACd,OAAA,EAAS,WAAW,OAAA,CAAQ,OAAA;AAAA,UAC5B,IAAA,EAAM,QAAQ,OAAA,CAAQ;AAAA,SACtB,CAAA;AAAA,QACD;AAAA,OACD;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACF;AAEF,CAAC;AACD,eAAA,CAAgB,WAAA,GAAc,iBAAA","file":"toggle-group.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 TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nconst toggleVariants = cva(\n\t[\n\t\t\"inline-flex items-center justify-center rounded-md text-sm font-medium\",\n\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\"hover:bg-muted hover:text-muted-foreground\",\n\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n\t\t\"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t].join(\" \"),\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-transparent\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-input bg-transparent shadow-sm inset-ring-1 inset-ring-foreground/[0.06] hover:bg-accent hover:text-accent-foreground\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-[var(--control-height-md,2.5rem)] px-[var(--space-3,0.75rem)] min-w-[var(--control-height-md,2.5rem)]\",\n\t\t\t\tsm: \"h-[var(--control-height-sm,2.25rem)] px-2.5 min-w-[var(--control-height-sm,2.25rem)]\",\n\t\t\t\tlg: \"h-[var(--control-height-lg,2.75rem)] px-5 min-w-[var(--control-height-lg,2.75rem)]\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\", size: \"default\" },\n\t},\n);\n\n/**\n * A two-state button. Stays pressed when toggled on.\n * @returns A styled Radix Toggle root\n */\nconst Toggle = React.forwardRef<\n\tReact.ComponentRef<typeof TogglePrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n\t<TogglePrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(toggleVariants({ variant, size, className }))}\n\t\t{...props}\n\t/>\n));\nToggle.displayName = \"Toggle\";\n\nexport { Toggle, toggleVariants };\n","\"use client\";\n\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport { toggleVariants } from \"../toggle/toggle.js\";\n\ntype ToggleGroupContextValue = VariantProps<typeof toggleVariants>;\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue>({\n\tsize: \"default\",\n\tvariant: \"default\",\n});\n\n/** Root container for a set of toggles (single-select or multi-select). */\nconst ToggleGroup = React.forwardRef<\n\tReact.ComponentRef<typeof ToggleGroupPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n\t\tVariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n\t<ToggleGroupPrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(\"flex items-center justify-center gap-1\", className)}\n\t\t{...props}\n\t>\n\t\t<ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>\n\t</ToggleGroupPrimitive.Root>\n));\nToggleGroup.displayName = \"ToggleGroup\";\n\n/** A single toggle option within a ToggleGroup. Inherits variant/size from context. */\nconst ToggleGroupItem = React.forwardRef<\n\tReact.ComponentRef<typeof ToggleGroupPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n\t\tVariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n\tconst context = React.useContext(ToggleGroupContext);\n\treturn (\n\t\t<ToggleGroupPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\ttoggleVariants({\n\t\t\t\t\tvariant: variant ?? context.variant,\n\t\t\t\t\tsize: size ?? context.size,\n\t\t\t\t}),\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</ToggleGroupPrimitive.Item>\n\t);\n});\nToggleGroupItem.displayName = \"ToggleGroupItem\";\n\nexport { ToggleGroup, ToggleGroupItem };\n"]}

package/dist/toggle.d.ts

@@ -0,0 +1,19 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * A two-state button. Stays pressed when toggled on.
+ * @returns A styled Radix Toggle root
+ */
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
+
+export { Toggle, toggleVariants };

package/dist/toggle.js

@@ -0,0 +1,49 @@
+"use client";
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+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 toggleVariants = cva(
+  [
+    "inline-flex items-center justify-center rounded-md text-sm font-medium",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+    "hover:bg-muted hover:text-muted-foreground",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-sm inset-ring-1 inset-ring-foreground/[0.06] hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-[var(--control-height-md,2.5rem)] px-[var(--space-3,0.75rem)] min-w-[var(--control-height-md,2.5rem)]",
+        sm: "h-[var(--control-height-sm,2.25rem)] px-2.5 min-w-[var(--control-height-sm,2.25rem)]",
+        lg: "h-[var(--control-height-lg,2.75rem)] px-5 min-w-[var(--control-height-lg,2.75rem)]"
+      }
+    },
+    defaultVariants: { variant: "default", size: "default" }
+  }
+);
+var Toggle = React.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+  TogglePrimitive.Root,
+  {
+    ref,
+    className: cn(toggleVariants({ variant, size, className })),
+    ...props
+  }
+));
+Toggle.displayName = "Toggle";
+
+export { Toggle, toggleVariants };
+//# sourceMappingURL=toggle.js.map
+//# sourceMappingURL=toggle.js.map

package/dist/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/toggle/toggle.tsx"],"names":[],"mappings":";;;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACtB;AAAA,IACC,wEAAA;AAAA,IACA,iEAAA;AAAA,IACA,4CAAA;AAAA,IACA,qGAAA;AAAA,IACA,kDAAA;AAAA,IACA,kEAAA;AAAA,IACA;AAAA,GACD,CAAE,KAAK,GAAG,CAAA;AAAA,EACV;AAAA,IACC,QAAA,EAAU;AAAA,MACT,OAAA,EAAS;AAAA,QACR,OAAA,EAAS,gBAAA;AAAA,QACT,OAAA,EACC;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACL,OAAA,EAAS,yGAAA;AAAA,QACT,EAAA,EAAI,sFAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACL,KACD;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,SAAA,EAAW,MAAM,SAAA;AAAU;AAEzD;AAMA,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA,CAGnB,CAAC,EAAE,SAAA,EAAW,SAAS,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC1C,GAAA;AAAA,EAAiB,eAAA,CAAA,IAAA;AAAA,EAAhB;AAAA,IACA,GAAA;AAAA,IACA,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,IACzD,GAAG;AAAA;AACL,CACA;AACD,MAAA,CAAO,WAAA,GAAc,QAAA","file":"toggle.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 TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nconst toggleVariants = cva(\n\t[\n\t\t\"inline-flex items-center justify-center rounded-md text-sm font-medium\",\n\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\"hover:bg-muted hover:text-muted-foreground\",\n\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n\t\t\"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n\t].join(\" \"),\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-transparent\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-input bg-transparent shadow-sm inset-ring-1 inset-ring-foreground/[0.06] hover:bg-accent hover:text-accent-foreground\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-[var(--control-height-md,2.5rem)] px-[var(--space-3,0.75rem)] min-w-[var(--control-height-md,2.5rem)]\",\n\t\t\t\tsm: \"h-[var(--control-height-sm,2.25rem)] px-2.5 min-w-[var(--control-height-sm,2.25rem)]\",\n\t\t\t\tlg: \"h-[var(--control-height-lg,2.75rem)] px-5 min-w-[var(--control-height-lg,2.75rem)]\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\", size: \"default\" },\n\t},\n);\n\n/**\n * A two-state button. Stays pressed when toggled on.\n * @returns A styled Radix Toggle root\n */\nconst Toggle = React.forwardRef<\n\tReact.ComponentRef<typeof TogglePrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n\t<TogglePrimitive.Root\n\t\tref={ref}\n\t\tclassName={cn(toggleVariants({ variant, size, className }))}\n\t\t{...props}\n\t/>\n));\nToggle.displayName = \"Toggle\";\n\nexport { Toggle, toggleVariants };\n"]}

package/dist/tooltip.d.ts

@@ -0,0 +1,13 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+/** Provider required at the root of the app or tree where tooltips are used. */
+declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+/** Root container for a single tooltip. */
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+/** The element that shows the tooltip on hover/focus. */
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/** The floating tooltip content (small, hover-reveal info). */
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip.js

@@ -0,0 +1,33 @@
+"use client";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+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 TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md bg-primary px-[var(--space-3,0.75rem)] py-1.5 text-xs text-primary-foreground shadow-md",
+      "animate-in fade-in-0 zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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
+  }
+) }));
+TooltipContent.displayName = "TooltipContent";
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,eAAA,GAAmC,gBAAA,CAAA;AAGzC,IAAM,OAAA,GAA2B,gBAAA,CAAA;AAGjC,IAAM,cAAA,GAAkC,gBAAA,CAAA;AAGxC,IAAM,cAAA,GAAuB,KAAA,CAAA,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,UAAA,GAAa,CAAA,EAAG,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC3C,GAAA,CAAkB,yBAAjB,EACA,QAAA,kBAAA,GAAA;AAAA,EAAkB,gBAAA,CAAA,OAAA;AAAA,EAAjB;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,yHAAA;AAAA,MACA,iCAAA;AAAA,MACA,gGAAA;AAAA,MACA,6JAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CAAA,EACD,CACA;AACD,cAAA,CAAe,WAAA,GAAc,gBAAA","file":"tooltip.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 TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Provider required at the root of the app or tree where tooltips are used. */\nconst TooltipProvider = TooltipPrimitive.Provider;\n\n/** Root container for a single tooltip. */\nconst Tooltip = TooltipPrimitive.Root;\n\n/** The element that shows the tooltip on hover/focus. */\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\n/** The floating tooltip content (small, hover-reveal info). */\nconst TooltipContent = React.forwardRef<\n\tReact.ComponentRef<typeof TooltipPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal>\n\t\t<TooltipPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 overflow-hidden rounded-md bg-primary px-[var(--space-3,0.75rem)] py-1.5 text-xs text-primary-foreground shadow-md\",\n\t\t\t\t\"animate-in fade-in-0 zoom-in-95\",\n\t\t\t\t\"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n\t\t\t\t\"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\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = \"TooltipContent\";\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hex-core/components",
-  "version": "1.3.1",
-  "description": "AI-native React components for Hex UI — Radix UI + Tailwind CSS with machine-readable schemas.",
+  "version": "1.4.0",
+  "description": "AI-native React components for Hex UI — Radix UI + Tailwind CSS with machine-readable schemas. RSC-aware per-component bundles + tree-shakable.",
   "keywords": [
     "react",
     "components",
@@ -26,12 +26,21 @@
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "sideEffects": false,
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
-    "./tailwind.css": "./tailwind.css"
+    "./schemas": {
+      "types": "./dist/schemas.d.ts",
+      "import": "./dist/schemas.js"
+    },
+    "./tailwind.css": "./tailwind.css",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
+    }
   },
   "files": [
     "dist",
@@ -71,32 +80,75 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@tanstack/react-table": "^8.21.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "fast-glob": "^3.3.3",
     "input-otp": "^1.4.2",
     "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.74.0",
     "react-resizable-panels": "^4.10.0",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.5.0",
-    "vaul": "^1.1.2",
-    "@hex-core/registry": "^0.3.0"
-  },
-  "devDependencies": {
-    "@tanstack/react-table": "^8.21.3",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
     "tsup": "^8.3.0",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vaul": "^1.1.2",
+    "@hex-core/registry": "^0.3.1"
   },
   "peerDependencies": {
+    "@hex-core/registry": "*",
     "@tanstack/react-table": "^8.0.0 || ^9.0.0",
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.0.0 || ^4.0.0",
+    "input-otp": "^1.0.0",
     "react": "^18.0.0 || ^19.0.0",
+    "react-day-picker": "^8.0.0 || ^9.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "react-hook-form": "^7.0.0"
+    "react-hook-form": "^7.0.0",
+    "react-resizable-panels": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "sonner": "^1.0.0 || ^2.0.0",
+    "vaul": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@hex-core/registry": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "cmdk": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "input-otp": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-hook-form": {
+      "optional": true
+    },
+    "react-resizable-panels": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "vaul": {
+      "optional": true
+    }
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node scripts/inject-use-client.mjs",
     "clean": "rm -rf dist",
+    "audit:use-client": "node scripts/audit-use-client.mjs",
     "test": "vitest run"
   }
 }