@clasing/ui 2.6.0 → 2.7.1

package/dist/components/navigation-menu.es.js

@@ -1,6 +1,6 @@
-import { j as e, c as o } from "../index-BCEGphus.js";
+import { j as e, c as o } from "../index-CwFDnnd3.js";
 import * as n from "@radix-ui/react-navigation-menu";
-import { c as s } from "../index-DEha_UuN.js";
+import { c as s } from "../index-CnqageB2.js";
 import { CaretDownIcon as u } from "@phosphor-icons/react";
 function v({
   className: t,
@@ -14,7 +14,10 @@ function v({
       "data-slot": "navigation-menu",
       "data-viewport": i,
       className: o(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        `
+          group/navigation-menu relative flex max-w-max flex-1 items-center
+          justify-center
+        `,
         t
       ),
       ...r,
@@ -55,7 +58,18 @@ function p({
   );
 }
 const d = s(
-  "group bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 paragraph-sm inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 font-medium transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50"
+  `
+    group inline-flex h-9 w-max items-center justify-center rounded-md
+    bg-background px-4 py-2 paragraph-sm font-medium
+    transition-[color,box-shadow] outline-none
+    hover:bg-accent hover:text-accent-foreground
+    focus:bg-accent focus:text-accent-foreground
+    focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1
+    disabled:pointer-events-none disabled:opacity-50
+    data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground
+    data-[state=open]:hover:bg-accent
+    data-[state=open]:focus:bg-accent
+  `
 );
 function x({
   className: t,
@@ -74,7 +88,10 @@ function x({
         /* @__PURE__ */ e.jsx(
           u,
           {
-            className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+            className: `\r
+          relative top-px ml-1 size-3 transition duration-300\r
+          group-data-[state=open]:rotate-180\r
+        `,
             "aria-hidden": "true"
           }
         )
@@ -91,8 +108,35 @@ function w({
     {
       "data-slot": "navigation-menu-content",
       className: o(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        `
+          top-0 left-0 w-full p-2 pr-2.5
+          data-[motion=from-end]:slide-in-from-right-52
+          data-[motion=from-start]:slide-in-from-left-52
+          data-[motion=to-end]:slide-out-to-right-52
+          data-[motion=to-start]:slide-out-to-left-52
+          data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in
+          data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out
+          md:absolute md:w-auto
+        `,
+        `
+          group-data-[viewport=false]/navigation-menu:top-full
+          group-data-[viewport=false]/navigation-menu:mt-1.5
+          group-data-[viewport=false]/navigation-menu:overflow-hidden
+          group-data-[viewport=false]/navigation-menu:rounded-md
+          group-data-[viewport=false]/navigation-menu:border
+          group-data-[viewport=false]/navigation-menu:bg-popover
+          group-data-[viewport=false]/navigation-menu:text-popover-foreground
+          group-data-[viewport=false]/navigation-menu:shadow-sm
+          group-data-[viewport=false]/navigation-menu:duration-200
+          **:data-[slot=navigation-menu-link]:focus:ring-0
+          **:data-[slot=navigation-menu-link]:focus:outline-none
+          group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out
+          group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0
+          group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95
+          group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in
+          group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0
+          group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95
+        `,
         t
       ),
       ...a
@@ -114,7 +158,14 @@ function l({
         {
           "data-slot": "navigation-menu-viewport",
           className: o(
-            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border shadow md:w-(--radix-navigation-menu-viewport-width)",
+            `
+            relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full
+            origin-top overflow-hidden rounded-md border bg-popover
+            text-popover-foreground shadow-sm
+            data-[state=closed]:animate-out data-[state=closed]:zoom-out-95
+            data-[state=open]:animate-in data-[state=open]:zoom-in-90
+            md:w-(--radix-navigation-menu-viewport-width)
+          `,
             t
           ),
           ...a
@@ -132,7 +183,19 @@ function b({
     {
       "data-slot": "navigation-menu-link",
       className: o(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground paragraph-sm flex flex-col gap-1 rounded-sm p-2 transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        `
+          flex flex-col gap-1 rounded-sm p-2 paragraph-sm transition-all
+          outline-none
+          hover:bg-accent hover:text-accent-foreground
+          focus:bg-accent focus:text-accent-foreground
+          focus-visible:ring-[3px] focus-visible:ring-ring/50
+          focus-visible:outline-1
+          data-[active=true]:bg-accent/50
+          data-[active=true]:text-accent-foreground
+          data-[active=true]:hover:bg-accent
+          data-[active=true]:focus:bg-accent
+          [&_svg:not([class*='size-'])]:size-4
+        `,
         t
       ),
       ...a
@@ -148,11 +211,22 @@ function h({
     {
       "data-slot": "navigation-menu-indicator",
       className: o(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+        `
+          top-full z-1 flex h-1.5 items-end justify-center overflow-hidden
+          data-[state=hidden]:animate-out data-[state=hidden]:fade-out
+          data-[state=visible]:animate-in data-[state=visible]:fade-in
+        `,
         t
       ),
       ...a,
-      children: /* @__PURE__ */ e.jsx("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" })
+      children: /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: `\r
+          relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md\r
+        `
+        }
+      )
     }
   );
 }

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

@@ -1 +1,21 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-9HRzXEQf.cjs"),c=require("../command-CrtCQpi_.cjs"),N=require("../input-DDgYyRSP.cjs"),x=require("../popover-Cj78cvz1.cjs"),S=require("../scroll-area-D74XszlE.cjs"),h=require("@phosphor-icons/react"),w=require("react"),I=require("react-phone-number-input"),P=require("react-phone-number-input/flags"),q=require("react-phone-number-input/locale/en"),O=require("react-phone-number-input/locale/es"),_=require("react-phone-number-input/locale/fr");function b(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>n[r]})}}return t.default=n,Object.freeze(t)}const d=b(w),R=b(I),y=d.forwardRef(({className:n,onChange:t,value:r,size:o="md",rounded:s="default",locale:l="en",...i},p)=>e.jsxRuntimeExports.jsx(R.default,{ref:p,className:e.cn("flex",n),flagComponent:f,countrySelectComponent:T,inputComponent:C,smartCaret:!1,labels:l==="es"?O:l==="fr"?_:q,value:r||void 0,onChange:u=>t?.(u||""),countrySelectProps:{size:o,rounded:s},numberInputProps:{size:o,rounded:s},...i}));y.displayName="PhoneInput";const C=d.forwardRef(({className:n,rounded:t="default",error:r,touched:o,size:s,...l},i)=>{const{"data-country":p,...u}=l;return e.jsxRuntimeExports.jsx(N.Input,{size:s,className:e.cn("w-full",{"border-destructive":r&&o,"border-blue-800":o&&!r,"rounded-s-none rounded-e-lg":t!=="full","rounded-s-none rounded-e-full":t==="full","rounded-e-sm":s==="sm","rounded-e-md":s==="md","rounded-e-lg":s==="lg"},n),...u,ref:i})});C.displayName="InputComponent";const T=({disabled:n,value:t,options:r,onChange:o,size:s="md",rounded:l="default",error:i,touched:p})=>{const u=d.useRef(null),[E,j]=d.useState(""),[v,g]=d.useState(!1);return e.jsxRuntimeExports.jsxs(x.Popover,{open:v,modal:!0,onOpenChange:a=>{g(a),a&&j("")},children:[e.jsxRuntimeExports.jsx(x.PopoverTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{type:"button",className:e.cn("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 file:paragraph-sm md:paragraph-sm paragraph-md flex w-fit min-w-0 items-center justify-center border border-r-0 bg-transparent transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-semibold focus-visible:z-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",l==="default"?"rounded-e-none":"rounded-s-full rounded-e-none",{"outline-destructive":i&&p,"outline-blue-800":p&&!i,"label-md h-8 rounded-s-sm px-2 py-1":s==="sm","label-lg h-12 rounded-s-md px-3 py-1":s==="md","label-xl h-16 rounded-s-lg px-4 py-2":s==="lg"}),disabled:n,children:[e.jsxRuntimeExports.jsx(f,{country:t,countryName:t,disabled:n}),e.jsxRuntimeExports.jsx(h.CaretDownIcon,{className:e.cn("-mr-2 size-4 opacity-50",n?"hidden":"opacity-100")})]})}),e.jsxRuntimeExports.jsx(x.PopoverContent,{className:"w-[300px] p-0",children:e.jsxRuntimeExports.jsxs(c.Command,{children:[e.jsxRuntimeExports.jsx(c.CommandInput,{value:E,onValueChange:a=>{j(a),setTimeout(()=>{if(u.current){const m=u.current.querySelector("[data-radix-scroll-area-viewport]");m&&(m.scrollTop=0)}},0)},placeholder:"Search country..."}),e.jsxRuntimeExports.jsx(c.CommandList,{children:e.jsxRuntimeExports.jsxs(S.ScrollArea,{ref:u,className:"h-72",children:[e.jsxRuntimeExports.jsx(c.CommandEmpty,{children:"No country found."}),e.jsxRuntimeExports.jsx(c.CommandGroup,{children:r.map(({value:a,label:m})=>a?e.jsxRuntimeExports.jsx(k,{country:a,countryName:m,selectedCountry:t,onChange:o,onSelectComplete:()=>g(!1)},a):null)})]})})]})})]})},k=({country:n,countryName:t,selectedCountry:r,onChange:o,onSelectComplete:s})=>{const l=()=>{o(n),s()};return e.jsxRuntimeExports.jsxs(c.CommandItem,{className:"gap-2",onSelect:l,children:[e.jsxRuntimeExports.jsx(f,{country:n,countryName:t}),e.jsxRuntimeExports.jsx("span",{className:"paragraph-sm flex-1",children:t}),e.jsxRuntimeExports.jsx("span",{className:"text-foreground/50 paragraph-sm",children:`+${R.getCountryCallingCode(n)}`}),e.jsxRuntimeExports.jsx(h.CheckIcon,{className:`ml-auto size-4 ${n===r?"opacity-100":"opacity-0"}`})]})},f=({country:n,countryName:t,disabled:r})=>{const o=P[n];return e.jsxRuntimeExports.jsx("span",{className:e.cn("bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-[4px] [&_svg:not([class*='size-'])]:size-full",{"opacity-50":r}),children:o&&e.jsxRuntimeExports.jsx(o,{title:t})})};exports.PhoneInput=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../index-Bfismeyo.cjs"),m=require("../command-DNjJookC.cjs"),D=require("../input-u-OTHOPe.cjs"),C=require("../popover-A1-x5q-F.cjs"),M=require("../scroll-area-DFyIQG6Z.cjs"),S=require("@phosphor-icons/react"),F=require("react"),L=require("react-phone-number-input"),H=require("react-phone-number-input/flags"),G=require("react-phone-number-input/locale/en"),W=require("react-phone-number-input/locale/es"),$=require("react-phone-number-input/locale/fr");function N(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const s=N(F),I=N(L);function z(t,r){const[n,o]=s.useState(t);return s.useEffect(()=>{const l=setTimeout(()=>{o(t)},r);return()=>{clearTimeout(l)}},[t,r]),n}const P=s.forwardRef(({className:t,onChange:r,value:n,size:o="md",rounded:l="default",locale:c="en",...u},d)=>e.jsxRuntimeExports.jsx(I.default,{ref:d,className:e.cn("flex",t),flagComponent:B,countrySelectComponent:O,inputComponent:q,smartCaret:!1,labels:c==="es"?W:c==="fr"?$:G,value:n||void 0,onChange:f=>r?.(f||""),countrySelectProps:{size:o,rounded:l,...u},numberInputProps:{size:o,rounded:l,...u},...u}));P.displayName="PhoneInput";const q=s.forwardRef(({className:t,rounded:r="default",size:n,...o},l)=>{const{"data-country":c,...u}=o;return e.jsxRuntimeExports.jsx(D.Input,{size:n,className:e.cn("w-full",{"rounded-s-none rounded-e-lg":r!=="full","rounded-s-none rounded-e-full":r==="full","rounded-e-sm":n==="sm","rounded-e-md":n==="md","rounded-e-lg":n==="lg"},t),...u,ref:l})});q.displayName="InputComponent";const O=s.memo(({disabled:t,value:r,options:n,onChange:o,size:l="md",rounded:c="default",...u})=>{const d=s.useRef(null),[f,E]=s.useState(""),[b,R]=s.useState(!1),[y,v]=s.useState(20),x=z(f,100),p=s.useMemo(()=>x?n.filter(({label:a,value:i})=>i&&(a.toLowerCase().includes(x.toLowerCase())||i.toLowerCase().includes(x.toLowerCase()))):n,[n,x]),g=s.useMemo(()=>p.slice(0,y),[p,y]);return s.useEffect(()=>{v(20)},[x]),s.useEffect(()=>{if(!b)return;const a=setTimeout(()=>{if(!d.current)return;const h=d.current.querySelector("[data-radix-scroll-area-viewport]");if(!h)return;const w=()=>{const{scrollTop:_,scrollHeight:V,clientHeight:k}=h;_+k>=V-100&&v(A=>Math.min(A+20,p.length))};h.addEventListener("scroll",w,{passive:!0}),window.__scrollCleanup=()=>{h.removeEventListener("scroll",w)}},100);return()=>{clearTimeout(a);const i=window.__scrollCleanup;i&&i()}},[b,p.length]),e.jsxRuntimeExports.jsxs(C.Popover,{open:b,modal:!0,onOpenChange:a=>{R(a),a&&E("")},children:[e.jsxRuntimeExports.jsx(C.PopoverTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{type:"button","aria-invalid":u["aria-invalid"],className:e.cn(`
+                flex w-fit min-w-0 items-center justify-center border border-r-0
+                border-input bg-transparent paragraph-md
+                transition-[color,box-shadow] outline-none
+                selection:bg-primary selection:text-primary-foreground
+                file:inline-flex file:border-0 file:bg-transparent
+                file:paragraph-sm file:font-semibold file:text-foreground
+                placeholder:text-muted-foreground
+                focus-visible:z-1 focus-visible:border-ring
+                focus-visible:ring-[3px] focus-visible:ring-ring/50
+                disabled:pointer-events-none disabled:cursor-not-allowed
+                disabled:opacity-50
+                aria-invalid:border-destructive-foreground
+                aria-invalid:ring-destructive-foreground/20
+                md:paragraph-sm
+                dark:bg-input/30
+                dark:aria-invalid:ring-destructive-foreground/40
+              `,c==="default"?"rounded-e-none":"rounded-s-full rounded-e-none",{"h-8 rounded-s-sm px-2 py-1 label-md":l==="sm","h-12 rounded-s-md px-3 py-1 label-lg":l==="md","h-16 rounded-s-lg px-4 py-2 label-xl":l==="lg"}),disabled:t,...u,children:[e.jsxRuntimeExports.jsx(j,{country:r,countryName:r,disabled:t}),e.jsxRuntimeExports.jsx(S.CaretDownIcon,{className:e.cn("-mr-2 size-4 opacity-50",t?"hidden":"opacity-100")})]})}),e.jsxRuntimeExports.jsx(C.PopoverContent,{className:"w-[300px] p-0",children:e.jsxRuntimeExports.jsxs(m.Command,{children:[e.jsxRuntimeExports.jsx(m.CommandInput,{value:f,onValueChange:a=>{E(a),setTimeout(()=>{if(d.current){const i=d.current.querySelector("[data-radix-scroll-area-viewport]");i&&(i.scrollTop=0)}},0)},placeholder:"Search country..."}),e.jsxRuntimeExports.jsx(m.CommandList,{children:e.jsxRuntimeExports.jsxs(M.ScrollArea,{ref:d,className:"h-72",children:[e.jsxRuntimeExports.jsx(m.CommandEmpty,{children:g.length===0&&n.length>20?"Too many results. Please refine your search.":"No country found."}),e.jsxRuntimeExports.jsxs(m.CommandGroup,{children:[g.map(({value:a,label:i})=>a?e.jsxRuntimeExports.jsx(T,{country:a,countryName:i,selectedCountry:r,onChange:o,onSelectComplete:()=>R(!1)},a):null),g.length<p.length&&e.jsxRuntimeExports.jsxs(m.CommandItem,{disabled:!0,className:"paragraph-xs text-muted-foreground",children:["Showing ",g.length," of"," ",p.length," countries"]})]})]})})]})})]})});O.displayName="CountrySelect";const T=s.memo(({country:t,countryName:r,selectedCountry:n,onChange:o,onSelectComplete:l})=>{const c=s.useCallback(()=>{o(t),l()},[t,o,l]);return e.jsxRuntimeExports.jsxs(m.CommandItem,{className:"gap-2",onSelect:c,children:[e.jsxRuntimeExports.jsx(j,{country:t,countryName:r}),e.jsxRuntimeExports.jsx("span",{className:"flex-1 paragraph-sm",children:r}),e.jsxRuntimeExports.jsx("span",{className:"paragraph-sm text-foreground/50",children:`+${I.getCountryCallingCode(t)}`}),e.jsxRuntimeExports.jsx(S.CheckIcon,{className:e.cn("ml-auto size-4",t===n?"opacity-100":"opacity-0")})]})});T.displayName="CountrySelectOption";const j=s.memo(({country:t,countryName:r,disabled:n})=>{const o=H[t];return e.jsxRuntimeExports.jsx("span",{className:e.cn(`
+            flex h-4 w-6 overflow-hidden rounded-[4px] bg-foreground/20
+            [&_svg:not([class*='size-'])]:size-full
+          `,{"opacity-50":n}),children:o?e.jsxRuntimeExports.jsx(o,{title:r}):null})}),B=t=>e.jsxRuntimeExports.jsx(j,{...t});j.displayName="FlagComponent";exports.PhoneInput=P;