@etus/ui 0.4.0-beta.2 → 0.4.0-beta.20

package/dist/chunk-X2EMALTZ.js

@@ -0,0 +1,347 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var timelineVariants = cva("flex transition-colors duration-200", {
+  variants: {
+    variant: {
+      default: "flex-col gap-[var(--timeline-root-gap-default)]",
+      horizontal: "flex-row gap-[var(--timeline-root-gap-default)]",
+      compact: "flex-col gap-[var(--timeline-root-gap-compact)]",
+      detailed: "flex-col gap-[var(--timeline-root-gap-detailed)]"
+    },
+    size: {
+      sm: "",
+      default: "",
+      lg: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var timelineItemVariants = cva(
+  "relative flex transition-colors duration-200",
+  {
+    variants: {
+      variant: {
+        default: "flex-row gap-[var(--timeline-item-gap-default)]",
+        horizontal: "flex-col items-center gap-[var(--timeline-item-gap-horizontal)]",
+        compact: "flex-row gap-[var(--timeline-item-gap-compact)]",
+        detailed: "flex-row gap-[var(--timeline-item-gap-detailed)]"
+      },
+      size: {
+        sm: "",
+        default: "",
+        lg: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var timelineMarkerVariants = cva(
+  "shrink-0 rounded-full border-[length:var(--timeline-marker-border-width)] transition-colors duration-200 focus-visible:outline-none focus-visible:ring-[length:var(--timeline-marker-focus-ring-width)] focus-visible:ring-[color:var(--timeline-marker-focus-ring-color)]",
+  {
+    variants: {
+      status: {
+        pending: "border-[color:var(--timeline-marker-color-muted)] bg-background",
+        complete: "border-[color:var(--timeline-marker-color-success)] bg-[color:var(--timeline-marker-color-success)]",
+        current: "border-[color:var(--timeline-marker-color-default)] bg-[color:var(--timeline-marker-color-default)] ring-[3px] ring-[color:var(--timeline-marker-color-default)]/30",
+        error: "border-[color:var(--timeline-marker-color-error)] bg-[color:var(--timeline-marker-color-error)]"
+      },
+      size: {
+        sm: "size-[var(--timeline-marker-size-sm)]",
+        default: "size-[var(--timeline-marker-size-default)]",
+        lg: "size-[var(--timeline-marker-size-lg)]"
+      },
+      hasIcon: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        hasIcon: true,
+        className: "size-[var(--timeline-marker-size-icon-sm)] flex items-center justify-center"
+      },
+      {
+        size: "default",
+        hasIcon: true,
+        className: "size-[var(--timeline-marker-size-icon-default)] flex items-center justify-center"
+      },
+      {
+        size: "lg",
+        hasIcon: true,
+        className: "size-[var(--timeline-marker-size-icon-lg)] flex items-center justify-center"
+      }
+    ],
+    defaultVariants: {
+      status: "pending",
+      size: "default",
+      hasIcon: false
+    }
+  }
+);
+var timelineConnectorVariants = cva(
+  "absolute transition-colors duration-200",
+  {
+    variants: {
+      variant: {
+        default: "left-[var(--timeline-connector-offset-default)] top-[var(--timeline-connector-top-default)] w-[var(--timeline-connector-width)] h-full -translate-x-1/2",
+        horizontal: "top-[var(--timeline-connector-offset-default)] left-full w-full h-[var(--timeline-connector-width)] -translate-y-1/2",
+        compact: "left-[var(--timeline-connector-offset-compact)] top-[var(--timeline-connector-top-compact)] w-[var(--timeline-connector-width)] h-full -translate-x-1/2",
+        detailed: "left-[var(--timeline-connector-offset-detailed)] top-[var(--timeline-connector-top-detailed)] w-[var(--timeline-connector-width)] h-full -translate-x-1/2"
+      },
+      status: {
+        pending: "bg-muted-foreground/30",
+        complete: "bg-primary",
+        current: "bg-primary/50",
+        error: "bg-destructive/30"
+      },
+      size: {
+        sm: "",
+        default: "",
+        lg: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        size: "lg",
+        className: "left-[var(--timeline-connector-offset-lg)]"
+      },
+      {
+        variant: "horizontal",
+        size: "lg",
+        className: "top-[var(--timeline-connector-offset-lg)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      status: "pending",
+      size: "default"
+    }
+  }
+);
+function formatTimestamp(date) {
+  return date.toLocaleDateString(void 0, {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  });
+}
+function TimelineMarker({
+  icon,
+  isAnimated = false,
+  size = "default",
+  status = "pending"
+}) {
+  const hasIcon = Boolean(icon);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        timelineMarkerVariants({ status, size, hasIcon }),
+        isAnimated && status === "current" && "animate-pulse"
+      ),
+      "aria-hidden": "true",
+      "data-slot": "timeline-marker",
+      "data-status": status,
+      children: hasIcon && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center text-primary-foreground [&>svg]:h-4 [&>svg]:w-4", children: icon })
+    }
+  );
+}
+function TimelineConnector({
+  size = "default",
+  status = "pending",
+  variant = "default"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: timelineConnectorVariants({ variant, status, size }),
+      "data-slot": "timeline-connector"
+    }
+  );
+}
+function TimelineContent({
+  children,
+  className,
+  size = "default"
+}) {
+  const textSizes = {
+    default: "text-sm",
+    lg: "text-base",
+    sm: "text-xs"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex min-w-0 flex-1 flex-col", textSizes[size], className),
+      "data-slot": "timeline-content",
+      children
+    }
+  );
+}
+function TimelineItemComponent({
+  children,
+  className,
+  isActive = false,
+  isComplete = false,
+  isLast = false,
+  item,
+  showConnector = true,
+  size = "default",
+  variant = "default",
+  ...props
+}) {
+  const effectiveStatus = item?.status ?? (isComplete ? "complete" : "pending");
+  const isCurrentItem = isActive || item?.status === "current";
+  const handleKeyDown = (event) => {
+    const target = event.currentTarget;
+    const parent = target.parentElement;
+    if (!parent) return;
+    const siblings = [
+      ...parent.querySelectorAll('[data-slot="timeline-item"]')
+    ];
+    const currentIndex = siblings.indexOf(target);
+    let nextIndex = -1;
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault();
+        nextIndex = Math.min(currentIndex + 1, siblings.length - 1);
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault();
+        nextIndex = Math.max(currentIndex - 1, 0);
+        break;
+      default:
+        return;
+    }
+    const nextElement = siblings[nextIndex];
+    if (nextIndex !== -1 && nextElement) {
+      nextElement.focus();
+    }
+  };
+  const normalizedSize = size ?? void 0;
+  const normalizedVariant = variant ?? void 0;
+  const statusLabel = effectiveStatus === "complete" ? "Completed" : effectiveStatus === "current" ? "In progress" : effectiveStatus === "error" ? "Error" : "Pending";
+  const itemLabel = item?.title ? `${item.title} - ${statusLabel}` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        timelineItemVariants({ variant: normalizedVariant, size: normalizedSize }),
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className
+      ),
+      "aria-current": isCurrentItem ? "step" : void 0,
+      "aria-label": itemLabel,
+      "data-active": isCurrentItem ? "" : void 0,
+      "data-completed": effectiveStatus === "complete" ? "" : void 0,
+      "data-slot": "timeline-item",
+      "data-status": effectiveStatus,
+      role: "listitem",
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx(
+            TimelineMarker,
+            {
+              icon: item?.icon,
+              isAnimated: isCurrentItem,
+              size: normalizedSize,
+              status: effectiveStatus
+            }
+          ),
+          showConnector && !isLast && /* @__PURE__ */ jsx(
+            TimelineConnector,
+            {
+              size: normalizedSize,
+              status: effectiveStatus,
+              variant: normalizedVariant
+            }
+          )
+        ] }),
+        item ? /* @__PURE__ */ jsxs(TimelineContent, { size: normalizedSize, children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "timeline-title", children: /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: item.title }) }),
+          item.description && /* @__PURE__ */ jsx("div", { "data-slot": "timeline-description", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: item.description }) }),
+          item.timestamp && /* @__PURE__ */ jsx(
+            "time",
+            {
+              className: "mt-1 text-xs text-muted-foreground",
+              "data-slot": "timeline-timestamp",
+              dateTime: item.timestamp.toISOString(),
+              children: formatTimestamp(item.timestamp)
+            }
+          ),
+          item.content && /* @__PURE__ */ jsx("div", { className: "mt-2", "data-slot": "timeline-custom-content", children: item.content })
+        ] }) : /* @__PURE__ */ jsx(TimelineContent, { size: normalizedSize, children })
+      ]
+    }
+  );
+}
+function Timeline({
+  "aria-label": ariaLabel = "Timeline",
+  children,
+  className,
+  completed = 0,
+  connector = true,
+  items,
+  size = "default",
+  variant = "default",
+  activeIndex,
+  ...props
+}) {
+  const processedItems = items?.map((item, index) => {
+    if (item.status) return item;
+    if (index < completed) {
+      return { ...item, status: "complete" };
+    }
+    if (index === completed) {
+      return { ...item, status: "current" };
+    }
+    return { ...item, status: "pending" };
+  });
+  const hasContent = Boolean(processedItems?.length) || Boolean(children);
+  const normalizedSize = size ?? void 0;
+  const normalizedVariant = variant ?? void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn(timelineVariants({ variant: normalizedVariant, size: normalizedSize }), className),
+      "data-slot": "timeline",
+      "data-variant": variant ?? "default",
+      role: "list",
+      ...props,
+      children: processedItems ? processedItems.map((item, index) => /* @__PURE__ */ jsx(
+        TimelineItemComponent,
+        {
+          isActive: activeIndex === index,
+          isComplete: index < completed,
+          isLast: index === processedItems.length - 1,
+          item,
+          showConnector: connector,
+          size: normalizedSize,
+          variant: normalizedVariant
+        },
+        item.id
+      )) : hasContent ? children : null
+    }
+  );
+}
+
+export { Timeline, TimelineConnector, TimelineContent, TimelineItemComponent, TimelineMarker, timelineItemVariants, timelineMarkerVariants, timelineVariants };
+//# sourceMappingURL=chunk-X2EMALTZ.js.map
+//# sourceMappingURL=chunk-X2EMALTZ.js.map

