@otfdashkit/ui 0.1.0

package/src/layouts/sidebar.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+const SidebarCtx = React.createContext<{ collapsed: boolean }>({ collapsed: false })
+const useSidebarCtx = () => React.useContext(SidebarCtx)
+
+const makeSlot = (name: string, cls: string) => {
+  const C = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...p }, ref) => <div ref={ref} className={cn(cls, className)} {...p} />
+  )
+  C.displayName = name
+  return C
+}
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  collapsed?: boolean
+  onCollapse?: () => void
+  width?: string
+}
+
+export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
+  ({ className, collapsed = false, onCollapse, width = '240px', style, children, ...props }, ref) => (
+    <SidebarCtx.Provider value={{ collapsed }}>
+      <div
+        ref={ref}
+        className={cn('flex flex-col h-full bg-[hsl(var(--card))] border-r border-[hsl(var(--border))] transition-all duration-200 overflow-hidden', className)}
+        style={{ width: collapsed ? '48px' : width, ...style }}
+        {...props}
+      >
+        <div className="flex-1 overflow-y-auto overflow-x-hidden">{children}</div>
+        {onCollapse && (
+          <button
+            onClick={onCollapse}
+            className="flex items-center justify-center h-10 w-full border-t border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors shrink-0"
+          >
+            {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+          </button>
+        )}
+      </div>
+    </SidebarCtx.Provider>
+  )
+)
+Sidebar.displayName = 'Sidebar'
+
+export const SidebarHeader = makeSlot('SidebarHeader', 'px-3 py-4 border-b border-[hsl(var(--border))] shrink-0')
+export const SidebarContent = makeSlot('SidebarContent', 'flex-1 overflow-y-auto py-2')
+export const SidebarFooter = makeSlot('SidebarFooter', 'px-3 py-3 border-t border-[hsl(var(--border))] shrink-0')
+export const SidebarGroup = makeSlot('SidebarGroup', 'mb-2')
+export const SidebarSeparator = makeSlot('SidebarSeparator', 'h-px bg-[hsl(var(--border))] mx-3 my-2')
+
+export const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { collapsed } = useSidebarCtx()
+    return (
+      <div
+        ref={ref}
+        className={cn('px-3 py-1 text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider', collapsed && 'sr-only', className)}
+        {...props}
+      />
+    )
+  }
+)
+SidebarGroupLabel.displayName = 'SidebarGroupLabel'
+
+export interface SidebarItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+  icon?: React.ReactNode
+  label: string
+  active?: boolean
+  href?: string
+  badge?: string | number
+  onClick?: React.MouseEventHandler<HTMLElement>
+}
+
+export const SidebarItem = React.forwardRef<HTMLDivElement, SidebarItemProps>(
+  ({ className, icon, label, active, href, badge, onClick, ...props }, ref) => {
+    const { collapsed } = useSidebarCtx()
+    const cls = cn(
+      'flex items-center gap-2.5 px-3 py-2 rounded-md cursor-pointer transition-colors mx-1 text-sm',
+      active
+        ? 'bg-[hsl(var(--accent))] text-[hsl(var(--foreground))] font-medium'
+        : 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))]',
+      collapsed && 'justify-center px-0 mx-2',
+      className
+    )
+    const inner = (
+      <>
+        {icon && <span className="shrink-0 flex items-center justify-center w-4 h-4">{icon}</span>}
+        {!collapsed && <span className="flex-1 min-w-0 truncate">{label}</span>}
+        {!collapsed && badge !== undefined && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-[hsl(var(--primary))] bg-opacity-10 text-[hsl(var(--primary))] shrink-0 font-medium">{badge}</span>
+        )}
+      </>
+    )
+    if (href) return <a href={href} className={cls} onClick={onClick}>{inner}</a>
+    return <div ref={ref} role="button" tabIndex={0} className={cls} onClick={onClick} {...props}>{inner}</div>
+  }
+)
+SidebarItem.displayName = 'SidebarItem'

