@ponti-studios/ui 1.2.0 → 1.3.0

package/src/components/forms/drop-zone.tsx

@@ -1,146 +1,299 @@
-import type React from "react";
-import { useCallback, useId } from "react";
+import {
+  useCallback,
+  useId,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type DragEvent,
+  type KeyboardEvent,
+  type ReactNode,
+} from "react";
+import { FileIcon, UploadIcon, XIcon } from "lucide-react";
 
 import { cn } from "../../lib/utils";
+import { Button } from "../primitives/button";
 
-export interface DropZoneProps {
-  isImporting: boolean;
-  dragActive: boolean;
-  onDrop: (files: File[]) => void;
-  onDragOver: () => void;
-  onDragLeave: () => void;
-  onChange?: (files: File[]) => void;
+export type DropZoneStatus = "empty" | "armed" | "busy" | "failed";
+
+export type DropZoneFileInfo = {
+  name: string;
+  size: number;
+};
+
+export type DropZoneProps = {
+  status: DropZoneStatus;
+  /** Selected file metadata for armed / busy / failed (with file retained). */
+  file?: DropZoneFileInfo | null;
+  error?: string | null;
+  notice?: string | null;
+  /** File input accept attribute, e.g. `.pdf,application/pdf`. */
   accept?: string;
   multiple?: boolean;
+  disabled?: boolean;
   className?: string;
-  label?: string;
-  helpText?: string;
+  /** Empty idle copy */
+  emptyLabel?: ReactNode;
+  emptyHint?: ReactNode;
+  draggingLabel?: ReactNode;
+  /** Busy copy */
+  busyLabel?: ReactNode;
+  busyDescription?: ReactNode;
+  /** Action labels — parent owns domain language */
+  submitLabel?: string;
+  retryLabel?: string;
+  clearLabel?: string;
+  cancelLabel?: string;
+  /** Extra content under error (e.g. sign-in link). */
+  failedActions?: ReactNode;
+  onFiles: (files: File[]) => void;
+  onSubmit?: () => void;
+  onClear?: () => void;
+  onCancel?: () => void;
+  onRetry?: () => void;
+};
+
+function formatFileSize(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
 }
 
-/** Drag-and-drop file picker with a click-to-browse fallback. */
+/**
+ * Generic file drop surface. Parent owns validation, network, and domain copy.
+ * Modes: empty | armed | busy | failed, plus an internal drag overlay.
+ */
 export function DropZone({
-  isImporting,
-  dragActive,
-  onDrop,
-  onDragOver,
-  onDragLeave,
-  onChange,
+  status,
+  file = null,
+  error = null,
+  notice = null,
   accept,
-  multiple = true,
+  multiple = false,
+  disabled = false,
   className,
-  label = "Drag and drop files here, or",
-  helpText,
+  emptyLabel = (
+    <>
+      Drop a file here, or <span className="text-primary font-medium">browse</span>
+    </>
+  ),
+  emptyHint,
+  draggingLabel = "Release to attach",
+  busyLabel = "Processing…",
+  busyDescription,
+  submitLabel = "Upload",
+  retryLabel = "Try again",
+  clearLabel = "Use a different file",
+  cancelLabel = "Cancel",
+  failedActions,
+  onFiles,
+  onSubmit,
+  onClear,
+  onCancel,
+  onRetry,
 }: DropZoneProps) {
   const inputId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const zoneRef = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState(false);
 
-  const handleDrop = useCallback(
-    (e: React.DragEvent<HTMLButtonElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onDragLeave();
+  const isBusy = status === "busy";
+  const isInteractive = !disabled && !isBusy;
 
-      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-        onDrop(Array.from(e.dataTransfer.files));
-      }
+  const openPicker = useCallback(() => {
+    if (!isInteractive) return;
+    inputRef.current?.click();
+  }, [isInteractive]);
+
+  const handleFiles = useCallback(
+    (list: FileList | File[] | null) => {
+      if (!list || !isInteractive) return;
+      const files = Array.from(list);
+      if (files.length === 0) return;
+      onFiles(files);
     },
-    [onDrop, onDragLeave],
+    [isInteractive, onFiles],
   );
 
-  const triggerFileInput = useCallback(() => {
-    if (!isImporting) {
-      document.getElementById(inputId)?.click();
-    }
-  }, [isImporting, inputId]);
+  const onDragEnter = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!isInteractive) return;
+    setDragging(true);
+  };
 
-  const handleDragOver = useCallback(
-    (e: React.DragEvent<HTMLButtonElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onDragOver();
-    },
-    [onDragOver],
-  );
+  const onDragOver = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+  };
 
-  const handleDragLeave = useCallback(
-    (e: React.DragEvent<HTMLButtonElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      onDragLeave();
-    },
-    [onDragLeave],
-  );
+  const onDragLeave = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const next = event.relatedTarget;
+    if (next instanceof Node && zoneRef.current?.contains(next)) return;
+    setDragging(false);
+  };
 
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation();
-      triggerFileInput();
-    },
-    [triggerFileInput],
-  );
+  const onDrop = (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(false);
+    if (!isInteractive) return;
+    handleFiles(event.dataTransfer.files);
+  };
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLButtonElement>) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        e.stopPropagation();
-        triggerFileInput();
-      }
-    },
-    [triggerFileInput],
-  );
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    handleFiles(event.target.files);
+    event.target.value = "";
+  };
 
-  const handleInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      e.stopPropagation();
-      if (onChange) {
-        onChange(e.target.files ? Array.from(e.target.files) : []);
-      }
-    },
-    [onChange],
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      openPicker();
+    }
+  };
+
+  const showDragging = dragging && isInteractive;
+  const frameTone = cn(
+    showDragging && "border-primary bg-primary/5",
+    status === "failed" && !showDragging && "border-destructive/50 bg-destructive/5",
+    status === "busy" && "border-border bg-muted/30",
+    status !== "failed" && status !== "busy" && !showDragging && "border-border bg-card",
   );
 
   return (
-    <div>
-      <button
-        type="button"
-        className={cn(
-          "relative border-2 border-dashed p-12",
-          {
-            "border-primary bg-primary/5": dragActive,
-            "border-border bg-muted": !dragActive,
-          },
-          "flex flex-col items-center justify-center gap-4",
-          {
-            "pointer-events-none cursor-not-allowed": isImporting,
-          },
-          className,
-        )}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        tabIndex={isImporting ? -1 : 0}
-        aria-disabled={isImporting}
-        aria-label="Upload file area. Press Enter or Space to open file browser"
-      >
-        <div className="space-y-2 text-center">
-          <p className="text-muted-foreground">
-            {label} <span className="text-accent font-medium">click to browse</span>
-          </p>
-          {helpText ? <p className="text-muted-foreground text-sm">{helpText}</p> : null}
-        </div>
-      </button>
+    <div className={cn("w-full space-y-3", className)}>
       <input
+        ref={inputRef}
         id={inputId}
         type="file"
-        multiple={multiple}
         accept={accept}
-        onChange={handleInputChange}
-        className="sr-only"
-        disabled={isImporting}
-        aria-label="File input"
+        multiple={multiple}
+        disabled={!isInteractive}
+        className="pointer-events-none sr-only"
+        onChange={onInputChange}
+        tabIndex={-1}
+        aria-hidden
       />
+
+      <div
+        ref={zoneRef}
+        role="button"
+        tabIndex={isInteractive ? 0 : -1}
+        aria-disabled={!isInteractive}
+        aria-busy={isBusy}
+        aria-label="File upload drop zone"
+        className={cn(
+          "relative flex min-h-44 w-full flex-col items-center justify-center overflow-hidden rounded-2xl border border-dashed p-6 text-center outline-none",
+          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2",
+          "motion-safe:transition-[transform,opacity] motion-safe:duration-200 motion-safe:ease-in-out motion-reduce:transition-none",
+          isInteractive ? "cursor-pointer" : "cursor-default",
+          showDragging ? "scale-[1.01] motion-reduce:scale-100" : "scale-100",
+          frameTone,
+        )}
+        onClick={isInteractive ? openPicker : undefined}
+        onKeyDown={isInteractive ? onKeyDown : undefined}
+        onDragEnter={onDragEnter}
+        onDragOver={onDragOver}
+        onDragLeave={onDragLeave}
+        onDrop={onDrop}
+      >
+        <div className="flex w-full max-w-sm flex-col items-center gap-3">
+          {showDragging ? (
+            <>
+              <UploadIcon
+                className="text-primary size-8 motion-safe:transition-[transform,opacity] motion-safe:duration-200 motion-safe:ease-in-out motion-reduce:transition-none motion-safe:-translate-y-0.5 motion-reduce:translate-y-0"
+                aria-hidden
+              />
+              <p className="body-3 text-foreground">{draggingLabel}</p>
+            </>
+          ) : null}
+
+          {!showDragging && status === "empty" ? (
+            <>
+              <UploadIcon className="size-8 text-muted-foreground" aria-hidden />
+              <div className="space-y-1">
+                <p className="body-3 text-foreground">{emptyLabel}</p>
+                {emptyHint ? <p className="body-4 text-muted-foreground">{emptyHint}</p> : null}
+              </div>
+            </>
+          ) : null}
+
+          {!showDragging && status === "armed" && file ? (
+            <>
+              <FileIcon className="size-8 text-muted-foreground" aria-hidden />
+              <div className="min-w-0 max-w-full space-y-1">
+                <p className="subheading-4 truncate text-foreground">{file.name}</p>
+                <p className="body-4 text-muted-foreground">{formatFileSize(file.size)}</p>
+              </div>
+            </>
+          ) : null}
+
+          {!showDragging && status === "busy" ? (
+            <div className="w-full space-y-3">
+              <div className="space-y-1">
+                <p className="subheading-4 text-foreground">{busyLabel}</p>
+                {busyDescription ? (
+                  <p className="body-4 text-muted-foreground">{busyDescription}</p>
+                ) : null}
+                {file ? <p className="body-4 truncate text-muted-foreground">{file.name}</p> : null}
+              </div>
+              <div
+                className="bg-muted h-1.5 w-full overflow-hidden rounded-full"
+                role="progressbar"
+                aria-label={typeof busyLabel === "string" ? busyLabel : "Processing"}
+              >
+                <div className="bg-primary h-full w-2/5 rounded-full opacity-80 motion-safe:animate-pulse" />
+              </div>
+            </div>
+          ) : null}
+
+          {!showDragging && status === "failed" ? (
+            <div className="w-full space-y-2">
+              {file ? <p className="subheading-4 truncate text-foreground">{file.name}</p> : null}
+              {error ? <p className="body-3 text-destructive">{error}</p> : null}
+              {failedActions}
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {notice ? <p className="body-4 text-muted-foreground">{notice}</p> : null}
+
+      <div className="grid gap-2">
+        {status === "armed" && onSubmit ? (
+          <Button type="button" className="w-full" onClick={onSubmit}>
+            <UploadIcon className="size-4" />
+            {submitLabel}
+          </Button>
+        ) : null}
+        {status === "failed" && onRetry ? (
+          <Button type="button" className="w-full" onClick={onRetry}>
+            {retryLabel}
+          </Button>
+        ) : null}
+        {status === "busy" && onCancel ? (
+          <Button type="button" variant="outline" className="w-full" onClick={onCancel}>
+            <XIcon className="size-4" />
+            {cancelLabel}
+          </Button>
+        ) : null}
+        {(status === "armed" || status === "failed") && onClear ? (
+          <Button
+            type="button"
+            variant="ghost"
+            className="w-full"
+            onClick={(event) => {
+              event.stopPropagation();
+              onClear();
+            }}
+          >
+            {clearLabel}
+          </Button>
+        ) : null}
+      </div>
     </div>
   );
 }

package/src/components/forms/input.tsx

@@ -8,7 +8,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-background text-foreground focus-visible:ring-ring border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base transition-colors file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "bg-background text-foreground border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base transition-colors md:text-sm",
+        "file:text-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
         className,
       )}

