@clasing/ui 0.1.129 → 0.1.130

package/dist/components/phone-input.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-CEDi24JD.cjs"),q=require("react"),I=require("react-phone-number-input"),P=require("react-phone-number-input/flags"),v=require("react-phone-number-input/locale/en"),O=require("react-phone-number-input/locale/es"),w=require("react-phone-number-input/locale/fr"),_=require("../button-Ha5yZjbm.cjs"),p=require("../command-8g6GQBZ9.cjs"),z=require("../input-DHz92pYC.cjs"),T=require("../label-DzIkWgU7.cjs"),g=require("../popover-DuG87bap.cjs"),A=require("../scroll-area-DWxaYCKb.cjs"),d=require("../index-DoxiiusW.cjs"),C=require("../icon-component-DuSAouum.cjs");function N(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const s=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,s.get?s:{enumerable:!0,get:()=>t[o]})}}return n.default=t,Object.freeze(n)}const j=N(q),y=N(I),b=j.forwardRef(({className:t,onChange:n,value:o,variant:s="md",rounded:r="default",label:c,helperText:a,locale:x="en",error:u,touched:m,...l},R)=>(console.log(s),e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col gap-3",children:[c&&e.jsxRuntimeExports.jsx(T.Label,{htmlFor:l.id,className:d.cn({"text-neutral-700":l.disabled}),children:c}),e.jsxRuntimeExports.jsx(y.default,{ref:R,className:d.cn("flex",t),flagComponent:E,countrySelectComponent:D,inputComponent:S,smartCaret:!1,labels:x==="es"?O:x==="fr"?w:v,value:o||void 0,onChange:f=>n?.(f||""),countrySelectProps:{variant:s,rounded:r,error:u,touched:m},numberInputProps:{variant:s,rounded:r,error:u,touched:m},...l}),u&&m?e.jsxRuntimeExports.jsx("span",{id:l.id&&`${l.id}-error-text`,"aria-invalid":!0,className:"text-destructive text-label-md -mt-1",children:u}):a?e.jsxRuntimeExports.jsx("span",{id:l.id&&`${l.id}-helper-text`,className:d.cn("text-label-md -mt-1",{"text-muted-foreground":!u&&!m,"text-destructive":u&&m,"text-neutral-700":l.disabled}),children:a}):null]})));b.displayName="PhoneInput";const S=j.forwardRef(({className:t,rounded:n="default",error:o,touched:s,variant:r,...c},a)=>{const{"data-country":x,...u}=c;return e.jsxRuntimeExports.jsx(z.Input,{variant:r,className:d.cn(n==="default"?"rounded-s-none rounded-e-lg":"rounded-s-none rounded-e-full",{"border-destructive":o&&s,"border-blue-800":s&&!o,"rounded-e-sm":r==="sm","rounded-e-md":r==="md","rounded-e-lg":r==="lg"},t),...u,ref:a})});S.displayName="InputComponent";const D=({disabled:t,value:n,options:o,onChange:s,variant:r="md",rounded:c="default",error:a,touched:x})=>{const u=j.useRef(null),[m,l]=j.useState(""),[R,f]=j.useState(!1);return e.jsxRuntimeExports.jsxs(g.Popover,{open:R,modal:!0,onOpenChange:i=>{f(i),i&&l("")},children:[e.jsxRuntimeExports.jsx(g.PopoverTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs(_.Button,{type:"button",variant:"outline",className:d.cn("outline-r-0 outline-input text-secondary flex gap-1 px-3 focus:z-10",c==="default"?"rounded-e-none":"rounded-s-full rounded-e-none",{"outline-destructive":a&&x,"outline-blue-800":x&&!a,"h-8 rounded-s-sm":r==="sm","h-12 rounded-s-md":r==="md","h-16 rounded-s-lg":r==="lg"}),disabled:t,children:[e.jsxRuntimeExports.jsx(E,{country:n,countryName:n,disabled:t}),e.jsxRuntimeExports.jsx(C.IconComponent,{iconName:"IconChevronDown",className:d.cn("-mr-2 size-4 opacity-50",t?"hidden":"opacity-100")})]})}),e.jsxRuntimeExports.jsx(g.PopoverContent,{className:"w-[300px] p-0",children:e.jsxRuntimeExports.jsxs(p.Command,{children:[e.jsxRuntimeExports.jsx(p.CommandInput,{value:m,onValueChange:i=>{l(i),setTimeout(()=>{if(u.current){const h=u.current.querySelector("[data-radix-scroll-area-viewport]");h&&(h.scrollTop=0)}},0)},placeholder:"Search country..."}),e.jsxRuntimeExports.jsx(p.CommandList,{children:e.jsxRuntimeExports.jsxs(A.ScrollArea,{ref:u,className:"h-72",children:[e.jsxRuntimeExports.jsx(p.CommandEmpty,{children:"No country found."}),e.jsxRuntimeExports.jsx(p.CommandGroup,{children:o.map(({value:i,label:h})=>i?e.jsxRuntimeExports.jsx(F,{country:i,countryName:h,selectedCountry:n,onChange:s,onSelectComplete:()=>f(!1)},i):null)})]})})]})})]})},F=({country:t,countryName:n,selectedCountry:o,onChange:s,onSelectComplete:r})=>{const c=()=>{s(t),r()};return e.jsxRuntimeExports.jsxs(p.CommandItem,{className:"gap-2",onSelect:c,children:[e.jsxRuntimeExports.jsx(E,{country:t,countryName:n}),e.jsxRuntimeExports.jsx("span",{className:"flex-1 text-sm",children:n}),e.jsxRuntimeExports.jsx("span",{className:"text-foreground/50 text-sm",children:`+${y.getCountryCallingCode(t)}`}),e.jsxRuntimeExports.jsx(C.IconComponent,{iconName:"IconCheck",className:`ml-auto size-4 ${t===o?"opacity-100":"opacity-0"}`})]})},E=({country:t,countryName:n,disabled:o})=>{const s=P[t];return e.jsxRuntimeExports.jsx("span",{className:d.cn("bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-[4px] [&_svg:not([class*='size-'])]:size-full",{"opacity-50":o}),children:s&&e.jsxRuntimeExports.jsx(s,{title:n})})};exports.PhoneInput=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-CEDi24JD.cjs"),S=require("react"),I=require("react-phone-number-input"),q=require("react-phone-number-input/flags"),w=require("react-phone-number-input/locale/en"),P=require("react-phone-number-input/locale/es"),O=require("react-phone-number-input/locale/fr"),p=require("../command-8g6GQBZ9.cjs"),_=require("../input-DHz92pYC.cjs"),T=require("../label-DzIkWgU7.cjs"),h=require("../popover-DuG87bap.cjs"),k=require("../scroll-area-DWxaYCKb.cjs"),m=require("../index-DoxiiusW.cjs"),y=require("../icon-component-DuSAouum.cjs");function C(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(n,s,o.get?o:{enumerable:!0,get:()=>t[s]})}}return n.default=t,Object.freeze(n)}const f=C(S),E=C(I),N=f.forwardRef(({className:t,onChange:n,value:s,size:o="md",rounded:r="default",label:a,helperText:c,locale:x="en",error:l,touched:d,...i},g)=>e.jsxRuntimeExports.jsxs("div",{className:"flex flex-col gap-3",children:[a&&e.jsxRuntimeExports.jsx(T.Label,{htmlFor:i.id,className:m.cn({"text-neutral-700":i.disabled}),children:a}),e.jsxRuntimeExports.jsx(E.default,{ref:g,className:m.cn("flex",t),flagComponent:R,countrySelectComponent:A,inputComponent:v,smartCaret:!1,labels:x==="es"?P:x==="fr"?O:w,value:s||void 0,onChange:j=>n?.(j||""),countrySelectProps:{size:o,rounded:r,error:l,touched:d},numberInputProps:{size:o,rounded:r,error:l,touched:d},...i}),l&&d?e.jsxRuntimeExports.jsx("span",{id:i.id&&`${i.id}-error-text`,"aria-invalid":!0,className:"text-destructive text-label-md -mt-1",children:l}):c?e.jsxRuntimeExports.jsx("span",{id:i.id&&`${i.id}-helper-text`,className:m.cn("text-label-md -mt-1",{"text-muted-foreground":!l&&!d,"text-destructive":l&&d,"text-neutral-700":i.disabled}),children:c}):null]}));N.displayName="PhoneInput";const v=f.forwardRef(({className:t,rounded:n="default",error:s,touched:o,size:r,...a},c)=>{const{"data-country":x,...l}=a;return e.jsxRuntimeExports.jsx(_.Input,{size:r,containerClassName:"w-full",className:m.cn("w-full",{"border-destructive":s&&o,"border-blue-800":o&&!s,"rounded-s-none rounded-e-lg":n!=="full","rounded-s-none rounded-e-full":n==="full","rounded-e-sm":r==="sm","rounded-e-md":r==="md","rounded-e-lg":r==="lg"},t),...l,ref:c})});v.displayName="InputComponent";const A=({disabled:t,value:n,options:s,onChange:o,size:r="md",rounded:a="default",error:c,touched:x})=>{const l=f.useRef(null),[d,i]=f.useState(""),[g,j]=f.useState(!1);return e.jsxRuntimeExports.jsxs(h.Popover,{open:g,modal:!0,onOpenChange:u=>{j(u),u&&i("")},children:[e.jsxRuntimeExports.jsx(h.PopoverTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{type:"button",className:m.cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-fit items-center justify-center min-w-0 border bg-transparent text-base transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm border-r-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:z-1",a==="default"?"rounded-e-none":"rounded-s-full rounded-e-none",{"outline-destructive":c&&x,"outline-blue-800":x&&!c,"text-label-md h-8 rounded-s-sm px-2 py-1":r==="sm","text-label-lg h-12 rounded-s-md px-3 py-1":r==="md","text-label-xl h-16 rounded-s-lg px-4 py-2":r==="lg"}),disabled:t,children:[e.jsxRuntimeExports.jsx(R,{country:n,countryName:n,disabled:t}),e.jsxRuntimeExports.jsx(y.IconComponent,{iconName:"IconChevronDown",className:m.cn("-mr-2 size-4 opacity-50",t?"hidden":"opacity-100")})]})}),e.jsxRuntimeExports.jsx(h.PopoverContent,{className:"w-[300px] p-0",children:e.jsxRuntimeExports.jsxs(p.Command,{children:[e.jsxRuntimeExports.jsx(p.CommandInput,{value:d,onValueChange:u=>{i(u),setTimeout(()=>{if(l.current){const b=l.current.querySelector("[data-radix-scroll-area-viewport]");b&&(b.scrollTop=0)}},0)},placeholder:"Search country..."}),e.jsxRuntimeExports.jsx(p.CommandList,{children:e.jsxRuntimeExports.jsxs(k.ScrollArea,{ref:l,className:"h-72",children:[e.jsxRuntimeExports.jsx(p.CommandEmpty,{children:"No country found."}),e.jsxRuntimeExports.jsx(p.CommandGroup,{children:s.map(({value:u,label:b})=>u?e.jsxRuntimeExports.jsx(D,{country:u,countryName:b,selectedCountry:n,onChange:o,onSelectComplete:()=>j(!1)},u):null)})]})})]})})]})},D=({country:t,countryName:n,selectedCountry:s,onChange:o,onSelectComplete:r})=>{const a=()=>{o(t),r()};return e.jsxRuntimeExports.jsxs(p.CommandItem,{className:"gap-2",onSelect:a,children:[e.jsxRuntimeExports.jsx(R,{country:t,countryName:n}),e.jsxRuntimeExports.jsx("span",{className:"flex-1 text-sm",children:n}),e.jsxRuntimeExports.jsx("span",{className:"text-foreground/50 text-sm",children:`+${E.getCountryCallingCode(t)}`}),e.jsxRuntimeExports.jsx(y.IconComponent,{iconName:"IconCheck",className:`ml-auto size-4 ${t===s?"opacity-100":"opacity-0"}`})]})},R=({country:t,countryName:n,disabled:s})=>{const o=q[t];return e.jsxRuntimeExports.jsx("span",{className:m.cn("bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-[4px] [&_svg:not([class*='size-'])]:size-full",{"opacity-50":s}),children:o&&e.jsxRuntimeExports.jsx(o,{title:n})})};exports.PhoneInput=N;