package/src/layouts/split-page.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export const SplitPage = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex h-full w-full overflow-hidden', className)} {...props} />
+  )
+)
+SplitPage.displayName = 'SplitPage'
+
+export interface SplitPageListProps extends React.HTMLAttributes<HTMLDivElement> {
+  width?: string
+}
+
+export const SplitPageList = React.forwardRef<HTMLDivElement, SplitPageListProps>(
+  ({ className, width = '320px', style, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('shrink-0 h-full overflow-auto border-r border-[hsl(var(--border))]', className)}
+      style={{ width, ...style }}
+      {...props}
+    />
+  )
+)
+SplitPageList.displayName = 'SplitPageList'
+
+export const SplitPageDetail = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex-1 min-w-0 h-full overflow-auto', className)} {...props} />
+  )
+)
+SplitPageDetail.displayName = 'SplitPageDetail'

package/src/layouts/stack.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+type Direction = 'row' | 'col' | 'row-reverse' | 'col-reverse'
+type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+
+const dirMap: Record<Direction, string> = {
+  row: 'flex-row', col: 'flex-col',
+  'row-reverse': 'flex-row-reverse', 'col-reverse': 'flex-col-reverse',
+}
+const alignMap: Record<Align, string> = {
+  start: 'items-start', center: 'items-center', end: 'items-end',
+  stretch: 'items-stretch', baseline: 'items-baseline',
+}
+const justifyMap: Record<Justify, string> = {
+  start: 'justify-start', center: 'justify-center', end: 'justify-end',
+  between: 'justify-between', around: 'justify-around', evenly: 'justify-evenly',
+}
+
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  gap?: number
+  direction?: Direction
+  align?: Align
+  justify?: Justify
+  wrap?: boolean
+}
+
+export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
+  ({ className, gap, direction = 'col', align, justify, wrap, style, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex',
+        dirMap[direction],
+        align && alignMap[align],
+        justify && justifyMap[justify],
+        wrap && 'flex-wrap',
+        className
+      )}
+      style={{ ...(gap !== undefined ? { gap: `${gap * 4}px` } : {}), ...style }}
+      {...props}
+    />
+  )
+)
+Stack.displayName = 'Stack'
+
+export const HStack = React.forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
+  (props, ref) => <Stack ref={ref} direction="row" {...props} />
+)
+HStack.displayName = 'HStack'
+
+export const VStack = React.forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
+  (props, ref) => <Stack ref={ref} direction="col" {...props} />
+)
+VStack.displayName = 'VStack'

package/src/layouts/utils/cn.ts

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

