@particle-academy/react-fancy 5.11.0 → 5.13.1

package/dist/chunk-ZT36VWIA.js

@@ -0,0 +1,136 @@
+import { DisplayValue } from './chunk-K7JGOQJG.js';
+import { Field } from './chunk-3DJGPNUI.js';
+import { resolveOption } from './chunk-GFYSELJF.js';
+import { useInlineEdit } from './chunk-OL53XYHF.js';
+import { useFieldMode } from './chunk-NRXK42LO.js';
+import { useControllableState } from './chunk-6FQGMVF2.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var sizeClasses = {
+  xs: "px-2 py-1 text-xs",
+  sm: "px-2.5 py-1.5 text-sm",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base",
+  xl: "px-5 py-3 text-lg"
+};
+function MultiSwitch({
+  size = "md",
+  dirty,
+  error,
+  label,
+  description,
+  required,
+  disabled,
+  className,
+  id,
+  name,
+  list,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  linear,
+  mode,
+  ...rest
+}) {
+  const resolvedOptions = list.map(resolveOption);
+  const fallback = defaultValue ?? resolvedOptions[0]?.value;
+  const resolvedMode = useFieldMode(mode);
+  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+  const [value, setValue] = useControllableState(controlledValue, fallback, onValueChange);
+  const containerRef = useRef(null);
+  const itemRefs = useRef([]);
+  const [indicator, setIndicator] = useState(null);
+  const selectedIndex = resolvedOptions.findIndex(
+    (o) => o.value === value
+  );
+  const updateIndicator = useCallback(() => {
+    const container = containerRef.current;
+    const activeItem = itemRefs.current[selectedIndex];
+    if (!container || !activeItem) {
+      setIndicator(null);
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const itemRect = activeItem.getBoundingClientRect();
+    setIndicator({
+      left: itemRect.left - containerRect.left,
+      width: itemRect.width
+    });
+  }, [selectedIndex]);
+  useEffect(() => {
+    updateIndicator();
+  }, [updateIndicator]);
+  const control = !showControl ? /* @__PURE__ */ jsx(DisplayValue, { size, interactive, onActivate: enterEdit, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      ...rest,
+      "data-react-fancy-multi-switch": "",
+      role: "radiogroup",
+      id,
+      onBlur: (e) => {
+        if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+      },
+      className: cn(
+        "relative inline-flex rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800",
+        dirty && "ring-2 ring-amber-400/50",
+        error && "ring-2 ring-red-500/50",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      children: [
+        indicator && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out",
+            style: { left: indicator.left, width: indicator.width }
+          }
+        ),
+        resolvedOptions.map((option, index) => {
+          const isSelected = option.value === value;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (el) => {
+                itemRefs.current[index] = el;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": isSelected,
+              disabled: disabled || option.disabled,
+              autoFocus: interactive && (selectedIndex === -1 ? index === 0 : isSelected),
+              onClick: () => {
+                if (linear) {
+                  const nextIndex = (selectedIndex + 1) % resolvedOptions.length;
+                  setValue(resolvedOptions[nextIndex].value);
+                } else {
+                  setValue(option.value);
+                }
+              },
+              className: cn(
+                "relative z-10 font-medium transition-colors duration-200",
+                sizeClasses[size],
+                isSelected ? "text-white" : "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100",
+                (disabled || option.disabled) && "cursor-not-allowed"
+              ),
+              children: option.label
+            },
+            String(option.value)
+          );
+        }),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: String(value) })
+      ]
+    }
+  );
+  if (label || error || description) {
+    return /* @__PURE__ */ jsx(Field, { label, description, error, required, htmlFor: id, size, children: control });
+  }
+  return control;
+}
+MultiSwitch.displayName = "MultiSwitch";
+
+export { MultiSwitch };
+//# sourceMappingURL=chunk-ZT36VWIA.js.map
+//# sourceMappingURL=chunk-ZT36VWIA.js.map

