@cartbase/storefront 0.1.0

package/src/order/order-totals.tsx

@@ -0,0 +1,245 @@
+import { DualPrice } from "../lib/dual-price"
+import { findFeeLine, type LineLike } from "../lib/cart-helpers"
+import { defaultOrderLabels, type OrderLabels } from "./labels"
+
+/**
+ * Order totals breakdown. Ported from `@1click/ui/src/order/order-totals.tsx`
+ * (v2.3.1) with the barter money seam:
+ *
+ * Totals are SERVER truth and the barter store order read
+ * (`StoreOrderDetail`) carries NONE of them — they live where the server
+ * computed them: the decorated cart the app holds on the confirmation page
+ * (`api/carts` `Cart`: `item_subtotal`, `shipping_subtotal`,
+ * `discount_total`, `tax_total`, `total`, `cod_fee_total`, `cod_fee_label`)
+ * or the order's summary snapshot (`order_summaries.totals` — reachable via
+ * `completeCart().order.summary`). The component takes a structural
+ * `OrderTotalsSource` both of those satisfy (`orderTotalsFromSummary()`
+ * adapts the summary shape) and only SELECTS + FORMATS rows — it never
+ * computes money beyond the two production subtractions documented below.
+ *
+ * COD fee display, in preference order (production fix preserved):
+ *  1. barter-native fee: `cod_fee_total` > 0 (never a line item;
+ *     already folded into `total` server-side), labeled by the
+ *     admin-editable `cod_fee_label`.
+ *  2. legacy Medusa-era fee LINE ITEM (`metadata.is_cod_fee`) found in
+ *     `items` — its net is subtracted from the visible subtotal so the
+ *     Subtotal row stays product-only while Tax keeps the fee's tax
+ *     portion (v2.3.1 fix).
+ *  3. label fallbacks: `codFeeLabel` prop → source `cod_fee_label` →
+ *     fee line's own title → translated `labels.codFee`.
+ */
+
+/** Structural totals source — `api/carts` `Cart` satisfies it directly. */
+export interface OrderTotalsSource {
+  /** Product-only net subtotal (cart path). Preferred. */
+  item_subtotal?: number | null
+  /** Combined items+shipping net (summary path fallback). */
+  subtotal?: number | null
+  /** Shipping net (cart path). Preferred for the Shipping row. */
+  shipping_subtotal?: number | null
+  /** Shipping gross (summary path fallback). */
+  shipping_total?: number | null
+  discount_total?: number | null
+  tax_total?: number | null
+  total?: number | null
+  /** barter-native COD fee (already folded into `total`). */
+  cod_fee_total?: number | null
+  /** Admin-editable COD fee label from the server. */
+  cod_fee_label?: string | null
+  [key: string]: unknown
+}
+
+/**
+ * Adapt `order_summaries.totals` (shape:
+ * `{subtotal, total, tax_total, discount_total, shipping_total,
+ * cod_fee_total}` — src/app/api/store/carts/[id]/complete/_copy.ts) to an
+ * `OrderTotalsSource`. Accepts the raw `CompletedOrder["summary"]` value
+ * (embed row, array of rows, or the totals object itself); null when no
+ * totals can be found.
+ */
+export function orderTotalsFromSummary(
+  summary: unknown
+): OrderTotalsSource | null {
+  if (!summary || typeof summary !== "object") return null
+  const first = Array.isArray(summary) ? summary[0] : summary
+  if (!first || typeof first !== "object") return null
+  const rec = first as Record<string, unknown>
+  const totals =
+    rec.totals && typeof rec.totals === "object"
+      ? (rec.totals as Record<string, unknown>)
+      : rec
+  if (typeof totals.total !== "number") return null
+  return totals as OrderTotalsSource
+}
+
+export type OrderTotalsRow = {
+  key: "subtotal" | "shipping" | "codFee" | "discount" | "tax"
+  /** Resolved display label (codFee row only — others use the label pack). */
+  label?: string
+  amount: number
+  /** Shipping row at 0 renders the FREE badge instead of a price. */
+  free?: boolean
+  /** Discount row renders negated. */
+  negative?: boolean
+}
+
+/**
+ * Pure row selection — the entire display policy of the breakdown, kept
+ * out of JSX so it is unit-testable (tests/unit/storefront-order-reviews).
+ */
+export function selectOrderTotalsRows(
+  source: OrderTotalsSource,
+  opts: {
+    items?: readonly LineLike[] | null
+    codFeeLabel?: string
+    labels?: Pick<OrderLabels, "codFee">
+  } = {}
+): { rows: OrderTotalsRow[]; total: number } {
+  const l = { ...defaultOrderLabels, ...opts.labels }
+  const rows: OrderTotalsRow[] = []
+
+  // Legacy fee LINE (Medusa-era injection) — barter-native carts never
+  // have one, but ported data / hybrid stores might.
+  const codFeeItem = findFeeLine(opts.items || [])
+  const nativeFee = Number(source.cod_fee_total ?? 0)
+  const lineFee = Number(codFeeItem?.total ?? 0)
+  const codFeeAmount = nativeFee > 0 ? nativeFee : lineFee
+
+  // Subtotal: prefer the product-only net; fall back to combined-minus-
+  // shipping, then combined. Subtract a legacy fee line's net so the
+  // visible Subtotal stays product-only (v2.3.1 production fix).
+  const baseSubtotal =
+    source.item_subtotal ??
+    (source.subtotal !== null &&
+    source.subtotal !== undefined &&
+    source.shipping_subtotal !== null &&
+    source.shipping_subtotal !== undefined
+      ? Number(source.subtotal) - Number(source.shipping_subtotal)
+      : source.subtotal ?? 0)
+  const feeNet = codFeeItem
+    ? Number(codFeeItem.subtotal ?? codFeeItem.total ?? 0)
+    : 0
+  rows.push({
+    key: "subtotal",
+    amount: Math.max(0, Number(baseSubtotal ?? 0) - feeNet),
+  })
+
+  const shippingAmount = Number(
+    source.shipping_subtotal ?? source.shipping_total ?? 0
+  )
+  rows.push({
+    key: "shipping",
+    amount: shippingAmount,
+    free: shippingAmount === 0,
+  })
+
+  if (codFeeAmount > 0) {
+    rows.push({
+      key: "codFee",
+      amount: codFeeAmount,
+      label:
+        opts.codFeeLabel ??
+        source.cod_fee_label ??
+        ((codFeeItem as { title?: string } | null)?.title || undefined) ??
+        l.codFee,
+    })
+  }
+
+  const discount = Number(source.discount_total ?? 0)
+  if (discount > 0) {
+    rows.push({ key: "discount", amount: discount, negative: true })
+  }
+
+  rows.push({ key: "tax", amount: Number(source.tax_total ?? 0) })
+
+  return { rows, total: Number(source.total ?? 0) }
+}
+
+type OrderTotalsProps = {
+  totals: OrderTotalsSource
+  currencyCode: string
+  /** Lines from the same source — used only to detect a legacy fee line. */
+  items?: readonly LineLike[] | null
+  labels?: Pick<
+    OrderLabels,
+    "subtotal" | "shipping" | "discount" | "tax" | "total" | "free" | "codFee"
+  >
+  /**
+   * Per-store override for the cash-on-delivery fee row label. Optional —
+   * falls back to the server's `cod_fee_label`, then the fee line's title,
+   * then the translated `labels.codFee` default.
+   */
+  codFeeLabel?: string
+}
+
+export function OrderTotals({
+  totals,
+  currencyCode,
+  items,
+  labels,
+  codFeeLabel,
+}: OrderTotalsProps) {
+  const l = { ...defaultOrderLabels, ...labels }
+  const { rows, total } = selectOrderTotalsRows(totals, {
+    items,
+    codFeeLabel,
+    labels: l,
+  })
+
+  const labelFor = (row: OrderTotalsRow): string => {
+    switch (row.key) {
+      case "subtotal":
+        return l.subtotal
+      case "shipping":
+        return l.shipping
+      case "codFee":
+        return row.label ?? l.codFee
+      case "discount":
+        return l.discount
+      case "tax":
+        return l.tax
+    }
+  }
+
+  return (
+    <div className="pt-4 border-t border-border">
+      <div className="flex flex-col gap-2 text-sm">
+        {rows.map((row) => (
+          <div key={row.key} className="flex justify-between">
+            <span className="text-muted-foreground">{labelFor(row)}</span>
+            {row.free ? (
+              <span className="text-sm font-medium text-success">{l.free}</span>
+            ) : row.negative ? (
+              <span className="text-sm text-success">
+                -{" "}
+                <DualPrice
+                  amount={row.amount}
+                  currencyCode={currencyCode}
+                  className="text-sm text-success"
+                />
+              </span>
+            ) : (
+              <DualPrice
+                amount={row.amount}
+                currencyCode={currencyCode}
+                className="text-sm text-foreground"
+              />
+            )}
+          </div>
+        ))}
+      </div>
+
+      <div className="h-px bg-border my-3" />
+      <div className="flex justify-between items-baseline">
+        <span className="text-[15px] font-bold text-foreground">{l.total}</span>
+        <DualPrice
+          amount={total}
+          currencyCode={currencyCode}
+          className="text-xl font-bold text-foreground tracking-tight"
+        />
+      </div>
+    </div>
+  )
+}
+
+export { type OrderTotalsProps }

