@freighttech/ui 0.13.18

package/src/primitives/icon-button.tsx

@@ -0,0 +1,48 @@
+/**
+ * @deprecated Use `IconButton` from `@freighttech/ui/components` instead.
+ *   The new component is a thin wrapper around the new `Button` and
+ *   shares the same variant/size system. It also enforces the
+ *   `aria-label` prop, which Figma\'s "FMS-Componenets" IconButton
+ *   spec requires for a11y. Will be removed in a future minor.
+ */
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const iconButtonVariants = cva(
+  "inline-flex items-center justify-center rounded-md cursor-pointer transition-all outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+      },
+      size: {
+        xs: 'size-6',
+        sm: 'size-7',
+        default: 'size-8',
+        lg: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'outline',
+      size: 'default',
+    },
+  }
+)
+
+export function IconButton({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof iconButtonVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button'
+  return <Comp data-slot="icon-button" type={asChild ? undefined : 'button'} className={cn(iconButtonVariants({ variant, size, className }))} {...props} />
+}
+
+export { iconButtonVariants }

package/src/primitives/input.tsx

@@ -0,0 +1,26 @@
+/**
+ * @deprecated Use `Input` from `@freighttech/ui/components` instead.
+ *   Matches the Figma "FMS-Componenets" Input spec, exposes a typed
+ *   `inputSize` prop and `hasError` / `leftAddon` / `rightAddon`. Will
+ *   be removed in a future minor of `@freighttech/ui`.
+ */
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+type InputProps = React.ComponentPropsWithoutRef<'input'>
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type = 'text', ...props }, ref) => (
+    <input
+      ref={ref}
+      type={type}
+      className={cn(
+        'flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+Input.displayName = 'Input'

package/src/primitives/label.tsx

@@ -0,0 +1,18 @@
+"use client"
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+

package/src/primitives/popover.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export const Popover = PopoverPrimitive.Root
+
+export const PopoverTrigger = PopoverPrimitive.Trigger
+
+export const PopoverAnchor = PopoverPrimitive.Anchor
+
+export const PopoverClose = PopoverPrimitive.Close
+
+export const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'start', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[280px] rounded-md border bg-popover p-0 text-popover-foreground shadow-md outline-none',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=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',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName

package/src/primitives/primitives.stories.tsx

@@ -0,0 +1,223 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Button } from './button'
+import { Badge } from './badge'
+import { Input } from './input'
+import { Label } from './label'
+import { Textarea } from './textarea'
+import { Switch } from './switch'
+import { Separator } from './separator'
+import { Spinner } from './spinner'
+import { Alert, AlertDescription, AlertTitle } from './alert'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from './dialog'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table'
+import { SimpleTooltip } from './tooltip'
+import { ErrorNotice } from './ErrorNotice'
+import { DataLoader } from './DataLoader'
+
+const ShowcaseComponent = () => {
+    return (
+        <div className="space-y-12 max-w-6xl">
+            {/* Actions */}
+            <section>
+                <h2 className="text-2xl font-bold mb-4">Actions</h2>
+                <div className="space-y-4">
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Buttons</h3>
+                        <div className="flex flex-wrap gap-2">
+                            <Button variant="default">Default</Button>
+                            <Button variant="destructive">Destructive</Button>
+                            <Button variant="outline">Outline</Button>
+                            <Button variant="secondary">Secondary</Button>
+                            <Button variant="ghost">Ghost</Button>
+                            <Button variant="link">Link</Button>
+                            <Button disabled>Disabled</Button>
+                        </div>
+                    </div>
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Button Sizes</h3>
+                        <div className="flex items-center gap-2">
+                            <Button size="sm">Small</Button>
+                            <Button size="default">Default</Button>
+                            <Button size="lg">Large</Button>
+                            <Button size="icon">🔍</Button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Forms */}
+            <section>
+                <h2 className="text-2xl font-bold mb-4">Forms</h2>
+                <div className="space-y-6 max-w-md">
+                    <div className="space-y-2">
+                        <Label htmlFor="email">Email</Label>
+                        <Input id="email" type="email" placeholder="Enter your email" />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="password">Password</Label>
+                        <Input id="password" type="password" placeholder="Enter password" />
+                    </div>
+                    <div className="space-y-2">
+                        <Label htmlFor="message">Message</Label>
+                        <Textarea id="message" placeholder="Type your message here" />
+                    </div>
+                    <div className="flex items-center space-x-2">
+                        <Switch id="notifications" />
+                        <Label htmlFor="notifications">Enable notifications</Label>
+                    </div>
+                </div>
+            </section>
+
+            {/* Feedback */}
+            <section>
+                <h2 className="text-2xl font-bold mb-4">Feedback</h2>
+                <div className="space-y-4">
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Badges</h3>
+                        <div className="flex flex-wrap gap-2">
+                            <Badge variant="default">Default</Badge>
+                            <Badge variant="secondary">Secondary</Badge>
+                            <Badge variant="destructive">Destructive</Badge>
+                            <Badge variant="outline">Outline</Badge>
+                            <Badge variant="muted">Muted</Badge>
+                        </div>
+                    </div>
+
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Alerts</h3>
+                        <div className="space-y-2">
+                            <Alert>
+                                <AlertTitle>Information</AlertTitle>
+                                <AlertDescription>This is a default alert with important information.</AlertDescription>
+                            </Alert>
+                            <Alert variant="destructive">
+                                <AlertTitle>Error</AlertTitle>
+                                <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+                            </Alert>
+                        </div>
+                    </div>
+
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Loading States</h3>
+                        <div className="flex items-center gap-4">
+                            <Spinner />
+                            <Spinner className="size-6" />
+                            <Spinner className="size-8" />
+                        </div>
+                    </div>
+
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Error Notice</h3>
+                        <ErrorNotice title='An example error occurred' />
+                    </div>
+
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Data Loader</h3>
+                        <DataLoader isLoading={true}>
+                            <div>Content loaded successfully</div>
+                        </DataLoader>
+                    </div>
+                </div>
+            </section>
+
+            {/* Layout */}
+            <section>
+                <h2 className="text-2xl font-bold mb-4">Layout</h2>
+                <div className="space-y-4">
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Separator</h3>
+                        <div className="space-y-2">
+                            <div>Above separator</div>
+                            <Separator />
+                            <div>Below separator</div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* Overlays */}
+            <section>
+                <h2 className="text-2xl font-bold mb-4">Overlays</h2>
+                <div className="space-y-4">
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Dialog</h3>
+                        <Dialog>
+                            <DialogTrigger asChild>
+                                <Button>Open Dialog</Button>
+                            </DialogTrigger>
+                            <DialogContent>
+                                <DialogHeader>
+                                    <DialogTitle>Dialog Title</DialogTitle>
+                                    <DialogDescription>
+                                        This is a dialog with some example content.
+                                    </DialogDescription>
+                                </DialogHeader>
+                                <div className="py-4">
+                                    Dialog content goes here.
+                                </div>
+                            </DialogContent>
+                        </Dialog>
+                    </div>
+
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Tooltip</h3>
+                        <SimpleTooltip content="This is a helpful tooltip">
+                            <Button variant="outline">Hover me</Button>
+                        </SimpleTooltip>
+                    </div>
+                </div>
+            </section>
+
+            {/* Data Display */}
+            <section>
+                <h2 className="text-2xl font-bold mb-4">Data Display</h2>
+                <div className="space-y-4">
+                    <div>
+                        <h3 className="text-sm font-medium text-muted-foreground mb-2">Table</h3>
+                        <div className="border rounded-lg">
+                            <Table>
+                                <TableHeader>
+                                    <TableRow>
+                                        <TableHead>Name</TableHead>
+                                        <TableHead>Status</TableHead>
+                                        <TableHead>Role</TableHead>
+                                    </TableRow>
+                                </TableHeader>
+                                <TableBody>
+                                    <TableRow>
+                                        <TableCell>John Doe</TableCell>
+                                        <TableCell><Badge variant="default">Active</Badge></TableCell>
+                                        <TableCell>Admin</TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableCell>Jane Smith</TableCell>
+                                        <TableCell><Badge variant="secondary">Pending</Badge></TableCell>
+                                        <TableCell>User</TableCell>
+                                    </TableRow>
+                                    <TableRow>
+                                        <TableCell>Bob Johnson</TableCell>
+                                        <TableCell><Badge variant="muted">Inactive</Badge></TableCell>
+                                        <TableCell>User</TableCell>
+                                    </TableRow>
+                                </TableBody>
+                            </Table>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    )
+}
+
+const meta: Meta<typeof ShowcaseComponent> = {
+    title: 'Primitives/Primitives',
+    component: ShowcaseComponent,
+    parameters: {
+        layout: 'padded',
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof ShowcaseComponent>
+
+export const AllComponents: Story = {}

package/src/primitives/progress.tsx

@@ -0,0 +1,28 @@
+"use client"
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: number
+  max?: number
+}
+
+export function Progress({ value, max = 100, className, ...props }: ProgressProps) {
+  const percentage = Math.min(100, Math.max(0, Math.round((value / max) * 100)))
+
+  return (
+    <div
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      className={cn('relative w-full overflow-hidden rounded-full bg-secondary', className)}
+      {...props}
+    >
+      <div
+        className="h-full bg-primary transition-all duration-300 ease-in-out"
+        style={{ width: `${percentage}%` }}
+      />
+    </div>
+  )
+}

package/src/primitives/separator.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+export function Separator({ className = '', orientation = 'horizontal' }: { className?: string; orientation?: 'horizontal' | 'vertical' }) {
+  const base = orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full'
+  return <div role="separator" aria-orientation={orientation} className={`${base} bg-border ${className}`} />
+}
+

package/src/primitives/sheet.tsx

@@ -0,0 +1,137 @@
+"use client"
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import { X } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+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
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/50',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+))
+SheetOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+type SheetContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+  side?: 'left' | 'right' | 'top' | 'bottom'
+  overlayClassName?: string
+  ariaTitle?: string
+  hideCloseButton?: boolean
+  fullWidth?: boolean
+}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  SheetContentProps
+>(({ className, children, side = 'right', overlayClassName, ariaTitle, hideCloseButton, fullWidth, ...props }, ref) => {
+  const t = useT()
+  const defaultAriaTitle = t('ui.sheet.defaultTitle', 'Panel')
+
+  const sideStyles = {
+    left: 'inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
+    right: 'inset-y-0 right-0 h-full w-3/4 max-w-md border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
+    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',
+  }
+
+  const fullWidthStyles = fullWidth ? 'w-full max-w-full' : ''
+
+  return (
+    <SheetPortal>
+      <SheetOverlay className={overlayClassName} />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'fixed z-50 flex flex-col gap-4 bg-card p-6 shadow-lg transition ease-in-out',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:duration-300 data-[state=open]:duration-300',
+          sideStyles[side],
+          fullWidthStyles,
+          className
+        )}
+        {...props}
+      >
+        <VisuallyHidden asChild>
+          <DialogPrimitive.Title>{ariaTitle || defaultAriaTitle}</DialogPrimitive.Title>
+        </VisuallyHidden>
+        {!hideCloseButton && (
+          <SheetClose
+            className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            aria-label={t('ui.dialog.close.ariaLabel', 'Close')}
+          >
+            <X className="h-4 w-4" />
+          </SheetClose>
+        )}
+        {children}
+      </DialogPrimitive.Content>
+    </SheetPortal>
+  )
+})
+SheetContent.displayName = DialogPrimitive.Content.displayName
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2', className)} {...props} />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse gap-2 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-lg 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,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/primitives/spinner.tsx

