@nous-research/ui 0.13.2 → 0.14.0

package/dist/ui/components/stats.js

@@ -1,11 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../utils';
-import { Typography } from './typography';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/index.js";
+import { Typography } from "./typography/index.js";
 export function Stats({ className, items, flip, ...props }) {
-    return (_jsx("div", { className: cn('flex w-full flex-col gap-5', className), ...props, children: items.map(({ label, value }) => {
-            const valueText = (_jsx(Typography, { className: "text-xs leading-[1.4] tracking-widest", expanded: true, children: typeof value === 'string' ? value : value.node }));
-            const labelText = (_jsx(Typography, { className: "leading-none tracking-[0.2em] opacity-60", mono: true, children: typeof label === 'string' ? label : label.node }));
-            return (_jsxs("div", { className: "text-midground grid grid-cols-[auto_1fr_auto] items-center gap-2.5 uppercase", children: [flip ? labelText : valueText, _jsx(Typography, { className: "min-w-0 overflow-hidden text-[13px] leading-[1.4] tracking-[0.4em] opacity-20", expanded: true, children: '·'.repeat(100) }), flip ? valueText : labelText] }, (typeof label === 'string' ? label : label.key) + '@@@' + (typeof value === 'string' ? value : value.key)));
-        }) }));
+  return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col gap-5", className), ...props, children: items.map(({ label, value }) => {
+    const valueText = /* @__PURE__ */ jsx(
+      Typography,
+      {
+        className: "text-xs leading-[1.4] tracking-widest",
+        expanded: true,
+        children: typeof value === "string" ? value : value.node
+      }
+    );
+    const labelText = /* @__PURE__ */ jsx(Typography, { className: "leading-none tracking-[0.2em] opacity-60", mono: true, children: typeof label === "string" ? label : label.node });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "text-midground grid grid-cols-[auto_1fr_auto] items-center gap-2.5 uppercase",
+        children: [
+          flip ? labelText : valueText,
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              className: "min-w-0 overflow-hidden text-[13px] leading-[1.4] tracking-[0.4em] opacity-20",
+              expanded: true,
+              children: "\xB7".repeat(100)
+            }
+          ),
+          flip ? valueText : labelText
+        ]
+      },
+      (typeof label === "string" ? label : label.key) + "@@@" + (typeof value === "string" ? value : value.key)
+    );
+  }) });
 }
-//# sourceMappingURL=stats.js.map

package/dist/ui/components/switch.d.ts

@@ -5,4 +5,3 @@ interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onC
     onCheckedChange: (checked: boolean) => void;
 }
 export {};
-//# sourceMappingURL=switch.d.ts.map

package/dist/ui/components/switch.js

@@ -1,12 +1,36 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { cn } from '../../utils';
-export const Switch = forwardRef(function Switch({ checked, className, disabled, id, onCheckedChange, ...props }, ref) {
-    return (_jsx("button", { "aria-checked": checked, className: cn('peer inline-flex h-5 w-9 shrink-0 items-center border transition-colors cursor-pointer', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30', 'disabled:cursor-not-allowed disabled:opacity-50', checked
-            ? 'bg-midground/15 border-midground/30'
-            : 'bg-background border-midground/20', className), disabled: disabled, id: id, onClick: () => onCheckedChange(!checked), ref: ref, role: "switch", type: "button", ...props, children: _jsx("span", { "aria-hidden": true, className: cn('pointer-events-none block h-3.5 w-3.5 transition-transform', checked
-                ? 'translate-x-4 bg-midground'
-                : 'translate-x-0.5 bg-midground/40') }) }));
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/index.js";
+export const Switch = forwardRef(function Switch2({ checked, className, disabled, id, onCheckedChange, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-checked": checked,
+      className: cn(
+        "peer inline-flex h-5 w-9 shrink-0 items-center border transition-colors cursor-pointer",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "bg-midground/15 border-midground/30" : "bg-background border-midground/20",
+        className
+      ),
+      disabled,
+      id,
+      onClick: () => onCheckedChange(!checked),
+      ref,
+      role: "switch",
+      type: "button",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "pointer-events-none block h-3.5 w-3.5 transition-transform",
+            checked ? "translate-x-4 bg-midground" : "translate-x-0.5 bg-midground/40"
+          )
+        }
+      )
+    }
+  );
 });
