@clasing/ui 2.0.0 → 2.0.2

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/form.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../jsx-runtime-BuHQgaKs.cjs"),x=require("@radix-ui/react-slot"),f=require("react"),c=require("react-hook-form"),F=require("../label-U5GnYvFO.cjs"),d=require("../index-DoxiiusW.cjs");function j(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const i=j(f),p=c.FormProvider,l=i.createContext({}),g=({...e})=>n.jsxRuntimeExports.jsx(l.Provider,{value:{name:e.name},children:n.jsxRuntimeExports.jsx(c.Controller,{...e})}),m=()=>{const e=i.useContext(l),t=i.useContext(u),{getFieldState:r}=c.useFormContext(),o=c.useFormState({name:e.name}),s=r(e.name,o);if(!e)throw new Error("useFormField should be used within <FormField>");const{id:a}=t;return{id:a,name:e.name,formItemId:`${a}-form-item`,formDescriptionId:`${a}-form-item-description`,formMessageId:`${a}-form-item-message`,...s}},u=i.createContext({});function b({className:e,...t}){const r=i.useId();return n.jsxRuntimeExports.jsx(u.Provider,{value:{id:r},children:n.jsxRuntimeExports.jsx("div",{"data-slot":"form-item",className:d.cn("grid gap-2",e),...t})})}function I({className:e,...t}){const{error:r,formItemId:o}=m();return n.jsxRuntimeExports.jsx(F.Label,{"data-slot":"form-label","data-error":!!r,className:d.cn("data-[error=true]:text-destructive",e),htmlFor:o,...t})}function C({...e}){const{error:t,formItemId:r,formDescriptionId:o,formMessageId:s}=m();return n.jsxRuntimeExports.jsx(x.Slot,{"data-slot":"form-control",id:r,"aria-describedby":t?`${o} ${s}`:`${o}`,"aria-invalid":!!t,...e})}function v({className:e,...t}){const{formDescriptionId:r}=m();return n.jsxRuntimeExports.jsx("p",{"data-slot":"form-description",id:r,className:d.cn("text-muted-foreground! text-label-md",e),...t})}function R({className:e,...t}){const{error:r,formMessageId:o}=m(),s=r?String(r?.message??""):t.children;return s?n.jsxRuntimeExports.jsx("p",{"data-slot":"form-message",id:o,className:d.cn("text-destructive! text-label-md",e),...t,children:s}):null}exports.Form=p;exports.FormControl=C;exports.FormDescription=v;exports.FormField=g;exports.FormItem=b;exports.FormLabel=I;exports.FormMessage=R;exports.useFormField=m;

package/dist/components/form.d.ts