package/dist/chunk-ZT36VWIA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/MultiSwitch/MultiSwitch.tsx"],"names":[],"mappings":"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","file":"chunk-ZT36VWIA.js","sourcesContent":["import { useRef, useState, useEffect, useCallback } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { resolveOption } from \"../inputs.utils\";\nimport type { Size } from \"../../../utils/types\";\nimport type { MultiSwitchProps } from \"./MultiSwitch.types\";\n\nconst sizeClasses: Record<Size, string> = {\n  xs: \"px-2 py-1 text-xs\",\n  sm: \"px-2.5 py-1.5 text-sm\",\n  md: \"px-3 py-2 text-sm\",\n  lg: \"px-4 py-2.5 text-base\",\n  xl: \"px-5 py-3 text-lg\",\n};\n\nexport function MultiSwitch<V = string>({\n  size = \"md\",\n  dirty,\n  error,\n  label,\n  description,\n  required,\n  disabled,\n  className,\n  id,\n  name,\n  list,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  linear,\n  mode,\n  ...rest\n}: MultiSwitchProps<V>) {\n  const resolvedOptions = list.map(resolveOption);\n  const fallback = defaultValue ?? resolvedOptions[0]?.value;\n  const resolvedMode = useFieldMode(mode);\n  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n  const [value, setValue] = useControllableState(controlledValue, fallback as V, onValueChange);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null);\n\n  const selectedIndex = resolvedOptions.findIndex(\n    (o) => o.value === value,\n  );\n\n  const updateIndicator = useCallback(() => {\n    const container = containerRef.current;\n    const activeItem = itemRefs.current[selectedIndex];\n    if (!container || !activeItem) {\n      setIndicator(null);\n      return;\n    }\n    const containerRect = container.getBoundingClientRect();\n    const itemRect = activeItem.getBoundingClientRect();\n    setIndicator({\n      left: itemRect.left - containerRect.left,\n      width: itemRect.width,\n    });\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    updateIndicator();\n  }, [updateIndicator]);\n\n  const control = !showControl ? (\n    <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n      {resolvedOptions.find((o) => o.value === value)?.label}\n    </DisplayValue>\n  ) : (\n    <div\n      ref={containerRef}\n      {...rest}\n      data-react-fancy-multi-switch=\"\"\n      role=\"radiogroup\"\n      id={id}\n      onBlur={(e) => {\n        if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n      }}\n      className={cn(\n        \"relative inline-flex rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800\",\n        dirty && \"ring-2 ring-amber-400/50\",\n        error && \"ring-2 ring-red-500/50\",\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className,\n      )}\n    >\n      {indicator && (\n        <span\n          className=\"absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out\"\n          style={{ left: indicator.left, width: indicator.width }}\n        />\n      )}\n      {resolvedOptions.map((option, index) => {\n        const isSelected = option.value === value;\n        return (\n          <button\n            key={String(option.value)}\n            ref={(el) => { itemRefs.current[index] = el; }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            disabled={disabled || option.disabled}\n            autoFocus={interactive && (selectedIndex === -1 ? index === 0 : isSelected)}\n            onClick={() => {\n              if (linear) {\n                const nextIndex = (selectedIndex + 1) % resolvedOptions.length;\n                setValue(resolvedOptions[nextIndex].value as V);\n              } else {\n                setValue(option.value as V);\n              }\n            }}\n            className={cn(\n              \"relative z-10 font-medium transition-colors duration-200\",\n              sizeClasses[size],\n              isSelected\n                ? \"text-white\"\n                : \"text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\",\n              (disabled || option.disabled) && \"cursor-not-allowed\",\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n      {name && <input type=\"hidden\" name={name} value={String(value)} />}\n    </div>\n  );\n\n  if (label || error || description) {\n    return (\n      <Field label={label} description={description} error={error} required={required} htmlFor={id} size={size}>\n        {control}\n      </Field>\n    );\n  }\n\n  return control;\n}\n\nMultiSwitch.displayName = \"MultiSwitch\";\n"]}

package/dist/chunk-ZWOEKDNI.js

