@elabs-ai/components-ui 4.0.0

package/src/components/number-input/number-input.tsx

@@ -0,0 +1,219 @@
+// a2ui.exposed: yes
+import { forwardRef, useCallback, useRef, useState, type HTMLAttributes } from "react";
+import { Minus, Plus } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { InputGroup, InputGroupButton, InputGroupInput } from "../input-group";
+
+export interface NumberInputProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "defaultValue"
+> {
+  /** Controlled value. Pass `null` to represent an empty state. */
+  value?: number | null;
+  /** Uncontrolled default value. */
+  defaultValue?: number | null;
+  /** Called when the numeric value changes. */
+  onValueChange?: (value: number | null) => void;
+  /** Minimum allowed value. */
+  min?: number;
+  /** Maximum allowed value. */
+  max?: number;
+  /** Step increment/decrement amount (default 1). */
+  step?: number;
+  /**
+   * When true (default), the value is clamped to [min, max] on blur.
+   * Clamping does NOT happen per-keystroke — only on blur.
+   */
+  clamp?: boolean;
+  /** Intl.NumberFormat options used to format the displayed value. */
+  formatOptions?: Intl.NumberFormatOptions;
+  /** Placeholder text for the underlying input. */
+  placeholder?: string;
+  /** Whether the input is disabled. */
+  disabled?: boolean;
+  /** Whether the input is read-only. */
+  readOnly?: boolean;
+  /** Name attribute forwarded to the underlying <input>. */
+  name?: string;
+  /** id attribute forwarded to the underlying <input>. */
+  id?: string;
+  /** aria-label forwarded to the underlying <input>. */
+  "aria-label"?: string;
+  /** aria-labelledby forwarded to the underlying <input>. */
+  "aria-labelledby"?: string;
+  /** aria-describedby forwarded to the underlying <input>. */
+  "aria-describedby"?: string;
+  /** aria-invalid forwarded to the underlying <input>. */
+  "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
+  /** aria-required forwarded to the underlying <input>. */
+  "aria-required"?: boolean | "true" | "false";
+}
+
+function clampValue(val: number, min?: number, max?: number): number {
+  let result = val;
+  if (min !== undefined) result = Math.max(min, result);
+  if (max !== undefined) result = Math.min(max, result);
+  return result;
+}
+
+function formatNum(value: number, formatOptions?: Intl.NumberFormatOptions): string {
+  if (formatOptions) {
+    return new Intl.NumberFormat(undefined, formatOptions).format(value);
+  }
+  return String(value);
+}
+
+/**
+ * NumberInput — a numeric stepper that composes InputGroup + two step buttons.
+ *
+ * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.
+ * Keyboard ↑/↓ = ±step; Shift+↑/↓ = ±step×10. Clamps on blur (not per keystroke).
+ */
+export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function NumberInput(
+  {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    min,
+    max,
+    step = 1,
+    clamp = true,
+    formatOptions,
+    placeholder,
+    disabled,
+    readOnly,
+    name,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const isControlled = valueProp !== undefined;
+
+  const [internalValue, setInternalValue] = useState<number | null>(
+    defaultValue !== undefined ? defaultValue : null,
+  );
+  const [inputText, setInputText] = useState<string>(() => {
+    const initial = isControlled ? valueProp : defaultValue;
+    return initial != null ? formatNum(initial, formatOptions) : "";
+  });
+  // Track whether the user is actively editing to avoid overwriting their input
+  const isEditing = useRef(false);
+
+  const currentValue = isControlled ? valueProp : internalValue;
+
+  const commit = useCallback(
+    (next: number | null) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  const applyStep = useCallback(
+    (delta: number) => {
+      if (disabled || readOnly) return;
+      const base = currentValue ?? 0;
+      let next = base + delta;
+      if (clamp) next = clampValue(next, min, max);
+      setInputText(next != null ? formatNum(next, formatOptions) : "");
+      commit(next);
+    },
+    [disabled, readOnly, currentValue, clamp, min, max, formatOptions, commit],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+        e.preventDefault();
+        const multiplier = e.shiftKey ? 10 : 1;
+        const delta = e.key === "ArrowUp" ? step * multiplier : -step * multiplier;
+        applyStep(delta);
+      }
+    },
+    [applyStep, step],
+  );
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    isEditing.current = true;
+    setInputText(e.target.value);
+  }, []);
+
+  const handleBlur = useCallback(() => {
+    isEditing.current = false;
+    const raw = inputText.trim();
+    if (raw === "") {
+      commit(null);
+      return;
+    }
+    const parsed = parseFloat(raw);
+    if (isNaN(parsed)) {
+      // Revert to last known good value
+      setInputText(currentValue != null ? formatNum(currentValue, formatOptions) : "");
+      return;
+    }
+    const clamped = clamp ? clampValue(parsed, min, max) : parsed;
+    setInputText(formatNum(clamped, formatOptions));
+    commit(clamped);
+  }, [inputText, currentValue, clamp, min, max, formatOptions, commit]);
+
+  // Keep display text in sync with controlled value changes (only when not editing)
+  const prevControlledValue = useRef(valueProp);
+  if (isControlled && valueProp !== prevControlledValue.current && !isEditing.current) {
+    prevControlledValue.current = valueProp;
+    const nextText = valueProp != null ? formatNum(valueProp, formatOptions) : "";
+    if (nextText !== inputText) setInputText(nextText);
+  }
+
+  const decrementDisabled =
+    disabled || readOnly || (min !== undefined && (currentValue ?? 0) <= min);
+  const incrementDisabled =
+    disabled || readOnly || (max !== undefined && (currentValue ?? 0) >= max);
+
+  return (
+    <InputGroup ref={ref} className={cn("w-36", className)} {...props}>
+      <InputGroupButton
+        aria-label="Decrease"
+        tabIndex={-1}
+        disabled={decrementDisabled}
+        onClick={() => applyStep(-step)}
+        className="rounded-r-none"
+      >
+        <Minus aria-hidden="true" />
+      </InputGroupButton>
+      <InputGroupInput
+        type="number"
+        id={id}
+        name={name}
+        value={inputText}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
+        aria-describedby={ariaDescribedby}
+        aria-invalid={ariaInvalid}
+        aria-required={ariaRequired}
+        className="text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+      />
+      <InputGroupButton
+        aria-label="Increase"
+        tabIndex={-1}
+        disabled={incrementDisabled}
+        onClick={() => applyStep(step)}
+        className="rounded-l-none"
+      >
+        <Plus aria-hidden="true" />
+      </InputGroupButton>
+    </InputGroup>
+  );
+});

