cekat-ui 1.3.13 → 1.3.14

package/dist/index.d.mts

@@ -5,6 +5,7 @@ import { ClassValue } from 'clsx';
 import { ColumnProps as ColumnProps_2 } from 'react-aria-components';
 import { ColumnResizerProps as ColumnResizerProps_2 } from 'react-aria-components';
 import { ComboBoxProps as ComboBoxProps_2 } from 'react-aria-components';
+import { CountryCode } from 'libphonenumber-js/min';
 import { default as default_2 } from 'react';
 import { DialogProps } from 'react-aria-components';
 import { GroupProps } from 'react-aria-components';
@@ -243,6 +244,53 @@ export declare type BadgeSize = 'sm' | 'md' | 'lg';
 
 export declare type BadgeVariant = 'solid' | 'outline';
 
+/**
+ * The shared foundation every Input-family component is built on — see
+ * `RFC-input-family.md` (Decision #0) for the full rationale. Anatomy is exactly three parts:
+ * `leftSlot`, the native `<input>`, `rightSlot`. No other structural surface — a component that
+ * needs a divider, a dropdown trigger, or a button renders that INSIDE its own slot content;
+ * `BaseInput` never grows new props to accommodate it (that's the exact prop-list-per-Type-variant
+ * growth this primitive exists to stop).
+ *
+ * Internally built on `react-aria-components`' `Group` + `Input` (not `TextField`): `Group` is a
+ * bare bordered-container primitive with hover/focus-within/focus-visible/disabled/invalid state
+ * for free, and no forced field-level semantics (label association, description slot, validation
+ * state machine) the way `TextField` has — `TextField` would force a wrapper `<div>` we'd then
+ * have to fight or double up on. Same choice `ComboBoxTrigger` already made for an analogous
+ * "bordered shell holding an input plus other stuff" role (see `ComboBox.tsx`).
+ *
+ * The PUBLIC API stays 100% native-DOM-shaped on purpose (`onChange: ChangeEventHandler`,
+ * `error: boolean`, `disabled: boolean`, `required: boolean`) even though the internals are RAC —
+ * RAC's own shape for the same concepts (`onChange: (value: string) => void`, `isInvalid`,
+ * `isDisabled`, `isRequired`) is intentionally not exposed. This keeps `BaseInput` a drop-in
+ * sibling of the existing native `Input` rather than introducing a second, incompatible prop
+ * shape into the same family.
+ *
+ * Forwards its ref to the inner `<input>`, matching `Input`'s existing ref contract.
+ */
+export declare const BaseInput: React_2.ForwardRefExoticComponent<BaseInputProps & React_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface BaseInputProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className' | 'style'> {
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    size?: InputSize;
+    error?: boolean;
+    disabled?: boolean;
+    /** Tighter padding/height/radius and a smaller semibold label, independent of `size`'s font scale. Opt-in, mirrors `Input`'s `compact`. */
+    compact?: boolean;
+    /**
+     * Anything mounted at the start of the field — icon, fixed text, dropdown trigger, whatever
+     * the derived component needs. Pure `ReactNode`: `BaseInput` has no opinion on the slot's
+     * internal layout, border, or divider — that's the slot content's own responsibility.
+     */
+    leftSlot?: React_2.ReactNode;
+    /** Same contract as `leftSlot`, mounted at the end of the field. */
+    rightSlot?: React_2.ReactNode;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+
 /**
  * Wraps RAC's `<Breadcrumb>` (an `<li>`). RAC computes `isCurrent` from the item's position
  * in the collection — the last item gets it — so the trailing separator is suppressed
@@ -341,23 +389,7 @@ export declare type ButtonTone = 'primary' | 'destructive';
 
 export declare type ButtonVariant = 'solid' | 'outline' | 'outline-primary' | 'ghost' | 'ghost-primary' | 'plain' | 'plain-black';
 
-export declare function CardNumberInput({ size, label, required, hint, error, disabled, placeholder, value, onChange, rightIcon, prefix, className, wrapperClassName, }: CardNumberInputProps): JSX_2.Element;
-
-declare interface CardNumberInputProps {
-    size?: 'sm' | 'md';
-    label?: string;
-    required?: boolean;
-    hint?: string;
-    error?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    value?: string;
-    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
-    rightIcon?: default_2.ReactNode;
-    prefix?: default_2.ReactNode;
-    className?: InputProps['className'];
-    wrapperClassName?: InputProps['wrapperClassName'];
-}
+export declare type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'jcb' | 'diners' | 'unionpay';
 
 /**
  * `min-h-[42px]`, never `h-[42px]` — a fixed height plus no truncation would
@@ -530,6 +562,24 @@ export declare interface ComboBoxTriggerProps extends Omit<GroupProps, 'classNam
     className?: ClassValue;
 }
 
+export declare interface CountryOption {
+    code: CountryCode;
+    dial_code: string;
+    name: string;
+    flag?: string;
+}
+
+export declare interface CurrencyOption {
+    /** ISO 4217-shaped code the consumer defines, e.g. 'IDR', 'USD' — not validated against a real ISO list, since this is a consumer-owned/backend-owned shape (see `RFC-input-family.md` Decision #3). */
+    code: string;
+    /** Displayed in the amount field's leftSlot, e.g. 'Rp', '$'. */
+    symbol: string;
+    /** Displayed in the currency picker dropdown row, e.g. 'Indonesian Rupiah'. */
+    label: string;
+    /** BCP 47 locale tag driving thousands/decimal separator formatting, e.g. 'id-ID', 'en-US'. Falls back to the browser's default locale when omitted. */
+    locale?: string;
+}
+
 export declare const Dot: {
     ({ size, outline, className }: DotProps): JSX_2.Element;
     displayName: string;
@@ -591,6 +641,20 @@ export declare type FeaturedIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  */
 export declare type FeaturedIconType = 'light' | 'dark' | 'modern' | 'glass';
 
+/**
+ * The country/dial-code list `InputPhone` ships with by default (see `RFC-input-family.md`
+ * Decision #2 — this is cekat-ui-owned static data, not fetched, not backend-driven, unlike
+ * `InputPrice`'s currency list). Built from `libphonenumber-js`'s own `getCountries()` +
+ * `getCountryCallingCode()` (already a dependency, single source of truth for calling codes —
+ * no separately hand-maintained dial-code JSON to drift out of sync) plus the runtime's own
+ * `Intl.DisplayNames` for localized country names and a pure Unicode transform for flag emoji.
+ * Zero bundled data table beyond what the phone-parsing library itself already carries.
+ *
+ * Computed once and cached — `Intl.DisplayNames` construction and 245 `.of()` calls are cheap
+ * individually but unnecessary to repeat across every `InputPhone` instance.
+ */
+export declare function getDefaultCountryOptions(): CountryOption[];
+
 export declare const Icon: {
     ({ icon: IconComponent, size, strokeWidth, label, className, ...rest }: IconProps): JSX_2.Element;
     displayName: string;
@@ -626,6 +690,52 @@ export declare const Input: InputCompound;
  */
 declare const Input_2: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
 
+/**
+ * Rebuild of the old `CardNumberInput` export slot — the previous implementation was a dead
+ * placeholder (hardcoded a static mastercard PNG import regardless of the number typed in, no
+ * Luhn check, no brand detection, no digit grouping, 0 real consumers). This version is built on
+ * `BaseInput` per `RFC-input-family.md`, matching the Figma `Input field` master's
+ * `Type=Payment input` variant (verified via metadata — node `80:8127` etc: a single "Payment
+ * method icon" leading slot + text, no trailing element at all).
+ *
+ * `leftSlot` renders NOTHING by default — RFC Decision #4: shipping trademarked
+ * Visa/Mastercard/etc. logos inside a design-system package is legal/brand-guideline exposure
+ * this component is not positioned to clear. Brand detection (IIN/BIN prefix regex table) and
+ * Luhn validation are genuinely component-owned logic and still run on every keystroke — the
+ * detected brand is surfaced via `onChange`'s second argument so a consumer with their own
+ * cleared icon set can render it in `leftSlot` themselves.
+ */
+export declare function InputCardNumber({ size, label, required, hint, error, disabled, placeholder, value, leftSlot, onChange, className, wrapperClassName, }: InputCardNumberProps): JSX_2.Element;
+
+export declare interface InputCardNumberProps {
+    size?: InputSize;
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    /** Controlled, formatted display value (spaces already inserted per the detected brand's grouping). */
+    value?: string;
+    /**
+     * Consumer-supplied brand mark, mounted in `leftSlot`. Renders nothing by default — see
+     * `RFC-input-family.md` Decision #4: shipping trademarked payment-network logos inside a
+     * design-system package is legal/brand-guideline exposure this component is not positioned
+     * to clear. The detected brand is still surfaced via `onChange`'s second argument, so a
+     * consumer with their own cleared icon set (or a generic/licensed asset) can render it here.
+     */
+    leftSlot?: React_2.ReactNode;
+    /**
+     * `value` is the formatted display string (spaces inserted). `brand` is the network detected
+     * from the IIN/BIN prefix, or `null` if no known prefix matches yet. `isValid` is Luhn check
+     * pass AND the digit count matching the detected brand's expected length — always `false`
+     * while `brand` is `null` (an undetected prefix can't be validated against a target length).
+     */
+    onChange?: (value: string, brand: CardBrand | null, isValid: boolean) => void;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+
 declare type InputCompound = typeof Input_2 & {
     Prefix: typeof InputPrefix;
     Suffix: typeof InputSuffix;
@@ -709,10 +819,103 @@ declare interface InputDropdownSlot {
 
 export declare type InputDropdownType = 'default' | 'search' | 'tags';
 
+/**
+ * Rebuild of the old `PhoneInput` export slot — the previous implementation was a dead
+ * placeholder (hardcoded `"US"` prefix text, no library-backed formatting/validation, 0 real
+ * consumers). This version is a genuine port of cekat-dashboard's working freestyle
+ * implementation (`RegisterSteps/Step1.tsx` + `phoneUtils.ts`) into the library, built on
+ * `BaseInput` per `RFC-input-family.md`.
+ *
+ * The country picker's trigger shows only the ISO country code ("ID", "US") — the dial code
+ * itself (+62, +1) lives inside the input's own text, combined with the national number
+ * (e.g. "+62 812 345 6789"), rather than being shown twice. `value`/`onChange` therefore carry
+ * the FULL string including the dial code — not just the national number like the picker-shows-
+ * dial-code version this replaced.
+ *
+ * Country list defaults to `getDefaultCountryOptions()` (cekat-ui-owned, generated from
+ * `libphonenumber-js` + `Intl.DisplayNames`, see `countryOptions.ts`) — the `countries` prop is
+ * an override escape hatch, not the expected path (Decision #2).
+ *
+ * Formatting/validation is `libphonenumber-js`'s `AsYouType`/`parsePhoneNumberFromString`,
+ * matching `phoneUtils.ts`'s exact behavior rather than reinventing phone parsing.
+ */
+export declare function InputPhone({ size, label, required, hint, error, disabled, placeholder, value, defaultCountry, countries, onChange, className, wrapperClassName, }: InputPhoneProps): JSX_2.Element;
+
+export declare interface InputPhoneProps {
+    size?: InputSize;
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    /** National-format display value (controlled) — what the user sees/types, not E.164. */
+    value?: string;
+    /** ISO 3166-1 alpha-2 default country, drives both the picker's initial selection and AsYouType formatting. Default `'ID'`. */
+    defaultCountry?: CountryCode;
+    /**
+     * Overrides the default bundled country/dial-code list (see `RFC-input-family.md` Decision
+     * #2 — `getDefaultCountryOptions()` from `countryOptions.ts` is cekat-ui's own owned data,
+     * this prop exists purely as an escape hatch, not because swapping it in is the expected
+     * path).
+     */
+    countries?: CountryOption[];
+    /**
+     * `value` is the national-format display string as typed (AsYouType-formatted).
+     * `isValid` is `libphonenumber-js`'s own validation for the currently-selected country.
+     * `e164` is only present when `isValid` is true — full `+<countrycode><number>` form,
+     * ready to submit to a backend without the consumer re-deriving it.
+     */
+    onChange?: (value: string, isValid: boolean, e164?: string) => void;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+
 declare function InputPrefix({ children }: {
     children: ReactNode;
 }): JSX_2.Element;
 
+/**
+ * Rebuild of the old `SaleAmountInput` export slot — the previous implementation was a dead
+ * placeholder (hardcoded `$` prefix regardless of `currency`, `currency` prop existed but
+ * `onCurrencyChange` had no actual dropdown/menu behind it, no locale-aware number formatting,
+ * 0 real consumers). This version is built on `BaseInput` per `RFC-input-family.md`: currency
+ * symbol in `leftSlot`, currency picker in `rightSlot`, matching the Figma `Input field` master's
+ * `Type=Trailing dropdown` variant (verified via Figma metadata — node `80:9230` etc, "Leading
+ * text" + "Dropdown" sub-frames).
+ *
+ * `currencies` is a REQUIRED prop with no bundled default — per RFC Decision #3, the currency
+ * list is backend-owned, not cekat-ui's. Formatting is locale-aware per the selected currency's
+ * `locale` field (thousands/decimal separators via `Intl.NumberFormat`, see `amountFormat.ts`),
+ * not hardcoded to any single currency's conventions.
+ */
+export declare function InputPrice({ size, label, required, hint, error, disabled, placeholder, value, currency, currencies, onCurrencyChange, onChange, className, wrapperClassName, }: InputPriceProps): JSX_2.Element;
+
+export declare interface InputPriceProps {
+    size?: InputSize;
+    label?: string;
+    required?: boolean;
+    hint?: string;
+    error?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    /** Raw numeric value (controlled) — not a pre-formatted display string. `undefined`/empty renders a blank field. */
+    value?: number;
+    /** Currently-selected currency's `code`. Must match one entry in `currencies`. */
+    currency: string;
+    /**
+     * REQUIRED — no bundled default (see `RFC-input-family.md` Decision #3, updated). The
+     * currency list is backend-owned; cekat-ui never assumes or hardcodes it. Consumers map
+     * whatever shape backend returns into `CurrencyOption[]` before passing it in.
+     */
+    currencies: CurrencyOption[];
+    onCurrencyChange?: (code: string) => void;
+    /** Fires with the parsed numeric value on every keystroke that changes it (locale-aware — thousands/decimal separators are stripped per the selected currency's `locale`). */
+    onChange?: (value: number) => void;
+    className?: ClassValue;
+    wrapperClassName?: ClassValue;
+}
+
 declare interface InputProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'className'> {
     label?: string;
     required?: boolean;
@@ -1041,23 +1244,6 @@ export declare interface NotificationToastProps {
  */
 export declare type NotificationToastType = 'primary-icon' | 'gray-icon' | 'progress' | 'avatar' | 'image' | 'success' | 'warning' | 'error' | 'no-icon';
 
-export declare function PhoneInput({ size, label, required, hint, error, disabled, placeholder, rightIcon, value, onChange, className, wrapperClassName, }: PhoneInputProps): JSX_2.Element;
-
-declare interface PhoneInputProps {
-    size?: 'sm' | 'md';
-    label?: string;
-    required?: boolean;
-    hint?: string;
-    error?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    rightIcon?: default_2.ReactNode;
-    value?: string;
-    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
-    className?: InputProps['className'];
-    wrapperClassName?: InputProps['wrapperClassName'];
-}
-
 /**
  * Overlay foundation for the dropdown family (Menu, Select, ComboBox) and Tooltip. Wraps RAC's
  * `Popover`, which already provides: portal to `document.body`,
@@ -1114,25 +1300,6 @@ export declare const Row: <T extends object>(props: RowProps<T> & {
 export declare interface RowProps<T extends object> extends RowProps_2<T> {
 }
 
-export declare function SaleAmountInput({ size, label, required, hint, error, disabled, value, placeholder, currency, onCurrencyChange, rightIcon, onChange, className, wrapperClassName, }: SaleAmountInputProps): JSX_2.Element;
-
-declare interface SaleAmountInputProps {
-    size?: 'sm' | 'md';
-    label?: string;
-    required?: boolean;
-    hint?: string;
-    error?: boolean;
-    disabled?: boolean;
-    value?: string;
-    placeholder?: string;
-    currency?: string;
-    onCurrencyChange?: () => void;
-    rightIcon?: default_2.ReactNode;
-    onChange?: default_2.ChangeEventHandler<HTMLInputElement>;
-    className?: InputProps['className'];
-    wrapperClassName?: InputProps['wrapperClassName'];
-}
-
 export declare const Select: <T extends object>(props: SelectProps<T> & {
     ref?: React_2.Ref<HTMLDivElement>;
 }) => React_2.ReactElement;
@@ -1481,6 +1648,20 @@ export declare type TagShape = 'rounded' | 'pill';
 
 export declare type TagSize = 'sm' | 'md' | 'lg';
 
+/**
+ * Internally built on `react-aria-components`' `Group` + `TextArea` — same directional choice
+ * `BaseInput` made (see `RFC-input-family.md` Decision #0) and for the same reason:
+ * `TextField`'s own multi-line composition would force a wrapper `<div>` and value-based
+ * `onChange` this component doesn't want. RAC's `TextArea` (confirmed via installed
+ * `react-aria-components@1.20.0` types, not assumed from docs) is already native-DOM-shaped by
+ * default (`extends TextareaHTMLAttributes<HTMLTextAreaElement>`, plain `onChange:
+ * ChangeEventHandler`) — unlike `TextField`'s `Input`, it needs no adapter layer at all, so this
+ * migration is a pure internals swap: `Textarea`'s public API is unchanged.
+ *
+ * `Group` gives hover/focus-within/focus-visible/`data-[invalid]`/`data-[disabled]` state for
+ * free instead of hand-rolling it via plain `focus-within:` CSS (the pre-RAC version's approach)
+ * — same accessibility/state-machine benefit `BaseInput` already gets from it.
+ */
 export declare const Textarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<HTMLTextAreaElement>>;
 
 export declare interface TextareaProps extends Omit<React_2.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
@@ -1490,6 +1671,7 @@ export declare interface TextareaProps extends Omit<React_2.TextareaHTMLAttribut
     helpIcon?: React_2.ReactNode;
     error?: boolean;
     disabled?: boolean;
+    /** Whether the resize handle is shown at all — the browser's own CSS `resize` behavior already clamps a drag to never go below the rendered min-height (132px default / rows-driven), so "resize down to no smaller than default height" needs no extra logic beyond that CSS floor. */
     resizable?: boolean;
     /** Tighter padding/min-height and a smaller semibold label, for compact form layouts (e.g. a multi-field grid). Opt-in, does not affect default styling. */
     compact?: boolean;