@kenlo/kdls-design-system 2.10.0 → 2.11.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 = {
@@ -80,6 +77,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/Modal/useDialogFocus.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Modal dialog focus, for Drawer and Modal: on open, focus moves inside (the first control of
+ * the body, else the first control of the panel, else the panel itself); Tab and Shift+Tab wrap
+ * inside the panel, and come back to it from a floating list the dialog opened; on close, focus
+ * returns to the element that had it when the dialog opened, when it is still on the page.
+ */
+export declare function useDialogFocus(open: boolean, panelRef: React.RefObject<HTMLElement | null>, bodySelector: string): void;