@vllnt/ui 0.3.0-canary.f3cafe8 → 0.3.0

package/dist/components/toolbar/toolbar.js

@@ -0,0 +1,87 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+const Toolbar = ({
+  className,
+  onKeyDown,
+  orientation = "horizontal",
+  ref,
+  ...props
+}) => {
+  function handleKeyDown(event) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    const previousKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    const isNext = event.key === nextKey;
+    const isPrevious = event.key === previousKey;
+    const isHome = event.key === "Home";
+    const isEnd = event.key === "End";
+    if (!isNext && !isPrevious && !isHome && !isEnd) return;
+    const items = [
+      ...event.currentTarget.querySelectorAll(FOCUSABLE_SELECTOR)
+    ];
+    if (items.length === 0) return;
+    event.preventDefault();
+    const active = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const currentIndex = active ? items.indexOf(active) : -1;
+    let nextIndex = 0;
+    if (isHome) {
+      nextIndex = 0;
+    } else if (isEnd) {
+      nextIndex = items.length - 1;
+    } else if (isNext) {
+      nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length;
+    } else {
+      nextIndex = currentIndex < 0 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+    }
+    items[nextIndex]?.focus();
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-orientation": orientation,
+      className: cn(
+        "flex items-center gap-1 rounded-md border border-border bg-background p-1",
+        orientation === "vertical" ? "flex-col" : "flex-row",
+        className
+      ),
+      onKeyDown: handleKeyDown,
+      ref,
+      role: "toolbar",
+      ...props
+    }
+  );
+};
+Toolbar.displayName = "Toolbar";
+const ToolbarSeparator = ({
+  className,
+  orientation = "vertical",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-orientation": orientation,
+    className: cn(
+      "shrink-0 bg-border",
+      orientation === "vertical" ? "mx-1 h-6 w-px" : "my-1 h-px w-full",
+      className
+    ),
+    ref,
+    role: "separator",
+    ...props
+  }
+);
+ToolbarSeparator.displayName = "ToolbarSeparator";
+export {
+  Toolbar,
+  ToolbarSeparator
+};

package/dist/components/tooltip/tooltip.js

@@ -1,12 +1,16 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "../../lib/utils";
 const TooltipProvider = TooltipPrimitive.Provider;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+const TooltipContent = ({
+  className,
+  ref,
+  sideOffset = 4,
+  ...props
+}) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     className: cn(
@@ -17,7 +21,7 @@ const TooltipContent = forwardRef(({ className, sideOffset = 4, ...props }, ref)
     sideOffset,
     ...props
   }
-) }));
+) });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export {
   Tooltip,

package/dist/components/top-bar/top-bar.js

@@ -1,29 +1,35 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { cn } from "../../lib/utils";
-const TopBar = forwardRef(
-  ({ children, className, leading, subtitle, title, trailing, ...props }, ref) => /* @__PURE__ */ jsxs(
-    "header",
-    {
-      className: cn(
-        "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
-        className
-      ),
-      ref,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          leading ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
-          title || subtitle ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            title ? /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground", children: title }) : null,
-            subtitle ? /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: subtitle }) : null
-          ] }) : null
-        ] }),
-        children ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children }) : null,
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
-      ]
-    }
-  )
+const TopBar = ({
+  children,
+  className,
+  leading,
+  ref,
+  subtitle,
+  title,
+  trailing,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "header",
+  {
+    className: cn(
+      "flex min-h-14 items-center justify-between gap-3 border-b border-border bg-background px-4 font-mono",
+      className
+    ),
+    ref,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+        leading ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: leading }) : null,
+        title || subtitle ? /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          title ? /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium uppercase tracking-[0.18em] text-foreground", children: title }) : null,
+          subtitle ? /* @__PURE__ */ jsx("div", { className: "truncate text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: subtitle }) : null
+        ] }) : null
+      ] }),
+      children ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children }) : null,
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center justify-end gap-2", children: trailing })
+    ]
+  }
 );
 TopBar.displayName = "TopBar";
 export {

package/dist/components/transaction-list/transaction-list.js

@@ -1,7 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
 const CENTS_PER_UNIT = 100;
@@ -82,49 +79,55 @@ function formatTransactionAmount(amountCents, options = {}) {
 function formatTransactionDate(timestamp, locale = DEFAULT_LOCALE) {
   return getTransactionDateFormatter(locale).format(new Date(timestamp));
 }
-const TransactionListBase = forwardRef(
-  (props, ref) => {
-    const {
-      children,
-      className,
-      currency,
-      emptyMessage,
-      labels,
-      locale,
-      transactions,
-      ...rest
-    } = props;
-    const isEmpty = transactions.length === 0;
-    const hasPinned = Boolean(children);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "flex w-full flex-col gap-2 rounded-2xl border bg-background p-3",
-          className
-        ),
-        ref,
-        ...rest,
-        children: [
-          children,
-          isEmpty && !hasPinned && emptyMessage ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : null,
-          isEmpty ? null : /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: transactions.map((transaction) => /* @__PURE__ */ jsx(
-            TransactionListItem,
-            {
-              currency,
-              labels,
-              locale,
-              transaction
-            },
-            transaction.id
-          )) })
-        ]
-      }
-    );
-  }
-);
+const TransactionListBase = ({
+  ref,
+  ...props
+}) => {
+  const {
+    children,
+    className,
+    currency,
+    emptyMessage,
+    labels,
+    locale,
+    transactions,
+    ...rest
+  } = props;
+  const isEmpty = transactions.length === 0;
+  const hasPinned = Boolean(children);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col gap-2 rounded-2xl border bg-background p-3",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        children,
+        isEmpty && !hasPinned && emptyMessage ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : null,
+        isEmpty ? null : /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1.5", children: transactions.map((transaction) => /* @__PURE__ */ jsx(
+          TransactionListItem,
+          {
+            currency,
+            labels,
+            locale,
+            transaction
+          },
+          transaction.id
+        )) })
+      ]
+    }
+  );
+};
 TransactionListBase.displayName = "TransactionList";
