@nous-research/ui 0.13.2 → 0.14.0

package/dist/ui/components/blend-mode.js

@@ -1,76 +1,68 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useStore } from '@nanostores/react';
-import { createElement, useMemo } from 'react';
-import { getControlAtom } from '../../hooks/use-smooth-controls';
-import { cn, polyRef } from '../../utils';
-import { colorDodge, colorMix } from '../../utils/color';
-const LAYER_KEYS = { bg: 'bgColor', fg: 'fgColor', mg: 'mgColor' };
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useStore } from "@nanostores/react";
+import { createElement, useMemo } from "react";
+import { getControlAtom } from "../../hooks/use-smooth-controls.js";
+import { cn, polyRef } from "../../utils/index.js";
+import { colorDodge, colorMix } from "../../utils/color.js";
+const LAYER_KEYS = { bg: "bgColor", fg: "fgColor", mg: "mgColor" };
 const parseSpec = (spec) => {
-    const [layer, alpha] = spec.split('/');
-    return [layer, alpha ? parseFloat(alpha) : undefined];
+  const [layer, alpha] = spec.split("/");
+  return [layer, alpha ? parseFloat(alpha) : void 0];
 };
 const useControlColor = (key, fallback) => {
-    const atom = getControlAtom('Lens', key);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return (atom ? useStore(atom) : undefined) ?? fallback;
+  const atom = getControlAtom("Lens", key);
+  return (atom ? useStore(atom) : void 0) ?? fallback;
 };
 const useBlend = (against, spec) => {
-    const layerKey = spec?.split('/')[0];
-    const isLayerSpec = layerKey && layerKey in LAYER_KEYS;
-    const [target, alpha] = isLayerSpec
-        ? parseSpec(spec)
-        : [undefined, undefined];
-    const againstColor = useControlColor(LAYER_KEYS[against], '#041c1c');
-    const fgColor = useControlColor(LAYER_KEYS.fg, '#ffe6cb');
-    const mgColor = useControlColor(LAYER_KEYS.mg, '#ffe6cb');
-    const bgColor = useControlColor(LAYER_KEYS.bg, '#ffe6cb');
-    const targetColor = target
-        ? target === 'fg'
-            ? fgColor
-            : target === 'mg'
-                ? mgColor
-                : bgColor
-        : spec;
-    return useMemo(() => {
-        if (!spec || !targetColor) {
-            return undefined;
-        }
-        const result = colorDodge(againstColor, targetColor);
-        return alpha != null ? colorMix(result, alpha) : result;
-    }, [spec, againstColor, targetColor, alpha]);
+  const layerKey = spec?.split("/")[0];
+  const isLayerSpec = layerKey && layerKey in LAYER_KEYS;
+  const [target, alpha] = isLayerSpec ? parseSpec(spec) : [void 0, void 0];
+  const againstColor = useControlColor(LAYER_KEYS[against], "#041c1c");
+  const fgColor = useControlColor(LAYER_KEYS.fg, "#ffe6cb");
+  const mgColor = useControlColor(LAYER_KEYS.mg, "#ffe6cb");
+  const bgColor = useControlColor(LAYER_KEYS.bg, "#ffe6cb");
+  const targetColor = target ? target === "fg" ? fgColor : target === "mg" ? mgColor : bgColor : spec;
+  return useMemo(() => {
+    if (!spec || !targetColor) {
+      return void 0;
+    }
+    const result = colorDodge(againstColor, targetColor);
+    return alpha != null ? colorMix(result, alpha) : result;
+  }, [spec, againstColor, targetColor, alpha]);
 };
 export const useBlendMode = (opts = {}) => {
-    const { against = 'bg', background, color } = opts;
-    return {
-        backgroundColor: useBlend(against, background),
-        color: useBlend(against, color)
-    };
+  const { against = "bg", background, color } = opts;
+  return {
+    backgroundColor: useBlend(against, background),
+    color: useBlend(against, color)
+  };
 };
 export const withBlendMode = (Component, opts) => {
-    const Wrapped = (props) => {
-        const { against, background, color, ...rest } = props;
-        const colors = useBlendMode({
-            against: against ?? opts?.against,
-            background: background ?? opts?.background,
-            color: color ?? opts?.color
-        });
-        return _jsx(Component, { ...rest, ...colors });
-    };
-    Wrapped.displayName = `withBlendMode(${Component.displayName ?? Component.name ?? 'Component'})`;
-    return Wrapped;
+  const Wrapped = (props) => {
+    const { against, background, color, ...rest } = props;
+    const colors = useBlendMode({
+      against: against ?? opts?.against,
+      background: background ?? opts?.background,
+      color: color ?? opts?.color
+    });
+    return /* @__PURE__ */ jsx(Component, { ...rest, ...colors });
+  };
+  Wrapped.displayName = `withBlendMode(${Component.displayName ?? Component.name ?? "Component"})`;
+  return Wrapped;
 };