package/dist/chunk-X2EMALTZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Timeline/Timeline.variants.ts","../src/components/data-display/Timeline/Timeline.tsx"],"names":[],"mappings":"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","file":"chunk-X2EMALTZ.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Timeline container variants\n */\nexport const timelineVariants = cva(\"flex transition-colors duration-200\", {\n  variants: {\n    variant: {\n      default: \"flex-col gap-[var(--timeline-root-gap-default)]\",\n      horizontal: \"flex-row gap-[var(--timeline-root-gap-default)]\",\n      compact: \"flex-col gap-[var(--timeline-root-gap-compact)]\",\n      detailed: \"flex-col gap-[var(--timeline-root-gap-detailed)]\",\n    },\n    size: {\n      sm: \"\",\n      default: \"\",\n      lg: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n})\n\n/**\n * Timeline item variants\n */\nexport const timelineItemVariants = cva(\n  \"relative flex transition-colors duration-200\",\n  {\n    variants: {\n      variant: {\n        default: \"flex-row gap-[var(--timeline-item-gap-default)]\",\n        horizontal: \"flex-col items-center gap-[var(--timeline-item-gap-horizontal)]\",\n        compact: \"flex-row gap-[var(--timeline-item-gap-compact)]\",\n        detailed: \"flex-row gap-[var(--timeline-item-gap-detailed)]\",\n      },\n      size: {\n        sm: \"\",\n        default: \"\",\n        lg: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\n/**\n * Timeline marker variants based on status\n */\nexport const timelineMarkerVariants = cva(\n  \"shrink-0 rounded-full border-[length:var(--timeline-marker-border-width)] transition-colors duration-200 focus-visible:outline-none focus-visible:ring-[length:var(--timeline-marker-focus-ring-width)] focus-visible:ring-[color:var(--timeline-marker-focus-ring-color)]\",\n  {\n    variants: {\n      status: {\n        pending: \"border-[color:var(--timeline-marker-color-muted)] bg-background\",\n        complete: \"border-[color:var(--timeline-marker-color-success)] bg-[color:var(--timeline-marker-color-success)]\",\n        current: \"border-[color:var(--timeline-marker-color-default)] bg-[color:var(--timeline-marker-color-default)] ring-[3px] ring-[color:var(--timeline-marker-color-default)]/30\",\n        error: \"border-[color:var(--timeline-marker-color-error)] bg-[color:var(--timeline-marker-color-error)]\",\n      },\n      size: {\n        sm: \"size-[var(--timeline-marker-size-sm)]\",\n        default: \"size-[var(--timeline-marker-size-default)]\",\n        lg: \"size-[var(--timeline-marker-size-lg)]\",\n      },\n      hasIcon: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        size: \"sm\",\n        hasIcon: true,\n        className: \"size-[var(--timeline-marker-size-icon-sm)] flex items-center justify-center\",\n      },\n      {\n        size: \"default\",\n        hasIcon: true,\n        className: \"size-[var(--timeline-marker-size-icon-default)] flex items-center justify-center\",\n      },\n      {\n        size: \"lg\",\n        hasIcon: true,\n        className: \"size-[var(--timeline-marker-size-icon-lg)] flex items-center justify-center\",\n      },\n    ],\n    defaultVariants: {\n      status: \"pending\",\n      size: \"default\",\n      hasIcon: false,\n    },\n  }\n)\n\n/**\n * Timeline connector line variants\n */\nexport const timelineConnectorVariants = cva(\n  \"absolute transition-colors duration-200\",\n  {\n    variants: {\n      variant: {\n        default: \"left-[var(--timeline-connector-offset-default)] top-[var(--timeline-connector-top-default)] w-[var(--timeline-connector-width)] h-full -translate-x-1/2\",\n        horizontal: \"top-[var(--timeline-connector-offset-default)] left-full w-full h-[var(--timeline-connector-width)] -translate-y-1/2\",\n        compact: \"left-[var(--timeline-connector-offset-compact)] top-[var(--timeline-connector-top-compact)] w-[var(--timeline-connector-width)] h-full -translate-x-1/2\",\n        detailed: \"left-[var(--timeline-connector-offset-detailed)] top-[var(--timeline-connector-top-detailed)] w-[var(--timeline-connector-width)] h-full -translate-x-1/2\",\n      },\n      status: {\n        pending: \"bg-muted-foreground/30\",\n        complete: \"bg-primary\",\n        current: \"bg-primary/50\",\n        error: \"bg-destructive/30\",\n      },\n      size: {\n        sm: \"\",\n        default: \"\",\n        lg: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"default\",\n        size: \"lg\",\n        className: \"left-[var(--timeline-connector-offset-lg)]\",\n      },\n      {\n        variant: \"horizontal\",\n        size: \"lg\",\n        className: \"top-[var(--timeline-connector-offset-lg)]\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      status: \"pending\",\n      size: \"default\",\n    },\n  }\n)\n\nexport type TimelineVariantProps = VariantProps<typeof timelineVariants>\nexport type TimelineItemVariantProps = VariantProps<typeof timelineItemVariants>\nexport type TimelineMarkerVariantProps = VariantProps<\n  typeof timelineMarkerVariants\n>\nexport type TimelineConnectorVariantProps = VariantProps<\n  typeof timelineConnectorVariants\n>\n","import type { TimelineItem, TimelineItemProps, TimelineProps } from \"./Timeline.types\"\nimport type { KeyboardEvent, ReactNode } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  timelineConnectorVariants,\n  timelineItemVariants,\n  timelineMarkerVariants,\n  timelineVariants,\n} from \"./Timeline.variants\"\n\n/**\n * Format a date to a human-readable string\n */\nfunction formatTimestamp(date: Date): string {\n  return date.toLocaleDateString(undefined, {\n    day: \"numeric\",\n    month: \"short\",\n    year: \"numeric\",\n  })\n}\n\n/**\n * TimelineMarker component renders the status indicator\n */\nfunction TimelineMarker({\n  icon,\n  isAnimated = false,\n  size = \"default\",\n  status = \"pending\",\n}: {\n  icon?: ReactNode\n  isAnimated?: boolean\n  size?: \"default\" | \"lg\" | \"sm\"\n  status?: \"complete\" | \"current\" | \"error\" | \"pending\"\n}) {\n  const hasIcon = Boolean(icon)\n\n  return (\n    <div\n      className={cn(\n        timelineMarkerVariants({ status, size, hasIcon }),\n        isAnimated && status === \"current\" && \"animate-pulse\"\n      )}\n      aria-hidden=\"true\"\n      data-slot=\"timeline-marker\"\n      data-status={status}\n    >\n      {hasIcon && (\n        <span className=\"flex items-center justify-center text-primary-foreground [&>svg]:h-4 [&>svg]:w-4\">\n          {icon}\n        </span>\n      )}\n    </div>\n  )\n}\n\n/**\n * TimelineConnector component renders the line between items\n */\nfunction TimelineConnector({\n  size = \"default\",\n  status = \"pending\",\n  variant = \"default\",\n}: {\n  size?: \"default\" | \"lg\" | \"sm\"\n  status?: \"complete\" | \"current\" | \"error\" | \"pending\"\n  variant?: \"compact\" | \"default\" | \"detailed\" | \"horizontal\"\n}) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={timelineConnectorVariants({ variant, status, size })}\n      data-slot=\"timeline-connector\"\n    />\n  )\n}\n\n/**\n * TimelineContent component renders the item's text content\n */\nfunction TimelineContent({\n  children,\n  className,\n  size = \"default\",\n}: {\n  children: ReactNode\n  className?: string\n  size?: \"default\" | \"lg\" | \"sm\"\n}) {\n  const textSizes = {\n    default: \"text-sm\",\n    lg: \"text-base\",\n    sm: \"text-xs\",\n  }\n\n  return (\n    <div\n      className={cn(\"flex min-w-0 flex-1 flex-col\", textSizes[size], className)}\n      data-slot=\"timeline-content\"\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * TimelineItemComponent renders a single timeline entry\n */\nfunction TimelineItemComponent({\n  children,\n  className,\n  isActive = false,\n  isComplete = false,\n  isLast = false,\n  item,\n  showConnector = true,\n  size = \"default\",\n  variant = \"default\",\n  ...props\n}: TimelineItemProps) {\n  // Determine the effective status\n  const effectiveStatus = item?.status ?? (isComplete ? \"complete\" : \"pending\")\n  const isCurrentItem = isActive || item?.status === \"current\"\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const target = event.currentTarget\n    const parent = target.parentElement\n    if (!parent) return\n\n    const siblings = [\n      ...parent.querySelectorAll('[data-slot=\"timeline-item\"]'),\n    ] as HTMLDivElement[]\n    const currentIndex = siblings.indexOf(target)\n\n    let nextIndex = -1\n\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        event.preventDefault()\n        nextIndex = Math.min(currentIndex + 1, siblings.length - 1)\n        break\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        event.preventDefault()\n        nextIndex = Math.max(currentIndex - 1, 0)\n        break\n      default:\n        return\n    }\n\n    const nextElement = siblings[nextIndex]\n    if (nextIndex !== -1 && nextElement) {\n      nextElement.focus()\n    }\n  }\n\n  // Normalize null to undefined for size and variant\n  const normalizedSize = size ?? undefined\n  const normalizedVariant = variant ?? undefined\n\n  // Generate accessible label for screen readers\n  const statusLabel =\n    effectiveStatus === \"complete\"\n      ? \"Completed\"\n      : effectiveStatus === \"current\"\n        ? \"In progress\"\n        : effectiveStatus === \"error\"\n          ? \"Error\"\n          : \"Pending\"\n  const itemLabel = item?.title\n    ? `${item.title} - ${statusLabel}`\n    : undefined\n\n  return (\n    <div\n      className={cn(\n        timelineItemVariants({ variant: normalizedVariant, size: normalizedSize }),\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n        className\n      )}\n      aria-current={isCurrentItem ? \"step\" : undefined}\n      aria-label={itemLabel}\n      data-active={isCurrentItem ? \"\" : undefined}\n      data-completed={effectiveStatus === \"complete\" ? \"\" : undefined}\n      data-slot=\"timeline-item\"\n      data-status={effectiveStatus}\n      role=\"listitem\"\n      tabIndex={0}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {/* Marker with optional connector */}\n      <div className=\"relative flex flex-col items-center\">\n        <TimelineMarker\n          icon={item?.icon}\n          isAnimated={isCurrentItem}\n          size={normalizedSize}\n          status={effectiveStatus}\n        />\n        {showConnector && !isLast && (\n          <TimelineConnector\n            size={normalizedSize}\n            status={effectiveStatus}\n            variant={normalizedVariant}\n          />\n        )}\n      </div>\n\n      {/* Content */}\n      {item ? (\n        <TimelineContent size={normalizedSize}>\n          <div data-slot=\"timeline-title\">\n            <span className=\"font-medium text-foreground\">{item.title}</span>\n          </div>\n          {item.description && (\n            <div data-slot=\"timeline-description\">\n              <span className=\"text-muted-foreground\">{item.description}</span>\n            </div>\n          )}\n          {item.timestamp && (\n            <time\n              className=\"mt-1 text-xs text-muted-foreground\"\n              data-slot=\"timeline-timestamp\"\n              dateTime={item.timestamp.toISOString()}\n            >\n              {formatTimestamp(item.timestamp)}\n            </time>\n          )}\n          {item.content && (\n            <div className=\"mt-2\" data-slot=\"timeline-custom-content\">\n              {item.content}\n            </div>\n          )}\n        </TimelineContent>\n      ) : (\n        <TimelineContent size={normalizedSize}>{children}</TimelineContent>\n      )}\n    </div>\n  )\n}\n\n/**\n * Timeline component displays a sequence of events in chronological order.\n *\n * @example\n * ```tsx\n * const items = [\n *   { id: \"1\", title: \"Started\", status: \"complete\" },\n *   { id: \"2\", title: \"In Progress\", status: \"current\" },\n *   { id: \"3\", title: \"Pending\", status: \"pending\" },\n * ]\n * <Timeline items={items} />\n * ```\n */\nfunction Timeline({\n  \"aria-label\": ariaLabel = \"Timeline\",\n  children,\n  className,\n  completed = 0,\n  connector = true,\n  items,\n  size = \"default\",\n  variant = \"default\",\n  activeIndex,\n  ...props\n}: TimelineProps) {\n  // Process items with completed count if provided\n  const processedItems = items?.map((item, index): TimelineItem => {\n    if (item.status) return item\n\n    // Auto-set status based on completed count\n    if (index < completed) {\n      return { ...item, status: \"complete\" }\n    }\n    if (index === completed) {\n      return { ...item, status: \"current\" }\n    }\n    return { ...item, status: \"pending\" }\n  })\n\n  const hasContent = Boolean(processedItems?.length) || Boolean(children)\n\n  // Normalize null to undefined for size and variant\n  const normalizedSize = size ?? undefined\n  const normalizedVariant = variant ?? undefined\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      className={cn(timelineVariants({ variant: normalizedVariant, size: normalizedSize }), className)}\n      data-slot=\"timeline\"\n      data-variant={variant ?? \"default\"}\n      role=\"list\"\n      {...props}\n    >\n      {processedItems\n        ? processedItems.map((item, index) => (\n            <TimelineItemComponent\n              key={item.id}\n              isActive={activeIndex === index}\n              isComplete={index < completed}\n              isLast={index === processedItems.length - 1}\n              item={item}\n              showConnector={connector}\n              size={normalizedSize}\n              variant={normalizedVariant}\n            />\n          ))\n        : hasContent\n          ? children\n          : null}\n    </div>\n  )\n}\n\nexport {\n  Timeline,\n  TimelineConnector,\n  TimelineContent,\n  TimelineItemComponent as TimelineItem,\n  timelineItemVariants,\n  TimelineMarker,\n  timelineMarkerVariants,\n  timelineVariants,\n}\nexport type { TimelineItem as TimelineItemData, TimelineItemProps, TimelineProps }\n"]}