@@ -0,0 +1,281 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { createContext, forwardRef, useRef, Children, useCallback, useContext, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TimelineContext = createContext({
+  variant: "stacked",
+  index: 0,
+  total: 0,
+  animated: true
+});
+function useTimeline() {
+  return useContext(TimelineContext);
+}
+var dotColorClasses = {
+  slate: "bg-slate-400 dark:bg-slate-600",
+  gray: "bg-gray-400 dark:bg-gray-600",
+  zinc: "bg-zinc-300 dark:bg-zinc-600",
+  neutral: "bg-neutral-400 dark:bg-neutral-600",
+  stone: "bg-stone-400 dark:bg-stone-600",
+  red: "bg-red-500",
+  orange: "bg-orange-500",
+  amber: "bg-amber-500",
+  yellow: "bg-yellow-500",
+  lime: "bg-lime-500",
+  green: "bg-green-500",
+  emerald: "bg-emerald-500",
+  teal: "bg-teal-500",
+  cyan: "bg-cyan-500",
+  sky: "bg-sky-500",
+  blue: "bg-blue-500",
+  indigo: "bg-indigo-500",
+  violet: "bg-violet-500",
+  purple: "bg-purple-500",
+  fuchsia: "bg-fuchsia-500",
+  pink: "bg-pink-500",
+  rose: "bg-rose-500"
+};
+var ringColorClasses = {
+  slate: "ring-slate-400/30",
+  gray: "ring-gray-400/30",
+  zinc: "ring-zinc-400/30 dark:ring-zinc-500/30",
+  neutral: "ring-neutral-400/30",
+  stone: "ring-stone-400/30",
+  red: "ring-red-500/30",
+  orange: "ring-orange-500/30",
+  amber: "ring-amber-500/30",
+  yellow: "ring-yellow-500/30",
+  lime: "ring-lime-500/30",
+  green: "ring-green-500/30",
+  emerald: "ring-emerald-500/30",
+  teal: "ring-teal-500/30",
+  cyan: "ring-cyan-500/30",
+  sky: "ring-sky-500/30",
+  blue: "ring-blue-500/30",
+  indigo: "ring-indigo-500/30",
+  violet: "ring-violet-500/30",
+  purple: "ring-purple-500/30",
+  fuchsia: "ring-fuchsia-500/30",
+  pink: "ring-pink-500/30",
+  rose: "ring-rose-500/30"
+};
+function Dot({ icon, emoji, color, active }) {
+  const c = color ?? "zinc";
+  if (emoji) {
+    return /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800", children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: emoji }) });
+  }
+  if (icon) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white",
+          dotColorClasses[c],
+          active && "ring-4",
+          active && ringColorClasses[c]
+        ),
+        children: icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "h-3 w-3 shrink-0 rounded-full",
+        dotColorClasses[c],
+        active && "ring-4",
+        active && ringColorClasses[c]
+      )
+    }
+  );
+}
+function useIntersectionReveal(animated) {
+  const ref = useRef(null);
+  const [visible, setVisible] = useState(!animated);
+  useEffect(() => {
+    if (!animated || !ref.current) return;
+    const el = ref.current;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.2 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [animated]);
+  return { ref, visible };
+}
+var TimelineItem = forwardRef(
+  ({ children, icon, emoji, date, color = "zinc", active = false, className }, _ref) => {
+    const { variant, index, total, animated } = useTimeline();
+    const { ref, visible } = useIntersectionReveal(animated);
+    const isLast = index === total - 1;
+    const isLargeDot = !!icon || !!emoji;
+    const isEven = index % 2 === 0;
+    if (variant === "horizontal") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          "data-react-fancy-timeline-item": "",
+          className: cn(
+            "flex flex-col items-center",
+            !isLast && "min-w-40",
+            animated && "transition duration-500 ease-out",
+            animated && (visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"),
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-full items-center", children: [
+              index > 0 ? /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+              /* @__PURE__ */ jsx(Dot, { icon, emoji, color, active }),
+              !isLast ? /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" }) : /* @__PURE__ */ jsx("div", { className: "flex-1" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 max-w-40 px-2 text-center", children: [
+              date && /* @__PURE__ */ jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: date }),
+              children
+            ] })
+          ]
+        }
+      );
+    }
+    if (variant === "alternating") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          "data-react-fancy-timeline-item": "",
+          className: cn(
+            "relative flex gap-x-4 md:grid md:grid-cols-[1fr_1.5rem_1fr] md:gap-x-6",
+            animated && "transition duration-500 ease-out",
+            animated && (visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"),
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "relative z-10 flex w-8 shrink-0 justify-center md:col-start-2 md:row-start-1 md:w-auto md:justify-center", children: !isLargeDot ? /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(Dot, { icon, emoji, color, active }) }) : /* @__PURE__ */ jsx(Dot, { icon, emoji, color, active }) }),
+            /* @__PURE__ */ jsxs("div", { className: cn(
+              "min-w-0 flex-1",
+              !isLast && "pb-8",
+              isLargeDot && "pt-1",
+              isEven ? "md:col-start-1 md:row-start-1 md:text-right" : "md:col-start-3"
+            ), children: [
+              date && /* @__PURE__ */ jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: date }),
+              children
+            ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-timeline-item": "",
+        className: cn(
+          "relative flex gap-x-4",
+          animated && "transition duration-500 ease-out",
+          animated && (visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"),
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "relative z-10 flex w-8 shrink-0 justify-center", children: !isLargeDot ? /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(Dot, { icon, emoji, color, active }) }) : /* @__PURE__ */ jsx(Dot, { icon, emoji, color, active }) }),
+          /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-1", !isLast && "pb-8", isLargeDot && "pt-1"), children: [
+            date && /* @__PURE__ */ jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: date }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+TimelineItem.displayName = "TimelineItem";
+var TimelineBlock = forwardRef(
+  ({ heading, children, icon, emoji, color = "zinc", active = false, className }, ref) => {
+    return /* @__PURE__ */ jsx(TimelineItem, { icon, emoji, color, active, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-timeline-block": "",
+        className: cn(
+          "rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900",
+          active && "ring-2 ring-blue-500/20 dark:ring-blue-400/20",
+          className
+        ),
+        children: [
+          heading && /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: heading }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-600 dark:text-zinc-400", children })
+        ]
+      }
+    ) });
+  }
+);
+TimelineBlock.displayName = "TimelineBlock";
+var TimelineRoot = forwardRef(
+  ({
+    children,
+    variant: variantProp,
+    orientation,
+    events,
+    heading,
+    description,
+    animated = true,
+    className
+  }, ref) => {
+    const scrollRef = useRef(null);
+    let variant = variantProp ?? "stacked";
+    if (!variantProp && orientation) {
+      variant = orientation === "horizontal" ? "horizontal" : "stacked";
+    }
+    const isHorizontal = variant === "horizontal";
+    const isAlternating = variant === "alternating";
+    const items = events ? events.map((e, i) => /* @__PURE__ */ jsxs(TimelineItem, { date: e.date, emoji: e.emoji, icon: e.icon, color: e.color, children: [
+      e.title && /* @__PURE__ */ jsx("h3", { className: "font-semibold text-zinc-900 dark:text-white", children: e.title }),
+      e.description && /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400", children: e.description })
+    ] }, i)) : Children.toArray(children);
+    const handleWheel = useCallback((e) => {
+      if (!scrollRef.current) return;
+      e.preventDefault();
+      scrollRef.current.scrollLeft += e.deltaY;
+    }, []);
+    const content = items.map((child, i) => /* @__PURE__ */ jsx(TimelineContext.Provider, { value: { variant, index: i, total: items.length, animated }, children: child }, i));
+    return /* @__PURE__ */ jsxs("div", { ref, "data-react-fancy-timeline": "", "data-variant": variant, className, children: [
+      (heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
+        heading && /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-zinc-900 dark:text-white", children: heading }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: description })
+      ] }),
+      isHorizontal ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollRef,
+          className: "overflow-x-auto pb-4 -mb-4",
+          style: { scrollbarWidth: "thin", scrollbarColor: "rgb(161 161 170) transparent" },
+          onWheel: handleWheel,
+          children: /* @__PURE__ */ jsx("div", { className: "flex min-w-max items-start", children: content })
+        }
+      ) : (
+        /* Vertical variants: continuous background line behind all events */
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          items.length > 1 && /* @__PURE__ */ jsx("div", { className: cn(
+            "absolute top-0 bottom-0 w-px bg-zinc-200 dark:bg-zinc-700",
+            isAlternating ? "left-4 md:left-1/2 md:-translate-x-px" : "left-4"
+          ) }),
+          content
+        ] })
+      )
+    ] });
+  }
+);
+TimelineRoot.displayName = "Timeline";
+var Timeline = Object.assign(TimelineRoot, {
+  Item: TimelineItem,
+  Block: TimelineBlock
+});
+
+export { Timeline, TimelineBlock, TimelineItem };
+//# sourceMappingURL=chunk-ZWOEKDNI.js.map
+//# sourceMappingURL=chunk-ZWOEKDNI.js.map

