react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/types/components/lib/ecommerce/ProductGrid.d.ts

@@ -0,0 +1,41 @@
+import type { Product } from './types';
+import './ProductGrid.css';
+/**
+ * ProductGrid — Responsive grid of StoreProductCard tiles with an empty state.
+ * Works on its own or as the target of FilterSidebar / ProductToolbar (same `id`).
+ *
+ * @param {Product[]} products - Products to render.
+ * @param {string} id - Grid id; FilterSidebar and ProductToolbar point at it. Default 'product-grid'.
+ * @param {string} productBase - Product URL prefix; links become `${productBase}${slug}/`. Default '#'.
+ * @param {Record<string, string>} categoryNames - Category id → label for the card eyebrow.
+ * @param {number} columns - Desktop columns (2–5). Default 4.
+ * @param {string} cardVariant - StoreProductCard variant (glass|minimal|bordered). Default 'glass'.
+ * @param {string} cardSize - StoreProductCard size (sm|md|lg). Default 'md'.
+ * @param {string} currency - ISO currency. Default 'USD'.
+ * @param {string} locale - Number format locale. Default 'en-US'.
+ * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
+ * @param {boolean} openCart - Open the drawer after adding (false = toast). Default true.
+ * @param {string} emptyTitle - Empty state heading. Default 'No products match'.
+ * @param {string} emptyText - Empty state copy.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: cards keep their own headings; the empty state is a polite status message.
+ */
+export interface ProductGridProps {
+    products?: Product[];
+    id?: string;
+    productBase?: string;
+    categoryNames?: Record<string, string>;
+    columns?: number;
+    cardVariant?: 'glass' | 'minimal' | 'bordered';
+    cardSize?: 'sm' | 'md' | 'lg';
+    currency?: string;
+    locale?: string;
+    cartKey?: string;
+    openCart?: boolean;
+    emptyTitle?: string;
+    emptyText?: string;
+    className?: string;
+}
+export declare function ProductGrid({ products, id, productBase, categoryNames, columns, cardVariant, cardSize, currency, locale, cartKey, openCart, emptyTitle, emptyText, className, }: ProductGridProps): import("react").JSX.Element;
+export default ProductGrid;

package/dist/types/components/lib/ecommerce/ProductMedia.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import './ProductMedia.css';
+/**
+ * ProductMedia — Product visual: a real photo, or a generated backdrop with a
+ * line-art illustration so demo catalogs look finished without external images.
+ *
+ * @param {string} image - Product photo URL. When set, replaces the illustration.
+ * @param {string} alt - Alternative text. Required for photos; illustrations are decorative.
+ * @param {string} icon - Built-in illustration (headphones|watch|sneaker|backpack|camera|lamp|keyboard|sunglasses|bottle|speaker|jacket|mug|plant|shirt|bag|phone).
+ * @param {number} hue - 0–360 hue of the generated backdrop. Default 40 (gold).
+ * @param {string} ratio - CSS aspect-ratio. Default '1 / 1'.
+ * @param {string} size - Illustration scale (sm|md|lg). Default 'md'.
+ * @param {string} variant - Backdrop style (glow|soft|flat). Default 'glow'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: illustrations are aria-hidden; photos need `alt`.
+ */
+export interface ProductMediaProps {
+    image?: string;
+    alt?: string;
+    icon?: string;
+    hue?: number;
+    ratio?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'glow' | 'soft' | 'flat';
+    className?: string;
+    children?: ReactNode;
+}
+export declare function ProductMedia({ image, alt, icon, hue, ratio, size, variant, className, children }: ProductMediaProps): import("react").JSX.Element;
+export default ProductMedia;

package/dist/types/components/lib/ecommerce/ProductRating.d.ts