package/src/primitives/field.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+/**
+ * Field — floating-label input primitive.
+ *
+ * Built on a native `<input>` with a visually-overlaid label that scales up
+ * when the field is empty and shrinks into the top-left corner when the
+ * field is focused or has a value. This is the canonical input treatment
+ * used throughout the library's checkout and any form UI.
+ *
+ * Why not build on shadcn's `Input`? The floating-label animation requires
+ * controlling input height, padding, and label positioning together as a
+ * single unit — wrapping shadcn's Input would mean overriding nearly all of
+ * its styles anyway. Instead, Field is its own small primitive. Stores that
+ * want plain inputs use shadcn's `Input` directly; stores that want the
+ * floating-label treatment use `Field`.
+ *
+ * Extracted and adapted from mindpages-storefront
+ * src/modules/checkout/templates/checkout-client/index.tsx lines 143-205.
+ *
+ * @example
+ *   <Field label="Email" name="email" type="email" value={email} onChange={...} />
+ */
+
+export type FieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label: string
+  className?: string
+  /**
+   * Apply the "needs filling" attention cue (3s-idle pulse). Soft blue
+   * (sky-500) ring + 2-cycle pulse animation on mount, then a steady
+   * highlight until the field gets a value (parent removes the prop).
+   *
+   * Distinct from focus (orange/primary) and error (red/destructive)
+   * so the customer reads it as "this needs your attention" without
+   * confusing it for an error.
+   */
+  pulse?: boolean
+}
+
+export const Field = React.forwardRef<HTMLInputElement, FieldProps>(
+  function Field(
+    {
+      label,
+      required,
+      disabled,
+      className,
+      value,
+      onFocus,
+      onBlur,
+      pulse,
+      ...props
+    },
+    ref
+  ) {
+    const [focused, setFocused] = React.useState(false)
+    const hasValue = typeof value === "string" ? value.length > 0 : !!value
+    const isActive = focused || hasValue
+
+    // 2-cycle pulse on first activation. Clears after ~1.2s so the
+    // animation calls attention briefly, then leaves a steady ring
+    // until the customer fills the field (which removes the prop).
+    const [pulsing, setPulsing] = React.useState(false)
+    React.useEffect(() => {
+      if (!pulse) {
+        setPulsing(false)
+        return
+      }
+      setPulsing(true)
+      const t = setTimeout(() => setPulsing(false), 1200)
+      return () => clearTimeout(t)
+    }, [pulse])
+
+    // Pulse only applies to empty fields without focus — once the
+    // customer focuses or fills the field, the standard treatment wins.
+    const showPulse = pulse && !hasValue && !focused
+
+    return (
+      <div className={cn("relative", className)}>
+        <input
+          ref={ref}
+          required={required}
+          disabled={disabled}
+          value={value}
+          onFocus={(e) => {
+            setFocused(true)
+            onFocus?.(e)
+          }}
+          onBlur={(e) => {
+            setFocused(false)
+            onBlur?.(e)
+          }}
+          className={cn(
+            "w-full h-[44px] px-3 pt-[14px] pb-[2px] text-sm rounded-lg border",
+            "transition-colors duration-300 outline-none",
+            "focus:border-primary focus:bg-primary/5",
+            disabled
+              ? "bg-muted border-border text-muted-foreground cursor-not-allowed"
+              : "bg-card border-border text-foreground hover:border-muted-foreground",
+            // Attention cue: distinct soft blue. Steady ring once the
+            // initial pulse settles. Wins over default border but loses
+            // to focus (which is orange/primary).
+            showPulse &&
+              "!border-sky-500 !bg-sky-50/40 ring-2 ring-sky-400/30",
+            showPulse && pulsing && "animate-pulse"
+          )}
+          {...props}
+        />
+        <span
+          className={cn(
+            "absolute pointer-events-none left-3 top-[14px] text-sm leading-4 origin-top-left",
+            "transition-transform transition-colors duration-300 ease-out",
+            showPulse ? "text-sky-600" : "text-muted-foreground",
+            isActive ? "-translate-y-2 scale-[0.77]" : "translate-y-0 scale-100"
+          )}
+        >
+          {label}
+        </span>
+      </div>
+    )
+  }
+)

