@clasing/ui 2.0.1 → 2.0.3

package/dist/components/calendar.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../calendar-gxLdKgjb.cjs");exports.Calendar=e.Calendar;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../jsx-runtime-BuHQgaKs.cjs"),y=require("react"),m=require("react-day-picker"),p=require("../button-BnSM-lrr.cjs"),g=require("../icon-component-D5YssRbR.cjs"),e=require("../index-DoxiiusW.cjs");function h(r){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const n in r)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(r,n);Object.defineProperty(d,n,s.get?s:{enumerable:!0,get:()=>r[n]})}}return d.default=r,Object.freeze(d)}const f=h(y);function _({className:r,classNames:d,showOutsideDays:n=!0,captionLayout:s="label",buttonVariant:l="inverse",formatters:i,components:x,...b}){const t=m.getDefaultClassNames();return o.jsxRuntimeExports.jsx(m.DayPicker,{showOutsideDays:n,className:e.cn("bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,r),captionLayout:s,formatters:{formatMonthDropdown:a=>a.toLocaleString("default",{month:"short"}),...i},classNames:{root:e.cn("w-fit",t.root),months:e.cn("flex gap-4 flex-col md:flex-row relative",t.months),month:e.cn("flex flex-col w-full gap-4",t.month),nav:e.cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",t.nav),button_previous:e.cn(p.buttonStyles({variant:l}),"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",t.button_previous),button_next:e.cn(p.buttonStyles({variant:l}),"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",t.button_next),month_caption:e.cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",t.month_caption),dropdowns:e.cn("w-full flex items-center text-paragraph-sm font-medium justify-center h-(--cell-size) gap-1.5",t.dropdowns),dropdown_root:e.cn("relative has-focus:border-ring border border-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",t.dropdown_root),dropdown:e.cn("absolute bg-popover inset-0 opacity-0",t.dropdown),caption_label:e.cn("select-none font-medium",s==="label"?"text-paragraph-sm":"rounded-md pl-2 pr-1 flex items-center gap-1 text-paragraph-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",t.caption_label),table:"w-full border-collapse",weekdays:e.cn("flex",t.weekdays),weekday:e.cn("text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",t.weekday),week:e.cn("flex w-full mt-2",t.week),week_number_header:e.cn("select-none w-(--cell-size)",t.week_number_header),week_number:e.cn("text-[0.8rem] select-none text-muted-foreground",t.week_number),day:e.cn("relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",t.day),range_start:e.cn("rounded-l-md bg-accent",t.range_start),range_middle:e.cn("rounded-none",t.range_middle),range_end:e.cn("rounded-r-md bg-accent",t.range_end),today:e.cn("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",t.today),outside:e.cn("text-muted-foreground aria-selected:text-muted-foreground",t.outside),disabled:e.cn("text-muted-foreground opacity-50",t.disabled),hidden:e.cn("invisible",t.hidden),...d},components:{Root:({className:a,rootRef:c,...u})=>o.jsxRuntimeExports.jsx("div",{"data-slot":"calendar",ref:c,className:e.cn(a),...u}),Chevron:({className:a,orientation:c,...u})=>c==="left"?o.jsxRuntimeExports.jsx(g.IconComponent,{iconName:"IconChevronLeft",className:e.cn("size-4",a),...u}):c==="right"?o.jsxRuntimeExports.jsx(g.IconComponent,{iconName:"IconChevronRight",className:e.cn("size-4",a),...u}):o.jsxRuntimeExports.jsx(g.IconComponent,{iconName:"IconChevronDown",className:e.cn("size-4",a),...u}),DayButton:v,WeekNumber:({children:a,...c})=>o.jsxRuntimeExports.jsx("td",{...c,children:o.jsxRuntimeExports.jsx("div",{className:"flex size-(--cell-size) items-center justify-center text-center",children:a})}),...x},...b})}function v({className:r,day:d,modifiers:n,...s}){const l=m.getDefaultClassNames(),i=f.useRef(null);return f.useEffect(()=>{n.focused&&i.current?.focus()},[n.focused]),o.jsxRuntimeExports.jsx(p.Button,{ref:i,variant:"inverse",size:"sm","data-day":d.date.toLocaleDateString(),"data-selected-single":n.selected&&!n.range_start&&!n.range_end&&!n.range_middle,"data-range-start":n.range_start,"data-range-end":n.range_end,"data-range-middle":n.range_middle,className:e.cn("data-[selected-single=true]:bg-secondary data-[selected-single=true]:text-secondary-foreground data-[range-middle=true]:bg-blue-050 data-[range-start=true]:bg-secondary data-[range-start=true]:text-secondary-foreground data-[range-end=true]:bg-secondary data-[range-end=true]:text-secondary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground data-[selected-single=true]:hover:bg-secondary/80 data-[selected-single=true]:hover:text-secondary-foreground data-[range-start=true]:hover:bg-secondary/80 data-[range-end=true]:hover:bg-secondary/80 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 rounded-md p-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-middle=true]:text-blue-800 data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",l.day,r),...s})}exports.Calendar=_;

package/dist/components/calendar.d.ts

@@ -1,15 +1,8 @@
-import 'react-day-picker/dist/style.css';
-export interface ICalendarProps {
-    locale?: 'enGB' | 'enUS' | 'es' | 'fr';
-    disabledDates?: string | string[] | Date | Date[] | undefined;
-    enabledDates?: string | string[] | Date | Date[] | undefined;
-    dropdownsSelectors?: boolean;
-    hideNavigation?: boolean;
-    showOutsideDays?: boolean;
-    minDate?: Date;
-    maxDate?: Date;
-    value?: string;
-    onChange?: (value: string | undefined) => void | undefined;
-    className?: string;
-}
-export declare const Calendar: React.FC<ICalendarProps>;
+import * as React from 'react';
+import { DayButton, DayPicker } from 'react-day-picker';
+import { Button } from '@/components/button';
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}): import("react/jsx-runtime").JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/components/calendar.es.js

