@otfdashkit/ui 0.1.0 → 0.1.2

package/src/forms/search-input.tsx

@@ -1,64 +1 @@
-import React, { useState } from 'react'
-import { Search, X } from 'lucide-react'
-import { cn } from '../utils/cn'
-import { type InputProps } from '../primitives/input'
-
-export interface SearchInputProps extends Omit<InputProps, 'onChange'> {
-  shortcut?: string
-  onClear?: () => void
-  onChange?: (value: string) => void
-}
-
-export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ className, shortcut, onClear, onChange, value: valueProp, defaultValue, ...props }, ref) => {
-    const [internalValue, setInternalValue] = useState(defaultValue ?? '')
-    const isControlled = valueProp !== undefined
-    const value = isControlled ? String(valueProp) : String(internalValue)
-
-    function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-      if (!isControlled) setInternalValue(e.target.value)
-      onChange?.(e.target.value)
-    }
-
-    function handleClear() {
-      if (!isControlled) setInternalValue('')
-      onChange?.('')
-      onClear?.()
-    }
-
-    return (
-      <div className="relative flex items-center">
-        <Search className="pointer-events-none absolute left-2.5 h-4 w-4 text-[hsl(var(--muted-foreground))]" />
-        <input
-          ref={ref}
-          value={value}
-          onChange={handleChange}
-          className={cn(
-            'flex h-9 w-full rounded-md border border-[hsl(var(--input))] bg-transparent pl-8 pr-8 text-sm shadow-sm transition-colors',
-            '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',
-            className
-          )}
-          {...props}
-        />
-        <div className="absolute right-2.5 flex items-center">
-          {value ? (
-            <button
-              type="button"
-              onClick={handleClear}
-              className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          ) : shortcut ? (
-            <kbd className="pointer-events-none rounded border border-[hsl(var(--border))] px-1.5 py-0.5 text-[10px] text-[hsl(var(--muted-foreground))]">
-              {shortcut}
-            </kbd>
-          ) : null}
-        </div>
-      </div>
-    )
-  }
-)
-SearchInput.displayName = 'SearchInput'
+export * from './SearchInput'

package/src/forms/step-form.tsx