package/src/components/page-shell/index.ts

@@ -0,0 +1 @@
+export { PageShell, type PageShellProps } from "./page-shell";

package/src/components/page-shell/page-shell.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Plus } from "lucide-react";
+import { expect, waitFor } from "storybook/test";
+import { PageShell } from "./page-shell";
+import { SectionHeader } from "../section-header";
+import { Button } from "../button";
+import { StatusBadge } from "../status-badge";
+import { ResultCount, ViewToolbar } from "../view-toolbar";
+
+const meta = {
+  title: "Layout/PageShell",
+  component: PageShell,
+  parameters: { layout: "fullscreen" },
+} satisfies Meta<typeof PageShell>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <PageShell header={<SectionHeader title="Settings" description="Manage your workspace." />}>
+      <div className="rounded-xl border bg-card p-6 text-body text-muted-foreground">Content</div>
+    </PageShell>
+  ),
+};
+
+/**
+ * `headerVariant="toolbar"` places a real `<ViewToolbar>` in `PageShell`'s
+ * header slot and pins it in POSITION (never a fixed height — see
+ * `Docs/View Toolbar Contract` R7) while the body scrolls beneath it. The
+ * outer `h-[420px] overflow-y-auto` div stands in for the `SidebarInset`
+ * scroll region `PageShell` is normally embedded in — `PageShell` itself
+ * never owns a scroll container (#367).
+ */
+export const ToolbarSticky: Story = {
+  render: function ToolbarStickyStory() {
+    return (
+      <div data-testid="scroll-region" className="h-[420px] overflow-y-auto">
+        <PageShell
+          headerVariant="toolbar"
+          header={
+            <ViewToolbar
+              info="Every pipeline run in this workspace from the last 30 days, newest first."
+              actions={
+                <Button size="sm">
+                  <Plus aria-hidden="true" />
+                  New
+                </Button>
+              }
+            >
+              <StatusBadge status="running" size="sm" />
+              <ResultCount count={24} total={128}>
+                runs
+              </ResultCount>
+            </ViewToolbar>
+          }
+        >
+          <div className="flex flex-col gap-3">
+            {Array.from({ length: 40 }, (_, i) => (
+              <div
+                key={i}
+                data-testid={i === 20 ? "marker-row" : undefined}
+                className="rounded-lg border bg-card p-4 text-body"
+              >
+                Row {i + 1}
+              </div>
+            ))}
+          </div>
+        </PageShell>
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const scrollRegion = canvasElement.querySelector<HTMLElement>('[data-testid="scroll-region"]');
+    const header = canvasElement.querySelector<HTMLElement>(
+      '[data-slot="page-shell-toolbar-header"]',
+    );
+    const marker = canvasElement.querySelector<HTMLElement>('[data-testid="marker-row"]');
+
+    await expect(scrollRegion).not.toBeNull();
+    await expect(header).not.toBeNull();
+    await expect(marker).not.toBeNull();
+
+    await expect(getComputedStyle(header!).position).toBe("sticky");
+
+    // Scroll past PageShell's own top padding first, so the header is already
+    // in its "stuck" (top: 0) state before the two measurements below — at
+    // scrollTop 0 the header still sits at its natural, un-stuck flow
+    // position (offset by the page padding), which is not what "pinned" means.
+    scrollRegion!.scrollTop = 100;
+    const headerTopStuck = header!.getBoundingClientRect().top;
+    const markerTopFirstScroll = marker!.getBoundingClientRect().top;
+
+    // Scroll the body further beneath the already-pinned header.
+    scrollRegion!.scrollTop = 600;
+
+    // The body actually moved underneath the header.
+    await waitFor(() => {
+      expect(marker!.getBoundingClientRect().top).toBeLessThan(markerTopFirstScroll);
+    });
+
+    // The header stayed pinned: its position is unchanged across the further scroll.
+    const headerTopAfterScroll = header!.getBoundingClientRect().top;
+    await expect(Math.abs(headerTopAfterScroll - headerTopStuck)).toBeLessThanOrEqual(1);
+  },
+};

package/src/components/page-shell/page-shell.test.tsx

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { PageShell } from "./page-shell";
+
+describe("PageShell", () => {
+  it("headerVariant omitted: renders the header inline with no sticky wrapper (AC2 — byte-identical default)", () => {
+    render(<PageShell header={<div data-testid="hdr">H</div>}>body</PageShell>);
+
+    const header = screen.getByTestId("hdr");
+    expect(screen.queryByTestId("page-shell-toolbar-header")).toBeNull();
+    expect(document.querySelector('[data-slot="page-shell-toolbar-header"]')).toBeNull();
+
+    let node: HTMLElement | null = header;
+    while (node) {
+      expect(node.className).not.toMatch(/(^|\s)sticky(\s|$)/);
+      node = node.parentElement;
+    }
+  });
+
+  it('headerVariant="default": same as omitted — no sticky wrapper', () => {
+    render(
+      <PageShell header={<div data-testid="hdr">H</div>} headerVariant="default">
+        body
+      </PageShell>,
+    );
+
+    expect(document.querySelector('[data-slot="page-shell-toolbar-header"]')).toBeNull();
+  });
+
+  it('headerVariant="toolbar": wraps the header in a sticky, bordered, blurred bar', () => {
+    render(
+      <PageShell header={<div data-testid="hdr">H</div>} headerVariant="toolbar">
+        body
+      </PageShell>,
+    );
+
+    const wrapper = document.querySelector('[data-slot="page-shell-toolbar-header"]');
+    expect(wrapper).not.toBeNull();
+    expect(wrapper).toContainElement(screen.getByTestId("hdr"));
+
+    const className = (wrapper as HTMLElement).className;
+    expect(className).toMatch(/(^|\s)sticky(\s|$)/);
+    expect(className).toContain("top-0");
+    expect(className).toContain("border-b");
+    expect(className).toContain("bg-background/95");
+
+    // Regression guard for ViewToolbar's R7 (wrap, never clip/fixed-height).
+    expect(className).not.toMatch(/(^|\s)h-\d/);
+    expect(className).not.toMatch(/overflow-hidden/);
+  });
+
+  it('headerVariant="toolbar" with no header prop: renders nothing, no empty sticky bar', () => {
+    render(<PageShell headerVariant="toolbar">body</PageShell>);
+
+    expect(document.querySelector('[data-slot="page-shell-toolbar-header"]')).toBeNull();
+  });
+});

package/src/components/page-shell/page-shell.tsx

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export interface PageShellProps {
+  children: ReactNode;
+  /** Optional header row (often a <SectionHeader />, or a <ViewToolbar> — see headerVariant). */
+  header?: ReactNode;
+  /**
+   * "default" (unset) — `header` renders inline, scrolls with the body.
+   * Byte-identical to today.
+   *
+   * "toolbar" — for a `<ViewToolbar>` header (`@elabs-ai/components-ui`,
+   * `Docs/View Toolbar Contract`): wraps `header` in a `sticky top-0` container
+   * with an opaque/blurred fill and a bottom hairline, so it stays pinned while
+   * the body scrolls beneath it. PLACES whatever node `header` is — it does not
+   * reimplement ViewToolbar's own info/left-cluster/actions grammar, and it does
+   * NOT cap the row's height (a `<ViewToolbar>` wraps at narrow widths; see
+   * `Docs/View Toolbar Contract` R7).
+   */
+  headerVariant?: "default" | "toolbar";
+  /** Constrain content width. Defaults to "xl". */
+  width?: "md" | "lg" | "xl" | "full";
+  className?: string;
+  contentClassName?: string;
+}
+
+const widthMap = {
+  md: "max-w-3xl",
+  lg: "max-w-5xl",
+  xl: "max-w-7xl",
+  full: "max-w-none",
+} as const;
+
+/** Page-level content container with consistent padding and max width. */
+export function PageShell({
+  children,
+  header,
+  headerVariant = "default",
+  width = "xl",
+  className,
+  contentClassName,
+}: PageShellProps) {
+  return (
+    <div className={cn("w-full px-4 py-6 sm:px-6 lg:px-8", className)}>
+      <div className={cn("mx-auto w-full space-y-6", widthMap[width], contentClassName)}>
+        {header ? (
+          headerVariant === "toolbar" ? (
+            <div
+              data-slot="page-shell-toolbar-header"
+              className="sticky top-0 z-10 border-b border-border bg-background/95 py-3 backdrop-blur"
+            >
+              {header}
+            </div>
+          ) : (
+            header
+          )
+        ) : null}
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/pagination/index.ts

@@ -0,0 +1,9 @@
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from "./pagination";

package/src/components/pagination/pagination.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./pagination";
+const meta = {
+  title: "Navigation/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      description: "Additional CSS classes applied to the pagination nav element.",
+      control: "text",
+      table: { category: "Styling" },
+    },
+    children: {
+      description: "Pagination content — compose with PaginationContent, PaginationItem, etc.",
+      control: false,
+      table: { category: "Content" },
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, type ComponentProps } from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { buttonVariants } from "../button";
+
+export function Pagination({ className, ...props }: ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+export const PaginationContent = forwardRef<HTMLUListElement, ComponentProps<"ul">>(
+  function PaginationContent({ className, ...props }, ref) {
+    return (
+      <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+    );
+  },
+);
+export const PaginationItem = forwardRef<HTMLLIElement, ComponentProps<"li">>(
+  function PaginationItem(props, ref) {
+    return <li ref={ref} {...props} />;
+  },
+);
+type PaginationLinkProps = { isActive?: boolean } & ComponentProps<"a">;
+export function PaginationLink({ className, isActive, ...props }: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      className={cn(
+        buttonVariants({ variant: isActive ? "outline" : "ghost", size: "icon" }),
+        "cursor-pointer",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export function PaginationPrevious({ className, ...props }: ComponentProps<"a">) {
+  return (
+    <a
+      aria-label="Go to previous page"
+      className={cn(buttonVariants({ variant: "ghost" }), "gap-1 ps-2.5 cursor-pointer", className)}
+      {...props}
+    >
+      <ChevronLeft className="size-4" data-rtl-flip />
+      <span>Previous</span>
+    </a>
+  );
+}
+export function PaginationNext({ className, ...props }: ComponentProps<"a">) {
+  return (
+    <a
+      aria-label="Go to next page"
+      className={cn(buttonVariants({ variant: "ghost" }), "gap-1 pe-2.5 cursor-pointer", className)}
+      {...props}
+    >
+      <span>Next</span>
+      <ChevronRight className="size-4" data-rtl-flip />
+    </a>
+  );
+}
+export function PaginationEllipsis({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}

package/src/components/popover/index.ts

@@ -0,0 +1 @@
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent } from "./popover";

package/src/components/popover/popover.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor, within } from "storybook/test";
+import { Button } from "../button";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+const meta = { title: "Overlays/Popover", component: Popover, tags: ["autodocs"] } satisfies Meta<
+  typeof Popover
+>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Open</Button>
+      </PopoverTrigger>
+      <PopoverContent>Place content for the popover here.</PopoverContent>
+    </Popover>
+  ),
+  // Clicking the trigger mounts the popover content into the Radix portal.
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("button", { name: "Open" }));
+    const body = within(canvasElement.ownerDocument.body);
+    const content = await body.findByText("Place content for the popover here.");
+    // waitFor rides out the Radix fade-in/zoom entrance animation (opacity
+    // starts at 0, which jest-dom counts as not-visible).
+    await waitFor(() => expect(content).toBeVisible());
+  },
+};

package/src/components/popover/popover.test.tsx

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+describe("Popover", () => {
+  it("opens content on trigger click", async () => {
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Inside</PopoverContent>
+      </Popover>,
+    );
+    await userEvent.click(screen.getByText("Open"));
+    expect(await screen.findByText("Inside")).toBeInTheDocument();
+  });
+});

package/src/components/popover/popover.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../lib/cn";
+
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export const PopoverContent = forwardRef<
+  ElementRef<typeof PopoverPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(function PopoverContent({ className, align = "center", sideOffset = 4, ...props }, ref) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 rounded-md bg-popover p-4 text-popover-foreground shadow-ring-md outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+});

package/src/components/progress/index.ts

@@ -0,0 +1 @@
+export { Progress, progressIndicatorVariants, type ProgressProps } from "./progress";