@ttt-productions/ui-core 0.11.18 → 0.11.20

package/src/react/components/switch.tsx

@@ -1,41 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
-
-import { cn } from "../../lib/utils.js"
-import { Spinner } from "./spinner.js"
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
-    /**
-     * The change this switch started is in flight: the switch disables itself, sets
-     * `aria-busy`, and spins inside its thumb. It keeps showing the COMMITTED state —
-     * the caller flips `checked` only once the write lands.
-     */
-    pending?: boolean
-  }
->(({ className, pending = false, disabled, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    )}
-    {...props}
-    {...(pending ? { "aria-busy": true, "data-pending": "" } : {})}
-    disabled={disabled || pending || undefined}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full bg-background elevation-raised transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-      )}
-    >
-      {pending ? <Spinner size="xs" /> : null}
-    </SwitchPrimitives.Thumb>
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
-
-export { Switch }

package/src/react/components/table.tsx

@@ -1,121 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "../../lib/utils.js"
-
-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-[color:var(--table-row-hover)] 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-12 px-4 text-left align-middle font-bold text-label [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      "p-4 align-middle text-label font-bold [&:has([role=checkbox])]:pr-0",
-      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/react/components/tabs.tsx

@@ -1,59 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-
-import { cn } from "../../lib/utils.js"
-
-const Tabs = TabsPrimitive.Root
-
-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-10 items-center justify-center rounded-md p-1 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "tabs-trigger inline-flex items-center justify-center whitespace-nowrap rounded-xs px-3 py-1.5 text-sm !font-bold ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:border-2 data-[state=active]:border-[hsl(var(--brand-primary-deep))]",
-      "data-[state=inactive]:border data-[state=inactive]:border-border data-[state=inactive]:bg-background data-[state=inactive]:hover:bg-accent data-[state=inactive]:hover:text-accent-foreground",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </TabsPrimitive.Trigger>
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-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-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

package/src/react/components/textarea.tsx

@@ -1,22 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "../../lib/utils.js"
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border-2 border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
-
-export { Textarea }

package/src/react/components/toast.tsx

@@ -1,193 +0,0 @@
-import * as React from "react";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
-
-import { cn } from "../../lib/utils.js";
-
-/**
- * ui-core Toasts are consumed by multiple apps.
- *
- * Do NOT rely on app-level CSS (@apply) for critical positioning/visibility.
- * Keep all required styling inline as Tailwind utility classes.
- */
-function ToastKeyframes() {
-  // Inject a tiny global keyframe used by the optional countdown bar.
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: `@keyframes toast-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}`,
-      }}
-    />
-  );
-}
-
-const toastVariants = cva(
-  cn(
-    // base
-    "pointer-events-auto relative flex w-full items-start justify-between gap-2 overflow-hidden rounded-md border bg-background p-4 text-foreground elevation-raised transition-all",
-    // radix state/animation
-    "data-[state=open]:animate-in data-[state=closed]:animate-out",
-    "data-[state=closed]:fade-out-80 data-[state=open]:fade-in-80",
-    "data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-top-full",
-    "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]",
-    "data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out]",
-    "data-[swipe=end]:animate-out data-[swipe=end]:slide-out-to-right-full"
-  ),
-  {
-    variants: {
-      variant: {
-        default: "",
-        destructive: "border-[color:var(--toast-destructive-border)] bg-[color:var(--toast-destructive)] text-[color:var(--toast-destructive-foreground)]",
-        success: "border-[color:var(--toast-success-border)] bg-[color:var(--toast-success)] text-[color:var(--toast-success-foreground)]",
-        warning: "border-[color:var(--toast-warning-border)] bg-[color:var(--toast-warning)] text-[color:var(--toast-warning-foreground)]",
-        error: "border-[color:var(--toast-destructive-border)] bg-[color:var(--toast-destructive)] text-[color:var(--toast-destructive-foreground)]",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const ToastProvider = ToastPrimitives.Provider;
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 left-1/2 -translate-x-1/2 z-[100] flex max-h-screen w-full flex-col gap-2 p-4",
-      "sm:max-w-[480px] md:max-w-[600px]",
-      className
-    )}
-    {...props}
-  />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-
-type ToastRootProps = React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-  VariantProps<typeof toastVariants> & {
-    /** ms; ignored when `persistent` is true */
-    duration?: number;
-    /** show X button */
-    dismissible?: boolean;
-    /** When true: no auto-dismiss, no countdown bar. */
-    persistent?: boolean;
-  };
-
-const Toast = React.forwardRef<React.ElementRef<typeof ToastPrimitives.Root>, ToastRootProps>(
-  ({ className, variant, duration, dismissible = true, persistent = false, style, children, onOpenChange, ...props }, ref) => {
-    // Caller is the source of truth for duration. Persistent toasts disable
-    // the auto-dismiss entirely by passing `Infinity` to Radix.
-    const effectiveDuration = persistent ? Infinity : (duration ?? 5000);
-    // pass duration to Radix AND to CSS countdown bar
-    const mergedStyle: React.CSSProperties = {
-      ...(style as React.CSSProperties),
-      ["--toast-duration" as any]: `${effectiveDuration}ms`,
-    };
-
-    return (
-      <ToastPrimitives.Root
-        ref={ref}
-        duration={effectiveDuration}
-        data-variant={variant}
-        data-persistent={persistent ? "" : undefined}
-        className={cn(toastVariants({ variant }), className)}
-        style={mergedStyle}
-        onOpenChange={onOpenChange}
-        {...props}
-      >
-        <ToastKeyframes />
-        {children}
-
-        {/* countdown bar — hidden entirely for persistent toasts */}
-        {!persistent ? (
-          <div
-            aria-hidden
-            className={cn("absolute bottom-0 left-0 h-1 w-full bg-foreground/30", "origin-left")}
-            style={{
-              animationName: "toast-progress",
-              animationDuration: `${effectiveDuration}ms`,
-              animationTimingFunction: "linear",
-              animationFillMode: "forwards",
-            }}
-            // Radix's own auto-close timer PAUSES on pointer-over the viewport,
-            // focus, and window-blur — but this CSS bar does not. When the bar
-            // empties we must dismiss regardless of Radix's paused timer, so the
-            // toast never lingers after the countdown visibly reaches zero.
-            // Radix's `duration` above remains a motion-independent backstop
-            // (e.g. under prefers-reduced-motion where this event may not fire).
-            onAnimationEnd={(e) => {
-              if (e.animationName === "toast-progress") onOpenChange?.(false);
-            }}
-          />
-        ) : null}
-
-        {/* dismiss button */}
-        {dismissible ? (
-          <ToastPrimitives.Close
-            className={cn(
-              "absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-md",
-              "text-foreground/60 hover:text-foreground",
-              "focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
-            )}
-            aria-label="Dismiss toast"
-          >
-            <X className="h-4 w-4" />
-          </ToastPrimitives.Close>
-        ) : null}
-      </ToastPrimitives.Root>
-    );
-  }
-);
-Toast.displayName = ToastPrimitives.Root.displayName;
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action ref={ref} className={cn(className)} {...props} />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-md",
-      "text-foreground/60 hover:text-foreground",
-      "focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background",
-      className
-    )}
-    {...props}
-  />
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title ref={ref} className={cn("break-words", className)} {...props} />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description ref={ref} className={cn("break-words", className)} {...props} />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
-
-/** Exported types for consumers */
-export type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-export type ToastActionElement = React.ReactElement<typeof ToastAction>;
-
-export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction };

package/src/react/components/toaster.tsx

@@ -1,43 +0,0 @@
-"use client";
-
-import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./toast.js";
-import { useToast } from "../hooks/use-toast.js";
-import type { ToasterToast, ToastVariant } from "../hooks/use-toast.js";
-
-export function Toaster() {
-  const { toasts } = useToast() as { toasts: ToasterToast[] };
-
-  return (
-    <ToastProvider swipeDirection="right" swipeThreshold={32}>
-      {toasts.map((t: ToasterToast) => {
-        const { id, title, description, action, variant, duration, dismissible, persistent, open, onOpenChange, ...props } = t;
-
-        const v: ToastVariant | "destructive" =
-          variant === "error" ? "destructive" : (variant ?? "default");
-
-        return (
-          <Toast
-            key={id}
-            open={open}
-            onOpenChange={onOpenChange}
-            variant={v as any}
-            duration={duration}
-            dismissible={dismissible ?? true}
-            persistent={persistent ?? false}
-            {...(props as any)}
-          >
-            <div className="grid gap-1 pr-10">
-              {title ? <ToastTitle className="font-bold">{title}</ToastTitle> : null}
-              {description ? <ToastDescription className="font-bold">{description}</ToastDescription> : null}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-
-      {/* debug: proves viewport is visible/on-screen */}
-      <ToastViewport />
-    </ToastProvider>
-  );
-}

package/src/react/components/tooltip.tsx

@@ -1,28 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
-import { cn } from "../../lib/utils.js"
-
-const TooltipProvider = TooltipPrimitive.Provider
-const Tooltip = TooltipPrimitive.Root
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground elevation-popover 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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/react/hooks/use-async-action.ts

@@ -1,63 +0,0 @@
-"use client";
-
-import { useCallback, useRef, useState } from "react";
-
-export interface UseAsyncActionOptions {
-  /**
-   * Receives anything the action throws. REQUIRED, so every call site decides what a
-   * failure means (surface it, capture it, or accept that another layer already did):
-   * `run` itself never rejects, so a fire-and-forget `onClick={() => void run()}` can
-   * never become an unhandled rejection.
-   */
-  onError: (error: unknown) => void;
-}
-
-export interface AsyncAction<TArgs extends unknown[]> {
-  /**
-   * Starts the action unless one is already in flight — a repeat call while pending is
-   * ignored. Resolves once the action settles: `true` when it completed, `false` when it
-   * was ignored or threw. Never rejects.
-   */
-  run: (...args: TArgs) => Promise<boolean>;
-  /** True from the moment `run` starts the action until it settles. */
-  pending: boolean;
-}
-
-/**
- * Pending state + repeat guard for async work that is NOT a React Query mutation
- * (a local media step, a sign-out, an awaited navigation). Feed `pending` to the
- * control's own `pending` prop. Server writes stay mutations — this hook does not
- * replace the data layer's one mutation path.
- *
- * The guard is a ref, not the state, so two clicks inside one frame cannot both start
- * the action.
- */
-export function useAsyncAction<TArgs extends unknown[]>(
-  action: (...args: TArgs) => Promise<unknown>,
-  options: UseAsyncActionOptions,
-): AsyncAction<TArgs> {
-  const [pending, setPending] = useState(false);
-  const inFlightRef = useRef(false);
-  const actionRef = useRef(action);
-  const onErrorRef = useRef(options.onError);
-  actionRef.current = action;
-  onErrorRef.current = options.onError;
-
-  const run = useCallback(async (...args: TArgs): Promise<boolean> => {
-    if (inFlightRef.current) return false;
-    inFlightRef.current = true;
-    setPending(true);
-    try {
-      await actionRef.current(...args);
-      return true;
-    } catch (error) {
-      onErrorRef.current(error);
-      return false;
-    } finally {
-      inFlightRef.current = false;
-      setPending(false);
-    }
-  }, []);
-
-  return { run, pending };
-}