@hex-core/components 1.3.1 → 1.5.0

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,4 @@
+export { Timeline_alias_1 as Timeline } from './_tsup-dts-rollup.js';
+export { TimelineEvent_alias_1 as TimelineEvent } from './_tsup-dts-rollup.js';
+export { TimelineProps_alias_1 as TimelineProps } from './_tsup-dts-rollup.js';
+export { TimelineStatus_alias_1 as TimelineStatus } from './_tsup-dts-rollup.js';

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,2 @@
+export { ToggleGroup_alias_1 as ToggleGroup } from './_tsup-dts-rollup.js';
+export { ToggleGroupItem_alias_1 as ToggleGroupItem } from './_tsup-dts-rollup.js';

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,2 @@
+export { Toggle_alias_1 as Toggle } from './_tsup-dts-rollup.js';
+export { toggleVariants_alias_1 as toggleVariants } from './_tsup-dts-rollup.js';

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/tool-call.d.ts

@@ -0,0 +1,2 @@
+export { ToolCallProps_alias_1 as ToolCallProps } from './_tsup-dts-rollup.js';
+export { ToolCall_alias_1 as ToolCall } from './_tsup-dts-rollup.js';

package/dist/tool-call.js

@@ -0,0 +1,133 @@
+"use client";
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var STATE_LABEL = {
+  pending: "Pending",
+  running: "Running",
+  result: "Done",
+  error: "Error"
+};
+var STATE_CLASSES = {
+  pending: "bg-muted text-muted-foreground",
+  running: "bg-primary/15 text-primary animate-pulse",
+  result: "bg-accent/30 text-accent-foreground",
+  error: "bg-destructive/15 text-destructive"
+};
+function ToolCall({
+  name,
+  state,
+  args,
+  result,
+  defaultOpen = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    CollapsiblePrimitive.Root,
+    {
+      defaultOpen,
+      className: cn(
+        "overflow-hidden rounded-md border bg-card text-card-foreground",
+        "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+        "data-[state=open]:shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          CollapsiblePrimitive.Trigger,
+          {
+            className: cn(
+              "group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm",
+              "hover:bg-muted/40",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                /* @__PURE__ */ jsx(ToolGlyph, {}),
+                /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-xs text-foreground", children: name }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium",
+                      STATE_CLASSES[state]
+                    ),
+                    children: STATE_LABEL[state]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Chevron, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(CollapsiblePrimitive.Content, { className: "overflow-hidden border-t bg-muted/20 px-3 py-2 text-xs", children: [
+          args !== void 0 ? /* @__PURE__ */ jsx(CodeSection, { label: "Arguments", value: args }) : null,
+          result !== void 0 ? /* @__PURE__ */ jsx(CodeSection, { label: "Result", value: result }) : null,
+          args === void 0 && result === void 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No arguments or result yet." }) : null
+        ] })
+      ]
+    }
+  );
+}
+function CodeSection({ label, value }) {
+  const text = typeof value === "string" ? value : safeStringify(value);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1 py-1", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded bg-background/60 p-2 font-mono text-[11px] leading-snug", children: text })
+  ] });
+}
+function safeStringify(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function ToolGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: "0 0 16 16",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0 text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M11.5 1.5l3 3-2.5 2.5-3-3 2.5-2.5z" }),
+        /* @__PURE__ */ jsx("path", { d: "M9 4l-7 7v3h3l7-7" })
+      ]
+    }
+  );
+}
+function Chevron() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": true,
+      viewBox: "0 0 16 16",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180",
+      children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
+    }
+  );
+}
+
+export { ToolCall };
+//# sourceMappingURL=tool-call.js.map
+//# sourceMappingURL=tool-call.js.map

