@vendure-io/ui 2.0.0-beta.17 → 2.0.0-beta.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure-io/ui",
-  "version": "2.0.0-beta.17",
+  "version": "2.0.0-beta.19",
   "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",
@@ -50,7 +50,7 @@
     "@shikijs/themes": "^3.23.0",
     "@shikijs/transformers": "^3.22.0",
     "@tanstack/react-table": "^8.21.3",
-    "@vendure-io/design-tokens": "^2.0.0-beta.8",
+    "@vendure-io/design-tokens": "^2.0.0-beta.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/src/components/atoms/combobox.tsx

@@ -19,15 +19,26 @@ function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
   return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
 }
 
+// Field styling matches SelectTrigger, so a select-like combobox (the trigger
+// shows the value, the search input sits in the popup) looks like the other
+// form fields. ComboboxValue renders no element, so there is no value slot to
+// style.
 function ComboboxTrigger({
   className,
+  size = "default",
   children,
   ...props
-}: ComboboxPrimitive.Trigger.Props) {
+}: ComboboxPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      data-size={size}
+      className={cn(
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
       {...props}
     >
       {children}
@@ -68,14 +79,18 @@ function ComboboxInput({
       />
       <InputGroupAddon align="inline-end">
         {showTrigger && (
+          // The bare primitive, not ComboboxTrigger: the icon button inside
+          // the input group must not take the field styling.
           <InputGroupButton
             size="icon-xs"
             variant="ghost"
-            render={<ComboboxTrigger />}
+            render={<ComboboxPrimitive.Trigger />}
             data-slot="input-group-button"
             className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
             disabled={disabled}
-          />
+          >
+            <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+          </InputGroupButton>
         )}
         {showClear && <ComboboxClear disabled={disabled} />}
       </InputGroupAddon>

package/src/components/atoms/scroll-area.tsx

@@ -1,6 +1,5 @@
 "use client"
 
-import * as React from "react"
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
 
 import { cn } from "@vendure-io/ui/lib/utils"

package/src/components/atoms/tabs.tsx

@@ -1,6 +1,8 @@
 "use client"
 
+import { mergeProps } from "@base-ui/react/merge-props"
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@vendure-io/ui/lib/utils"
@@ -82,4 +84,65 @@ function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
   )
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
+// Link tabs: section navigation where each tab is a route. They look like the
+// line variant, but they are a <nav> of links with aria-current="page", not a
+// tablist. Base UI Tabs would put role="tab" on a link and expect a panel for
+// each tab, and the router already owns which section shows.
+function TabsNav({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      data-slot="tabs-nav"
+      className={cn(
+        // The padding keeps the focus ring and the underline inside the
+        // scroll box, which clips everything outside it.
+        "text-muted-foreground flex h-9 max-w-full items-center gap-1 overflow-x-auto p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+// `active` sets aria-current="page". The style reads aria-current, so a router
+// link that sets it on the active route (TanStack Router, React Router's
+// NavLink) works through `render` without `active`.
+function TabsLink({
+  className,
+  active,
+  render,
+  ...props
+}: useRender.ComponentProps<"a"> & { active?: boolean }) {
+  return useRender({
+    defaultTagName: "a",
+    render,
+    props: mergeProps<"a">(
+      {
+        // Leave the attribute to the router link unless `active` is set.
+        ...(active !== undefined && {
+          "aria-current": active ? ("page" as const) : undefined,
+        }),
+        className: cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-full shrink-0 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-[3px] focus-visible:outline-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "aria-[current=page]:text-foreground dark:aria-[current=page]:text-foreground",
+          // The underline sits on the bottom edge of the nav, like the line variant.
+          "after:bg-foreground after:absolute after:inset-x-0 after:bottom-[-4px] after:h-0.5 after:opacity-0 after:transition-opacity aria-[current=page]:after:opacity-100",
+          className
+        ),
+      },
+      props
+    ),
+    state: {
+      slot: "tabs-link",
+    },
+  })
+}
+
+export {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  TabsNav,
+  TabsLink,
+  tabsListVariants,
+}

package/src/components/molecules/page-header.tsx

@@ -6,12 +6,16 @@ import type * as React from 'react';
 // header and lets variance in the wild (back links, badge rows beside the title,
 // mono subtitles) live as free children rather than as an ever-growing prop set.
 
-/** The header row: title/description on the left, actions on the right. */
+/**
+ * The header row: title/description on the left, actions on the right. The row
+ * wraps, so on a narrow screen the actions move below the title instead of
+ * squeezing it.
+ */
 function PageHeader({ className, ...props }: React.ComponentProps<'header'>) {
   return (
     <header
       data-slot="page-header"
-      className={cn('flex items-start justify-between gap-4', className)}
+      className={cn('flex flex-wrap items-start justify-between gap-4', className)}
       {...props}
     />
   );
@@ -48,7 +52,7 @@ function PageHeaderDescription({ className, ...props }: React.ComponentProps<'p'
   );
 }
 
-/** Right-hand action slot (buttons, menus). Stays put as the title wraps. */
+/** Right-hand action slot (buttons, menus). Moves below the title when the row has no room. */
 function PageHeaderActions({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div

package/src/components/molecules/state-views/empty-state.tsx

@@ -25,6 +25,12 @@ export interface EmptyStateProps extends Omit<React.ComponentProps<typeof Empty>
   description?: React.ReactNode;
   /** Actions/CTA — rendered in the content slot below the header. */
   children?: React.ReactNode;
+  /**
+   * Draw the dashed box. Defaults to `true`. Set `false` when the empty state
+   * fills a region that already has a frame, such as a table body: the table
+   * owns its perimeter.
+   */
+  bordered?: boolean;
 }
 
 /**
@@ -42,6 +48,7 @@ function EmptyState({
   title,
   description,
   children,
+  bordered = true,
   className,
   ...props
 }: EmptyStateProps) {
@@ -57,7 +64,11 @@ function EmptyState({
     ) : null;
 
   return (
-    <Empty data-slot="empty-state" className={cn('border', className)} {...props}>
+    <Empty
+      data-slot="empty-state"
+      className={cn(bordered ? 'border' : 'rounded-none', className)}
+      {...props}
+    >
       <EmptyHeader>
         {resolvedIllustration ? (
           <EmptyMedia>{resolvedIllustration}</EmptyMedia>