@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/theme-toggle.d.ts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+
+type ThemeToggleMode = "light-dark" | "light-dark-system";
+type ThemeToggleVariant = "icon" | "segmented";
+type ThemeToggleSize = "sm" | "md" | "lg";
+type ThemeValue = "light" | "dark" | "system";
+interface ThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /** Current theme value. */
+    value: ThemeValue;
+    /** Callback when the theme changes. */
+    onChange: (value: ThemeValue) => void;
+    /**
+     * Toggle mode.
+     * - "light-dark": cycles between light and dark only
+     * - "light-dark-system": cycles through light, dark, and system
+     * @default "light-dark"
+     */
+    mode?: ThemeToggleMode;
+    /**
+     * Visual variant.
+     * - "icon": single button that cycles on click
+     * - "segmented": inline pill group with one button per option
+     * @default "icon"
+     */
+    variant?: ThemeToggleVariant;
+    /**
+     * Size of the toggle.
+     * @default "md"
+     */
+    size?: ThemeToggleSize;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * ThemeToggle — a light/dark/system mode switcher.
+ *
+ * This is a headless, controlled component: you provide `value` and
+ * `onChange`. It works with any theme provider (next-themes, custom
+ * context, etc.).
+ *
+ * @example
+ * ```tsx
+ * // With next-themes
+ * const { theme, setTheme } = useTheme();
+ * <ThemeToggle value={theme as ThemeValue} onChange={setTheme} />
+ *
+ * // Segmented variant with system option
+ * <ThemeToggle
+ *   value={theme as ThemeValue}
+ *   onChange={setTheme}
+ *   variant="segmented"
+ *   mode="light-dark-system"
+ * />
+ * ```
+ */
+declare const ThemeToggle: react.ForwardRefExoticComponent<ThemeToggleProps & react.RefAttributes<HTMLElement>>;
+
+export { ThemeToggle, type ThemeToggleMode, type ThemeToggleProps, type ThemeToggleSize, type ThemeToggleVariant, type ThemeValue };

package/dist/components/theme-toggle.mjs