package/dist/tool-call.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/ai/tool-call/tool-call.tsx"],"names":[],"mappings":"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","file":"tool-call.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 CollapsiblePrimitive from \"@radix-ui/react-collapsible\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport type { ToolCallState } from \"../types.js\";\n\nconst STATE_LABEL: Record<ToolCallState, string> = {\n\tpending: \"Pending\",\n\trunning: \"Running\",\n\tresult: \"Done\",\n\terror: \"Error\",\n};\n\nconst STATE_CLASSES: Record<ToolCallState, string> = {\n\tpending: \"bg-muted text-muted-foreground\",\n\trunning: \"bg-primary/15 text-primary animate-pulse\",\n\tresult: \"bg-accent/30 text-accent-foreground\",\n\terror: \"bg-destructive/15 text-destructive\",\n};\n\n/**\n * Collapsible card displaying a tool / function invocation. Header shows the\n * tool name and lifecycle state badge; body reveals the JSON-stringified\n * arguments and result on expand.\n *\n * Display-only — the component does not run the tool. Wire it up in the\n * consumer (AI SDK `tool-*` parts → ToolCall props, LangChain\n * `AIMessage.tool_calls` → ToolCall props).\n *\n * @example\n * <ToolCall\n *   name=\"searchDocs\"\n *   state=\"result\"\n *   args={{ query: \"auth\" }}\n *   result={{ hits: 12 }}\n * />\n */\nexport interface ToolCallProps {\n\tname: string;\n\tstate: ToolCallState;\n\targs?: unknown;\n\tresult?: unknown;\n\tdefaultOpen?: boolean;\n\tclassName?: string;\n}\n\n/**\n * Renders a tool-invocation card with collapsible details.\n * @param props - tool name, state, optional args/result\n * @returns A Collapsible wrapping a header + JSON body\n */\nfunction ToolCall({\n\tname,\n\tstate,\n\targs,\n\tresult,\n\tdefaultOpen = false,\n\tclassName,\n}: ToolCallProps) {\n\treturn (\n\t\t<CollapsiblePrimitive.Root\n\t\t\tdefaultOpen={defaultOpen}\n\t\t\tclassName={cn(\n\t\t\t\t\"overflow-hidden rounded-md border bg-card text-card-foreground\",\n\t\t\t\t\"transition-all duration-[var(--duration-normal,200ms)] ease-out\",\n\t\t\t\t\"data-[state=open]:shadow-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<CollapsiblePrimitive.Trigger\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm\",\n\t\t\t\t\t\"hover:bg-muted/40\",\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)}\n\t\t\t>\n\t\t\t\t<span className=\"flex min-w-0 items-center gap-2\">\n\t\t\t\t\t<ToolGlyph />\n\t\t\t\t\t<span className=\"truncate font-mono text-xs text-foreground\">{name}</span>\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium\",\n\t\t\t\t\t\t\tSTATE_CLASSES[state],\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{STATE_LABEL[state]}\n\t\t\t\t\t</span>\n\t\t\t\t</span>\n\t\t\t\t<Chevron />\n\t\t\t</CollapsiblePrimitive.Trigger>\n\t\t\t<CollapsiblePrimitive.Content className=\"overflow-hidden border-t bg-muted/20 px-3 py-2 text-xs\">\n\t\t\t\t{args !== undefined ? <CodeSection label=\"Arguments\" value={args} /> : null}\n\t\t\t\t{result !== undefined ? <CodeSection label=\"Result\" value={result} /> : null}\n\t\t\t\t{args === undefined && result === undefined ? (\n\t\t\t\t\t<p className=\"text-muted-foreground\">No arguments or result yet.</p>\n\t\t\t\t) : null}\n\t\t\t</CollapsiblePrimitive.Content>\n\t\t</CollapsiblePrimitive.Root>\n\t);\n}\n\nfunction CodeSection({ label, value }: { label: string; value: unknown }) {\n\tconst text = typeof value === \"string\" ? value : safeStringify(value);\n\treturn (\n\t\t<div className=\"space-y-1 py-1\">\n\t\t\t<div className=\"text-[10px] uppercase tracking-wide text-muted-foreground\">{label}</div>\n\t\t\t<pre className=\"overflow-x-auto rounded bg-background/60 p-2 font-mono text-[11px] leading-snug\">\n\t\t\t\t{text}\n\t\t\t</pre>\n\t\t</div>\n\t);\n}\n\nfunction safeStringify(value: unknown): string {\n\ttry {\n\t\treturn JSON.stringify(value, null, 2);\n\t} catch {\n\t\treturn String(value);\n\t}\n}\n\nfunction ToolGlyph() {\n\treturn (\n\t\t<svg\n\t\t\taria-hidden\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\twidth=\"14\"\n\t\t\theight=\"14\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"shrink-0 text-muted-foreground\"\n\t\t>\n\t\t\t<path d=\"M11.5 1.5l3 3-2.5 2.5-3-3 2.5-2.5z\" />\n\t\t\t<path d=\"M9 4l-7 7v3h3l7-7\" />\n\t\t</svg>\n\t);\n}\n\nfunction Chevron() {\n\treturn (\n\t\t<svg\n\t\t\taria-hidden\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\twidth=\"14\"\n\t\t\theight=\"14\"\n\t\t\tfill=\"none\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tclassName=\"shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180\"\n\t\t>\n\t\t\t<path d=\"M4 6l4 4 4-4\" />\n\t\t</svg>\n\t);\n}\n\nexport { ToolCall };\n"]}

package/dist/tooltip.d.ts

@@ -0,0 +1,4 @@
+export { Tooltip_alias_1 as Tooltip } from './_tsup-dts-rollup.js';
+export { TooltipTrigger_alias_1 as TooltipTrigger } from './_tsup-dts-rollup.js';
+export { TooltipContent_alias_1 as TooltipContent } from './_tsup-dts-rollup.js';
+export { TooltipProvider_alias_1 as TooltipProvider } from './_tsup-dts-rollup.js';

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"]}