@nous-research/ui 0.15.0 → 0.16.0

package/src/ui/components/icons/chevron.tsx

@@ -0,0 +1,45 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function ChevronIcon({
+  className,
+  direction = 'left',
+  ...props
+}: ChevronIconProps) {
+  return (
+    <svg
+      className={cn(
+        direction === 'left' && 'rotate-90',
+        direction === 'right' && '-rotate-90',
+        className
+      )}
+      fill="none"
+      viewBox="0 0 8 13"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M0 7.49765h5V4.9969H1e-7z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M2.5 2.49765v7.5h2.50075v-7.5z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+      <path
+        clipRule="evenodd"
+        d="M5 .0000031V2.4996h2.4996V.0000032zM5 9.99805v2.49965h2.4996V9.99805z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+interface ChevronIconProps extends SVGProps<SVGSVGElement> {
+  direction?: 'left' | 'right'
+}

package/src/ui/components/icons/discord.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function DiscordIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={cn('size-4', className)}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+    </svg>
+  )
+}

package/src/ui/components/icons/eye.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function EyeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 26 17" {...props}>
+      <g clipRule="evenodd" fill="currentColor" fillRule="evenodd">
+        <path d="M2.36308 9.45484H0V7.09067h2.36308zM23.6387 9.45484h2.3631V7.09067h-2.3631zM4.73047 2.36462h3.54519v2.36309H4.73047zM8.27539 0h9.45451v2.36417H8.27539zM8.27539 14.1808h9.45451v2.3641H8.27539zM4.73047 14.1808h3.54519v-2.3631H4.73047zM21.2718 2.36462h-3.5452v2.36309h3.5452zM21.2718 14.1808h-3.5452v-2.3631h3.5452zM2.36719 4.72751h2.36308v2.36308H2.36719zM2.36719 11.8179h2.36308V9.45486H2.36719z" />
+        <path d="M23.6346 4.72751h-2.3631v2.36308h2.3631zM23.6346 11.8179h-2.3631V9.45486h2.3631zM14.7716 6.50014h-3.5452V4.13705h3.5452zm0 0v3.54516h-3.5452v2.3631h3.5452v-2.3631h2.363V6.50014zm-3.5452 0v3.54516H8.86328V6.50014z" />
+      </g>
+    </svg>
+  )
+}

package/src/ui/components/icons/gear.tsx

@@ -0,0 +1,51 @@
+import {
+  isValidElement,
+  type PropsWithChildren,
+  type ReactNode,
+  type SVGProps
+} from 'react'
+
+const VIEWBOX = '0 0 34 38'
+
+const GEAR_PATH =
+  'M10.1249 3.37446h5.0624v3.37446h-5.0624zM23.6262 3.37446h-5.0625v3.37446h5.0625zM18.5637 0v3.37446h-3.3764L15.1877 0zM3.3762 6.74879l6.7487.00013.0003 3.37588h-6.749zM30.3748 6.74879l-6.7486.00013-.0003 3.37588h6.7489zM0 26.9988v-16.874h3.3762l-.00019 16.874zM33.7505 26.9988v-16.874h-3.3757l-.0003 16.874zM10.1248 30.3751H3.37586l.00015-3.3763 6.74879.0003zM23.6262 30.3751h6.749l-.0007-3.3763-6.7483.0003zM15.1873 33.7495h-5.0624l-.0001-3.3744 5.0625-.0001zM18.5637 33.7495h5.0625v-3.3744l-5.0625-.0001zM15.1874 37.1245l-.0001-3.375h3.3764l-.0003 3.375z'
+
+export function GearIcon({
+  children,
+  innerScale = 0.55,
+  ...props
+}: GearIconProps) {
+  const isSvg = isValidElement(children) && children.type === 'svg'
+
+  const viewBox = isSvg
+    ? ((children.props as { viewBox?: string }).viewBox ?? VIEWBOX)
+    : VIEWBOX
+
+  const inner = isSvg
+    ? (children.props as { children?: ReactNode }).children
+    : children
+
+  return (
+    <svg fill="none" viewBox={VIEWBOX} {...props}>
+      <g clipRule="evenodd" fill="currentColor" fillRule="evenodd">
+        <path d={GEAR_PATH} />
+      </g>
+
+      {children && (
+        <svg
+          height={26 * innerScale}
+          width={26 * innerScale}
+          x={17 - (26 * innerScale) / 2}
+          y={19 - (26 * innerScale) / 2}
+          {...{ viewBox }}
+        >
+          {inner}
+        </svg>
+      )}
+    </svg>
+  )
+}
+
+interface GearIconProps extends PropsWithChildren<SVGProps<SVGSVGElement>> {
+  innerScale?: number
+}