package/src/components/forms/radio-group.tsx

@@ -23,8 +23,9 @@ const RadioGroupItem = React.forwardRef<
     <RadioPrimitive.Root
       ref={ref}
       className={cn(
-        "border-primary bg-background focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring aspect-square size-6 rounded-full border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        "flex items-center justify-center",
+        "border-primary bg-background flex aspect-square size-6 items-center justify-center rounded-full border",
+        "focus-visible:border-ring focus-visible:bg-muted/25 focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

package/src/components/forms/select.tsx

@@ -44,7 +44,14 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive border-input flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none",
+        "data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:ring-inset",
+        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "data-[size=default]:h-9 data-[size=sm]:h-8",
+        "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -60,18 +67,21 @@ function SelectTrigger({
 function SelectContent({
   className,
   children,
-  position: _position = "item-aligned",
+  position: _position = "popper",
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Popup> & {
   position?: "item-aligned" | "popper";
 }) {
   return (
     <SelectPrimitive.Portal>
-      <SelectPrimitive.Positioner sideOffset={4}>
+      <SelectPrimitive.Positioner
+        alignItemWithTrigger={_position === "item-aligned"}
+        sideOffset={4}
+      >
         <SelectPrimitive.Popup
           data-slot="select-content"
           className={cn(
-            "bg-background text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none",
+            "bg-background text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-95 relative z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none",
             className,
           )}
           {...props}

package/src/components/forms/slider.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof Slider> = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="w-full max-w-sm px-1">
+      <div className="w-80 px-1">
         <Story />
       </div>
     ),
@@ -48,7 +48,7 @@ export const Controlled: Story = {
   render: () => {
     const [value, setValue] = React.useState([33]);
     return (
-      <div className="w-full max-w-sm space-y-4 px-1">
+      <div className="w-80 space-y-4 px-1">
         <Slider aria-label="Volume" value={value} onValueChange={setValue} min={0} max={100} />
         <div className="flex justify-between text-sm">
           <span className="text-muted-foreground">Volume</span>

package/src/components/forms/slider.tsx

@@ -27,18 +27,21 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
   ) => (
     <SliderPrimitive.Root
       ref={ref}
-      className={cn("relative flex w-full touch-none items-center select-none", className)}
       {...props}
       onValueChange={(value) => onValueChange?.(Array.isArray(value) ? [...value] : [value])}
     >
-      <SliderPrimitive.Track className="bg-muted relative h-2 w-full grow overflow-hidden rounded-full">
-        <SliderPrimitive.Indicator className="bg-primary absolute h-full" />
-      </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb
-        aria-label={ariaLabel ?? "Slider"}
-        aria-labelledby={ariaLabelledby}
-        className="border-border focus-visible:border-ring focus-visible:bg-primary focus-visible:ring-ring bg-background block h-6 w-6 rounded-full border shadow-sm ring-1 ring-black/5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-      />
+      <SliderPrimitive.Control
+        className={cn("relative flex w-full touch-none items-center py-2 select-none", className)}
+      >
+        <SliderPrimitive.Track className="bg-muted relative h-2 w-full grow rounded-full">
+          <SliderPrimitive.Indicator className="bg-primary absolute h-full rounded-full" />
+          <SliderPrimitive.Thumb
+            aria-label={ariaLabel ?? "Slider"}
+            aria-labelledby={ariaLabelledby}
+            className="border-border focus-visible:border-ring focus-visible:bg-primary focus-visible:ring-ring bg-background z-10 block h-6 w-6 rounded-full border shadow-sm ring-1 ring-border/5 transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+          />
+        </SliderPrimitive.Track>
+      </SliderPrimitive.Control>
     </SliderPrimitive.Root>
   ),
 );

package/src/components/forms/switch.tsx

@@ -15,7 +15,10 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer data-checked:bg-primary data-unchecked:bg-input focus-visible:ring-ring inline-flex shrink-0 items-center rounded-full border border-transparent p-px focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-checked:justify-end data-unchecked:justify-start",
+        "peer inline-flex shrink-0 items-center rounded-full border border-transparent p-px",
+        "data-checked:bg-primary data-unchecked:bg-input data-checked:justify-end data-unchecked:justify-start",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
         size === "default" ? "h-[1.15rem] w-8" : "h-3.5 w-6",
         className,
       )}
@@ -25,7 +28,7 @@ function Switch({
         data-slot="switch-thumb"
         data-size={size}
         className={cn(
-          "pointer-events-none block rounded-full bg-white shadow-sm ring-1 ring-black/5 transition-all",
+          "pointer-events-none block rounded-full bg-background shadow-sm ring-1 ring-border/5 transition-all",
           size === "default" ? "size-4" : "size-3",
         )}
       />

package/src/components/forms/textarea.tsx

@@ -7,7 +7,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "placeholder:text-muted-foreground aria-invalid:ring-destructive/20 aria-invalid:border-destructive focus-visible:ring-ring border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "border-input flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-colors md:text-sm",
+        "placeholder:text-muted-foreground",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
         className,
       )}
       {...props}

package/src/components/layout/index.ts

@@ -1,7 +1,5 @@
 export { ScrollArea } from "./scroll-area";
 export type { ScrollAreaProps } from "./scroll-area";
-export { SearchFilterBar } from "../filters/search-filter-bar";
-export type { SearchFilterBarProps } from "../filters/search-filter-bar";
 export { SectionIntro } from "./section-intro";
 export type { SectionIntroProps } from "./section-intro";
 export { SurfacePanel } from "./surface-panel";

package/src/components/layout/section-intro.tsx

@@ -21,7 +21,7 @@ export function SectionIntro({ eyebrow, title, description, actions }: SectionIn
           </div>
         ) : null}
         <div className="space-y-3">
-          <h1 className="text-title-2 text-foreground font-semibold tracking-tight">{title}</h1>
+          <h1 className="text-2xl text-foreground font-semibold tracking-tight">{title}</h1>
           {description ? <p className="text-muted-foreground text-sm">{description}</p> : null}
         </div>
       </div>

package/src/components/layout/surface-panel.tsx

@@ -1,15 +1,23 @@
 import type { ComponentPropsWithoutRef, ElementType } from "react";
 
+import { cn } from "../../lib/utils";
+
 type SurfacePanelProps<T extends ElementType = "div"> = { as?: T } & Omit<
   ComponentPropsWithoutRef<T>,
-  "as" | "className"
+  "as"
 >;
 
 /** Rounded, bordered surface panel — a generic content container. */
 export function SurfacePanel<T extends ElementType = "div">({
   as,
+  className,
   ...props
 }: SurfacePanelProps<T>) {
   const Component = as ?? "div";
-  return <Component className="border-border bg-surface rounded-3xl border p-5" {...props} />;
+  return (
+    <Component
+      className={cn("border-border bg-card rounded-3xl border p-5", className)}
+      {...props}
+    />
+  );
 }

package/src/components/navigation/tabs.tsx

@@ -25,7 +25,10 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "text-foreground focus-visible:ring-ring data-active:bg-background data-active:text-foreground data-active:border-border flex flex-1 items-center justify-center gap-2 rounded-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-active:border",
+        "text-foreground flex flex-1 items-center justify-center gap-2 rounded-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-all",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+        "data-active:ring-1 data-active:ring-inset data-active:bg-background data-active:text-foreground data-active:ring-border",
         className,
       )}
       {...props}