-export const BlendMode = polyRef(({ against, as, background, children, className, color, style, ...rest }, ref) => {
+export const BlendMode = polyRef(
+  ({ against, as, background, children, className, color, style, ...rest }, ref) => {
     const colors = useBlendMode({ against, background, color });
-    if (typeof children === 'function') {
-        return _jsx(_Fragment, { children: children(colors) });
+    if (typeof children === "function") {
+      return /* @__PURE__ */ jsx(Fragment, { children: children(colors) });
     }
-    return createElement((as ?? 'div'), {
-        ...rest,
-        children,
-        className: cn(className),
-        ref,
-        style: { ...colors, ...style }
+    return createElement(as ?? "div", {
+      ...rest,
+      children,
+      className: cn(className),
+      ref,
+      style: { ...colors, ...style }
     });
-});
-//# sourceMappingURL=blend-mode.js.map
+  }
+);

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

@@ -1,7 +1,6 @@
-export declare function Blink({ className, cursor }: BlinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Blink({ className, cursor }: BlinkProps): import("react").JSX.Element;
 interface BlinkProps {
     className?: string;
     cursor?: 'block' | 'line';
 }
 export {};
-//# sourceMappingURL=blink.d.ts.map

package/dist/ui/components/blink.js

@@ -1,7 +1,16 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from '../../utils';
-export function Blink({ className, cursor = 'block' }) {
-    return (_jsx("span", { className: cn('blink hidden group-hover:inline-block', 'dither ml-1 w-[1.2ch]', cursor === 'block' ? '-mb-[0.15em] h-[1.1em]' : '-mb-[0.1em] h-[2px]', className) }));
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/index.js";
+export function Blink({ className, cursor = "block" }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "blink hidden group-hover:inline-block",
+        "dither ml-1 w-[1.2ch]",
+        cursor === "block" ? "-mb-[0.15em] h-[1.1em]" : "-mb-[0.1em] h-[2px]",
+        className
+      )
+    }
+  );
 }
-//# sourceMappingURL=blink.js.map

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

@@ -4,12 +4,11 @@ declare const buttonVariants: (props?: ({
     ghost?: boolean | null | undefined;
     invert?: boolean | null | undefined;
     outlined?: boolean | null | undefined;
-    size?: "default" | "icon" | "sm" | "xs" | null | undefined;
+    size?: "sm" | "default" | "icon" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const Button: ({ children, className, destructive, ghost, invert, outlined, prefix, size, suffix, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ children, className, destructive, ghost, invert, outlined, prefix, size, suffix, ...props }: ButtonProps) => import("react").JSX.Element;
 interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'prefix' | 'suffix'>, VariantProps<typeof buttonVariants> {
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
 }
 export {};
-//# sourceMappingURL=button.d.ts.map

package/dist/ui/components/button.js

@@ -1,97 +1,146 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cva } from 'class-variance-authority';
-import { cloneElement } from 'react';
-import { cn } from '../../utils';
-import { Typography } from './typography';
-const SHADOW_DEFAULT = 'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff80]';
-const SHADOW_INVERT = 'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff29]';
-const SHADOW_INVERT_OUTLINED = 'shadow-[inset_-1px_-1px_0_0_#ffffff12,inset_1px_1px_0_0_#ffffff29]';
-const ACTIVE_FILTER = 'active:[filter:invert(1)_brightness(calc(100-99*var(--foreground-alpha,0)))]';
-const buttonVariants = cva([
-    'group relative grid cursor-pointer grid-cols-[auto_1fr_auto] items-center',
-    'leading-0 font-bold tracking-[0.2em] uppercase',
-    'disabled:pointer-events-none disabled:bg-midground/15 disabled:text-midground disabled:shadow-none'
-], {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cloneElement } from "react";
+import { cn } from "../../utils/index.js";
+import { Typography } from "./typography/index.js";
+const SHADOW_DEFAULT = "shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff80]";
+const SHADOW_INVERT = "shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff29]";
+const SHADOW_INVERT_OUTLINED = "shadow-[inset_-1px_-1px_0_0_#ffffff12,inset_1px_1px_0_0_#ffffff29]";
+const ACTIVE_FILTER = "active:[filter:invert(1)_brightness(calc(100-99*var(--foreground-alpha,0)))]";
+const buttonVariants = cva(
+  [
+    "group relative grid cursor-pointer grid-cols-[auto_1fr_auto] items-center",
+    "leading-0 font-bold tracking-[0.2em] uppercase",
+    "disabled:pointer-events-none disabled:bg-midground/15 disabled:text-midground disabled:shadow-none"
+  ],
+  {
     compoundVariants: [
-        // ── invert × outlined matrix (default surface, no ghost/destructive) ──
-        {
-            class: `bg-midground text-background-base active:invert ${SHADOW_DEFAULT}`,
-            destructive: false,
-            ghost: false,
-            invert: false,
-            outlined: false
-        },
-        {
-            class: `bg-midground/15 text-midground ${SHADOW_INVERT} ${ACTIVE_FILTER}`,
-            destructive: false,
-            ghost: false,
-            invert: true,
-            outlined: false
-        },
-        {
-            class: `shadow-midground ${SHADOW_DEFAULT} ${ACTIVE_FILTER}`,
-            destructive: false,
-            ghost: false,
-            invert: false,
-            outlined: true
-        },
-        {
-            class: `${SHADOW_INVERT_OUTLINED} ${ACTIVE_FILTER}`,
-            destructive: false,
-            ghost: false,
-            invert: true,
-            outlined: true
-        },
-        // ── ghost: no chrome, hover bg only ──
-        {
-            class: 'bg-transparent text-current hover:bg-midground/10 shadow-none',
-            destructive: false,
-            ghost: true
-        },
-        {
-            class: 'bg-transparent text-destructive hover:bg-destructive/10 shadow-none',
-            destructive: true,
-            ghost: true
-        },
-        // ── solid destructive ──
-        {
-            class: `bg-destructive text-destructive-foreground hover:bg-destructive/90 ${SHADOW_INVERT}`,
-            destructive: true,
-            ghost: false,
-            outlined: false
-        },
-        // ── outlined destructive ──
-        {
-            class: 'border border-destructive/40 bg-transparent text-destructive hover:bg-destructive/10 shadow-none',
-            destructive: true,
-            ghost: false,
-            outlined: true
-        }
-    ],
-    defaultVariants: {
+      // ── invert × outlined matrix (default surface, no ghost/destructive) ──
+      {
+        class: `bg-midground text-background-base active:invert ${SHADOW_DEFAULT}`,
         destructive: false,
         ghost: false,
         invert: false,
-        outlined: false,
-        size: 'default'
+        outlined: false
+      },
+      {
+        class: `bg-midground/15 text-midground ${SHADOW_INVERT} ${ACTIVE_FILTER}`,
+        destructive: false,
+        ghost: false,
+        invert: true,
+        outlined: false
+      },
+      {
+        class: `shadow-midground ${SHADOW_DEFAULT} ${ACTIVE_FILTER}`,
+        destructive: false,
+        ghost: false,
+        invert: false,
+        outlined: true
+      },
+      {
+        class: `${SHADOW_INVERT_OUTLINED} ${ACTIVE_FILTER}`,
+        destructive: false,
+        ghost: false,
+        invert: true,
+        outlined: true
+      },
+      // ── ghost: no chrome, hover bg only ──
+      {
+        class: "bg-transparent text-current hover:bg-midground/10 shadow-none",
+        destructive: false,
+        ghost: true
+      },
+      {
+        class: "bg-transparent text-destructive hover:bg-destructive/10 shadow-none",
+        destructive: true,
+        ghost: true
+      },
+      // ── solid destructive ──
+      {
+        class: `bg-destructive text-destructive-foreground hover:bg-destructive/90 ${SHADOW_INVERT}`,
+        destructive: true,
+        ghost: false,
+        outlined: false
+      },
+      // ── outlined destructive ──
+      {
+        class: "border border-destructive/40 bg-transparent text-destructive hover:bg-destructive/10 shadow-none",
+        destructive: true,
+        ghost: false,
+        outlined: true
+      }
+    ],
+    defaultVariants: {
+      destructive: false,
+      ghost: false,
+      invert: false,
+      outlined: false,
+      size: "default"
     },
     variants: {
-        destructive: { true: '' },
-        ghost: { true: '' },
-        invert: { true: '' },
-        outlined: { true: 'text-midground bg-transparent' },
-        size: {
-            default: 'px-[.9em_.75em] py-[1.25em]',
-            icon: 'p-2 aspect-square grid-cols-1 place-items-center [&>svg]:size-3.5',
-            sm: 'px-3 py-1.5 text-[0.7rem] tracking-[0.15em] [&>svg]:size-3',
-            xs: 'p-1 aspect-square grid-cols-1 place-items-center [&>svg]:size-3'
-        }
+      destructive: { true: "" },
+      ghost: { true: "" },
+      invert: { true: "" },
+      outlined: { true: "text-midground bg-transparent" },
+      size: {
+        default: "px-[.9em_.75em] py-[1.25em]",
+        icon: "p-2 aspect-square grid-cols-1 place-items-center [&>svg]:size-3.5",
+        sm: "px-3 py-1.5 text-[0.7rem] tracking-[0.15em] [&>svg]:size-3",
+        xs: "p-1 aspect-square grid-cols-1 place-items-center [&>svg]:size-3"
+      }
     }
-});
-const IconSlot = ({ icon, side }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "w-5" }), _jsx("span", { className: cn('absolute top-1/2 -translate-y-1/2', side === 'left' ? 'left-3' : 'right-3'), children: typeof icon === 'object'
-                ? cloneElement(icon, {
-                    className: 'size-3.5'
-                })
-                : icon })] }));
-export const Button = ({ children, className, destructive, ghost, invert, outlined, prefix, size, suffix, ...props }) => (_jsxs(Typography, { as: "button", className: cn(buttonVariants({ destructive, ghost, invert, outlined, size }), className), mono: true, ...props, children: [!ghost && (_jsx("span", { "aria-hidden": true, className: "arc-border opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100" })), prefix && _jsx(IconSlot, { icon: prefix, side: "left" }), children, suffix && _jsx(IconSlot, { icon: suffix, side: "right" })] }));
-//# sourceMappingURL=button.js.map
+  }
+);
+const IconSlot = ({
+  icon,
+  side
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("span", { className: "w-5" }),
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "absolute top-1/2 -translate-y-1/2",
+        side === "left" ? "left-3" : "right-3"
+      ),
+      children: typeof icon === "object" ? cloneElement(icon, {
+        className: "size-3.5"
+      }) : icon
+    }
+  )
+] });
+export const Button = ({
+  children,
+  className,
+  destructive,
+  ghost,
+  invert,
+  outlined,
+  prefix,
+  size,
+  suffix,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  Typography,
+  {
+    as: "button",
+    className: cn(
+      buttonVariants({ destructive, ghost, invert, outlined, size }),
+      className
+    ),
+    mono: true,
+    ...props,
+    children: [
+      !ghost && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "arc-border opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100"
+        }
+      ),
+      prefix && /* @__PURE__ */ jsx(IconSlot, { icon: prefix, side: "left" }),
+      children,
+      suffix && /* @__PURE__ */ jsx(IconSlot, { icon: suffix, side: "right" })
+    ]
+  }
+);