@@ -1,113 +1 @@
-import React, { createContext, useContext, useState } from 'react'
-import { Button } from '../primitives/button'
-import { cn } from '../utils/cn'
-
-interface StepFormContextValue {
-  currentStep: number
-  totalSteps: number
-  steps: string[]
-  next: () => void
-  prev: () => void
-  isFirst: boolean
-  isLast: boolean
-}
-
-const StepFormContext = createContext<StepFormContextValue | null>(null)
-
-function useStepForm() {
-  const ctx = useContext(StepFormContext)
-  if (!ctx) throw new Error('useStepForm must be used within StepForm')
-  return ctx
-}
-
-export interface StepFormProps {
-  steps: string[]
-  onSubmit: () => void
-  children: React.ReactNode
-  className?: string
-}
-
-export function StepForm({ steps, onSubmit, children, className }: StepFormProps) {
-  const [currentStep, setCurrentStep] = useState(0)
-  const totalSteps = steps.length
-
-  const ctx: StepFormContextValue = {
-    currentStep,
-    totalSteps,
-    steps,
-    next: () => setCurrentStep(s => Math.min(s + 1, totalSteps - 1)),
-    prev: () => setCurrentStep(s => Math.max(s - 1, 0)),
-    isFirst: currentStep === 0,
-    isLast: currentStep === totalSteps - 1,
-  }
-
-  const childArray = React.Children.toArray(children)
-  const currentChild = childArray[currentStep]
-
-  return (
-    <StepFormContext.Provider value={ctx}>
-      <div className={cn('flex flex-col gap-6', className)}>
-        <StepIndicator steps={steps} currentStep={currentStep} />
-        <div>{currentChild}</div>
-        <StepFormNavigation onSubmit={onSubmit} />
-      </div>
-    </StepFormContext.Provider>
-  )
-}
-
-function StepIndicator({ steps, currentStep }: { steps: string[]; currentStep: number }) {
-  return (
-    <div className="flex items-center gap-2">
-      {steps.map((label, i) => (
-        <React.Fragment key={i}>
-          {i > 0 && <div className={cn('h-px flex-1 bg-[hsl(var(--border))]', i <= currentStep && 'bg-[hsl(var(--primary))]')} />}
-          <div className="flex flex-col items-center gap-1">
-            <div className={cn(
-              'flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium border transition-colors',
-              i < currentStep && 'bg-[hsl(var(--primary))] border-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]',
-              i === currentStep && 'border-[hsl(var(--primary))] text-[hsl(var(--primary))]',
-              i > currentStep && 'border-[hsl(var(--border))] text-[hsl(var(--muted-foreground))]'
-            )}>{i + 1}</div>
-            <span className="hidden text-[10px] text-[hsl(var(--muted-foreground))] sm:block">{label}</span>
-          </div>
-        </React.Fragment>
-      ))}
-    </div>
-  )
-}
-
-export interface StepFormStepProps {
-  title: string
-  description?: string
-  children: React.ReactNode
-}
-
-export function StepFormStep({ title, description, children }: StepFormStepProps) {
-  return (
-    <div className="flex flex-col gap-4">
-      <div>
-        <h3 className="text-base font-semibold text-[hsl(var(--foreground))]">{title}</h3>
-        {description && <p className="text-sm text-[hsl(var(--muted-foreground))]">{description}</p>}
-      </div>
-      {children}
-    </div>
-  )
-}
-
-export interface StepFormNavigationProps {
-  onSubmit?: () => void
-  submitLabel?: string
-}
-
-export function StepFormNavigation({ onSubmit, submitLabel = 'Submit' }: StepFormNavigationProps) {
-  const { prev, next, isFirst, isLast } = useStepForm()
-  return (
-    <div className="flex justify-between">
-      <Button type="button" variant="outline" onClick={prev} disabled={isFirst}>Previous</Button>
-      {isLast
-        ? <Button type="button" onClick={onSubmit}>{submitLabel}</Button>
-        : <Button type="button" onClick={next}>Next</Button>
-      }
-    </div>
-  )
-}
+export * from './StepForm'

package/src/index.ts

@@ -23,7 +23,7 @@ export * from './primitives/context-menu'
 export * from './primitives/dialog'
 export * from './primitives/drawer'
 export * from './primitives/dropdown-menu'
-export * from './primitives/form'
+// export * from './primitives/form'  // conflicts with forms/form.tsx (Form, FormField, etc.)
 export * from './primitives/hover-card'
 export * from './primitives/input-otp'
 export * from './primitives/input'
@@ -59,7 +59,7 @@ export * from './primitives/tooltip'
 // components
 export * from './components/banner'
 export * from './components/breadcrumb'
-export * from './components/command-item'
+export { CommandListItem } from './components/command-item'
 export * from './components/data-grid'
 export * from './components/data-table'
 export * from './components/empty-state'
@@ -132,6 +132,7 @@ export * from './forms/color-picker'
 export * from './forms/date-picker'
 export * from './forms/field'
 export * from './forms/file-upload'
+export * from './forms/floating-label-input'
 export * from './forms/form'
 export * from './forms/object-field'
 export * from './forms/password-input'
@@ -153,7 +154,9 @@ export * from './layouts/stack'
 export { PageLayout } from './layout/PageLayout'
 export type { PageHeaderProps } from './layout/PageLayout'
 export { PageContainer, PageMain } from './layout/PageContainer'
-export * from './nav'
+export type { CommandPaletteProps } from './nav/CommandPalette'
+export { CommandPaletteProvider, useCommandPalette, CommandPalette } from './nav/CommandPalette'
+export * from './nav/HotkeysProvider'
 export * from './feedback'
 export * from './text'
 export * from './backgrounds'

