@otfdashkit/ui 0.1.0

package/src/primitives/table.tsx

@@ -0,0 +1,121 @@
+// @ts-nocheck
+import * as React from "react"
+
+import { cn } from "../utils/cn"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/primitives/tabs.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { cn } from '../utils/cn'
+
+export const Tabs = TabsPrimitive.Root
+
+export const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex h-9 items-center justify-center rounded-lg bg-[hsl(var(--muted))] p-1 text-[hsl(var(--muted-foreground))]',
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+export const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-[hsl(var(--background))] transition-all',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-[hsl(var(--background))] data-[state=active]:text-[hsl(var(--foreground))] data-[state=active]:shadow',
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+export const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-[hsl(var(--background))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-2',
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName

package/src/primitives/textarea.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      className={cn(
+        'flex min-h-[80px] w-full rounded-md border border-[hsl(var(--input))] bg-transparent px-3 py-2 text-sm shadow-sm',
+        'placeholder:text-[hsl(var(--muted-foreground))]',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'resize-none',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+)
+Textarea.displayName = 'Textarea'

package/src/primitives/texture-card.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { cn } from '../utils/cn'
+
+// TextureCard — 4-ring nested surface (OTF signature component)
+export interface TextureCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  padding?: boolean
+}
+
+export const TextureCard = React.forwardRef<HTMLDivElement, TextureCardProps>(
+  ({ children, className, padding = true, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="texture-card"
+      className={cn(
+        'border border-border/40 rounded-[var(--radius)] p-[3px]',
+        'bg-gradient-to-b from-card to-card/90',
+        className
+      )}
+      {...props}
+    >
+      <div className="border border-border/20 rounded-[calc(var(--radius)-2px)] p-[2px]">
+        <div className="border border-border/10 rounded-[calc(var(--radius)-4px)] p-[1px]">
+          <div className={cn('bg-card rounded-[calc(var(--radius)-6px)]', padding && 'p-6')}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+)
+TextureCard.displayName = 'TextureCard'
+
+export const TextureCardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col gap-1.5 mb-4', className)} {...props} />
+  )
+)
+TextureCardHeader.displayName = 'TextureCardHeader'
+
+export const TextureCardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('font-semibold text-base leading-tight tracking-tight text-foreground', className)} {...props} />
+  )
+)
+TextureCardTitle.displayName = 'TextureCardTitle'
+
+export const TextureCardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+)
+TextureCardDescription.displayName = 'TextureCardDescription'

package/src/primitives/toggle-group.tsx

@@ -0,0 +1,62 @@
+// @ts-nocheck
+"use client"
+
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils/cn"
+import { toggleVariants } from "./toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/src/primitives/toggle.tsx

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils/cn"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/src/primitives/tooltip.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '../utils/cn'
+
+export const TooltipProvider: typeof TooltipPrimitive.Provider = TooltipPrimitive.Provider
+export const Tooltip: typeof TooltipPrimitive.Root = TooltipPrimitive.Root
+export const TooltipTrigger: typeof TooltipPrimitive.Trigger = TooltipPrimitive.Trigger
+
+export const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-md bg-[hsl(var(--primary))] px-3 py-1.5 text-xs text-[hsl(var(--primary-foreground))] shadow-md',
+        'animate-in fade-in-0 zoom-in-95',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName

package/src/primitives/utils/cn.ts

@@ -0,0 +1 @@
+export { cn } from '../../utils/cn'

package/src/provider/otf-ui-provider.tsx