package/dist/chunk-X4CJFD6D.js

@@ -0,0 +1,58 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var featuredIconVariants = cva(
+  "inline-grid place-items-center shrink-0 [&_svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        xs: "size-[var(--featured-icon-size-xs-plate)] [&_svg]:size-[var(--featured-icon-size-xs-icon)]",
+        sm: "size-[var(--featured-icon-size-sm-plate)] [&_svg]:size-[var(--featured-icon-size-sm-icon)]",
+        md: "size-[var(--featured-icon-size-md-plate)] [&_svg]:size-[var(--featured-icon-size-md-icon)]",
+        lg: "size-[var(--featured-icon-size-lg-plate)] [&_svg]:size-[var(--featured-icon-size-lg-icon)]",
+        xl: "size-[var(--featured-icon-size-xl-plate)] [&_svg]:size-[var(--featured-icon-size-xl-icon)]",
+        "2xl": "size-[var(--featured-icon-size-2xl-plate)] [&_svg]:size-[var(--featured-icon-size-2xl-icon)]"
+      },
+      shape: {
+        default: "rounded-[var(--featured-icon-radius-default)]",
+        circle: "rounded-[var(--featured-icon-radius-circle)]"
+      },
+      tone: {
+        default: "bg-[color:var(--featured-icon-color-default-bg)] text-[color:var(--featured-icon-color-default-fg)]",
+        brand: "bg-[color:var(--featured-icon-color-brand-bg)] text-[color:var(--featured-icon-color-brand-fg)]",
+        success: "bg-[color:var(--featured-icon-color-success-bg)] text-[color:var(--featured-icon-color-success-fg)]",
+        warning: "bg-[color:var(--featured-icon-color-warning-bg)] text-[color:var(--featured-icon-color-warning-fg)]",
+        info: "bg-[color:var(--featured-icon-color-info-bg)] text-[color:var(--featured-icon-color-info-fg)]",
+        destructive: "bg-[color:var(--featured-icon-color-destructive-bg)] text-[color:var(--featured-icon-color-destructive-fg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "default",
+      tone: "default"
+    }
+  }
+);
+function FeaturedIcon({
+  className,
+  size,
+  shape,
+  tone,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(featuredIconVariants({ size, shape, tone }), className),
+      "data-slot": "featured-icon",
+      ...props,
+      children
+    }
+  );
+}
+
+export { FeaturedIcon, featuredIconVariants };
+//# sourceMappingURL=chunk-X4CJFD6D.js.map
+//# sourceMappingURL=chunk-X4CJFD6D.js.map

