@otfdashkit/ui 0.1.0

package/src/advanced/toggle-button.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+interface ToggleButtonProps {
+  value: string
+  pressed?: boolean
+  onClick?: () => void
+  disabled?: boolean
+  children: React.ReactNode
+  className?: string
+}
+
+export function ToggleButton({ pressed, onClick, disabled, children, className }: ToggleButtonProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={pressed}
+      disabled={disabled}
+      onClick={onClick}
+      className={cn(
+        'inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors border',
+        'disabled:pointer-events-none disabled:opacity-50',
+        pressed
+          ? 'bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] border-[hsl(var(--primary))]'
+          : 'bg-transparent text-[hsl(var(--foreground))] border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]',
+        className
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+interface ToggleButtonGroupSingle {
+  type?: 'single'
+  value: string
+  onChange: (v: string) => void
+}
+
+interface ToggleButtonGroupMultiple {
+  type: 'multiple'
+  value: string[]
+  onChange: (v: string[]) => void
+}
+
+type ToggleButtonGroupProps = (ToggleButtonGroupSingle | ToggleButtonGroupMultiple) & {
+  children: React.ReactNode
+  className?: string
+}
+
+export function ToggleButtonGroup(props: ToggleButtonGroupProps) {
+  const { children, className } = props
+
+  const isPressed = (val: string) =>
+    props.type === 'multiple' ? (props.value as string[]).includes(val) : props.value === val
+
+  const handleClick = (val: string) => {
+    if (props.type === 'multiple') {
+      const current = props.value as string[]
+      props.onChange(current.includes(val) ? current.filter((v) => v !== val) : [...current, val])
+    } else {
+      ;(props as ToggleButtonGroupSingle).onChange(val)
+    }
+  }
+
+  return (
+    <div className={cn('inline-flex items-center gap-1 rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.4)] p-0.5', className)}>
+      {React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) return child
+        const tb = child as React.ReactElement<ToggleButtonProps>
+        return React.cloneElement(tb, {
+          pressed: isPressed(tb.props.value),
+          onClick: () => handleClick(tb.props.value),
+        })
+      })}
+    </div>
+  )
+}

package/src/advanced/utils/cn.ts

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

