@alikhalilll/ui 1.0.0 → 1.1.0

package/dist/tell-input.d.ts

@@ -0,0 +1,637 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { DefineComponent } from 'vue';
+import { HTMLAttributes } from 'vue';
+import { PublicProps } from 'vue';
+import { Ref } from 'vue';
+import { VariantProps } from 'class-variance-authority';
+
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {
+validation: ComputedRef<PhoneValidationResult>;
+required: ComputedRef<PhoneRequiredInfo | null>;
+selectedDialCode: ComputedRef<string | null>;
+validationState: ComputedRef<"error" | "idle" | "valid">;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:phone": (value: string) => any;
+"update:country": (value: number | null) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+"onUpdate:phone"?: ((value: string) => any) | undefined;
+"onUpdate:country"?: ((value: number | null) => any) | undefined;
+}>, {
+size: ATellInputSize;
+placeholder: string;
+ipEndpoint: string;
+defaultCountry: string;
+detectCountry: DetectionStrategy;
+detectFromInput: boolean;
+detectDebounceMs: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_2: DefineComponent<__VLS_PublicProps_2, {
+open: Ref<boolean, boolean>;
+setOpen: (v: boolean) => boolean;
+search: Ref<string, string>;
+setSearch: (v: string) => string;
+selectedCountry: ComputedRef<CountryOption<RestCountry> | null>;
+selectCountry: typeof selectCountry;
+countries: ComputedRef<CountryOption<RestCountry>[]>;
+recents: Ref<string[], string[]>;
+}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:selected": (value: string) => any;
+}, string, PublicProps, Readonly<__VLS_PublicProps_2> & Readonly<{
+"onUpdate:selected"?: ((value: string) => any) | undefined;
+}>, {
+size: Size;
+searchPlaceholder: string;
+emptyText: string;
+loadingText: string;
+suggestedLabel: string;
+allCountriesLabel: string;
+suggestedLimit: number;
+maxResults: number;
+kbdOpen: string | null;
+kbdClose: string | null;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {
+width: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type __VLS_Props = ExtendedProps;
+
+declare type __VLS_Props_2 = {
+    class?: HTMLAttributes['class'];
+    triggerClass?: HTMLAttributes['class'];
+    contentClass?: HTMLAttributes['class'];
+    popoverClass?: HTMLAttributes['class'];
+    drawerClass?: HTMLAttributes['class'];
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    suggestedLabel?: string;
+    allCountriesLabel?: string;
+    /** ISO2 codes that are selectable. Others are listed but disabled. */
+    allowedDialCodes?: string[];
+    disabled?: boolean;
+    /** Drives the trigger button padding + text size. Matches ATellInput's `size`. */
+    size?: Size;
+    /** Max items rendered under the "Suggested" header (current + recents, deduped). */
+    suggestedLimit?: number;
+    /** Cap the number of matching countries shown in search results. */
+    maxResults?: number;
+    /** Override the flag URL builder, e.g. `(iso, w) => \`/flags/${iso}.svg\``. */
+    flagUrl?: (iso2: string, width: number) => string;
+    /**
+     * Custom search predicate. Default: substring match on the precomputed `search_key`.
+     * Return `true` to keep the country in results.
+     */
+    searcher?: (query: string, country: CountryOption) => boolean;
+    /**
+     * Provide your own country list (bypasses the REST Countries fetch). Useful when you
+     * already have a curated subset, an i18n'd list, or want to avoid the network call.
+     */
+    countries?: CountryOption[];
+    /** Override the right-side kbd hints. Pass `null` to hide. */
+    kbdOpen?: string | null;
+    kbdClose?: string | null;
+};
+
+declare type __VLS_Props_3 = {
+    /** ISO 3166-1 alpha-2 country code, case-insensitive. */
+    iso2: string;
+    /** Pixel width served by flagcdn. 40 is crisp at retina up to ~24px wide. */
+    width?: number;
+    /** Optional explicit URL override. When set, `iso2` / `width` / `flagUrl` are ignored. */
+    src?: string | null;
+    /** Function `(iso2, width) => string` — fully replace the URL builder. */
+    flagUrl?: FlagUrlBuilder;
+    alt?: string;
+    class?: HTMLAttributes['class'];
+};
+
+declare type __VLS_PublicProps = {
+    'phone'?: string;
+    'country'?: number | null;
+} & __VLS_Props;
+
+declare type __VLS_PublicProps_2 = {
+    'selected'?: string;
+} & __VLS_Props_2;
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Content before the country select trigger (e.g. an icon). */
+        prefix?: () => unknown;
+        /** Content between the input and the validation icons. */
+        suffix?: (props: {
+            validationState: "idle" | "valid" | "error";
+            validation: PhoneValidationResult;
+        }) => unknown;
+        /** Replace the green check shown when the number validates. */
+        'valid-icon'?: () => unknown;
+        /** Replace the warning icon shown when the number fails validation. */
+        'error-icon'?: (props: {
+            reason: string;
+        }) => unknown;
+        /** Replace the dim helper line shown below the input when empty. */
+        hint?: (props: {
+            country: string;
+            formatHint: string;
+            example: string | null;
+        }) => unknown;
+        /** Replace the error message rendered when invalid. */
+        error?: (props: {
+            message: string;
+            reason: string;
+            validation: PhoneValidationResult;
+        }) => unknown;
+        /** Forwarded to ACountrySelect — replace the trigger button. */
+        trigger?: (props: {
+            selectedCountry: CountryOption | null;
+            open: boolean;
+            sizeClasses: string;
+        }) => unknown;
+        /** Forwarded to ACountrySelect — replace the chevron. */
+        chevron?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** Forwarded — replace any flag rendering. */
+        flag?: (props: {
+            country: CountryOption;
+            context: "trigger" | "item";
+        }) => unknown;
+        /** Forwarded — replace each country list row. */
+        item?: (props: {
+            country: CountryOption;
+            selected: boolean;
+            disabled: boolean;
+            select: () => void;
+        }) => unknown;
+        /** Forwarded — section header. */
+        'group-header'?: (props: {
+            label: string;
+            group: "suggested" | "all";
+        }) => unknown;
+        /** Forwarded — search bar. */
+        search?: (props: {
+            value: string;
+            setValue: (v: string) => void;
+            isSearching: boolean;
+        }) => unknown;
+        loading?: () => unknown;
+        empty?: (props: {
+            query: string;
+        }) => unknown;
+    }> & {
+        /** Content before the country select trigger (e.g. an icon). */
+        prefix?: () => unknown;
+        /** Content between the input and the validation icons. */
+        suffix?: (props: {
+            validationState: "idle" | "valid" | "error";
+            validation: PhoneValidationResult;
+        }) => unknown;
+        /** Replace the green check shown when the number validates. */
+        'valid-icon'?: () => unknown;
+        /** Replace the warning icon shown when the number fails validation. */
+        'error-icon'?: (props: {
+            reason: string;
+        }) => unknown;
+        /** Replace the dim helper line shown below the input when empty. */
+        hint?: (props: {
+            country: string;
+            formatHint: string;
+            example: string | null;
+        }) => unknown;
+        /** Replace the error message rendered when invalid. */
+        error?: (props: {
+            message: string;
+            reason: string;
+            validation: PhoneValidationResult;
+        }) => unknown;
+        /** Forwarded to ACountrySelect — replace the trigger button. */
+        trigger?: (props: {
+            selectedCountry: CountryOption | null;
+            open: boolean;
+            sizeClasses: string;
+        }) => unknown;
+        /** Forwarded to ACountrySelect — replace the chevron. */
+        chevron?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** Forwarded — replace any flag rendering. */
+        flag?: (props: {
+            country: CountryOption;
+            context: "trigger" | "item";
+        }) => unknown;
+        /** Forwarded — replace each country list row. */
+        item?: (props: {
+            country: CountryOption;
+            selected: boolean;
+            disabled: boolean;
+            select: () => void;
+        }) => unknown;
+        /** Forwarded — section header. */
+        'group-header'?: (props: {
+            label: string;
+            group: "suggested" | "all";
+        }) => unknown;
+        /** Forwarded — search bar. */
+        search?: (props: {
+            value: string;
+            setValue: (v: string) => void;
+            isSearching: boolean;
+        }) => unknown;
+        loading?: () => unknown;
+        empty?: (props: {
+            query: string;
+        }) => unknown;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        /** Replace the entire country picker trigger button. */
+        trigger?: (props: {
+            selectedCountry: CountryOption | null;
+            open: boolean;
+            sizeClasses: string;
+        }) => unknown;
+        /** Replace the chevron icon. */
+        chevron?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** Replace just the flag rendered in the trigger and items. */
+        flag?: (props: {
+            country: CountryOption;
+            context: "trigger" | "item";
+        }) => unknown;
+        /** Replace the entire search bar (input + icon + kbd). */
+        search?: (props: {
+            value: string;
+            setValue: (v: string) => void;
+            isSearching: boolean;
+        }) => unknown;
+        /** Replace the search-bar leading icon. */
+        'search-icon'?: () => unknown;
+        /** Replace the loading state. */
+        loading?: () => unknown;
+        /** Replace the empty/no-results state. */
+        empty?: (props: {
+            query: string;
+        }) => unknown;
+        /** Replace a section header. */
+        'group-header'?: (props: {
+            label: string;
+            group: "suggested" | "all";
+        }) => unknown;
+        /** Replace each country list row. Default render still available via &lt;ACountrySelectItem /&gt;. */
+        item?: (props: {
+            country: CountryOption;
+            selected: boolean;
+            disabled: boolean;
+            select: () => void;
+        }) => unknown;
+        /** Replace just the right-side check icon for the selected row. */
+        'item-check'?: (props: {
+            country: CountryOption;
+        }) => unknown;
+    }> & {
+        /** Replace the entire country picker trigger button. */
+        trigger?: (props: {
+            selectedCountry: CountryOption | null;
+            open: boolean;
+            sizeClasses: string;
+        }) => unknown;
+        /** Replace the chevron icon. */
+        chevron?: (props: {
+            open: boolean;
+        }) => unknown;
+        /** Replace just the flag rendered in the trigger and items. */
+        flag?: (props: {
+            country: CountryOption;
+            context: "trigger" | "item";
+        }) => unknown;
+        /** Replace the entire search bar (input + icon + kbd). */
+        search?: (props: {
+            value: string;
+            setValue: (v: string) => void;
+            isSearching: boolean;
+        }) => unknown;
+        /** Replace the search-bar leading icon. */
+        'search-icon'?: () => unknown;
+        /** Replace the loading state. */
+        loading?: () => unknown;
+        /** Replace the empty/no-results state. */
+        empty?: (props: {
+            query: string;
+        }) => unknown;
+        /** Replace a section header. */
+        'group-header'?: (props: {
+            label: string;
+            group: "suggested" | "all";
+        }) => unknown;
+        /** Replace each country list row. Default render still available via &lt;ACountrySelectItem /&gt;. */
+        item?: (props: {
+            country: CountryOption;
+            selected: boolean;
+            disabled: boolean;
+            select: () => void;
+        }) => unknown;
+        /** Replace just the right-side check icon for the selected row. */
+        'item-check'?: (props: {
+            country: CountryOption;
+        }) => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_3(): {
+    attrs: Partial<{}>;
+    slots: {
+        empty?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const ACountryFlag: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+
+export declare const ACountrySelect: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+export declare const ATellInput: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare interface ATellInputProps {
+    class?: HTMLAttributes['class'];
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    size?: ATellInputSize;
+    /**
+     * Whitelist of allowed dial-digit codes (no `+`), e.g. `['20', '966']`.
+     * Countries outside this list are still shown in the picker but rendered as disabled.
+     */
+    allowedDialCodes?: string[];
+    /** Show validation error text beneath the input when invalid. */
+    showValidation?: boolean;
+    /**
+     * Country auto-detect strategy. Defaults to `'auto'` — try IP geolocation first, then
+     * timezone, then `navigator.language`, finally `defaultCountry`.
+     */
+    detectCountry?: DetectionStrategy;
+    /**
+     * Initial country. Accepts either an ISO2 code (`'EG'`) or a dial-digit string
+     * (`'20'`, `'+20'`). When set, the picker is visible at mount with this country
+     * pre-selected — overrides the hidden-until-detected default.
+     */
+    defaultCountry?: string;
+    /** Override the IP geolocation endpoint. Must return JSON with `country_code` or `country`. */
+    ipEndpoint?: string;
+    /** Localized strings for the country picker UI. */
+    searchPlaceholder?: string;
+    emptyText?: string;
+    loadingText?: string;
+    /** Error labels keyed by reason. Each gets a sensible English default. */
+    errorMessages?: Partial<Record<PhoneValidationReason, string>>;
+    /**
+     * When true, the country picker is hidden until a leading dial code is detected in the
+     * phone input. Every keystroke runs a longest-prefix match against known dial codes; on
+     * first match the picker reveals with that country and the matched dial digits are
+     * stripped from `phone`. Skips the onMount IP/timezone/locale detection chain.
+     */
+    detectFromInput?: boolean;
+    /**
+     * Debounce window (ms) for `detectFromInput` detection. Each keystroke schedules the
+     * libphonenumber parse + lookup; bursts of typing/paste collapse into a single call.
+     * Clearing the input is not debounced — the picker hides immediately. Default 150ms.
+     */
+    detectDebounceMs?: number;
+}
+
+/** Alias for the shared `Size` scale — kept for backwards-friendly naming. */
+export declare type ATellInputSize = Size;
+
+export declare type ATellInputVariants = VariantProps<typeof aTellInputVariants>;
+
+export declare const aTellInputVariants: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare interface CountryOption<T = RestCountry> {
+    /** Display label, e.g. "Egypt (+20)". */
+    label: string;
+    /** Stable unique ID — the ISO 3166-1 alpha-2 code, e.g. "EG". */
+    value: string;
+    /** Precomputed normalized string for fast substring search. */
+    search_key: string;
+    raw_data: {
+        iso2: string;
+        dial_code: string;
+        dial_digits: string;
+        name: string;
+        flag: string | null;
+        source: 'restcountries' | 'fallback';
+        original: T;
+    };
+}
+
+export declare const DEFAULT_ERROR_MESSAGES: Record<PhoneValidationReason, string>;
+
+/**
+ * Default flag URL builder — flagcdn.com hosts PNG flags at multiple widths and is
+ * generous with caching + no API key required. Swap via the `flagUrl` prop on
+ * ATellInput / ACountrySelect / ACountryFlag to use any other source.
+ */
+export declare function defaultFlagUrl(iso2: string, width?: number): string;
+
+/**
+ * Imperative API. Use this when you want to call detection from outside Vue (e.g. inside a
+ * non-component composable, server middleware, or unit test).
+ */
+export declare function detectCountry(opts?: DetectCountryOptions): Promise<string>;
+
+export declare interface DetectCountryOptions {
+    /**
+     * - `'auto'` — try IP geolocation first, then timezone, then `navigator.language`, then default.
+     * - `'locale'` — skip the network call, use timezone + locale only.
+     * - `'none'` — return `defaultCountry` immediately.
+     */
+    strategy?: DetectionStrategy;
+    /** Endpoint returning a JSON body with a `country_code` (or `country`) field. */
+    ipEndpoint?: string;
+    /** Fallback ISO2 used when every step fails. */
+    defaultCountry?: string;
+    /** Abort the IP request after this many ms. */
+    timeoutMs?: number;
+    /** Persist the resolved country in sessionStorage so re-mounts within the session skip detection. */
+    cache?: boolean;
+}
+
+export declare type DetectionStrategy = 'auto' | 'locale' | 'none';
+
+declare interface ExtendedProps extends ATellInputProps {
+    /** Override the flag URL builder, forwarded to ACountrySelect. */
+    flagUrl?: (iso2: string, width: number) => string;
+    /** Custom search predicate, forwarded to ACountrySelect. */
+    searcher?: (query: string, country: CountryOption) => boolean;
+    /** Provide your own country list, forwarded to ACountrySelect. */
+    countries?: CountryOption[];
+    /**
+     * Fully custom country detection. When provided, this function runs in place of the
+     * built-in chain — `detectCountry`-style options are still honored but the function
+     * receives them and is free to ignore them.
+     */
+    detector?: (options: DetectCountryOptions) => Promise<string | null | undefined>;
+    /** Forwarded to ACountrySelect: classes for the popover content surface. */
+    contentClass?: string;
+    popoverClass?: string;
+    drawerClass?: string;
+    /** Classes for the inner phone field input element. */
+    inputClass?: string;
+    /** Classes for the outer wrapper that holds country select + input. */
+    fieldClass?: string;
+    /** Classes for the helper hint line. */
+    hintClass?: string;
+    /** Classes for the error message line. */
+    errorClass?: string;
+}
+
+export declare type FlagUrlBuilder = (iso2: string, width: number) => string;
+
+export declare interface PhoneRequiredInfo {
+    iso2: string;
+    dial_code: string;
+    /** Empty by default — consumer passes a placeholder via the component prop. */
+    placeholder: string;
+    example_national: string;
+    example_e164: string;
+    national_number_length: {
+        min: number | null;
+        max: number | null;
+    };
+    format_hint: string;
+}
+
+export declare type PhoneValidationReason = 'missing_country' | 'country_not_supported' | 'phone_has_non_digits' | 'too_short' | 'too_long' | 'invalid_phone' | 'parse_failed';
+
+export declare interface PhoneValidationResult {
+    ok: boolean;
+    reason: PhoneValidationReason | null;
+    country: {
+        iso2: string;
+        dial_code: string;
+    } | null;
+    phone: {
+        raw: string | null;
+        digits: string;
+    };
+    full_phone: string | null;
+    required: PhoneRequiredInfo | null;
+    details?: Record<string, unknown>;
+}
+
+export declare interface RestCountry {
+    name?: {
+        common?: string;
+    };
+    cca2?: string;
+    idd?: {
+        root?: string;
+        suffixes?: string[];
+    };
+    flags?: {
+        png?: string;
+        svg?: string;
+    };
+}
+
+declare function selectCountry(option: CountryOption): void;
+
+/**
+ * Shared size scale for every interactive UI component in @alikhalilll/ui.
+ *
+ *   xs = 28px · sm = 36px · md = 43px (default) · lg = 52px · xl = 60px
+ *
+ * Use the {@link controlHeight}, {@link controlPaddingX}, {@link controlTextSize}
+ * maps when building a CVA variant so every component stays in lockstep.
+ */
+declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Reactive wrapper. Kicks off detection in `onMounted` so SSR renders an empty value and the
+ * client patches in the real country once resolved.
+ */
+export declare function useCountryDetection(opts?: DetectCountryOptions): UseCountryDetectionReturn;
+
+export declare interface UseCountryDetectionReturn {
+    /** Resolved ISO2 code. Initially `null` until detection completes. */
+    country: Ref<string | null>;
+    /** True while detection is in flight. */
+    isLoading: Ref<boolean>;
+    /** Manually re-run detection (e.g. after the user changes their VPN). */
+    refresh: () => Promise<string>;
+}
+
+export declare function usePhoneValidation(): UsePhoneValidationReturn;
+
+export declare interface UsePhoneValidationReturn {
+    countries: Ref<CountryOption[]>;
+    isCountriesLoading: Ref<boolean>;
+    getCountries(options?: {
+        force?: boolean;
+    }): Promise<CountryOption[]>;
+    searchCountries(keyword: string, limit?: number): CountryOption[];
+    getCountryByValue(value: string): CountryOption | null;
+    getCountriesByDial(dial: string): CountryOption[];
+    getRequiredInfo(country: {
+        iso2: string;
+        dial_code?: string;
+    }): PhoneRequiredInfo | null;
+    validate(input: ValidateArgs): PhoneValidationResult;
+}
+
+export declare type ValidateArgs = {
+    country: {
+        iso2: string;
+        dial_code?: string;
+    } | null | undefined;
+    phone?: undefined;
+} | {
+    country: {
+        iso2: string;
+        dial_code?: string;
+    } | null | undefined;
+    phone: string | null;
+};
+
+export { }

package/dist/tell-input.mjs

@@ -0,0 +1,13 @@
+import { _ as e, a as s, b as l, D as n, c as u, d as o, e as r, u as A, f as c } from "./chunks/ATellInput.vue_vue_type_script_setup_true_lang-B4lyNu_f.mjs";
+export {
+  e as ACountryFlag,
+  s as ACountrySelect,
+  l as ATellInput,
+  n as DEFAULT_ERROR_MESSAGES,
+  u as aTellInputVariants,
+  o as defaultFlagUrl,
+  r as detectCountry,
+  A as useCountryDetection,
+  c as usePhoneValidation
+};
+//# sourceMappingURL=tell-input.mjs.map

package/dist/tell-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tell-input.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/utils.d.ts

@@ -0,0 +1,29 @@
+import { ClassValue } from 'clsx';
+
+export declare function cn(...inputs: ClassValue[]): string;
+
+/** Tailwind height utility per size. md uses an arbitrary value because 43px isn't on the spacing scale. */
+export declare const controlHeight: Record<Size, string>;
+
+/** Pixel values exposed so non-template code (icons, ResizeObserver, etc.) can read the height. */
+export declare const controlHeightPx: Record<Size, number>;
+
+export declare const controlPaddingX: Record<Size, string>;
+
+export declare const controlTextSize: Record<Size, string>;
+
+export declare const DEFAULT_SIZE: Size;
+
+/**
+ * Shared size scale for every interactive UI component in @alikhalilll/ui.
+ *
+ *   xs = 28px · sm = 36px · md = 43px (default) · lg = 52px · xl = 60px
+ *
+ * Use the {@link controlHeight}, {@link controlPaddingX}, {@link controlTextSize}
+ * maps when building a CVA variant so every component stays in lockstep.
+ */
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const SIZES: readonly Size[];
+
+export { }

package/dist/utils.mjs

@@ -0,0 +1,12 @@
+import { c as t } from "./chunks/cn-B6yFEsav.mjs";
+import { D as c, S as s, c as e, a as n, b as S, d as i } from "./chunks/sizes-B_9MfLkz.mjs";
+export {
+  c as DEFAULT_SIZE,
+  s as SIZES,
+  t as cn,
+  e as controlHeight,
+  n as controlHeightPx,
+  S as controlPaddingX,
+  i as controlTextSize
+};
+//# sourceMappingURL=utils.mjs.map

package/dist/utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}