package/src/ui/components/icons/github.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function GitHubIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      className={cn('size-4', className)}
+      fill="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
+    </svg>
+  )
+}

package/src/ui/components/icons/hamburger.tsx

@@ -0,0 +1,52 @@
+import type { SVGProps } from 'react'
+
+import { cn } from '../../../utils'
+
+export function HamburgerIcon({
+  className,
+  open = false,
+  ...props
+}: HamburgerIconProps) {
+  return (
+    <svg
+      className={cn('size-5', className)}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeWidth={1.5}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line
+        className="origin-center transition-transform duration-200 ease-out"
+        style={{ transform: open ? 'rotate(45deg)' : 'translateY(-4px)' }}
+        x1={4}
+        x2={20}
+        y1={12}
+        y2={12}
+      />
+
+      <line
+        className="transition-opacity duration-200 ease-out"
+        style={{ opacity: open ? 0 : 1 }}
+        x1={4}
+        x2={20}
+        y1={12}
+        y2={12}
+      />
+
+      <line
+        className="origin-center transition-transform duration-200 ease-out"
+        style={{ transform: open ? 'rotate(-45deg)' : 'translateY(4px)' }}
+        x1={4}
+        x2={20}
+        y1={12}
+        y2={12}
+      />
+    </svg>
+  )
+}
+
+interface HamburgerIconProps extends SVGProps<SVGSVGElement> {
+  open?: boolean
+}

package/src/ui/components/icons/heart.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from 'react'
+
+export function HeartIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 14 12" {...props}>
+      <path
+        d="M13.2 0v5.65714h-1.8857v1.88572H9.42857v1.88571H7.54286v1.88573H5.65714V9.42857H3.77143V7.54286H1.88571V5.65714H0V0h5.65714v1.88571h1.88572V0z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/ui/components/icons/index.ts

@@ -0,0 +1,12 @@
+export * from './arrow'
+export * from './check'
+export * from './chevron'
+export * from './discord'
+export * from './eye'
+export * from './gear'
+export * from './github'
+export * from './hamburger'
+export * from './heart'
+export * from './link'
+export * from './minus'
+export * from './search'

package/src/ui/components/icons/link.tsx

@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react'
+
+export function LinkIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 17 7" {...props}>
+      <path
+        d="M.264191.25061 6.27068.265071V2.26334h3.96512v1.99578l4.0238.00091.043-2.06986-4.0381.07302-.0142-2.01254L16.271.250649l-.0144 6.006381h-5.992l-.0287-1.9981-3.96528-.0002v1.99826l-6.02085-.0001zM6.24063 2.26197l-3.97944-.01436v1.99827l3.97954.01446z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth=".5"
+      />
+    </svg>
+  )
+}

package/src/ui/components/icons/minus.tsx

@@ -0,0 +1,14 @@
+import type { SVGProps } from 'react'
+
+export function MinusIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 12 3" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M12 0 0-5.2e-7-1e-7 2.50075H12z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/ui/components/icons/search.tsx