package/src/primitives/Button/Button.tsx

@@ -43,6 +43,24 @@ const buttonVariants = cva(
           'hover:border-border/60 hover:bg-accent',
           'active:shadow-none',
         ].join(' '),
+        /** Shimmer — animated conic gradient sweep with a hover highlight.
+         *  Loud + premium; reserve for primary CTAs and pricing pages, not
+         *  for in-product UI (gets tiring fast). Cross-platform parity with
+         *  @otfdashkit/ui-native via the same `shimmer` variant key. */
+        shimmer: [
+          'relative isolate overflow-hidden',
+          'bg-primary text-primary-foreground',
+          'shadow-[0_1px_0_rgba(255,255,255,0.18)_inset,0_-1px_0_rgba(0,0,0,0.25)_inset]',
+          'hover:bg-primary/95',
+          // Continuous conic-gradient sweep behind the surface.
+          'before:absolute before:inset-[-1px] before:rounded-[inherit] before:-z-10',
+          'before:bg-[conic-gradient(from_0deg,transparent_0deg,transparent_70deg,rgba(255,255,255,0.55)_90deg,transparent_110deg,transparent_360deg)]',
+          'before:animate-[shimmer-rotate_2.6s_linear_infinite]',
+          // Diagonal gloss that sweeps on hover.
+          'after:absolute after:inset-0 after:rounded-[inherit] after:pointer-events-none',
+          'after:bg-[linear-gradient(115deg,transparent_30%,rgba(255,255,255,0.22)_50%,transparent_70%)]',
+          'after:translate-x-[-120%] hover:after:translate-x-[120%] after:transition-transform after:duration-[900ms] after:ease-out',
+        ].join(' '),
       },
       size: {
         sm:      'h-8 px-3 text-xs rounded-md',

package/src/primitives/code-block.tsx

@@ -106,7 +106,7 @@ export const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
     return (
       <div
         ref={(node) => {
-          containerRef.current = node
+          (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node
           if (typeof ref === 'function') ref(node)
           else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
         }}

package/src/primitives/comparison.tsx

@@ -100,7 +100,7 @@ export const Comparison = React.forwardRef<HTMLDivElement, ComparisonProps>(
     return (
       <div
         ref={(node) => {
-          containerRef.current = node
+          (containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node
           if (typeof ref === 'function') ref(node)
           else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
         }}

package/src/primitives/qr-code.tsx

@@ -20,7 +20,11 @@ export type QrCodeProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>
     src: string
     height: number
     width: number
-    excavate?: boolean
+    excavate: boolean
+    x?: number
+    y?: number
+    opacity?: number
+    crossOrigin?: 'anonymous' | 'use-credentials' | ''
   }
 }
 

package/src/themes/base.css

@@ -23,3 +23,21 @@ h1, h2, h3, h4, h5, h6 {
   line-height: var(--line-height-heading, 1.2);
   font-weight: var(--font-weight-heading, 600);
 }
+
+/* ── Animations shipped with the SDK ────────────────────────────────────────
+   Consumers get these automatically by importing '@otfdashkit/ui/styles'.
+   Keep keyframe names unique to avoid collision with consumer-defined ones. */
+
+/* Conic-gradient shimmer rotation — used by Button variant="shimmer".
+   Animation: 360deg sweep, 2.6s linear, infinite. */
+@keyframes shimmer-rotate {
+  0%   { --shimmer-angle: 0deg;   transform: rotate(0deg); }
+  100% { --shimmer-angle: 360deg; transform: rotate(360deg); }
+}
+
+/* Concentric ripple expand — reserved for future use (RippleLoader, ping).
+   The existing motion/Ripple is click-triggered; this is for ambient pulses. */
+@keyframes pulse-ring {
+  0%   { transform: scale(0.4); opacity: 0.8; }
+  100% { transform: scale(1.6); opacity: 0; }
+}