@ponti-studios/ui 1.1.0 → 1.3.0

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

@@ -1,56 +1,140 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
+import { expect, fireEvent, userEvent, within } from "storybook/test";
 
-import { DropZone } from "./drop-zone";
+import { DropZone, type DropZoneFileInfo, type DropZoneStatus } from "./drop-zone";
 
 const meta = {
   title: "Forms/DropZone",
   component: DropZone,
   tags: ["autodocs"],
+  args: {
+    status: "empty",
+    onFiles: () => {},
+  },
 } satisfies Meta<typeof DropZone>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-function DropZonePreview({ isImporting = false }: { isImporting?: boolean }) {
-  const [dragActive, setDragActive] = useState(false);
-  const [files, setFiles] = useState<File[]>([]);
+function DropZonePreview({ initialStatus = "empty" }: { initialStatus?: DropZoneStatus }) {
+  const [status, setStatus] = useState<DropZoneStatus>(initialStatus);
+  const [file, setFile] = useState<DropZoneFileInfo | null>(
+    initialStatus === "empty" ? null : { name: "applications.csv", size: 24_576 },
+  );
 
   return (
-    <div className="w-96 space-y-3">
+    <div className="w-96">
       <DropZone
-        isImporting={isImporting}
-        dragActive={dragActive}
-        onDragOver={() => setDragActive(true)}
-        onDragLeave={() => setDragActive(false)}
-        onDrop={setFiles}
-        onChange={setFiles}
+        status={status}
+        file={file}
         accept=".csv"
-        helpText="Supported formats: CSV"
+        emptyHint="Supported formats: CSV"
+        error={status === "failed" ? "The file could not be processed." : undefined}
+        busyDescription="This usually takes a moment."
+        onFiles={(files) => {
+          const selectedFile = files[0];
+          if (!selectedFile) return;
+          setFile({ name: selectedFile.name, size: selectedFile.size });
+          setStatus("armed");
+        }}
+        onSubmit={() => setStatus("busy")}
+        onCancel={() => setStatus("armed")}
+        onRetry={() => setStatus("busy")}
+        onClear={() => {
+          setFile(null);
+          setStatus("empty");
+        }}
       />
-      {files.length > 0 ? (
-        <p className="text-muted-foreground text-sm">
-          {files.length} file{files.length > 1 ? "s" : ""} selected
-        </p>
-      ) : null}
     </div>
   );
 }
 
-const baseArgs = {
-  isImporting: false,
-  dragActive: false,
-  onDrop: () => {},
-  onDragOver: () => {},
-  onDragLeave: () => {},
+export const Default: Story = {
+  render: () => <DropZonePreview />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvasElement.querySelector('input[type="file"]') as HTMLInputElement;
+    const file = new File(["name,email\nAda,ada@example.com"], "applications.csv", {
+      type: "text/csv",
+    });
+
+    await expect(canvas.getByText("Drop a file here, or")).toBeInTheDocument();
+    await fireEvent.change(input, { target: { files: [file] } });
+    await expect(canvas.getByText("applications.csv")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: /Upload/ })).toBeInTheDocument();
+
+    await userEvent.click(canvas.getByRole("button", { name: /Upload/ }));
+    await expect(canvas.getByRole("progressbar", { name: "Processing…" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: /Cancel/ })).toBeInTheDocument();
+  },
 };
 
-export const Default: Story = {
-  args: baseArgs,
+export const Armed: Story = {
+  render: () => <DropZonePreview initialStatus="armed" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByText("applications.csv")).toBeInTheDocument();
+    await expect(canvas.getByText("24.0 KB")).toBeInTheDocument();
+    await userEvent.click(canvas.getByRole("button", { name: /Use a different file/ }));
+    await expect(canvas.getByText("Drop a file here, or")).toBeInTheDocument();
+  },
+};
+
+export const Busy: Story = {
+  render: () => <DropZonePreview initialStatus="busy" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByRole("progressbar", { name: "Processing…" })).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: /Cancel/ })).toBeInTheDocument();
+    await expect(canvas.queryByRole("button", { name: /Upload/ })).not.toBeInTheDocument();
+    await userEvent.click(canvas.getByRole("button", { name: /Cancel/ }));
+    await expect(canvas.getByRole("button", { name: /Upload/ })).toBeInTheDocument();
+  },
+};
+
+export const Dragging: Story = {
   render: () => <DropZonePreview />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const zone = canvas.getByRole("button", { name: "File upload drop zone" });
+    const file = new File(["data"], "applications.csv", { type: "text/csv" });
+
+    await fireEvent.dragEnter(zone);
+    await expect(canvas.getByText("Release to attach")).toBeInTheDocument();
+    await fireEvent.dragLeave(zone);
+    await expect(canvas.getByText("Drop a file here, or")).toBeInTheDocument();
+    const dataTransfer = new DataTransfer();
+    dataTransfer.items.add(file);
+    Object.defineProperty(dataTransfer, "files", { value: [file] });
+    await fireEvent.drop(zone, { dataTransfer });
+    await expect(canvas.getByText("applications.csv")).toBeInTheDocument();
+  },
 };
 
-export const Importing: Story = {
-  args: { ...baseArgs, isImporting: true },
-  render: () => <DropZonePreview isImporting />,
+export const Failed: Story = {
+  render: () => <DropZonePreview initialStatus="failed" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await expect(canvas.getByText("The file could not be processed.")).toBeInTheDocument();
+    await expect(canvas.getByRole("button", { name: /Try again/ })).toBeInTheDocument();
+    await userEvent.click(canvas.getByRole("button", { name: /Try again/ }));
+    await expect(canvas.getByRole("progressbar", { name: "Processing…" })).toBeInTheDocument();
+  },
+};
+
+export const Disabled: Story = {
+  args: { status: "empty", disabled: true },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const zone = canvas.getByRole("button", { name: "File upload drop zone" });
+    const input = canvasElement.querySelector('input[type="file"]') as HTMLInputElement;
+
+    await expect(zone).toHaveAttribute("aria-disabled", "true");
+    await expect(zone).toHaveAttribute("tabindex", "-1");
+    await expect(input).toBeDisabled();
+  },
 };

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>