@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.variants.js

@@ -0,0 +1,31 @@
+import { t as r } from "../../dist-DtEbXv47.js";
+var a = r([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-full",
+  "relative",
+  "cursor-pointer"
+]), t = r(["cursor-pointer", "select-none"]), o = r([
+  "min-h-9",
+  "border",
+  "cursor-pointer",
+  "duration-250",
+  "ease-in-out",
+  "flex",
+  "items-center",
+  "justify-between",
+  "px-2",
+  "py-1",
+  "rounded-md",
+  "transition-all",
+  "w-full",
+  "border-gray-200",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
+]);
+export {
+  t as labelVariants,
+  o as multiSelectDropdownVariants,
+  a as wrapperVariants
+};

package/dist/components/MultiSelectDropdown/components/Item/Item.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ItemProps } from './Item.types';
+export declare const Item: FC<ItemProps>;

package/dist/components/MultiSelectDropdown/components/Item/Item.js

@@ -0,0 +1,22 @@
+import { t as i } from "../../../../utils-DHuiYnx1.js";
+import { Badge as l } from "../../../Badge/Badge.js";
+import { Typography as n } from "../../../Typography/Typography.js";
+import { useMultiSelectDropdown as p } from "../../contexts/MultiSelectDropdown.hook.js";
+import { itemVariants as s } from "./Item.variants.js";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+var x = ({ option: r, theme: o, isSelected: t, className: a }) => {
+  const { onSelectOption: m } = p();
+  return /* @__PURE__ */ c("li", {
+    role: "option",
+    "data-theme": o,
+    className: i(s({ isSelected: t }), a),
+    onClick: () => m(r),
+    children: [/* @__PURE__ */ e(n, {
+      variant: "body2",
+      children: r.label
+    }), r.badge && /* @__PURE__ */ e(l, { label: r.badge })]
+  });
+};
+export {
+  x as Item
+};

package/dist/components/MultiSelectDropdown/components/Item/Item.types.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '../../../../domain/theme';
+import { MultiSelectDropdownOption } from '../../MultiSelectDropdown.types';
+export type ItemProps = {
+    option: MultiSelectDropdownOption;
+    theme?: Theme;
+    isSelected?: boolean;
+    className?: string;
+};