package/dist/components/phone-input.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as RPNInput from 'react-phone-number-input';
 type PhoneInputProps = Omit<React.ComponentProps<'input'>, 'onChange' | 'value' | 'ref'> & Omit<RPNInput.Props<typeof RPNInput.default>, 'onChange'> & {
     onChange?: (value: RPNInput.Value) => void;
-    variant?: 'sm' | 'md' | 'lg';
+    size?: 'sm' | 'md' | 'lg';
     rounded?: 'default' | 'full';
     label?: string;
     helperText?: string;

package/dist/components/phone-input.es.js

@@ -1,204 +1,205 @@
 import { j as e } from "../jsx-runtime-DywqP_6a.js";
 import * as f from "react";
-import * as g from "react-phone-number-input";
-import I from "react-phone-number-input/flags";
-import S from "react-phone-number-input/locale/en";
-import b from "react-phone-number-input/locale/es";
-import v from "react-phone-number-input/locale/fr";
-import { B as P } from "../button-DcSOP6sn.js";
-import { C as w, d as R, f as z, b as O, c as $, e as E } from "../command-pED95x7-.js";
+import * as j from "react-phone-number-input";
+import N from "react-phone-number-input/flags";
+import v from "react-phone-number-input/locale/en";
+import I from "react-phone-number-input/locale/es";
+import w from "react-phone-number-input/locale/fr";
+import { C as S, d as P, f as R, b as O, c as $, e as E } from "../command-pED95x7-.js";
 import { I as F } from "../input-CUSAqhCy.js";
 import { L } from "../label-_kG7WBoJ.js";
-import { P as V, c as A, b as B } from "../popover-CHAUhJda.js";
+import { P as V, c as k, b as A } from "../popover-CHAUhJda.js";
 import { S as T } from "../scroll-area-DwBiu3Jn.js";
 import { c as u } from "../index-CRiPKpXj.js";
-import { I as N } from "../icon-component-CxQsODCa.js";
+import { I as C } from "../icon-component-CxQsODCa.js";
 const _ = f.forwardRef(
   ({
-    className: n,
-    onChange: s,
-    value: r,
-    variant: t = "md",
+    className: t,
+    onChange: n,
+    value: a,
+    size: s = "md",
     rounded: o = "default",
-    label: m,
-    helperText: c,
+    label: i,
+    helperText: m,
     locale: p = "en",
     error: l,
-    touched: i,
-    ...a
-  }, j) => (console.log(t), /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-3", children: [
-    m && /* @__PURE__ */ e.jsx(
+    touched: c,
+    ...r
+  }, g) => /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-3", children: [
+    i && /* @__PURE__ */ e.jsx(
       L,
       {
-        htmlFor: a.id,
+        htmlFor: r.id,
         className: u({
-          "text-neutral-700": a.disabled
+          "text-neutral-700": r.disabled
         }),
-        children: m
+        children: i
       }
     ),
     /* @__PURE__ */ e.jsx(
-      g.default,
+      j.default,
       {
-        ref: j,
-        className: u("flex", n),
-        flagComponent: C,
-        countrySelectComponent: k,
+        ref: g,
+        className: u("flex", t),
+        flagComponent: h,
+        countrySelectComponent: q,
         inputComponent: y,
         smartCaret: !1,
-        labels: p === "es" ? b : p === "fr" ? v : S,
-        value: r || void 0,
-        onChange: (x) => s?.(x || ""),
+        labels: p === "es" ? I : p === "fr" ? w : v,
+        value: a || void 0,
+        onChange: (x) => n?.(x || ""),
         countrySelectProps: {
-          variant: t,
+          size: s,
           rounded: o,
           error: l,
-          touched: i
+          touched: c
         },
         numberInputProps: {
-          variant: t,
+          size: s,
           rounded: o,
           error: l,
-          touched: i
+          touched: c
         },
-        ...a
+        ...r
       }
     ),
-    l && i ? /* @__PURE__ */ e.jsx(
+    l && c ? /* @__PURE__ */ e.jsx(
       "span",
       {
-        id: a.id && `${a.id}-error-text`,
+        id: r.id && `${r.id}-error-text`,
         "aria-invalid": !0,
         className: "text-destructive text-label-md -mt-1",
         children: l
       }
-    ) : c ? /* @__PURE__ */ e.jsx(
+    ) : m ? /* @__PURE__ */ e.jsx(
       "span",
       {
-        id: a.id && `${a.id}-helper-text`,
+        id: r.id && `${r.id}-helper-text`,
         className: u("text-label-md -mt-1", {
-          "text-muted-foreground": !l && !i,
-          "text-destructive": l && i,
-          "text-neutral-700": a.disabled
+          "text-muted-foreground": !l && !c,
+          "text-destructive": l && c,
+          "text-neutral-700": r.disabled
         }),
-        children: c
+        children: m
       }
     ) : null
-  ] }))
+  ] })
 );
 _.displayName = "PhoneInput";
 const y = f.forwardRef(
-  ({ className: n, rounded: s = "default", error: r, touched: t, variant: o, ...m }, c) => {
-    const { "data-country": p, ...l } = m;
+  ({ className: t, rounded: n = "default", error: a, touched: s, size: o, ...i }, m) => {
+    const { "data-country": p, ...l } = i;
     return /* @__PURE__ */ e.jsx(
       F,
       {
-        variant: o,
+        size: o,
+        containerClassName: "w-full",
         className: u(
-          s === "default" ? "rounded-s-none rounded-e-lg" : "rounded-s-none rounded-e-full",
+          "w-full",
           {
-            "border-destructive": r && t,
-            "border-blue-800": t && !r,
+            "border-destructive": a && s,
+            "border-blue-800": s && !a,
+            "rounded-s-none rounded-e-lg": n !== "full",
+            "rounded-s-none rounded-e-full": n === "full",
             "rounded-e-sm": o === "sm",
             "rounded-e-md": o === "md",
             "rounded-e-lg": o === "lg"
           },
-          n
+          t
         ),
         ...l,
-        ref: c
+        ref: m
       }
     );
   }
 );
 y.displayName = "InputComponent";
-const k = ({
-  disabled: n,
-  value: s,
-  options: r,
-  onChange: t,
-  variant: o = "md",
-  rounded: m = "default",
-  error: c,
+const q = ({
+  disabled: t,
+  value: n,
+  options: a,
+  onChange: s,
+  size: o = "md",
+  rounded: i = "default",
+  error: m,
   touched: p
 }) => {
-  const l = f.useRef(null), [i, a] = f.useState(""), [j, x] = f.useState(!1);
+  const l = f.useRef(null), [c, r] = f.useState(""), [g, x] = f.useState(!1);
   return /* @__PURE__ */ e.jsxs(
     V,
     {
-      open: j,
+      open: g,
       modal: !0,
       onOpenChange: (d) => {
-        x(d), d && a("");
+        x(d), d && r("");
       },
       children: [
-        /* @__PURE__ */ e.jsx(A, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
-          P,
+        /* @__PURE__ */ e.jsx(k, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
+          "button",
           {
             type: "button",
-            variant: "outline",
             className: u(
-              "outline-r-0 outline-input text-secondary flex gap-1 px-3 focus:z-10",
-              m === "default" ? "rounded-e-none" : "rounded-s-full rounded-e-none",
+              "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-fit items-center justify-center min-w-0 border bg-transparent text-base transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm border-r-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:z-1",
+              i === "default" ? "rounded-e-none" : "rounded-s-full rounded-e-none",
               {
-                "outline-destructive": c && p,
-                "outline-blue-800": p && !c,
-                "h-8 rounded-s-sm": o === "sm",
-                "h-12 rounded-s-md": o === "md",
-                "h-16 rounded-s-lg": o === "lg"
+                "outline-destructive": m && p,
+                "outline-blue-800": p && !m,
+                "text-label-md h-8 rounded-s-sm px-2 py-1": o === "sm",
+                "text-label-lg h-12 rounded-s-md px-3 py-1": o === "md",
+                "text-label-xl h-16 rounded-s-lg px-4 py-2": o === "lg"
               }
             ),
-            disabled: n,
+            disabled: t,
             children: [
               /* @__PURE__ */ e.jsx(
-                C,
+                h,
                 {
-                  country: s,
-                  countryName: s,
-                  disabled: n
+                  country: n,
+                  countryName: n,
+                  disabled: t
                 }
               ),
               /* @__PURE__ */ e.jsx(
-                N,
+                C,
                 {
                   iconName: "IconChevronDown",
                   className: u(
                     "-mr-2 size-4 opacity-50",
-                    n ? "hidden" : "opacity-100"
+                    t ? "hidden" : "opacity-100"
                   )
                 }
               )
             ]
           }
         ) }),
-        /* @__PURE__ */ e.jsx(B, { className: "w-[300px] p-0", children: /* @__PURE__ */ e.jsxs(w, { children: [
+        /* @__PURE__ */ e.jsx(A, { className: "w-[300px] p-0", children: /* @__PURE__ */ e.jsxs(S, { children: [
           /* @__PURE__ */ e.jsx(
-            R,
+            P,
             {
-              value: i,
+              value: c,
               onValueChange: (d) => {
-                a(d), setTimeout(() => {
+                r(d), setTimeout(() => {
                   if (l.current) {
-                    const h = l.current.querySelector(
+                    const b = l.current.querySelector(
                       "[data-radix-scroll-area-viewport]"
                     );
-                    h && (h.scrollTop = 0);
+                    b && (b.scrollTop = 0);
                   }
                 }, 0);
               },
               placeholder: "Search country..."
             }
           ),
-          /* @__PURE__ */ e.jsx(z, { children: /* @__PURE__ */ e.jsxs(T, { ref: l, className: "h-72", children: [
+          /* @__PURE__ */ e.jsx(R, { children: /* @__PURE__ */ e.jsxs(T, { ref: l, className: "h-72", children: [
             /* @__PURE__ */ e.jsx(O, { children: "No country found." }),
-            /* @__PURE__ */ e.jsx($, { children: r.map(
-              ({ value: d, label: h }) => d ? /* @__PURE__ */ e.jsx(
-                q,
+            /* @__PURE__ */ e.jsx($, { children: a.map(
+              ({ value: d, label: b }) => d ? /* @__PURE__ */ e.jsx(
+                D,
                 {
                   country: d,
-                  countryName: h,
-                  selectedCountry: s,
-                  onChange: t,
+                  countryName: b,
+                  selectedCountry: n,
+                  onChange: s,
                   onSelectComplete: () => x(!1)
                 },
                 d
@@ -209,42 +210,42 @@ const k = ({
       ]
     }
   );
-}, q = ({
-  country: n,
-  countryName: s,
-  selectedCountry: r,
-  onChange: t,
+}, D = ({
+  country: t,
+  countryName: n,
+  selectedCountry: a,
+  onChange: s,
   onSelectComplete: o
 }) => {
-  const m = () => {
-    t(n), o();
+  const i = () => {
+    s(t), o();
   };
-  return /* @__PURE__ */ e.jsxs(E, { className: "gap-2", onSelect: m, children: [
-    /* @__PURE__ */ e.jsx(C, { country: n, countryName: s }),
-    /* @__PURE__ */ e.jsx("span", { className: "flex-1 text-sm", children: s }),
-    /* @__PURE__ */ e.jsx("span", { className: "text-foreground/50 text-sm", children: `+${g.getCountryCallingCode(n)}` }),
+  return /* @__PURE__ */ e.jsxs(E, { className: "gap-2", onSelect: i, children: [
+    /* @__PURE__ */ e.jsx(h, { country: t, countryName: n }),
+    /* @__PURE__ */ e.jsx("span", { className: "flex-1 text-sm", children: n }),
+    /* @__PURE__ */ e.jsx("span", { className: "text-foreground/50 text-sm", children: `+${j.getCountryCallingCode(t)}` }),
     /* @__PURE__ */ e.jsx(
-      N,
+      C,
       {
         iconName: "IconCheck",
-        className: `ml-auto size-4 ${n === r ? "opacity-100" : "opacity-0"}`
+        className: `ml-auto size-4 ${t === a ? "opacity-100" : "opacity-0"}`
       }
     )
   ] });
-}, C = ({
-  country: n,
-  countryName: s,
-  disabled: r
+}, h = ({
+  country: t,
+  countryName: n,
+  disabled: a
 }) => {
-  const t = I[n];
+  const s = N[t];
   return /* @__PURE__ */ e.jsx(
     "span",
     {
       className: u(
         "bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-[4px] [&_svg:not([class*='size-'])]:size-full",
-        { "opacity-50": r }
+        { "opacity-50": a }
       ),
-      children: t && /* @__PURE__ */ e.jsx(t, { title: s })
+      children: s && /* @__PURE__ */ e.jsx(s, { title: n })
     }
   );
 };

package/dist/ui.css

@@ -1,6 +1,8 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
+@source "./**/*.{js,jsx,ts,tsx}";
+
 @custom-variant dark (&:is(.dark *));
 
 @custom-variant fixed (&:is(.layout-fixed *));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clasing/ui",
-  "version": "0.1.129",
+  "version": "0.1.130",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",