@invergent/ui-sdk 2.19.0 → 2.19.2

package/dist/timeline.cjs

@@ -0,0 +1,171 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var react = require('react');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+var TimelineContext = react.createContext(
+  void 0
+);
+var useTimeline = () => {
+  const context = react.useContext(TimelineContext);
+  if (!context) {
+    throw new Error("useTimeline must be used within a Timeline");
+  }
+  return context;
+};
+function Timeline({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  className,
+  children,
+  ...props
+}) {
+  const [activeStep, setInternalStep] = react.useState(defaultValue);
+  const setActiveStep = react.useCallback(
+    (step) => {
+      if (value === void 0) {
+        setInternalStep(step);
+      }
+      onValueChange?.(step);
+    },
+    [value, onValueChange]
+  );
+  const currentStep = value ?? activeStep;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TimelineContext.Provider,
+    {
+      value: { activeStep: currentStep, setActiveStep },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: chunk6YHDDRIM_cjs.cn(
+            "group/timeline flex flex-col",
+            className
+          ),
+          "data-orientation": orientation,
+          "data-slot": "timeline",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function TimelineContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunk6YHDDRIM_cjs.cn("text-foreground text-sm min-w-0 overflow-hidden", className),
+      "data-slot": "timeline-content",
+      ...props
+    }
+  );
+}
+function TimelineDate({
+  asChild = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? radixUi.Slot.Root : "time";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      className: chunk6YHDDRIM_cjs.cn(
+        "text-muted-foreground mb-1 block text-xs font-medium max-sm:h-4",
+        className
+      ),
+      "data-slot": "timeline-date",
+      ...props
+    }
+  );
+}
+function TimelineHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk6YHDDRIM_cjs.cn(className), "data-slot": "timeline-header", ...props });
+}
+function TimelineIndicator({
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? radixUi.Slot.Root : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "aria-hidden": "true",
+      className: chunk6YHDDRIM_cjs.cn(
+        "border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 top-1.25 -left-6 -translate-x-1/2",
+        className
+      ),
+      "data-slot": "timeline-indicator",
+      ...props,
+      children
+    }
+  );
+}
+function TimelineItem({ step, className, ...props }) {
+  const { activeStep } = useTimeline();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunk6YHDDRIM_cjs.cn(
+        "group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-col gap-0.5 ms-8 not-last:pb-6",
+        className
+      ),
+      "data-completed": step <= activeStep || void 0,
+      "data-slot": "timeline-item",
+      ...props
+    }
+  );
+}
+function TimelineSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: chunk6YHDDRIM_cjs.cn(
+        "bg-primary/10 absolute self-start group-last/timeline-item:hidden -left-6 h-[calc(100%-1rem-0.25rem)] w-0.5 -translate-x-1/2 translate-y-4.5",
+        className
+      ),
+      "data-slot": "timeline-separator",
+      ...props
+    }
+  );
+}
+function TimelineTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h3",
+    {
+      className: chunk6YHDDRIM_cjs.cn("text-sm font-medium", className),
+      "data-slot": "timeline-title",
+      ...props
+    }
+  );
+}
+
+exports.Timeline = Timeline;
+exports.TimelineContent = TimelineContent;
+exports.TimelineDate = TimelineDate;
+exports.TimelineHeader = TimelineHeader;
+exports.TimelineIndicator = TimelineIndicator;
+exports.TimelineItem = TimelineItem;
+exports.TimelineSeparator = TimelineSeparator;
+exports.TimelineTitle = TimelineTitle;
+//# sourceMappingURL=timeline.cjs.map
+//# sourceMappingURL=timeline.cjs.map

