@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/chronological-timeline/chronological-timeline.js

@@ -2,9 +2,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
-  forwardRef,
+  use,
   useCallback,
-  useContext,
   useEffect,
   useId,
   useMemo,
@@ -14,7 +13,7 @@ import {
 import { cn } from "../../lib/utils";
 const ChronoContext = createContext(null);
 function useChronoContext() {
-  const ctx = useContext(ChronoContext);
+  const ctx = use(ChronoContext);
   if (!ctx) {
     throw new Error("ChronoEvent used outside ChronologicalTimeline.");
   }
@@ -142,74 +141,75 @@ function EventCard({
     }
   );
 }
-const ChronoEvent = forwardRef(
-  (props, forwardedRef) => {
-    const {
-      children,
-      className,
-      date,
-      featured = false,
-      id,
-      media,
-      subtitle,
-      title,
-      ...rest
-    } = props;
-    const generatedId = useId();
-    const eventId = id ?? generatedId;
-    const ref = useRef(null);
-    const { registerEvent, setActiveId } = useChronoContext();
-    const refCallback = useCallback(
-      (node) => {
-        ref.current = node;
-        registerEvent(eventId, node);
-        if (typeof forwardedRef === "function") forwardedRef(node);
-        else if (forwardedRef) forwardedRef.current = node;
-      },
-      [eventId, forwardedRef, registerEvent]
-    );
-    const handleFocusEvent = useCallback(() => {
-      setActiveId(eventId);
-    }, [eventId, setActiveId]);
-    return (
-      /* Passive focus tracking: the container observes focus bubbling from
+const ChronoEvent = ({
+  ref: forwardedRef,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    date,
+    featured = false,
+    id,
+    media,
+    subtitle,
+    title,
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const eventId = id ?? generatedId;
+  const ref = useRef(null);
+  const { registerEvent, setActiveId } = useChronoContext();
+  const refCallback = useCallback(
+    (node) => {
+      ref.current = node;
+      registerEvent(eventId, node);
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [eventId, forwardedRef, registerEvent]
+  );
+  const handleFocusEvent = useCallback(() => {
+    setActiveId(eventId);
+  }, [eventId, setActiveId]);
+  return (
+    /* Passive focus tracking: the container observes focus bubbling from
          its interactive children to drive the scroll-spy active state. */
-      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      /* @__PURE__ */ jsxs(
-        "article",
-        {
-          "aria-labelledby": `${eventId}-title`,
-          className: cn(
-            "group relative grid gap-4 py-6 md:grid-cols-[1fr_auto_1fr] md:gap-8",
-            className
-          ),
-          "data-event-id": eventId,
-          "data-featured": featured ? "true" : void 0,
-          id: eventId,
-          onFocus: handleFocusEvent,
-          ref: refCallback,
-          ...rest,
-          children: [
-            /* @__PURE__ */ jsx(DateColumn, { date }),
-            /* @__PURE__ */ jsx(RailColumn, { featured }),
-            /* @__PURE__ */ jsx(
-              EventCard,
-              {
-                date,
-                eventId,
-                featured,
-                media,
-                subtitle,
-                title,
-                children
-              }
-            )
-          ]
-        }
-      )
-    );
-  }
-);
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "aria-labelledby": `${eventId}-title`,
+        className: cn(
+          "group relative grid gap-4 py-6 md:grid-cols-[1fr_auto_1fr] md:gap-8",
+          className
+        ),
+        "data-event-id": eventId,
+        "data-featured": featured ? "true" : void 0,
+        id: eventId,
+        onFocus: handleFocusEvent,
+        ref: refCallback,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(DateColumn, { date }),
+          /* @__PURE__ */ jsx(RailColumn, { featured }),
+          /* @__PURE__ */ jsx(
+            EventCard,
+            {
+              date,
+              eventId,
+              featured,
+              media,
+              subtitle,
+              title,
+              children
+            }
+          )
+        ]
+      }
+    )
+  );
+};
 ChronoEvent.displayName = "ChronoEvent";
 function ProgressStrip({
   activeId,
@@ -288,7 +288,10 @@ function EventList({ activeId, children }) {
     getChildKey(child, index)
   )) });
 }