package/dist/chunk-X4CJFD6D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/FeaturedIcon/FeaturedIcon.variants.ts","../src/components/primitives/FeaturedIcon/FeaturedIcon.tsx"],"names":[],"mappings":";;;;AAEO,IAAM,oBAAA,GAAuB,GAAA;AAAA,EAClC,0DAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,4FAAA;AAAA,QACJ,EAAA,EAAI,4FAAA;AAAA,QACJ,EAAA,EAAI,4FAAA;AAAA,QACJ,EAAA,EAAI,4FAAA;AAAA,QACJ,EAAA,EAAI,4FAAA;AAAA,QACJ,KAAA,EAAO;AAAA,OACT;AAAA,MACA,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,+CAAA;AAAA,QACT,MAAA,EAAQ;AAAA,OACV;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EACE,qGAAA;AAAA,QACF,KAAA,EACE,iGAAA;AAAA,QACF,OAAA,EACE,qGAAA;AAAA,QACF,OAAA,EACE,qGAAA;AAAA,QACF,IAAA,EAAM,+FAAA;AAAA,QACN,WAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,KAAA,EAAO,SAAA;AAAA,MACP,IAAA,EAAM;AAAA;AACR;AAEJ;ACjCA,SAAS,YAAA,CAAa;AAAA,EACpB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,oBAAA,CAAqB,EAAE,MAAM,KAAA,EAAO,IAAA,EAAM,CAAA,EAAG,SAAS,CAAA;AAAA,MACpE,WAAA,EAAU,eAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"chunk-X4CJFD6D.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const featuredIconVariants = cva(\n  \"inline-grid place-items-center shrink-0 [&_svg]:shrink-0\",\n  {\n    variants: {\n      size: {\n        xs: \"size-[var(--featured-icon-size-xs-plate)] [&_svg]:size-[var(--featured-icon-size-xs-icon)]\",\n        sm: \"size-[var(--featured-icon-size-sm-plate)] [&_svg]:size-[var(--featured-icon-size-sm-icon)]\",\n        md: \"size-[var(--featured-icon-size-md-plate)] [&_svg]:size-[var(--featured-icon-size-md-icon)]\",\n        lg: \"size-[var(--featured-icon-size-lg-plate)] [&_svg]:size-[var(--featured-icon-size-lg-icon)]\",\n        xl: \"size-[var(--featured-icon-size-xl-plate)] [&_svg]:size-[var(--featured-icon-size-xl-icon)]\",\n        \"2xl\": \"size-[var(--featured-icon-size-2xl-plate)] [&_svg]:size-[var(--featured-icon-size-2xl-icon)]\",\n      },\n      shape: {\n        default: \"rounded-[var(--featured-icon-radius-default)]\",\n        circle: \"rounded-[var(--featured-icon-radius-circle)]\",\n      },\n      tone: {\n        default:\n          \"bg-[color:var(--featured-icon-color-default-bg)] text-[color:var(--featured-icon-color-default-fg)]\",\n        brand:\n          \"bg-[color:var(--featured-icon-color-brand-bg)] text-[color:var(--featured-icon-color-brand-fg)]\",\n        success:\n          \"bg-[color:var(--featured-icon-color-success-bg)] text-[color:var(--featured-icon-color-success-fg)]\",\n        warning:\n          \"bg-[color:var(--featured-icon-color-warning-bg)] text-[color:var(--featured-icon-color-warning-fg)]\",\n        info: \"bg-[color:var(--featured-icon-color-info-bg)] text-[color:var(--featured-icon-color-info-fg)]\",\n        destructive:\n          \"bg-[color:var(--featured-icon-color-destructive-bg)] text-[color:var(--featured-icon-color-destructive-fg)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      shape: \"default\",\n      tone: \"default\",\n    },\n  }\n)\n","import type { FeaturedIconProps } from \"./FeaturedIcon.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { featuredIconVariants } from \"./FeaturedIcon.variants\"\n\nfunction FeaturedIcon({\n  className,\n  size,\n  shape,\n  tone,\n  children,\n  ...props\n}: FeaturedIconProps) {\n  return (\n    <span\n      className={cn(featuredIconVariants({ size, shape, tone }), className)}\n      data-slot=\"featured-icon\"\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport { FeaturedIcon, featuredIconVariants }\n"]}