package/dist/timeline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/timeline.tsx"],"names":["createContext","useContext","useState","useCallback","jsx","cn","Slot"],"mappings":"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","file":"timeline.cjs","sourcesContent":["import {\n  createContext,\n  type HTMLAttributes,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\n// Types\ntype TimelineContextValue = {\n  activeStep: number\n  setActiveStep: (step: number) => void\n}\n\n// Context\nconst TimelineContext = createContext<TimelineContextValue | undefined>(\n  undefined\n)\n\nconst useTimeline = () => {\n  const context = useContext(TimelineContext)\n  if (!context) {\n    throw new Error(\"useTimeline must be used within a Timeline\")\n  }\n  return context\n}\n\n// Components\ninterface TimelineProps extends HTMLAttributes<HTMLDivElement> {\n  defaultValue?: number\n  value?: number\n  onValueChange?: (value: number) => void\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nfunction Timeline({\n  defaultValue = 1,\n  value,\n  onValueChange,\n  orientation = \"vertical\",\n  className,\n  children,\n  ...props\n}: TimelineProps) {\n  const [activeStep, setInternalStep] = useState(defaultValue)\n\n  const setActiveStep = useCallback(\n    (step: number) => {\n      if (value === undefined) {\n        setInternalStep(step)\n      }\n      onValueChange?.(step)\n    },\n    [value, onValueChange]\n  )\n\n  const currentStep = value ?? activeStep\n\n  return (\n    <TimelineContext.Provider\n      value={{ activeStep: currentStep, setActiveStep }}\n    >\n      <div\n        className={cn(\n          \"group/timeline flex flex-col\",\n          className\n        )}\n        data-orientation={orientation}\n        data-slot=\"timeline\"\n        {...props}\n      >\n        {children}\n      </div>\n    </TimelineContext.Provider>\n  )\n}\n\n// TimelineContent\nfunction TimelineContent({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"text-foreground text-sm min-w-0 overflow-hidden\", className)}\n      data-slot=\"timeline-content\"\n      {...props}\n    />\n  )\n}\n\n// TimelineDate\ninterface TimelineDateProps extends HTMLAttributes<HTMLTimeElement> {\n  asChild?: boolean\n}\n\nfunction TimelineDate({\n  asChild = false,\n  className,\n  ...props\n}: TimelineDateProps) {\n  const Comp = asChild ? Slot.Root : \"time\"\n\n  return (\n    <Comp\n      className={cn(\n        \"text-muted-foreground mb-1 block text-xs font-medium max-sm:h-4\",\n        className\n      )}\n      data-slot=\"timeline-date\"\n      {...props}\n    />\n  )\n}\n\n// TimelineHeader\nfunction TimelineHeader({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(className)} data-slot=\"timeline-header\" {...props} />\n  )\n}\n\n// TimelineIndicator\ninterface TimelineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nfunction TimelineIndicator({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: TimelineIndicatorProps) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      aria-hidden=\"true\"\n      className={cn(\n        \"border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 top-1.25 -left-6 -translate-x-1/2\",\n        className\n      )}\n      data-slot=\"timeline-indicator\"\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\n// TimelineItem\ninterface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {\n  step: number\n}\n\nfunction TimelineItem({ step, className, ...props }: TimelineItemProps) {\n  const { activeStep } = useTimeline()\n\n  return (\n    <div\n      className={cn(\n        \"group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-col gap-0.5 ms-8 not-last:pb-6\",\n        className\n      )}\n      data-completed={step <= activeStep || undefined}\n      data-slot=\"timeline-item\"\n      {...props}\n    />\n  )\n}\n\n// TimelineSeparator\nfunction TimelineSeparator({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"bg-primary/10 absolute self-start group-last/timeline-item:hidden -left-6 h-[calc(100%-1rem-0.25rem)] w-0.5 -translate-x-1/2 translate-y-4.5\",\n        className\n      )}\n      data-slot=\"timeline-separator\"\n      {...props}\n    />\n  )\n}\n\n// TimelineTitle\nfunction TimelineTitle({\n  className,\n  ...props\n}: HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"timeline-title\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n}"]}

package/dist/timeline.d.cts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
+    defaultValue?: number;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    orientation?: "horizontal" | "vertical";
+}
+declare function Timeline({ defaultValue, value, onValueChange, orientation, className, children, ...props }: TimelineProps): react_jsx_runtime.JSX.Element;
+declare function TimelineContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface TimelineDateProps extends HTMLAttributes<HTMLTimeElement> {
+    asChild?: boolean;
+}
+declare function TimelineDate({ asChild, className, ...props }: TimelineDateProps): react_jsx_runtime.JSX.Element;
+declare function TimelineHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface TimelineIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+}
+declare function TimelineIndicator({ asChild, className, children, ...props }: TimelineIndicatorProps): react_jsx_runtime.JSX.Element;
+interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {
+    step: number;
+}
+declare function TimelineItem({ step, className, ...props }: TimelineItemProps): react_jsx_runtime.JSX.Element;
+declare function TimelineSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function TimelineTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+
+export { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle };

package/dist/timeline.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HTMLAttributes } from 'react';
+
+interface TimelineProps extends HTMLAttributes<HTMLDivElement> {
+    defaultValue?: number;
+    value?: number;
+    onValueChange?: (value: number) => void;
+    orientation?: "horizontal" | "vertical";
+}
+declare function Timeline({ defaultValue, value, onValueChange, orientation, className, children, ...props }: TimelineProps): react_jsx_runtime.JSX.Element;
+declare function TimelineContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface TimelineDateProps extends HTMLAttributes<HTMLTimeElement> {
+    asChild?: boolean;
+}
+declare function TimelineDate({ asChild, className, ...props }: TimelineDateProps): react_jsx_runtime.JSX.Element;
+declare function TimelineHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface TimelineIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+    asChild?: boolean;
+}
+declare function TimelineIndicator({ asChild, className, children, ...props }: TimelineIndicatorProps): react_jsx_runtime.JSX.Element;
+interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {
+    step: number;
+}
+declare function TimelineItem({ step, className, ...props }: TimelineItemProps): react_jsx_runtime.JSX.Element;
+declare function TimelineSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function TimelineTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+
+export { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle };

package/dist/timeline.js

@@ -0,0 +1,162 @@
+import { cn } from './chunk-LZGII7SX.js';
+import { createContext, useState, useCallback, useContext } from 'react';
+import { Slot } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+var TimelineContext = createContext(
+  void 0
+);
+var useTimeline = () => {
+  const context = useContext(TimelineContext);
+  if (!context) {
+    throw new Error("useTimeline must be used within a Timeline");
+  }
+  return context;
+};
+function Timeline({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  className,
+  children,
+  ...props
+}) {
+  const [activeStep, setInternalStep] = useState(defaultValue);
+  const setActiveStep = useCallback(
+    (step) => {
+      if (value === void 0) {
+        setInternalStep(step);
+      }
+      onValueChange?.(step);
+    },
+    [value, onValueChange]
+  );
+  const currentStep = value ?? activeStep;
+  return /* @__PURE__ */ jsx(
+    TimelineContext.Provider,
+    {
+      value: { activeStep: currentStep, setActiveStep },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "group/timeline flex flex-col",
+            className
+          ),
+          "data-orientation": orientation,
+          "data-slot": "timeline",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function TimelineContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("text-foreground text-sm min-w-0 overflow-hidden", className),
+      "data-slot": "timeline-content",
+      ...props
+    }
+  );
+}
+function TimelineDate({
+  asChild = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "time";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "text-muted-foreground mb-1 block text-xs font-medium max-sm:h-4",
+        className
+      ),
+      "data-slot": "timeline-date",
+      ...props
+    }
+  );
+}
+function TimelineHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(className), "data-slot": "timeline-header", ...props });
+}
+function TimelineIndicator({
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 top-1.25 -left-6 -translate-x-1/2",
+        className
+      ),
+      "data-slot": "timeline-indicator",
+      ...props,
+      children
+    }
+  );
+}
+function TimelineItem({ step, className, ...props }) {
+  const { activeStep } = useTimeline();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-col gap-0.5 ms-8 not-last:pb-6",
+        className
+      ),
+      "data-completed": step <= activeStep || void 0,
+      "data-slot": "timeline-item",
+      ...props
+    }
+  );
+}
+function TimelineSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "bg-primary/10 absolute self-start group-last/timeline-item:hidden -left-6 h-[calc(100%-1rem-0.25rem)] w-0.5 -translate-x-1/2 translate-y-4.5",
+        className
+      ),
+      "data-slot": "timeline-separator",
+      ...props
+    }
+  );
+}
+function TimelineTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn("text-sm font-medium", className),
+      "data-slot": "timeline-title",
+      ...props
+    }
+  );
+}
+
+export { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle };
+//# sourceMappingURL=timeline.js.map
+//# sourceMappingURL=timeline.js.map