-//# sourceMappingURL=switch.js.map

package/dist/ui/components/tabs.d.ts

@@ -1,7 +1,7 @@
 import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
-export declare function Tabs({ children, className, defaultValue }: TabsProps): import("react/jsx-runtime").JSX.Element;
-export declare function TabsList({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare function TabsTrigger({ active, className, value: _value, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs({ children, className, defaultValue }: TabsProps): import("react").JSX.Element;
+export declare function TabsList({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function TabsTrigger({ active, className, value: _value, ...props }: TabsTriggerProps): import("react").JSX.Element;
 interface TabsProps {
     children: (active: string, setActive: (value: string) => void) => ReactNode;
     className?: string;
@@ -12,4 +12,3 @@ interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     value: string;
 }
 export {};
-//# sourceMappingURL=tabs.d.ts.map

package/dist/ui/components/tabs.js

@@ -1,17 +1,43 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { cn } from '../../utils';
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  useState
+} from "react";
+import { cn } from "../../utils/index.js";
 export function Tabs({ children, className, defaultValue }) {
-    const [active, setActive] = useState(defaultValue);
-    return (_jsx("div", { className: cn('flex flex-col gap-4', className), children: children(active, setActive) }));
+  const [active, setActive] = useState(defaultValue);
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-4", className), children: children(active, setActive) });
 }
 export function TabsList({ className, ...props }) {
-    return (_jsx("div", { className: cn('inline-flex h-9 items-center justify-start border-b border-midground/15 text-midground/60', className), ...props }));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-9 items-center justify-start border-b border-midground/15 text-midground/60",
+        className
+      ),
+      ...props
+    }
+  );
 }
-export function TabsTrigger({ active, className, value: _value, ...props }) {
-    return (_jsx("button", { className: cn('relative inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5', 'font-mondwest text-xs tracking-[0.1em] uppercase transition-all cursor-pointer', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30', active
-            ? 'text-midground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-midground'
-            : 'hover:text-midground', className), type: "button", ...props }));
+export function TabsTrigger({
+  active,
+  className,
+  value: _value,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "relative inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5",
+        "font-mondwest text-xs tracking-[0.1em] uppercase transition-all cursor-pointer",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30",
+        active ? "text-midground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-midground" : "hover:text-midground",
+        className
+      ),
+      type: "button",
+      ...props
+    }
+  );
 }
-//# sourceMappingURL=tabs.js.map

package/dist/ui/components/terminal-demo.d.ts

@@ -1,4 +1,4 @@
-export declare function TerminalDemo({ ariaLabel, className, height, label, loopDelayMs, outputLineDelayMs, sequence }: TerminalDemoProps): import("react/jsx-runtime").JSX.Element;
+export declare function TerminalDemo({ ariaLabel, className, height, label, loopDelayMs, outputLineDelayMs, sequence }: TerminalDemoProps): import("react").JSX.Element;
 interface ClearStep {
     type: 'clear';
 }
@@ -30,4 +30,3 @@ interface TypeStep {
     type: 'type';
 }
 export {};
-//# sourceMappingURL=terminal-demo.d.ts.map

package/dist/ui/components/terminal-demo.js

@@ -1,79 +1,124 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { cn } from '../../utils';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "../../utils/index.js";
 function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
-export function TerminalDemo({ ariaLabel = 'Terminal Demo', className, height = 320, label = 'Terminal', loopDelayMs = 1000, outputLineDelayMs = 50, sequence }) {
-    const bodyRef = useRef(null);
-    const startedRef = useRef(false);
-    const [html, setHtml] = useState('');
-    const runDemo = useCallback(async () => {
-        if (startedRef.current) {
-            return;
-        }
-        startedRef.current = true;
-        let content = '';
-        const render = (h) => {
-            content = h;
-            setHtml(h);
-        };
-        for (;;) {
-            for (const step of sequence) {
-                switch (step.type) {
-                    case 'clear':
-                        content = '';
-                        render('');
-                        break;
-                    case 'output':
-                        for (const line of step.lines) {
-                            render(content + '\n' + line);
-                            await sleep(outputLineDelayMs);
-                        }
-                        break;
-                    case 'pause':
-                        await sleep(step.ms);
-                        break;
-                    case 'prompt':
-                        render(content + `<span class="text-midground">${step.text}</span>`);
-                        break;
-                    case 'type':
-                        for (const char of step.text) {
-                            render(content + char);
-                            await sleep(step.delay ?? 30);
-                        }
-                        break;
-                }
+export function TerminalDemo({
+  ariaLabel = "Terminal Demo",
+  className,
+  height = 320,
+  label = "Terminal",
+  loopDelayMs = 1e3,
+  outputLineDelayMs = 50,
+  sequence
+}) {
+  const bodyRef = useRef(null);
+  const startedRef = useRef(false);
+  const [html, setHtml] = useState("");
+  const runDemo = useCallback(async () => {
+    if (startedRef.current) {
+      return;
+    }
+    startedRef.current = true;
+    let content = "";
+    const render = (h) => {
+      content = h;
+      setHtml(h);
+    };
+    for (; ; ) {
+      for (const step of sequence) {
+        switch (step.type) {
+          case "clear":
+            content = "";
+            render("");
+            break;
+          case "output":
+            for (const line of step.lines) {
+              render(content + "\n" + line);
+              await sleep(outputLineDelayMs);
             }
-            content = '';
-            render('');
-            await sleep(loopDelayMs);
-        }
-    }, [loopDelayMs, outputLineDelayMs, sequence]);
-    useEffect(() => {
-        const el = bodyRef.current?.closest('[data-demo-root]');
-        if (!el) {
-            return;
-        }
-        const observer = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    runDemo();
-                }
-            });
-        }, { threshold: 0.3 });
-        observer.observe(el);
-        return () => observer.disconnect();
-    }, [runDemo]);
-    useEffect(() => {
-        if (bodyRef.current) {
-            bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+            break;
+          case "pause":
+            await sleep(step.ms);
+            break;
+          case "prompt":
+            render(content + `<span class="text-midground">${step.text}</span>`);
+            break;
+          case "type":
+            for (const char of step.text) {
+              render(content + char);
+              await sleep(step.delay ?? 30);
+            }
+            break;
         }
-    }, [html]);
-    return (_jsxs("div", { "aria-label": ariaLabel, className: cn('border-4 border-double border-inherit', className), "data-demo-root": true, role: "img", children: [_jsxs("div", { className: "flex items-center gap-3 border-b border-current/10 px-3 py-2", children: [_jsxs("div", { className: "flex gap-1.5", children: [_jsx("span", { className: "bg-midground size-2 rounded-full", style: { mixBlendMode: 'plus-lighter' } }), _jsx("span", { className: "bg-midground/60 size-2 rounded-full" }), _jsx("span", { className: "bg-midground/30 size-2 rounded-full" })] }), _jsx("span", { className: "font-courier text-[0.625rem] tracking-widest uppercase opacity-50", children: label })] }), _jsx("div", { className: cn('overflow-x-hidden overflow-y-auto whitespace-pre-wrap', 'font-courier p-4 text-[0.75rem] leading-[1.7] normal-case'), dangerouslySetInnerHTML: {
-                    __html: html +
-                        '<span class="blink inline-block dither ml-0.5 h-[1em] w-[1ch]"></span>'
-                }, ref: bodyRef, style: { height } })] }));
+      }
+      content = "";
+      render("");
+      await sleep(loopDelayMs);
+    }
+  }, [loopDelayMs, outputLineDelayMs, sequence]);
+  useEffect(() => {
+    const el = bodyRef.current?.closest("[data-demo-root]");
+    if (!el) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            runDemo();
+          }
+        });
+      },
+      { threshold: 0.3 }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [runDemo]);
+  useEffect(() => {
+    if (bodyRef.current) {
+      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
+    }
+  }, [html]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn("border-4 border-double border-inherit", className),
+      "data-demo-root": true,
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-current/10 px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "bg-midground size-2 rounded-full",
+                style: { mixBlendMode: "plus-lighter" }
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "bg-midground/60 size-2 rounded-full" }),
+            /* @__PURE__ */ jsx("span", { className: "bg-midground/30 size-2 rounded-full" })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "font-courier text-[0.625rem] tracking-widest uppercase opacity-50", children: label })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "overflow-x-hidden overflow-y-auto whitespace-pre-wrap",
+              "font-courier p-4 text-[0.75rem] leading-[1.7] normal-case"
+            ),
+            dangerouslySetInnerHTML: {
+              __html: html + '<span class="blink inline-block dither ml-0.5 h-[1em] w-[1ch]"></span>'
+            },
+            ref: bodyRef,
+            style: { height }
+          }
+        )
+      ]
+    }
+  );
 }