@@ -0,0 +1,24 @@
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import * as React from 'react';
+import { type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+declare function FormDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+declare function FormMessage({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element | null;
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, };

package/dist/components/form.es.js

@@ -0,0 +1,101 @@
+import { j as m } from "../jsx-runtime-DywqP_6a.js";
+import { Slot as f } from "@radix-ui/react-slot";
+import * as n from "react";
+import { FormProvider as u, Controller as x, useFormContext as F, useFormState as I } from "react-hook-form";
+import { L as p } from "../label-_kG7WBoJ.js";
+import { c as a } from "../index-CRiPKpXj.js";
+const h = u, c = n.createContext(
+  {}
+), S = ({
+  ...e
+}) => /* @__PURE__ */ m.jsx(c.Provider, { value: { name: e.name }, children: /* @__PURE__ */ m.jsx(x, { ...e }) }), d = () => {
+  const e = n.useContext(c), t = n.useContext(l), { getFieldState: r } = F(), o = I({ name: e.name }), s = r(e.name, o);
+  if (!e)
+    throw new Error("useFormField should be used within <FormField>");
+  const { id: i } = t;
+  return {
+    id: i,
+    name: e.name,
+    formItemId: `${i}-form-item`,
+    formDescriptionId: `${i}-form-item-description`,
+    formMessageId: `${i}-form-item-message`,
+    ...s
+  };
+}, l = n.createContext(
+  {}
+);
+function $({ className: e, ...t }) {
+  const r = n.useId();
+  return /* @__PURE__ */ m.jsx(l.Provider, { value: { id: r }, children: /* @__PURE__ */ m.jsx(
+    "div",
+    {
+      "data-slot": "form-item",
+      className: a("grid gap-2", e),
+      ...t
+    }
+  ) });
+}
+function D({
+  className: e,
+  ...t
+}) {
+  const { error: r, formItemId: o } = d();
+  return /* @__PURE__ */ m.jsx(
+    p,
+    {
+      "data-slot": "form-label",
+      "data-error": !!r,
+      className: a("data-[error=true]:text-destructive", e),
+      htmlFor: o,
+      ...t
+    }
+  );
+}
+function M({ ...e }) {
+  const { error: t, formItemId: r, formDescriptionId: o, formMessageId: s } = d();
+  return /* @__PURE__ */ m.jsx(
+    f,
+    {
+      "data-slot": "form-control",
+      id: r,
+      "aria-describedby": t ? `${o} ${s}` : `${o}`,
+      "aria-invalid": !!t,
+      ...e
+    }
+  );
+}
+function N({ className: e, ...t }) {
+  const { formDescriptionId: r } = d();
+  return /* @__PURE__ */ m.jsx(
+    "p",
+    {
+      "data-slot": "form-description",
+      id: r,
+      className: a("text-muted-foreground! text-label-md", e),
+      ...t
+    }
+  );
+}
+function w({ className: e, ...t }) {
+  const { error: r, formMessageId: o } = d(), s = r ? String(r?.message ?? "") : t.children;
+  return s ? /* @__PURE__ */ m.jsx(
+    "p",
+    {
+      "data-slot": "form-message",
+      id: o,
+      className: a("text-destructive! text-label-md", e),
+      ...t,
+      children: s
+    }
+  ) : null;
+}
+export {
+  h as Form,
+  M as FormControl,
+  N as FormDescription,
+  S as FormField,
+  $ as FormItem,
+  D as FormLabel,
+  w as FormMessage,
+  d as useFormField
+};

package/dist/components/input.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../input-eri6Lyeo.cjs");exports.Input=t.Input;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../input-wSGCWBH-.cjs");exports.Input=t.Input;

package/dist/components/input.d.ts

@@ -2,19 +2,9 @@ import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import { TablerIconName } from './icon-component';
 declare const inputStyles: (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;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface InputProps extends VariantProps<typeof inputStyles> {
-    /** Label text shown above the input */
-    label?: string;
-    /** Helper text shown below the input */
-    helperText?: string;
-    /** Error message shown below the input */
-    error?: string;
-    /** Whether the input has been touched/blurred */
-    touched?: boolean;
     /** Icon to display in the input */
     iconName?: TablerIconName | {
         name: TablerIconName;
@@ -22,8 +12,6 @@ export interface InputProps extends VariantProps<typeof inputStyles> {
     };
     /** Position of the icon (left or right) */
     iconPosition?: 'left' | 'right';
-    /** Container className for the entire input component including label and helper text */
-    containerClassName?: string;
 }
-declare function Input({ className, label, helperText, error, touched, iconName, iconPosition, type, size, rounded, state, containerClassName, ...props }: Omit<React.ComponentProps<'input'>, 'size'> & InputProps): import("react/jsx-runtime").JSX.Element;
-export { Input, inputStyles };
+declare function Input({ className, type, size, iconName, iconPosition, ...props }: Omit<React.ComponentProps<'input'>, 'size'> & InputProps): import("react/jsx-runtime").JSX.Element;
+export { Input };

package/dist/components/input.es.js

@@ -1,4 +1,4 @@
-import { I as r } from "../input-BoPcvULq.js";
+import { I as r } from "../input-Bs18T-Y3.js";
 export {
   r as Input
 };

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-eri6Lyeo.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 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;

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

@@ -1,6 +1,6 @@
 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 { I as R } from "../input-BoPcvULq.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";
 import { S as L } from "../scroll-area-DwBiu3Jn.js";

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 };