@@ -0,0 +1,23 @@
+import './ProductRating.css';
+/**
+ * ProductRating — Read-only star rating with value and review count.
+ *
+ * @param {number} value - Average rating, 0–5. Default 4.6.
+ * @param {number} count - Number of reviews (optional).
+ * @param {string} size - Visual size (sm|md|lg). Default 'sm'.
+ * @param {boolean} showValue - Print the numeric value. Default true.
+ * @param {string} label - Accessible label template; `{value}` and `{count}` are replaced.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: exposed as one `role="img"` with a full text label; stars are decorative.
+ */
+export interface ProductRatingProps {
+    value?: number;
+    count?: number;
+    size?: 'sm' | 'md' | 'lg';
+    showValue?: boolean;
+    label?: string;
+    className?: string;
+}
+export declare function ProductRating({ value, count, size, showValue, label, className, }: ProductRatingProps): import("react").JSX.Element;
+export default ProductRating;

package/dist/types/components/lib/ecommerce/ProductToolbar.d.ts

@@ -0,0 +1,35 @@
+import './ProductToolbar.css';
+/**
+ * ProductToolbar — Catalog heading bar: title, live result count and a sort select
+ * (built on ModernSelect) that drives FilterSidebar's sorting.
+ *
+ * @param {string} title - Page heading. Default 'All products'.
+ * @param {string} description - Optional supporting copy.
+ * @param {number} total - Initial product count. Default 0.
+ * @param {string} target - ProductGrid id. Default 'product-grid'.
+ * @param {string} filtersId - FilterSidebar form id (sort select becomes `${filtersId}-sort`). Default 'catalog-filters'.
+ * @param {Array<{label: string, value: string}>} sortOptions - Sort choices (values: featured|price-asc|price-desc|rating|name).
+ * @param {string} countLabel - Text after the count. Default 'products'.
+ * @param {string} headingLevel - Title element (h1|h2). Default 'h1'.
+ * @param {string} variant - Layout (split|stacked). Default 'split'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: the count lives in a polite live region so filter changes are announced.
+ */
+export interface ProductToolbarProps {
+    title?: string;
+    description?: string;
+    total?: number;
+    target?: string;
+    filtersId?: string;
+    sortOptions?: Array<{
+        label: string;
+        value: string;
+    }>;
+    countLabel?: string;
+    headingLevel?: 'h1' | 'h2';
+    variant?: 'split' | 'stacked';
+    className?: string;
+}
+export declare function ProductToolbar({ title, description, total, target, filtersId, sortOptions, countLabel, headingLevel, variant, className, }: ProductToolbarProps): import("react").JSX.Element;
+export default ProductToolbar;

package/dist/types/components/lib/ecommerce/PromoBar.d.ts

@@ -0,0 +1,29 @@
+import './PromoBar.css';
+/**
+ * PromoBar — Slim announcement bar for shipping offers, sales or codes,
+ * with rotating messages and an optional dismiss button.
+ *
+ * @param {string[]} messages - One or more messages; several rotate every `interval` ms.
+ * @param {string} href - Optional link for the whole bar.
+ * @param {number} interval - Rotation interval in ms. Default 4500.
+ * @param {boolean} dismissible - Show a close button (remembered per session). Default true.
+ * @param {string} variant - Style (gold|glass|dark). Default 'gold'.
+ * @param {string} size - Height (sm|md). Default 'sm'.
+ * @param {string} storageKey - sessionStorage key for the dismissed state. Default 'ack-promo-closed'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: rotation pauses on hover/focus and is disabled with reduced motion;
+ * messages live in a polite live region only after the user interacts, never on load.
+ */
+export interface PromoBarProps {
+    messages?: string[];
+    href?: string;
+    interval?: number;
+    dismissible?: boolean;
+    variant?: 'gold' | 'glass' | 'dark';
+    size?: 'sm' | 'md';
+    storageKey?: string;
+    className?: string;
+}
+export declare function PromoBar({ messages, href, interval, dismissible, variant, size, storageKey, className, }: PromoBarProps): import("react").JSX.Element;
+export default PromoBar;

package/dist/types/components/lib/ecommerce/StockIndicator.d.ts

