@nous-research/ui 0.14.2 → 0.16.0

package/src/ui/components/blend-mode.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { useStore } from '@nanostores/react'
+import { createElement, useMemo } from 'react'
+
+import { getControlAtom } from '../../hooks/use-smooth-controls'
+import { cn, type PolyProps, polyRef } from '../../utils'
+import { colorDodge, colorMix } from '../../utils/color'
+
+const LAYER_KEYS = { bg: 'bgColor', fg: 'fgColor', mg: 'mgColor' } as const
+type Layer = keyof typeof LAYER_KEYS
+type LayerSpec = `${Layer}/${number}` | Layer
+
+const parseSpec = (spec: LayerSpec): [Layer, number?] => {
+  const [layer, alpha] = spec.split('/') as [Layer, string?]
+
+  return [layer, alpha ? parseFloat(alpha) : undefined]
+}
+
+const useControlColor = (key: string, fallback: string) => {
+  const atom = getControlAtom<string>('Lens', key)
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return (atom ? useStore(atom) : undefined) ?? fallback
+}
+
+const useBlend = (against: Layer, spec?: LayerSpec | string) => {
+  const layerKey = spec?.split('/')[0]
+  const isLayerSpec = layerKey && layerKey in LAYER_KEYS
+
+  const [target, alpha] = isLayerSpec
+    ? parseSpec(spec as LayerSpec)
+    : [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])
+}
+
+export const useBlendMode = (opts: BlendModeOpts = {}): BlendColors => {
+  const { against = 'bg', background, color } = opts
+
+  return {
+    backgroundColor: useBlend(against, background),
+    color: useBlend(against, color)
+  }
+}
+
+export const withBlendMode = <P extends BlendColors>(
+  Component: React.ComponentType<P>,
+  opts?: BlendModeOpts
+) => {
+  const Wrapped = (
+    props: Omit<P, keyof BlendColors> & Partial<BlendModeOpts>
+  ) => {
+    const { against, background, color, ...rest } = props as P & BlendModeOpts
+
+    const colors = useBlendMode({
+      against: against ?? opts?.against,
+      background: background ?? opts?.background,
+      color: color ?? opts?.color
+    })
+
+    return <Component {...(rest as P)} {...colors} />
+  }
+
+  Wrapped.displayName = `withBlendMode(${Component.displayName ?? Component.name ?? 'Component'})`
+
+  return Wrapped
+}
+
+export const BlendMode = polyRef<'div', BlendModeOwnProps>(
+  (
+    { against, as, background, children, className, color, style, ...rest },
+    ref
+  ) => {
+    const colors = useBlendMode({ against, background, color })
+
+    if (typeof children === 'function') {
+      return <>{children(colors)}</>
+    }
+
+    return createElement((as ?? 'div') as React.ElementType, {
+      ...rest,
+      children,
+      className: cn(className),
+      ref,
+      style: { ...colors, ...style }
+    })
+  }
+)
+
+interface BlendModeOwnProps extends BlendModeOpts {
+  children?: ((colors: BlendColors) => React.ReactNode) | React.ReactNode
+}
+
+export interface BlendColors {
+  backgroundColor?: string
+  color?: string
+}
+
+interface BlendModeOpts {
+  against?: Layer
+  background?: LayerSpec | string
+  color?: LayerSpec | string
+}
+
+export type BlendModeProps<T extends React.ElementType = 'div'> = PolyProps<
+  T,
+  BlendModeOwnProps
+>

package/src/ui/components/blink.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Blink } from './blink'
+import { Typography } from './typography'
+import { Small } from './typography/small'
+
+const meta = {
+  component: Blink,
+  title: 'Components/Blink'
+} satisfies Meta<typeof Blink>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Cursors: Story = {
+  render: () => (
+    <div className="group flex flex-col gap-3">
+      <Small className="opacity-40">Hover to see the cursors blink</Small>
+
+      <Typography className="relative" mono>
+        Block
+        <Blink className="absolute" cursor="block" />
+      </Typography>
+
+      <Typography className="relative" mono>
+        Line
+        <Blink className="absolute" cursor="line" />
+      </Typography>
+    </div>
+  )
+}