package/dist/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/timeline.tsx"],"names":[],"mappings":"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","file":"timeline.js","sourcesContent":["import {\n  createContext,\n  type HTMLAttributes,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\n// Types\ntype TimelineContextValue = {\n  activeStep: number\n  setActiveStep: (step: number) => void\n}\n\n// Context\nconst TimelineContext = createContext<TimelineContextValue | undefined>(\n  undefined\n)\n\nconst useTimeline = () => {\n  const context = useContext(TimelineContext)\n  if (!context) {\n    throw new Error(\"useTimeline must be used within a Timeline\")\n  }\n  return context\n}\n\n// Components\ninterface TimelineProps extends HTMLAttributes<HTMLDivElement> {\n  defaultValue?: number\n  value?: number\n  onValueChange?: (value: number) => void\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nfunction Timeline({\n  defaultValue = 1,\n  value,\n  onValueChange,\n  orientation = \"vertical\",\n  className,\n  children,\n  ...props\n}: TimelineProps) {\n  const [activeStep, setInternalStep] = useState(defaultValue)\n\n  const setActiveStep = useCallback(\n    (step: number) => {\n      if (value === undefined) {\n        setInternalStep(step)\n      }\n      onValueChange?.(step)\n    },\n    [value, onValueChange]\n  )\n\n  const currentStep = value ?? activeStep\n\n  return (\n    <TimelineContext.Provider\n      value={{ activeStep: currentStep, setActiveStep }}\n    >\n      <div\n        className={cn(\n          \"group/timeline flex flex-col\",\n          className\n        )}\n        data-orientation={orientation}\n        data-slot=\"timeline\"\n        {...props}\n      >\n        {children}\n      </div>\n    </TimelineContext.Provider>\n  )\n}\n\n// TimelineContent\nfunction TimelineContent({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\"text-foreground text-sm min-w-0 overflow-hidden\", className)}\n      data-slot=\"timeline-content\"\n      {...props}\n    />\n  )\n}\n\n// TimelineDate\ninterface TimelineDateProps extends HTMLAttributes<HTMLTimeElement> {\n  asChild?: boolean\n}\n\nfunction TimelineDate({\n  asChild = false,\n  className,\n  ...props\n}: TimelineDateProps) {\n  const Comp = asChild ? Slot.Root : \"time\"\n\n  return (\n    <Comp\n      className={cn(\n        \"text-muted-foreground mb-1 block text-xs font-medium max-sm:h-4\",\n        className\n      )}\n      data-slot=\"timeline-date\"\n      {...props}\n    />\n  )\n}\n\n// TimelineHeader\nfunction TimelineHeader({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div className={cn(className)} data-slot=\"timeline-header\" {...props} />\n  )\n}\n\n// TimelineIndicator\ninterface TimelineIndicatorProps extends HTMLAttributes<HTMLDivElement> {\n  asChild?: boolean\n}\n\nfunction TimelineIndicator({\n  asChild = false,\n  className,\n  children,\n  ...props\n}: TimelineIndicatorProps) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      aria-hidden=\"true\"\n      className={cn(\n        \"border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 top-1.25 -left-6 -translate-x-1/2\",\n        className\n      )}\n      data-slot=\"timeline-indicator\"\n      {...props}\n    >\n      {children}\n    </Comp>\n  )\n}\n\n// TimelineItem\ninterface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {\n  step: number\n}\n\nfunction TimelineItem({ step, className, ...props }: TimelineItemProps) {\n  const { activeStep } = useTimeline()\n\n  return (\n    <div\n      className={cn(\n        \"group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-col gap-0.5 ms-8 not-last:pb-6\",\n        className\n      )}\n      data-completed={step <= activeStep || undefined}\n      data-slot=\"timeline-item\"\n      {...props}\n    />\n  )\n}\n\n// TimelineSeparator\nfunction TimelineSeparator({\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"bg-primary/10 absolute self-start group-last/timeline-item:hidden -left-6 h-[calc(100%-1rem-0.25rem)] w-0.5 -translate-x-1/2 translate-y-4.5\",\n        className\n      )}\n      data-slot=\"timeline-separator\"\n      {...props}\n    />\n  )\n}\n\n// TimelineTitle\nfunction TimelineTitle({\n  className,\n  ...props\n}: HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"timeline-title\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Timeline,\n  TimelineContent,\n  TimelineDate,\n  TimelineHeader,\n  TimelineIndicator,\n  TimelineItem,\n  TimelineSeparator,\n  TimelineTitle,\n}"]}

package/dist/toggle-group.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkIVMZANP7_cjs = require('./chunk-IVMZANP7.cjs');
+var chunkILCP5QXL_cjs = require('./chunk-ILCP5QXL.cjs');
 var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
 var React = require('react');
 var radixUi = require('radix-ui');
@@ -97,8 +97,10 @@ function ToggleGroupItem({
       "data-spacing": context.spacing,
       className: chunk6YHDDRIM_cjs.cn(
         "shrink-0 focus:z-10 focus-visible:z-10",
-        chunkIVMZANP7_cjs.toggleVariants({ variant: itemVariant, size: itemSize }),
+        chunkILCP5QXL_cjs.toggleVariants({ variant: itemVariant, size: itemSize }),
         context.spacing === 0 && JOINED_ITEM[itemVariant ?? "default"],
+        // A joined segment pads its label; an icon segment stays square.
+        itemSize?.startsWith("icon") && "px-0",
         className
       ),
       ...props,

package/dist/toggle-group.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/toggle-group.tsx"],"names":["React","jsx","ToggleGroupPrimitive","cn","toggleVariants"],"mappings":"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","file":"toggle-group.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { toggleVariants } from \"./toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\n// With spacing the items are separate toggles, drawn as `toggle` draws them.\n// Joined (spacing 0) they are one segmented control, as the Work console\n// draws its two: `default` is the Work / Dev switch — a round track with the\n// picked segment an amber pill — and `outline` its view switch (Steps |\n// Stats, Open | Resolved) — a 10px bordered track, the picked segment a\n// faint fill.\nconst JOINED_TRACK = {\n  default: \"gap-1 rounded-full bg-foreground/[0.06] p-1\",\n  outline: \"gap-0 rounded-[10px] border border-foreground/10 p-0.5\",\n} as const\n\nconst JOINED_ITEM = {\n  default:\n    \"rounded-full border-transparent bg-transparent px-4 font-semibold text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-amber-400 data-[state=on]:text-stone-950\",\n  outline:\n    \"rounded-[8px] border-transparent bg-transparent px-3 text-[12.5px] font-normal text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n} as const\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        // `w-fit` sizes to content and refuses to shrink, so a segmented\n        // control wider than a phone dragged the whole page sideways rather\n        // than containing itself. Capped at its container, scrolling inside\n        // as a last resort — call sites should still shorten their labels.\n        \"group/toggle-group no-scrollbar flex w-fit max-w-full flex-row items-center gap-[--spacing(var(--gap))] overflow-x-auto data-vertical:flex-col data-vertical:items-stretch\",\n        spacing === 0 && JOINED_TRACK[variant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const itemVariant = context.variant || variant\n  const itemSize = context.size || size\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant}\n      data-size={itemSize}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants({ variant: itemVariant, size: itemSize }),\n        context.spacing === 0 && JOINED_ITEM[itemVariant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\n/**\n * A tab's two or three views (Steps | Stats, Members | Recent alerts): the\n * Work view switch. One view is always picked — clicking the picked one\n * again does not clear it.\n */\nfunction ViewSwitch<T extends string>({\n  views,\n  value,\n  onChange,\n  label = \"Show\",\n  className,\n}: {\n  views: readonly { id: T; label: React.ReactNode }[]\n  value: T\n  onChange: (v: T) => void\n  label?: string\n  className?: string\n}) {\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      aria-label={label}\n      value={value}\n      onValueChange={(v) => {\n        if (v) onChange(v as T)\n      }}\n      className={className}\n    >\n      {views.map((v) => (\n        <ToggleGroupItem key={v.id} value={v.id}>\n          {v.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  )\n}\n\n/** The view last chosen under `key`, else the first; storage may be off. */\nfunction useRememberedView<T extends string>(\n  key: string,\n  views: readonly T[]\n): [T, (v: T) => void] {\n  const [view, setView] = React.useState<T>(() => {\n    try {\n      const saved = localStorage.getItem(key)\n      return views.find((v) => v === saved) ?? views[0]\n    } catch {\n      return views[0]\n    }\n  })\n  const choose = (v: T) => {\n    setView(v)\n    try {\n      localStorage.setItem(key, v)\n    } catch {\n      // A private window keeps the choice for this visit only.\n    }\n  }\n  return [view, choose]\n}\n\nexport { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView }\n"]}
+{"version":3,"sources":["../src/toggle-group.tsx"],"names":["React","jsx","ToggleGroupPrimitive","cn","toggleVariants"],"mappings":"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","file":"toggle-group.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { toggleVariants } from \"./toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\n// With spacing the items are separate toggles, drawn as `toggle` draws them.\n// Joined (spacing 0) they are one segmented control, as the Work console\n// draws its two: `default` is the Work / Dev switch — a round track with the\n// picked segment an amber pill — and `outline` its view switch (Steps |\n// Stats, Open | Resolved) — a 10px bordered track, the picked segment a\n// faint fill.\nconst JOINED_TRACK = {\n  default: \"gap-1 rounded-full bg-foreground/[0.06] p-1\",\n  outline: \"gap-0 rounded-[10px] border border-foreground/10 p-0.5\",\n} as const\n\nconst JOINED_ITEM = {\n  default:\n    \"rounded-full border-transparent bg-transparent px-4 font-semibold text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-amber-400 data-[state=on]:text-stone-950\",\n  outline:\n    \"rounded-[8px] border-transparent bg-transparent px-3 text-[12.5px] font-normal text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n} as const\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        // `w-fit` sizes to content and refuses to shrink, so a segmented\n        // control wider than a phone dragged the whole page sideways rather\n        // than containing itself. Capped at its container, scrolling inside\n        // as a last resort — call sites should still shorten their labels.\n        \"group/toggle-group no-scrollbar flex w-fit max-w-full flex-row items-center gap-[--spacing(var(--gap))] overflow-x-auto data-vertical:flex-col data-vertical:items-stretch\",\n        spacing === 0 && JOINED_TRACK[variant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const itemVariant = context.variant || variant\n  const itemSize = context.size || size\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant}\n      data-size={itemSize}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants({ variant: itemVariant, size: itemSize }),\n        context.spacing === 0 && JOINED_ITEM[itemVariant ?? \"default\"],\n        // A joined segment pads its label; an icon segment stays square.\n        itemSize?.startsWith(\"icon\") && \"px-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\n/**\n * A tab's two or three views (Steps | Stats, Members | Recent alerts): the\n * Work view switch. One view is always picked — clicking the picked one\n * again does not clear it.\n */\nfunction ViewSwitch<T extends string>({\n  views,\n  value,\n  onChange,\n  label = \"Show\",\n  className,\n}: {\n  views: readonly { id: T; label: React.ReactNode }[]\n  value: T\n  onChange: (v: T) => void\n  label?: string\n  className?: string\n}) {\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      aria-label={label}\n      value={value}\n      onValueChange={(v) => {\n        if (v) onChange(v as T)\n      }}\n      className={className}\n    >\n      {views.map((v) => (\n        <ToggleGroupItem key={v.id} value={v.id}>\n          {v.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  )\n}\n\n/** The view last chosen under `key`, else the first; storage may be off. */\nfunction useRememberedView<T extends string>(\n  key: string,\n  views: readonly T[]\n): [T, (v: T) => void] {\n  const [view, setView] = React.useState<T>(() => {\n    try {\n      const saved = localStorage.getItem(key)\n      return views.find((v) => v === saved) ?? views[0]\n    } catch {\n      return views[0]\n    }\n  })\n  const choose = (v: T) => {\n    setView(v)\n    try {\n      localStorage.setItem(key, v)\n    } catch {\n      // A private window keeps the choice for this visit only.\n    }\n  }\n  return [view, choose]\n}\n\nexport { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView }\n"]}