-//# sourceMappingURL=terminal-demo.js.map

package/dist/ui/components/theme-toggle.d.ts

@@ -1,7 +1,6 @@
-export declare function ThemeToggle({ className, style }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemeToggle({ className, style }: ThemeToggleProps): import("react").JSX.Element;
 interface ThemeToggleProps {
     className?: string;
     style?: React.CSSProperties;
 }
 export {};
-//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/ui/components/theme-toggle.js

@@ -1,10 +1,65 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useStore } from '@nanostores/react';
-import { cn } from '../../utils';
-import { $lightMode, toggleLens } from './overlays';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import { cn } from "../../utils/index.js";
+import { $lightMode, toggleLens } from "./overlays/index.js";
 export function ThemeToggle({ className, style }) {
-    const light = useStore($lightMode);
-    return (_jsxs("button", { "aria-label": light ? 'Switch to dark mode' : 'Switch to light mode', className: cn('relative flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full', 'border border-current/25 bg-current/8 transition-colors', 'hover:bg-current/15', className), onClick: toggleLens, style: style, type: "button", children: [_jsxs("svg", { className: "absolute left-1 size-3.5 opacity-40", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", children: [_jsx("circle", { cx: 12, cy: 12, r: 5 }), _jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })] }), _jsx("svg", { className: "absolute right-1 size-3.5 opacity-40", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, viewBox: "0 0 24 24", children: _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }), _jsx("span", { "aria-hidden": true, className: cn('bg-midground absolute size-4 rounded-full', 'transition-transform duration-200 ease-out'), style: { transform: `translateX(${light ? 2 : 22}px)` } })] }));
+  const light = useStore($lightMode);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-label": light ? "Switch to dark mode" : "Switch to light mode",
+      className: cn(
+        "relative flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
+        "border border-current/25 bg-current/8 transition-colors",
+        "hover:bg-current/15",
+        className
+      ),
+      onClick: toggleLens,
+      style,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "absolute left-1 size-3.5 opacity-40",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 5 }),
+              /* @__PURE__ */ jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "absolute right-1 size-3.5 opacity-40",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: 2,
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: cn(
+              "bg-midground absolute size-4 rounded-full",
+              "transition-transform duration-200 ease-out"
+            ),
+            style: { transform: `translateX(${light ? 2 : 22}px)` }
+          }
+        )
+      ]
+    }
+  );
 }
-//# sourceMappingURL=theme-toggle.js.map

package/dist/ui/components/tier-card.d.ts

@@ -14,7 +14,7 @@
  *   color` — used for the "highest tier" red treatment on top of any
  *   base tint.
  */
-export declare function TierCard({ badge, bullets, className, image, isCurrent, onSelect, overlay, price, selected, tint, tintStrength, title }: TierCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function TierCard({ badge, bullets, className, image, isCurrent, onSelect, overlay, price, selected, tint, tintStrength, title }: TierCardProps): import("react").JSX.Element;
 export interface TierCardPrice {
     /** Headline price, e.g. `"$20"` or `"Free"`. */
     primary: string;
@@ -51,4 +51,3 @@ export interface TierCardProps {
     /** Tier name / headline. */
     title: React.ReactNode;
 }
-//# sourceMappingURL=tier-card.d.ts.map