package/src/ui/components/blink.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { cn } from '../../utils'
+
+export function Blink({ className, cursor = 'block' }: BlinkProps) {
+  return (
+    <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
+      )}
+    />
+  )
+}
+
+interface BlinkProps {
+  className?: string
+  cursor?: 'block' | 'line'
+}

package/src/ui/components/button.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { Button } from './button'
+import { ArrowIcon, LinkIcon, SearchIcon } from './icons'
+
+const meta: Meta<typeof Button> = {
+  argTypes: {
+    children: { control: 'text' },
+    disabled: { control: 'boolean' },
+    invert: { control: 'boolean' },
+    outlined: { control: 'boolean' }
+  },
+  args: { children: 'Normal', disabled: false, invert: false, outlined: false },
+  component: Button,
+  title: 'Components/Button'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const Playground: Story = {
+  args: { prefix: <ArrowIcon direction="right" /> }
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button prefix={<ArrowIcon direction="right" />}>Normal</Button>
+      <Button invert prefix={<ArrowIcon direction="right" />}>
+        Inverted
+      </Button>
+      <Button outlined prefix={<ArrowIcon direction="right" />}>
+        Outlined
+      </Button>
+      <Button invert outlined prefix={<ArrowIcon direction="right" />}>
+        Out + Inv
+      </Button>
+    </div>
+  )
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button suffix={<LinkIcon />}>Suffix</Button>
+      <Button
+        prefix={<SearchIcon />}
+        suffix={<ArrowIcon direction="right" />}
+      >
+        Prefix + Suffix
+      </Button>
+      <Button disabled prefix={<ArrowIcon direction="right" />}>
+        Disabled
+      </Button>
+    </div>
+  )
+}
+
+export const CssCheck: Story = {
+  args: { children: 'Danger', destructive: true },
+  play: async ({ canvas }) => {
+    const button = canvas.getByRole('button', { name: /danger/i })
+
+    await expect(getComputedStyle(button).backgroundColor).toBe('rgb(251, 44, 54)')
+  }
+}

package/src/ui/components/button.tsx

@@ -0,0 +1,170 @@
+import { cva, type VariantProps } 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',
+    'text-display leading-0 font-bold tracking-[0.2em]',
+    '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: {
+      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'
+      }
+    }
+  }
+)
+
+const IconSlot = ({
+  icon,
+  side
+}: {
+  icon: React.ReactNode
+  side: 'left' | 'right'
+}) => (
+  <>
+    <span className="w-5" />
+
+    <span
+      className={cn(
+        'absolute top-1/2 -translate-y-1/2',
+        side === 'left' ? 'left-3' : 'right-3'
+      )}
+    >
+      {typeof icon === 'object'
+        ? cloneElement(icon as React.ReactElement<any>, {
+            className: 'size-3.5'
+          })
+        : icon}
+    </span>
+  </>
+)
+
+export const Button = ({
+  children,
+  className,
+  destructive,
+  ghost,
+  invert,
+  outlined,
+  prefix,
+  size,
+  suffix,
+  ...props
+}: ButtonProps) => (
+  <Typography
+    as="button"
+    className={cn(
+      buttonVariants({ destructive, ghost, invert, outlined, size }),
+      className
+    )}
+    mono
+    {...props}
+  >
+    {!ghost && (
+      <span
+        aria-hidden
+        className="arc-border opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100"
+      />
+    )}
+    {prefix && <IconSlot icon={prefix} side="left" />}
+    {children}
+    {suffix && <IconSlot icon={suffix} side="right" />}
+  </Typography>
+)
+
+interface ButtonProps
+  extends Omit<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      'prefix' | 'suffix'
+    >,
+    VariantProps<typeof buttonVariants> {
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
+}

