@clasing/ui 0.1.132 → 0.1.133

package/dist/components/input.cjs.js

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

package/dist/components/input.es.js

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

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

@@ -6,7 +6,7 @@ import v from "react-phone-number-input/locale/en";
 import I from "react-phone-number-input/locale/es";
 import w from "react-phone-number-input/locale/fr";
 import { C as S, d as P, f as R, b as O, c as $, e as E } from "../command-pED95x7-.js";
-import { I as F } from "../input-CUSAqhCy.js";
+import { I as F } from "../input-C1L8iNKq.js";
 import { L } from "../label-_kG7WBoJ.js";
 import { P as V, c as k, b as A } from "../popover-CHAUhJda.js";
 import { S as T } from "../scroll-area-DwBiu3Jn.js";

package/dist/components/textarea.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../jsx-runtime-CEDi24JD.cjs"),y=require("../label-DzIkWgU7.cjs"),a=require("../index-DoxiiusW.cjs"),R=require("../index-C8P6Mn4U.cjs"),u=require("../icon-component-DuSAouum.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;

package/dist/components/textarea.d.ts

@@ -0,0 +1,32 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+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;
+    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 };

package/dist/components/textarea.es.js

@@ -0,0 +1,163 @@
+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",
+  {
+    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 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
+}) {
+  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(
+        "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
+              )
+            })
+          ),
+          ...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
+            }
+          )
+        }
+      ),
+      !r && s && i && /* @__PURE__ */ t.jsx(
+        u,
+        {
+          iconName: "IconAlertCircleFilled",
+          size: 20,
+          className: "text-destructive absolute top-3 right-3"
+        }
+      ),
+      !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(
+      "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
+        }),
+        children: c
+      }
+    ) : null
+  ] });
+}
+export {
+  E as Textarea
+};

package/dist/entries/textarea.d.ts

@@ -0,0 +1,2 @@
+import { Textarea } from '../components/textarea';
+export { Textarea };

package/dist/input-BJHrtCkE.cjs

@@ -0,0 +1 @@
+"use strict";const s=require("./jsx-runtime-CEDi24JD.cjs"),h=require("./label-DzIkWgU7.cjs"),d=require("./index-DoxiiusW.cjs"),N=require("./index-C8P6Mn4U.cjs"),E=require("react"),u=require("./icon-component-DuSAouum.cjs");function I(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const t=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(o,a,t.get?t:{enumerable:!0,get:()=>r[a]})}}return o.default=r,Object.freeze(o)}const R=I(E),y=N.cva("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 border bg-transparent transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{sm:"text-label-md h-8 rounded-sm px-2 py-1",md:"text-label-lg h-12 rounded-md px-3 py-1",lg:"text-label-xl h-16 rounded-lg px-4 py-2"},rounded:{default:"",full:"rounded-full"},state:{default:"",error:"border-destructive ring-destructive/20 dark:ring-destructive/40",success:"border-success ring-success/20 dark:ring-success/40"}},defaultVariants:{size:"md",rounded:"default",state:"default"}});function z({className:r,label:o,helperText:a,error:t,touched:i,iconName:b,iconPosition:c="left",type:l="text",size:g,rounded:p,state:k,containerClassName:j,...e}){const[x,v]=R.useState(!1),n=b?(f=>typeof f=="string"?{name:f}:f)(b):void 0,m=t&&i?"error":i&&!t&&e.value?"success":"default",w=()=>{v(!x)};return s.jsxRuntimeExports.jsxs("div",{className:d.cn("flex flex-col gap-2",j),children:[o&&s.jsxRuntimeExports.jsx(h.Label,{htmlFor:e.id,className:d.cn({"text-neutral-700":e.disabled}),children:o}),s.jsxRuntimeExports.jsxs("div",{className:"relative w-full",children:[n&&c==="left"&&s.jsxRuntimeExports.jsx("span",{className:d.cn("absolute top-1/2 left-3 -translate-y-1/2",{"text-muted-foreground":m==="default","text-destructive":m==="error","text-success-main":m==="success","text-neutral-700":e.disabled}),children:s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:n.name,stroke:n.stroke,size:20})}),s.jsxRuntimeExports.jsx("input",{type:l==="password"?x?"text":"password":l,"data-slot":"input","aria-describedby":e.id&&a?`${e.id}-helper-text`:void 0,"aria-invalid":!!(t&&i),"aria-errormessage":e.id&&t?`${e.id}-error-text`:void 0,className:d.cn(y({size:g,rounded:p,state:m,className:d.cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",n&&c==="left"?"pl-10":"",n&&c==="right"||l==="password"?"pr-10":"",l==="color"?"h-[50px] p-0":"",r)})),...e}),l==="password"&&s.jsxRuntimeExports.jsx("button",{type:"button",tabIndex:-1,"aria-label":x?"Hide password":"Show password",className:"absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 hover:bg-neutral-100/50 focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-none",onClick:w,children:s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:x?"IconEyeOff":"IconEye",size:20})}),n&&c==="right"&&l!=="password"&&s.jsxRuntimeExports.jsx("span",{className:"absolute top-1/2 right-3 -translate-y-1/2",children:s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:n.name,stroke:n.stroke,size:20})}),!n&&t&&i&&l!=="password"&&s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:"IconAlertCircleFilled",size:20,className:"text-destructive absolute top-1/2 right-3 -translate-y-1/2"}),!n&&i&&!t&&e.value&&l!=="password"&&s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:"IconCircleCheckFilled",size:20,className:"text-success-main absolute top-1/2 right-3 -translate-y-1/2"})]}),t&&i?s.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-error-text`,"aria-invalid":!0,className:"text-destructive text-label-md",children:t}):a?s.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-helper-text`,className:d.cn("text-label-md",{"text-muted-foreground":!t&&!i,"text-destructive":t&&i,"text-success-main":i&&!t&&e.value!==void 0,"text-neutral-700":e.disabled}),children:a}):null]})}exports.Input=z;

