admin-ui-starter-kit 0.6.9 → 0.7.1

package/.agents/skills/component-library-rules/references/components/base__currency.md

@@ -1,7 +1,7 @@
 ---
 id: base/currency
 title: "Currency"
-description: "MoneyDisplay and CurrencyPairPreview — locale-aware, dual-pricing-aware money rendering driven by useCurrency() / UIProvider config."
+description: "Currency formatting helpers, pair previews, and dual-pricing examples driven by useCurrency() / UIProvider config."
 layer: base
 family: "Display"
 sourcePath: src/components/base/currency
@@ -25,15 +25,15 @@ tags:
   - base
   - display
   - currency
-  - moneydisplay
-  - currencypairpreview
-  - locale
-  - aware
+  - formatting
+  - helpers
+  - pair
+  - previews
 ---
 
 # Currency
 
-MoneyDisplay and CurrencyPairPreview — locale-aware, dual-pricing-aware money rendering driven by useCurrency() / UIProvider config.
+Currency formatting helpers, pair previews, and dual-pricing examples driven by useCurrency() / UIProvider config.
 
 **Layer:** `base`
 **Source:** `src/components/base/currency`
@@ -46,11 +46,10 @@ The examples below use repository source aliases because they run inside the pre
 
 ## Overview
 
-`MoneyDisplay` renders a primary (and optional secondary) currency amount,
-using the active `useCurrency()` config for formatting, dual-pricing, and
-display mode. `CurrencyPairPreview` renders an inline `source → target`
-conversion. Both honour `UIProvider` config so consumers can flip the entire
-app to dual pricing or a different default currency in one place.
+Use this page for cross-currency behavior: dual pricing, conversion previews,
+provider configuration, and realistic mixed-currency rows. The focused
+`MoneyDisplay` component page lives at [Money display](#/base/money-display)
+so its component API is documented once.
 
 ## Default
 

package/.agents/skills/component-library-rules/references/components/base__item.md

@@ -109,7 +109,7 @@ import { Switch } from '@/components/base/forms/fields/switch';
 export function Basic() {
 	return (
 		<ItemGroup>
-			<Item>
+			<Item padding="default">
 				<ItemMedia variant="icon">
 					<Mail />
 				</ItemMedia>
@@ -124,7 +124,7 @@ export function Basic() {
 				</ItemActions>
 			</Item>
 			<ItemSeparator />
-			<Item>
+			<Item padding="default">
 				<ItemMedia variant="icon">
 					<Bell />
 				</ItemMedia>
@@ -143,7 +143,7 @@ export function Basic() {
 export function Variants() {
 	return (
 		<ItemGroup>
-			<Item variant="default">
+			<Item variant="default" padding="default">
 				<ItemMedia variant="icon">
 					<Home />
 				</ItemMedia>
@@ -152,7 +152,7 @@ export function Variants() {
 					<ItemDescription>No border, transparent background.</ItemDescription>
 				</ItemContent>
 			</Item>
-			<Item variant="outline">
+			<Item variant="outline" padding="default">
 				<ItemMedia variant="icon">
 					<Settings />
 				</ItemMedia>
@@ -164,7 +164,7 @@ export function Variants() {
 					<Badge variant="success">Active</Badge>
 				</ItemActions>
 			</Item>
-			<Item variant="muted">
+			<Item variant="muted" padding="default">
 				<ItemMedia variant="icon">
 					<Bell />
 				</ItemMedia>
@@ -180,7 +180,7 @@ export function Variants() {
 export function PolymorphicLink() {
 	return (
 		<ItemGroup>
-			<Item render={<a href="#" onClick={(e) => e.preventDefault()} />}>
+			<Item padding="default" render={<a href="#" onClick={(e) => e.preventDefault()} />}>
 				<ItemMedia variant="icon">
 					<Home />
 				</ItemMedia>
@@ -189,7 +189,7 @@ export function PolymorphicLink() {
 					<ItemDescription>Overview of your workspace and activity.</ItemDescription>
 				</ItemContent>
 			</Item>
-			<Item render={<a href="#" onClick={(e) => e.preventDefault()} />}>
+			<Item padding="default" render={<a href="#" onClick={(e) => e.preventDefault()} />}>
 				<ItemMedia variant="icon">
 					<Settings />
 				</ItemMedia>

package/.agents/skills/component-library-rules/references/components/base__money-display.md

@@ -33,6 +33,10 @@ The examples below use repository source aliases because they run inside the pre
 
 ## Example
 
+For dual-pricing modes, pair previews, and provider-wide currency defaults,
+see [Currency](#/base/currency). This page keeps the focused `MoneyDisplay`
+example and API in one place.
+
 <Example name="MoneyDisplayExample" source={examplesSource}>
 	<Examples.MoneyDisplayExample />
 </Example>

package/.agents/skills/component-library-rules/references/components/base__typography.md

@@ -56,7 +56,7 @@ The examples below use repository source aliases because they run inside the pre
 ## Overview
 
 The typography layer is intentionally tiny. `Heading` (h1–h6, optional
-`subHeading`), `Text` (six sizes, seven types, four weights, optional `asHTML`),
+`subHeading`), `Text` (seven sizes, seven types, four weights, optional `asHTML`),
 `Label` (form captions), and `TextLink` (anchor sibling of `Text`) cover every
 typographic decision in the library. Anything outside the `typography/` folder
 that reaches for a font-size class is doing it wrong.
@@ -72,7 +72,7 @@ import { Heading, Label, Text, TextLink } from 'admin-ui-starter-kit/typography'
 Use `Text` for ordinary body, labels, metadata, helper copy, and inline
 messages. Omit `size` for normal body text so the `UIProvider` typography
 default can flow through; reach for `size="xs" type="secondary"` for secondary
-details and `size="xs" type="secondary"` for dense micro labels. Use
+details and `size="xxs" type="secondary"` for dense micro labels. Use
 `weight="semibold"` instead of local font-weight classes.
 
 Use `Heading` for page or section headings, `Label` for form captions, and
@@ -177,7 +177,7 @@ import TextLink from '@/components/typography/text-link';
 import { HighLight, Underline, DangerousHTML } from '@/components/typography/typography';
 import { Input } from '@/components/base/forms/fields';
 
-const SIZES = ['xxs', 'xs', 'sm', 'base', 'lg', 'xl'] as const;
+const SIZES = ['xxs', 'xs', 'pxs', 'sm', 'base', 'lg', 'xl'] as const;
 const TYPES = ['main', 'inverse', 'secondary', 'discrete', 'error', 'success', 'primary'] as const;
 const WEIGHTS = ['regular', 'medium', 'semibold', 'bold'] as const;
 const LINE_HEIGHTS = ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'] as const;

package/.agents/skills/component-library-rules/references/components/composed__commerce-address-card.md

@@ -0,0 +1,74 @@
+---
+id: composed/commerce-address-card
+title: "Composed · Commerce · Address card"
+description: "Shipping and billing address cards with edit, remove, default, and make-default callbacks."
+layer: composed
+sourcePath: src/components/composed/commerce/address-card
+examples:
+  - ShippingAndBilling
+imports:
+  - @/components/composed/commerce
+publicImport: admin-ui-starter-kit/composed/commerce
+tags:
+  - composed
+  - address-card
+  - commerce
+  - address
+  - card
+  - shipping
+---
+
+# Composed · Commerce · Address card
+
+Shipping and billing address cards with edit, remove, default, and make-default callbacks.
+
+**Layer:** `composed`
+**Source:** `src/components/composed/commerce/address-card`
+**Consumer import:** `admin-ui-starter-kit/composed/commerce`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/composed/commerce`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Examples
+
+```tsx
+import { AddressCard } from '@/components/composed/commerce';
+
+export function ShippingAndBilling() {
+	return (
+		<div className="grid w-full max-w-3xl gap-3 md:grid-cols-2">
+			<AddressCard
+				kind="shipping"
+				name="Sarah Smitha"
+				line1="ul. Vitosha 24, ap. 5"
+				city="New York"
+				postalCode="1000"
+				country="USA"
+				phone="+1 888 123 456"
+				isDefault
+				onEdit={() => {}}
+				onRemove={() => {}}
+			/>
+			<AddressCard
+				kind="billing"
+				name="Daniel Smith"
+				line1="ul. Slavyanska 9"
+				line2="floor 3"
+				city="Los Angeles"
+				postalCode="4000"
+				country="USA"
+				onEdit={() => {}}
+				onRemove={() => {}}
+				onMakeDefault={() => {}}
+			/>
+		</div>
+	);
+}
+```
+
+## Example exports
+
+- `ShippingAndBilling`
+

package/.agents/skills/component-library-rules/references/components/composed__commerce-cart-summary.md

@@ -0,0 +1,84 @@
+---
+id: composed/commerce-cart-summary
+title: "Composed · Commerce · Cart summary"
+description: "Checkout summary card with line items, thumbnails, totals, discounts, tax, and checkout callback."
+layer: composed
+sourcePath: src/components/composed/commerce/cart-summary
+examples:
+  - CartSummary
+imports:
+  - @/components/composed/commerce
+publicImport: admin-ui-starter-kit/composed/commerce
+tags:
+  - composed
+  - cart-summary
+  - commerce
+  - cart
+  - summary
+  - checkout
+---
+
+# Composed · Commerce · Cart summary
+
+Checkout summary card with line items, thumbnails, totals, discounts, tax, and checkout callback.
+
+**Layer:** `composed`
+**Source:** `src/components/composed/commerce/cart-summary`
+**Consumer import:** `admin-ui-starter-kit/composed/commerce`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/composed/commerce`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Examples
+
+```tsx
+import { CartSummaryCard } from '@/components/composed/commerce';
+
+const bottleThumb = `data:image/svg+xml;utf8,${encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+	<rect width="96" height="96" rx="18" fill="#edf1e9"/>
+	<rect x="34" y="20" width="28" height="58" rx="9" fill="#53624d"/>
+	<rect x="39" y="12" width="18" height="13" rx="4" fill="#303b2e"/>
+	<rect x="39" y="39" width="18" height="22" rx="4" fill="#f7f0d7"/>
+</svg>
+`)}`;
+
+const voucherThumb = `data:image/svg+xml;utf8,${encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
+	<rect width="96" height="96" rx="18" fill="#eef1f5"/>
+	<ellipse cx="49" cy="73" rx="29" ry="7" fill="#d6dde6"/>
+	<rect x="24" y="38" width="32" height="30" rx="8" fill="#ffffff"/>
+	<rect x="30" y="30" width="32" height="30" rx="8" fill="#dfe6ef"/>
+	<rect x="55" y="24" width="14" height="44" rx="7" fill="#697586"/>
+	<rect x="58" y="17" width="8" height="9" rx="3" fill="#485467"/>
+	<circle cx="35" cy="66" r="9" fill="#cad6df"/>
+</svg>
+`)}`;
+
+export function CartSummary() {
+	return (
+		<div className="w-full max-w-md">
+			<CartSummaryCard
+				items={[
+					{ id: '1', name: 'Estate olive oil', variantTitle: '500 ml bottle', qty: 2, price: '48 USD', src: bottleThumb },
+					{ id: '2', productTitle: 'Spa day voucher', variantTitle: 'Weekend package', qty: 1, price: '180 USD', url: voucherThumb },
+					{ id: '3', name: 'Gift wrap', variantTitle: 'Matte white box', qty: 1, price: '15 USD' },
+				]}
+				subtotal="243 USD"
+				tax="48.60 USD"
+				shipping="0 USD"
+				discount="25 USD"
+				total="266.60 USD"
+				onCheckout={() => {}}
+			/>
+		</div>
+	);
+}
+```
+
+## Example exports
+
+- `CartSummary`
+

package/.agents/skills/component-library-rules/references/components/composed__commerce-coupon-input.md

@@ -0,0 +1,52 @@
+---
+id: composed/commerce-coupon-input
+title: "Composed · Commerce · Coupon input"
+description: "Coupon input card with empty and applied states plus apply/remove callbacks."
+layer: composed
+sourcePath: src/components/composed/commerce/coupon-input
+examples:
+  - EmptyAndApplied
+imports:
+  - @/components/composed/commerce
+publicImport: admin-ui-starter-kit/composed/commerce
+tags:
+  - composed
+  - coupon-input
+  - commerce
+  - coupon
+  - input
+  - card
+---
+
+# Composed · Commerce · Coupon input
+
+Coupon input card with empty and applied states plus apply/remove callbacks.
+
+**Layer:** `composed`
+**Source:** `src/components/composed/commerce/coupon-input`
+**Consumer import:** `admin-ui-starter-kit/composed/commerce`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/composed/commerce`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Examples
+
+```tsx
+import { CouponInputCard } from '@/components/composed/commerce';
+
+export function EmptyAndApplied() {
+	return (
+		<div className="grid w-full max-w-4xl gap-4 md:grid-cols-2">
+			<CouponInputCard onApply={() => {}} />
+			<CouponInputCard appliedCode="SPRING2026" appliedDiscount="88.40 USD" onRemove={() => {}} />
+		</div>
+	);
+}
+```
+
+## Example exports
+
+- `EmptyAndApplied`
+

package/.agents/skills/component-library-rules/references/components/composed__commerce-discount-stack.md

@@ -0,0 +1,58 @@
+---
+id: composed/commerce-discount-stack
+title: "Composed · Commerce · Discount stack"
+description: "Discount stack preview for coupons, loyalty savings, promotions, and total savings."
+layer: composed
+sourcePath: src/components/composed/commerce/discount-stack
+examples:
+  - DiscountStack
+imports:
+  - @/components/composed/commerce
+publicImport: admin-ui-starter-kit/composed/commerce
+tags:
+  - composed
+  - discount-stack
+  - commerce
+  - discount
+  - stack
+  - preview
+---
+
+# Composed · Commerce · Discount stack
+
+Discount stack preview for coupons, loyalty savings, promotions, and total savings.
+
+**Layer:** `composed`
+**Source:** `src/components/composed/commerce/discount-stack`
+**Consumer import:** `admin-ui-starter-kit/composed/commerce`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/composed/commerce`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Examples
+
+```tsx
+import { DiscountStackPreview } from '@/components/composed/commerce';
+
+export function DiscountStack() {
+	return (
+		<div className="w-full max-w-lg">
+			<DiscountStackPreview
+				discounts={[
+					{ type: 'Coupon', label: 'SPRING2026 — 25% off', amount: '-88.40 USD', badge: 'info' },
+					{ type: 'Loyalty', label: 'Gold tier — 5% extra', amount: '-17.68 USD', badge: 'warning' },
+					{ type: 'Promo', label: 'Free shipping over 500 USD', amount: '-12.00 USD', badge: 'success' },
+				]}
+				totalSavings="-118.08 USD"
+			/>
+		</div>
+	);
+}
+```
+
+## Example exports
+
+- `DiscountStack`
+

package/.agents/skills/component-library-rules/references/components/composed__commerce-inventory-section.md

@@ -0,0 +1,168 @@
+---
+id: composed/commerce-inventory-section
+title: "Composed · Commerce · Inventory section"
+description: "Controlled inventory form card for product and variant stock, identifiers, sell-through policy, fulfillment location, shipping weight, customs data, and operational tags."
+layer: composed
+sourcePath: src/components/composed/commerce/inventory-section
+examples:
+  - FullProductInventory
+  - DigitalProductInventory
+  - LowStockValidation
+imports:
+  - @/components/composed/commerce
+publicImport: admin-ui-starter-kit/composed/commerce
+tags:
+  - composed
+  - inventory-section
+  - commerce
+  - inventory
+  - section
+  - controlled
+---
+
+# Composed · Commerce · Inventory section
+
+Controlled inventory form card for product and variant stock, identifiers, sell-through policy, fulfillment location, shipping weight, customs data, and operational tags.
+
+**Layer:** `composed`
+**Source:** `src/components/composed/commerce/inventory-section`
+**Consumer import:** `admin-ui-starter-kit/composed/commerce`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/composed/commerce`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Examples
+
+```tsx
+import { useState } from 'react';
+
+import {
+	InventorySectionCard,
+	type InventorySectionValue,
+} from '@/components/composed/commerce';
+
+const physicalProduct: InventorySectionValue = {
+	sku: 'BAL-750-CL',
+	barcode: '038000138416',
+	trackQuantity: true,
+	available: '82',
+	committed: '6',
+	incoming: '24',
+	lowStockThreshold: '12',
+	inventoryPolicy: 'deny',
+	locationId: 'main',
+	binLocation: 'A-04-02',
+	requiresShipping: true,
+	weight: '0.75',
+	weightUnit: 'kg',
+	countryOfOrigin: 'BG',
+	hsCode: '2204.21',
+	tags: ['seasonal', 'giftable'],
+};
+
+const locationOptions = [
+	{ value: 'main', label: 'Main warehouse' },
+	{ value: 'sofia', label: 'Sofia pickup' },
+	{ value: 'partner', label: 'Partner fulfillment' },
+];
+
+const countryOptions = [
+	{ value: 'BG', label: 'Bulgaria' },
+	{ value: 'GR', label: 'Greece' },
+	{ value: 'US', label: 'United States' },
+];
+
+const tagRecommendations = ['seasonal', 'giftable', 'preorder', 'cold-chain', 'batch-2026'];
+
+export function FullProductInventory() {
+	const [value, setValue] = useState<InventorySectionValue>(physicalProduct);
+
+	return (
+		<div className="w-full max-w-5xl">
+			<InventorySectionCard
+				value={value}
+				onChange={setValue}
+				locationOptions={locationOptions}
+				countryOptions={countryOptions}
+				tagRecommendations={tagRecommendations}
+				maxTags={6}
+				onGenerateSku={() => 'BAL-750-CL-GIFT'}
+				onRestock={() => {}}
+			/>
+		</div>
+	);
+}
+
+export function DigitalProductInventory() {
+	const [value, setValue] = useState<InventorySectionValue>({
+		sku: 'DIG-WINE-GUIDE',
+		barcode: '',
+		trackQuantity: false,
+		available: '',
+		committed: '',
+		incoming: '',
+		lowStockThreshold: '',
+		inventoryPolicy: 'continue',
+		requiresShipping: false,
+		tags: ['digital', 'instant'],
+	});
+
+	return (
+		<div className="w-full max-w-4xl">
+			<InventorySectionCard
+				value={value}
+				onChange={setValue}
+				visibleSections={{
+					location: false,
+					shipping: false,
+					customs: false,
+				}}
+				visibleFields={{
+					barcode: false,
+					committed: false,
+					incoming: false,
+					lowStockThreshold: false,
+				}}
+				tagRecommendations={['digital', 'instant', 'license', 'subscription']}
+			/>
+		</div>
+	);
+}
+
+export function LowStockValidation() {
+	const [value, setValue] = useState<InventorySectionValue>({
+		...physicalProduct,
+		available: '3',
+		committed: '9',
+		incoming: '0',
+		lowStockThreshold: '8',
+		sku: '',
+		barcode: 'invalid',
+	});
+
+	return (
+		<div className="w-full max-w-5xl">
+			<InventorySectionCard
+				value={value}
+				onChange={setValue}
+				locationOptions={locationOptions}
+				countryOptions={countryOptions}
+				tagRecommendations={tagRecommendations}
+				errors={{
+					sku: 'SKU is required before publishing.',
+					barcode: 'Barcode must be a valid GTIN, UPC, or EAN.',
+				}}
+			/>
+		</div>
+	);
+}
+```
+
+## Example exports
+
+- `FullProductInventory`
+- `DigitalProductInventory`
+- `LowStockValidation`
+

package/.agents/skills/component-library-rules/references/components/composed__commerce-loyalty-points.md

@@ -0,0 +1,60 @@
+---
+id: composed/commerce-loyalty-points
+title: "Composed · Commerce · Loyalty points"
+description: "Loyalty balance card with tier, history rows, and redeem callback."
+layer: composed
+sourcePath: src/components/composed/commerce/loyalty-points
+examples:
+  - LoyaltyPoints
+imports:
+  - @/components/composed/commerce
+publicImport: admin-ui-starter-kit/composed/commerce
+tags:
+  - composed
+  - loyalty-points
+  - commerce
+  - loyalty
+  - points
+  - balance
+---
+
+# Composed · Commerce · Loyalty points
+
+Loyalty balance card with tier, history rows, and redeem callback.
+
+**Layer:** `composed`
+**Source:** `src/components/composed/commerce/loyalty-points`
+**Consumer import:** `admin-ui-starter-kit/composed/commerce`
+
+## Consumer import
+
+Consumers import this surface from `admin-ui-starter-kit/composed/commerce`.
+The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
+
+## Examples
+
+```tsx
+import { LoyaltyPointsCard } from '@/components/composed/commerce';
+
+export function LoyaltyPoints() {
+	return (
+		<div className="w-full max-w-md">
+			<LoyaltyPointsCard
+				balance="4,830"
+				tier="Gold Tier"
+				history={[
+					{ label: 'Spa booking', points: '+250', date: 'Mar 24', positive: true },
+					{ label: 'Redeemed coupon', points: '-500', date: 'Mar 18', positive: false },
+					{ label: 'Wine tasting order', points: '+180', date: 'Mar 12', positive: true },
+				]}
+				onRedeem={() => {}}
+			/>
+		</div>
+	);
+}
+```
+
+## Example exports
+
+- `LoyaltyPoints`
+