package/dist/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from './chunk-CPAFEXKR.js';
+import { toggleVariants } from './chunk-WO2SXSNH.js';
 import { cn } from './chunk-LZGII7SX.js';
 import * as React from 'react';
 import { ToggleGroup as ToggleGroup$1 } from 'radix-ui';
@@ -77,6 +77,8 @@ function ToggleGroupItem({
         "shrink-0 focus:z-10 focus-visible:z-10",
         toggleVariants({ variant: itemVariant, size: itemSize }),
         context.spacing === 0 && JOINED_ITEM[itemVariant ?? "default"],
+        // A joined segment pads its label; an icon segment stays square.
+        itemSize?.startsWith("icon") && "px-0",
         className
       ),
       ...props,

package/dist/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/toggle-group.tsx"],"names":["ToggleGroupPrimitive"],"mappings":"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","file":"toggle-group.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { toggleVariants } from \"./toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\n// With spacing the items are separate toggles, drawn as `toggle` draws them.\n// Joined (spacing 0) they are one segmented control, as the Work console\n// draws its two: `default` is the Work / Dev switch — a round track with the\n// picked segment an amber pill — and `outline` its view switch (Steps |\n// Stats, Open | Resolved) — a 10px bordered track, the picked segment a\n// faint fill.\nconst JOINED_TRACK = {\n  default: \"gap-1 rounded-full bg-foreground/[0.06] p-1\",\n  outline: \"gap-0 rounded-[10px] border border-foreground/10 p-0.5\",\n} as const\n\nconst JOINED_ITEM = {\n  default:\n    \"rounded-full border-transparent bg-transparent px-4 font-semibold text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-amber-400 data-[state=on]:text-stone-950\",\n  outline:\n    \"rounded-[8px] border-transparent bg-transparent px-3 text-[12.5px] font-normal text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n} as const\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        // `w-fit` sizes to content and refuses to shrink, so a segmented\n        // control wider than a phone dragged the whole page sideways rather\n        // than containing itself. Capped at its container, scrolling inside\n        // as a last resort — call sites should still shorten their labels.\n        \"group/toggle-group no-scrollbar flex w-fit max-w-full flex-row items-center gap-[--spacing(var(--gap))] overflow-x-auto data-vertical:flex-col data-vertical:items-stretch\",\n        spacing === 0 && JOINED_TRACK[variant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const itemVariant = context.variant || variant\n  const itemSize = context.size || size\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant}\n      data-size={itemSize}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants({ variant: itemVariant, size: itemSize }),\n        context.spacing === 0 && JOINED_ITEM[itemVariant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\n/**\n * A tab's two or three views (Steps | Stats, Members | Recent alerts): the\n * Work view switch. One view is always picked — clicking the picked one\n * again does not clear it.\n */\nfunction ViewSwitch<T extends string>({\n  views,\n  value,\n  onChange,\n  label = \"Show\",\n  className,\n}: {\n  views: readonly { id: T; label: React.ReactNode }[]\n  value: T\n  onChange: (v: T) => void\n  label?: string\n  className?: string\n}) {\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      aria-label={label}\n      value={value}\n      onValueChange={(v) => {\n        if (v) onChange(v as T)\n      }}\n      className={className}\n    >\n      {views.map((v) => (\n        <ToggleGroupItem key={v.id} value={v.id}>\n          {v.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  )\n}\n\n/** The view last chosen under `key`, else the first; storage may be off. */\nfunction useRememberedView<T extends string>(\n  key: string,\n  views: readonly T[]\n): [T, (v: T) => void] {\n  const [view, setView] = React.useState<T>(() => {\n    try {\n      const saved = localStorage.getItem(key)\n      return views.find((v) => v === saved) ?? views[0]\n    } catch {\n      return views[0]\n    }\n  })\n  const choose = (v: T) => {\n    setView(v)\n    try {\n      localStorage.setItem(key, v)\n    } catch {\n      // A private window keeps the choice for this visit only.\n    }\n  }\n  return [view, choose]\n}\n\nexport { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView }\n"]}
+{"version":3,"sources":["../src/toggle-group.tsx"],"names":["ToggleGroupPrimitive"],"mappings":"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","file":"toggle-group.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { toggleVariants } from \"./toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\n// With spacing the items are separate toggles, drawn as `toggle` draws them.\n// Joined (spacing 0) they are one segmented control, as the Work console\n// draws its two: `default` is the Work / Dev switch — a round track with the\n// picked segment an amber pill — and `outline` its view switch (Steps |\n// Stats, Open | Resolved) — a 10px bordered track, the picked segment a\n// faint fill.\nconst JOINED_TRACK = {\n  default: \"gap-1 rounded-full bg-foreground/[0.06] p-1\",\n  outline: \"gap-0 rounded-[10px] border border-foreground/10 p-0.5\",\n} as const\n\nconst JOINED_ITEM = {\n  default:\n    \"rounded-full border-transparent bg-transparent px-4 font-semibold text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-amber-400 data-[state=on]:text-stone-950\",\n  outline:\n    \"rounded-[8px] border-transparent bg-transparent px-3 text-[12.5px] font-normal text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n} as const\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        // `w-fit` sizes to content and refuses to shrink, so a segmented\n        // control wider than a phone dragged the whole page sideways rather\n        // than containing itself. Capped at its container, scrolling inside\n        // as a last resort — call sites should still shorten their labels.\n        \"group/toggle-group no-scrollbar flex w-fit max-w-full flex-row items-center gap-[--spacing(var(--gap))] overflow-x-auto data-vertical:flex-col data-vertical:items-stretch\",\n        spacing === 0 && JOINED_TRACK[variant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const itemVariant = context.variant || variant\n  const itemSize = context.size || size\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant}\n      data-size={itemSize}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants({ variant: itemVariant, size: itemSize }),\n        context.spacing === 0 && JOINED_ITEM[itemVariant ?? \"default\"],\n        // A joined segment pads its label; an icon segment stays square.\n        itemSize?.startsWith(\"icon\") && \"px-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\n/**\n * A tab's two or three views (Steps | Stats, Members | Recent alerts): the\n * Work view switch. One view is always picked — clicking the picked one\n * again does not clear it.\n */\nfunction ViewSwitch<T extends string>({\n  views,\n  value,\n  onChange,\n  label = \"Show\",\n  className,\n}: {\n  views: readonly { id: T; label: React.ReactNode }[]\n  value: T\n  onChange: (v: T) => void\n  label?: string\n  className?: string\n}) {\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      aria-label={label}\n      value={value}\n      onValueChange={(v) => {\n        if (v) onChange(v as T)\n      }}\n      className={className}\n    >\n      {views.map((v) => (\n        <ToggleGroupItem key={v.id} value={v.id}>\n          {v.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  )\n}\n\n/** The view last chosen under `key`, else the first; storage may be off. */\nfunction useRememberedView<T extends string>(\n  key: string,\n  views: readonly T[]\n): [T, (v: T) => void] {\n  const [view, setView] = React.useState<T>(() => {\n    try {\n      const saved = localStorage.getItem(key)\n      return views.find((v) => v === saved) ?? views[0]\n    } catch {\n      return views[0]\n    }\n  })\n  const choose = (v: T) => {\n    setView(v)\n    try {\n      localStorage.setItem(key, v)\n    } catch {\n      // A private window keeps the choice for this visit only.\n    }\n  }\n  return [view, choose]\n}\n\nexport { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView }\n"]}