-const TransactionListPinned = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5", className), ref, ...rest, children }));
+const TransactionListPinned = ({
+  children,
+  className,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5", className), ref, ...rest, children });
 TransactionListPinned.displayName = "TransactionList.Pinned";
 function TransactionListItem({
   currency,
@@ -186,7 +189,10 @@ function SubscriptionMeta({
     renewsAt === void 0 && meta ? meta : null
   ] });
 }
-const TransactionListSubscriptionRow = forwardRef((props, ref) => {
+const TransactionListSubscriptionRow = ({
+  ref,
+  ...props
+}) => {
   const {
     amountCents,
     className,
@@ -239,7 +245,7 @@ const TransactionListSubscriptionRow = forwardRef((props, ref) => {
       ]
     }
   );
-});
+};
 TransactionListSubscriptionRow.displayName = "TransactionList.SubscriptionRow";
 const TransactionList = TransactionListBase;
 TransactionList.Pinned = TransactionListPinned;

package/dist/components/tree-view/tree-view.js

@@ -1,7 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
-  forwardRef,
   useCallback,
   useMemo,
   useState
@@ -217,81 +216,78 @@ function TreeRows({
     entry.node.id
   )) });
 }
-const TreeView = forwardRef(
-  (props, ref) => {
-    const {
-      className,
-      defaultExpanded,
-      defaultSelected,
-      expanded,
-      labels,
-      nodes,
-      onExpandedChange,
-      onSelect,
-      selected,
-      selectionMode = "single",
-      ...rest
-    } = props;
-    const resolvedLabels = useMemo(
-      () => ({ ...DEFAULT_LABELS, ...labels }),
-      [labels]
-    );
-    const { applyExpand, applySelect, expandedSet, selectedSet } = useTreeState(
-      {
-        defaultExpanded,
-        defaultSelected,
-        expanded,
-        onExpandedChange,
-        onSelect,
-        selected,
-        selectionMode
-      }
-    );
-    const flat = useMemo(
-      () => flattenVisible({ expanded: expandedSet, nodes }),
-      [expandedSet, nodes]
-    );
-    const [activeId, setActiveId] = useState(
-      () => flat[0]?.node.id
-    );
-    const handleKeyDown = useKeyboardHandler({
-      activeId,
-      applyExpand,
-      applySelect,
-      expandedSet,
-      flat,
-      setActiveId
-    });
-    return /* @__PURE__ */ jsx(
-      "ul",
-      {
-        "aria-label": resolvedLabels.region,
-        "aria-multiselectable": selectionMode === "multiple" || void 0,
-        className: cn(
-          "flex flex-col gap-0.5 rounded-2xl border bg-background p-2 text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          className
-        ),
-        onKeyDown: handleKeyDown,
-        ref,
-        role: "tree",
-        tabIndex: 0,
-        ...rest,
-        children: /* @__PURE__ */ jsx(
-          TreeRows,
-          {
-            activeId,
-            applyExpand,
-            applySelect,
-            expandedSet,
-            flat,
-            selectedSet,
-            setActiveId
-          }
-        )
-      }
-    );
-  }
-);
+const TreeView = (props) => {
+  const {
+    className,
+    defaultExpanded,
+    defaultSelected,
+    expanded,
+    labels,
+    nodes,
+    onExpandedChange,
+    onSelect,
+    ref,
+    selected,
+    selectionMode = "single",
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const { applyExpand, applySelect, expandedSet, selectedSet } = useTreeState({
+    defaultExpanded,
+    defaultSelected,
+    expanded,
+    onExpandedChange,
+    onSelect,
+    selected,
+    selectionMode
+  });
+  const flat = useMemo(
+    () => flattenVisible({ expanded: expandedSet, nodes }),
+    [expandedSet, nodes]
+  );
+  const [activeId, setActiveId] = useState(
+    () => flat[0]?.node.id
+  );
+  const handleKeyDown = useKeyboardHandler({
+    activeId,
+    applyExpand,
+    applySelect,
+    expandedSet,
+    flat,
+    setActiveId
+  });
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "aria-label": resolvedLabels.region,
+      "aria-multiselectable": selectionMode === "multiple" || void 0,
+      className: cn(
+        "flex flex-col gap-0.5 rounded-2xl border bg-background p-2 text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      onKeyDown: handleKeyDown,
+      ref,
+      role: "tree",
+      tabIndex: 0,
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        TreeRows,
+        {
+          activeId,
+          applyExpand,
+          applySelect,
+          expandedSet,
+          flat,
+          selectedSet,
+          setActiveId
+        }
+      )
+    }
+  );
+};
 TreeView.displayName = "TreeView";
 export {
   TreeView

package/dist/components/typewriter/index.js

@@ -0,0 +1,4 @@
+import { Typewriter } from "./typewriter";
+export {
+  Typewriter
+};

package/dist/components/typewriter/typewriter.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+const Typewriter = ({
+  className,
+  cursor = true,
+  ref,
+  speed = 60,
+  text,
+  ...props
+}) => {
+  const reduced = usePrefersReducedMotion();
+  const [count, setCount] = React.useState(() => reduced ? text.length : 0);
+  const [animationKey, setAnimationKey] = React.useState({ reduced, text });
+  if (animationKey.reduced !== reduced || animationKey.text !== text) {
+    setAnimationKey({ reduced, text });
+    setCount(reduced ? text.length : 0);
+  }
+  React.useEffect(() => {
+    if (reduced) {
+      return;
+    }
+    const timer = setInterval(() => {
+      setCount((current) => {
+        if (current >= text.length) {
+          clearInterval(timer);
+          return current;
+        }
+        return current + 1;
+      });
+    }, speed);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [reduced, speed, text]);
+  const typing = count < text.length;
+  return /* @__PURE__ */ jsxs("span", { "aria-label": text, className: cn(className), ref, ...props, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: text.slice(0, count) }),
+    cursor && typing ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "ml-0.5 inline-block w-[1ch] [animation:vllnt-terminal-cursor-blink_1s_steps(1,end)_infinite] motion-reduce:animate-none",
+        children: "|"
+      }
+    ) : void 0
+  ] });
+};
+Typewriter.displayName = "Typewriter";
+export {
+  Typewriter
+};

package/dist/components/typography/index.js

@@ -0,0 +1,26 @@
+import {
+  Blockquote,
+  H1,
+  H2,
+  H3,
+  H4,
+  InlineCode,
+  Lead,
+  List,
+  Muted,
+  P,
+  typographyVariants
+} from "./typography";
+export {
+  Blockquote,
+  H1,
+  H2,
+  H3,
+  H4,
+  InlineCode,
+  Lead,
+  List,
+  Muted,
+  P,
+  typographyVariants
+};