package/dist/{input-CUSAqhCy.js → input-C1L8iNKq.js}

@@ -1,11 +1,11 @@
-import { j as t } from "./jsx-runtime-DywqP_6a.js";
+import { j as s } from "./jsx-runtime-DywqP_6a.js";
 import { L as j } from "./label-_kG7WBoJ.js";
 import { c as r } from "./index-CRiPKpXj.js";
 import { c as N } from "./index-BqtVL8d-.js";
 import * as I from "react";
 import { I as n } from "./icon-component-CxQsODCa.js";
 const y = N(
-  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 border bg-transparent text-base transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+  "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 border bg-transparent transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       size: {
@@ -34,7 +34,7 @@ function V({
   className: b,
   label: x,
   helperText: u,
-  error: s,
+  error: t,
   touched: i,
   iconName: f,
   iconPosition: d = "left",
@@ -45,11 +45,11 @@ function V({
   containerClassName: p,
   ...e
 }) {
-  const [o, w] = I.useState(!1), a = f ? ((m) => typeof m == "string" ? { name: m } : m)(f) : void 0, c = s && i ? "error" : i && !s && e.value ? "success" : "default", h = () => {
+  const [o, w] = I.useState(!1), a = f ? ((m) => typeof m == "string" ? { name: m } : m)(f) : void 0, c = t && i ? "error" : i && !t && e.value ? "success" : "default", h = () => {
     w(!o);
   };
-  return /* @__PURE__ */ t.jsxs("div", { className: r("flex flex-col gap-2", p), children: [
-    x && /* @__PURE__ */ t.jsx(
+  return /* @__PURE__ */ s.jsxs("div", { className: r("flex flex-col gap-2", p), children: [
+    x && /* @__PURE__ */ s.jsx(
       j,
       {
         htmlFor: e.id,
@@ -59,8 +59,8 @@ function V({
         children: x
       }
     ),
-    /* @__PURE__ */ t.jsxs("div", { className: "relative w-full", children: [
-      a && d === "left" && /* @__PURE__ */ t.jsx(
+    /* @__PURE__ */ s.jsxs("div", { className: "relative w-full", children: [
+      a && d === "left" && /* @__PURE__ */ s.jsx(
         "span",
         {
           className: r("absolute top-1/2 left-3 -translate-y-1/2", {
@@ -69,7 +69,7 @@ function V({
             "text-success-main": c === "success",
             "text-neutral-700": e.disabled
           }),
-          children: /* @__PURE__ */ t.jsx(
+          children: /* @__PURE__ */ s.jsx(
             n,
             {
               iconName: a.name,
@@ -79,14 +79,14 @@ function V({
           )
         }
       ),
-      /* @__PURE__ */ t.jsx(
+      /* @__PURE__ */ s.jsx(
         "input",
         {
           type: l === "password" ? o ? "text" : "password" : l,
           "data-slot": "input",
           "aria-describedby": e.id && u ? `${e.id}-helper-text` : void 0,
-          "aria-invalid": !!(s && i),
-          "aria-errormessage": e.id && s ? `${e.id}-error-text` : void 0,
+          "aria-invalid": !!(t && i),
+          "aria-errormessage": e.id && t ? `${e.id}-error-text` : void 0,
           className: r(
             y({
               size: g,
@@ -104,7 +104,7 @@ function V({
           ...e
         }
       ),
-      l === "password" && /* @__PURE__ */ t.jsx(
+      l === "password" && /* @__PURE__ */ s.jsx(
         "button",
         {
           type: "button",
@@ -112,7 +112,7 @@ function V({
           "aria-label": o ? "Hide password" : "Show password",
           className: "absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 hover:bg-neutral-100/50 focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-none",
           onClick: h,
-          children: /* @__PURE__ */ t.jsx(
+          children: /* @__PURE__ */ s.jsx(
             n,
             {
               iconName: o ? "IconEyeOff" : "IconEye",
@@ -121,7 +121,7 @@ function V({
           )
         }
       ),
-      a && d === "right" && l !== "password" && /* @__PURE__ */ t.jsx("span", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ t.jsx(
+      a && d === "right" && l !== "password" && /* @__PURE__ */ s.jsx("span", { className: "absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ s.jsx(
         n,
         {
           iconName: a.name,
@@ -129,7 +129,7 @@ function V({
           size: 20
         }
       ) }),
-      !a && s && i && l !== "password" && /* @__PURE__ */ t.jsx(
+      !a && t && i && l !== "password" && /* @__PURE__ */ s.jsx(
         n,
         {
           iconName: "IconAlertCircleFilled",
@@ -137,7 +137,7 @@ function V({
           className: "text-destructive absolute top-1/2 right-3 -translate-y-1/2"
         }
       ),
-      !a && i && !s && e.value && l !== "password" && /* @__PURE__ */ t.jsx(
+      !a && i && !t && e.value && l !== "password" && /* @__PURE__ */ s.jsx(
         n,
         {
           iconName: "IconCircleCheckFilled",
@@ -146,22 +146,22 @@ function V({
         }
       )
     ] }),
-    s && i ? /* @__PURE__ */ t.jsx(
+    t && i ? /* @__PURE__ */ s.jsx(
       "span",
       {
         id: e.id && `${e.id}-error-text`,
         "aria-invalid": !0,
         className: "text-destructive text-label-md",
-        children: s
+        children: t
       }
-    ) : u ? /* @__PURE__ */ t.jsx(
+    ) : u ? /* @__PURE__ */ s.jsx(
       "span",
       {
         id: e.id && `${e.id}-helper-text`,
         className: r("text-label-md", {
-          "text-muted-foreground": !s && !i,
-          "text-destructive": s && i,
-          "text-success-main": i && !s && e.value !== void 0,
+          "text-muted-foreground": !t && !i,
+          "text-destructive": t && i,
+          "text-success-main": i && !t && e.value !== void 0,
           "text-neutral-700": e.disabled
         }),
         children: u

package/package.json

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

package/dist/input-DHz92pYC.cjs

@@ -1 +0,0 @@
-"use strict";const s=require("./jsx-runtime-CEDi24JD.cjs"),h=require("./label-DzIkWgU7.cjs"),d=require("./index-DoxiiusW.cjs"),N=require("./index-C8P6Mn4U.cjs"),E=require("react"),u=require("./icon-component-DuSAouum.cjs");function I(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const a in r)if(a!=="default"){const t=Object.getOwnPropertyDescriptor(r,a);Object.defineProperty(o,a,t.get?t:{enumerable:!0,get:()=>r[a]})}}return o.default=r,Object.freeze(o)}const R=I(E),y=N.cva("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 border bg-transparent text-base transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",{variants:{size:{sm:"text-label-md h-8 rounded-sm px-2 py-1",md:"text-label-lg h-12 rounded-md px-3 py-1",lg:"text-label-xl h-16 rounded-lg px-4 py-2"},rounded:{default:"",full:"rounded-full"},state:{default:"",error:"border-destructive ring-destructive/20 dark:ring-destructive/40",success:"border-success ring-success/20 dark:ring-success/40"}},defaultVariants:{size:"md",rounded:"default",state:"default"}});function z({className:r,label:o,helperText:a,error:t,touched:i,iconName:b,iconPosition:c="left",type:l="text",size:g,rounded:p,state:k,containerClassName:j,...e}){const[x,v]=R.useState(!1),n=b?(f=>typeof f=="string"?{name:f}:f)(b):void 0,m=t&&i?"error":i&&!t&&e.value?"success":"default",w=()=>{v(!x)};return s.jsxRuntimeExports.jsxs("div",{className:d.cn("flex flex-col gap-2",j),children:[o&&s.jsxRuntimeExports.jsx(h.Label,{htmlFor:e.id,className:d.cn({"text-neutral-700":e.disabled}),children:o}),s.jsxRuntimeExports.jsxs("div",{className:"relative w-full",children:[n&&c==="left"&&s.jsxRuntimeExports.jsx("span",{className:d.cn("absolute top-1/2 left-3 -translate-y-1/2",{"text-muted-foreground":m==="default","text-destructive":m==="error","text-success-main":m==="success","text-neutral-700":e.disabled}),children:s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:n.name,stroke:n.stroke,size:20})}),s.jsxRuntimeExports.jsx("input",{type:l==="password"?x?"text":"password":l,"data-slot":"input","aria-describedby":e.id&&a?`${e.id}-helper-text`:void 0,"aria-invalid":!!(t&&i),"aria-errormessage":e.id&&t?`${e.id}-error-text`:void 0,className:d.cn(y({size:g,rounded:p,state:m,className:d.cn("focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",n&&c==="left"?"pl-10":"",n&&c==="right"||l==="password"?"pr-10":"",l==="color"?"h-[50px] p-0":"",r)})),...e}),l==="password"&&s.jsxRuntimeExports.jsx("button",{type:"button",tabIndex:-1,"aria-label":x?"Hide password":"Show password",className:"absolute top-1/2 right-3 -translate-y-1/2 rounded-md p-1 hover:bg-neutral-100/50 focus-visible:ring-[1.5px] focus-visible:ring-offset-1 focus-visible:outline-none",onClick:w,children:s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:x?"IconEyeOff":"IconEye",size:20})}),n&&c==="right"&&l!=="password"&&s.jsxRuntimeExports.jsx("span",{className:"absolute top-1/2 right-3 -translate-y-1/2",children:s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:n.name,stroke:n.stroke,size:20})}),!n&&t&&i&&l!=="password"&&s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:"IconAlertCircleFilled",size:20,className:"text-destructive absolute top-1/2 right-3 -translate-y-1/2"}),!n&&i&&!t&&e.value&&l!=="password"&&s.jsxRuntimeExports.jsx(u.IconComponent,{iconName:"IconCircleCheckFilled",size:20,className:"text-success-main absolute top-1/2 right-3 -translate-y-1/2"})]}),t&&i?s.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-error-text`,"aria-invalid":!0,className:"text-destructive text-label-md",children:t}):a?s.jsxRuntimeExports.jsx("span",{id:e.id&&`${e.id}-helper-text`,className:d.cn("text-label-md",{"text-muted-foreground":!t&&!i,"text-destructive":t&&i,"text-success-main":i&&!t&&e.value!==void 0,"text-neutral-700":e.disabled}),children:a}):null]})}exports.Input=z;