@geomak/ui 6.16.0 → 6.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -626,7 +626,7 @@ interface IconButtonProps {
626
626
  * <IconButton icon={<Icon.Search />} onClick={doSearch} />
627
627
  * <IconButton type="bordered" icon={<Icon.Edit />} />
628
628
  */
629
- declare function IconButton({ icon, onClick, type, buttonType, disabled, size, loading, loadingIcon, className, style, }: IconButtonProps): react_jsx_runtime.JSX.Element;
629
+ declare function IconButton({ icon, onClick, type, buttonType, disabled, size, loading, loadingIcon, title, className, style, }: IconButtonProps): react_jsx_runtime.JSX.Element;
630
630
 
631
631
  type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
632
632
  interface ModalProps {
@@ -1406,6 +1406,335 @@ interface CartProps {
1406
1406
  */
1407
1407
  declare function Cart({ items, onQuantityChange, onRemove, summaryRows, formatPrice, checkoutLabel, onCheckout, emptyState, className, style, }: CartProps): react_jsx_runtime.JSX.Element;
1408
1408
 
1409
+ /** Shape accepted by `addToCart` — quantity is optional (defaults to 1). */
1410
+ type CartItemInput = Omit<CartLineItem, 'quantity'> & {
1411
+ quantity?: number;
1412
+ };
1413
+ interface CartContextValue {
1414
+ /** Current line items. */
1415
+ items: CartLineItem[];
1416
+ /**
1417
+ * Add an item to the cart. If an item with the same `id` is already
1418
+ * present, its quantity is increased (clamped to the line's `max`).
1419
+ */
1420
+ addToCart: (item: CartItemInput, quantity?: number) => void;
1421
+ /** Remove a line entirely by id. */
1422
+ removeFromCart: (id: CartLineItem['id']) => void;
1423
+ /** Set an exact quantity for a line (clamped to `1..max`). */
1424
+ updateQuantity: (id: CartLineItem['id'], quantity: number) => void;
1425
+ /** Empty the cart. */
1426
+ clearCart: () => void;
1427
+ /** Whether a line with this id exists. */
1428
+ isInCart: (id: CartLineItem['id']) => boolean;
1429
+ /** Total number of units across all lines (sum of quantities). */
1430
+ getItemCount: () => number;
1431
+ /** Subtotal — sum of `price × quantity` across all lines. */
1432
+ getCartTotal: () => number;
1433
+ }
1434
+ interface CartProviderProps {
1435
+ children: React__default.ReactNode;
1436
+ /** Seed the cart with these lines. */
1437
+ initialItems?: CartLineItem[];
1438
+ /** Called whenever the items change (add / remove / quantity / clear). */
1439
+ onChange?: (items: CartLineItem[]) => void;
1440
+ }
1441
+ /**
1442
+ * Provides a robust, app-wide cart API. Wrap any subtree and call
1443
+ * {@link useCart} from anywhere inside to add, remove, and total items —
1444
+ * the cart panel, a product grid, and a topbar badge all stay in sync off the
1445
+ * same store.
1446
+ *
1447
+ * The store is uncontrolled (owns its own state, seeded by `initialItems`);
1448
+ * subscribe to mutations via `onChange` to persist or sync externally.
1449
+ *
1450
+ * @example
1451
+ * <CartProvider>
1452
+ * <App />
1453
+ * </CartProvider>
1454
+ *
1455
+ * // anywhere inside:
1456
+ * const { addToCart, getItemCount } = useCart()
1457
+ * addToCart({ id: 1, name: 'Radar unit', price: 1290 })
1458
+ */
1459
+ declare function CartProvider({ children, initialItems, onChange }: CartProviderProps): react_jsx_runtime.JSX.Element;
1460
+ /**
1461
+ * Read the enclosing {@link CartProvider}'s store. Throws if used outside a
1462
+ * `<CartProvider>`.
1463
+ *
1464
+ * @example
1465
+ * const { items, addToCart, removeFromCart, getCartTotal } = useCart()
1466
+ */
1467
+ declare function useCart(): CartContextValue;
1468
+
1469
+ interface CartButtonProps {
1470
+ /** Click handler — typically opens the cart drawer / navigates to checkout. */
1471
+ onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
1472
+ /** Icon-button style. Default `'bordered'`. */
1473
+ variant?: 'primary' | 'bordered';
1474
+ /** Badge colour. Default `'accent'`. */
1475
+ badgeTone?: BadgeTone;
1476
+ /** Cap the badge number (e.g. `9+`). Default `99`. */
1477
+ max?: number;
1478
+ /** Accessible label. Default `'Cart'` (with the live count appended). */
1479
+ title?: string;
1480
+ /** Override the cart glyph. */
1481
+ icon?: React__default.ReactNode;
1482
+ className?: string;
1483
+ }
1484
+ /**
1485
+ * A cart trigger for the app TopBar: an {@link IconButton} with a live count
1486
+ * {@link Badge} overlaid on its top-right corner. Reads the count straight from
1487
+ * the {@link useCart} store, so it must be rendered inside a `<CartProvider>`.
1488
+ *
1489
+ * @example
1490
+ * <TopBar actions={<CartButton onClick={() => setCartOpen(true)} />} />
1491
+ */
1492
+ declare function CartButton({ onClick, variant, badgeTone, max, title, icon, className, }: CartButtonProps): react_jsx_runtime.JSX.Element;
1493
+
1494
+ interface EmptyCartProps {
1495
+ /**
1496
+ * Illustration shown above the text. Pass your own node to fully replace
1497
+ * the default line-art cart. Set to `null` to hide it.
1498
+ */
1499
+ illustration?: React__default.ReactNode;
1500
+ /** Headline. Default `'Your cart is empty'`. */
1501
+ title?: React__default.ReactNode;
1502
+ /** Secondary line under the title. */
1503
+ description?: React__default.ReactNode;
1504
+ /** Optional call-to-action (e.g. a "Browse products" button). */
1505
+ action?: React__default.ReactNode;
1506
+ className?: string;
1507
+ style?: React__default.CSSProperties;
1508
+ }
1509
+ /**
1510
+ * The empty state for a shopping cart — a configurable illustration with a
1511
+ * title, optional description, and an optional call-to-action.
1512
+ *
1513
+ * Pass a custom `illustration` to match your brand, or override `title` /
1514
+ * `description` / `action` for the messaging.
1515
+ *
1516
+ * @example
1517
+ * <EmptyCart
1518
+ * title="Nothing here yet"
1519
+ * description="Browse the catalog to add items."
1520
+ * action={<Button content="Browse products" onClick={goShop} />}
1521
+ * />
1522
+ *
1523
+ * @example
1524
+ * // Drop it straight into the Cart panel's empty slot
1525
+ * <Cart items={[]} emptyState={<EmptyCart illustration={<MyArt />} />} />
1526
+ */
1527
+ declare function EmptyCart({ illustration, title, description, action, className, style, }: EmptyCartProps): react_jsx_runtime.JSX.Element;
1528
+
1529
+ /**
1530
+ * Shared field foundation for all oxygen-ui inputs.
1531
+ *
1532
+ * Centralises the things every input must agree on:
1533
+ * - the **size scale** (sm / md / lg) → control height + text size + padding
1534
+ * - the **refined focus treatment** — a crisp 1px accent border plus a soft
1535
+ * 3px low-opacity halo (NOT a heavy solid ring band)
1536
+ * - the **resting / hover / error / disabled** border + background states
1537
+ * - a **`<Field>` wrapper** handling label, error region, layout
1538
+ * (horizontal / vertical) and `aria` linkage consistently
1539
+ *
1540
+ * All values map to design-system tokens (control heights, semantic colours,
1541
+ * radii) so a consumer's ThemeProvider override flows straight through.
1542
+ */
1543
+ type FieldSize = 'sm' | 'md' | 'lg';
1544
+ interface FieldShellOptions {
1545
+ size?: FieldSize;
1546
+ hasError?: boolean;
1547
+ disabled?: boolean;
1548
+ /**
1549
+ * `true` for wrapper elements that hold a real `<input>` inside
1550
+ * (focus-within), `false` for elements that are themselves focusable
1551
+ * like `<button>` triggers (focus-visible). Default `false`.
1552
+ */
1553
+ focusWithin?: boolean;
1554
+ /** Append height/padding utilities (for single-line inputs). Default `true`. */
1555
+ sized?: boolean;
1556
+ }
1557
+ /**
1558
+ * Compose the className for an input's outer "shell" — the bordered, rounded
1559
+ * box that carries the focus ring. Apply to the `<input>` directly, or to a
1560
+ * wrapper `<div>` that contains an input plus adornments (pass
1561
+ * `focusWithin: true` in that case).
1562
+ */
1563
+ declare function fieldShell({ size, hasError, disabled, focusWithin, sized, }?: FieldShellOptions): string;
1564
+ /**
1565
+ * Small themed "info" affordance shown beside a field label. Hovering or
1566
+ * focusing it reveals `helperText` in a tooltip. Rendered as a `type="button"`
1567
+ * so it never submits an enclosing form, and coloured from semantic tokens so
1568
+ * it follows the active theme.
1569
+ */
1570
+ declare function FieldHelpIcon({ text }: {
1571
+ text: React__default.ReactNode;
1572
+ }): react_jsx_runtime.JSX.Element;
1573
+ interface FieldLabelProps {
1574
+ label?: React__default.ReactNode;
1575
+ htmlFor?: string;
1576
+ required?: boolean;
1577
+ /** Reveals an info icon + tooltip beside the label. */
1578
+ helperText?: React__default.ReactNode;
1579
+ /** Apply horizontal-layout spacing (no-wrap, shrink). */
1580
+ horizontal?: boolean;
1581
+ /**
1582
+ * Vertical alignment of the label against the control in horizontal layout.
1583
+ * `'start'` (default) nudges the label down to meet a standard ~36px input's
1584
+ * first line; `'center'` removes that offset so the label centres against a
1585
+ * short control (Switch, SegmentedControl).
1586
+ */
1587
+ align?: 'start' | 'center';
1588
+ style?: React__default.CSSProperties;
1589
+ /** Label column width in horizontal layout. */
1590
+ width?: string | number;
1591
+ className?: string;
1592
+ }
1593
+ /**
1594
+ * The label row shared by every input — label text + required asterisk +
1595
+ * optional `helperText` info icon. Components that render their own label
1596
+ * outside `<Field>` (Dropdown, DatePicker, Switch, SegmentedControl) use this
1597
+ * so the affordance is pixel-identical everywhere.
1598
+ *
1599
+ * Returns `null` when there's nothing to show (no label and no helperText).
1600
+ */
1601
+ declare function FieldLabel({ label, htmlFor, required, helperText, horizontal, align, style, width, className, }: FieldLabelProps): react_jsx_runtime.JSX.Element;
1602
+ interface FieldProps {
1603
+ label?: React__default.ReactNode;
1604
+ /** `id` of the control — links the `<label htmlFor>`. */
1605
+ htmlFor?: string;
1606
+ /** `id` for the error region — pair with `aria-describedby` on the control. */
1607
+ errorId?: string;
1608
+ errorMessage?: React__default.ReactNode;
1609
+ /** Orientation of label vs control. Default `'vertical'`. */
1610
+ layout?: 'horizontal' | 'vertical';
1611
+ /** Show a required asterisk after the label. */
1612
+ required?: boolean;
1613
+ /** Contextual help revealed via an info icon + tooltip beside the label. */
1614
+ helperText?: React__default.ReactNode;
1615
+ /**
1616
+ * Label alignment against the control in horizontal layout. `'start'`
1617
+ * (default) for standard-height inputs; `'center'` for short controls
1618
+ * (Switch) so the label lines up with the control's centre.
1619
+ */
1620
+ labelAlign?: 'start' | 'center';
1621
+ labelStyle?: React__default.CSSProperties;
1622
+ /** Width of the label column in horizontal layout (CSS length). */
1623
+ labelWidth?: string | number;
1624
+ className?: string;
1625
+ /** The control itself (input / trigger / dropzone). */
1626
+ children: React__default.ReactNode;
1627
+ }
1628
+ /**
1629
+ * Layout wrapper shared by every input. Renders:
1630
+ *
1631
+ * ```
1632
+ * vertical: horizontal:
1633
+ * [label] [label] [ control ]
1634
+ * [ control ] [ error message ]
1635
+ * [ error ]
1636
+ * ```
1637
+ *
1638
+ * The error message always sits under the **control only** (never spanning
1639
+ * the label in horizontal layout). Label uses full-contrast foreground +
1640
+ * medium weight so it reads as the anchor, while the input's placeholder is
1641
+ * muted — establishing hierarchy without making the label tiny.
1642
+ */
1643
+ declare function Field({ label, htmlFor, errorId, errorMessage, layout, required, helperText, labelAlign, labelStyle, labelWidth, className, children, }: FieldProps): react_jsx_runtime.JSX.Element;
1644
+
1645
+ /** The normalised value emitted on change / submit. */
1646
+ interface CreditCardValue {
1647
+ /** Digits only (no spaces). */
1648
+ number: string;
1649
+ /** Cardholder name. */
1650
+ name: string;
1651
+ /** `MM/YY`. */
1652
+ expiry: string;
1653
+ /** Digits only. */
1654
+ cvv: string;
1655
+ /** Detected brand id (`'visa'`, `'amex'`…) or `null`. */
1656
+ brand: string | null;
1657
+ }
1658
+ interface CreditCardFormProps {
1659
+ /** Called with the validated card once every field passes on submit. */
1660
+ onSubmit?: (card: CreditCardValue) => void | Promise<void>;
1661
+ /** Called on every keystroke with the current (possibly invalid) card. */
1662
+ onChange?: (card: CreditCardValue) => void;
1663
+ /** Seed the fields (uncontrolled). Number/expiry are auto-formatted. */
1664
+ defaultValue?: Partial<CreditCardValue>;
1665
+ /** Size preset for the inner fields. Default `'md'`. */
1666
+ size?: FieldSize;
1667
+ /** Disable every field + the submit button. */
1668
+ disabled?: boolean;
1669
+ /**
1670
+ * Disable only the submit button, leaving the fields editable. Useful to
1671
+ * gate payment on an external condition (e.g. an empty cart) while still
1672
+ * letting the user fill in their card. Combined with `disabled` (either
1673
+ * disables the button).
1674
+ */
1675
+ submitDisabled?: boolean;
1676
+ /** Require the cardholder name. Default `true`. */
1677
+ requireName?: boolean;
1678
+ /** Hide the built-in submit button (when embedding in a larger form). */
1679
+ hideSubmit?: boolean;
1680
+ /** Submit button label. Default `'Pay'`. */
1681
+ submitLabel?: React__default.ReactNode;
1682
+ /** Extra classes on the root `<form>`. */
1683
+ className?: string;
1684
+ /** Inline style on the root `<form>`. */
1685
+ style?: React__default.CSSProperties;
1686
+ }
1687
+ /**
1688
+ * Unified credit-card form built on the oxygen-ui {@link useForm} Form API.
1689
+ *
1690
+ * One component owns all four fields and their cross-field rules — card number
1691
+ * (brand detection + grouping + Luhn), expiry (`MM/YY`, real month, not past),
1692
+ * CVV (brand-aware length), and cardholder name. It is deliberately NOT shipped
1693
+ * as separate inputs: a CVV or expiry field has no meaning outside a card form.
1694
+ *
1695
+ * Self-contained: render it and handle `onSubmit(card)`; the card is only
1696
+ * delivered once everything validates. Use `onChange` for live updates (e.g. a
1697
+ * card preview) and `hideSubmit` to embed it inside a larger form.
1698
+ *
1699
+ * @example
1700
+ * <CreditCardForm onSubmit={(card) => pay(card)} submitLabel="Pay $49" />
1701
+ */
1702
+ declare function CreditCardForm({ onSubmit, onChange, defaultValue, size, disabled, submitDisabled, requireName, hideSubmit, submitLabel, className, style, }: CreditCardFormProps): react_jsx_runtime.JSX.Element;
1703
+
1704
+ interface CheckoutProps {
1705
+ /** Page heading. Default `'Checkout'`. */
1706
+ title?: React__default.ReactNode;
1707
+ /** Extra summary rows (shipping, tax, discount) added to the cart subtotal. */
1708
+ summaryRows?: CartSummaryRow[];
1709
+ /** Price formatter. Default `'$' + value.toFixed(2)`. */
1710
+ formatPrice?: (value: number) => string;
1711
+ /** Heading above the payment form. Default `'Payment'`. */
1712
+ paymentTitle?: React__default.ReactNode;
1713
+ /**
1714
+ * Pay button label. Defaults to `Pay <total>`. The button is always
1715
+ * disabled while the cart is empty.
1716
+ */
1717
+ submitLabel?: React__default.ReactNode;
1718
+ /** Fired with the validated card once the form passes and the cart is non-empty. */
1719
+ onPaid?: (card: CreditCardValue) => void | Promise<void>;
1720
+ className?: string;
1721
+ }
1722
+ /**
1723
+ * A complete two-column checkout page: the {@link Cart} on the left and the
1724
+ * {@link CreditCardForm} on the right. Reads live items from the
1725
+ * {@link useCart} store, so it must be rendered inside a `<CartProvider>`.
1726
+ *
1727
+ * The pay button is disabled whenever the cart is empty (via the form's
1728
+ * `submitDisabled`) — the card fields stay editable, but payment can't be
1729
+ * submitted with nothing to buy. Stacks to a single column below `lg`.
1730
+ *
1731
+ * @example
1732
+ * <CartProvider initialItems={items}>
1733
+ * <Checkout summaryRows={[{ label: 'Shipping', value: 9.5 }]} onPaid={pay} />
1734
+ * </CartProvider>
1735
+ */
1736
+ declare function Checkout({ title, summaryRows, formatPrice, paymentTitle, submitLabel, onPaid, className, }: CheckoutProps): react_jsx_runtime.JSX.Element;
1737
+
1409
1738
  /** ─────────────────── types ─────────────────── */
1410
1739
  type NotificationType = 'info' | 'success' | 'warning' | 'danger';
1411
1740
  type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
@@ -2569,122 +2898,6 @@ interface ButtonProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButto
2569
2898
  */
2570
2899
  declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
2571
2900
 
2572
- /**
2573
- * Shared field foundation for all oxygen-ui inputs.
2574
- *
2575
- * Centralises the things every input must agree on:
2576
- * - the **size scale** (sm / md / lg) → control height + text size + padding
2577
- * - the **refined focus treatment** — a crisp 1px accent border plus a soft
2578
- * 3px low-opacity halo (NOT a heavy solid ring band)
2579
- * - the **resting / hover / error / disabled** border + background states
2580
- * - a **`<Field>` wrapper** handling label, error region, layout
2581
- * (horizontal / vertical) and `aria` linkage consistently
2582
- *
2583
- * All values map to design-system tokens (control heights, semantic colours,
2584
- * radii) so a consumer's ThemeProvider override flows straight through.
2585
- */
2586
- type FieldSize = 'sm' | 'md' | 'lg';
2587
- interface FieldShellOptions {
2588
- size?: FieldSize;
2589
- hasError?: boolean;
2590
- disabled?: boolean;
2591
- /**
2592
- * `true` for wrapper elements that hold a real `<input>` inside
2593
- * (focus-within), `false` for elements that are themselves focusable
2594
- * like `<button>` triggers (focus-visible). Default `false`.
2595
- */
2596
- focusWithin?: boolean;
2597
- /** Append height/padding utilities (for single-line inputs). Default `true`. */
2598
- sized?: boolean;
2599
- }
2600
- /**
2601
- * Compose the className for an input's outer "shell" — the bordered, rounded
2602
- * box that carries the focus ring. Apply to the `<input>` directly, or to a
2603
- * wrapper `<div>` that contains an input plus adornments (pass
2604
- * `focusWithin: true` in that case).
2605
- */
2606
- declare function fieldShell({ size, hasError, disabled, focusWithin, sized, }?: FieldShellOptions): string;
2607
- /**
2608
- * Small themed "info" affordance shown beside a field label. Hovering or
2609
- * focusing it reveals `helperText` in a tooltip. Rendered as a `type="button"`
2610
- * so it never submits an enclosing form, and coloured from semantic tokens so
2611
- * it follows the active theme.
2612
- */
2613
- declare function FieldHelpIcon({ text }: {
2614
- text: React__default.ReactNode;
2615
- }): react_jsx_runtime.JSX.Element;
2616
- interface FieldLabelProps {
2617
- label?: React__default.ReactNode;
2618
- htmlFor?: string;
2619
- required?: boolean;
2620
- /** Reveals an info icon + tooltip beside the label. */
2621
- helperText?: React__default.ReactNode;
2622
- /** Apply horizontal-layout spacing (no-wrap, shrink). */
2623
- horizontal?: boolean;
2624
- /**
2625
- * Vertical alignment of the label against the control in horizontal layout.
2626
- * `'start'` (default) nudges the label down to meet a standard ~36px input's
2627
- * first line; `'center'` removes that offset so the label centres against a
2628
- * short control (Switch, SegmentedControl).
2629
- */
2630
- align?: 'start' | 'center';
2631
- style?: React__default.CSSProperties;
2632
- /** Label column width in horizontal layout. */
2633
- width?: string | number;
2634
- className?: string;
2635
- }
2636
- /**
2637
- * The label row shared by every input — label text + required asterisk +
2638
- * optional `helperText` info icon. Components that render their own label
2639
- * outside `<Field>` (Dropdown, DatePicker, Switch, SegmentedControl) use this
2640
- * so the affordance is pixel-identical everywhere.
2641
- *
2642
- * Returns `null` when there's nothing to show (no label and no helperText).
2643
- */
2644
- declare function FieldLabel({ label, htmlFor, required, helperText, horizontal, align, style, width, className, }: FieldLabelProps): react_jsx_runtime.JSX.Element;
2645
- interface FieldProps {
2646
- label?: React__default.ReactNode;
2647
- /** `id` of the control — links the `<label htmlFor>`. */
2648
- htmlFor?: string;
2649
- /** `id` for the error region — pair with `aria-describedby` on the control. */
2650
- errorId?: string;
2651
- errorMessage?: React__default.ReactNode;
2652
- /** Orientation of label vs control. Default `'vertical'`. */
2653
- layout?: 'horizontal' | 'vertical';
2654
- /** Show a required asterisk after the label. */
2655
- required?: boolean;
2656
- /** Contextual help revealed via an info icon + tooltip beside the label. */
2657
- helperText?: React__default.ReactNode;
2658
- /**
2659
- * Label alignment against the control in horizontal layout. `'start'`
2660
- * (default) for standard-height inputs; `'center'` for short controls
2661
- * (Switch) so the label lines up with the control's centre.
2662
- */
2663
- labelAlign?: 'start' | 'center';
2664
- labelStyle?: React__default.CSSProperties;
2665
- /** Width of the label column in horizontal layout (CSS length). */
2666
- labelWidth?: string | number;
2667
- className?: string;
2668
- /** The control itself (input / trigger / dropzone). */
2669
- children: React__default.ReactNode;
2670
- }
2671
- /**
2672
- * Layout wrapper shared by every input. Renders:
2673
- *
2674
- * ```
2675
- * vertical: horizontal:
2676
- * [label] [label] [ control ]
2677
- * [ control ] [ error message ]
2678
- * [ error ]
2679
- * ```
2680
- *
2681
- * The error message always sits under the **control only** (never spanning
2682
- * the label in horizontal layout). Label uses full-contrast foreground +
2683
- * medium weight so it reads as the anchor, while the input's placeholder is
2684
- * muted — establishing hierarchy without making the label tiny.
2685
- */
2686
- declare function Field({ label, htmlFor, errorId, errorMessage, layout, required, helperText, labelAlign, labelStyle, labelWidth, className, children, }: FieldProps): react_jsx_runtime.JSX.Element;
2687
-
2688
2901
  interface TextInputProps {
2689
2902
  /** Controlled string value. */
2690
2903
  value?: string;
@@ -4373,58 +4586,6 @@ declare const FormContext: React$1.Context<FormStore>;
4373
4586
  /** Read the enclosing `<Form>`'s store. Throws if used outside a `<Form>`. */
4374
4587
  declare function useFormStore(): FormStore;
4375
4588
 
4376
- /** The normalised value emitted on change / submit. */
4377
- interface CreditCardValue {
4378
- /** Digits only (no spaces). */
4379
- number: string;
4380
- /** Cardholder name. */
4381
- name: string;
4382
- /** `MM/YY`. */
4383
- expiry: string;
4384
- /** Digits only. */
4385
- cvv: string;
4386
- /** Detected brand id (`'visa'`, `'amex'`…) or `null`. */
4387
- brand: string | null;
4388
- }
4389
- interface CreditCardFormProps {
4390
- /** Called with the validated card once every field passes on submit. */
4391
- onSubmit?: (card: CreditCardValue) => void | Promise<void>;
4392
- /** Called on every keystroke with the current (possibly invalid) card. */
4393
- onChange?: (card: CreditCardValue) => void;
4394
- /** Seed the fields (uncontrolled). Number/expiry are auto-formatted. */
4395
- defaultValue?: Partial<CreditCardValue>;
4396
- /** Size preset for the inner fields. Default `'md'`. */
4397
- size?: FieldSize;
4398
- /** Disable every field + the submit button. */
4399
- disabled?: boolean;
4400
- /** Require the cardholder name. Default `true`. */
4401
- requireName?: boolean;
4402
- /** Hide the built-in submit button (when embedding in a larger form). */
4403
- hideSubmit?: boolean;
4404
- /** Submit button label. Default `'Pay'`. */
4405
- submitLabel?: React__default.ReactNode;
4406
- /** Extra classes on the root `<form>`. */
4407
- className?: string;
4408
- /** Inline style on the root `<form>`. */
4409
- style?: React__default.CSSProperties;
4410
- }
4411
- /**
4412
- * Unified credit-card form built on the oxygen-ui {@link useForm} Form API.
4413
- *
4414
- * One component owns all four fields and their cross-field rules — card number
4415
- * (brand detection + grouping + Luhn), expiry (`MM/YY`, real month, not past),
4416
- * CVV (brand-aware length), and cardholder name. It is deliberately NOT shipped
4417
- * as separate inputs: a CVV or expiry field has no meaning outside a card form.
4418
- *
4419
- * Self-contained: render it and handle `onSubmit(card)`; the card is only
4420
- * delivered once everything validates. Use `onChange` for live updates (e.g. a
4421
- * card preview) and `hideSubmit` to embed it inside a larger form.
4422
- *
4423
- * @example
4424
- * <CreditCardForm onSubmit={(card) => pay(card)} submitLabel="Pay $49" />
4425
- */
4426
- declare function CreditCardForm({ onSubmit, onChange, defaultValue, size, disabled, requireName, hideSubmit, submitLabel, className, style, }: CreditCardFormProps): react_jsx_runtime.JSX.Element;
4427
-
4428
4589
  /**
4429
4590
  * Zero-dependency credit-card helpers: brand detection, Luhn checksum, and
4430
4591
  * display formatting. Pure functions — no React, no deps — so they're unit
@@ -4467,4 +4628,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
4467
4628
  /** Validate the CVV against the detected brand's expected length. */
4468
4629
  declare function cvvError(value: string, cardNumber: string): string | undefined;
4469
4630
 
4470
- export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, Calendar, type CalendarEvent, type CalendarProps, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, type CartLineItem, type CartProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
4631
+ export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, Calendar, type CalendarEvent, type CalendarProps, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, CartButton, type CartButtonProps, type CartContextValue, type CartItemInput, type CartLineItem, type CartProps, CartProvider, type CartProviderProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, Checkout, type CheckoutProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, EmptyCart, type EmptyCartProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useCart, useFieldArray, useForm, useFormField, useFormStore, useNotification };