package/src/app-shell/AppShell.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export interface AppShellProps {
+  sidebar: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export function AppShell({ sidebar, children, className }: AppShellProps) {
+  return (
+    <div
+      data-slot="app-shell"
+      className={cn('flex h-screen overflow-hidden bg-background', className)}
+    >
+      {sidebar}
+      <main className="flex-1 overflow-auto min-w-0">
+        {children}
+      </main>
+    </div>
+  )
+}

package/src/app-shell/BillingStatus.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import React from 'react'
+import { cn } from '../utils/cn'
+import { useSidebar } from './Sidebar'
+
+export interface BillingStatusProps {
+  plan: string
+  /** e.g. "3 of 5 seats" or "12 days left" */
+  usage?: string
+  /** 0-100 progress percentage */
+  progress?: number
+  onUpgrade?: () => void
+  className?: string
+}
+
+export function BillingStatus({ plan, usage, progress, onUpgrade, className }: BillingStatusProps) {
+  const { collapsed } = useSidebar()
+
+  if (collapsed) return null
+
+  return (
+    <div
+      data-slot="billing-status"
+      className={cn(
+        'rounded-md border border-border bg-card/50 p-2.5 mx-1',
+        className
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+          {plan}
+        </span>
+        {onUpgrade && (
+          <button
+            type="button"
+            onClick={onUpgrade}
+            className={cn(
+              'text-[10px] font-medium text-primary hover:text-primary/80',
+              'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm'
+            )}
+          >
+            Upgrade
+          </button>
+        )}
+      </div>
+      {usage && (
+        <p className="mt-1 text-xs text-muted-foreground leading-tight">{usage}</p>
+      )}
+      {typeof progress === 'number' && (
+        <div className="mt-1.5 h-1 w-full rounded-full bg-muted overflow-hidden">
+          <div
+            className={cn(
+              'h-full rounded-full transition-all duration-300',
+              progress >= 90 ? 'bg-destructive' : 'bg-primary'
+            )}
+            style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+          />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/app-shell/Sidebar.tsx

@@ -0,0 +1,172 @@
+'use client'
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+// ── Context ──────────────────────────────────────────────────────
+interface SidebarContextValue {
+  collapsed: boolean
+  toggleCollapsed: () => void
+}
+const SidebarCtx = createContext<SidebarContextValue>({
+  collapsed: false,
+  toggleCollapsed: () => {},
+})
+export function useSidebar() { return useContext(SidebarCtx) }
+
+// ── Root ─────────────────────────────────────────────────────────
+function SidebarRoot({ children, storageKey = 'sidebar-collapsed', defaultCollapsed = false, className }: {
+  children: React.ReactNode
+  storageKey?: string
+  defaultCollapsed?: boolean
+  className?: string
+}) {
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === 'undefined') return defaultCollapsed
+    try { return JSON.parse(localStorage.getItem(storageKey) ?? String(defaultCollapsed)) } catch { return defaultCollapsed }
+  })
+
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((v: boolean) => {
+      const next = !v
+      try { localStorage.setItem(storageKey, JSON.stringify(next)) } catch {}
+      return next
+    })
+  }, [storageKey])
+
+  return (
+    <SidebarCtx.Provider value={{ collapsed, toggleCollapsed }}>
+      <aside
+        data-slot="sidebar"
+        data-collapsed={collapsed || undefined}
+        className={cn(
+          'relative flex flex-col h-full bg-card border-r border-border',
+          'transition-[width] duration-200',
+          collapsed ? 'w-[52px]' : 'w-[220px]',
+          className
+        )}
+      >
+        {children}
+        {/* Collapse toggle */}
+        <button
+          onClick={toggleCollapsed}
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+          className={cn(
+            'absolute -right-3 top-6 z-10',
+            'flex h-6 w-6 items-center justify-center',
+            'rounded-full border border-border bg-card shadow-sm',
+            'text-muted-foreground hover:text-foreground hover:bg-accent',
+            'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+          )}
+        >
+          {collapsed
+            ? <ChevronRight className="h-3 w-3" />
+            : <ChevronLeft className="h-3 w-3" />}
+        </button>
+      </aside>
+    </SidebarCtx.Provider>
+  )
+}
+
+// ── Header ───────────────────────────────────────────────────────
+function SidebarHeader({ children, className }: { children: React.ReactNode; className?: string }) {
+  const { collapsed } = useSidebar()
+  return (
+    <div
+      data-slot="sidebar-header"
+      className={cn(
+        'flex items-center h-14 shrink-0 border-b border-border overflow-hidden',
+        collapsed ? 'justify-center px-0' : 'px-3',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+// ── Nav ──────────────────────────────────────────────────────────
+function SidebarNav({ children, className }: { children: React.ReactNode; className?: string }) {
+  return (
+    <nav data-slot="sidebar-nav" className={cn('flex-1 overflow-y-auto overflow-x-hidden py-2 px-2 space-y-0.5', className)}>
+      {children}
+    </nav>
+  )
+}
+
+// ── Item ─────────────────────────────────────────────────────────
+export interface SidebarItemProps {
+  icon?: React.ReactNode
+  label: string
+  href?: string
+  active?: boolean
+  badge?: React.ReactNode
+  onClick?: () => void
+  className?: string
+}
+function SidebarItem({ icon, label, href, active, badge, onClick, className }: SidebarItemProps) {
+  const { collapsed } = useSidebar()
+  const Tag = href ? 'a' : 'button'
+  return (
+    <Tag
+      href={href as string}
+      onClick={onClick}
+      title={collapsed ? label : undefined}
+      data-slot="sidebar-item"
+      data-active={active || undefined}
+      className={cn(
+        'flex items-center gap-2.5 w-full rounded-md py-1.5',
+        collapsed ? 'justify-center px-0' : 'px-2',
+        'text-sm font-medium transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        active
+          ? 'bg-accent text-accent-foreground'
+          : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground',
+        className
+      )}
+    >
+      {icon && <span className="flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4">{icon}</span>}
+      {!collapsed && <span className="min-w-0 truncate">{label}</span>}
+      {!collapsed && badge && <span className="ml-auto shrink-0">{badge}</span>}
+    </Tag>
+  )
+}
+
+// ── Footer ───────────────────────────────────────────────────────
+function SidebarFooter({ children, className }: { children: React.ReactNode; className?: string }) {
+  const { collapsed } = useSidebar()
+  return (
+    <div
+      data-slot="sidebar-footer"
+      className={cn(
+        'shrink-0 border-t border-border py-2',
+        collapsed ? 'flex flex-col items-center px-0' : 'px-2',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+// ── Separator ────────────────────────────────────────────────────
+function SidebarSeparator({ label, className }: { label?: string; className?: string }) {
+  const { collapsed } = useSidebar()
+  return (
+    <div data-slot="sidebar-separator" className={cn('px-2 pt-3 pb-1', className)}>
+      {!collapsed && label && (
+        <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/60 px-1">{label}</p>
+      )}
+      {(collapsed || !label) && <hr className="border-border" />}
+    </div>
+  )
+}
+
+// ── Namespace export ─────────────────────────────────────────────
+export const Sidebar = Object.assign(SidebarRoot, {
+  Header: SidebarHeader,
+  Nav: SidebarNav,
+  Item: SidebarItem,
+  Footer: SidebarFooter,
+  Separator: SidebarSeparator,
+})

package/src/app-shell/SidebarResizer.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { cn } from '../utils/cn'
+
+export interface SidebarResizerProps {
+  /** Min width in px */
+  min?: number
+  /** Max width in px */
+  max?: number
+  /** Default width in px */
+  defaultWidth?: number
+  /** localStorage key for persisting width */
+  storageKey?: string
+  /** Called when width changes */
+  onWidthChange?: (width: number) => void
+  /** CSS class for the resize handle */
+  className?: string
+}
+
+/**
+ * Sidebar drag-to-resize handle. Place as a sibling or absolute child on the trailing edge of the sidebar.
+ * Uses pointer capture for smooth dragging.
+ */
+export function SidebarResizer({
+  min = 180,
+  max = 400,
+  defaultWidth = 220,
+  storageKey = 'sidebar-width',
+  onWidthChange,
+  className,
+}: SidebarResizerProps) {
+  const [isDragging, setIsDragging] = useState(false)
+  const startX = useRef(0)
+  const startWidth = useRef(defaultWidth)
+
+  // Read persisted width on mount
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    try {
+      const stored = localStorage.getItem(storageKey)
+      if (stored) {
+        const w = Math.min(max, Math.max(min, Number(stored)))
+        onWidthChange?.(w)
+        startWidth.current = w
+      }
+    } catch { /* noop */ }
+  }, [storageKey, min, max, onWidthChange])
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      e.currentTarget.setPointerCapture(e.pointerId)
+      setIsDragging(true)
+      startX.current = e.clientX
+      // Read current sidebar width from the parent
+      const sidebar = e.currentTarget.closest('[data-slot="sidebar"]')
+      if (sidebar) {
+        startWidth.current = sidebar.getBoundingClientRect().width
+      }
+    },
+    []
+  )
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!isDragging) return
+      const delta = e.clientX - startX.current
+      const newWidth = Math.min(max, Math.max(min, startWidth.current + delta))
+      const sidebar = e.currentTarget.closest('[data-slot="sidebar"]') as HTMLElement | null
+      if (sidebar) {
+        sidebar.style.width = `${newWidth}px`
+      }
+      onWidthChange?.(newWidth)
+    },
+    [isDragging, min, max, onWidthChange]
+  )
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!isDragging) return
+      setIsDragging(false)
+      e.currentTarget.releasePointerCapture(e.pointerId)
+      // Persist final width
+      const sidebar = e.currentTarget.closest('[data-slot="sidebar"]') as HTMLElement | null
+      if (sidebar) {
+        const finalWidth = sidebar.getBoundingClientRect().width
+        try { localStorage.setItem(storageKey, String(Math.round(finalWidth))) } catch { /* noop */ }
+      }
+    },
+    [isDragging, storageKey]
+  )
+
+  return (
+    <div
+      data-slot="sidebar-resizer"
+      data-dragging={isDragging || undefined}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      className={cn(
+        'absolute top-0 right-0 z-20 h-full w-1 cursor-col-resize',
+        'hover:bg-primary/20 transition-colors',
+        isDragging && 'bg-primary/30',
+        className
+      )}
+    />
+  )
+}

package/src/app-shell/SortableNav.tsx

@@ -0,0 +1,122 @@
+'use client'
+
+import React, { useState } from 'react'
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { GripVertical } from 'lucide-react'
+import { cn } from '../utils/cn'
+import { useSidebar, type SidebarItemProps } from './Sidebar'
+
+// ── Types ──────────────────────────────────────────────────────
+export interface SortableNavItem extends SidebarItemProps {
+  id: string
+}
+
+export interface SortableNavProps {
+  items: SortableNavItem[]
+  onReorder: (items: SortableNavItem[]) => void
+  className?: string
+}
+
+// ── Sortable item ──────────────────────────────────────────────
+function SortableNavItemWrapper({ item }: { item: SortableNavItem }) {
+  const { collapsed } = useSidebar()
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: item.id,
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  const Tag = item.href ? 'a' : 'button'
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      data-slot="sortable-nav-item"
+      data-dragging={isDragging || undefined}
+      className={cn(
+        'group flex items-center gap-1 rounded-md',
+        isDragging && 'opacity-50 z-50',
+      )}
+    >
+      {!collapsed && (
+        <span
+          {...attributes}
+          {...listeners}
+          className={cn(
+            'flex h-4 w-4 shrink-0 items-center justify-center cursor-grab',
+            'opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground',
+          )}
+          aria-label="Drag to reorder"
+        >
+          <GripVertical className="h-3 w-3" />
+        </span>
+      )}
+      <Tag
+        href={item.href as string}
+        onClick={item.onClick}
+        title={collapsed ? item.label : undefined}
+        data-active={item.active || undefined}
+        className={cn(
+          'flex items-center gap-2.5 flex-1 rounded-md px-2 py-1.5',
+          'text-sm font-medium transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          item.active
+            ? 'bg-accent text-accent-foreground'
+            : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground',
+        )}
+      >
+        {item.icon && <span className="h-4 w-4 shrink-0 [&>svg]:h-4 [&>svg]:w-4">{item.icon}</span>}
+        {!collapsed && <span className="flex-1 truncate">{item.label}</span>}
+        {!collapsed && item.badge && <span className="shrink-0">{item.badge}</span>}
+      </Tag>
+    </div>
+  )
+}
+
+// ── Container ──────────────────────────────────────────────────
+export function SortableNav({ items, onReorder, className }: SortableNavProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  )
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over || active.id === over.id) return
+    const oldIndex = items.findIndex((i) => i.id === active.id)
+    const newIndex = items.findIndex((i) => i.id === over.id)
+    onReorder(arrayMove(items, oldIndex, newIndex))
+  }
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={items.map((i) => i.id)} strategy={verticalListSortingStrategy}>
+        <nav data-slot="sortable-nav" className={cn('space-y-0.5 px-2 py-1', className)}>
+          {items.map((item) => (
+            <SortableNavItemWrapper key={item.id} item={item} />
+          ))}
+        </nav>
+      </SortableContext>
+    </DndContext>
+  )
+}