package/src/motion/FadeIn.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { motion, type HTMLMotionProps, type Transition } from 'motion/react'
+import React from 'react'
+import { DEFAULT_TRANSITION, MOTION_PRESETS } from './presets'
+
+export interface FadeInProps extends HTMLMotionProps<'div'> {
+  delay?: number
+  duration?: number
+  children: React.ReactNode
+}
+
+export const FadeIn = React.forwardRef<HTMLDivElement, FadeInProps>(
+  ({ delay = 0, duration, children, ...props }, ref) => {
+    const transition: Transition = {
+      ...DEFAULT_TRANSITION,
+      duration: duration ?? DEFAULT_TRANSITION.duration,
+      delay,
+    }
+    return (
+      <motion.div
+        ref={ref}
+        initial={MOTION_PRESETS.fadeIn.initial}
+        animate={MOTION_PRESETS.fadeIn.animate}
+        exit={MOTION_PRESETS.fadeIn.exit}
+        transition={transition}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+FadeIn.displayName = 'FadeIn'

package/src/motion/Morph.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { motion, type HTMLMotionProps } from 'motion/react'
+import React from 'react'
+
+export interface MorphProps extends HTMLMotionProps<'div'> {
+  layoutId: string
+  children: React.ReactNode
+}
+
+export const Morph = React.forwardRef<HTMLDivElement, MorphProps>(
+  ({ layoutId, children, ...props }, ref) => (
+    <motion.div ref={ref} layoutId={layoutId} layout {...props}>
+      {children}
+    </motion.div>
+  )
+)
+Morph.displayName = 'Morph'

package/src/motion/Parallax.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { motion, useScroll, useTransform, type HTMLMotionProps } from 'motion/react'
+import React, { useRef } from 'react'
+
+export interface ParallaxProps extends HTMLMotionProps<'div'> {
+  /** Parallax offset in pixels — positive = moves up slower, negative = moves down slower */
+  offset?: number
+  /** Custom scroll container ref (defaults to viewport) */
+  scrollRef?: React.RefObject<HTMLElement | null>
+  children: React.ReactNode
+}
+
+export const Parallax = React.forwardRef<HTMLDivElement, ParallaxProps>(
+  ({ offset = 50, scrollRef, children, style, ...props }, ref) => {
+    const innerRef = useRef<HTMLDivElement>(null)
+    const resolvedRef = (ref as React.RefObject<HTMLDivElement>) ?? innerRef
+
+    const { scrollYProgress } = useScroll({
+      target: resolvedRef,
+      container: scrollRef ?? undefined,
+      offset: ['start end', 'end start'],
+    })
+
+    const y = useTransform(scrollYProgress, [0, 1], [offset, -offset])
+
+    return (
+      <motion.div
+        ref={resolvedRef}
+        style={{ y, ...style }}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+Parallax.displayName = 'Parallax'

package/src/motion/Reveal.tsx

@@ -0,0 +1,32 @@
+'use client'
+import { motion, useInView, type Transition } from 'motion/react'
+import React, { useRef } from 'react'
+import { type MotionPreset, MOTION_PRESETS, DEFAULT_TRANSITION } from './presets'
+
+export interface RevealProps {
+  preset?: MotionPreset
+  delay?: number
+  once?: boolean
+  children: React.ReactNode
+  className?: string
+}
+
+export function Reveal({ preset = 'fadeIn', delay = 0, once = true, children, className }: RevealProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once })
+  const variants = MOTION_PRESETS[preset]
+  const transition: Transition = { ...DEFAULT_TRANSITION, delay }
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={variants.initial}
+      animate={isInView ? variants.animate : variants.initial}
+      exit={variants.exit}
+      transition={transition}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  )
+}

package/src/motion/Ripple.tsx

@@ -0,0 +1,78 @@
+'use client'
+import { motion, type HTMLMotionProps, type Transition } from 'motion/react'
+import React, { useState, useCallback } from 'react'
+
+export interface RippleProps extends Omit<HTMLMotionProps<'div'>, 'onPointerDown'> {
+  /** Ripple color — defaults to current text color at 20% opacity */
+  color?: string
+  /** Duration in seconds */
+  duration?: number
+  children: React.ReactNode
+}
+
+interface RippleInstance {
+  key: number
+  x: number
+  y: number
+  size: number
+}
+
+let rippleCounter = 0
+
+export const Ripple = React.forwardRef<HTMLDivElement, RippleProps>(
+  ({ color = 'currentColor', duration = 0.6, children, style, ...props }, ref) => {
+    const [ripples, setRipples] = useState<RippleInstance[]>([])
+
+    const handlePointerDown = useCallback(
+      (e: React.PointerEvent<HTMLDivElement>) => {
+        const rect = e.currentTarget.getBoundingClientRect()
+        const x = e.clientX - rect.left
+        const y = e.clientY - rect.top
+        const size = Math.max(rect.width, rect.height) * 2
+        const key = ++rippleCounter
+        setRipples((prev) => [...prev, { key, x, y, size }])
+      },
+      []
+    )
+
+    const removeRipple = useCallback((key: number) => {
+      setRipples((prev) => prev.filter((r) => r.key !== key))
+    }, [])
+
+    const rippleTransition: Transition = {
+      duration,
+      ease: [0.16, 1, 0.3, 1],
+    }
+
+    return (
+      <motion.div
+        ref={ref}
+        onPointerDown={handlePointerDown}
+        style={{ position: 'relative', overflow: 'hidden', ...style }}
+        {...props}
+      >
+        {children}
+        {ripples.map((ripple) => (
+          <motion.span
+            key={ripple.key}
+            initial={{ scale: 0, opacity: 0.35 }}
+            animate={{ scale: 1, opacity: 0 }}
+            transition={rippleTransition}
+            onAnimationComplete={() => removeRipple(ripple.key)}
+            style={{
+              position: 'absolute',
+              left: ripple.x - ripple.size / 2,
+              top: ripple.y - ripple.size / 2,
+              width: ripple.size,
+              height: ripple.size,
+              borderRadius: '50%',
+              backgroundColor: color,
+              pointerEvents: 'none',
+            }}
+          />
+        ))}
+      </motion.div>
+    )
+  }
+)
+Ripple.displayName = 'Ripple'

package/src/motion/ScaleIn.tsx

@@ -0,0 +1,33 @@
+'use client'
+import { motion, type HTMLMotionProps, type Transition } from 'motion/react'
+import React from 'react'
+import { DEFAULT_TRANSITION, MOTION_PRESETS } from './presets'
+
+export interface ScaleInProps extends HTMLMotionProps<'div'> {
+  delay?: number
+  duration?: number
+  children: React.ReactNode
+}
+
+export const ScaleIn = React.forwardRef<HTMLDivElement, ScaleInProps>(
+  ({ delay = 0, duration, children, ...props }, ref) => {
+    const transition: Transition = {
+      ...DEFAULT_TRANSITION,
+      duration: duration ?? DEFAULT_TRANSITION.duration,
+      delay,
+    }
+    return (
+      <motion.div
+        ref={ref}
+        initial={MOTION_PRESETS.scaleIn.initial}
+        animate={MOTION_PRESETS.scaleIn.animate}
+        exit={MOTION_PRESETS.scaleIn.exit}
+        transition={transition}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+ScaleIn.displayName = 'ScaleIn'

package/src/motion/SlideIn.tsx

@@ -0,0 +1,42 @@
+'use client'
+import { motion, type HTMLMotionProps, type Transition } from 'motion/react'
+import React from 'react'
+import { DEFAULT_TRANSITION, MOTION_PRESETS, type MotionPreset } from './presets'
+
+export interface SlideInProps extends HTMLMotionProps<'div'> {
+  direction?: 'up' | 'down' | 'left' | 'right'
+  delay?: number
+  duration?: number
+  children: React.ReactNode
+}
+
+const DIRECTION_PRESET_MAP: Record<'up' | 'down' | 'left' | 'right', MotionPreset> = {
+  up: 'slideUp',
+  down: 'slideDown',
+  left: 'slideLeft',
+  right: 'slideRight',
+}
+
+export const SlideIn = React.forwardRef<HTMLDivElement, SlideInProps>(
+  ({ direction = 'up', delay = 0, duration, children, ...props }, ref) => {
+    const preset = MOTION_PRESETS[DIRECTION_PRESET_MAP[direction]]
+    const transition: Transition = {
+      ...DEFAULT_TRANSITION,
+      duration: duration ?? DEFAULT_TRANSITION.duration,
+      delay,
+    }
+    return (
+      <motion.div
+        ref={ref}
+        initial={preset.initial}
+        animate={preset.animate}
+        exit={preset.exit}
+        transition={transition}
+        {...props}
+      >
+        {children}
+      </motion.div>
+    )
+  }
+)
+SlideIn.displayName = 'SlideIn'

package/src/motion/Stagger.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { motion, useInView, type Variants } from 'motion/react'
+import React, { useRef } from 'react'
+import { MOTION_PRESETS } from './presets'
+
+export interface StaggerProps {
+  staggerDelay?: number
+  preset?: 'fadeIn' | 'slideUp' | 'scaleIn'
+  children: React.ReactNode
+  className?: string
+  once?: boolean
+}
+
+export function Stagger({ staggerDelay = 0.05, preset = 'fadeIn', children, className, once = true }: StaggerProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, { once })
+  const childVariants = MOTION_PRESETS[preset]
+
+  const containerVariants: Variants = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: staggerDelay,
+      },
+    },
+  }
+
+  const itemVariants: Variants = {
+    hidden: childVariants.initial,
+    visible: childVariants.animate,
+  }
+
+  return (
+    <motion.div
+      ref={ref}
+      variants={containerVariants}
+      initial="hidden"
+      animate={isInView ? 'visible' : 'hidden'}
+      className={className}
+    >
+      {React.Children.map(children, (child, i) => (
+        <motion.div key={i} variants={itemVariants}>
+          {child}
+        </motion.div>
+      ))}
+    </motion.div>
+  )
+}

package/src/motion/Transition.tsx

@@ -0,0 +1,13 @@
+'use client'
+import { AnimatePresence } from 'motion/react'
+import React from 'react'
+
+export interface TransitionProps {
+  show?: boolean
+  children: React.ReactNode
+  mode?: 'wait' | 'sync' | 'popLayout'
+}
+
+export function Transition({ show = true, children, mode = 'wait' }: TransitionProps) {
+  return <AnimatePresence mode={mode}>{show ? children : null}</AnimatePresence>
+}

package/src/motion/index.ts

@@ -0,0 +1,13 @@
+export * from './presets'
+export * from './FadeIn'
+export * from './SlideIn'
+export * from './ScaleIn'
+export * from './Reveal'
+export * from './Stagger'
+export * from './Morph'
+export * from './Ripple'
+export * from './Parallax'
+export * from './useLayoutId'
+export * from './Transition'
+// re-export useful motion primitives
+export { motion, AnimatePresence, useInView, useMotionValue, useSpring, useTransform, useScroll, type Variants } from 'motion/react'

package/src/motion/presets.ts

@@ -0,0 +1,33 @@
+import type { TargetAndTransition } from 'motion/react'
+
+export type MotionPreset =
+  | 'fadeIn' | 'fadeOut'
+  | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight'
+  | 'scaleIn' | 'scaleOut'
+  | 'blurIn' | 'blurOut'
+  | 'none'
+
+export interface MotionVariants {
+  initial: TargetAndTransition
+  animate: TargetAndTransition
+  exit: TargetAndTransition
+}
+
+export const MOTION_PRESETS: Record<MotionPreset, MotionVariants> = {
+  fadeIn:     { initial: { opacity: 0 },           animate: { opacity: 1 },           exit: { opacity: 0 } },
+  fadeOut:    { initial: { opacity: 1 },           animate: { opacity: 0 },           exit: { opacity: 1 } },
+  slideUp:    { initial: { opacity: 0, y: 16 },    animate: { opacity: 1, y: 0 },     exit: { opacity: 0, y: 16 } },
+  slideDown:  { initial: { opacity: 0, y: -16 },   animate: { opacity: 1, y: 0 },     exit: { opacity: 0, y: -16 } },
+  slideLeft:  { initial: { opacity: 0, x: 16 },    animate: { opacity: 1, x: 0 },     exit: { opacity: 0, x: 16 } },
+  slideRight: { initial: { opacity: 0, x: -16 },   animate: { opacity: 1, x: 0 },     exit: { opacity: 0, x: -16 } },
+  scaleIn:    { initial: { opacity: 0, scale: 0.92 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.92 } },
+  scaleOut:   { initial: { opacity: 1, scale: 1 }, animate: { opacity: 0, scale: 0.92 }, exit: { opacity: 1, scale: 1 } },
+  blurIn:     { initial: { opacity: 0, filter: 'blur(8px)' }, animate: { opacity: 1, filter: 'blur(0px)' }, exit: { opacity: 0, filter: 'blur(8px)' } },
+  blurOut:    { initial: { opacity: 1, filter: 'blur(0px)' }, animate: { opacity: 0, filter: 'blur(8px)' }, exit: { opacity: 1, filter: 'blur(0px)' } },
+  none:       { initial: {}, animate: {}, exit: {} },
+}
+
+export const DEFAULT_TRANSITION = {
+  duration: 0.2,
+  ease: [0.16, 1, 0.3, 1] as const, // ease-out-expo (BezierDefinition)
+}

package/src/motion/useLayoutId.ts

@@ -0,0 +1,6 @@
+import { useId } from 'react'
+
+export function useLayoutId(key: string): string {
+  const id = useId()
+  return `${key}-${id}`
+}