@@ -0,0 +1,258 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { cva } from "class-variance-authority";
+import { forwardRef, useCallback } from "react";
+function SunIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+        /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+        /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+        /* @__PURE__ */ jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" }),
+        /* @__PURE__ */ jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" })
+      ]
+    }
+  );
+}
+function MoonIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    }
+  );
+}
+function MonitorIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+      ]
+    }
+  );
+}
+const iconButtonVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    "rounded-md",
+    "border border-border",
+    "bg-secondary text-secondary-foreground",
+    "transition-[color,background-color,border-color,box-shadow,opacity,transform]",
+    "duration-fast ease-standard",
+    "hover:bg-secondary-hover hover:text-foreground",
+    "active:scale-[0.97]",
+    focusRingClasses,
+    "cursor-pointer",
+    "select-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-7 [&>svg]:size-3.5",
+        md: "size-9 [&>svg]:size-4",
+        lg: "size-10 [&>svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const segmentedContainerVariants = cva(
+  [
+    "inline-flex items-center",
+    "rounded-md",
+    "border border-border",
+    "bg-muted",
+    "p-0.5",
+    "gap-0.5"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "[&>button]:size-6 [&>button>svg]:size-3",
+        md: "[&>button]:size-7 [&>button>svg]:size-3.5",
+        lg: "[&>button]:size-8 [&>button>svg]:size-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const ICON_MAP = {
+  light: SunIcon,
+  dark: MoonIcon,
+  system: MonitorIcon
+};
+const LABEL_MAP = {
+  light: "Light mode",
+  dark: "Dark mode",
+  system: "System theme"
+};
+function getNextTheme(current, mode) {
+  if (mode === "light-dark") {
+    return current === "light" ? "dark" : "light";
+  }
+  const order = ["light", "dark", "system"];
+  const idx = order.indexOf(current);
+  return order[(idx + 1) % order.length];
+}
+const ThemeToggleIcon = forwardRef(
+  function ThemeToggleIcon2({ value, onChange, mode = "light-dark", size = "md", className, ...rest }, ref) {
+    const handleClick = useCallback(() => {
+      onChange(getNextTheme(value, mode));
+    }, [value, mode, onChange]);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: handleClick,
+        className: cn(iconButtonVariants({ size }), className),
+        "aria-label": `Switch to ${LABEL_MAP[getNextTheme(value, mode)] ?? "next theme"}`,
+        "data-ds": "",
+        "data-ds-component": "theme-toggle",
+        "data-ds-variant": "icon",
+        "data-ds-size": size,
+        "data-ds-theme-value": value,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            SunIcon,
+            {
+              className: cn(
+                "absolute transition-all duration-300",
+                value !== "light" && "scale-0 rotate-90 opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MoonIcon,
+            {
+              className: cn(
+                "absolute transition-all duration-300",
+                value !== "dark" && "scale-0 -rotate-90 opacity-0"
+              )
+            }
+          ),
+          mode === "light-dark-system" && /* @__PURE__ */ jsx(
+            MonitorIcon,
+            {
+              className: cn(
+                "absolute transition-all duration-300",
+                value !== "system" && "scale-0 rotate-90 opacity-0"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ThemeToggleIcon.displayName = "ThemeToggleIcon";
+const ThemeToggleSegmented = forwardRef(
+  function ThemeToggleSegmented2({ value, onChange, mode = "light-dark", size = "md", className }, ref) {
+    const options = mode === "light-dark-system" ? ["light", "dark", "system"] : ["light", "dark"];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": "Theme selection",
+        className: cn(segmentedContainerVariants({ size }), className),
+        "data-ds": "",
+        "data-ds-component": "theme-toggle",
+        "data-ds-variant": "segmented",
+        "data-ds-size": size,
+        "data-ds-theme-value": value,
+        children: options.map((option) => {
+          const Icon = ICON_MAP[option];
+          const isActive = value === option;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": isActive,
+              "aria-label": LABEL_MAP[option],
+              onClick: () => onChange(option),
+              className: cn(
+                "inline-flex items-center justify-center rounded-sm transition-all duration-fast ease-standard",
+                focusRingClasses,
+                isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, {})
+            },
+            option
+          );
+        })
+      }
+    );
+  }
+);
+ThemeToggleSegmented.displayName = "ThemeToggleSegmented";
+const ThemeToggle = forwardRef(
+  function ThemeToggle2({ variant = "icon", ...rest }, ref) {
+    if (variant === "segmented") {
+      return /* @__PURE__ */ jsx(
+        ThemeToggleSegmented,
+        {
+          ref,
+          variant,
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      ThemeToggleIcon,
+      {
+        ref,
+        variant,
+        ...rest
+      }
+    );
+  }
+);
+ThemeToggle.displayName = "ThemeToggle";
+export {
+  ThemeToggle
+};

package/dist/components/timeline.cjs

@@ -0,0 +1,178 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var timeline_exports = {};
+__export(timeline_exports, {
+  Timeline: () => Timeline,
+  TimelineItem: () => TimelineItem
+});
+module.exports = __toCommonJS(timeline_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_motion = require("../motion/index");
+var import_cn = require("../utils/cn");
+var import_framer_motion = require("framer-motion");
+var import_react = require("react");
+const statusDotMap = {
+  default: "bg-border",
+  active: "bg-primary ring-4 ring-primary/20",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  pending: "bg-muted border-2 border-border"
+};
+const statusIconColorMap = {
+  default: "bg-muted border border-border text-muted-foreground",
+  active: "bg-primary text-primary-foreground",
+  success: "bg-success text-success-foreground",
+  warning: "bg-warning text-warning-foreground",
+  danger: "bg-danger text-danger-foreground",
+  pending: "bg-muted border border-border/60 text-muted-foreground"
+};
+const dotSizeMap = {
+  sm: "size-2",
+  md: "size-3",
+  lg: "size-4"
+};
+const iconSizeMap = {
+  sm: "size-6",
+  md: "size-8",
+  lg: "size-10"
+};
+const TimelineItem = (0, import_react.forwardRef)(
+  function TimelineItem2({
+    title,
+    description,
+    timestamp,
+    icon,
+    status = "default",
+    isLast = false,
+    size = "md",
+    animated = true,
+    side = "right",
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+    const slidePreset = side === "left" ? import_motion.slideInFromRight : import_motion.slideInFromLeft;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_framer_motion.motion.div,
+      {
+        ref,
+        className: (0, import_cn.cn)("flex gap-4 relative", className),
+        variants: animated && !shouldReduce ? slidePreset.variants : void 0,
+        transition: animated && !shouldReduce ? slidePreset.transition : void 0,
+        "data-ds-animated": animated ? "" : void 0,
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center", children: [
+            icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: (0, import_cn.cn)(
+                  "flex items-center justify-center rounded-full shrink-0 z-10",
+                  iconSizeMap[size],
+                  statusIconColorMap[status]
+                ),
+                children: icon
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: (0, import_cn.cn)(
+                  "rounded-full shrink-0 z-10 mt-1.5",
+                  dotSizeMap[size],
+                  statusDotMap[status]
+                )
+              }
+            ),
+            !isLast && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 w-px bg-border mt-2 mb-0" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("flex-1 pb-8", isLast && "pb-0"), children: [
+            timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground mb-1 leading-none", children: timestamp }),
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "p",
+              {
+                className: (0, import_cn.cn)(
+                  "font-semibold text-foreground leading-5",
+                  size === "sm" ? "text-xs" : size === "md" ? "text-sm" : "text-base"
+                ),
+                children: title
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "p",
+              {
+                className: (0, import_cn.cn)(
+                  "text-muted-foreground leading-5 mt-0.5",
+                  size === "sm" ? "text-xs" : "text-sm"
+                ),
+                children: description
+              }
+            ),
+            children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2", children })
+          ] })
+        ]
+      }
+    );
+  }
+);
+TimelineItem.displayName = "TimelineItem";
+const Timeline = (0, import_react.forwardRef)(
+  function Timeline2({ items, align = "left", size = "md", animated = true, className, ...rest }, ref) {
+    const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.div,
+      {
+        ref,
+        className: (0, import_cn.cn)("relative", className),
+        variants: animated && !shouldReduce ? import_motion.staggerContainerSlow.variants : void 0,
+        initial: animated && !shouldReduce ? "initial" : void 0,
+        animate: animated && !shouldReduce ? "animate" : void 0,
+        "data-ds": "",
+        "data-ds-component": "timeline",
+        "data-ds-align": align,
+        "data-ds-animated": animated ? "" : void 0,
+        ...rest,
+        children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          TimelineItem,
+          {
+            title: item.title,
+            description: item.description,
+            timestamp: item.timestamp,
+            icon: item.icon,
+            status: item.status ?? "default",
+            isLast: i === items.length - 1,
+            size,
+            animated,
+            side: align === "alternate" ? i % 2 === 0 ? "right" : "left" : "right",
+            children: item.content
+          },
+          item.id ?? i
+        ))
+      }
+    );
+  }
+);
+Timeline.displayName = "Timeline";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Timeline,
+  TimelineItem
+});