@@ -0,0 +1,66 @@
+import React, { createContext, useContext, useEffect, useState } from 'react'
+
+export type Theme = 'linear' | 'glass' | 'midnight' | 'minimal'
+export type DarkMode = 'light' | 'dark' | 'system'
+
+interface OtfUIContextValue {
+  theme: Theme
+  darkMode: DarkMode
+  resolvedDark: boolean
+  setTheme: (t: Theme) => void
+  setDarkMode: (d: DarkMode) => void
+}
+
+const OtfUIContext = createContext<OtfUIContextValue | null>(null)
+
+export function useOtfUI() {
+  const ctx = useContext(OtfUIContext)
+  if (!ctx) throw new Error('useOtfUI must be used within <OtfUIProvider>')
+  return ctx
+}
+
+interface OtfUIProviderProps {
+  children: React.ReactNode
+  theme?: Theme
+  darkMode?: DarkMode
+}
+
+export function OtfUIProvider({
+  children,
+  theme: initialTheme = 'linear',
+  darkMode: initialDarkMode = 'system',
+}: OtfUIProviderProps) {
+  const [theme, setTheme] = useState<Theme>(initialTheme)
+  const [darkMode, setDarkMode] = useState<DarkMode>(initialDarkMode)
+  const [resolvedDark, setResolvedDark] = useState(false)
+
+  useEffect(() => {
+    const update = () => {
+      const isDark =
+        darkMode === 'dark' ||
+        (darkMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+      setResolvedDark(isDark)
+    }
+
+    update()
+
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    mq.addEventListener('change', update)
+    return () => mq.removeEventListener('change', update)
+  }, [darkMode])
+
+  useEffect(() => {
+    const root = document.documentElement
+    // Remove any prior theme class so we apply exactly one
+    root.classList.remove('theme-linear', 'theme-glass', 'theme-midnight', 'theme-minimal')
+    root.classList.remove('dark', 'light')
+    root.classList.add(`theme-${theme}`)
+    root.classList.add(resolvedDark ? 'dark' : 'light')
+  }, [theme, resolvedDark])
+
+  return (
+    <OtfUIContext.Provider value={{ theme, darkMode, resolvedDark, setTheme, setDarkMode }}>
+      {children}
+    </OtfUIContext.Provider>
+  )
+}

package/src/styles.css

@@ -0,0 +1,6 @@
+/* @otfdashkit/ui — import this file in your app's index.css to get all themes */
+@import './themes/base.css';
+@import './themes/linear.css';
+@import './themes/glass.css';
+@import './themes/midnight.css';
+@import './themes/minimal.css';

package/src/text/AnimatedNumber.tsx

@@ -0,0 +1,157 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { cn } from '../utils/cn'
+
+export interface AnimatedNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Target value to animate to */
+  value: number
+  /** Starting value (default 0) */
+  from?: number
+  /** Animation duration in ms (default 1200) */
+  duration?: number
+  /** Decimal places (default 0) */
+  decimals?: number
+  /** Prefix string e.g. "$" */
+  prefix?: string
+  /** Suffix string e.g. "%" or "k" */
+  suffix?: string
+  /** Easing function (default easeOutExpo) */
+  easing?: (t: number) => number
+  /** Whether to start animating immediately or wait for intersection */
+  autoStart?: boolean
+  /** Locale for number formatting */
+  locale?: string
+  /** Format with locale grouping (e.g. 1,234) */
+  format?: boolean
+}
+
+function easeOutExpo(t: number): number {
+  return t === 1 ? 1 : 1 - Math.pow(2, -10 * t)
+}
+
+function formatNumber(
+  value: number,
+  decimals: number,
+  format: boolean,
+  locale?: string
+): string {
+  if (format) {
+    return new Intl.NumberFormat(locale, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    }).format(value)
+  }
+  return decimals > 0 ? value.toFixed(decimals) : String(Math.round(value))
+}
+
+export const AnimatedNumber = React.forwardRef<HTMLSpanElement, AnimatedNumberProps>(
+  (
+    {
+      value,
+      from = 0,
+      duration = 1200,
+      decimals = 0,
+      prefix = '',
+      suffix = '',
+      easing = easeOutExpo,
+      autoStart = true,
+      locale,
+      format = true,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [displayed, setDisplayed] = useState(autoStart ? from : value)
+    const rafRef = useRef<number | null>(null)
+    const startTimeRef = useRef<number | null>(null)
+    const containerRef = useRef<HTMLSpanElement | null>(null)
+    const hasStarted = useRef(false)
+
+    const runAnimation = React.useCallback(
+      (startFrom: number) => {
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+        startTimeRef.current = null
+        hasStarted.current = true
+
+        const step = (timestamp: number) => {
+          if (startTimeRef.current === null) startTimeRef.current = timestamp
+          const elapsed = timestamp - startTimeRef.current
+          const progress = Math.min(elapsed / duration, 1)
+          const easedProgress = easing(progress)
+          const current = startFrom + (value - startFrom) * easedProgress
+          setDisplayed(current)
+
+          if (progress < 1) {
+            rafRef.current = requestAnimationFrame(step)
+          } else {
+            setDisplayed(value)
+            rafRef.current = null
+          }
+        }
+
+        rafRef.current = requestAnimationFrame(step)
+      },
+      [value, duration, easing]
+    )
+
+    // Start immediately or on intersection
+    useEffect(() => {
+      if (!autoStart) return undefined
+
+      if (typeof IntersectionObserver !== 'undefined') {
+        const el = containerRef.current
+        if (!el) return undefined
+        const observer = new IntersectionObserver(
+          (entries) => {
+            if (entries[0]?.isIntersecting && !hasStarted.current) {
+              runAnimation(from)
+              observer.disconnect()
+            }
+          },
+          { threshold: 0.2 }
+        )
+        observer.observe(el)
+        return () => observer.disconnect()
+      } else {
+        runAnimation(from)
+        return undefined
+      }
+    }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+    // Re-animate when value changes after first mount
+    useEffect(() => {
+      if (!hasStarted.current) return
+      runAnimation(displayed)
+    }, [value]) // eslint-disable-line react-hooks/exhaustive-deps
+
+    useEffect(() => {
+      return () => {
+        if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
+      }
+    }, [])
+
+    const setRef = (el: HTMLSpanElement | null) => {
+      containerRef.current = el
+      if (typeof ref === 'function') ref(el)
+      else if (ref) (ref as React.MutableRefObject<HTMLSpanElement | null>).current = el
+    }
+
+    return (
+      <span
+        ref={setRef}
+        data-slot="animated-number"
+        className={cn('tabular-nums', className)}
+        aria-live="polite"
+        aria-atomic="true"
+        {...props}
+      >
+        {prefix}
+        {formatNumber(displayed, decimals, format, locale)}
+        {suffix}
+      </span>
+    )
+  }
+)
+AnimatedNumber.displayName = 'AnimatedNumber'

package/src/text/Body.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../utils/cn'
+
+const bodyVariants = cva('font-sans', {
+  variants: {
+    size: {
+      lg: 'text-lg leading-relaxed',
+      md: 'text-base leading-relaxed',
+      sm: 'text-sm leading-relaxed',
+      xs: 'text-xs leading-normal',
+    },
+    tone: {
+      default: 'text-foreground',
+      muted:   'text-muted-foreground',
+      subtle:  'text-muted-foreground/75',
+    },
+    weight: {
+      normal:   'font-normal',
+      medium:   'font-medium',
+      semibold: 'font-semibold',
+    },
+  },
+  defaultVariants: { size: 'md', tone: 'default', weight: 'normal' },
+})
+
+type BodyTag = 'p' | 'span' | 'div'
+
+export interface BodyProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof bodyVariants> {
+  as?: BodyTag
+}
+
+export const Body = React.forwardRef<HTMLElement, BodyProps>(
+  ({ as: Tag = 'p', size, tone, weight, className, ...props }, ref) => {
+    return React.createElement(Tag, {
+      ref,
+      'data-slot': 'body',
+      className: cn(bodyVariants({ size, tone, weight }), className),
+      ...props,
+    })
+  }
+)
+Body.displayName = 'Body'