@@ -1,4 +1,190 @@
-import { C as e } from "../calendar-DA08oJl2.js";
+import { j as n } from "../jsx-runtime-DywqP_6a.js";
+import * as m from "react";
+import { getDefaultClassNames as p, DayPicker as y } from "react-day-picker";
+import { c as f, B as h } from "../button-C5IBh3Tr.js";
+import { I as g } from "../icon-component-CxQsODCa.js";
+import { c as e } from "../index-CRiPKpXj.js";
+function k({
+  className: c,
+  classNames: i,
+  showOutsideDays: a = !0,
+  captionLayout: s = "label",
+  buttonVariant: l = "inverse",
+  formatters: u,
+  components: x,
+  ...b
+}) {
+  const t = p();
+  return /* @__PURE__ */ n.jsx(
+    y,
+    {
+      showOutsideDays: a,
+      className: e(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        c
+      ),
+      captionLayout: s,
+      formatters: {
+        formatMonthDropdown: (r) => r.toLocaleString("default", { month: "short" }),
+        ...u
+      },
+      classNames: {
+        root: e("w-fit", t.root),
+        months: e(
+          "flex gap-4 flex-col md:flex-row relative",
+          t.months
+        ),
+        month: e("flex flex-col w-full gap-4", t.month),
+        nav: e(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          t.nav
+        ),
+        button_previous: e(
+          f({ variant: l }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          t.button_previous
+        ),
+        button_next: e(
+          f({ variant: l }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          t.button_next
+        ),
+        month_caption: e(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          t.month_caption
+        ),
+        dropdowns: e(
+          "w-full flex items-center text-paragraph-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          t.dropdowns
+        ),
+        dropdown_root: e(
+          "relative has-focus:border-ring border border-input has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          t.dropdown_root
+        ),
+        dropdown: e(
+          "absolute bg-popover inset-0 opacity-0",
+          t.dropdown
+        ),
+        caption_label: e(
+          "select-none font-medium",
+          s === "label" ? "text-paragraph-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-paragraph-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          t.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: e("flex", t.weekdays),
+        weekday: e(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          t.weekday
+        ),
+        week: e("flex w-full mt-2", t.week),
+        week_number_header: e(
+          "select-none w-(--cell-size)",
+          t.week_number_header
+        ),
+        week_number: e(
+          "text-[0.8rem] select-none text-muted-foreground",
+          t.week_number
+        ),
+        day: e(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          t.day
+        ),
+        range_start: e(
+          "rounded-l-md bg-accent",
+          t.range_start
+        ),
+        range_middle: e("rounded-none", t.range_middle),
+        range_end: e("rounded-r-md bg-accent", t.range_end),
+        today: e(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          t.today
+        ),
+        outside: e(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          t.outside
+        ),
+        disabled: e(
+          "text-muted-foreground opacity-50",
+          t.disabled
+        ),
+        hidden: e("invisible", t.hidden),
+        ...i
+      },
+      components: {
+        Root: ({
+          className: r,
+          rootRef: d,
+          ...o
+        }) => /* @__PURE__ */ n.jsx(
+          "div",
+          {
+            "data-slot": "calendar",
+            ref: d,
+            className: e(r),
+            ...o
+          }
+        ),
+        Chevron: ({ className: r, orientation: d, ...o }) => d === "left" ? /* @__PURE__ */ n.jsx(
+          g,
+          {
+            iconName: "IconChevronLeft",
+            className: e("size-4", r),
+            ...o
+          }
+        ) : d === "right" ? /* @__PURE__ */ n.jsx(
+          g,
+          {
+            iconName: "IconChevronRight",
+            className: e("size-4", r),
+            ...o
+          }
+        ) : /* @__PURE__ */ n.jsx(
+          g,
+          {
+            iconName: "IconChevronDown",
+            className: e("size-4", r),
+            ...o
+          }
+        ),
+        DayButton: _,
+        WeekNumber: ({ children: r, ...d }) => /* @__PURE__ */ n.jsx("td", { ...d, children: /* @__PURE__ */ n.jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: r }) }),
+        ...x
+      },
+      ...b
+    }
+  );
+}
+function _({
+  className: c,
+  day: i,
+  modifiers: a,
+  ...s
+}) {
+  const l = p(), u = m.useRef(null);
+  return m.useEffect(() => {
+    a.focused && u.current?.focus();
+  }, [a.focused]), /* @__PURE__ */ n.jsx(
+    h,
+    {
+      ref: u,
+      variant: "inverse",
+      size: "sm",
+      "data-day": i.date.toLocaleDateString(),
+      "data-selected-single": a.selected && !a.range_start && !a.range_end && !a.range_middle,
+      "data-range-start": a.range_start,
+      "data-range-end": a.range_end,
+      "data-range-middle": a.range_middle,
+      className: e(
+        "data-[selected-single=true]:bg-secondary data-[selected-single=true]:text-secondary-foreground data-[range-middle=true]:bg-blue-050 data-[range-start=true]:bg-secondary data-[range-start=true]:text-secondary-foreground data-[range-end=true]:bg-secondary data-[range-end=true]:text-secondary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground data-[selected-single=true]:hover:bg-secondary/80 data-[selected-single=true]:hover:text-secondary-foreground data-[range-start=true]:hover:bg-secondary/80 data-[range-end=true]:hover:bg-secondary/80 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 rounded-md p-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-middle=true]:text-blue-800 data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        l.day,
+        c
+      ),
+      ...s
+    }
+  );
+}
 export {
-  e as Calendar
+  k as Calendar
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BuHQgaKs.cjs"),p=require("../command-C4Y6Ixrp.cjs"),S=require("../input-wSGCWBH-.cjs"),I=require("../label-U5GnYvFO.cjs"),h=require("../popover-4V87msIT.cjs"),q=require("../scroll-area-hg-bGoRe.cjs"),c=require("../index-DoxiiusW.cjs"),w=require("react"),P=require("react-phone-number-input"),O=require("react-phone-number-input/flags"),_=require("react-phone-number-input/locale/en"),T=require("react-phone-number-input/locale/es"),k=require("react-phone-number-input/locale/fr"),y=require("../icon-component-D5YssRbR.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(w),E=C(P),N=f.forwardRef(({className:t,onChange:n,value:s,size:o="md",rounded:r="default",label:u,helperText:d,locale:x="en",error:l,touched:m,containerClassName:j,...i},b)=>e.jsxRuntimeExports.jsxs("div",{className:c.cn("flex flex-col gap-2",j),children:[u&&e.jsxRuntimeExports.jsx(I.Label,{htmlFor:i.id,className:c.cn("mb-1",{"opacity-50":i.disabled}),children:u}),e.jsxRuntimeExports.jsx(E.default,{ref:b,className:c.cn("flex",t),flagComponent:R,countrySelectComponent:A,inputComponent:v,smartCaret:!1,labels:x==="es"?T:x==="fr"?k:_,value:s||void 0,onChange:a=>n?.(a||""),countrySelectProps:{size:o,rounded:r,error:l,touched:m},numberInputProps:{size:o,rounded:r,error:l,touched:m},...i}),l&&m?e.jsxRuntimeExports.jsx("span",{id:i.id&&`${i.id}-error-text`,"aria-invalid":!0,className:"text-destructive text-label-md -mt-1",children:l}):d?e.jsxRuntimeExports.jsx("span",{id:i.id&&`${i.id}-helper-text`,className:c.cn("text-label-md -mt-1",{"text-muted-foreground":!l&&!m,"text-destructive":l&&m,"text-muted-foreground opacity-50":i.disabled}),children:d}):null]}));N.displayName="PhoneInput";const v=f.forwardRef(({className:t,rounded:n="default",error:s,touched:o,size:r,...u},d)=>{const{"data-country":x,...l}=u;return e.jsxRuntimeExports.jsx(S.Input,{size:r,containerClassName:"w-full",className:c.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:d})});v.displayName="InputComponent";const A=({disabled:t,value:n,options:s,onChange:o,size:r="md",rounded:u="default",error:d,touched:x})=>{const l=f.useRef(null),[m,j]=f.useState(""),[i,b]=f.useState(!1);return e.jsxRuntimeExports.jsxs(h.Popover,{open:i,modal:!0,onOpenChange:a=>{b(a),a&&j("")},children:[e.jsxRuntimeExports.jsx(h.PopoverTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{type:"button",className:c.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 flex w-fit min-w-0 items-center justify-center border border-r-0 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 focus-visible:z-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",u==="default"?"rounded-e-none":"rounded-s-full rounded-e-none",{"outline-destructive":d&&x,"outline-blue-800":x&&!d,"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:c.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:m,onValueChange:a=>{j(a),setTimeout(()=>{if(l.current){const g=l.current.querySelector("[data-radix-scroll-area-viewport]");g&&(g.scrollTop=0)}},0)},placeholder:"Search country..."}),e.jsxRuntimeExports.jsx(p.CommandList,{children:e.jsxRuntimeExports.jsxs(q.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:a,label:g})=>a?e.jsxRuntimeExports.jsx(D,{country:a,countryName:g,selectedCountry:n,onChange:o,onSelectComplete:()=>b(!1)},a):null)})]})})]})})]})},D=({country:t,countryName:n,selectedCountry:s,onChange:o,onSelectComplete:r})=>{const u=()=>{o(t),r()};return e.jsxRuntimeExports.jsxs(p.CommandItem,{className:"gap-2",onSelect:u,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=O[t];return e.jsxRuntimeExports.jsx("span",{className:c.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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BuHQgaKs.cjs"),p=require("../command-C4Y6Ixrp.cjs"),S=require("../input-wSGCWBH-.cjs"),I=require("../label-U5GnYvFO.cjs"),h=require("../popover-4V87msIT.cjs"),q=require("../scroll-area-hg-bGoRe.cjs"),c=require("../index-DoxiiusW.cjs"),w=require("react"),P=require("react-phone-number-input"),O=require("react-phone-number-input/flags"),_=require("react-phone-number-input/locale/en"),T=require("react-phone-number-input/locale/es"),k=require("react-phone-number-input/locale/fr"),y=require("../icon-component-D5YssRbR.cjs");function E(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=E(w),C=E(P),v=f.forwardRef(({className:t,onChange:n,value:s,size:o="md",rounded:r="default",label:u,helperText:d,locale:x="en",error:l,touched:m,containerClassName:j,...i},b)=>e.jsxRuntimeExports.jsxs("div",{className:c.cn("flex flex-col gap-2",j),children:[u&&e.jsxRuntimeExports.jsx(I.Label,{htmlFor:i.id,className:c.cn("mb-1",{"opacity-50":i.disabled}),children:u}),e.jsxRuntimeExports.jsx(C.default,{ref:b,className:c.cn("flex",t),flagComponent:R,countrySelectComponent:A,inputComponent:N,smartCaret:!1,labels:x==="es"?T:x==="fr"?k:_,value:s||void 0,onChange:a=>n?.(a||""),countrySelectProps:{size:o,rounded:r,error:l,touched:m},numberInputProps:{size:o,rounded:r,error:l,touched:m},...i}),l&&m?e.jsxRuntimeExports.jsx("span",{id:i.id&&`${i.id}-error-text`,"aria-invalid":!0,className:"text-destructive text-label-md -mt-1",children:l}):d?e.jsxRuntimeExports.jsx("span",{id:i.id&&`${i.id}-helper-text`,className:c.cn("text-label-md -mt-1",{"text-muted-foreground":!l&&!m,"text-destructive":l&&m,"text-muted-foreground opacity-50":i.disabled}),children:d}):null]}));v.displayName="PhoneInput";const N=f.forwardRef(({className:t,rounded:n="default",error:s,touched:o,size:r,...u},d)=>{const{"data-country":x,...l}=u;return e.jsxRuntimeExports.jsx(S.Input,{size:r,className:c.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:d})});N.displayName="InputComponent";const A=({disabled:t,value:n,options:s,onChange:o,size:r="md",rounded:u="default",error:d,touched:x})=>{const l=f.useRef(null),[m,j]=f.useState(""),[i,b]=f.useState(!1);return e.jsxRuntimeExports.jsxs(h.Popover,{open:i,modal:!0,onOpenChange:a=>{b(a),a&&j("")},children:[e.jsxRuntimeExports.jsx(h.PopoverTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{type:"button",className:c.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 flex w-fit min-w-0 items-center justify-center border border-r-0 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 focus-visible:z-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",u==="default"?"rounded-e-none":"rounded-s-full rounded-e-none",{"outline-destructive":d&&x,"outline-blue-800":x&&!d,"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:c.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:m,onValueChange:a=>{j(a),setTimeout(()=>{if(l.current){const g=l.current.querySelector("[data-radix-scroll-area-viewport]");g&&(g.scrollTop=0)}},0)},placeholder:"Search country..."}),e.jsxRuntimeExports.jsx(p.CommandList,{children:e.jsxRuntimeExports.jsxs(q.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:a,label:g})=>a?e.jsxRuntimeExports.jsx(D,{country:a,countryName:g,selectedCountry:n,onChange:o,onSelectComplete:()=>b(!1)},a):null)})]})})]})})]})},D=({country:t,countryName:n,selectedCountry:s,onChange:o,onSelectComplete:r})=>{const u=()=>{o(t),r()};return e.jsxRuntimeExports.jsxs(p.CommandItem,{className:"gap-2",onSelect:u,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:`+${C.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=O[t];return e.jsxRuntimeExports.jsx("span",{className:c.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=v;

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

@@ -1,5 +1,5 @@
 import { j as e } from "../jsx-runtime-DywqP_6a.js";
-import { C as N, d as v, f as I, b as w, c as S, e as P } from "../command-pED95x7-.js";
+import { C as N, d as v, f as I, b as S, c as w, e as P } from "../command-pED95x7-.js";
 import { I as R } from "../input-Bs18T-Y3.js";
 import { L as O } from "../label-_kG7WBoJ.js";
 import { P as $, c as E, b as F } from "../popover-CHAUhJda.js";
@@ -93,7 +93,6 @@ const y = f.forwardRef(({ className: t, rounded: n = "default", error: l, touche
     R,
     {
       size: o,
-      containerClassName: "w-full",
       className: m(
         "w-full",
         {
@@ -190,8 +189,8 @@ const q = ({
             }
           ),
           /* @__PURE__ */ e.jsx(I, { children: /* @__PURE__ */ e.jsxs(L, { ref: r, className: "h-72", children: [
-            /* @__PURE__ */ e.jsx(w, { children: "No country found." }),
-            /* @__PURE__ */ e.jsx(S, { children: l.map(
+            /* @__PURE__ */ e.jsx(S, { children: "No country found." }),
+            /* @__PURE__ */ e.jsx(w, { children: l.map(
               ({ value: i, label: g }) => i ? /* @__PURE__ */ e.jsx(
                 D,
                 {

package/dist/components/textarea.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../jsx-runtime-BuHQgaKs.cjs"),y=require("../label-U5GnYvFO.cjs"),a=require("../index-DoxiiusW.cjs"),R=require("../index-C8P6Mn4U.cjs"),u=require("../icon-component-D5YssRbR.cjs"),E=R.cva("placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 resize-none border bg-transparent transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{sm:"text-label-md min-h-20 rounded-sm px-2 py-1",md:"text-label-lg min-h-24 rounded-md px-3 py-2",lg:"text-label-xl min-h-32 rounded-lg px-4 py-3"},rounded:{default:"",full:"rounded-2xl"},state:{default:"",error:"border-destructive ring-destructive/20 dark:ring-destructive/40",success:"border-success ring-success/20 dark:ring-success/40"},resize:{none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"}},defaultVariants:{size:"md",rounded:"default",state:"default",resize:"vertical"}});function h({className:b,label:x,helperText:c,error:s,touched:i,iconName:m,size:v,rounded:f,state:p,resize:j,containerClassName:g,maxLength:n,showCharacterCount:z=!1,...e}){const l=m?(o=>typeof o=="string"?{name:o}:o)(m):void 0,r=s&&i?"error":i&&!s&&e.value?"success":"default",d=e.value?String(e.value).length:0,N=z||n;return t.jsxRuntimeExports.jsxs("div",{className:a.cn("flex flex-col gap-2",g),children:[x&&t.jsxRuntimeExports.jsx(y.Label,{htmlFor:e.id,className:a.cn({"text-neutral-700":e.disabled}),children:x}),t.jsxRuntimeExports.jsxs("div",{className:"relative w-full",children:[t.jsxRuntimeExports.jsx("textarea",{"data-slot":"textarea","aria-describedby":e.id&&c?`${e.id}-helper-text`:void 0,"aria-invalid":!!(s&&i),"aria-errormessage":e.id&&s?`${e.id}-error-text`:void 0,maxLength:n,className:a.cn(E({size:v,rounded:f,resize:j,state:r,className:a.cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",l?"pr-10":"",b)})),...e}),l&&t.jsxRuntimeExports.jsx("span",{className:a.cn("absolute top-3 right-3",{"text-muted-foreground":r==="default","text-destructive":r==="error","text-success-main":r==="success","text-neutral-700":e.disabled}),children:t.jsxRuntimeExports.jsx(u.IconComponent,{iconName:l.name,stroke:l.stroke,size:20})}),!l&&s&&i&&t.jsxRuntimeExports.jsx(u.IconComponent,{iconName:"IconAlertCircleFilled",size:20,className:"text-destructive absolute top-3 right-3"}),!l&&i&&!s&&e.value&&t.jsxRuntimeExports.jsx(u.IconComponent,{iconName:"IconCircleCheckFilled",size:20,className:"text-success-main absolute top-3 right-3"})]}),N&&t.jsxRuntimeExports.jsx("div",{className:"flex justify-end",children:t.jsxRuntimeExports.jsx("span",{className:a.cn("text-label-sm",{"text-muted-foreground":!n||d<=n,"text-destructive":n&&d>n}),children:n?`${d}/${n}`:d})}),s&&i?t.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-error-text`,"aria-invalid":!0,className:"text-destructive text-label-md",children:s}):c?t.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-helper-text`,className:a.cn("text-label-md",{"text-muted-foreground":!s&&!i,"text-destructive":s&&i,"text-success-main":i&&!s&&e.value!==void 0,"text-neutral-700":e.disabled}),children:c}):null]})}exports.Textarea=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../jsx-runtime-BuHQgaKs.cjs"),a=require("../index-DoxiiusW.cjs"),v=require("../index-C8P6Mn4U.cjs"),p=require("../icon-component-D5YssRbR.cjs"),x=v.cva("placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{xs:"text-label-sm min-h-16 px-2 py-1",sm:"text-label-md min-h-20 px-2 py-1",md:"text-label-lg min-h-24 px-3 py-2",lg:"text-label-xl min-h-32 px-4 py-3"},resize:{none:"resize-none",vertical:"resize-y",horizontal:"resize-x",both:"resize"}},defaultVariants:{size:"md",resize:"vertical"}});function b({className:o,size:l,resize:d,iconName:u,maxLength:t,showCharacterCount:m=!1,...i}){const r=u?(n=>typeof n=="string"?{name:n}:n)(u):void 0,s=i.value?String(i.value).length:0,c=m||t;return!r&&!c?e.jsxRuntimeExports.jsx("textarea",{"data-slot":"textarea",maxLength:t,className:a.cn(x({size:l,resize:d}),"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",o),...i}):e.jsxRuntimeExports.jsxs("div",{className:"space-y-2",children:[e.jsxRuntimeExports.jsxs("div",{className:"relative w-full",children:[e.jsxRuntimeExports.jsx("textarea",{"data-slot":"textarea",maxLength:t,className:a.cn(x({size:l,resize:d}),"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]","aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",r?"pr-10":"",o),...i}),r&&e.jsxRuntimeExports.jsx("span",{className:"absolute top-3 right-3 text-muted-foreground",children:e.jsxRuntimeExports.jsx(p.IconComponent,{iconName:r.name,stroke:r.stroke,size:20})})]}),c&&e.jsxRuntimeExports.jsx("div",{className:"flex justify-end",children:e.jsxRuntimeExports.jsx("span",{className:a.cn("text-xs text-muted-foreground",{"text-destructive":t&&s>t}),children:t?`${s}/${t}`:s})})]})}exports.Textarea=b;

package/dist/components/textarea.d.ts

@@ -1,32 +1,20 @@
-import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
 import { TablerIconName } from './icon-component';
 declare const textareaStyles: (props?: ({
-    size?: "lg" | "md" | "sm" | null | undefined;
-    rounded?: "default" | "full" | null | undefined;
-    state?: "default" | "error" | "success" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
     resize?: "none" | "horizontal" | "vertical" | "both" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TextareaProps extends VariantProps<typeof textareaStyles> {
-    /** Label text shown above the textarea */
-    label?: string;
-    /** Helper text shown below the textarea */
-    helperText?: string;
-    /** Error message shown below the textarea */
-    error?: string;
-    /** Whether the textarea has been touched/blurred */
-    touched?: boolean;
     /** Icon to display in the top-right corner of the textarea */
     iconName?: TablerIconName | {
         name: TablerIconName;
         stroke?: string;
     };
-    /** Container className for the entire textarea component including label and helper text */
-    containerClassName?: string;
     /** Maximum number of characters allowed */
     maxLength?: number;
     /** Show character count */
     showCharacterCount?: boolean;
 }
-declare function Textarea({ className, label, helperText, error, touched, iconName, size, rounded, state, resize, containerClassName, maxLength, showCharacterCount, ...props }: Omit<React.ComponentProps<'textarea'>, 'size'> & TextareaProps): import("react/jsx-runtime").JSX.Element;
-export { Textarea, textareaStyles };
+declare function Textarea({ className, size, resize, iconName, maxLength, showCharacterCount, ...props }: Omit<React.ComponentProps<'textarea'>, 'size'> & TextareaProps): import("react/jsx-runtime").JSX.Element;
+export { Textarea };

package/dist/components/textarea.es.js

@@ -1,25 +1,16 @@
-import { j as t } from "../jsx-runtime-DywqP_6a.js";
-import { L as y } from "../label-_kG7WBoJ.js";
-import { c as l } from "../index-CRiPKpXj.js";
-import { c as h } from "../index-BqtVL8d-.js";
-import { I as u } from "../icon-component-CxQsODCa.js";
-const I = h(
-  "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 resize-none border bg-transparent transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+import { j as e } from "../jsx-runtime-DywqP_6a.js";
+import { c as n } from "../index-CRiPKpXj.js";
+import { c as v } from "../index-BqtVL8d-.js";
+import { I as b } from "../icon-component-CxQsODCa.js";
+const x = v(
+  "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       size: {
-        sm: "text-label-md min-h-20 rounded-sm px-2 py-1",
-        md: "text-label-lg min-h-24 rounded-md px-3 py-2",
-        lg: "text-label-xl min-h-32 rounded-lg px-4 py-3"
-      },
-      rounded: {
-        default: "",
-        full: "rounded-2xl"
-      },
-      state: {
-        default: "",
-        error: "border-destructive ring-destructive/20 dark:ring-destructive/40",
-        success: "border-success ring-success/20 dark:ring-success/40"
+        xs: "text-label-sm min-h-16 px-2 py-1",
+        sm: "text-label-md min-h-20 px-2 py-1",
+        md: "text-label-lg min-h-24 px-3 py-2",
+        lg: "text-label-xl min-h-32 px-4 py-3"
       },
       resize: {
         none: "resize-none",
@@ -30,134 +21,70 @@ const I = h(
     },
     defaultVariants: {
       size: "md",
-      rounded: "default",
-      state: "default",
       resize: "vertical"
     }
   }
 );
-function E({
-  className: f,
-  label: x,
-  helperText: c,
-  error: s,
-  touched: i,
-  iconName: m,
-  size: v,
-  rounded: b,
-  state: k,
-  resize: g,
-  containerClassName: z,
-  maxLength: a,
-  showCharacterCount: j = !1,
-  ...e
+function j({
+  className: o,
+  size: l,
+  resize: d,
+  iconName: c,
+  maxLength: r,
+  showCharacterCount: m = !1,
+  ...t
 }) {
-  const r = m ? ((o) => typeof o == "string" ? { name: o } : o)(m) : void 0, n = s && i ? "error" : i && !s && e.value ? "success" : "default", d = e.value ? String(e.value).length : 0, N = j || a;
-  return /* @__PURE__ */ t.jsxs("div", { className: l("flex flex-col gap-2", z), children: [
-    x && /* @__PURE__ */ t.jsx(
-      y,
-      {
-        htmlFor: e.id,
-        className: l({
-          "text-neutral-700": e.disabled
-        }),
-        children: x
-      }
-    ),
-    /* @__PURE__ */ t.jsxs("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ t.jsx(
+  const i = c ? ((s) => typeof s == "string" ? { name: s } : s)(c) : void 0, a = t.value ? String(t.value).length : 0, u = m || r;
+  return !i && !u ? /* @__PURE__ */ e.jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      maxLength: r,
+      className: n(
+        x({ size: l, resize: d }),
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        o
+      ),
+      ...t
+    }
+  ) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ e.jsx(
         "textarea",
         {
           "data-slot": "textarea",
-          "aria-describedby": e.id && c ? `${e.id}-helper-text` : void 0,
-          "aria-invalid": !!(s && i),
-          "aria-errormessage": e.id && s ? `${e.id}-error-text` : void 0,
-          maxLength: a,
-          className: l(
-            I({
-              size: v,
-              rounded: b,
-              resize: g,
-              state: n,
-              className: l(
-                "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-                r ? "pr-10" : "",
-                f
-              )
-            })
+          maxLength: r,
+          className: n(
+            x({ size: l, resize: d }),
+            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+            i ? "pr-10" : "",
+            o
           ),
-          ...e
-        }
-      ),
-      r && /* @__PURE__ */ t.jsx(
-        "span",
-        {
-          className: l("absolute top-3 right-3", {
-            "text-muted-foreground": n === "default",
-            "text-destructive": n === "error",
-            "text-success-main": n === "success",
-            "text-neutral-700": e.disabled
-          }),
-          children: /* @__PURE__ */ t.jsx(
-            u,
-            {
-              iconName: r.name,
-              stroke: r.stroke,
-              size: 20
-            }
-          )
+          ...t
         }
       ),
-      !r && s && i && /* @__PURE__ */ t.jsx(
-        u,
+      i && /* @__PURE__ */ e.jsx("span", { className: "absolute top-3 right-3 text-muted-foreground", children: /* @__PURE__ */ e.jsx(
+        b,
         {
-          iconName: "IconAlertCircleFilled",
-          size: 20,
-          className: "text-destructive absolute top-3 right-3"
+          iconName: i.name,
+          stroke: i.stroke,
+          size: 20
         }
-      ),
-      !r && i && !s && e.value && /* @__PURE__ */ t.jsx(
-        u,
-        {
-          iconName: "IconCircleCheckFilled",
-          size: 20,
-          className: "text-success-main absolute top-3 right-3"
-        }
-      )
+      ) })
     ] }),
-    N && /* @__PURE__ */ t.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        className: l("text-label-sm", {
-          "text-muted-foreground": !a || d <= a,
-          "text-destructive": a && d > a
-        }),
-        children: a ? `${d}/${a}` : d
-      }
-    ) }),
-    s && i ? /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        id: e.id && `${e.id}-error-text`,
-        "aria-invalid": !0,
-        className: "text-destructive text-label-md",
-        children: s
-      }
-    ) : c ? /* @__PURE__ */ t.jsx(
+    u && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ e.jsx(
       "span",
       {
-        id: e.id && `${e.id}-helper-text`,
-        className: l("text-label-md", {
-          "text-muted-foreground": !s && !i,
-          "text-destructive": s && i,
-          "text-success-main": i && !s && e.value !== void 0,
-          "text-neutral-700": e.disabled
+        className: n("text-xs text-muted-foreground", {
+          "text-destructive": r && a > r
         }),
-        children: c
+        children: r ? `${a}/${r}` : a
       }
-    ) : null
+    ) })
   ] });
 }
 export {
-  E as Textarea
+  j as Textarea
 };