@invergent/ui-sdk 0.0.0-stage → 2.19.1

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

@@ -0,0 +1,155 @@
+'use strict';
+
+var chunkIVMZANP7_cjs = require('./chunk-IVMZANP7.cjs');
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var React = require('react');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var ToggleGroupContext = React__namespace.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal"
+});
+var JOINED_TRACK = {
+  default: "gap-1 rounded-full bg-foreground/[0.06] p-1",
+  outline: "gap-0 rounded-[10px] border border-foreground/10 p-0.5"
+};
+var JOINED_ITEM = {
+  default: "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",
+  outline: "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"
+};
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.ToggleGroup.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-orientation": orientation,
+      style: { "--gap": spacing },
+      className: chunk6YHDDRIM_cjs.cn(
+        // `w-fit` sizes to content and refuses to shrink, so a segmented
+        // control wider than a phone dragged the whole page sideways rather
+        // than containing itself. Capped at its container, scrolling inside
+        // as a last resort — call sites should still shorten their labels.
+        "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",
+        spacing === 0 && JOINED_TRACK[variant ?? "default"],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ToggleGroupContext.Provider,
+        {
+          value: { variant, size, spacing, orientation },
+          children
+        }
+      )
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = React__namespace.useContext(ToggleGroupContext);
+  const itemVariant = context.variant || variant;
+  const itemSize = context.size || size;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.ToggleGroup.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": itemVariant,
+      "data-size": itemSize,
+      "data-spacing": context.spacing,
+      className: chunk6YHDDRIM_cjs.cn(
+        "shrink-0 focus:z-10 focus-visible:z-10",
+        chunkIVMZANP7_cjs.toggleVariants({ variant: itemVariant, size: itemSize }),
+        context.spacing === 0 && JOINED_ITEM[itemVariant ?? "default"],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function ViewSwitch({
+  views,
+  value,
+  onChange,
+  label = "Show",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroup,
+    {
+      type: "single",
+      variant: "outline",
+      "aria-label": label,
+      value,
+      onValueChange: (v) => {
+        if (v) onChange(v);
+      },
+      className,
+      children: views.map((v) => /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItem, { value: v.id, children: v.label }, v.id))
+    }
+  );
+}
+function useRememberedView(key, views) {
+  const [view, setView] = React__namespace.useState(() => {
+    try {
+      const saved = localStorage.getItem(key);
+      return views.find((v) => v === saved) ?? views[0];
+    } catch {
+      return views[0];
+    }
+  });
+  const choose = (v) => {
+    setView(v);
+    try {
+      localStorage.setItem(key, v);
+    } catch {
+    }
+  };
+  return [view, choose];
+}
+
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
+exports.ViewSwitch = ViewSwitch;
+exports.useRememberedView = useRememberedView;
+//# sourceMappingURL=toggle-group.cjs.map
+//# sourceMappingURL=toggle-group.cjs.map

package/dist/toggle-group.cjs.map

@@ -0,0 +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"]}

package/dist/toggle-group.d.cts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroup$1 } from 'radix-ui';
+import { toggleVariants } from './toggle.cjs';
+import 'class-variance-authority/types';
+
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+}): react_jsx_runtime.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+/**
+ * A tab's two or three views (Steps | Stats, Members | Recent alerts): the
+ * Work view switch. One view is always picked — clicking the picked one
+ * again does not clear it.
+ */
+declare function ViewSwitch<T extends string>({ views, value, onChange, label, className, }: {
+    views: readonly {
+        id: T;
+        label: React.ReactNode;
+    }[];
+    value: T;
+    onChange: (v: T) => void;
+    label?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/** The view last chosen under `key`, else the first; storage may be off. */
+declare function useRememberedView<T extends string>(key: string, views: readonly T[]): [T, (v: T) => void];
+
+export { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView };

package/dist/toggle-group.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroup$1 } from 'radix-ui';
+import { toggleVariants } from './toggle.js';
+import 'class-variance-authority/types';
+
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+}): react_jsx_runtime.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
+/**
+ * A tab's two or three views (Steps | Stats, Members | Recent alerts): the
+ * Work view switch. One view is always picked — clicking the picked one
+ * again does not clear it.
+ */
+declare function ViewSwitch<T extends string>({ views, value, onChange, label, className, }: {
+    views: readonly {
+        id: T;
+        label: React.ReactNode;
+    }[];
+    value: T;
+    onChange: (v: T) => void;
+    label?: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/** The view last chosen under `key`, else the first; storage may be off. */
+declare function useRememberedView<T extends string>(key: string, views: readonly T[]): [T, (v: T) => void];
+
+export { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView };