@stevederico/skateboard-ui 3.12.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # CHANGELOG
 
+4.1.0
+
+  Add menu/select typeahead
+  Fix popover focus management
+  Fix navigation-menu keyboard entry
+  Fix Command combobox ARIA
+  Fix tabs first tab-stop
+  Fix radio single tab-stop
+  Set menu available-height
+  Fix sheet/drawer exit animations
+  Reset floating position on close
+  Add a11y regression tests
+
+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/components/core/Command.js

@@ -10,6 +10,9 @@ function useCommand() {
 export function Command({ className, children, ...props }) {
     const [filter, setFilter] = useState('');
     const [selectedId, setSelectedId] = useState(null);
+    // Stable base id shared by the listbox container and every option, so the
+    // input's aria-controls / aria-activedescendant can reference them.
+    const listboxId = useId();
     const itemsRef = useRef(new Map()); // id -> { value, onSelect, disabled }
     const register = useCallback((id, meta) => {
         itemsRef.current.set(id, meta);
@@ -55,12 +58,18 @@ export function Command({ className, children, ...props }) {
     }, [selectedId]);
     const isVisible = useCallback((id) => visibleIds().includes(id), [visibleIds]);
     const visibleCount = visibleIds().length;
-    const value = useMemo(() => ({ filter, setFilter, selectedId, setSelectedId, register, unregister, isVisible, visibleCount, move, triggerSelected }), [filter, selectedId, register, unregister, isVisible, visibleCount, move, triggerSelected]);
-    return (_jsx(CommandContext.Provider, { value: value, children: _jsx("div", { role: "combobox", "aria-expanded": "true", className: className, ...props, children: children }) }));
+    const value = useMemo(() => ({ filter, setFilter, selectedId, setSelectedId, listboxId, register, unregister, isVisible, visibleCount, move, triggerSelected }), [filter, selectedId, listboxId, register, unregister, isVisible, visibleCount, move, triggerSelected]);
+    return (_jsx(CommandContext.Provider, { value: value, children: _jsx("div", { className: className, ...props, children: children }) }));
 }
 export function CommandInput({ className, placeholder, value: controlledValue, onValueChange, ...props }) {
-    const { filter, setFilter, move, triggerSelected } = useCommand();
+    const { filter, setFilter, move, triggerSelected, selectedId, listboxId, visibleCount } = useCommand();
     const value = controlledValue ?? filter;
+    // The listbox is considered "shown"/expanded whenever it has visible options.
+    const isExpanded = visibleCount > 0;
+    // aria-activedescendant points at the DOM id of the active option (selectedId
+    // is rendered verbatim as each CommandItem's id). Undefined when nothing is
+    // active, so screen readers don't reference a missing element.
+    const activeDescendant = isExpanded && selectedId ? selectedId : undefined;
     const handleChange = (e) => {
         const v = e.target.value;
         setFilter(v);
@@ -80,10 +89,16 @@ export function CommandInput({ className, placeholder, value: controlledValue, o
             triggerSelected();
         }
     };
-    return (_jsx("input", { role: "searchbox", autoComplete: "off", autoCorrect: "off", spellCheck: "false", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, className: className, ...props }));
+    return (
+    // The input is the combobox. Real DOM focus stays here during arrow
+    // navigation; only aria-activedescendant moves so screen readers announce
+    // the active option (WAI-ARIA combobox + activedescendant pattern).
+    _jsx("input", { role: "combobox", "aria-autocomplete": "list", "aria-expanded": isExpanded, "aria-controls": listboxId, "aria-activedescendant": activeDescendant, autoComplete: "off", autoCorrect: "off", spellCheck: "false", value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, className: className, ...props }));
 }
 export function CommandList({ className, children, ...props }) {
-    return (_jsx("div", { role: "listbox", className: className, ...props, children: children }));
+    const { listboxId } = useCommand();
+    // id matches the input's aria-controls so the combobox owns this listbox.
+    return (_jsx("div", { role: "listbox", id: listboxId, className: className, ...props, children: children }));
 }
 export function CommandEmpty({ className, children, ...props }) {
     const { visibleCount } = useCommand();
@@ -95,23 +110,34 @@ export function CommandGroup({ className, heading, children, ...props }) {
     return (_jsxs("div", { role: "group", className: className, ...props, children: [heading && (_jsx("div", { "cmdk-group-heading": "", role: "presentation", children: heading })), children] }));
 }
 export function CommandItem({ className, value, onSelect, disabled = false, children, ...props }) {
+    // This id is both the value tracked in selectedId and the option's DOM id,
+    // which is what the input's aria-activedescendant references.
     const id = useId();
     const { register, unregister, selectedId, setSelectedId, isVisible } = useCommand();
+    const optionRef = useRef(null);
     // Resolve a usable value string — fall back to children text if no value prop
     const resolvedValue = value ?? (typeof children === 'string' ? children : id);
     useEffect(() => {
         register(id, { value: String(resolvedValue), onSelect, disabled });
         return () => unregister(id);
     }, [id, resolvedValue, onSelect, disabled, register, unregister]);
+    const isSelected = selectedId === id;
+    // Focus stays on the input under the activedescendant model, so scroll the
+    // active option into view manually when it becomes active.
+    useEffect(() => {
+        if (isSelected)
+            optionRef.current?.scrollIntoView({ block: 'nearest' });
+    }, [isSelected]);
     if (!isVisible(id))
         return null;
-    const isSelected = selectedId === id;
     const handleClick = () => {
         if (disabled)
             return;
         onSelect?.(String(resolvedValue));
     };
-    return (_jsx("div", { role: "option", "aria-selected": isSelected, "data-selected": isSelected ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, onMouseEnter: () => !disabled && setSelectedId(id), onClick: handleClick, className: className, ...props, children: children }));
+    return (_jsx("div", { 
+        // Stable DOM id targeted by aria-activedescendant when this option is active.
+        id: id, ref: optionRef, role: "option", "aria-selected": isSelected, "data-selected": isSelected ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, onMouseEnter: () => !disabled && setSelectedId(id), onClick: handleClick, className: className, ...props, children: children }));
 }
 export function CommandSeparator({ className, ...props }) {
     return _jsx("div", { role: "separator", className: className, ...props });

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";