@ttt-productions/ui-core 0.11.17 → 0.11.19

package/src/react/components/search-dropdown.tsx

@@ -1,233 +0,0 @@
-'use client';
-
-import { useState, useRef, useEffect } from 'react';
-import { Input } from './input.js';
-import { Label } from './label.js';
-import { X, Search } from 'lucide-react';
-import { Spinner } from './spinner.js';
-import { cn } from "../../lib/utils.js";
-
-export interface SearchDropdownProps<T> {
-  /** Current search value */
-  value: string;
-  /** Called when search value changes */
-  onValueChange: (value: string) => void;
-  /** Search results array */
-  results: T[];
-  /** Loading state */
-  isLoading: boolean;
-  /** Error message */
-  error: string | null;
-  /** Called when a result is selected */
-  onSelect: (result: T) => void;
-  /** Called when search is cleared (after the value has been reset). Optional notification hook. */
-  onClear?: () => void;
-  /** Placeholder text */
-  placeholder?: string;
-  /** Label for the input */
-  label?: string;
-  /** Custom className */
-  className?: string;
-  /** Disabled state */
-  disabled?: boolean;
-  /** Icon to show in input (default: Search) */
-  icon?: React.ReactNode;
-  /** Minimum characters before showing results (default: 3) */
-  minChars?: number;
-  /** Message to show when no results found */
-  emptyMessage?: string;
-  /** Custom render function for each result */
-  renderResult: (result: T, index: number) => React.ReactNode;
-}
-
-/**
- * Generic search dropdown component with debounced input and keyboard navigation.
- * Supports any data type and custom rendering.
- * 
- * @example
- * ```tsx
- * <SearchDropdown<User>
- *   value={searchValue}
- *   onValueChange={setSearchValue}
- *   results={users}
- *   isLoading={isLoading}
- *   error={error}
- *   onSelect={(user) => console.log(user)}
- *   onClear={() => setSearchValue('')}
- *   placeholder="Search users..."
- *   renderResult={(user) => (
- *     <div>{user.displayName}</div>
- *   )}
- * />
- * ```
- */
-export function SearchDropdown<T>({
-  value,
-  onValueChange,
-  results,
-  isLoading,
-  error,
-  onSelect,
-  onClear,
-  placeholder = 'Search...',
-  label,
-  className,
-  disabled = false,
-  icon = <Search className="h-4 w-4" />,
-  minChars = 3,
-  emptyMessage = 'No results found',
-  renderResult,
-}: SearchDropdownProps<T>) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  useEffect(() => {
-    if (value.length >= minChars && (results.length > 0 || isLoading || error)) {
-      setIsOpen(true);
-    } else {
-      setIsOpen(false);
-    }
-  }, [value, results, isLoading, error, minChars]);
-
-  useEffect(() => {
-    setSelectedIndex(-1);
-  }, [results]);
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!isOpen || results.length === 0) return;
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        setSelectedIndex((prev) => (prev < results.length - 1 ? prev + 1 : prev));
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setSelectedIndex((prev) => (prev > 0 ? prev - 1 : 0));
-        break;
-      case 'Enter':
-        e.preventDefault();
-        if (selectedIndex >= 0 && selectedIndex < results.length) {
-          onSelect(results[selectedIndex]);
-          setIsOpen(false);
-        }
-        break;
-      case 'Escape':
-        e.preventDefault();
-        setIsOpen(false);
-        inputRef.current?.blur();
-        break;
-    }
-  };
-
-  const handleResultClick = (result: T) => {
-    onSelect(result);
-    setIsOpen(false);
-  };
-
-  const handleClear = () => {
-    onValueChange('');
-    onClear?.();
-    setIsOpen(false);
-    inputRef.current?.focus();
-  };
-
-  const showDropdown = isOpen && value.length >= minChars;
-
-  return (
-    <div ref={containerRef} className={cn('relative', className)}>
-      {label && (
-        <Label htmlFor="search-input" className="mb-2 block">
-          {label}
-        </Label>
-      )}
-      
-      <div className="relative">
-        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-          {icon}
-        </div>
-        
-        <Input
-          ref={inputRef}
-          id="search-input"
-          type="text"
-          value={value}
-          onChange={(e) => onValueChange(e.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder={placeholder}
-          disabled={disabled}
-          className="pl-10 pr-10"
-        />
-
-        <div className="absolute right-3 top-1/2 -translate-y-1/2">
-          {isLoading ? (
-            <Spinner size="xs" className="text-muted-foreground" />
-          ) : value ? (
-            <button
-              type="button"
-              onClick={handleClear}
-              className="text-muted-foreground hover:text-foreground transition-colors"
-              aria-label="Clear search"
-            >
-              <X className="h-4 w-4" />
-            </button>
-          ) : null}
-        </div>
-      </div>
-
-      {showDropdown && (
-        <div className="absolute z-50 w-full mt-1 bg-popover border rounded-md elevation-raised max-h-60 overflow-auto">
-          {error ? (
-            <div className="px-3 py-2 text-sm text-destructive">
-              {error}
-            </div>
-          ) : isLoading ? (
-            <div className="px-3 py-2 text-sm text-muted-foreground flex items-center gap-2">
-              <Spinner size="xs" />
-              Searching...
-            </div>
-          ) : results.length === 0 ? (
-            <div className="px-3 py-2 text-sm text-muted-foreground">
-              {emptyMessage}
-            </div>
-          ) : (
-            results.map((result, index) => (
-              <button
-                key={index}
-                type="button"
-                onClick={() => handleResultClick(result)}
-                onMouseEnter={() => setSelectedIndex(index)}
-                className={cn(
-                  'w-full text-left transition-colors cursor-pointer',
-                  'hover:bg-accent focus:bg-accent focus:outline-hidden',
-                  selectedIndex === index && 'bg-accent'
-                )}
-              >
-                {renderResult(result, index)}
-              </button>
-            ))
-          )}
-        </div>
-      )}
-      
-      {value.length > 0 && value.length < minChars && (
-        <p className="text-xs text-muted-foreground mt-1">
-          Type at least {minChars} characters to search
-        </p>
-      )}
-    </div>
-  );
-}

package/src/react/components/select.tsx

@@ -1,165 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
-
-import { cn } from "../../lib/utils.js"
-import { Spinner } from "./spinner.js"
-
-const Select = SelectPrimitive.Root
-const SelectGroup = SelectPrimitive.Group
-const SelectValue = SelectPrimitive.Value
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
-    /**
-     * The change this select started is in flight: the trigger disables itself, sets
-     * `aria-busy`, and shows the spinner in place of its chevron. It keeps showing the
-     * COMMITTED value — the caller changes `value` only once the write lands.
-     */
-    pending?: boolean
-  }
->(({ className, children, pending = false, disabled, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    )}
-    {...props}
-    {...(pending ? { "aria-busy": true, "data-pending": "" } : {})}
-    disabled={disabled || pending || undefined}
-  >
-    {children}
-    {pending ? (
-      <Spinner size="xs" />
-    ) : (
-      <SelectPrimitive.Icon asChild>
-        <ChevronDown className="h-4 w-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    )}
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn("flex cursor-default items-center justify-center py-1", className)}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground elevation-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}

package/src/react/components/separator.tsx

@@ -1,26 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "../../lib/utils.js"
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
-  <SeparatorPrimitive.Root
-    ref={ref}
-    decorative={decorative}
-    orientation={orientation}
-    className={cn(
-      "shrink-0 bg-border",
-      orientation === "horizontal" ? "h-[2px] w-full" : "h-full w-[1px]",
-      className
-    )}
-    {...props}
-  />
-))
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }

package/src/react/components/sheet.tsx

@@ -1,140 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "../../lib/utils.js"
-
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-[color:var(--scrim)]  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 elevation-raised transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-)
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground break-words", className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground break-words", className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}

package/src/react/components/skeleton.tsx

@@ -1,16 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "../../lib/utils.js"
-
-function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
-      data-ai-hint="loading placeholder"
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }

package/src/react/components/slider.tsx

@@ -1,25 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
-
-import { cn } from "../../lib/utils.js"
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn("relative flex w-full touch-none select-none items-center", className)}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
-
-export { Slider }

package/src/react/components/spinner.tsx

@@ -1,49 +0,0 @@
-"use client"
-
-import { Loader2 } from "lucide-react"
-
-import { cn } from "../../lib/utils.js"
-
-export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl"
-
-export interface SpinnerProps {
-  /** Maps onto the theme-core `spinner-*` classes. Defaults to `xs` (the in-control size). */
-  size?: SpinnerSize
-  /**
-   * Screen-reader text. When set, the spinner becomes a `status` live region that
-   * announces it. Omit it for a spinner inside a control that already carries its
-   * own busy state (`aria-busy`) — the control speaks for it.
-   */
-  label?: string
-  className?: string
-}
-
-const SIZE_CLASS: Record<SpinnerSize, string> = {
-  xs: "spinner-xs",
-  sm: "spinner-sm",
-  md: "spinner-md",
-  lg: "spinner-lg",
-  xl: "spinner-xl",
-}
-
-/**
- * The ONE loading spinner. Every in-progress indicator renders through this
- * component (or through a control's `pending` prop, which renders it), so the
- * spinner's look, size scale, and color rule have one change point. The
- * theme-core `spinner-*` classes own size, animation, and color — including the
- * `button .spinner-*` rule that makes an in-button spinner inherit the button's
- * text color so it is never primary-on-primary.
- */
-function Spinner({ size = "xs", label, className }: SpinnerProps) {
-  if (!label) {
-    return <Loader2 className={cn(SIZE_CLASS[size], className)} aria-hidden="true" />
-  }
-  return (
-    <span role="status" className={cn("inline-flex items-center justify-center", className)}>
-      <Loader2 className={SIZE_CLASS[size]} aria-hidden="true" />
-      <span className="sr-only">{label}</span>
-    </span>
-  )
-}
-
-export { Spinner }