package/dist/toggle.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var chunkIVMZANP7_cjs = require('./chunk-IVMZANP7.cjs');
+var chunkILCP5QXL_cjs = require('./chunk-ILCP5QXL.cjs');
 require('./chunk-6YHDDRIM.cjs');
 
 
 
 Object.defineProperty(exports, "FilterPill", {
   enumerable: true,
-  get: function () { return chunkIVMZANP7_cjs.FilterPill; }
+  get: function () { return chunkILCP5QXL_cjs.FilterPill; }
 });
 Object.defineProperty(exports, "Toggle", {
   enumerable: true,
-  get: function () { return chunkIVMZANP7_cjs.Toggle; }
+  get: function () { return chunkILCP5QXL_cjs.Toggle; }
 });
 Object.defineProperty(exports, "toggleVariants", {
   enumerable: true,
-  get: function () { return chunkIVMZANP7_cjs.toggleVariants; }
+  get: function () { return chunkILCP5QXL_cjs.toggleVariants; }
 });
 //# sourceMappingURL=toggle.cjs.map
 //# sourceMappingURL=toggle.cjs.map

package/dist/toggle.d.cts

@@ -6,7 +6,7 @@ import { Toggle as Toggle$1 } from 'radix-ui';
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 /**

package/dist/toggle.d.ts

@@ -6,7 +6,7 @@ import { Toggle as Toggle$1 } from 'radix-ui';
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 /**

package/dist/toggle.js

@@ -1,4 +1,4 @@
-export { FilterPill, Toggle, toggleVariants } from './chunk-CPAFEXKR.js';
+export { FilterPill, Toggle, toggleVariants } from './chunk-WO2SXSNH.js';
 import './chunk-LZGII7SX.js';
 //# sourceMappingURL=toggle.js.map
 //# sourceMappingURL=toggle.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invergent/ui-sdk",
-  "version": "2.19.0",
+  "version": "2.19.2",
   "description": "Shared theme and UI components for Surogate's web client, chat SDK, desktop and ops console.",
   "license": "AGPL-3.0-only",
   "homepage": "https://github.com/invergent-ai/surogates/tree/master/sdk/ui-sdk#readme",
@@ -44,6 +44,7 @@
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "lucide-react": "^1.8.0",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",

package/dist/chunk-CPAFEXKR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toggle.tsx"],"names":["TogglePrimitive"],"mappings":";;;;;AAWA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,oVAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,6NAAA;AAAA,QACF,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,gDAAA;AAAA,QACT,EAAA,EAAI,+CAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACuC;AACrC,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ;AAMA,SAAS,UAAA,CAAW;AAAA,EAClB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAQG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,EAAA;AAAA,MACT,eAAA,EAAiB,MAAM,OAAA,EAAQ;AAAA,MAC/B,WAAW,EAAA,CAAG,GAAA,IAAO,CAAC,EAAA,IAAM,cAAc,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-CPAFEXKR.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's pressed-state toggles. `default` is the 9px chip its\n// forms use for a choice that is on or off (Once / Repeating, the days of the\n// week): a faint box, amber-tinted once pressed. `outline` is its filter\n// pill: round, bordered, a neutral fill once on. Muted text brightens on\n// hover. Touch keeps 40px or more, a mouse the compact height.\nconst toggleVariants = cva(\n  \"group/toggle inline-flex shrink-0 items-center justify-center gap-1.5 border whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"rounded-[9px] border-foreground/[0.08] bg-foreground/[0.04] font-medium text-muted-foreground hover:text-foreground data-[state=on]:border-amber-500/40 data-[state=on]:bg-amber-500/[0.12] data-[state=on]:text-foreground\",\n        outline:\n          \"rounded-full border-foreground/10 text-muted-foreground hover:text-foreground data-[state=on]:border-foreground/30 data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n      },\n      size: {\n        default: \"min-h-10 px-3 text-[13px] pointer-fine:min-h-8\",\n        sm: \"min-h-9 px-3 text-[12px] pointer-fine:min-h-7\",\n        lg: \"min-h-11 px-4 text-sm pointer-fine:min-h-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\n/**\n * The Work filter pill (a row of them filters a list: \"All channels\",\n * \"Slack 3\"…). An empty filter stays clickable, just quieter.\n */\nfunction FilterPill({\n  on,\n  onClick,\n  dim,\n  className,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof TogglePrimitive.Root>,\n  \"pressed\" | \"onPressedChange\" | \"onClick\"\n> & {\n  on: boolean\n  onClick: () => void\n  /** Nothing behind it yet: still clickable, just quieter. */\n  dim?: boolean\n}) {\n  return (\n    <Toggle\n      variant=\"outline\"\n      size=\"sm\"\n      pressed={on}\n      onPressedChange={() => onClick()}\n      className={cn(dim && !on && \"opacity-55\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, FilterPill, toggleVariants }\n"]}