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:Tbce,import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { cva, type VariantProps } from "@/registry/tier-2-primitives/lib/cva"; import { formatPrice } from "@/registry/tier-1-tokens/lib/constants"; /** * Price. * * Woohl prices in rupees, formatted the Indian way — ₹1,20,000, not ₹120,000. * `Intl` with the `en-IN` locale gets the lakh/crore grouping right; every * hand-rolled `toLocaleString` eventually doesn't. * * THE STRUCK-THROUGH PRICE IS NOT DECORATION * When `compareAt` is set, the original is marked up as `` and given * screen-reader text, so a non-visual reader hears "₹1,400, now ₹1,180" * rather than two numbers in a row with no relationship. A line through a * number is a visual convention that carries no meaning to a screen reader on * its own. */ const priceVariants = cva("inline-flex items-baseline gap-2 font-ui", { variants: { size: { sm: "text-body", md: "text-body-lg", lg: "text-h3", xl: "text-h2", }, tone: { /** The default. Price is the accent's most common job on a listing. */ accent: "text-text-accent", /** In a table, a summary line, or anywhere orange would be the fifth orange thing on screen. */ primary: "text-text-primary", }, }, defaultVariants: { size: "md", tone: "accent" }, }); export type PriceProps = VariantProps & { /** In rupees. */ amount: number; /** The original price, when this is a reduction. Struck through. */ compareAt?: number; /** "per kg", "per piece" — bulk listings. */ unit?: string; showDecimals?: boolean; className?: string; }; export function Price({ amount, compareAt, unit, size, tone, showDecimals, className, }: PriceProps) { const now = formatPrice(amount, { showDecimals }); const before = compareAt !== undefined ? formatPrice(compareAt, { showDecimals }) : null; return ( {before && Was {before}, now } {now} {unit && {unit}} {before && ( ~~{before}~~ )} ); } /** * The saving, as a badge-shaped line: "Save ₹220 (16%)". * * Stated in rupees first, because that is the number a buyer is actually * weighing — the percentage is context for it. */ export function PriceSaving({ amount, compareAt, className, }: { amount: number; compareAt: number; className?: string; }) { if (compareAt <= amount) return null; const saved = compareAt - amount; const percent = Math.round((saved / compareAt) * 100); return ( Save {formatPrice(saved)} ({percent}%) ); } 24:T5d5e,
import { cn } from "@/registry/tier-2-primitives/lib/cn"; import { cva, type VariantProps } from "@/registry/tier-2-primitives/lib/cva"; import { formatPrice } from "@/registry/tier-1-tokens/lib/constants"; /** * Price. * * Woohl prices in rupees, formatted the Indian way — ₹1,20,000, not ₹120,000. * `Intl` with the `en-IN` locale gets the lakh/crore grouping right; every * hand-rolled `toLocaleString` eventually doesn't. * * THE STRUCK-THROUGH PRICE IS NOT DECORATION * When `compareAt` is set, the original is marked up as `<s>` and given * screen-reader text, so a non-visual reader hears "₹1,400, now ₹1,180" * rather than two numbers in a row with no relationship. A line through a * number is a visual convention that carries no meaning to a screen reader on * its own. */ const priceVariants = cva("inline-flex items-baseline gap-2 font-ui", { variants: { size: { sm: "text-body", md: "text-body-lg", lg: "text-h3", xl: "text-h2", }, tone: { /** The default. Price is the accent's most common job on a listing. */ accent: "text-text-accent", /** In a table, a summary line, or anywhere orange would be the fifth orange thing on screen. */ primary: "text-text-primary", }, }, defaultVariants: { size: "md", tone: "accent" }, }); export type PriceProps = VariantProps<typeof priceVariants> & { /** In rupees. */ amount: number; /** The original price, when this is a reduction. Struck through. */ compareAt?: number; /** "per kg", "per piece" — bulk listings. */ unit?: string; showDecimals?: boolean; className?: string; }; export function Price({ amount, compareAt, unit, size, tone, showDecimals, className, }: PriceProps) { const now = formatPrice(amount, { showDecimals }); const before = compareAt !== undefined ? formatPrice(compareAt, { showDecimals }) : null; return ( {before && Was {before}, now } {now} {unit && {unit}} {before && ( <s aria-hidden className="text-text-muted text-[0.82em] font-normal"> {before} </s> )} ); } /** * The saving, as a badge-shaped line: "Save ₹220 (16%)". * * Stated in rupees first, because that is the number a buyer is actually * weighing — the percentage is context for it. */ export function PriceSaving({ amount, compareAt, className, }: { amount: number; compareAt: number; className?: string; }) { if (compareAt <= amount) return null; const saved = compareAt - amount; const percent = Math.round((saved / compareAt) * 100); return ( Save {formatPrice(saved)} ({percent}%) ); }
13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Blocks"}],["$","$L1e",null,{"children":"Price"}],["$","$L1f",null,{"children":"Rupee formatting, compare-at strikethrough and the saving line."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"price"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/price","source":"$23","highlighted":"$24","npm":[],"registry":["@woohl/constants","@woohl/cva","@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]