@@ -0,0 +1,29 @@
+import './StockIndicator.css';
+/**
+ * StockIndicator — Urgency notice for product pages: low-stock bar ("Only 3 left") and a
+ * live "N people are viewing this" counter that drifts gently.
+ *
+ * @param {number} stock - Units left. Default 3.
+ * @param {number} threshold - At or below this value the low-stock style is used. Default 5.
+ * @param {number} capacity - Value that fills the bar completely. Default 20.
+ * @param {number} viewers - Starting number of viewers (0 hides the line). Default 14.
+ * @param {boolean} live - Let the viewers count move every few seconds. Default true.
+ * @param {string} variant - Style (card|inline). Default 'card'.
+ * @param {string} size - Density (sm|md). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: stock text is real text (not colour alone); the moving viewers number is not
+ * announced (aria-live off) to avoid noise; animation stops with prefers-reduced-motion.
+ */
+export interface StockIndicatorProps {
+    stock?: number;
+    threshold?: number;
+    capacity?: number;
+    viewers?: number;
+    live?: boolean;
+    variant?: 'card' | 'inline';
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare function StockIndicator({ stock, threshold, capacity, viewers, live, variant, size, className, }: StockIndicatorProps): import("react").JSX.Element;
+export default StockIndicator;

package/dist/types/components/lib/ecommerce/StoreHeader.d.ts

@@ -0,0 +1,54 @@
+import './StoreHeader.css';
+interface ChildLink {
+    label: string;
+    href: string;
+    description?: string;
+}
+interface NavLink {
+    label: string;
+    href: string;
+    children?: ChildLink[];
+}
+/**
+ * StoreHeader — Shop navigation bar: brand, menu with category dropdowns, search,
+ * account link and a cart button whose badge follows the cart store live.
+ *
+ * @param {string} brand - Store name. Default 'Nova Store'.
+ * @param {string} brandHref - Brand link. Default '/'.
+ * @param {Array} links - Menu items `{ label, href, children?: { label, href, description? }[] }`.
+ * @param {string} searchAction - Search form action URL. Default '#'.
+ * @param {string} searchPlaceholder - Search placeholder. Default 'Search products'.
+ * @param {string} accountHref - Account link (hidden when empty). Default '#'.
+ * @param {string} cartKey - Cart storage key. Default 'ack-cart'.
+ * @param {string} cartLabel - Accessible label for the cart button. Default 'Cart'.
+ * @param {string} currentHref - Marks the matching menu link with aria-current.
+ * @param {boolean} sticky - Stick to the top on scroll. Default true.
+ * @param {string} variant - Style (glass|solid|transparent). Default 'glass'.
+ * @param {string} size - Height (sm|md|lg). Default 'md'.
+ * @param {boolean} themeToggle - Show a light/dark toggle (sets html[data-theme], remembered in localStorage). Default true.
+ * @param {string} id - Base id for inner elements (unique per page). Default 'store-header'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: dropdowns are disclosure buttons (aria-expanded) closed with Escape or outside click;
+ * the mobile menu is a disclosure too; the cart badge count is part of the button label.
+ * Clicking the cart button dispatches `ack:cart-open`, which CartDrawer listens to.
+ */
+export interface StoreHeaderProps {
+    brand?: string;
+    brandHref?: string;
+    links?: NavLink[];
+    searchAction?: string;
+    searchPlaceholder?: string;
+    accountHref?: string;
+    cartKey?: string;
+    cartLabel?: string;
+    currentHref?: string;
+    sticky?: boolean;
+    variant?: 'glass' | 'solid' | 'transparent';
+    size?: 'sm' | 'md' | 'lg';
+    themeToggle?: boolean;
+    id?: string;
+    className?: string;
+}
+export declare function StoreHeader({ brand, brandHref, links, searchAction, searchPlaceholder, accountHref, cartKey, cartLabel, currentHref, sticky, variant, size, themeToggle, id, className, }: StoreHeaderProps): import("react").JSX.Element;
+export default StoreHeader;

package/dist/types/components/lib/ecommerce/StoreHero.d.ts

@@ -0,0 +1,48 @@
+import type { Product } from './types';
+import './StoreHero.css';
+interface Cta {
+    label: string;
+    href: string;
+}
+/**
+ * StoreHero — Shop landing hero: headline, CTAs, quick stats and a featured product
+ * stage with floating price and rating chips.
+ *
+ * @param {string} eyebrow - Small label above the title. Default 'New season · 2026'.
+ * @param {string} title - Headline. Default 'Gear that feels'.
+ * @param {string} highlight - Gradient part of the headline. Default 'made for you'.
+ * @param {string} subtitle - Supporting copy.
+ * @param {{label: string, href: string}} primary - Main CTA.
+ * @param {{label: string, href: string}} secondary - Secondary CTA (optional).
+ * @param {Array<{value: string, label: string}>} stats - Proof points below the CTAs.
+ * @param {Product} product - Featured product shown on the stage.
+ * @param {string} productHref - Featured product link.
+ * @param {string} currency - ISO currency. Default 'USD'.
+ * @param {string} locale - Number format locale. Default 'en-US'.
+ * @param {string} variant - Layout (split|centered). Default 'split'.
+ * @param {string} size - Vertical rhythm (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: one h1; decorative stage art is aria-hidden; the featured product is a real link.
+ */
+export interface StoreHeroProps {
+    eyebrow?: string;
+    title?: string;
+    highlight?: string;
+    subtitle?: string;
+    primary?: Cta;
+    secondary?: Cta;
+    stats?: Array<{
+        value: string;
+        label: string;
+    }>;
+    product?: Product;
+    productHref?: string;
+    currency?: string;
+    locale?: string;
+    variant?: 'split' | 'centered';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function StoreHero({ eyebrow, title, highlight, subtitle, primary, secondary, stats, product, productHref, currency, locale, variant, size, className, }: StoreHeroProps): import("react").JSX.Element;
+export default StoreHero;

package/dist/types/components/lib/ecommerce/StoreProductCard.d.ts

@@ -0,0 +1,40 @@
+import type { Product } from './types';
+import './StoreProductCard.css';
+/**
+ * StoreProductCard — Shop product tile with media, badge, rating, colour swatches,
+ * price (with compare-at), wishlist toggle and an add-to-cart button wired to the cart store.
+ *
+ * @param {Product} product - Product data (see ecommerce/types.ts). A demo product is used by default.
+ * @param {string} href - Product page URL. Default '#'.
+ * @param {string} categoryLabel - Small label above the title (e.g. category name).
+ * @param {string} currency - ISO currency. Default 'USD'.
+ * @param {string} locale - Number format locale. Default 'en-US'.
+ * @param {string} ctaLabel - Add-to-cart label. Default 'Add to cart'.
+ * @param {string} addedLabel - Label shown briefly after adding. Default 'Added'.
+ * @param {string} cartKey - Cart storage key (several stores on one domain). Default 'ack-cart'.
+ * @param {boolean} openCart - Open the CartDrawer after adding; false fires a CartToast instead. Default true.
+ * @param {string} variant - Visual style (glass|minimal|bordered). Default 'glass'.
+ * @param {string} size - Card density (sm|md|lg). Default 'md'.
+ * @param {string} headingLevel - Title element (h2|h3|h4). Default 'h3'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: the title link covers the whole card (stretched link) so there are no
+ * nested interactive elements; wishlist uses aria-pressed; out-of-stock disables the button.
+ */
+export interface StoreProductCardProps {
+    product?: Product;
+    href?: string;
+    categoryLabel?: string;
+    currency?: string;
+    locale?: string;
+    ctaLabel?: string;
+    addedLabel?: string;
+    cartKey?: string;
+    openCart?: boolean;
+    variant?: 'glass' | 'minimal' | 'bordered';
+    size?: 'sm' | 'md' | 'lg';
+    headingLevel?: 'h2' | 'h3' | 'h4';
+    className?: string;
+}
+export declare function StoreProductCard({ product, href, categoryLabel, currency, locale, ctaLabel, addedLabel, cartKey, openCart, variant, size, headingLevel, className, }: StoreProductCardProps): import("react").JSX.Element;
+export default StoreProductCard;

package/dist/types/components/lib/ecommerce/TrustBadges.d.ts

@@ -0,0 +1,24 @@
+import './TrustBadges.css';
+interface Item {
+    icon: 'truck' | 'return' | 'lock' | 'chat' | 'gift' | 'leaf';
+    title: string;
+    text?: string;
+}
+/**
+ * TrustBadges — Row of store guarantees (shipping, returns, secure payment, support).
+ *
+ * @param {Array<{icon: string, title: string, text?: string}>} items - Badges. Icons: truck|return|lock|chat|gift|leaf.
+ * @param {string} variant - Style (cards|inline|divided). Default 'cards'.
+ * @param {string} size - Density (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: plain list; icons are decorative.
+ */
+export interface TrustBadgesProps {
+    items?: Item[];
+    variant?: 'cards' | 'inline' | 'divided';
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function TrustBadges({ items, variant, size, className, }: TrustBadgesProps): import("react").JSX.Element;
+export default TrustBadges;

package/dist/types/components/lib/ecommerce/VariantPicker.d.ts

@@ -0,0 +1,37 @@
+import './VariantPicker.css';
+interface Option {
+    label: string;
+    value?: string;
+    hex?: string;
+    disabled?: boolean;
+}
+/**
+ * VariantPicker — Colour swatches or size pills as an accessible radio group.
+ * Can keep an add-to-cart button's `data-variant` in sync with the selection.
+ *
+ * @param {string} label - Group legend. Default 'Colour'.
+ * @param {string} name - Radio name. Default 'variant'.
+ * @param {string} type - Picker style (swatch|pill). Default 'swatch'.
+ * @param {Array<{label: string, value?: string, hex?: string, disabled?: boolean}>} options - Choices.
+ * @param {number} selected - Index of the pre-selected option. Default 0.
+ * @param {string} target - id of an add-to-cart button whose `data-variant` follows the choice.
+ * @param {string} size - Control size (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Theming: --vp-active-bg, --vp-active-color, --vp-active-border, --vp-ring, --vp-radius.
+ *
+ * Accessibility: native radios (arrow keys work), visible focus ring, the chosen value is
+ * printed next to the legend; disabled options are announced as unavailable.
+ */
+export interface VariantPickerProps {
+    label?: string;
+    name?: string;
+    type?: 'swatch' | 'pill';
+    options?: Option[];
+    selected?: number;
+    target?: string;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+export declare function VariantPicker({ label, name, type, options, selected, target, size, className, }: VariantPickerProps): import("react").JSX.Element;
+export default VariantPicker;

package/dist/types/components/lib/ecommerce/cart-store.d.ts

@@ -0,0 +1,31 @@
+import type { CartItem, MoneyFormat } from './types';
+export declare const CART_EVENT = "ack:cart";
+/** Fired after an add-to-cart button adds an item: `{ key, item, openCart }`. */
+export declare const ADDED_EVENT = "ack:cart-added";
+/** Fire this to show any notice in CartToast: `{ title, text?, tone?: 'info'|'success'|'warning'|'danger' }`. */
+export declare const NOTIFY_EVENT = "ack:notify";
+export declare function formatMoney(value: number, { currency, locale }?: MoneyFormat): string;
+/** Line id: product id + variant, so "Tee / M" and "Tee / L" are separate lines. */
+export declare function lineId(id: string, variant?: string): string;
+export declare function createCart(storageKey?: string): {
+    key: string;
+    items: () => CartItem[];
+    count: () => number;
+    subtotal: () => number;
+    add(item: Omit<CartItem, "qty"> & {
+        qty?: number;
+    }): void;
+    setQty(id: string, qty: number): void;
+    remove(id: string): void;
+    clear(): void;
+    /** Fills an empty cart once (demo stores). Never overwrites a real cart. */
+    seed(items: CartItem[]): void;
+    subscribe(fn: (items: CartItem[]) => void): () => void;
+};
+export type Cart = ReturnType<typeof createCart>;
+/**
+ * Wires every `[data-add-to-cart]` button inside `root` to the cart.
+ * The attribute holds the item JSON; an optional `data-cart-key` picks the store.
+ * Variant pickers can update `data-variant` on the button before the click.
+ */
+export declare function bindAddToCart(root?: ParentNode): void;

package/dist/types/components/lib/ecommerce/catalog-filter.d.ts

@@ -0,0 +1,12 @@
+export interface CatalogState {
+    categories: string[];
+    colors: string[];
+    maxPrice: number;
+    minRating: number;
+    inStockOnly: boolean;
+    sort: 'featured' | 'price-asc' | 'price-desc' | 'rating' | 'name' | string;
+}
+/** Filters and re-orders the cards inside `grid`. Returns the number of visible cards. */
+export declare function applyCatalogFilter(grid: HTMLElement, state: CatalogState): number;
+/** Reads/writes `?category=` and `?sort=` so filtered views can be shared. */
+export declare function syncCatalogUrl(state: Pick<CatalogState, 'categories' | 'sort'>): void;

package/dist/types/components/lib/ecommerce/index.d.ts

@@ -0,0 +1,30 @@
+export { default as ProductMedia } from './ProductMedia';
+export { default as ProductRating } from './ProductRating';
+export { default as StoreProductCard } from './StoreProductCard';
+export { default as ProductGrid } from './ProductGrid';
+export { default as PromoBar } from './PromoBar';
+export { default as StoreHeader } from './StoreHeader';
+export { default as CartDrawer } from './CartDrawer';
+export { default as StoreHero } from './StoreHero';
+export { default as CategoryTiles } from './CategoryTiles';
+export { default as TrustBadges } from './TrustBadges';
+export { default as FilterSidebar } from './FilterSidebar';
+export { default as ProductToolbar } from './ProductToolbar';
+export { default as ProductGallery } from './ProductGallery';
+export { default as VariantPicker } from './VariantPicker';
+export { default as ProductBuyBox } from './ProductBuyBox';
+export { default as OrderSummary } from './OrderSummary';
+export { default as CheckoutForm } from './CheckoutForm';
+export { default as CartToast } from './CartToast';
+export { default as LiveActivityToast } from './LiveActivityToast';
+export { default as CountdownBanner } from './CountdownBanner';
+export { default as StockIndicator } from './StockIndicator';
+export { default as ProductCardMinimal } from './ProductCardMinimal';
+export { default as FilterBar } from './FilterBar';
+export { default as CartPageList } from './CartPageList';
+export { createCart, bindAddToCart, formatMoney, lineId, CART_EVENT, ADDED_EVENT, NOTIFY_EVENT } from './cart-store';
+export { applyCatalogFilter, syncCatalogUrl } from './catalog-filter';
+export type { CatalogState } from './catalog-filter';
+export { productIcons, productIcon } from './product-icons';
+export type { ProductIcon } from './product-icons';
+export type { Product, ProductColor, StoreCategory, CartItem, ShippingRate, MoneyFormat } from './types';

package/dist/types/components/lib/ecommerce/product-icons.d.ts

@@ -0,0 +1,20 @@
+export declare const productIcons: {
+    readonly headphones: "<path d=\"M12 38v-6a20 20 0 0 1 40 0v6\"/><rect x=\"8\" y=\"36\" width=\"10\" height=\"16\" rx=\"4\"/><rect x=\"46\" y=\"36\" width=\"10\" height=\"16\" rx=\"4\"/><path d=\"M18 44h-2M46 44h2\"/>";
+    readonly watch: "<rect x=\"18\" y=\"18\" width=\"28\" height=\"28\" rx=\"9\"/><path d=\"M24 18l2-10h12l2 10M24 46l2 10h12l2-10\"/><path d=\"M32 25v7l5 4\"/><path d=\"M46 30h3\"/>";
+    readonly sneaker: "<path d=\"M6 44c0-6 2-14 6-20l8 4c3 2 7 2 10 0l4-3c6 8 14 11 22 12 2 0 3 2 3 4v3H6z\"/><path d=\"M6 47v3h53v-3\"/><path d=\"M22 30l3 4M27 28l3 4M32 26l2 4\"/>";
+    readonly backpack: "<rect x=\"14\" y=\"16\" width=\"36\" height=\"42\" rx=\"10\"/><path d=\"M24 16v-4a8 8 0 0 1 16 0v4\"/><rect x=\"21\" y=\"36\" width=\"22\" height=\"13\" rx=\"4\"/><path d=\"M21 42h22\"/>";
+    readonly camera: "<rect x=\"6\" y=\"18\" width=\"52\" height=\"34\" rx=\"7\"/><path d=\"M22 18l4-7h12l4 7\"/><circle cx=\"32\" cy=\"35\" r=\"10\"/><circle cx=\"32\" cy=\"35\" r=\"4\"/><path d=\"M48 25h3\"/>";
+    readonly lamp: "<path d=\"M20 10h24l8 20H12z\"/><path d=\"M32 30v20\"/><path d=\"M20 56h24\"/><path d=\"M26 50h12\"/>";
+    readonly keyboard: "<rect x=\"4\" y=\"20\" width=\"56\" height=\"26\" rx=\"5\"/><path d=\"M11 28h3M19 28h3M27 28h3M35 28h3M43 28h3M51 28h2M13 35h3M21 35h3M29 35h3M37 35h3M45 35h4M18 41h28\"/>";
+    readonly sunglasses: "<path d=\"M4 26h56\"/><path d=\"M8 26c0 9 3 14 10 14s10-5 10-14\"/><path d=\"M36 26c0 9 3 14 10 14s10-5 10-14\"/><path d=\"M28 30c2-2 6-2 8 0\"/>";
+    readonly bottle: "<path d=\"M26 6h12v8l4 6v34a4 4 0 0 1-4 4H26a4 4 0 0 1-4-4V20l4-6z\"/><path d=\"M22 28h20M22 44h20\"/>";
+    readonly speaker: "<rect x=\"16\" y=\"6\" width=\"32\" height=\"52\" rx=\"8\"/><circle cx=\"32\" cy=\"38\" r=\"10\"/><circle cx=\"32\" cy=\"38\" r=\"3\"/><circle cx=\"32\" cy=\"17\" r=\"4\"/>";
+    readonly jacket: "<path d=\"M22 8l10 6 10-6 12 8 4 22-8 2v18H14V40l-8-2 4-22z\"/><path d=\"M32 14v42\"/><path d=\"M22 8l-2 12 6 6M42 8l2 12-6 6\"/><path d=\"M38 34h4M38 42h4\"/>";
+    readonly mug: "<path d=\"M12 18h32v28a8 8 0 0 1-8 8H20a8 8 0 0 1-8-8z\"/><path d=\"M44 24h4a6 6 0 0 1 0 12h-4\"/><path d=\"M22 8c-2 3 2 4 0 7M30 8c-2 3 2 4 0 7\"/>";
+    readonly plant: "<path d=\"M20 40h24l-3 18H23z\"/><path d=\"M32 40V22\"/><path d=\"M32 30c-8 0-12-6-12-14 8 0 12 6 12 14zM32 26c0-8 4-14 12-14 0 8-4 14-12 14z\"/>";
+    readonly shirt: "<path d=\"M22 8l-14 8 5 12 7-3v31h24V25l7 3 5-12-14-8c-1 4-5 6-10 6s-9-2-10-6z\"/>";
+    readonly bag: "<path d=\"M12 22h40l-4 34H16z\"/><path d=\"M24 22v-6a8 8 0 0 1 16 0v6\"/><path d=\"M24 30v2M40 30v2\"/>";
+    readonly phone: "<rect x=\"18\" y=\"4\" width=\"28\" height=\"56\" rx=\"7\"/><path d=\"M28 10h8\"/><circle cx=\"32\" cy=\"52\" r=\"2\"/>";
+};
+export type ProductIcon = keyof typeof productIcons;
+export declare function productIcon(name?: string): string;

package/dist/types/components/lib/ecommerce/types.d.ts

@@ -0,0 +1,61 @@
+import type { ProductIcon } from './product-icons';
+export interface ProductColor {
+    name: string;
+    hex: string;
+}
+export interface Product {
+    /** URL-safe id, also used as cart line id. */
+    slug: string;
+    name: string;
+    /** Price in major units (e.g. 129.9). */
+    price: number;
+    /** Optional "before" price, shown struck through. */
+    compareAt?: number;
+    /** Category id (matches `StoreCategory.id`). */
+    category: string;
+    /** 0–5 average rating. */
+    rating?: number;
+    reviews?: number;
+    /** Short highlight such as "New" or "-20%". */
+    badge?: string;
+    badgeVariant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+    colors?: ProductColor[];
+    sizes?: string[];
+    /** Built-in illustration used when no `image` is given. */
+    icon?: ProductIcon;
+    /** Hue (0–360) of the generated product backdrop. */
+    hue?: number;
+    /** Real product photo; replaces the illustration. */
+    image?: string;
+    description?: string;
+    inStock?: boolean;
+    /** Units left; StockIndicator shows urgency at or below its threshold. */
+    stock?: number;
+}
+export interface StoreCategory {
+    id: string;
+    name: string;
+    description?: string;
+    icon?: ProductIcon;
+    hue?: number;
+}
+export interface CartItem {
+    id: string;
+    name: string;
+    price: number;
+    qty: number;
+    variant?: string;
+    image?: string;
+    icon?: ProductIcon;
+    hue?: number;
+}
+export interface ShippingRate {
+    id: string;
+    label: string;
+    eta: string;
+    price: number;
+}
+export interface MoneyFormat {
+    currency?: string;
+    locale?: string;
+}

package/dist/types/components/lib/feedback/AnimatedCheckmark.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import './AnimatedCheckmark.css';
+/**
+ * AnimatedCheckmark — A decorative SVG checkmark with a circular fill and draw animation.
+ *
+ * @param size - Optional. Size in px. Default 56.
+ * @param color - Optional. Fill/stroke color. Default '#7ac142'.
+ */
+export interface AnimatedCheckmarkProps extends HTMLAttributes<HTMLDivElement> {
+    size?: number;
+    color?: string;
+}
+export declare function AnimatedCheckmark({ size, color, className, style, ...rest }: AnimatedCheckmarkProps): import("react").JSX.Element;
+export default AnimatedCheckmark;

package/dist/types/components/lib/feedback/Badge.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './Badge.css';
+/**
+ * Badge — A compact visual indicator for labels, categories, or status tags.
+ *
+ * @param variant - Optional. 'default' | 'success' | 'warning' | 'danger' | 'info'. Default 'default'.
+ * @param dot - Optional. Show a leading status dot. Default false.
+ * @param pulse - Optional. Pulse the dot. Default false.
+ */
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+    dot?: boolean;
+    pulse?: boolean;
+    children?: ReactNode;
+}
+export declare function Badge({ variant, dot, pulse, className, children, ...rest }: BadgeProps): import("react").JSX.Element;
+export default Badge;

package/dist/types/components/lib/feedback/CircleProgress.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+import './CircleProgress.css';
+/**
+ * CircleProgress — A circular chart indicating a percentage of completion.
+ *
+ * @param percent - Required. 0–100.
+ * @param size - Optional. Diameter in px. Default 80.
+ * @param color - Optional. Default 'var(--c-primary, #6366f1)'.
+ * @param label - Optional. Accessible label. Default 'Progress'.
+ */
+export interface CircleProgressProps extends HTMLAttributes<HTMLDivElement> {
+    percent: number;
+    size?: number;
+    color?: string;
+    label?: string;
+}
+export declare function CircleProgress({ percent, size, color, label, className, style, ...rest }: CircleProgressProps): import("react").JSX.Element;
+export default CircleProgress;

package/dist/types/components/lib/feedback/ConfettiFeedback.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+import './ConfettiFeedback.css';
+/**
+ * ConfettiFeedback — A celebration component that triggers a falling confetti animation.
+ *
+ * @param label - Optional. Default 'Success!'.
+ * @param color - Optional. Confetti color. Default 'var(--c-primary, #6366f1)'.
+ * @param active - Optional. Whether confetti is falling. Default true.
+ * @param pieces - Optional. Number of confetti pieces. Default 12.
+ */
+export interface ConfettiFeedbackProps extends HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    color?: string;
+    active?: boolean;
+    pieces?: number;
+}
+export declare function ConfettiFeedback({ label, color, active, pieces, className, ...rest }: ConfettiFeedbackProps): import("react").JSX.Element;
+export default ConfettiFeedback;