package/dist/chunk-XEQGATVF.js

@@ -0,0 +1,106 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var spacerVariants = cva("shrink-0", {
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: "",
+      "2xl": ""
+    },
+    axis: {
+      vertical: "w-full",
+      horizontal: "h-full",
+      both: ""
+    },
+    flex: {
+      none: "",
+      grow: "flex-grow",
+      shrink: "flex-shrink"
+    }
+  },
+  compoundVariants: [
+    // Vertical sizes
+    { axis: "vertical", size: "xs", class: "h-[var(--spacer-size-xs)]" },
+    { axis: "vertical", size: "sm", class: "h-[var(--spacer-size-sm)]" },
+    { axis: "vertical", size: "md", class: "h-[var(--spacer-size-md)]" },
+    { axis: "vertical", size: "lg", class: "h-[var(--spacer-size-lg)]" },
+    { axis: "vertical", size: "xl", class: "h-[var(--spacer-size-xl)]" },
+    { axis: "vertical", size: "2xl", class: "h-[var(--spacer-size-2xl)]" },
+    // Horizontal sizes
+    { axis: "horizontal", size: "xs", class: "w-[var(--spacer-size-xs)]" },
+    { axis: "horizontal", size: "sm", class: "w-[var(--spacer-size-sm)]" },
+    { axis: "horizontal", size: "md", class: "w-[var(--spacer-size-md)]" },
+    { axis: "horizontal", size: "lg", class: "w-[var(--spacer-size-lg)]" },
+    { axis: "horizontal", size: "xl", class: "w-[var(--spacer-size-xl)]" },
+    { axis: "horizontal", size: "2xl", class: "w-[var(--spacer-size-2xl)]" },
+    // Both sizes
+    { axis: "both", size: "xs", class: "size-[var(--spacer-size-xs)]" },
+    { axis: "both", size: "sm", class: "size-[var(--spacer-size-sm)]" },
+    { axis: "both", size: "md", class: "size-[var(--spacer-size-md)]" },
+    { axis: "both", size: "lg", class: "size-[var(--spacer-size-lg)]" },
+    { axis: "both", size: "xl", class: "size-[var(--spacer-size-xl)]" },
+    { axis: "both", size: "2xl", class: "size-[var(--spacer-size-2xl)]" }
+  ],
+  defaultVariants: {
+    size: "md",
+    axis: "vertical",
+    flex: "none"
+  }
+});
+var TOKEN_SIZES = /* @__PURE__ */ new Set(["xs", "sm", "md", "lg", "xl", "2xl"]);
+function isTokenSize(size) {
+  return typeof size === "string" && TOKEN_SIZES.has(size);
+}
+function toCssSize(size) {
+  if (typeof size === "number") {
+    return `${String(size)}px`;
+  }
+  return size;
+}
+function Spacer({
+  className,
+  size = "md",
+  axis = "vertical",
+  flex,
+  style,
+  ref,
+  ...props
+}) {
+  const useTokenSize = isTokenSize(size);
+  const customStyle = useTokenSize ? style : {
+    ...style,
+    ...axis === "vertical" && { height: toCssSize(size) },
+    ...axis === "horizontal" && { width: toCssSize(size) },
+    ...axis === "both" && {
+      width: toCssSize(size),
+      height: toCssSize(size)
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        spacerVariants({
+          size: useTokenSize ? size : void 0,
+          axis,
+          flex
+        }),
+        className
+      ),
+      "aria-hidden": "true",
+      "data-slot": "spacer",
+      style: customStyle,
+      ...props
+    }
+  );
+}
+
+export { Spacer, spacerVariants };
+//# sourceMappingURL=chunk-XEQGATVF.js.map
+//# sourceMappingURL=chunk-XEQGATVF.js.map