@@ -0,0 +1,28 @@
+import type { SVGProps } from 'react'
+
+export function SearchIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg fill="none" viewBox="0 0 20 21" {...props}>
+      <path
+        clipRule="evenodd"
+        d="M7.49773 1.6664h6.66637V0H7.49773zM14.1641 15.0001H7.49773v1.6664h6.66637z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+
+      <path
+        clipRule="evenodd"
+        d="M5.8336 3.33278H7.5v-1.6664H5.8336zM15.8359 13.3329h-1.6671v1.6672h1.6671zM4.16877 5.00017h1.66717V3.33301H4.16877zM17.5 11.6665h-1.6664v1.6664H17.5zM4.16406 11.6665V5.00012h-1.6664v6.66638zM17.4977 5.00012v6.66638h1.6664V5.00012z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+
+      <path
+        clipRule="evenodd"
+        d="M17.5 5.00017V3.33301h-1.6664v1.66716zM15.8359 3.33278v-1.6664h-1.6671v1.6664zM15.8359 10.0002V6.6665h-1.6671v3.3337zM14.1641 6.6664V5h-1.6664v1.6664zM5.8335 13.3328v-1.6664H4.16633V15H7.5v-1.6671zM4.16406 16.6664V15h-1.6664v1.6664zM2.5 18.3331v-1.6664H.8336v1.6664z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/ui/components/image-distortion.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import fillerBg from '../../assets/filler-bg0.webp'
+import { Button } from './button'
+import { ImageDistortion } from './image-distortion'
+
+const meta: Meta<typeof ImageDistortion> = {
+  args: { active: true, src: fillerBg.src ?? (fillerBg as unknown as string) },
+  component: ImageDistortion,
+  title: 'Components/ImageDistortion'
+}
+
+export default meta
+
+type Story = StoryObj<typeof ImageDistortion>
+
+function Frame({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      className="bg-background-base relative h-[420px] w-[560px] overflow-hidden border border-current/20"
+      style={{ backgroundColor: 'var(--background)' }}
+    >
+      {children}
+    </div>
+  )
+}
+
+export const Default: Story = {
+  render: args => (
+    <Frame>
+      <ImageDistortion {...args} />
+    </Frame>
+  )
+}
+
+export const Tinted: Story = {
+  args: { tint: '#88ccaa' },
+  render: args => (
+    <Frame>
+      <ImageDistortion {...args} />
+    </Frame>
+  )
+}
+
+export const TintStrength: Story = {
+  render: () => {
+    const src = fillerBg.src ?? (fillerBg as unknown as string)
+
+    return (
+      <div className="grid grid-cols-3 gap-4">
+        {[
+          ['#88ccaa', 'mint'],
+          ['#ccaa88', 'amber'],
+          ['#ff4444', 'fatal']
+        ].map(([tint, label]) => (
+          <div className="flex flex-col gap-2" key={label}>
+            <span className="text-xs uppercase tracking-widest opacity-50">
+              {label}
+            </span>
+
+            <Frame>
+              <ImageDistortion
+                src={src}
+                tint={tint}
+                tintStrength={{ active: 0.55, inactive: 0.25 }}
+              />
+            </Frame>
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+/**
+ * Runs the haptic-distortion effect on a choreographed motion pattern so
+ * the image looks alive without needing a real pointer. Perfect for
+ * screen recordings, posters, and social cuts.
+ */
+export const AutoPlay: Story = {
+  render: () => {
+    const src = fillerBg.src ?? (fillerBg as unknown as string)
+
+    return (
+      <div className="grid grid-cols-3 gap-4">
+        {(['slash', 'gentle', 'aggressive'] as const).map(pattern => (
+          <div className="flex flex-col gap-2" key={pattern}>
+            <span className="text-xs uppercase tracking-widest opacity-50">
+              {pattern}
+            </span>
+
+            <Frame>
+              <ImageDistortion autoPlay={pattern} src={src} tint="#ccaa88" />
+            </Frame>
+          </div>
+        ))}
+      </div>
+    )
+  }
+}
+
+export const ToggleActive: Story = {
+  render: () => {
+    const [active, setActive] = useState(true)
+    const src = fillerBg.src ?? (fillerBg as unknown as string)
+
+    return (
+      <div className="flex flex-col gap-3">
+        <Frame>
+          <ImageDistortion active={active} src={src} tint="#ff4444" />
+        </Frame>
+
+        <Button onClick={() => setActive(v => !v)}>
+          {active ? 'Active' : 'Inactive'}
+        </Button>
+      </div>
+    )
+  }
+}