@ttt-productions/ui-core 0.11.14 → 0.11.16

package/src/react/components/tabs.tsx

@@ -29,8 +29,8 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "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]:shadow-xs data-[state=active]:border-2 data-[state=active]:border-[hsl(var(--brand-primary-deep))]",
+      "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
     )}

package/src/react/components/textarea.tsx

@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"tex
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border-2 border-border 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",
+          "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}

package/src/react/components/toast.tsx

@@ -25,7 +25,7 @@ function ToastKeyframes() {
 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 shadow-lg transition-all",
+    "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",
@@ -38,10 +38,10 @@ const toastVariants = cva(
     variants: {
       variant: {
         default: "",
-        destructive: "border-red-700 bg-red-600 text-white",
-        success: "border-emerald-700 bg-emerald-600 text-white",
-        warning: "border-amber-600 bg-amber-500 text-black",
-        error: "border-red-700 bg-red-600 text-white",
+        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: {

package/src/react/components/tooltip.tsx

@@ -17,7 +17,7 @@ const TooltipContent = React.forwardRef<
     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 shadow-md 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",
+      "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}

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

@@ -0,0 +1,63 @@
+"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 };
+}

package/src/react/index.ts

@@ -2,6 +2,8 @@
 
 export type { ButtonProps } from "./components/button.js";
 export { Button, buttonVariants } from "./components/button.js";
+export type { SpinnerProps, SpinnerSize } from "./components/spinner.js";
+export { Spinner } from "./components/spinner.js";
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from "./components/card.js";
 export { Label } from "./components/label.js";
 export { Textarea } from "./components/textarea.js";
@@ -49,6 +51,9 @@ export { ScreenAdaptiveView } from "./components/layout/screen-adaptive-view.js"
 
 export { useMediaQuery } from "./hooks/use-media-query.js";
 
+export { useAsyncAction } from "./hooks/use-async-action.js";
+export type { AsyncAction, UseAsyncActionOptions } from "./hooks/use-async-action.js";
+
 // Shared building blocks
 export { RelativeTime } from "./components/relative-time.js";
 export type { RelativeTimeProps } from "./components/relative-time.js";