@@ -0,0 +1,27 @@
+"use client"
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export interface SpinnerProps {
+  className?: string
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export function Spinner({ className = '', size = 'md' }: SpinnerProps) {
+  const t = useT()
+  const sizeClasses = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8',
+  }
+
+  return (
+    <span
+      className={`inline-flex items-center justify-center animate-spin rounded-full border-2 border-border border-t-foreground ${sizeClasses[size]} ${className}`}
+      role="status"
+      aria-label={t('ui.spinner.ariaLabel', 'Loading')}
+    >
+      <span className="sr-only">{t('ui.spinner.srOnly', 'Loading...')}</span>
+    </span>
+  )
+}

package/src/primitives/status-badge.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { Badge } from './badge'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type StatusBadgeVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral'
+
+export type StatusBadgeProps = {
+  /** Visual variant — maps to semantic color tokens via Badge */
+  variant: StatusBadgeVariant
+  /** Badge text */
+  children: React.ReactNode
+  /** Show colored dot before text */
+  dot?: boolean
+  /** Additional className */
+  className?: string
+}
+
+const dotColors: Record<StatusBadgeVariant, string> = {
+  success: 'bg-status-success-icon',
+  warning: 'bg-status-warning-icon',
+  error: 'bg-status-error-icon',
+  info: 'bg-status-info-icon',
+  neutral: 'bg-status-neutral-icon',
+}
+
+export function StatusBadge({
+  variant,
+  children,
+  dot = false,
+  className,
+}: StatusBadgeProps) {
+  return (
+    <Badge
+      variant={variant}
+      className={cn(dot && 'gap-1.5', className)}
+    >
+      {dot && (
+        <span
+          className={cn('inline-block h-1.5 w-1.5 rounded-full shrink-0', dotColors[variant])}
+          aria-hidden="true"
+        />
+      )}
+      {children}
+    </Badge>
+  )
+}
+
+/**
+ * Helper type: modules define their own status → variant mapping.
+ *
+ * @example
+ * const customerStatusMap: StatusMap<'active' | 'inactive' | 'archived'> = {
+ *   active: 'success',
+ *   inactive: 'neutral',
+ *   archived: 'warning',
+ * }
+ *
+ * <StatusBadge variant={customerStatusMap[customer.status] ?? 'neutral'} dot>
+ *   {t(`customers.status.${customer.status}`)}
+ * </StatusBadge>
+ */
+export type StatusMap<T extends string = string> = Record<T, StatusBadgeVariant>