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:T13f8,import type { ReactNode, ReactElement } from "react"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { Badge } from "@/registry/tier-3-components/badge"; import { focusRing } from "@/registry/tier-2-primitives/lib/cva"; /** * AddressCard. * * A delivery address, as a selectable card in checkout or a read-only card in * an account page. * * INDIAN ADDRESSES, IN THE INDIAN ORDER * Flat/house, street/area, landmark, city, state, PIN. `landmark` is a first * class field rather than an afterthought crammed into line two — outside the * metros it is often how a delivery is actually found, and a form that treats * it as optional garnish produces addresses that don't work. * * SELECTABLE MEANS A RADIO * When `selectable`, the card renders a real `` inside a * ``. A div with a click handler and a coloured border is not * selectable to a keyboard or a screen reader, however much it looks it. */ export type Address = { id: string; /** "Home", "Office", "Mum's place". */ label?: string; name: string; line1: string; line2?: string; landmark?: string; city: string; state: string; pincode: string; phone?: string; isDefault?: boolean; }; export type AddressCardProps = { /** Optional mark beside the phone number: `phoneIcon={}`. */ phoneIcon?: ReactElement; address: Address; selectable?: boolean; selected?: boolean; onSelect?: () => void; /** Radio group name. Required when `selectable`. */ name?: string; /** Edit / Delete, usually. */ actions?: ReactNode; className?: string; }; export function AddressCard({ phoneIcon, address, selectable = false, selected = false, onSelect, name = "address", actions, className, }: AddressCardProps) { const body = ( <>

{address.label && ( {address.label} )} {address.isDefault && ( Default )}

{address.name}
{address.line1} {address.line2 && ( <>
{address.line2} )} {address.landmark && ( <>
Near {address.landmark} )}
{address.city}, {address.state} {address.pincode} {address.phone && ( <>
{phoneIcon && ( {phoneIcon} )} {address.phone} )}

); if (!selectable) { return (

{body}

{actions &&

{actions}

}

); } return ( onSelect?.()} className={cn("peer absolute size-full cursor-pointer opacity-0", focusRing)} /> span]:scale-100" )} > {body} {actions && {actions}} ); } 24:T9946,

import type { ReactNode, ReactElement } from "react";
import { cn } from "@/registry/tier-2-primitives/lib/cn";
import { Badge } from "@/registry/tier-3-components/badge";
import { focusRing } from "@/registry/tier-2-primitives/lib/cva";

/**
 * AddressCard.
 *
 * A delivery address, as a selectable card in checkout or a read-only card in
 * an account page.
 *
 * INDIAN ADDRESSES, IN THE INDIAN ORDER
 *   Flat/house, street/area, landmark, city, state, PIN. `landmark` is a first
 *   class field rather than an afterthought crammed into line two — outside the
 *   metros it is often how a delivery is actually found, and a form that treats
 *   it as optional garnish produces addresses that don't work.
 *
 * SELECTABLE MEANS A RADIO
 *   When `selectable`, the card renders a real `<input type="radio">` inside a
 *   `<label>`. A div with a click handler and a coloured border is not
 *   selectable to a keyboard or a screen reader, however much it looks it.
 */
export type Address = {
  id: string;
  /** "Home", "Office", "Mum's place". */
  label?: string;
  name: string;
  line1: string;
  line2?: string;
  landmark?: string;
  city: string;
  state: string;
  pincode: string;
  phone?: string;
  isDefault?: boolean;
};

export type AddressCardProps = {
  /** Optional mark beside the phone number: `phoneIcon={<Icon name="phone" />}`. */
  phoneIcon?: ReactElement;
  address: Address;
  selectable?: boolean;
  selected?: boolean;
  onSelect?: () => void;
  /** Radio group name. Required when `selectable`. */
  name?: string;
  /** Edit / Delete, usually. */
  actions?: ReactNode;
  className?: string;
};

export function AddressCard({
  phoneIcon,
  address,
  selectable = false,
  selected = false,
  onSelect,
  name = "address",
  actions,
  className,
}: AddressCardProps) {
  const body = (
    <>
      <div className="flex flex-wrap items-center gap-2">
        {address.label && (
          <span className="text-body text-text-primary font-bold">{address.label}</span>
        )}
        {address.isDefault && (
          <Badge tone="neutral" size="sm">
            Default
          </Badge>
        )}
      </div>

      <address className="text-body text-text-secondary mt-1 leading-[1.6] not-italic">
        <span className="text-text-primary font-semibold">{address.name}</span>
        <br />
        {address.line1}
        {address.line2 && (
          <>
            <br />
            {address.line2}
          </>
        )}
        {address.landmark && (
          <>
            <br />
            <span className="text-text-muted">Near {address.landmark}</span>
          </>
        )}
        <br />
        {address.city}, {address.state} {address.pincode}
        {address.phone && (
          <>
            <br />
            <span className="text-text-muted inline-flex items-center gap-1.5">
              {phoneIcon && (
                <span aria-hidden className="grid flex-none place-items-center [&>svg]:size-[13px]">
                  {phoneIcon}
                </span>
              )}
              {address.phone}
            </span>
          </>
        )}
      </address>
    </>
  );

  if (!selectable) {
    return (
      <div
        data-slot="address-card"
        className={cn(
          "border-border-subtle bg-surface-raised font-ui rounded-xl border p-5",
          className
        )}
      >
        <div className="flex items-start justify-between gap-4">
          <div className="min-w-0">{body}</div>
          {actions && <div className="flex flex-none gap-1">{actions}</div>}
        </div>
      </div>
    );
  }

  return (
    <label
      data-slot="address-card"
      className={cn(
        "font-ui flex cursor-pointer gap-3 rounded-xl border p-5",
        "motion-instant transition-[border-color,background-color]",
        selected
          ? "border-border-accent bg-surface-accent-subtle"
          : "border-border-subtle bg-surface-raised hover:border-border-strong",
        "has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-[var(--focus-ring)]",
        className
      )}
    >
      <span className="relative mt-0.5 inline-grid place-items-center">
        <input
          type="radio"
          name={name}
          value={address.id}
          checked={selected}
          onChange={() => onSelect?.()}
          className={cn("peer absolute size-full cursor-pointer opacity-0", focusRing)}
        />
        <span
          aria-hidden
          className={cn(
            "grid size-[19px] flex-none place-items-center rounded-full border-[1.5px]",
            "border-border-strong bg-surface-raised motion-instant transition-[border-color]",
            "peer-checked:border-surface-accent peer-checked:[&>span]:scale-100"
          )}
        >
          <span className="bg-surface-accent motion-instant size-[9px] scale-0 rounded-full transition-transform" />
        </span>
      </span>

      <span className="min-w-0 flex-1">{body}</span>

      {actions && <span className="flex flex-none gap-1">{actions}</span>}
    </label>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Blocks"}],["$","$L1e",null,{"children":"Address card"}],["$","$L1f",null,{"children":"A labelled delivery address with default and edit affordances."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"address-card"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/address-card","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/badge","@woohl/cva","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]