package/dist/chunk-ZWOEKDNI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Timeline/Timeline.context.ts","../src/components/Timeline/TimelineItem.tsx","../src/components/Timeline/TimelineBlock.tsx","../src/components/Timeline/Timeline.tsx"],"names":["forwardRef","jsx","jsxs","useRef"],"mappings":"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","file":"chunk-ZWOEKDNI.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { TimelineVariant } from \"./Timeline.types\";\n\ninterface TimelineContextValue {\n  variant: TimelineVariant;\n  index: number;\n  total: number;\n  animated: boolean;\n}\n\nexport const TimelineContext = createContext<TimelineContextValue>({\n  variant: \"stacked\",\n  index: 0,\n  total: 0,\n  animated: true,\n});\n\nexport function useTimeline() {\n  return useContext(TimelineContext);\n}\n","import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useTimeline } from \"./Timeline.context\";\nimport type { TimelineItemProps } from \"./Timeline.types\";\nimport type { Color } from \"../../utils/types\";\n\nconst dotColorClasses: Record<Color, string> = {\n  slate: \"bg-slate-400 dark:bg-slate-600\", gray: \"bg-gray-400 dark:bg-gray-600\",\n  zinc: \"bg-zinc-300 dark:bg-zinc-600\", neutral: \"bg-neutral-400 dark:bg-neutral-600\",\n  stone: \"bg-stone-400 dark:bg-stone-600\",\n  red: \"bg-red-500\", orange: \"bg-orange-500\", amber: \"bg-amber-500\",\n  yellow: \"bg-yellow-500\", lime: \"bg-lime-500\", green: \"bg-green-500\",\n  emerald: \"bg-emerald-500\", teal: \"bg-teal-500\", cyan: \"bg-cyan-500\",\n  sky: \"bg-sky-500\", blue: \"bg-blue-500\", indigo: \"bg-indigo-500\",\n  violet: \"bg-violet-500\", purple: \"bg-purple-500\", fuchsia: \"bg-fuchsia-500\",\n  pink: \"bg-pink-500\", rose: \"bg-rose-500\",\n};\n\nconst ringColorClasses: Record<Color, string> = {\n  slate: \"ring-slate-400/30\", gray: \"ring-gray-400/30\",\n  zinc: \"ring-zinc-400/30 dark:ring-zinc-500/30\", neutral: \"ring-neutral-400/30\",\n  stone: \"ring-stone-400/30\",\n  red: \"ring-red-500/30\", orange: \"ring-orange-500/30\", amber: \"ring-amber-500/30\",\n  yellow: \"ring-yellow-500/30\", lime: \"ring-lime-500/30\", green: \"ring-green-500/30\",\n  emerald: \"ring-emerald-500/30\", teal: \"ring-teal-500/30\", cyan: \"ring-cyan-500/30\",\n  sky: \"ring-sky-500/30\", blue: \"ring-blue-500/30\", indigo: \"ring-indigo-500/30\",\n  violet: \"ring-violet-500/30\", purple: \"ring-purple-500/30\", fuchsia: \"ring-fuchsia-500/30\",\n  pink: \"ring-pink-500/30\", rose: \"ring-rose-500/30\",\n};\n\nfunction Dot({ icon, emoji, color, active }: Pick<TimelineItemProps, \"icon\" | \"emoji\" | \"color\" | \"active\">) {\n  const c = color ?? \"zinc\";\n\n  if (emoji) {\n    return (\n      <span className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800\">\n        <span className=\"text-sm\">{emoji}</span>\n      </span>\n    );\n  }\n\n  if (icon) {\n    return (\n      <span\n        className={cn(\n          \"flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white\",\n          dotColorClasses[c],\n          active && \"ring-4\",\n          active && ringColorClasses[c],\n        )}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        \"h-3 w-3 shrink-0 rounded-full\",\n        dotColorClasses[c],\n        active && \"ring-4\",\n        active && ringColorClasses[c],\n      )}\n    />\n  );\n}\n\nfunction useIntersectionReveal(animated: boolean) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(!animated);\n\n  useEffect(() => {\n    if (!animated || !ref.current) return;\n    const el = ref.current;\n    const observer = new IntersectionObserver(\n      ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } },\n      { threshold: 0.2 },\n    );\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [animated]);\n\n  return { ref, visible };\n}\n\nexport const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(\n  ({ children, icon, emoji, date, color = \"zinc\", active = false, className }, _ref) => {\n    const { variant, index, total, animated } = useTimeline();\n    const { ref, visible } = useIntersectionReveal(animated);\n    const isLast = index === total - 1;\n    const isLargeDot = !!icon || !!emoji;\n    const isEven = index % 2 === 0;\n\n    // ── Horizontal ────────────────────────────────────────\n    if (variant === \"horizontal\") {\n      return (\n        <div\n          ref={ref}\n          data-react-fancy-timeline-item=\"\"\n          className={cn(\n            \"flex flex-col items-center\",\n            !isLast && \"min-w-40\",\n            animated && \"transition duration-500 ease-out\",\n            animated && (visible ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"),\n            className,\n          )}\n        >\n          {/* Dot + horizontal line (fixed height for alignment) */}\n          <div className=\"flex h-8 w-full items-center\">\n            {index > 0\n              ? <div className=\"h-px flex-1 bg-zinc-200 dark:bg-zinc-700\" />\n              : <div className=\"flex-1\" />}\n            <Dot icon={icon} emoji={emoji} color={color} active={active} />\n            {!isLast\n              ? <div className=\"h-px flex-1 bg-zinc-200 dark:bg-zinc-700\" />\n              : <div className=\"flex-1\" />}\n          </div>\n\n          {/* Content below */}\n          <div className=\"mt-3 max-w-40 px-2 text-center\">\n            {date && <time className=\"text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400\">{date}</time>}\n            {children}\n          </div>\n        </div>\n      );\n    }\n\n    // ── Alternating ───────────────────────────────────────\n    if (variant === \"alternating\") {\n      return (\n        <div\n          ref={ref}\n          data-react-fancy-timeline-item=\"\"\n          className={cn(\n            \"relative flex gap-x-4 md:grid md:grid-cols-[1fr_1.5rem_1fr] md:gap-x-6\",\n            animated && \"transition duration-500 ease-out\",\n            animated && (visible ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"),\n            className,\n          )}\n        >\n          {/* Dot (sits on top of the background line) */}\n          <div className=\"relative z-10 flex w-8 shrink-0 justify-center md:col-start-2 md:row-start-1 md:w-auto md:justify-center\">\n            {!isLargeDot ? <div className=\"mt-1.5\"><Dot icon={icon} emoji={emoji} color={color} active={active} /></div> : <Dot icon={icon} emoji={emoji} color={color} active={active} />}\n          </div>\n\n          {/* Content */}\n          <div className={cn(\n            \"min-w-0 flex-1\",\n            !isLast && \"pb-8\",\n            isLargeDot && \"pt-1\",\n            isEven ? \"md:col-start-1 md:row-start-1 md:text-right\" : \"md:col-start-3\",\n          )}>\n            {date && <time className=\"text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400\">{date}</time>}\n            {children}\n          </div>\n        </div>\n      );\n    }\n\n    // ── Stacked (default) ─────────────────────────────────\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-timeline-item=\"\"\n        className={cn(\n          \"relative flex gap-x-4\",\n          animated && \"transition duration-500 ease-out\",\n          animated && (visible ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"),\n          className,\n        )}\n      >\n        {/* Dot (sits on top of the background line) */}\n        <div className=\"relative z-10 flex w-8 shrink-0 justify-center\">\n          {!isLargeDot\n            ? <div className=\"mt-1.5\"><Dot icon={icon} emoji={emoji} color={color} active={active} /></div>\n            : <Dot icon={icon} emoji={emoji} color={color} active={active} />}\n        </div>\n\n        {/* Content */}\n        <div className={cn(\"min-w-0 flex-1\", !isLast && \"pb-8\", isLargeDot && \"pt-1\")}>\n          {date && <time className=\"text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400\">{date}</time>}\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nTimelineItem.displayName = \"TimelineItem\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { TimelineItem } from \"./TimelineItem\";\nimport type { TimelineBlockProps } from \"./Timeline.types\";\n\nexport const TimelineBlock = forwardRef<HTMLDivElement, TimelineBlockProps>(\n  ({ heading, children, icon, emoji, color = \"zinc\", active = false, className }, ref) => {\n    return (\n      <TimelineItem icon={icon} emoji={emoji} color={color} active={active}>\n        <div\n          ref={ref}\n          data-react-fancy-timeline-block=\"\"\n          className={cn(\n            \"rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900\",\n            active && \"ring-2 ring-blue-500/20 dark:ring-blue-400/20\",\n            className,\n          )}\n        >\n          {heading && (\n            <div className=\"mb-2 text-sm font-semibold text-zinc-900 dark:text-zinc-100\">\n              {heading}\n            </div>\n          )}\n          <div className=\"text-sm text-zinc-600 dark:text-zinc-400\">{children}</div>\n        </div>\n      </TimelineItem>\n    );\n  },\n);\n\nTimelineBlock.displayName = \"TimelineBlock\";\n","import { Children, forwardRef, useCallback, useRef, type WheelEvent } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { TimelineContext } from \"./Timeline.context\";\nimport { TimelineItem } from \"./TimelineItem\";\nimport { TimelineBlock } from \"./TimelineBlock\";\nimport type { TimelineProps, TimelineVariant } from \"./Timeline.types\";\n\nconst TimelineRoot = forwardRef<HTMLDivElement, TimelineProps>(\n  ({\n    children,\n    variant: variantProp,\n    orientation,\n    events,\n    heading,\n    description,\n    animated = true,\n    className,\n  }, ref) => {\n    const scrollRef = useRef<HTMLDivElement>(null);\n\n    // Backward compat: map deprecated orientation to variant\n    let variant: TimelineVariant = variantProp ?? \"stacked\";\n    if (!variantProp && orientation) {\n      variant = orientation === \"horizontal\" ? \"horizontal\" : \"stacked\";\n    }\n\n    const isHorizontal = variant === \"horizontal\";\n    const isAlternating = variant === \"alternating\";\n\n    // Build items from events prop (data-driven) or children (compound)\n    const items = events\n      ? events.map((e, i) => (\n          <TimelineItem key={i} date={e.date} emoji={e.emoji} icon={e.icon} color={e.color}>\n            {e.title && <h3 className=\"font-semibold text-zinc-900 dark:text-white\">{e.title}</h3>}\n            {e.description && <div className=\"mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\">{e.description}</div>}\n          </TimelineItem>\n        ))\n      : Children.toArray(children);\n\n    const handleWheel = useCallback((e: WheelEvent) => {\n      if (!scrollRef.current) return;\n      e.preventDefault();\n      scrollRef.current.scrollLeft += e.deltaY;\n    }, []);\n\n    const content = items.map((child, i) => (\n      <TimelineContext.Provider key={i} value={{ variant, index: i, total: items.length, animated }}>\n        {child}\n      </TimelineContext.Provider>\n    ));\n\n    return (\n      <div ref={ref} data-react-fancy-timeline=\"\" data-variant={variant} className={className}>\n        {(heading || description) && (\n          <div className=\"mb-8\">\n            {heading && <h2 className=\"text-xl font-semibold text-zinc-900 dark:text-white\">{heading}</h2>}\n            {description && <p className=\"mt-1 text-sm text-zinc-500 dark:text-zinc-400\">{description}</p>}\n          </div>\n        )}\n\n        {isHorizontal ? (\n          <div\n            ref={scrollRef}\n            className=\"overflow-x-auto pb-4 -mb-4\"\n            style={{ scrollbarWidth: \"thin\", scrollbarColor: \"rgb(161 161 170) transparent\" }}\n            onWheel={handleWheel}\n          >\n            <div className=\"flex min-w-max items-start\">\n              {content}\n            </div>\n          </div>\n        ) : (\n          /* Vertical variants: continuous background line behind all events */\n          <div className=\"relative\">\n            {items.length > 1 && (\n              <div className={cn(\n                \"absolute top-0 bottom-0 w-px bg-zinc-200 dark:bg-zinc-700\",\n                isAlternating\n                  ? \"left-4 md:left-1/2 md:-translate-x-px\"\n                  : \"left-4\",\n              )} />\n            )}\n            {content}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nTimelineRoot.displayName = \"Timeline\";\n\nexport const Timeline = Object.assign(TimelineRoot, {\n  Item: TimelineItem,\n  Block: TimelineBlock,\n});\n"]}

package/dist/code-view.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var chunkRNHIDZLE_cjs = require('./chunk-RNHIDZLE.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "CodeView", {
+  enumerable: true,
+  get: function () { return chunkRNHIDZLE_cjs.CodeView; }
+});
+//# sourceMappingURL=code-view.cjs.map
+//# sourceMappingURL=code-view.cjs.map

package/dist/code-view.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"code-view.cjs"}

package/dist/code-view.d.cts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+
+interface CodeViewProps {
+    /** Source text to display / edit. Controlled. */
+    value: string;
+    /**
+     * Called on edit. Omit (or set `readOnly`) for a read-only view. When
+     * provided, the view is an editable source surface (transparent textarea over
+     * the highlight overlay).
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Language id for syntax highlighting. Only `"html"` is highlighted (the one
+     * grammar shipped by `fancy-file-commons`); everything else — including
+     * `"markdown"` and `"plaintext"` — renders un-highlighted. For richer language
+     * highlighting use `@particle-academy/fancy-code`'s `CodeEditor`.
+     * @default "plaintext"
+     */
+    language?: "html" | "markdown" | "plaintext" | (string & {});
+    /** Read-only mode (no editing even if `onChange` is passed). @default false */
+    readOnly?: boolean;
+    /** Placeholder shown when empty. */
+    placeholder?: string;
+    /** Min height in px before the view grows with content. @default 120 */
+    minHeight?: number;
+    /** Max height in px before the view scrolls internally. */
+    maxHeight?: number;
+    /** Additional classes on the scroll container (e.g. `h-full`, `flex-auto`). */
+    className?: string;
+}
+
+/**
+ * A lightweight, syntax-highlighted source view built on the pure highlight
+ * primitives in `@particle-academy/fancy-file-commons` — a highlight overlay
+ * with a transparent, auto-growing textarea on top; the container scrolls both
+ * together. Fills its parent's height (`h-full`) and grows with content down to
+ * `minHeight`. Only HTML is highlighted; other languages render as plain text.
+ */
+declare function CodeView({ value, onChange, language, readOnly, placeholder, minHeight, maxHeight, className, }: CodeViewProps): react.JSX.Element;
+declare namespace CodeView {
+    var displayName: string;
+}
+
+export { CodeView, type CodeViewProps };

package/dist/code-view.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+
+interface CodeViewProps {
+    /** Source text to display / edit. Controlled. */
+    value: string;
+    /**
+     * Called on edit. Omit (or set `readOnly`) for a read-only view. When
+     * provided, the view is an editable source surface (transparent textarea over
+     * the highlight overlay).
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Language id for syntax highlighting. Only `"html"` is highlighted (the one
+     * grammar shipped by `fancy-file-commons`); everything else — including
+     * `"markdown"` and `"plaintext"` — renders un-highlighted. For richer language
+     * highlighting use `@particle-academy/fancy-code`'s `CodeEditor`.
+     * @default "plaintext"
+     */
+    language?: "html" | "markdown" | "plaintext" | (string & {});
+    /** Read-only mode (no editing even if `onChange` is passed). @default false */
+    readOnly?: boolean;
+    /** Placeholder shown when empty. */
+    placeholder?: string;
+    /** Min height in px before the view grows with content. @default 120 */
+    minHeight?: number;
+    /** Max height in px before the view scrolls internally. */
+    maxHeight?: number;
+    /** Additional classes on the scroll container (e.g. `h-full`, `flex-auto`). */
+    className?: string;
+}
+
+/**
+ * A lightweight, syntax-highlighted source view built on the pure highlight
+ * primitives in `@particle-academy/fancy-file-commons` — a highlight overlay
+ * with a transparent, auto-growing textarea on top; the container scrolls both
+ * together. Fills its parent's height (`h-full`) and grows with content down to
+ * `minHeight`. Only HTML is highlighted; other languages render as plain text.
+ */
+declare function CodeView({ value, onChange, language, readOnly, placeholder, minHeight, maxHeight, className, }: CodeViewProps): react.JSX.Element;
+declare namespace CodeView {
+    var displayName: string;
+}
+
+export { CodeView, type CodeViewProps };

