1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:T17ea,"use client"; import type { ElementType } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { WoohlImage } from "@/registry/tier-1-tokens/imagery/woohl-image"; import { Button } from "@/registry/tier-3-components/button"; import { Price } from "@/registry/tier-5-blocks/price"; import { QuantitySelector } from "@/registry/tier-5-blocks/quantity-selector"; /** * CartItem. * * Image, title, maker, variant, quantity, subtotal, remove. * * THE SUBTOTAL IS PER LINE, NOT PER UNIT * Two candles at ₹1,200 shows ₹2,400 with "₹1,200 each" underneath. Showing * the unit price as the headline number and making the buyer multiply is how * a bag total becomes a surprise at the payment step. * * REMOVE IS A BUTTON, AND IT NAMES WHAT IT REMOVES * "Remove Forest Ritual Candle", not "Remove". In a bag of six items, six * buttons called "Remove" are unusable with a screen reader. */ export type CartItemProps = { name: string; maker: string; href?: string; image?: string; imageAlt?: string; /** Unit price in rupees. */ price: number; quantity: number; onQuantityChange: (quantity: number) => void; onRemove: () => void; /** "Size: M", "Colour: Terracotta". */ variant?: string; /** Available stock. Caps the quantity selector. */ maxQuantity?: number; /** "Only 3 left", "Made to order — ships in 10 days". */ note?: string; as?: ElementType; className?: string; }; export function CartItem({ name, maker, href, image, imageAlt, price, quantity, onQuantityChange, onRemove, variant, maxQuantity, note, as: LinkComponent = "a", className, }: CartItemProps) { const subtotal = price * quantity; return (

{maker}

{href ? ( {name} ) : ( name )}

{variant &&

{variant}

}

{quantity > 1 && (

{new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0, }).format(price)}{" "} each

)}

{note &&

{note}

}

); } /** * The bag's totals block. * * Every line is named and every line is a real number. Delivery says "Free" * rather than "₹0" when it's free, and a COD handling fee is listed rather than * folded into the total — the checkout pattern is explicit that a fee a buyer * discovers at the payment step costs more than the fee is worth. */ export function CartSummary({ subtotal, delivery, discount, fees, className, }: { subtotal: number; /** `0` renders as "Free". Omit when it isn't known yet. */ delivery?: number; discount?: { label: string; amount: number }; fees?: { label: string; amount: number }[]; className?: string; }) { const format = (value: number) => new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 0, }).format(value); const total = subtotal + (delivery ?? 0) - (discount?.amount ?? 0) + (fees ?? []).reduce((sum, fee) => sum + fee.amount, 0); return (

Total

); } function Row({ label, value, valueClassName, }: { label: string; value: string; valueClassName?: string; }) { return (

{label}

{value}

); } 24:Te8f0,

"use client";

import type { ElementType } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { WoohlImage } from "@/registry/tier-1-tokens/imagery/woohl-image";
import { Button } from "@/registry/tier-3-components/button";
import { Price } from "@/registry/tier-5-blocks/price";
import { QuantitySelector } from "@/registry/tier-5-blocks/quantity-selector";

/**
 * CartItem.
 *
 * Image, title, maker, variant, quantity, subtotal, remove.
 *
 * THE SUBTOTAL IS PER LINE, NOT PER UNIT
 *   Two candles at ₹1,200 shows ₹2,400 with "₹1,200 each" underneath. Showing
 *   the unit price as the headline number and making the buyer multiply is how
 *   a bag total becomes a surprise at the payment step.
 *
 * REMOVE IS A BUTTON, AND IT NAMES WHAT IT REMOVES
 *   "Remove Forest Ritual Candle", not "Remove". In a bag of six items, six
 *   buttons called "Remove" are unusable with a screen reader.
 */
export type CartItemProps = {
  name: string;
  maker: string;
  href?: string;
  image?: string;
  imageAlt?: string;
  /** Unit price in rupees. */
  price: number;
  quantity: number;
  onQuantityChange: (quantity: number) => void;
  onRemove: () => void;
  /** "Size: M", "Colour: Terracotta". */
  variant?: string;
  /** Available stock. Caps the quantity selector. */
  maxQuantity?: number;
  /** "Only 3 left", "Made to order — ships in 10 days". */
  note?: string;
  as?: ElementType;
  className?: string;
};

export function CartItem({
  name,
  maker,
  href,
  image,
  imageAlt,
  price,
  quantity,
  onQuantityChange,
  onRemove,
  variant,
  maxQuantity,
  note,
  as: LinkComponent = "a",
  className,
}: CartItemProps) {
  const subtotal = price * quantity;

  return (
    <article data-slot="cart-item" className={cn("font-ui flex gap-4 py-5", className)}>
      <div className="w-20 flex-none sm:w-24">
        <WoohlImage src={image ?? ""} alt={imageAlt ?? `${name} by ${maker}`} ratio="square" />
      </div>

      <div className="flex min-w-0 flex-1 flex-col gap-2">
        <div className="flex items-start justify-between gap-4">
          <div className="min-w-0">
            <p className="text-caption text-text-muted">{maker}</p>
            <h3 className="text-body text-text-primary mt-0.5 leading-[1.35] font-bold">
              {href ? (
                <LinkComponent href={href} className="hover:text-text-accent">
                  {name}
                </LinkComponent>
              ) : (
                name
              )}
            </h3>
            {variant && <p className="text-caption text-text-secondary mt-1">{variant}</p>}
          </div>

          <div className="text-right">
            <Price amount={subtotal} tone="primary" size="md" />
            {quantity > 1 && (
              <p className="text-caption text-text-muted mt-0.5">
                {new Intl.NumberFormat("en-IN", {
                  style: "currency",
                  currency: "INR",
                  maximumFractionDigits: 0,
                }).format(price)}{" "}
                each
              </p>
            )}
          </div>
        </div>

        {note && <p className="text-caption text-warning">{note}</p>}

        <div className="mt-auto flex items-center justify-between gap-4 pt-1">
          <QuantitySelector
            value={quantity}
            onChange={onQuantityChange}
            max={maxQuantity}
            maxReason={maxQuantity ? `Only ${maxQuantity} left` : undefined}
            label={`Quantity, ${name}`}
            size="sm"
          />
          <Button variant="ghost" size="sm" onClick={onRemove} aria-label={`Remove ${name}`}>
            Remove
          </Button>
        </div>
      </div>
    </article>
  );
}

/**
 * The bag's totals block.
 *
 * Every line is named and every line is a real number. Delivery says "Free"
 * rather than "₹0" when it's free, and a COD handling fee is listed rather than
 * folded into the total — the checkout pattern is explicit that a fee a buyer
 * discovers at the payment step costs more than the fee is worth.
 */
export function CartSummary({
  subtotal,
  delivery,
  discount,
  fees,
  className,
}: {
  subtotal: number;
  /** `0` renders as "Free". Omit when it isn't known yet. */
  delivery?: number;
  discount?: { label: string; amount: number };
  fees?: { label: string; amount: number }[];
  className?: string;
}) {
  const format = (value: number) =>
    new Intl.NumberFormat("en-IN", {
      style: "currency",
      currency: "INR",
      maximumFractionDigits: 0,
    }).format(value);

  const total =
    subtotal +
    (delivery ?? 0) -
    (discount?.amount ?? 0) +
    (fees ?? []).reduce((sum, fee) => sum + fee.amount, 0);

  return (
    <dl
      data-slot="cart-summary"
      className={cn("font-ui text-body flex flex-col gap-2.5", className)}
    >
      <Row label="Subtotal" value={format(subtotal)} />

      {delivery !== undefined && (
        <Row
          label="Delivery"
          value={delivery === 0 ? "Free" : format(delivery)}
          valueClassName={delivery === 0 ? "text-success font-semibold" : undefined}
        />
      )}

      {discount && (
        <Row
          label={discount.label}
          value={`−${format(discount.amount)}`}
          valueClassName="text-success font-semibold"
        />
      )}

      {fees?.map((fee) => (
        <Row key={fee.label} label={fee.label} value={format(fee.amount)} />
      ))}

      <div className="border-border-subtle mt-1 flex items-baseline justify-between border-t pt-3">
        <dt className="text-body text-text-primary font-bold">Total</dt>
        <dd className="m-0">
          <Price amount={total} size="lg" tone="primary" />
        </dd>
      </div>
    </dl>
  );
}

function Row({
  label,
  value,
  valueClassName,
}: {
  label: string;
  value: string;
  valueClassName?: string;
}) {
  return (
    <div className="flex items-baseline justify-between gap-4">
      <dt className="text-text-secondary">{label}</dt>
      <dd className={cn("text-text-primary m-0", valueClassName)}>{value}</dd>
    </div>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Blocks"}],["$","$L1e",null,{"children":"Cart item & summary"}],["$","$L1f",null,{"children":"A bag line with quantity and remove, plus the totals block."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"cart-item"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/cart-item","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/button","@woohl/imagery","@woohl/price","@woohl/quantity-selector","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]