@vendure-io/ui 1.2.0 → 2.0.0-beta.0

package/src/components/{ui → atoms}/popover.tsx

@@ -41,7 +41,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden duration-100",
+            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden motion-reduce:animate-none data-open:duration-(--transition-duration-normal) data-open:ease-(--ease-out) data-closed:duration-(--transition-duration-fast) data-closed:ease-(--ease-in)",
             className
           )}
           {...props}
@@ -65,7 +65,7 @@ function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
   return (
     <PopoverPrimitive.Title
       data-slot="popover-title"
-      className={cn("font-medium", className)}
+      className={cn("text-style-card-title", className)}
       {...props}
     />
   )

package/src/components/{ui → atoms}/select.tsx

@@ -28,7 +28,6 @@ function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
   )
 }
 
-// [vendure] shadow removed for flat look — restore if overwritten by shadcn upgrade
 function SelectTrigger({
   className,
   size = "default",
@@ -57,7 +56,7 @@ function SelectTrigger({
   )
 }
 
-// [vendure] changed w-(--anchor-width) to min-w-(--anchor-width) so dropdown expands to fit content
+// min-w-(--anchor-width) rather than w-(--anchor-width) so the popup can expand beyond the trigger to fit content
 function SelectContent({
   className,
   children,
@@ -72,8 +71,27 @@ function SelectContent({
     SelectPrimitive.Positioner.Props,
     "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
   >) {
+  // Force the popup to remount when the set of items changes. Base UI's Select
+  // keeps an internal item registry that doesn't refresh when items change
+  // while the controlled value stays the same (e.g. a value="" fire-and-forget
+  // pattern used for state transitions), leaving stale items selectable.
+  // Re-keying on the children's values remounts the popup so items re-register.
+  // Only inspects top-level children — items nested in a SelectGroup or
+  // fragment won't contribute to the key.
+  const childrenKey = React.useMemo(
+    () =>
+      React.Children.toArray(children)
+        .map((child) =>
+          React.isValidElement(child)
+            ? String((child.props as { value?: unknown }).value ?? child.key)
+            : ""
+        )
+        .join("|"),
+    [children]
+  )
+
   return (
-    <SelectPrimitive.Portal>
+    <SelectPrimitive.Portal key={childrenKey}>
       <SelectPrimitive.Positioner
         side={side}
         sideOffset={sideOffset}
@@ -85,7 +103,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none", className )}
+          className={cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) min-w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 motion-reduce:animate-none data-open:duration-(--transition-duration-normal) data-open:ease-(--ease-out) data-closed:duration-(--transition-duration-fast) data-closed:ease-(--ease-in) data-[align-trigger=true]:animate-none", className )}
           {...props}
         >
           <SelectScrollUpButton />

package/src/components/{ui → atoms}/sheet.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 
 import { cn } from "@vendure-io/ui/lib/utils"
-import { Button } from "@vendure-io/ui/components/ui/button"
+import { Button } from "@vendure-io/ui/components/atoms/button"
 import { XIcon } from "lucide-react"
 
 function Sheet({ ...props }: SheetPrimitive.Root.Props) {
@@ -28,7 +28,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 motion-reduce:animate-none data-open:duration-(--transition-duration-normal) data-open:ease-(--ease-out) data-closed:duration-(--transition-duration-fast) data-closed:ease-(--ease-in) data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
         className
       )}
       {...props}
@@ -53,7 +53,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "bg-overlay data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition motion-reduce:animate-none motion-reduce:transition-none data-open:duration-(--transition-duration-normal) data-open:ease-(--ease-out) data-closed:duration-(--transition-duration-fast) data-closed:ease-(--ease-in) data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-lg data-[side=right]:sm:max-w-lg",
           className
         )}
         {...props}
@@ -104,7 +104,7 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground font-medium", className)}
+      className={cn("text-foreground text-style-section-title", className)}
       {...props}
     />
   )

package/src/components/{ui → atoms}/sidebar.tsx

@@ -7,22 +7,22 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { useIsMobile } from "@vendure-io/ui/hooks/use-mobile"
 import { cn } from "@vendure-io/ui/lib/utils"
-import { Button } from "@vendure-io/ui/components/ui/button"
-import { Input } from "@vendure-io/ui/components/ui/input"
-import { Separator } from "@vendure-io/ui/components/ui/separator"
+import { Button } from "@vendure-io/ui/components/atoms/button"
+import { Input } from "@vendure-io/ui/components/atoms/input"
+import { Separator } from "@vendure-io/ui/components/atoms/separator"
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@vendure-io/ui/components/ui/sheet"
-import { Skeleton } from "@vendure-io/ui/components/ui/skeleton"
+} from "@vendure-io/ui/components/atoms/sheet"
+import { Skeleton } from "@vendure-io/ui/components/atoms/skeleton"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@vendure-io/ui/components/ui/tooltip"
+} from "@vendure-io/ui/components/atoms/tooltip"
 import { PanelLeftIcon } from "lucide-react"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"

package/src/components/atoms/skeleton.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@vendure-io/ui/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn(
+        "animate-shimmer motion-reduce:animate-none motion-reduce:bg-none motion-reduce:bg-muted rounded-md bg-[length:200%_100%] bg-[linear-gradient(90deg,var(--color-muted)_25%,var(--color-accent)_50%,var(--color-muted)_75%)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/{ui → atoms}/slider.tsx

@@ -44,7 +44,6 @@ function Slider({
             className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
           />
         </SliderPrimitive.Track>
-        {/* [vendure] shadow removed for flat look — restore if overwritten by shadcn upgrade */}
         {Array.from({ length: _values.length }, (_, index) => (
           <SliderPrimitive.Thumb
             data-slot="slider-thumb"

package/src/components/{ui → atoms}/sonner.tsx

@@ -40,7 +40,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         classNames: {
           toast: "cn-toast",
-          // [vendure] Override Sonner's hardcoded #3f3f3f description colour
+          // Override Sonner's hardcoded #3f3f3f description colour
           // with our semantic muted-foreground token for consistent contrast.
           // See: https://github.com/vendurehq/design/issues/5
           description: "!text-muted-foreground",

package/src/components/{ui → atoms}/switch.tsx

@@ -4,7 +4,6 @@ import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
 
 import { cn } from "@vendure-io/ui/lib/utils"
 
-// [vendure] shadow removed for flat look — restore if overwritten by shadcn upgrade
 function Switch({
   className,
   size = "default",

package/src/components/{ui → atoms}/tabs.tsx

@@ -28,7 +28,7 @@ const tabsListVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-muted",
+        default: "bg-inset",
         line: "gap-1 bg-transparent",
       },
     },
@@ -53,15 +53,17 @@ function TabsList({
   )
 }
 
-// [vendure] shadow removed for flat look — restore if overwritten by shadcn upgrade
 function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
   return (
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       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-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent",
+        // ADR 0001: the active trigger lifts to surface-raised out of the inset
+        // track in both themes. Dark keeps a hairline — lightness alone can't
+        // separate a 0.21 thumb near the black end of the ramp.
+        "data-active:bg-surface-raised dark:data-active:border-input dark:data-active:text-foreground data-active:text-foreground",
         "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}

package/src/components/{ui → atoms}/textarea.tsx

@@ -2,7 +2,6 @@ import * as React from "react"
 
 import { cn } from "@vendure-io/ui/lib/utils"
 
-// [vendure] shadow removed for flat look — restore if overwritten by shadcn upgrade
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea

package/src/components/{ui → atoms}/toggle-group.tsx

@@ -6,7 +6,7 @@ import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group
 import { type VariantProps } from "class-variance-authority"
 
 import { cn } from "@vendure-io/ui/lib/utils"
-import { toggleVariants } from "@vendure-io/ui/components/ui/toggle"
+import { toggleVariants } from "@vendure-io/ui/components/atoms/toggle"
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & {
@@ -20,7 +20,6 @@ const ToggleGroupContext = React.createContext<
   orientation: "horizontal",
 })
 
-// [vendure] shadow removed for flat look — restore if overwritten by shadcn upgrade
 function ToggleGroup({
   className,
   variant,
@@ -73,7 +72,8 @@ function ToggleGroupItem({
       data-size={context.size || size}
       data-spacing={context.spacing}
       className={cn(
-        "data-[state=on]:bg-muted shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        // Base UI's Toggle emits data-pressed, never Radix's data-[state=on] — the pressed style comes from toggleVariants via its aria-pressed rule
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,

package/src/components/{ui → atoms}/toggle.tsx

@@ -5,7 +5,6 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@vendure-io/ui/lib/utils"
 
-// [vendure] shadow removed for flat look — restore if overwritten by shadcn upgrade
 const toggleVariants = cva(
   "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {

package/src/components/{ui → atoms}/tooltip.tsx

@@ -47,10 +47,11 @@ function TooltipContent({
         sideOffset={sideOffset}
         className="isolate z-50"
       >
+        {/* Base UI never emits Radix-style data-state attributes — data-[state=delayed-open]:* selectors would be dead here; data-open:* covers the open animation */}
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs",
+            "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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs motion-reduce:animate-none data-open:duration-(--transition-duration-normal) data-open:ease-(--ease-out) data-closed:duration-(--transition-duration-fast) data-closed:ease-(--ease-in)",
             className
           )}
           {...props}

package/src/components/molecules/anonymized-token.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import {
+  CopyButton,
+  type CopyButtonProps,
+} from '@vendure-io/ui/components/molecules/copyable-text';
+import { chipChromeClass } from '@vendure-io/ui/components/molecules/id-chip';
+import { cn } from '@vendure-io/ui/lib/utils';
+import type * as React from 'react';
+import { useState } from 'react';
+
+function clampLength(value: number): number {
+  return Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0;
+}
+
+function getTokenPreview(
+  value: string,
+  prefixLength: number,
+  suffixLength: number,
+  separator: string,
+): string {
+  const prefix = clampLength(prefixLength);
+  const suffix = clampLength(suffixLength);
+
+  if (prefix === 0 && suffix === 0) return separator;
+
+  if (value.length <= prefix + suffix) {
+    const visibleLength = Math.max(1, Math.min(prefix || suffix, Math.floor(value.length / 2)));
+    return `${value.slice(0, visibleLength)}${separator}`;
+  }
+
+  return `${value.slice(0, prefix)}${separator}${suffix > 0 ? value.slice(-suffix) : ''}`;
+}
+
+interface AnonymizedTokenProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+  /** Full token copied by the button. Never rendered in full by the component. */
+  value: string | null | undefined;
+  /** Remove the blur from the preview on hover/focus. @default true */
+  revealOnHover?: boolean;
+  /** Characters shown at the start of the preview. @default 8 */
+  previewPrefixLength?: number;
+  /** Characters shown at the end of the preview. @default 4 */
+  previewSuffixLength?: number;
+  /** Text placed between visible preview segments. @default "..." */
+  previewSeparator?: string;
+  /** Accessible name while the preview is blurred. @default "Partially obscured token" */
+  obscuredLabel?: string;
+  /** Accessible name while the preview is sharp. @default "Partially visible token" */
+  previewLabel?: string;
+  /** Rendered for nullish or empty values. @default "-" */
+  fallback?: React.ReactNode;
+  /** Render the copy affordance. @default true */
+  copyable?: boolean;
+  /** How long the check-mark feedback stays visible, in ms. */
+  timeout?: CopyButtonProps['timeout'];
+  /** Called after a successful copy. Wire your toast here. */
+  onCopied?: CopyButtonProps['onCopied'];
+  /** Called when the clipboard write fails. */
+  onCopyError?: CopyButtonProps['onCopyError'];
+  /** Accessible label before copying. @default "Copy token" */
+  copyLabel?: CopyButtonProps['copyLabel'];
+  /** Accessible label while the copied state is active. @default "Token copied" */
+  copiedLabel?: CopyButtonProps['copiedLabel'];
+}
+
+/**
+ * Displays a blurred, truncated token preview while copying the original value
+ * in full.
+ *
+ * This is presentation, not a security boundary: the full token still reaches
+ * the client so the explicit copy action can write it to the clipboard.
+ */
+function AnonymizedToken({
+  value,
+  revealOnHover = true,
+  previewPrefixLength = 8,
+  previewSuffixLength = 4,
+  previewSeparator = '...',
+  obscuredLabel = 'Partially obscured token',
+  previewLabel = 'Partially visible token',
+  fallback = '-',
+  copyable = true,
+  timeout,
+  onCopied,
+  onCopyError,
+  copyLabel = 'Copy token',
+  copiedLabel = 'Token copied',
+  className,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  ...props
+}: AnonymizedTokenProps) {
+  const [previewRevealed, setPreviewRevealed] = useState(false);
+
+  if (!value) {
+    return (
+      <span
+        data-slot="anonymized-token"
+        className={cn('text-muted-foreground text-sm', className)}
+        {...props}
+      >
+        {fallback}
+      </span>
+    );
+  }
+
+  const preview = getTokenPreview(
+    value,
+    previewPrefixLength,
+    previewSuffixLength,
+    previewSeparator,
+  );
+  const showRevealed = revealOnHover && previewRevealed;
+
+  return (
+    <span
+      data-slot="anonymized-token"
+      role="group"
+      className={chipChromeClass(copyable, className)}
+      onMouseEnter={(event) => {
+        onMouseEnter?.(event);
+        if (revealOnHover) setPreviewRevealed(true);
+      }}
+      onMouseLeave={(event) => {
+        onMouseLeave?.(event);
+        if (revealOnHover) setPreviewRevealed(false);
+      }}
+      onFocus={(event) => {
+        onFocus?.(event);
+        if (revealOnHover) setPreviewRevealed(true);
+      }}
+      onBlur={(event) => {
+        onBlur?.(event);
+        if (revealOnHover && !event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setPreviewRevealed(false);
+        }
+      }}
+      {...props}
+    >
+      {/* Blur is the only thing that sets a token apart from a plain `IdChip`;
+          the pill chrome is shared. No `overflow-hidden` here — it would clip
+          the blur halo — and the full value is never surfaced via `title`. */}
+      <code
+        data-slot="anonymized-token-value"
+        aria-hidden="true"
+        data-revealed={showRevealed || undefined}
+        className="blur-[1px] transition-[filter] data-[revealed]:blur-none"
+      >
+        {preview}
+      </code>
+      <span className="sr-only">{showRevealed ? previewLabel : obscuredLabel}</span>
+      {copyable ? (
+        <CopyButton
+          value={value}
+          timeout={timeout}
+          onCopied={onCopied}
+          onCopyError={onCopyError}
+          copyLabel={copyLabel}
+          copiedLabel={copiedLabel}
+          className="relative size-4 after:absolute after:-inset-1"
+        />
+      ) : null}
+    </span>
+  );
+}
+
+export { AnonymizedToken };
+export type { AnonymizedTokenProps };

package/src/components/molecules/chip.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { Badge, type badgeVariants } from '@vendure-io/ui/components/atoms/badge';
+import { cn } from '@vendure-io/ui/lib/utils';
+import type { VariantProps } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
+import type * as React from 'react';
+
+interface ChipProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+  /** Leading icon slot. */
+  icon?: React.ReactNode;
+  /**
+   * Presence of this handler renders the remove (×) button; the caller closes
+   * over its own id (`onRemove={() => remove(item.id)}`). Absent → static chip.
+   */
+  onRemove?: () => void;
+  /**
+   * Accessible label for the remove button (e.g. `Remove ${name}`). Required
+   * whenever `onRemove` is set — the × has no text otherwise.
+   */
+  removeLabel?: string;
+  /** Dims the chip and disables removal (e.g. a pending un-assign mutation). */
+  disabled?: boolean;
+}
+
+/**
+ * A compact, optionally removable tag built on the `Badge` atom. Generalizes the
+ * hand-rolled entity chips (facet-value / channel / customer-group) — the label
+ * is free `children`, and secondary text is a composition:
+ *
+ * ```tsx
+ * <Chip onRemove={() => remove(fv.id)} removeLabel={`Remove ${fv.name}`}>
+ *   {fv.name} <span className="text-muted-foreground">in {facet.name}</span>
+ * </Chip>
+ * ```
+ */
+function Chip({
+  className,
+  variant,
+  icon,
+  onRemove,
+  removeLabel,
+  disabled,
+  children,
+  ...props
+}: ChipProps) {
+  if (process.env.NODE_ENV !== 'production' && onRemove && !removeLabel) {
+    console.warn(
+      'Chip: `removeLabel` is required when `onRemove` is set — the remove button has no accessible name otherwise. Pass e.g. removeLabel="Remove <name>".',
+    );
+  }
+
+  return (
+    <Badge
+      data-slot="chip"
+      variant={variant}
+      data-disabled={disabled ? '' : undefined}
+      className={cn(
+        'max-w-full gap-1',
+        onRemove && 'pr-1',
+        disabled && 'pointer-events-none opacity-60',
+        className,
+      )}
+      {...props}
+    >
+      {icon}
+      <span className="truncate">{children}</span>
+      {onRemove ? (
+        <button
+          type="button"
+          data-slot="chip-remove"
+          disabled={disabled}
+          aria-label={removeLabel}
+          onClick={onRemove}
+          className="-mr-0.5 ml-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-full text-current/70 hover:bg-black/10 hover:text-current disabled:pointer-events-none dark:hover:bg-white/10"
+        >
+          <XIcon className="size-3" />
+        </button>
+      ) : null}
+    </Badge>
+  );
+}
+
+export { Chip };
+export type { ChipProps };