@kenlo/kdls-design-system 2.10.1 → 2.12.0

package/dist/components/Input/Input.d.ts

@@ -3,17 +3,14 @@ import { IconElement } from '../Icon/Icon';
 import './Input.css';
 import '../../foundations/Scrollbar/Scrollbar.css';
 import type { FormValidateOn } from '../Form/Form';
+import { type PhoneCountry, type PhoneValue } from './phone';
+export type { PhoneCountry, PhoneValue } from './phone';
 export interface InputRule {
     /** Message shown as a hint when the rule fails */
     message: string;
     /** Receives the current value and returns true when the rule passes */
     valid: (value: string) => boolean;
 }
-export interface PhoneCountry {
-    code: string;
-    ddi: string;
-    name: string;
-}
 export type InputFeedback = 'none' | 'success' | 'alert' | 'error';
 export type InputState = 'enabled' | 'hover' | 'filled' | 'focused' | 'disabled';
 type BaseInputProps = {
@@ -38,6 +35,8 @@ type BaseInputProps = {
     iconRight?: IconElement;
     /** Callback when clicking iconRight — makes the icon interactive with stopPropagation */
     onClickIconRight?: () => void;
+    /** Accessible name of iconRight when it is clickable — say what the click does (e.g. "Buscar" for a magnifier that applies the search). Default: "Limpar" */
+    iconRightLabel?: string;
     /** Count badge shown before the right icon (used as a Popover Trigger) */
     notificationCount?: number;
     /** Shows a custom incrementer (+/−) for type="number". The browser's native spinner is always hidden via CSS. */
@@ -80,6 +79,8 @@ type BaseInputProps = {
     excludeCountries?: string[];
     /** Called when the user selects a country */
     onCountryChange?: (country: PhoneCountry) => void;
+    /** Called on every change of a phone with country: the country, the national digits, the E.164 form when valid, and whether it is valid */
+    onPhoneChange?: (phone: PhoneValue) => void;
     /** Disables algorithm validation for type='cpf', 'cnpj', 'cpf-cnpj'. When false, only validates whether the mask is complete */
     validateDocument?: boolean;
 };

package/dist/components/Input/index.d.ts

@@ -1,2 +1,2 @@
 export { Input } from './Input';
-export type { InputProps, InputFeedback, InputState, InputRule, PhoneCountry } from './Input';
+export type { InputProps, InputFeedback, InputState, InputRule, PhoneCountry, PhoneValue } from './Input';

package/dist/components/Input/phone.d.ts

@@ -0,0 +1,28 @@
+import type * as PhoneLibModule from 'libphonenumber-js';
+export type PhoneLib = typeof PhoneLibModule;
+export interface PhoneCountry {
+    code: string;
+    ddi: string;
+    name: string;
+}
+export interface PhoneValue {
+    country: PhoneCountry;
+    national: string;
+    e164: string | null;
+    valid: boolean;
+}
+export declare const BRAZIL: PhoneCountry;
+export declare function loadPhoneLib(): Promise<PhoneLib>;
+export declare function usePhoneLib(enabled: boolean): PhoneLib | null;
+export declare function phoneCountries(lib: PhoneLib | null): PhoneCountry[];
+export declare function searchCountries(list: PhoneCountry[], query: string): PhoneCountry[];
+export declare function applyBrazilMask(raw: string): string;
+export declare function capPhoneDigits(raw: string, country: PhoneCountry, lib: PhoneLib | null): string;
+export declare function formatPhone(raw: string, country: PhoneCountry, lib: PhoneLib | null): string;
+export declare function isValidPhoneFor(raw: string, country: PhoneCountry, lib: PhoneLib | null, kind: 'tel' | 'cel'): boolean;
+export declare function phoneValue(raw: string, country: PhoneCountry, lib: PhoneLib | null, kind: 'tel' | 'cel'): PhoneValue;
+export declare function readInternational(typed: string, lib: PhoneLib): {
+    country: string;
+    national: string;
+} | null;
+export declare function formatInternationalDraft(typed: string, lib: PhoneLib | null): string;

package/dist/components/Pill/Pill.d.ts

@@ -14,6 +14,8 @@ interface PillBase {
     width?: 'hug' | 'fill';
     /** @internal Callback fired when clicking iconRight — prevents propagation to onClick */
     onClickIconRight?: () => void;
+    /** @internal Accessible name of iconRight when onClickIconRight is set — say what the click does. Default: "Limpar" */
+    iconRightLabel?: string;
     /** @internal Shows a notification badge (size 24px) */
     showNotification?: boolean;
     /** @internal Number shown in the notification badge (requires showNotification=true) */