package/dist/ui/components/command-block.d.ts

@@ -2,12 +2,12 @@
  * A "copy to clipboard" button that briefly shows a "Copied!" confirmation.
  * Designed to sit alongside a short command string, not as a general button.
  */
-export declare function CopyButton({ children, className, copiedLabel, label, resetDelayMs, text }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function CopyButton({ children, className, copiedLabel, label, resetDelayMs, text }: CopyButtonProps): import("react").JSX.Element;
 /**
  * A labeled, copy-able command (or code) display. Pairs `<CopyButton>` with
  * a monospace code block. Used for install/setup instructions.
  */
-export declare function CommandBlock({ className, code, label }: CommandBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function CommandBlock({ className, code, label }: CommandBlockProps): import("react").JSX.Element;
 interface CommandBlockProps {
     className?: string;
     code: string;
@@ -22,4 +22,3 @@ interface CopyButtonProps {
     text: string;
 }
 export {};
-//# sourceMappingURL=command-block.d.ts.map

package/dist/ui/components/command-block.js

@@ -1,27 +1,55 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
-import { cn } from '../../utils';
-import { Small } from './typography/small';
-/**
- * A "copy to clipboard" button that briefly shows a "Copied!" confirmation.
- * Designed to sit alongside a short command string, not as a general button.
- */
-export function CopyButton({ children, className, copiedLabel = 'Copied!', label = 'Copy', resetDelayMs = 2000, text }) {
-    const [copied, setCopied] = useState(false);
-    const handleCopy = useCallback(() => {
-        void navigator.clipboard.writeText(text).then(() => {
-            setCopied(true);
-            setTimeout(() => setCopied(false), resetDelayMs);
-        });
-    }, [resetDelayMs, text]);
-    return (_jsx("button", { className: cn('font-courier cursor-pointer border-none bg-transparent text-[0.6875rem]', 'tracking-widest uppercase', 'hover:text-midground tap-highlight-transparent transition-colors', 'flex items-center justify-center', copied ? 'text-midground' : 'text-current opacity-60', className), onClick: handleCopy, type: "button", children: children ?? (copied ? copiedLabel : label) }));
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { cn } from "../../utils/index.js";
+import { Small } from "./typography/small.js";
+export function CopyButton({
+  children,
+  className,
+  copiedLabel = "Copied!",
+  label = "Copy",
+  resetDelayMs = 2e3,
+  text
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), resetDelayMs);
+    });
+  }, [resetDelayMs, text]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "font-courier cursor-pointer border-none bg-transparent text-[0.6875rem]",
+        "tracking-widest uppercase",
+        "hover:text-midground tap-highlight-transparent transition-colors",
+        "flex items-center justify-center",
+        copied ? "text-midground" : "text-current opacity-60",
+        className
+      ),
+      onClick: handleCopy,
+      type: "button",
+      children: children ?? (copied ? copiedLabel : label)
+    }
+  );
 }
-/**
- * A labeled, copy-able command (or code) display. Pairs `<CopyButton>` with
- * a monospace code block. Used for install/setup instructions.
- */
 export function CommandBlock({ className, code, label }) {
-    return (_jsxs("div", { className: cn('flex flex-col gap-1', className), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Small, { className: "opacity-50", children: label }), _jsx(CopyButton, { text: code })] }), _jsx("div", { className: cn('bg-background/40 font-courier border border-current/20', 'px-3 py-2 text-[0.6875rem] leading-relaxed lowercase'), children: _jsx("code", { className: "break-all", children: code }) })] }));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Small, { className: "opacity-50", children: label }),
+      /* @__PURE__ */ jsx(CopyButton, { text: code })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "bg-background/40 font-courier border border-current/20",
+          "px-3 py-2 text-[0.6875rem] leading-relaxed lowercase"
+        ),
+        children: /* @__PURE__ */ jsx("code", { className: "break-all", children: code })
+      }
+    )
+  ] });
 }
-//# sourceMappingURL=command-block.js.map

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

@@ -1,4 +1,3 @@
 export declare function Cursor({ scale }: {
     scale?: number;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=cursor.d.ts.map
+}): import("react").JSX.Element;