package/dist/chunk-XEQGATVF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Spacer/Spacer.tsx"],"names":[],"mappings":"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","file":"chunk-XEQGATVF.js","sourcesContent":["import type { SpacerProps, SpacerTokenSize } from \"./Spacer.types\"\n\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst spacerVariants = cva(\"shrink-0\", {\n  variants: {\n    size: {\n      xs: \"\",\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n      xl: \"\",\n      \"2xl\": \"\",\n    },\n    axis: {\n      vertical: \"w-full\",\n      horizontal: \"h-full\",\n      both: \"\",\n    },\n    flex: {\n      none: \"\",\n      grow: \"flex-grow\",\n      shrink: \"flex-shrink\",\n    },\n  },\n  compoundVariants: [\n    // Vertical sizes\n    { axis: \"vertical\", size: \"xs\", class: \"h-[var(--spacer-size-xs)]\" },\n    { axis: \"vertical\", size: \"sm\", class: \"h-[var(--spacer-size-sm)]\" },\n    { axis: \"vertical\", size: \"md\", class: \"h-[var(--spacer-size-md)]\" },\n    { axis: \"vertical\", size: \"lg\", class: \"h-[var(--spacer-size-lg)]\" },\n    { axis: \"vertical\", size: \"xl\", class: \"h-[var(--spacer-size-xl)]\" },\n    { axis: \"vertical\", size: \"2xl\", class: \"h-[var(--spacer-size-2xl)]\" },\n    // Horizontal sizes\n    { axis: \"horizontal\", size: \"xs\", class: \"w-[var(--spacer-size-xs)]\" },\n    { axis: \"horizontal\", size: \"sm\", class: \"w-[var(--spacer-size-sm)]\" },\n    { axis: \"horizontal\", size: \"md\", class: \"w-[var(--spacer-size-md)]\" },\n    { axis: \"horizontal\", size: \"lg\", class: \"w-[var(--spacer-size-lg)]\" },\n    { axis: \"horizontal\", size: \"xl\", class: \"w-[var(--spacer-size-xl)]\" },\n    { axis: \"horizontal\", size: \"2xl\", class: \"w-[var(--spacer-size-2xl)]\" },\n    // Both sizes\n    { axis: \"both\", size: \"xs\", class: \"size-[var(--spacer-size-xs)]\" },\n    { axis: \"both\", size: \"sm\", class: \"size-[var(--spacer-size-sm)]\" },\n    { axis: \"both\", size: \"md\", class: \"size-[var(--spacer-size-md)]\" },\n    { axis: \"both\", size: \"lg\", class: \"size-[var(--spacer-size-lg)]\" },\n    { axis: \"both\", size: \"xl\", class: \"size-[var(--spacer-size-xl)]\" },\n    { axis: \"both\", size: \"2xl\", class: \"size-[var(--spacer-size-2xl)]\" },\n  ],\n  defaultVariants: {\n    size: \"md\",\n    axis: \"vertical\",\n    flex: \"none\",\n  },\n})\n\n/**\n * Token-based sizes for type checking\n */\nconst TOKEN_SIZES = new Set([\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"])\n\n/**\n * Check if size is a token-based size\n */\nfunction isTokenSize(size: unknown): size is SpacerTokenSize {\n  return typeof size === \"string\" && TOKEN_SIZES.has(size)\n}\n\n/**\n * Convert numeric size to CSS value\n */\nfunction toCssSize(size: number | string): string {\n  if (typeof size === \"number\") {\n    return `${String(size)}px`\n  }\n  return size\n}\n\n/**\n * Spacer component for adding space between elements.\n *\n * Supports both token-based sizes (xs-2xl) and custom numeric values.\n *\n * @example\n * ```tsx\n * // Token-based sizes\n * <Spacer size=\"md\" />\n *\n * // Numeric sizes (pixels)\n * <Spacer size={24} />\n *\n * // With units\n * <Spacer size=\"2rem\" />\n *\n * // Horizontal spacer\n * <Spacer size=\"lg\" axis=\"horizontal\" />\n *\n * // Flexible spacer (grows to fill)\n * <Spacer flex=\"grow\" />\n * ```\n */\nfunction Spacer({\n  className,\n  size = \"md\",\n  axis = \"vertical\",\n  flex,\n  style,\n  ref,\n  ...props\n}: SpacerProps) {\n  // Determine if using token-based or numeric size\n  const useTokenSize = isTokenSize(size)\n\n  // Build inline styles for numeric sizes\n  const customStyle = useTokenSize\n    ? style\n    : {\n        ...style,\n        ...(axis === \"vertical\" && { height: toCssSize(size) }),\n        ...(axis === \"horizontal\" && { width: toCssSize(size) }),\n        ...(axis === \"both\" && {\n          width: toCssSize(size),\n          height: toCssSize(size),\n        }),\n      }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        spacerVariants({\n          size: useTokenSize ? size : undefined,\n          axis,\n          flex,\n        }),\n        className\n      )}\n      aria-hidden=\"true\"\n      data-slot=\"spacer\"\n      style={customStyle}\n      {...props}\n    />\n  )\n}\n\nexport { Spacer, spacerVariants }\n"]}