package/dist/code-view.js

@@ -0,0 +1,4 @@
+export { CodeView } from './chunk-FVV76TRF.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=code-view.js.map
+//# sourceMappingURL=code-view.js.map

package/dist/code-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"code-view.js"}

package/dist/color-picker.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunkDOSSIU6S_cjs = require('./chunk-DOSSIU6S.cjs');
+require('./chunk-KJ22KE56.cjs');
+require('./chunk-L3V3BYVS.cjs');
+require('./chunk-OUOEQZHY.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "ColorPicker", {
+  enumerable: true,
+  get: function () { return chunkDOSSIU6S_cjs.ColorPicker; }
+});
+//# sourceMappingURL=color-picker.cjs.map
+//# sourceMappingURL=color-picker.cjs.map

package/dist/color-picker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"color-picker.cjs"}

package/dist/color-picker.d.cts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { F as FieldMode } from './inputs.types-CkWdvN-t.cjs';
+import './types-8Sv0rCjw.cjs';
+
+interface ColorPickerProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (color: string) => void;
+    presets?: string[];
+    size?: "sm" | "md" | "lg";
+    variant?: "outline" | "filled";
+    disabled?: boolean;
+    className?: string;
+    /** `"edit"` (default) renders the control; `"view"` renders the value as text. */
+    mode?: FieldMode;
+}
+
+declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { ColorPicker, type ColorPickerProps };