@open-mercato/ui 0.6.2-develop.3372.1.de9a169973 → 0.6.2-develop.3380.1.bb14509041

package/src/primitives/__tests__/sheet.test.tsx

@@ -0,0 +1,152 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../sheet'
+
+function renderControlled(
+  initial = false,
+  contentProps: Partial<React.ComponentProps<typeof SheetContent>> = {},
+) {
+  function Harness() {
+    const [open, setOpen] = React.useState(initial)
+    return (
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild>
+          <button type="button">Open</button>
+        </SheetTrigger>
+        <SheetContent {...contentProps}>
+          <SheetHeader>
+            <SheetTitle>Notifications</SheetTitle>
+            <SheetDescription>Recent activity from your team.</SheetDescription>
+          </SheetHeader>
+          <div data-testid="sheet-body">body</div>
+          <SheetFooter>
+            <SheetClose asChild>
+              <button type="button" data-testid="explicit-close">
+                Close
+              </button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+  return render(<Harness />)
+}
+
+describe('Sheet primitive', () => {
+  it('does not render content when closed', () => {
+    renderControlled(false)
+    expect(screen.queryByText('Notifications')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('sheet-body')).not.toBeInTheDocument()
+  })
+
+  it('opens when the trigger is clicked', () => {
+    renderControlled(false)
+    fireEvent.click(screen.getByText('Open'))
+    expect(screen.getByText('Notifications')).toBeInTheDocument()
+    expect(screen.getByTestId('sheet-body')).toBeInTheDocument()
+  })
+
+  it('renders content immediately when controlled open=true', () => {
+    renderControlled(true)
+    expect(screen.getByText('Notifications')).toBeInTheDocument()
+  })
+
+  it('renders a built-in close X with the default closeLabel', () => {
+    renderControlled(true)
+    expect(screen.getByLabelText('Close')).toBeInTheDocument()
+  })
+
+  it('respects a custom closeLabel', () => {
+    renderControlled(true, { closeLabel: 'Close notifications' })
+    expect(screen.getByLabelText('Close notifications')).toBeInTheDocument()
+    expect(screen.queryByLabelText('Close')).not.toBeInTheDocument()
+  })
+
+  it('omits the built-in close when hideClose is set', () => {
+    renderControlled(true, { hideClose: true, closeLabel: 'Close notifications' })
+    expect(screen.queryByLabelText('Close notifications')).not.toBeInTheDocument()
+  })
+
+  it('closes when the built-in close X is clicked', () => {
+    renderControlled(true)
+    fireEvent.click(screen.getByLabelText('Close'))
+    expect(screen.queryByText('Notifications')).not.toBeInTheDocument()
+  })
+
+  it('closes when an explicit SheetClose child is clicked', () => {
+    renderControlled(true)
+    fireEvent.click(screen.getByTestId('explicit-close'))
+    expect(screen.queryByText('Notifications')).not.toBeInTheDocument()
+  })
+
+  it('renders content with dialog role', () => {
+    renderControlled(true)
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+  })
+
+  it('renders side="right" by default with slide-in-from-right animation class', () => {
+    renderControlled(true)
+    const dialog = screen.getByRole('dialog')
+    expect(dialog.className).toContain('right-0')
+    expect(dialog.className).toContain('data-[state=open]:slide-in-from-right')
+  })
+
+  it('renders side="left" with corresponding slide direction', () => {
+    renderControlled(true, { side: 'left' })
+    const dialog = screen.getByRole('dialog')
+    expect(dialog.className).toContain('left-0')
+    expect(dialog.className).toContain('data-[state=open]:slide-in-from-left')
+  })
+
+  it('side="left" uses separate top/bottom utilities (not invalid combined inset-y two-value) so the panel honors --topbar-height', () => {
+    // Regression: a previous implementation used `inset-y-[var(--topbar-height,0px)_0]`
+    // which compiles to `top: var(--topbar-height,0px) 0; bottom: var(--topbar-height,0px) 0;`
+    // — both rules invalid (top/bottom accept ONE length) and silently dropped by the
+    // browser. Assert the resolved class string carries two separate inset utilities.
+    renderControlled(true, { side: 'left' })
+    const dialog = screen.getByRole('dialog')
+    expect(dialog.className).toContain('top-[var(--topbar-height,0px)]')
+    expect(dialog.className).toContain('bottom-0')
+    expect(dialog.className).not.toMatch(/inset-y-\[[^\]]+_[^\]]+\]/)
+  })
+
+  it('renders side="top" with corresponding slide direction', () => {
+    renderControlled(true, { side: 'top' })
+    const dialog = screen.getByRole('dialog')
+    expect(dialog.className).toContain('top-0')
+    expect(dialog.className).toContain('data-[state=open]:slide-in-from-top')
+  })
+
+  it('renders side="bottom" with corresponding slide direction', () => {
+    renderControlled(true, { side: 'bottom' })
+    const dialog = screen.getByRole('dialog')
+    expect(dialog.className).toContain('bottom-0')
+    expect(dialog.className).toContain('data-[state=open]:slide-in-from-bottom')
+  })
+
+  it('content references --topbar-height CSS variable so it sits below the AppShell sticky topbar', () => {
+    renderControlled(true)
+    const dialog = screen.getByRole('dialog')
+    expect(dialog.className).toContain('top-[var(--topbar-height,0px)]')
+  })
+
+  it('merges custom className onto the content node', () => {
+    renderControlled(true, { className: 'custom-test-class' })
+    const dialog = screen.getByRole('dialog')
+    expect(dialog.className).toContain('custom-test-class')
+  })
+})