package/dist/components/MultiSelectDropdown/components/Item/Item.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const itemVariants: (props?: ({
+    isSelected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/MultiSelectDropdown/components/Item/Item.variants.js

@@ -0,0 +1,29 @@
+import { t as e } from "../../../../dist-DtEbXv47.js";
+var t = e([
+  "cursor-pointer",
+  "py-1.5",
+  "px-2",
+  "last:pb-2",
+  "first:pt-2",
+  "h-full",
+  "flex",
+  "items-center",
+  "gap-2",
+  "hover:bg-gray-50",
+  "focus:bg-gray-50",
+  "dark:hover:bg-metal-700",
+  "dark:focus:bg-metal-700"
+], {
+  variants: { isSelected: {
+    true: "",
+    false: ""
+  } },
+  compoundVariants: [{
+    isSelected: !0,
+    class: ["bg-slate-50", "dark:bg-metal-700"]
+  }],
+  defaultVariants: { isSelected: !1 }
+});
+export {
+  t as itemVariants
+};

package/dist/components/MultiSelectDropdown/components/List/List.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { ListProps } from './List.types';
+export declare const List: FC<ListProps>;

package/dist/components/MultiSelectDropdown/components/List/List.js

@@ -0,0 +1,4 @@
+import { r as o } from "../../../../components-DNFycJGm.js";
+export {
+  o as List
+};

package/dist/components/MultiSelectDropdown/components/List/List.types.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '../../../../domain/theme';
+export type ListProps = {
+    theme?: Theme;
+};

package/dist/components/MultiSelectDropdown/components/List/List.variants.d.ts

@@ -0,0 +1 @@
+export declare const listVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/MultiSelectDropdown/components/List/List.variants.js

@@ -0,0 +1,25 @@
+import { t as a } from "../../../../dist-DtEbXv47.js";
+var e = a([
+  "absolute",
+  "bg-white",
+  "border",
+  "duration-100",
+  "flex",
+  "flex-col",
+  "mt-0.5",
+  "rounded",
+  "shadow-xs",
+  "top-full",
+  "transition-all",
+  "w-full",
+  "z-10",
+  "animate-in",
+  "fade-in-50",
+  "overflow-hidden",
+  "border-gray-200",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
+]);
+export {
+  e as listVariants
+};

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { WrapperProps } from './Wrapper.types';
+export declare const Wrapper: FC<WrapperProps>;

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -0,0 +1,4 @@
+import { n as p } from "../../../../components-DNFycJGm.js";
+export {
+  p as Wrapper
+};

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.types.d.ts

@@ -0,0 +1,7 @@
+import { ForwardedRef } from 'react';
+import { Theme } from '../../../../domain/theme';
+import { Props as MultiSelectDropdownProps } from '../../MultiSelectDropdown.types';
+export type WrapperProps = Omit<MultiSelectDropdownProps, 'options' | 'multiselect'> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+    theme?: Theme;
+};

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

@@ -0,0 +1,3 @@
+export { Item } from './Item/Item';
+export { List } from './List/List';
+export { Wrapper } from './Wrapper/Wrapper';

package/dist/components/MultiSelectDropdown/components/index.js

@@ -0,0 +1,7 @@
+import { Item as m } from "./Item/Item.js";
+import { n as p, r as t } from "../../../components-DNFycJGm.js";
+export {
+  m as Item,
+  t as List,
+  p as Wrapper
+};

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.context.d.ts

@@ -0,0 +1,2 @@
+import { State } from './MultiSelectDropdown.types';
+export declare const MultiSelectDropdownContext: import('react').Context<State>;

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.context.js

@@ -0,0 +1,21 @@
+import { createContext as e } from "react";
+var n = {
+  options: [],
+  selectedOptions: [],
+  isOpen: !1,
+  inputRef: null,
+  onSelectOption() {
+    throw new Error("Function not implemented.");
+  },
+  onRemoveOption() {
+    throw new Error("Function not implemented.");
+  },
+  onOpen() {
+    throw new Error("Function not implemented.");
+  },
+  isLoading: !1,
+  noOptionsText: void 0
+}, o = e(n);
+export {
+  o as MultiSelectDropdownContext
+};

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.hook.d.ts

@@ -0,0 +1 @@
+export declare const useMultiSelectDropdown: () => import('./MultiSelectDropdown.types').State;

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.hook.js

@@ -0,0 +1,10 @@
+import { MultiSelectDropdownContext as e } from "./MultiSelectDropdown.context.js";
+import { useContext as o } from "react";
+var i = () => {
+  const t = o(e);
+  if (!t) throw new Error("useMultiSelectDropdown must be used within a MultiSelectDropdownProvider");
+  return t;
+};
+export {
+  i as useMultiSelectDropdown
+};

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.provider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MultiSelectDropdownProviderProps } from './MultiSelectDropdown.types';
+export declare const MultiSelectDropdownProvider: FC<MultiSelectDropdownProviderProps>;

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.provider.js

@@ -0,0 +1,107 @@
+import { useToggle as V } from "../../../hooks/useToggle.js";
+import { MultiSelectDropdownContext as k } from "./MultiSelectDropdown.context.js";
+import { useCallback as f, useEffect as O, useRef as C, useState as R } from "react";
+import { jsx as E } from "react/jsx-runtime";
+var q = ({ children: g, defaultOptions: r = [], multiselect: c = !0, value: S, onChange: m, onBlur: u, name: h, isLoading: x, noOptionsText: b }) => {
+  const o = C(null), [v, I] = V(!1), [j, l] = R(r), [i, w] = R([]), d = S !== void 0;
+  O(() => {
+    if (!d) {
+      const t = new Set(i.map((e) => e.id));
+      l(c ? r.filter((e) => !t.has(e.id)) : r.map((e) => ({
+        ...e,
+        isSelected: t.has(e.id)
+      })));
+    }
+  }, [
+    r,
+    c,
+    d,
+    i
+  ]), O(() => {
+    if (d) {
+      const t = S || [];
+      w(t);
+      const e = new Set(t.map((s) => s.id));
+      l(c ? r.filter((s) => !e.has(s.id)) : r.map((s) => ({
+        ...s,
+        isSelected: e.has(s.id)
+      })));
+    }
+  }, [
+    S,
+    d,
+    r,
+    c
+  ]);
+  const a = f((t) => {
+    const e = t.map(({ id: n, value: M, label: P }) => ({
+      id: n,
+      value: M ?? P
+    })), s = JSON.stringify(e);
+    o.current && (o.current.value = s), m && m({ target: {
+      value: t,
+      name: h ?? ""
+    } });
+  }, [m, h]), p = f((t) => {
+    const e = v;
+    I(t), e && t === !1 && u && o.current && u({
+      target: o.current,
+      type: "blur"
+    });
+  }, [
+    v,
+    I,
+    u,
+    o
+  ]), y = f((t) => {
+    if (d) {
+      a([...c ? i : [], t]), p(!1);
+      return;
+    }
+    const e = [...c ? i : [], t];
+    w(e);
+    const s = e.map((n) => n.id);
+    l(() => c ? r.filter((n) => !s.includes(n.id)) : r.map((n) => ({
+      ...n,
+      isSelected: s.includes(n.id)
+    }))), a(e), p(!1);
+  }, [
+    r,
+    a,
+    c,
+    i,
+    p,
+    d
+  ]), D = f((t) => {
+    if (d) {
+      a(i.filter((n) => n.id !== t.id));
+      return;
+    }
+    const e = i.filter((n) => n.id !== t.id);
+    w(e);
+    const s = e.map((n) => n.id);
+    l(() => r.filter((n) => !s.includes(n.id))), a(e);
+  }, [
+    r,
+    a,
+    i,
+    d
+  ]);
+  return /* @__PURE__ */ E(k.Provider, {
+    value: {
+      options: j,
+      selectedOptions: i,
+      isOpen: v,
+      inputRef: o,
+      onSelectOption: y,
+      onRemoveOption: D,
+      onOpen: p,
+      isLoading: x,
+      noOptionsText: b
+    },
+    children: g
+  });
+};
+export {
+  q as MultiSelectDropdownProvider
+};

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.types.d.ts

@@ -0,0 +1,31 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { MultiSelectDropdownOption } from '../MultiSelectDropdown.types';
+export type State = {
+    inputRef: RefObject<HTMLInputElement | null> | null;
+    isLoading?: boolean;
+    isOpen: boolean;
+    noOptionsText?: string;
+    options: MultiSelectDropdownOption[];
+    selectedOptions: MultiSelectDropdownOption[];
+    onSelectOption: (option: MultiSelectDropdownOption) => void;
+    onRemoveOption: (option: MultiSelectDropdownOption) => void;
+    onOpen: (value?: boolean) => void;
+};
+export type MultiSelectDropdownProviderProps = PropsWithChildren & {
+    defaultOptions?: MultiSelectDropdownOption[];
+    isLoading?: boolean;
+    multiselect?: boolean;
+    name?: string;
+    noOptionsText?: string;
+    value?: MultiSelectDropdownOption[];
+    onChange?: (params: {
+        target: {
+            value: MultiSelectDropdownOption[];
+            name: string;
+        };
+    }) => void;
+    onBlur?: (event: {
+        target: HTMLInputElement | null;
+        type?: string;
+    }) => void;
+};

package/dist/components/MultiSelectDropdown/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MultiSelectDropdown.hook';
+export * from './MultiSelectDropdown.provider';

package/dist/components/MultiSelectDropdown/contexts/index.js

@@ -0,0 +1,6 @@
+import { useMultiSelectDropdown as r } from "./MultiSelectDropdown.hook.js";
+import { MultiSelectDropdownProvider as t } from "./MultiSelectDropdown.provider.js";
+export {
+  t as MultiSelectDropdownProvider,
+  r as useMultiSelectDropdown
+};

package/dist/components/MultiSelectDropdown/hooks/useMultiSelectDropdown.d.ts

@@ -0,0 +1,4 @@
+export declare const useMultiSelectDropdown: () => {
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleOpen: (event: React.MouseEvent<HTMLElement>) => void;
+};

package/dist/components/MultiSelectDropdown/hooks/useMultiSelectDropdown.js

@@ -0,0 +1,23 @@
+import { useMultiSelectDropdown as s } from "../contexts/MultiSelectDropdown.hook.js";
+import { useCallback as a, useEffect as u, useRef as c } from "react";
+var f = () => {
+  const n = c(null), { onOpen: e } = s();
+  return u(() => {
+    const t = new AbortController(), r = (o) => {
+      o.key === "Escape" && e(!1);
+    }, l = (o) => {
+      n.current?.contains(o.target) || e(!1);
+    };
+    return document.addEventListener("keydown", r, { signal: t.signal }), document.addEventListener("mousedown", l, { signal: t.signal }), () => {
+      t.abort();
+    };
+  }, [e, n]), {
+    wrapperRef: n,
+    handleOpen: a((t) => {
+      t.target?.closest("[data-value]") || e(!0);
+    }, [e])
+  };
+};
+export {
+  f as useMultiSelectDropdown
+};

package/dist/components/PhoneNumberInput/PhoneNumberInput.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { Props } from './PhoneNumberInput.types';
+/**
+ * A phone number input with country code selector and automatic formatting.
+ * Uses google-libphonenumber for validation and formatting.
+ *
+ * @example
+ * ```tsx
+ * <PhoneNumberInput
+ *   label="Contact Number"
+ *   name="contactPhone"
+ *   defaultCountryCode="US"
+ *   showFlagOnSearch
+ *   showInputFilter
+ *   isRequired
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-phonenumberinput--docs Storybook}
+ */
+export declare const PhoneNumberInput: FC<Props>;

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,14 @@
+import { t as p } from "../../phone-number.provider-B5TfHi8y.js";
+import { t } from "../../Wrapper-BWSOaT1y.js";
+import { forwardRef as f } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var h = f(({ defaultCountryCode: o = "US", ...m }, e) => /* @__PURE__ */ r(p, {
+  defaultCountryCode: o,
+  children: /* @__PURE__ */ r(t, {
+    ref: e,
+    ...m
+  })
+}));
+export {
+  h as PhoneNumberInput
+};

package/dist/components/PhoneNumberInput/PhoneNumberInput.types.d.ts

@@ -0,0 +1,51 @@
+import { RegionCode } from 'google-libphonenumber';
+import { InputHTMLAttributes } from 'react';
+/**
+ * Props for the PhoneNumberInput component.
+ * An input with country code selector and phone number formatting.
+ *
+ * @example
+ * ```tsx
+ * <PhoneNumberInput
+ *   label="Phone Number"
+ *   name="phone"
+ *   defaultCountryCode="US"
+ *   placeholder="Enter phone number"
+ *   showFlagOnSearch
+ * />
+ * ```
+ */
+export type Props = InputHTMLAttributes<HTMLInputElement> & {
+    /** Default country code for the selector (e.g., 'US', 'GB') */
+    defaultCountryCode?: RegionCode;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Additional CSS classes for the helper text */
+    helperTextClassName?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Label displayed above the input */
+    label?: string;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether to show country flags in the search dropdown */
+    showFlagOnSearch?: boolean;
+    /** Whether to show the country filter input */
+    showInputFilter?: boolean;
+    /** Whether to show country names in the search dropdown */
+    showNameOnSearch?: boolean;
+    /** Whether to show the placeholder text */
+    showPlaceHolder?: boolean;
+    /** Additional CSS classes for the wrapper */
+    wrapperClassName?: string;
+};

package/dist/components/PhoneNumberInput/PhoneNumberInput.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const phoneNumberInputVariants: (props?: ({
+    variant?: "error" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/PhoneNumberInput/PhoneNumberInput.variants.js

@@ -0,0 +1,39 @@
+import { t as r } from "../../dist-DtEbXv47.js";
+var e = r([
+  "text-sm",
+  "relative",
+  "border",
+  "border-gray-300",
+  "rounded",
+  "data-[state=open]:border-aurora-500",
+  "focus-within:border-aurora-500",
+  "transition-colors",
+  "duration-150",
+  "dark:border-metal-700",
+  "dark:bg-metal-800",
+  "dark:data-[state=open]:border-metal-700",
+  "dark:focus-within:border-metal-700"
+], {
+  variants: { variant: {
+    default: [],
+    error: [
+      "border-red-600",
+      "dark:border-red-500",
+      "data-[state=open]:border-red-500",
+      "focus-within:border-red-500",
+      "pr-8",
+      "focus-visible:ring-transparent"
+    ]
+  } },
+  defaultVariants: { variant: "default" }
+}), t = r([
+  "cursor-pointer",
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-slate-50"
+]);
+export {
+  t as labelVariants,
+  e as phoneNumberInputVariants
+};

package/dist/components/PhoneNumberInput/components/FlagContent/FlagContent.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const FlagContent: FC;

package/dist/components/PhoneNumberInput/components/FlagContent/FlagContent.js

@@ -0,0 +1,19 @@
+import { t as n } from "../../../../utils-DHuiYnx1.js";
+import { t as s } from "../../../../chevron-up-DuS9MUNr.js";
+import { usePhoneNumberContext as l } from "../../contexts/phone-number.hook.js";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+var u = () => {
+  const { selectedCountry: o, isOpenSelector: t, handleOpenSelector: a } = l(), { flag: r } = o;
+  return /* @__PURE__ */ c("button", {
+    type: "button",
+    className: "flex items-center gap-2 cursor-pointer",
+    onClick: () => a(!t),
+    children: [/* @__PURE__ */ e(r, {}), /* @__PURE__ */ e(s, {
+      className: n("transition-all", "duration-100", "data-[state=open]:rotate-0", "data-[state=closed]:rotate-180", "w-5", "h-5", "text-slate-400"),
+      "data-state": t ? "open" : "closed"
+    })]
+  });
+};
+export {
+  u as FlagContent
+};

package/dist/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './FlagSelectorList.types';
+export declare const FlagSelectorList: FC<Props>;

package/dist/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.js

@@ -0,0 +1,4 @@
+import { t as o } from "../../../../FlagSelectorList-C17nmEBM.js";
+export {
+  o as FlagSelectorList
+};

package/dist/components/PhoneNumberInput/components/FlagSelectorList/FlagSelectorList.types.d.ts

@@ -0,0 +1,5 @@
+import { Props as PhoneNumberProps } from '../../PhoneNumberInput.types';
+export type Props = {
+    showFlagOnSearch: Required<PhoneNumberProps>['showFlagOnSearch'];
+    showNameOnSearch: Required<PhoneNumberProps>['showNameOnSearch'];
+};

package/dist/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './FlagSelectorWrapper.types';
+export declare const FlagSelectorWrapper: FC<Props>;

package/dist/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.js

@@ -0,0 +1,28 @@
+import { t as n } from "../../../../Input-GBMxM3Z7.js";
+import { t as d } from "../../../../utils-DHuiYnx1.js";
+import { t as p } from "../../../../FlagSelectorList-C17nmEBM.js";
+import { usePhoneNumberContext as c } from "../../contexts/phone-number.hook.js";
+import { useCallback as u } from "react";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+var C = ({ placeholder: e = "Search", showFlagOnSearch: o, showInputFilter: a, showNameOnSearch: t, showPlaceHolder: m = !0 }) => {
+  const { onChangeTermOfSearch: l } = c(), s = u((i) => {
+    l(i.target.value);
+  }, []);
+  return /* @__PURE__ */ h("div", {
+    className: d("absolute", "top-full", "mt-1.5", "animate-in", "fade-in-0", "zoom-in-95", "w-full", "border", "border-gray-100", "bg-white", "shadow-sm", "py-2", "z-10", "rounded-sm", "dark:bg-metal-800", "dark:border-metal-700"),
+    children: [a && /* @__PURE__ */ r("div", {
+      className: "px-6 py-2.5",
+      children: /* @__PURE__ */ r(n, {
+        isSearch: !0,
+        placeholder: m ? e : void 0,
+        onChange: s
+      })
+    }), /* @__PURE__ */ r(p, {
+      showFlagOnSearch: o,
+      showNameOnSearch: t
+    })]
+  });
+};
+export {
+  C as FlagSelectorWrapper
+};

package/dist/components/PhoneNumberInput/components/FlagSelectorWrapper/FlagSelectorWrapper.types.d.ts

@@ -0,0 +1,8 @@
+import { Props as PhoneNumberProps } from '../../PhoneNumberInput.types';
+export type Props = {
+    placeholder: PhoneNumberProps['placeholder'];
+    showFlagOnSearch: Required<PhoneNumberProps>['showFlagOnSearch'];
+    showInputFilter: Required<PhoneNumberProps>['showInputFilter'];
+    showNameOnSearch: Required<PhoneNumberProps>['showNameOnSearch'];
+    showPlaceHolder: PhoneNumberProps['showPlaceHolder'];
+};

package/dist/components/PhoneNumberInput/components/TruncateText/TruncateText.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './TruncateText.types';
+export declare const TruncateText: FC<Props>;