package/dist/components/timeline.d.cts

@@ -0,0 +1,41 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type TimelineVariant = "default" | "outlined" | "filled";
+type TimelineSize = "sm" | "md" | "lg";
+type TimelineAlign = "left" | "right" | "alternate";
+type TimelineItemStatus = "default" | "active" | "success" | "warning" | "danger" | "pending";
+interface TimelineItemData {
+    id?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    timestamp?: ReactNode;
+    icon?: ReactNode;
+    status?: TimelineItemStatus;
+    content?: ReactNode;
+}
+interface TimelineProps {
+    items: TimelineItemData[];
+    align?: TimelineAlign;
+    size?: TimelineSize;
+    animated?: boolean;
+    className?: string;
+}
+interface TimelineItemProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    timestamp?: ReactNode;
+    icon?: ReactNode;
+    status?: TimelineItemStatus;
+    isLast?: boolean;
+    align?: "left" | "right";
+    size?: TimelineSize;
+    animated?: boolean;
+    side?: "left" | "right";
+    className?: string;
+    children?: ReactNode;
+}
+declare const TimelineItem: react.ForwardRefExoticComponent<TimelineItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Timeline, type TimelineAlign, TimelineItem, type TimelineItemData, type TimelineItemProps, type TimelineItemStatus, type TimelineProps, type TimelineSize, type TimelineVariant };

package/dist/components/timeline.d.ts

@@ -0,0 +1,41 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type TimelineVariant = "default" | "outlined" | "filled";
+type TimelineSize = "sm" | "md" | "lg";
+type TimelineAlign = "left" | "right" | "alternate";
+type TimelineItemStatus = "default" | "active" | "success" | "warning" | "danger" | "pending";
+interface TimelineItemData {
+    id?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    timestamp?: ReactNode;
+    icon?: ReactNode;
+    status?: TimelineItemStatus;
+    content?: ReactNode;
+}
+interface TimelineProps {
+    items: TimelineItemData[];
+    align?: TimelineAlign;
+    size?: TimelineSize;
+    animated?: boolean;
+    className?: string;
+}
+interface TimelineItemProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    timestamp?: ReactNode;
+    icon?: ReactNode;
+    status?: TimelineItemStatus;
+    isLast?: boolean;
+    align?: "left" | "right";
+    size?: TimelineSize;
+    animated?: boolean;
+    side?: "left" | "right";
+    className?: string;
+    children?: ReactNode;
+}
+declare const TimelineItem: react.ForwardRefExoticComponent<TimelineItemProps & react.RefAttributes<HTMLDivElement>>;
+declare const Timeline: react.ForwardRefExoticComponent<TimelineProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Timeline, type TimelineAlign, TimelineItem, type TimelineItemData, type TimelineItemProps, type TimelineItemStatus, type TimelineProps, type TimelineSize, type TimelineVariant };