-const ChronologicalTimeline = forwardRef((props, ref) => {
+const ChronologicalTimeline = ({
+  ref,
+  ...props
+}) => {
   const {
     children,
     className,
@@ -319,7 +322,7 @@ const ChronologicalTimeline = forwardRef((props, ref) => {
       ]
     }
   ) });
-});
+};
 ChronologicalTimeline.displayName = "ChronologicalTimeline";
 function isReactElementWithEventId(child, activeId) {
   if (!activeId) return false;

package/dist/components/civilization-card/civilization-card.js

@@ -1,7 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { Globe } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
@@ -202,59 +199,65 @@ function CivilizationBody({
     ) : null
   ] });
 }
-const CivilizationCard = forwardRef(
-  (props, ref) => {
-    const {
-      achievements,
-      actionHref,
-      capital,
-      className,
-      color = "neutral",
-      era,
-      image,
-      labels,
-      leaders,
-      name,
-      peakPopulation,
-      region,
-      ...rest
-    } = props;
-    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
-    const palette = CIVILIZATION_COLOR_VARIANTS[color];
-    const altName = typeof name === "string" ? name : void 0;
-    return /* @__PURE__ */ jsxs(
-      "article",
-      {
-        className: cn(
-          "flex flex-col overflow-hidden rounded-2xl border bg-background text-foreground shadow-sm ring-1",
-          palette.ring,
-          className
-        ),
-        ref,
-        ...rest,
-        children: [
-          /* @__PURE__ */ jsx(CivilizationHero, { color, image, imageAlt: altName }),
-          /* @__PURE__ */ jsx(
-            CivilizationBody,
-            {
-              achievements,
-              actionHref,
-              capital,
-              era,
-              labels: resolvedLabels,
-              leaders,
-              name,
-              peakPopulation,
-              region
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+const CivilizationCard = ({
+  ref,
+  ...props
+}) => {
+  const {
+    achievements,
+    actionHref,
+    capital,
+    className,
+    color = "neutral",
+    era,
+    image,
+    labels,
+    leaders,
+    name,
+    peakPopulation,
+    region,
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const palette = CIVILIZATION_COLOR_VARIANTS[color];
+  const altName = typeof name === "string" ? name : void 0;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "flex flex-col overflow-hidden rounded-2xl border bg-background text-foreground shadow-sm ring-1",
+        palette.ring,
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(CivilizationHero, { color, image, imageAlt: altName }),
+        /* @__PURE__ */ jsx(
+          CivilizationBody,
+          {
+            achievements,
+            actionHref,
+            capital,
+            era,
+            labels: resolvedLabels,
+            leaders,
+            name,
+            peakPopulation,
+            region
+          }
+        )
+      ]
+    }
+  );
+};
 CivilizationCard.displayName = "CivilizationCard";
-const CivilizationComparison = forwardRef(({ children, className, ...rest }, ref) => {
+const CivilizationComparison = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -267,7 +270,7 @@ const CivilizationComparison = forwardRef(({ children, className, ...rest }, ref
       children
     }
   );
-});
+};
 CivilizationComparison.displayName = "CivilizationComparison";
 export {
   CivilizationCard,

package/dist/components/code-block/code-block.js

@@ -9,20 +9,21 @@ import { Check, Copy } from "lucide-react";
 import { useTheme } from "next-themes";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
-function extractTextFromChildren(children) {
-  if (typeof children === "string") {
-    return children;
+import { useCopyToClipboard } from "../copy-button/copy-button";
+function extractTextFromChildren(node) {
+  if (typeof node === "string") {
+    return node;
   }
-  if (typeof children === "number") {
-    return String(children);
+  if (typeof node === "number") {
+    return String(node);
   }
-  if (Array.isArray(children)) {
-    return children.map(extractTextFromChildren).join("");
+  if (Array.isArray(node)) {
+    return node.map(extractTextFromChildren).join("");
   }
-  if (children && typeof children === "object" && "props" in children && children.props && typeof children.props === "object" && "children" in children.props) {
-    return extractTextFromChildren(children.props.children);
+  if (node && typeof node === "object" && "props" in node && node.props && typeof node.props === "object" && "children" in node.props) {
+    return extractTextFromChildren(node.props.children);
   }
-  return String(children ?? "");
+  return String(node ?? "");
 }
 function findScrollableParent(element) {
   if (!element) return void 0;
@@ -35,7 +36,7 @@ function CodeBlock({
   language = "typescript",
   showLanguage = false
 }) {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useCopyToClipboard();
   const [highlighter, setHighlighter] = useState(
     null
   );
@@ -77,12 +78,8 @@ function CodeBlock({
       element.removeEventListener("wheel", onWheel);
     };
   }, []);
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2e3);
+  const handleCopy = () => {
+    void copy(code);
   };
   const SyntaxHighlighter = highlighter?.SyntaxHighlighter;
   const codeStyle = isDark ? highlighter?.oneDark : highlighter?.oneLight;

package/dist/components/code-playground/code-playground.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Check, Code, Copy, FileCode } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
+import { useCopyToClipboard } from "../copy-button/copy-button";
 function CodeLine({ highlightLines, line, lineNumber }) {
   const isHighlighted = highlightLines.includes(lineNumber);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex", isHighlighted && "bg-primary/10 -mx-4 px-4"), children: [
@@ -12,6 +12,9 @@ function CodeLine({ highlightLines, line, lineNumber }) {
   ] });
 }
 const EMPTY_HIGHLIGHT_LINES = [];
+function extractCode(node) {
+  return typeof node === "string" ? node : "";
+}
 function CodePlayground({
   as: Heading = "h4",
   children,
@@ -22,15 +25,11 @@ function CodePlayground({
   showLineNumbers = false,
   title
 }) {
-  const [copied, setCopied] = useState(false);
-  const code = typeof children === "string" ? children : "";
+  const { copied, copy } = useCopyToClipboard();
+  const code = extractCode(children);
   const lines = code.split("\n");
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => {
-      setCopied(false);
-    }, 2e3);
+  const handleCopy = () => {
+    void copy(code);
   };
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-muted/30", children: [

package/dist/components/color-picker/color-picker.js

@@ -0,0 +1,133 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+const presetSwatches = [
+  "#ef4444",
+  "#f97316",
+  "#f59e0b",
+  "#84cc16",
+  "#22c55e",
+  "#14b8a6",
+  "#3b82f6",
+  "#6366f1",
+  "#a855f7",
+  "#ec4899",
+  "#64748b",
+  "#0f172a"
+];
+function hexPart(value) {
+  return value.toString(16).padStart(2, "0");
+}
+function toHex(red, green, blue) {
+  return `#${hexPart(red)}${hexPart(green)}${hexPart(blue)}`;
+}
+function hueChannel(hue, offset) {
+  const k = (offset + hue / 30) % 12;
+  const amount = 0.45;
+  const value = 0.5 - amount * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+  return Math.round(value * 255);
+}
+function hueToHex(hue) {
+  return toHex(hueChannel(hue, 0), hueChannel(hue, 8), hueChannel(hue, 4));
+}
+function SwatchGrid({ onSelect, selected, swatches }) {
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-6 gap-2", role: "group", children: swatches.map((swatch) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": swatch,
+      "aria-pressed": swatch.toLowerCase() === selected.toLowerCase(),
+      className: cn(
+        "size-7 rounded-md border outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        swatch.toLowerCase() === selected.toLowerCase() && "ring-2 ring-ring"
+      ),
+      onClick: () => {
+        onSelect(swatch);
+      },
+      style: { backgroundColor: swatch },
+      type: "button"
+    },
+    swatch
+  )) });
+}
+const ColorPicker = ({
+  className,
+  defaultValue = "#3b82f6",
+  onValueChange,
+  ref,
+  swatches = presetSwatches,
+  value
+}) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const currentValue = value ?? internalValue;
+  const update = (next) => {
+    if (value === void 0) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: cn("w-full justify-start gap-2 font-normal", className),
+        ref,
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "size-4 rounded-sm border",
+              style: { backgroundColor: currentValue }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "uppercase tabular-nums", children: currentValue })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-56 space-y-3", children: [
+      /* @__PURE__ */ jsx(
+        SwatchGrid,
+        {
+          onSelect: update,
+          selected: currentValue,
+          swatches
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "aria-label": "Hue",
+          className: "h-3 w-full cursor-pointer appearance-none rounded-full",
+          max: 360,
+          min: 0,
+          onChange: (event) => {
+            update(hueToHex(Number(event.target.value)));
+          },
+          style: {
+            background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)"
+          },
+          type: "range"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": "Hex value",
+          onChange: (event) => {
+            update(event.target.value);
+          },
+          value: currentValue
+        }
+      )
+    ] })
+  ] });
+};
+ColorPicker.displayName = "ColorPicker";
+export {
+  ColorPicker
+};

package/dist/components/color-picker/index.js

@@ -0,0 +1,4 @@
+import { ColorPicker } from "./color-picker";
+export {
+  ColorPicker
+};

package/dist/components/combobox/combobox.js

@@ -85,64 +85,63 @@ function ComboboxListPanel({
     }
   );
 }
-const Combobox = React.forwardRef(
-  ({
-    className,
-    commandClassName,
-    emptyText = "No option found.",
-    onValueChange,
-    options,
-    placeholder = "Select an option",
-    searchPlaceholder = "Search options...",
-    triggerClassName,
-    value
-  }, reference) => {
-    const [open, setOpen] = React.useState(false);
-    const listboxId = React.useId();
-    const { resolvedValue, setResolvedValue } = useComboboxValue(
-      value,
-      onValueChange
-    );
-    const selectedOption = options.find(
-      (option) => option.value === resolvedValue
-    );
-    const handleSelect = (nextValue) => {
-      setResolvedValue(nextValue === resolvedValue ? "" : nextValue);
-      setOpen(false);
-    };
-    return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-        Button,
-        {
-          "aria-controls": listboxId,
-          "aria-expanded": open,
-          "aria-haspopup": "listbox",
-          className: cn("w-full justify-between", triggerClassName),
-          ref: reference,
-          role: "combobox",
-          variant: "outline",
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
-            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        ComboboxListPanel,
-        {
-          className,
-          commandClassName,
-          emptyText,
-          listboxId,
-          onSelect: handleSelect,
-          options,
-          resolvedValue,
-          searchPlaceholder
-        }
-      )
-    ] });
-  }
-);
+const Combobox = ({
+  className,
+  commandClassName,
+  emptyText = "No option found.",
+  onValueChange,
+  options,
+  placeholder = "Select an option",
+  ref: reference,
+  searchPlaceholder = "Search options...",
+  triggerClassName,
+  value
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const listboxId = React.useId();
+  const { resolvedValue, setResolvedValue } = useComboboxValue(
+    value,
+    onValueChange
+  );
+  const selectedOption = options.find(
+    (option) => option.value === resolvedValue
+  );
+  const handleSelect = (nextValue) => {
+    setResolvedValue(nextValue === resolvedValue ? "" : nextValue);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { onOpenChange: setOpen, open, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-controls": listboxId,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        className: cn("w-full justify-between", triggerClassName),
+        ref: reference,
+        role: "combobox",
+        variant: "outline",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      ComboboxListPanel,
+      {
+        className,
+        commandClassName,
+        emptyText,
+        listboxId,
+        onSelect: handleSelect,
+        options,
+        resolvedValue,
+        searchPlaceholder
+      }
+    )
+  ] });
+};
 Combobox.displayName = "Combobox";
 export {
   Combobox