@vendure-io/ui 1.0.5 → 1.1.0

package/README.md

@@ -29,8 +29,57 @@ import { cn } from "@vendure-io/ui/lib/utils";
 | `@vendure-io/ui/components/ui/*` | shadcn/ui primitives (button, dialog, input, etc.) |
 | `@vendure-io/ui/components/custom/*` | Vendure-specific components |
 | `@vendure-io/ui/lib/*` | Utilities (`cn`, etc.) |
+| `@vendure-io/ui/lib/base-ui` | `@base-ui/react` primitive namespaces (see below) |
 | `@vendure-io/ui/hooks/*` | Shared React hooks |
 
+## Customizing wrapper components
+
+The components under `components/ui/*` are thin wrappers around [`@base-ui/react`](https://base-ui.com/) primitives. To override a single subcomponent (e.g. swap `DialogTitle` for one with a different font) while re-using the rest, import the underlying primitive namespace from `@vendure-io/ui/lib/base-ui` rather than from `@base-ui/react` directly:
+
+```tsx
+// In your own dialog.tsx
+import { DialogPrimitive } from "@vendure-io/ui/lib/base-ui";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTrigger,
+} from "@vendure-io/ui/components/ui/dialog";
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTrigger,
+};
+
+export function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("font-display text-lg", className)}
+      {...props}
+    />
+  );
+}
+```
+
+Each primitive is exposed as a TypeScript namespace, so you get both the runtime component (`<DialogPrimitive.Title />`) and its prop types (`DialogPrimitive.Title.Props`) from the same import. This means you don't need `@base-ui/react` as a direct dependency in your project — `@vendure-io/ui` is the single source of truth for both wrappers and primitives.
+
+Available primitives include `AccordionPrimitive`, `AlertDialogPrimitive`, `AvatarPrimitive`, `ButtonPrimitive`, `CheckboxPrimitive`, `CollapsiblePrimitive`, `ComboboxPrimitive`, `ContextMenuPrimitive`, `DialogPrimitive`, `InputPrimitive`, `MenuPrimitive`, `MenubarPrimitive`, `NavigationMenuPrimitive`, `PopoverPrimitive`, `PreviewCardPrimitive`, `ProgressPrimitive`, `RadioPrimitive`, `RadioGroupPrimitive`, `ScrollAreaPrimitive`, `SelectPrimitive`, `SeparatorPrimitive`, `SliderPrimitive`, `SwitchPrimitive`, `TabsPrimitive`, `TogglePrimitive`, `ToggleGroupPrimitive`, `TooltipPrimitive`, plus the `mergeProps` and `useRender` helpers.
+
+> Where two wrappers share the same base-ui primitive (e.g. both `dialog` and `sheet` are built on `Dialog`; both `dropdown-menu` and `menubar` on `Menu`), the primitive is exposed under its canonical base-ui name only.
+
 ## License
 
 See [LICENSE.md](../../LICENSE.md) for details.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "React component library for Vendure, built on shadcn/ui and Tailwind v4",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://github.com/vendurehq/design/tree/main/packages/ui",
@@ -10,6 +10,7 @@
     "directory": "packages/ui"
   },
   "type": "module",
+  "sideEffects": false,
   "exports": {
     "./components/ui/*": "./src/components/ui/*.tsx",
     "./components/custom/*": "./src/components/custom/*.tsx",
@@ -44,7 +45,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.2.0",
-    "@vendure-io/design-tokens": "^1.1.1",
+    "@vendure-io/design-tokens": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/src/lib/base-ui.ts

@@ -0,0 +1,53 @@
+/**
+ * Re-exports of `@base-ui/react` primitive namespaces.
+ *
+ * Why this exists: the wrapper components in `@vendure-io/ui/components/ui/*`
+ * are intentionally thin layers over `@base-ui/react` primitives. Consumers
+ * (notably `@vendure/dashboard`) often need to override a single subcomponent
+ * — e.g. swap `DialogTitle` for one that uses a different font — while
+ * re-exporting the rest of the wrapper. To do that they need access to the
+ * underlying primitive's types and components (e.g. `Dialog.Title.Props`).
+ *
+ * Exposing the primitives here means consumers can drop `@base-ui/react` as
+ * a direct dependency entirely — `@vendure-io/ui` becomes the single source
+ * of truth for both the wrapper and the primitive substrate.
+ *
+ * Each primitive is a TS namespace, so both values (`<DialogPrimitive.Title />`)
+ * and types (`DialogPrimitive.Title.Props`) are available from the same
+ * import.
+ *
+ * Where two wrapper files share a base-ui primitive (e.g. `Dialog` is used
+ * by both `dialog.tsx` and `sheet.tsx`; `Menu` by `dropdown-menu.tsx` and
+ * `menubar.tsx`), we expose the canonical base-ui name only — they resolve
+ * to the same underlying type.
+ */
+
+export { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+export { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+export { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+export { Button as ButtonPrimitive } from '@base-ui/react/button';
+export { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
+export { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+export { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+export { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';
+export { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
+export { Input as InputPrimitive } from '@base-ui/react/input';
+export { Menu as MenuPrimitive } from '@base-ui/react/menu';
+export { Menubar as MenubarPrimitive } from '@base-ui/react/menubar';
+export { mergeProps } from '@base-ui/react/merge-props';
+export { NavigationMenu as NavigationMenuPrimitive } from '@base-ui/react/navigation-menu';
+export { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+export { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+export { Progress as ProgressPrimitive } from '@base-ui/react/progress';
+export { Radio as RadioPrimitive } from '@base-ui/react/radio';
+export { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+export { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+export { Select as SelectPrimitive } from '@base-ui/react/select';
+export { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+export { Slider as SliderPrimitive } from '@base-ui/react/slider';
+export { Switch as SwitchPrimitive } from '@base-ui/react/switch';
+export { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+export { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+export { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+export { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+export { useRender } from '@base-ui/react/use-render';