package/src/primitives/breadcrumb.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { ChevronRight, MoreHorizontal } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type BreadcrumbDivider = 'slash' | 'arrow' | 'dot'
+
+type BreadcrumbContextValue = {
+  divider: BreadcrumbDivider
+}
+
+const BreadcrumbContext = React.createContext<BreadcrumbContextValue>({
+  divider: 'slash',
+})
+
+export type BreadcrumbProps = React.ComponentProps<'nav'> & {
+  divider?: BreadcrumbDivider
+}
+
+export function Breadcrumb({
+  divider = 'slash',
+  className,
+  children,
+  ...props
+}: BreadcrumbProps) {
+  const contextValue = React.useMemo<BreadcrumbContextValue>(
+    () => ({ divider }),
+    [divider],
+  )
+  return (
+    <BreadcrumbContext.Provider value={contextValue}>
+      <nav
+        aria-label="Breadcrumb"
+        data-slot="breadcrumb"
+        data-divider={divider}
+        className={cn('min-w-0', className)}
+        {...props}
+      >
+        {children}
+      </nav>
+    </BreadcrumbContext.Provider>
+  )
+}
+
+export type BreadcrumbListProps = React.ComponentProps<'ol'>
+
+export function BreadcrumbList({ className, children, ...props }: BreadcrumbListProps) {
+  if (React.Children.count(children) === 0) return null
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'flex items-center gap-1.5 text-sm font-medium leading-5 tracking-tight min-w-0',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ol>
+  )
+}
+
+export type BreadcrumbItemProps = React.ComponentProps<'li'>
+
+export function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5 min-w-0', className)}
+      {...props}
+    />
+  )
+}
+
+export type BreadcrumbLinkProps = React.ComponentProps<'a'> & {
+  asChild?: boolean
+}
+
+export function BreadcrumbLink({
+  asChild = false,
+  className,
+  children,
+  ...props
+}: BreadcrumbLinkProps) {
+  const Comp = asChild ? Slot : 'a'
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn(
+        "inline-flex items-center gap-1.5 max-w-[40vw] md:max-w-[28vw] truncate text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:text-foreground rounded-sm focus-visible:shadow-focus [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  )
+}
+
+export type BreadcrumbPageProps = React.ComponentProps<'span'>
+
+export function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {
+  return (
+    <span
+      aria-current="page"
+      data-slot="breadcrumb-page"
+      className={cn(
+        "inline-block text-foreground truncate min-w-0 max-w-[45vw] md:max-w-[60vw] [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0 [&_svg]:inline-block [&_svg]:align-middle",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export type BreadcrumbStaticProps = React.ComponentProps<'span'>
+
+export function BreadcrumbStatic({ className, ...props }: BreadcrumbStaticProps) {
+  return (
+    <span
+      data-slot="breadcrumb-static"
+      className={cn(
+        "inline-flex items-center gap-1.5 max-w-[40vw] md:max-w-[28vw] truncate text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-5 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export type BreadcrumbSeparatorProps = React.ComponentProps<'li'> & {
+  divider?: BreadcrumbDivider
+}
+
+export function BreadcrumbSeparator({
+  divider: dividerProp,
+  className,
+  children,
+  ...props
+}: BreadcrumbSeparatorProps) {
+  const { divider: contextDivider } = React.useContext(BreadcrumbContext)
+  const divider = dividerProp ?? contextDivider
+  return (
+    <li
+      role="presentation"
+      aria-hidden="true"
+      data-slot="breadcrumb-separator"
+      data-divider={divider}
+      className={cn(
+        "inline-flex items-center text-text-disabled select-none [&_svg:not([class*='size-'])]:size-5",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <DefaultSeparator divider={divider} />}
+    </li>
+  )
+}
+
+function DefaultSeparator({ divider }: { divider: BreadcrumbDivider }) {
+  if (divider === 'arrow') return <ChevronRight aria-hidden="true" />
+  if (divider === 'dot') return <span aria-hidden="true">·</span>
+  return <span aria-hidden="true">/</span>
+}
+
+export type BreadcrumbEllipsisProps = React.ComponentProps<'span'>
+
+export function BreadcrumbEllipsis({ className, children, ...props }: BreadcrumbEllipsisProps) {
+  return (
+    <span
+      role="presentation"
+      data-slot="breadcrumb-ellipsis"
+      className={cn(
+        'inline-flex size-5 items-center justify-center text-muted-foreground',
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <MoreHorizontal aria-hidden="true" className="size-4" />}
+      <span className="sr-only">More</span>
+    </span>
+  )
+}

package/src/primitives/sheet.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const Sheet = DialogPrimitive.Root
+
+const SheetTrigger = DialogPrimitive.Trigger
+
+const SheetClose = DialogPrimitive.Close
+
+const SheetPortal = DialogPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-x-0 bottom-0 top-[var(--topbar-height,0px)] z-overlay bg-black/40 backdrop-blur-sm',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  cn(
+    'fixed z-modal flex flex-col gap-4 bg-background shadow-lg transition ease-in-out',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'data-[state=closed]:duration-200 data-[state=open]:duration-300',
+  ),
+  {
+    variants: {
+      side: {
+        top:
+          'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left:
+          'top-[var(--topbar-height,0px)] bottom-0 left-0 w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md',
+        right:
+          'top-[var(--topbar-height,0px)] bottom-0 right-0 w-full sm:max-w-md border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+)
+
+export type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
+  VariantProps<typeof sheetVariants> & {
+    /** Hide the built-in close (X) button — useful when the consumer renders its own close affordance. */
+    hideClose?: boolean
+    /** Override the aria-label for the built-in close button. */
+    closeLabel?: string
+  }
+
+/**
+ * SheetContent — side-anchored Radix Dialog wrapper.
+ *
+ * Topbar integration: the `left` and `right` variants anchor at
+ * `top: var(--topbar-height, 0px)` so a sticky app topbar stays visible above
+ * the panel. Consumers that render inside `AppShell` get the correct offset
+ * because the shell sets `--topbar-height` on the outer container. Surfaces
+ * outside the shell (portal modals, marketing pages, standalone embeds) keep
+ * the default `0px` fallback and align to the viewport top — that is the
+ * correct behavior when there is no topbar to clear.
+ *
+ * To opt into the offset from your own layout, set the CSS variable on any
+ * ancestor of `<SheetContent>`:
+ *
+ * ```css
+ * .my-shell { --topbar-height: 60px; }
+ * ```
+ */
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, hideClose = false, closeLabel = 'Close', ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <DialogPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+      {children}
+      {!hideClose ? (
+        <DialogPrimitive.Close
+          className="absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus-visible:shadow-focus"
+          aria-label={closeLabel}
+        >
+          <X className="size-4" aria-hidden="true" />
+        </DialogPrimitive.Close>
+      ) : null}
+    </DialogPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = DialogPrimitive.Content.displayName
+
+const SheetHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col gap-1.5 border-b px-4 py-3 pr-12 text-left', className)}
+      {...props}
+    />
+  ),
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col-reverse gap-2 border-t px-4 py-3 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  ),
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-base font-semibold text-foreground', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = DialogPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+  sheetVariants,
+}