package/src/ui/components/checkbox.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Checkbox } from './checkbox'
+import { Small } from './typography/small'
+
+function Demo({ disabled }: { disabled?: boolean }) {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <div className="flex items-center gap-2.5">
+      <Checkbox
+        checked={checked}
+        disabled={disabled}
+        id="checkbox-demo"
+        onCheckedChange={setChecked}
+      />
+
+      <label className="cursor-pointer text-sm" htmlFor="checkbox-demo">
+        Accept terms
+      </label>
+    </div>
+  )
+}
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  title: 'Components/Checkbox'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Playground: Story = { render: () => <Demo /> }
+
+export const Disabled: Story = { render: () => <Demo disabled /> }
+
+export const Checked: Story = {
+  render: () => (
+    <div className="flex items-center gap-2.5">
+      <Checkbox defaultChecked id="checkbox-checked" />
+
+      <label className="cursor-pointer text-sm" htmlFor="checkbox-checked">
+        Clone from default profile
+      </label>
+    </div>
+  )
+}
+
+export const Stack: Story = {
+  render: () => {
+    function StackDemo() {
+      const [a, setA] = useState(true)
+      const [b, setB] = useState(false)
+      const [c, setC] = useState(true)
+
+      return (
+        <div className="grid w-72 gap-3">
+          <div className="flex items-center gap-2.5">
+            <Checkbox checked={a} id="opt-a" onCheckedChange={setA} />
+
+            <label className="cursor-pointer text-sm" htmlFor="opt-a">
+              Logging
+            </label>
+          </div>
+
+          <div className="flex items-center gap-2.5">
+            <Checkbox checked={b} id="opt-b" onCheckedChange={setB} />
+
+            <label className="cursor-pointer text-sm" htmlFor="opt-b">
+              Telemetry
+            </label>
+          </div>
+
+          <div className="flex items-center gap-2.5">
+            <Checkbox checked={c} id="opt-c" onCheckedChange={setC} />
+
+            <label className="cursor-pointer text-sm" htmlFor="opt-c">
+              Auto-update
+            </label>
+          </div>
+        </div>
+      )
+    }
+
+    return <StackDemo />
+  }
+}
+
+export const NextToLabel: Story = {
+  render: () => {
+    function LabeledDemo() {
+      const [checked, setChecked] = useState(true)
+
+      return (
+        <div className="flex items-center gap-3">
+          <Small className="opacity-60 uppercase tracking-wider">
+            Persist globally
+          </Small>
+
+          <Checkbox
+            checked={checked}
+            id="persist-global"
+            onCheckedChange={setChecked}
+          />
+        </div>
+      )
+    }
+
+    return <LabeledDemo />
+  }
+}

package/src/ui/components/checkbox.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react'
+
+import { cn } from '../../utils'
+
+import { CheckIcon } from './icons/check'
+
+export const Checkbox = forwardRef<
+  ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(function Checkbox({ className, ...props }, ref) {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        'peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center border transition-colors outline-none',
+        'focus-visible:ring-1 focus-visible:ring-midground/30',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=unchecked]:border-midground/20 data-[state=unchecked]:bg-background',
+        'data-[state=unchecked]:hover:border-midground/30',
+        'data-[state=checked]:border-midground/30 data-[state=checked]:bg-midground/15',
+        'data-[state=indeterminate]:border-midground/30 data-[state=indeterminate]:bg-midground/15',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <CheckIcon className="h-3 w-3 text-midground" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+})
+
+type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>

package/src/ui/components/command-block.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  CommandBlock,
+  CopyButton
+} from './command-block'
+
+const meta: Meta<typeof CommandBlock> = {
+  args: {
+    code: 'curl -fsSL https://hermes.nousresearch.com/install.sh | bash',
+    label: '1. Install'
+  },
+  component: CommandBlock,
+  title: 'Components/CommandBlock'
+}
+
+export default meta
+
+type Story = StoryObj<typeof CommandBlock>
+
+export const Default: Story = {
+  render: args => (
+    <div className="w-[520px]">
+      <CommandBlock {...args} />
+    </div>
+  )
+}
+
+export const TwoStep: Story = {
+  render: () => (
+    <div className="flex w-[520px] flex-col gap-3">
+      <CommandBlock
+        code="curl -fsSL https://hermes.nousresearch.com/install.sh | bash"
+        label="1. Install"
+      />
+
+      <CommandBlock code="hermes setup" label="2. Configure" />
+    </div>
+  )
+}
+
+export const StandaloneButton: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <span className="font-courier text-xs opacity-60">
+        echo &quot;hello world&quot;
+      </span>
+
+      <CopyButton text="echo 'hello world'" />
+    </div>
+  )
+}