package/src/primitives/select-field.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+/**
+ * SelectField — floating-label native select primitive.
+ *
+ * Matches `Field`'s visual treatment — the label floats into the top-left
+ * when a value is selected. Uses a plain native `<select>` for simplicity
+ * and native mobile keyboard support. If a fancier dropdown is needed
+ * (searchable, multi-select, rich options), use the shadcn `Select`
+ * primitives directly from `@cartbase/storefront/primitives/ui/select`.
+ *
+ * Extracted from mindpages-storefront
+ * src/modules/checkout/templates/checkout-client/index.tsx lines 207-270.
+ *
+ * @example
+ *   <SelectField label="Country" name="country" value={country} onChange={...}>
+ *     <option value="bg">Bulgaria</option>
+ *     <option value="de">Germany</option>
+ *   </SelectField>
+ */
+
+export type SelectFieldProps = React.SelectHTMLAttributes<HTMLSelectElement> & {
+  label: string
+  children: React.ReactNode
+  className?: string
+}
+
+export const SelectField = React.forwardRef<HTMLSelectElement, SelectFieldProps>(
+  function SelectField({ label, required, disabled, children, className, value, ...props }, ref) {
+    const hasValue = value !== undefined && value !== null && value !== ""
+
+    return (
+      <div className={cn("relative", className)}>
+        <select
+          ref={ref}
+          required={required}
+          disabled={disabled}
+          value={value}
+          className={cn(
+            "w-full h-[44px] px-3 pt-[14px] pb-[2px] pr-9 text-sm rounded-lg border transition-colors duration-150 appearance-none outline-none",
+            "focus:border-primary focus:bg-primary/5",
+            disabled
+              ? "bg-muted border-border text-muted-foreground cursor-not-allowed"
+              : "bg-card border-border text-foreground hover:border-muted-foreground"
+          )}
+          {...props}
+        >
+          {children}
+        </select>
+        <span
+          className={cn(
+            "absolute pointer-events-none left-3 top-[14px] text-sm leading-4 origin-top-left",
+            "transition-transform transition-colors duration-150 ease-out",
+            hasValue ? "text-muted-foreground" : "text-muted-foreground",
+            hasValue ? "-translate-y-2 scale-[0.77]" : "translate-y-0 scale-100"
+          )}
+        >
+          {label}
+        </span>
+        <svg
+          className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+        </svg>
+      </div>
+    )
+  }
+)

package/src/primitives/ui/accordion.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+/**
+ * Accordion — shadcn/ui accordion primitive (wraps Radix Accordion).
+ */
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-border", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/primitives/ui/button.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+/**
+ * Button — matches the current shadcn/ui radix-maia style (2026).
+ *
+ * Uses rounded-4xl for pill shape, matching shadcn's rounded-4xl.
+ * Colors driven by semantic tokens — stores override via CSS variables.
+ */
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center rounded-[2px] border border-transparent text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-input/30 hover:bg-input/50 hover:text-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-muted hover:text-foreground",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 gap-1.5 px-3",
+        xs: "h-6 gap-1 px-2.5 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 px-3",
+        lg: "h-10 gap-1.5 px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/primitives/ui/collapsible.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+/**
+ * Collapsible — shadcn/ui collapsible primitive (wraps Radix Collapsible).
+ *
+ * Used for the checkout's "Company invoice" dropdown and any other
+ * expand/collapse UX.
+ */
+
+const Collapsible = CollapsiblePrimitive.Root
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }