@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

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

@@ -1,29 +1,29 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { Check, Copy } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import {
-  oneDark,
-  oneLight
-} from "react-syntax-highlighter/dist/esm/styles/prism";
 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;
@@ -36,13 +36,32 @@ function CodeBlock({
   language = "typescript",
   showLanguage = false
 }) {
-  const [copied, setCopied] = useState(false);
+  const { copied, copy } = useCopyToClipboard();
+  const [highlighter, setHighlighter] = useState(
+    null
+  );
   const { systemTheme, theme } = useTheme();
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   const isDark = resolvedTheme !== "light";
-  const codeStyle = isDark ? oneDark : oneLight;
   const code = extractTextFromChildren(children);
   const scrollRef = useRef(null);
+  useEffect(() => {
+    let active = true;
+    void Promise.all([
+      import("react-syntax-highlighter"),
+      import("react-syntax-highlighter/dist/esm/styles/prism")
+    ]).then(([module_, styles]) => {
+      if (!active) return;
+      setHighlighter({
+        oneDark: styles.oneDark,
+        oneLight: styles.oneLight,
+        SyntaxHighlighter: module_.Prism
+      });
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
   useEffect(() => {
     const element = scrollRef.current;
     if (!element) return;
@@ -59,13 +78,11 @@ 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;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -79,7 +96,7 @@ function CodeBlock({
           className: "relative overflow-x-auto overflow-y-hidden touch-pan-y",
           ref: scrollRef,
           children: [
-            /* @__PURE__ */ jsx(
+            SyntaxHighlighter ? /* @__PURE__ */ jsx(
               SyntaxHighlighter,
               {
                 codeTagProps: {
@@ -90,7 +107,7 @@ function CodeBlock({
                   }
                 },
                 customStyle: {
-                  background: "hsl(var(--background))",
+                  background: "oklch(var(--background))",
                   fontSize: "0.875rem",
                   margin: 0,
                   minWidth: "fit-content",
@@ -101,17 +118,18 @@ function CodeBlock({
                 style: codeStyle,
                 children: code
               }
-            ),
+            ) : /* @__PURE__ */ jsx("pre", { className: "m-0 min-w-fit overflow-y-hidden p-4 font-mono text-sm", children: /* @__PURE__ */ jsx("code", { className: "block bg-transparent", children: code }) }),
             /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-2 flex items-center gap-2", children: [
               showLanguage ? /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) : null,
               /* @__PURE__ */ jsx(
                 Button,
                 {
-                  className: "h-8 w-8",
+                  "aria-label": copied ? "Copied" : "Copy code",
+                  className: "size-8",
                   onClick: handleCopy,
                   size: "icon",
                   variant: "ghost",
-                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
                 }
               )
             ] })

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";
+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: [
@@ -11,47 +11,49 @@ function CodeLine({ highlightLines, line, lineNumber }) {
     /* @__PURE__ */ jsx("span", { children: line })
   ] });
 }
+const EMPTY_HIGHLIGHT_LINES = [];
+function extractCode(node) {
+  return typeof node === "string" ? node : "";
+}
 function CodePlayground({
+  as: Heading = "h4",
   children,
   description,
   filename,
-  highlightLines = [],
+  highlightLines = EMPTY_HIGHLIGHT_LINES,
   language = "typescript",
   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: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded bg-primary/10", children: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded bg-primary/10", children: /* @__PURE__ */ jsx(Code, { className: "size-4 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm", children: title }),
+          /* @__PURE__ */ jsx(Heading, { className: "font-semibold text-sm", children: title }),
           description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }) : null
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         filename ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(FileCode, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx(FileCode, { className: "size-3" }),
           /* @__PURE__ */ jsx("span", { className: "font-mono", children: filename })
         ] }) : null,
         /* @__PURE__ */ jsx(
           Button,
           {
-            className: "h-8 w-8",
+            "aria-label": copied ? "Copied" : "Copy code",
+            className: "size-8",
             onClick: handleCopy,
             size: "icon",
             variant: "ghost",
-            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
           }
         )
       ] })
@@ -63,7 +65,7 @@ function CodePlayground({
         line,
         lineNumber: index + 1
       },
-      index
+      `${line}-${index + 1}`
     )) }) : /* @__PURE__ */ jsx("code", { children: code }) }) }),
     /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t bg-muted/30", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) })
   ] });
@@ -74,7 +76,7 @@ function FileTree({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-sm flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(FileCode, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(FileCode, { className: "size-4" }),
       title
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm [&>ul]:m-0 [&>ul]:list-none [&_ul]:ml-4 [&_ul]:list-none [&_li]:text-muted-foreground", children })

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

@@ -0,0 +1,134 @@
+"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 = React.forwardRef(
+  ({
+    className,
+    defaultValue = "#3b82f6",
+    onValueChange,
+    swatches = presetSwatches,
+    value
+  }, ref) => {
+    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

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import {
   Command,
   CommandEmpty,
@@ -11,15 +11,10 @@ import {
   CommandInput,
   CommandItem,
   CommandList
-} from "../command";
-import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+} from "../command/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover";
 function useComboboxValue(value, onValueChange) {
   const [internalValue, setInternalValue] = React.useState(value ?? "");
-  React.useEffect(() => {
-    if (value !== void 0) {
-      setInternalValue(value);
-    }
-  }, [value]);
   const resolvedValue = value ?? internalValue;
   const setResolvedValue = (nextValue) => {
     if (value === void 0) {
@@ -48,7 +43,7 @@ function ComboboxOptionItem({
           Check,
           {
             className: cn(
-              "mr-2 h-4 w-4",
+              "mr-2 size-4",
               selectedValue === option.value ? "opacity-100" : "opacity-0"
             )
           }
@@ -58,6 +53,38 @@ function ComboboxOptionItem({
     }
   );
 }
+function ComboboxListPanel({
+  className,
+  commandClassName,
+  emptyText,
+  listboxId,
+  onSelect,
+  options,
+  resolvedValue,
+  searchPlaceholder
+}) {
+  return /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      className: cn("w-[var(--radix-popover-trigger-width)] p-0", className),
+      children: /* @__PURE__ */ jsxs(Command, { className: commandClassName, children: [
+        /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+        /* @__PURE__ */ jsxs(CommandList, { id: listboxId, children: [
+          /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+          /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsx(
+            ComboboxOptionItem,
+            {
+              onSelect,
+              option,
+              selectedValue: resolvedValue
+            },
+            option.value
+          )) })
+        ] })
+      ] })
+    }
+  );
+}
 const Combobox = React.forwardRef(
   ({
     className,
@@ -71,6 +98,7 @@ const Combobox = React.forwardRef(
     value
   }, reference) => {
     const [open, setOpen] = React.useState(false);
+    const listboxId = React.useId();
     const { resolvedValue, setResolvedValue } = useComboboxValue(
       value,
       onValueChange
@@ -86,39 +114,30 @@ const Combobox = React.forwardRef(
       /* @__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 h-4 w-4 shrink-0 opacity-50" })
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })
           ]
         }
       ) }),
       /* @__PURE__ */ jsx(
-        PopoverContent,
+        ComboboxListPanel,
         {
-          className: cn(
-            "w-[var(--radix-popover-trigger-width)] p-0",
-            className
-          ),
-          children: /* @__PURE__ */ jsxs(Command, { className: commandClassName, children: [
-            /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
-            /* @__PURE__ */ jsxs(CommandList, { children: [
-              /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
-              /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsx(
-                ComboboxOptionItem,
-                {
-                  onSelect: handleSelect,
-                  option,
-                  selectedValue: resolvedValue
-                },
-                option.value
-              )) })
-            ] })
-          ] })
+          className,
+          commandClassName,
+          emptyText,
+          listboxId,
+          onSelect: handleSelect,
+          options,
+          resolvedValue,
+          searchPlaceholder
         }
       )
     ] });

package/dist/components/command/command.js

@@ -26,7 +26,7 @@ const CommandDialog = ({ children, ...props }) => {
 const CommandInput = React.forwardRef(({ className, ...props }, reference) => (
   // eslint-disable-next-line react/no-unknown-property
   /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-    /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+    /* @__PURE__ */ jsx(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }),
     /* @__PURE__ */ jsx(
       CommandPrimitive.Input,
       {

package/dist/components/comment-pin/comment-pin.js

@@ -0,0 +1,104 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Comment",
+  unreadSuffix: "unread"
+};
+const STATE_FILL = {
+  open: "bg-foreground text-background",
+  resolved: "bg-muted text-muted-foreground"
+};
+const PinBody = (props) => {
+  const showBadge = typeof props.unread === "number" && props.unread > 0;
+  const useAccent = props.accent && props.state === "open";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "flex size-7 items-center justify-center rounded-full border border-background text-[11px] font-semibold shadow-sm",
+          STATE_FILL[props.state]
+        ),
+        "data-comment-pin-body": true,
+        style: useAccent ? { backgroundColor: props.accent, color: "white" } : void 0,
+        children: props.authorInitial ?? "\u2022"
+      }
+    ),
+    showBadge ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute -right-1 -top-1 inline-flex min-h-[14px] min-w-[14px] items-center justify-center rounded-full bg-red-500 px-1 text-[9px] font-medium text-white",
+        "data-comment-pin-unread": true,
+        children: props.unread
+      }
+    ) : null
+  ] });
+};
+const CommentPin = forwardRef(
+  (props, ref) => {
+    const {
+      authorInitial,
+      className,
+      color,
+      labels,
+      onActivate,
+      state = "open",
+      unread,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const showBadge = typeof unread === "number" && unread > 0;
+    const ariaLabel = showBadge ? `${resolvedLabels.region}, ${unread} ${resolvedLabels.unreadSuffix}` : resolvedLabels.region;
+    const handleActivateComment = () => {
+      onActivate?.();
+    };
+    const body = /* @__PURE__ */ jsx(
+      PinBody,
+      {
+        accent: color,
+        authorInitial,
+        state,
+        unread
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "absolute z-30 inline-flex -translate-x-1/2 -translate-y-1/2",
+          className
+        ),
+        "data-comment-pin": true,
+        "data-comment-pin-state": state,
+        ref,
+        role: "img",
+        style: { left: x, top: y },
+        ...rest,
+        children: onActivate ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": ariaLabel,
+            className: "relative inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "data-comment-pin-trigger": true,
+            onClick: handleActivateComment,
+            type: "button",
+            children: body
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "relative inline-flex", children: body })
+      }
+    );
+  }
+);
+CommentPin.displayName = "CommentPin";
+export {
+  CommentPin
+};

package/dist/components/comment-pin/index.js

@@ -0,0 +1,6 @@
+import {
+  CommentPin
+} from "./comment-pin";
+export {
+  CommentPin
+};