@stevederico/skateboard-ui 3.12.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # CHANGELOG
 
+4.0.0
+
+  Self-contained ui/ component tier (47 components, zero base-ui)
+  Remove vendored base-ui bundle (~2MB / 31k lines)
+  Native dialog for dialog/alert-dialog/sheet/drawer
+  In-house floating positioner, dismiss, presence, focus
+  shadcn/ui/* now linker shims re-exporting ui/*
+  render= and nativeButton kept as asChild compat
+  SelectValue renders the real selected label
+  Fix Slot handler composition, Button type, Escape stacking
+  Fix avatar fallback, separator role, tabs ids, form integration
+
 3.12.0
 
   Fix asChild button

package/README.md

@@ -2,7 +2,9 @@
 
 React component library for rapid application development. Built with TypeScript, TailwindCSS v4, and shadcn/ui.
 
-**Zero runtime npm dependencies.** Only React, React-DOM, and React Router are peer-resolved. Everything else — base-ui primitives, lucide icons, tailwind-merge, drag physics, command palette, date picker, theme provider — is vendored, ported, or recreated inside the repo.
+**Zero runtime npm dependencies.** Only React, React-DOM, and React Router are peer-resolved. Everything else — the 47 UI components, lucide icons, tailwind-merge, drag physics, command palette, date picker, theme provider — is authored, ported, or recreated inside the repo.
+
+**Self-contained components (v4.0).** Every component is now hand-written with no primitive framework underneath — the previously-vendored `@base-ui/react` bundle (~31k lines) is gone. Floating positioning, focus trapping, dismiss layers, and animations are small in-house hooks; modals use the native `<dialog>` element. The legacy `shadcn/ui/*` import paths still work — they re-export the new `ui/*` components — so existing apps need no changes.
 
 **TypeScript with full type declarations.** Source is TypeScript, compiled to plain JavaScript + `.d.ts` in `dist/` (`npm run build`). JavaScript apps consume the compiled JS exactly as before — import paths are unchanged — and TypeScript apps get real types for every export (`SkateboardConstants`, `User`, component props, `VariantProps`, typed icons).
 
@@ -37,7 +39,7 @@ That's it! You get routing, auth, layout, landing page, settings, and payments.
 
 ## Dependency Footprint
 
-Across the v3.x series, every npm runtime dep was either vendored, recreated, or dropped. v3.5 finished the job by vendoring `@base-ui/react`.
+Across the v3.x series, every npm runtime dep was either vendored, recreated, or dropped. v3.5 finished the job by vendoring `@base-ui/react`; **v4.0 removes that vendored bundle entirely** by rewriting every component to be self-contained.
 
 | | Hard deps | Optional peer deps | Total |
 |---|---|---|---|
@@ -48,7 +50,7 @@ Across the v3.x series, every npm runtime dep was either vendored, recreated, or
 | v3.3 | 2 | 0 | 2 |
 | v3.4 | 1 | 0 | 1 |
 | v3.5 | 0 | 0 | 0 |
-| **Now (v3.6+)** | **0** | **0** | **0** |
+| **Now (v4.0+)** | **0** | **0** | **0** |
 
 v3.10 converts the package to TypeScript — compiled JS + `.d.ts` ship in `dist/`; the dependency count is unchanged (`typescript` is a devDependency only).
 
@@ -60,15 +62,17 @@ Pre-built copies live in this repo so consumers don't pull them from npm. Refres
 
 | Source | Lives at | Refresh script |
 |---|---|---|
-| `@base-ui/react` + 5 transitive deps (`@floating-ui/react-dom`, `@floating-ui/utils`, `@babel/runtime`, `use-sync-external-store`, `@base-ui/utils`) | `shadcn/lib/base-ui/*.js` + `*.d.ts` (28 entry points + shared chunks) | `node scripts/vendor-base-ui.js` (requires `bun`; bump `BASE_UI_VERSION`) |
 | `lucide` icons (1700+) | `icons/*.tsx` | `node scripts/vendor-icons.js` (bump `LUCIDE_TAG`) |
 | `tailwind-merge` | `shadcn/lib/tailwind-merge.js` | `node scripts/vendor-tailwind-merge.js` (bump `TM_VERSION`) |
 
+`@base-ui/react` was vendored in v3.5 and **removed in v4.0** — the 47 components are now self-contained (see _Self-contained components_ above).
+
 ### Ported / recreated / inlined
 
 | Replaces | Lives at | Approach |
 |---|---|---|
-| `vaul` (drag gesture) | `shadcn/ui/drawer.tsx` | ported — drag math copied from vaul `src/index.tsx` (MIT, Emil Kowalski); base-ui Dialog as modal shell |
+| `@base-ui/react` (behavior) | `ui/*.tsx` + `ui/{use-floating,use-dismiss,use-presence,use-controllable-state,slot,portal}.tsx` | rewritten — small in-house hooks for positioning, dismiss, presence, focus; native `<dialog>` for modals |
+| `vaul` (drag gesture) | `ui/drawer.tsx` | ported — drag math copied from vaul `src/index.tsx` (MIT, Emil Kowalski) on a native `<dialog>` shell |
 | `cmdk` | `components/core/Command.tsx` | rewritten drop-in |
 | `react-day-picker` | `components/core/Calendar.tsx` | rewritten drop-in |
 | `next-themes` | `components/core/ThemeProvider.tsx` | rewritten drop-in |
@@ -85,6 +89,7 @@ Pre-built copies live in this repo so consumers don't pull them from npm. Refres
 | v3.3 | `Chart` | unused; consumers can install `recharts` directly |
 | v3.4 | `vaul` | drag physics ported; `Drawer` rebuilt on base-ui Dialog |
 | v3.5 | `@base-ui/react` | vendored; see table above |
+| v4.0 | `@base-ui/react` (vendored bundle) | removed; components rewritten self-contained on `ui/*` |
 
 ## Migrating to 3.0
 
@@ -118,7 +123,6 @@ Each vendored library has a script that pins a version, fetches the upstream rel
 
 | Library | Bump | Command | Host requirement |
 |---|---|---|---|
-| `@base-ui/react` | `BASE_UI_VERSION` in `scripts/vendor-base-ui.js` | `node scripts/vendor-base-ui.js` | [bun](https://bun.sh) |
 | `lucide` icons | `LUCIDE_TAG` in `scripts/vendor-icons.js` | `node scripts/vendor-icons.js` | Node |
 | `tailwind-merge` | `TM_VERSION` in `scripts/vendor-tailwind-merge.js` | `node scripts/vendor-tailwind-merge.js` | Node |
 
@@ -1230,56 +1234,58 @@ Import base theme and override as needed:
 
 Dark mode is automatic via CSS custom properties and the in-house `ThemeProvider` (`components/core/ThemeProvider.tsx`).
 
-## shadcn/ui Components
+## Components
+
+47 self-contained components available at `@stevederico/skateboard-ui/ui/*`. The legacy `@stevederico/skateboard-ui/ui/*` paths still resolve to the same components (re-export shims), so existing imports keep working.
 
-47 components available at `@stevederico/skateboard-ui/shadcn/ui/*`:
+Components follow the shadcn API. `asChild` renders the styling onto a single child element; the old base-ui `render={<El/>}` / `nativeButton` props are still accepted for backward compatibility.
 
 ```javascript
-import { Button } from '@stevederico/skateboard-ui/shadcn/ui/button';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from '@stevederico/skateboard-ui/shadcn/ui/card';
-import { Input } from '@stevederico/skateboard-ui/shadcn/ui/input';
-import { Label } from '@stevederico/skateboard-ui/shadcn/ui/label';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@stevederico/skateboard-ui/shadcn/ui/dialog';
-import { Avatar, AvatarFallback, AvatarImage } from '@stevederico/skateboard-ui/shadcn/ui/avatar';
-import { Badge } from '@stevederico/skateboard-ui/shadcn/ui/badge';
-import { Separator } from '@stevederico/skateboard-ui/shadcn/ui/separator';
-import { ScrollArea } from '@stevederico/skateboard-ui/shadcn/ui/scroll-area';
-import { Skeleton } from '@stevederico/skateboard-ui/shadcn/ui/skeleton';
-import { Alert, AlertDescription, AlertTitle } from '@stevederico/skateboard-ui/shadcn/ui/alert';
-import { Progress } from '@stevederico/skateboard-ui/shadcn/ui/progress';
-import { Switch } from '@stevederico/skateboard-ui/shadcn/ui/switch';
-import { Checkbox } from '@stevederico/skateboard-ui/shadcn/ui/checkbox';
-import { Textarea } from '@stevederico/skateboard-ui/shadcn/ui/textarea';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@stevederico/skateboard-ui/shadcn/ui/tooltip';
+import { Button } from '@stevederico/skateboard-ui/ui/button';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from '@stevederico/skateboard-ui/ui/card';
+import { Input } from '@stevederico/skateboard-ui/ui/input';
+import { Label } from '@stevederico/skateboard-ui/ui/label';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@stevederico/skateboard-ui/ui/dialog';
+import { Avatar, AvatarFallback, AvatarImage } from '@stevederico/skateboard-ui/ui/avatar';
+import { Badge } from '@stevederico/skateboard-ui/ui/badge';
+import { Separator } from '@stevederico/skateboard-ui/ui/separator';
+import { ScrollArea } from '@stevederico/skateboard-ui/ui/scroll-area';
+import { Skeleton } from '@stevederico/skateboard-ui/ui/skeleton';
+import { Alert, AlertDescription, AlertTitle } from '@stevederico/skateboard-ui/ui/alert';
+import { Progress } from '@stevederico/skateboard-ui/ui/progress';
+import { Switch } from '@stevederico/skateboard-ui/ui/switch';
+import { Checkbox } from '@stevederico/skateboard-ui/ui/checkbox';
+import { Textarea } from '@stevederico/skateboard-ui/ui/textarea';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@stevederico/skateboard-ui/ui/tooltip';
 ```
 
 ```javascript
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
-} from '@stevederico/skateboard-ui/shadcn/ui/select';
+} from '@stevederico/skateboard-ui/ui/select';
 
 import {
   DropdownMenu, DropdownMenuContent, DropdownMenuItem,
   DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
-} from '@stevederico/skateboard-ui/shadcn/ui/dropdown-menu';
+} from '@stevederico/skateboard-ui/ui/dropdown-menu';
 
 import {
   AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
   AlertDialogDescription, AlertDialogFooter, AlertDialogHeader,
   AlertDialogTitle, AlertDialogTrigger,
-} from '@stevederico/skateboard-ui/shadcn/ui/alert-dialog';
+} from '@stevederico/skateboard-ui/ui/alert-dialog';
 
 import {
   Accordion, AccordionContent, AccordionItem, AccordionTrigger,
-} from '@stevederico/skateboard-ui/shadcn/ui/accordion';
+} from '@stevederico/skateboard-ui/ui/accordion';
 
 import {
   Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
-} from '@stevederico/skateboard-ui/shadcn/ui/table';
+} from '@stevederico/skateboard-ui/ui/table';
 
 import {
   Tabs, TabsContent, TabsList, TabsTrigger,
-} from '@stevederico/skateboard-ui/shadcn/ui/tabs';
+} from '@stevederico/skateboard-ui/ui/tabs';
 ```
 
 ### Utilities
@@ -1307,7 +1313,7 @@ All components support dark mode automatically and accept a `className` prop for
 
 ### Hard dependencies
 
-None. `@base-ui/react` and all its transitive deps are vendored at `shadcn/lib/base-ui/`. See the dep-count table near the top of this README for the full vendoring history.
+None. As of v4.0 the components are self-contained — `@base-ui/react` is no longer vendored or required. See the dep-count table near the top of this README for the full history.
 
 ## Repository
 

package/dist/shadcn/ui/accordion.d.ts

@@ -1,6 +1 @@
-import { Accordion as AccordionPrimitive } from "../lib/base-ui/accordion.js";
-declare function Accordion({ className, ...props }: AccordionPrimitive.Root.Props): import("react").JSX.Element;
-declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react").JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props): import("react").JSX.Element;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export * from "../../ui/accordion.js";

package/dist/shadcn/ui/accordion.js

@@ -1,17 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Accordion as AccordionPrimitive } from "../lib/base-ui/accordion.js";
-import { cn } from "../lib/utils.js";
-import { ChevronDownIcon, ChevronUpIcon } from "../../icons/index.js";
-function Accordion({ className, ...props }) {
-    return (_jsx(AccordionPrimitive.Root, { "data-slot": "accordion", className: cn("flex w-full flex-col", className), ...props }));
-}
-function AccordionItem({ className, ...props }) {
-    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("not-last:border-b", className), ...props }));
-}
-function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("cursor-pointer group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className), ...props, children: [children, _jsx(ChevronDownIcon, {}), _jsx(ChevronUpIcon, {})] }) }));
-}
-function AccordionContent({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up", ...props, children: _jsx("div", { className: cn("h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), children: children }) }));
-}
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/accordion`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/accordion.js";

package/dist/shadcn/ui/alert-dialog.d.ts

@@ -1,18 +1 @@
-import * as React from "react";
-import { AlertDialog as AlertDialogPrimitive } from "../lib/base-ui/alert-dialog.js";
-import { Button } from "./button.js";
-declare function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props): React.JSX.Element;
-declare function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props): React.JSX.Element;
-declare function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props): React.JSX.Element;
-declare function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props): React.JSX.Element;
-declare function AlertDialogContent({ className, size, ...props }: AlertDialogPrimitive.Popup.Props & {
-    size?: "default" | "sm";
-}): React.JSX.Element;
-declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): React.JSX.Element;
-declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): React.JSX.Element;
-declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
-declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialogPrimitive.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+export * from "../../ui/alert-dialog.js";

package/dist/shadcn/ui/alert-dialog.js

@@ -1,43 +1,3 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { AlertDialog as AlertDialogPrimitive } from "../lib/base-ui/alert-dialog.js";
-import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
-function AlertDialog({ ...props }) {
-    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
-}
-function AlertDialogTrigger({ ...props }) {
-    return (_jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", className: "cursor-pointer", ...props }));
-}
-function AlertDialogPortal({ ...props }) {
-    return (_jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props }));
-}
-function AlertDialogOverlay({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
-}
-function AlertDialogContent({ className, size = "default", ...props }) {
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 text-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props })] }));
-}
-function AlertDialogHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
-}
-function AlertDialogFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn("flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className), ...props }));
-}
-function AlertDialogMedia({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-dialog-media", className: cn("mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className), ...props }));
-}
-function AlertDialogTitle({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className), ...props }));
-}
-function AlertDialogDescription({ className, ...props }) {
-    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
-}
-function AlertDialogAction({ className, ...props }) {
-    return (_jsx(Button, { "data-slot": "alert-dialog-action", className: cn(className), ...props }));
-}
-function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
-    return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-cancel", className: cn(className), render: _jsx(Button, { variant: variant, size: size }), ...props }));
-}
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/alert-dialog`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/alert-dialog.js";

package/dist/shadcn/ui/alert.d.ts

@@ -1,13 +1 @@
-import * as React from "react";
-import { type VariantProps } from "../lib/cva.js";
-declare const alertVariants: (props?: import("../lib/cva.js").CvaProps<{
-    variant: {
-        default: string;
-        destructive: string;
-    };
-}> | undefined) => string;
-declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
-declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Alert, AlertTitle, AlertDescription, AlertAction };
+export * from "../../ui/alert.js";

package/dist/shadcn/ui/alert.js

@@ -1,28 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cva } from "../lib/cva.js";
-import { cn } from "../lib/utils.js";
-const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
-    variants: {
-        variant: {
-            default: "bg-card text-card-foreground",
-            destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
-});
-function Alert({ className, variant, ...props }) {
-    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
-}
-function AlertTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-title", className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className), ...props }));
-}
-function AlertDescription({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-description", className: cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), ...props }));
-}
-function AlertAction({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "alert-action", className: cn("absolute top-2.5 right-3", className), ...props }));
-}
-export { Alert, AlertTitle, AlertDescription, AlertAction };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/alert`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/alert.js";

package/dist/shadcn/ui/aspect-ratio.d.ts

@@ -1,4 +1 @@
-declare function AspectRatio({ ratio, className, ...props }: React.ComponentProps<"div"> & {
-    ratio: number;
-}): import("react").JSX.Element;
-export { AspectRatio };
+export * from "../../ui/aspect-ratio.js";

package/dist/shadcn/ui/aspect-ratio.js

@@ -1,8 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cn } from "../lib/utils.js";
-function AspectRatio({ ratio, className, ...props }) {
-    return (_jsx("div", { "data-slot": "aspect-ratio", style: {
-            "--ratio": ratio,
-        }, className: cn("relative aspect-(--ratio)", className), ...props }));
-}
-export { AspectRatio };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/aspect-ratio`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/aspect-ratio.js";

package/dist/shadcn/ui/avatar.d.ts

@@ -1,11 +1 @@
-import * as React from "react";
-import { Avatar as AvatarPrimitive } from "../lib/base-ui/avatar.js";
-declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
-    size?: "default" | "sm" | "lg";
-}): React.JSX.Element;
-declare function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props): React.JSX.Element;
-declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
-declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };
+export * from "../../ui/avatar.js";

package/dist/shadcn/ui/avatar.js

@@ -1,24 +1,3 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { Avatar as AvatarPrimitive } from "../lib/base-ui/avatar.js";
-import { cn } from "../lib/utils.js";
-function Avatar({ className, size = "default", ...props }) {
-    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
-}
-function AvatarImage({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-full object-cover", className), ...props }));
-}
-function AvatarFallback({ className, ...props }) {
-    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
-}
-function AvatarBadge({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
-}
-function AvatarGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
-}
-function AvatarGroupCount({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
-}
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge, };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/avatar`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/avatar.js";

package/dist/shadcn/ui/badge.d.ts

@@ -1,14 +1 @@
-import { useRender } from "../lib/base-ui/use-render.js";
-import { type VariantProps } from "../lib/cva.js";
-declare const badgeVariants: (props?: import("../lib/cva.js").CvaProps<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-        ghost: string;
-        link: string;
-    };
-}> | undefined) => string;
-declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export { Badge, badgeVariants };
+export * from "../../ui/badge.js";

package/dist/shadcn/ui/badge.js

@@ -1,33 +1,3 @@
-import { mergeProps } from "../lib/base-ui/merge-props.js";
-import { useRender } from "../lib/base-ui/use-render.js";
-import { cva } from "../lib/cva.js";
-import { cn } from "../lib/utils.js";
-const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
-    variants: {
-        variant: {
-            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-            destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-            outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-            ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-            link: "text-primary underline-offset-4 hover:underline",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-    },
-});
-function Badge({ className, variant = "default", render, ...props }) {
-    return useRender({
-        defaultTagName: "span",
-        props: mergeProps({
-            className: cn(badgeVariants({ variant }), className),
-        }, props),
-        render,
-        state: {
-            slot: "badge",
-            variant,
-        },
-    });
-}
-export { Badge, badgeVariants };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/badge`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/badge.js";

package/dist/shadcn/ui/breadcrumb.d.ts

@@ -1,10 +1 @@
-import * as React from "react";
-import { useRender } from "../lib/base-ui/use-render.js";
-declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
-declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
-declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
-declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+export * from "../../ui/breadcrumb.js";

package/dist/shadcn/ui/breadcrumb.js

@@ -1,37 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { mergeProps } from "../lib/base-ui/merge-props.js";
-import { useRender } from "../lib/base-ui/use-render.js";
-import { cn } from "../lib/utils.js";
-import { ChevronRightIcon, MoreHorizontalIcon } from "../../icons/index.js";
-function Breadcrumb({ className, ...props }) {
-    return (_jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn(className), ...props }));
-}
-function BreadcrumbList({ className, ...props }) {
-    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5", className), ...props }));
-}
-function BreadcrumbItem({ className, ...props }) {
-    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props }));
-}
-function BreadcrumbLink({ className, render, ...props }) {
-    return useRender({
-        defaultTagName: "a",
-        props: mergeProps({
-            className: cn("cursor-pointer transition-colors hover:text-foreground", className),
-        }, props),
-        render,
-        state: {
-            slot: "breadcrumb-link",
-        },
-    });
-}
-function BreadcrumbPage({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props }));
-}
-function BreadcrumbSeparator({ children, className, ...props }) {
-    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? (_jsx(ChevronRightIcon, {})) }));
-}
-function BreadcrumbEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-5 items-center justify-center [&>svg]:size-4", className), ...props, children: [_jsx(MoreHorizontalIcon, {}), _jsx("span", { className: "sr-only", children: "More" })] }));
-}
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/breadcrumb`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/breadcrumb.js";

package/dist/shadcn/ui/button-group.d.ts

@@ -1,13 +1 @@
-import { useRender } from "../lib/base-ui/use-render.js";
-import { type VariantProps } from "../lib/cva.js";
-import { Separator } from "./separator.js";
-declare const buttonGroupVariants: (props?: import("../lib/cva.js").CvaProps<{
-    orientation: {
-        horizontal: string;
-        vertical: string;
-    };
-}> | undefined) => string;
-declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
-declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };
+export * from "../../ui/button-group.js";

package/dist/shadcn/ui/button-group.js

@@ -1,36 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { mergeProps } from "../lib/base-ui/merge-props.js";
-import { useRender } from "../lib/base-ui/use-render.js";
-import { cva } from "../lib/cva.js";
-import { cn } from "../lib/utils.js";
-import { Separator } from "./separator.js";
-const buttonGroupVariants = cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
-    variants: {
-        orientation: {
-            horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
-            vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
-        },
-    },
-    defaultVariants: {
-        orientation: "horizontal",
-    },
-});
-function ButtonGroup({ className, orientation, ...props }) {
-    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
-}
-function ButtonGroupText({ className, render, ...props }) {
-    return useRender({
-        defaultTagName: "div",
-        props: mergeProps({
-            className: cn("flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
-        }, props),
-        render,
-        state: {
-            slot: "button-group-text",
-        },
-    });
-}
-function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
-    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className), ...props }));
-}
-export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };
+// Linker shim: this path now re-exports the self-contained component from
+// `ui/button-group`. The legacy base-ui implementation was removed in 4.0.0.
+export * from "../../ui/button-group.js";

package/dist/shadcn/ui/button.d.ts

@@ -1,34 +1 @@
-import * as React from "react";
-import { Button as ButtonPrimitive } from "../lib/base-ui/button.js";
-import { type VariantProps } from "../lib/cva.js";
-declare const buttonVariants: (props?: import("../lib/cva.js").CvaProps<{
-    variant: {
-        default: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        destructive: string;
-        link: string;
-        gradient: string;
-    };
-    size: {
-        default: string;
-        xs: string;
-        sm: string;
-        lg: string;
-        icon: string;
-        "icon-xs": string;
-        "icon-sm": string;
-        "icon-lg": string;
-        cta: string;
-    };
-}> | undefined) => string;
-export interface ButtonProps extends React.ComponentProps<typeof ButtonPrimitive>, VariantProps<typeof buttonVariants> {
-    /** Render the single child element styled as a button (shadcn-style). Bridged onto Base UI's `render` prop. */
-    asChild?: boolean;
-}
-/**
- * Primary button component with variant and size support.
- */
-declare function Button({ className, variant, size, asChild, children, ...props }: ButtonProps): React.JSX.Element;
-export { Button, buttonVariants };
+export * from "../../ui/button.js";