@clasing/ui 2.0.0 → 2.0.2

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

package/dist/entries/form.d.ts

@@ -0,0 +1,2 @@
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from '../components/form';
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, };

package/dist/input-Bs18T-Y3.js

@@ -0,0 +1,97 @@
+import { j as r } from "./jsx-runtime-DywqP_6a.js";
+import { c as u } from "./index-CRiPKpXj.js";
+import { c as x } from "./index-BqtVL8d-.js";
+import * as b from "react";
+import { B as g } from "./button-C5IBh3Tr.js";
+import { I as m } from "./icon-component-CxQsODCa.js";
+const p = x(
+  "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 rounded-md border bg-transparent transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        xs: "text-label-sm h-7 px-2 py-1",
+        sm: "text-label-md h-8 px-2 py-1",
+        md: "text-label-lg h-12 px-3 py-1",
+        lg: "text-label-xl h-16 px-4 py-2"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function k({
+  className: n,
+  type: s,
+  size: t,
+  iconName: l,
+  iconPosition: a = "left",
+  ...d
+}) {
+  const [i, c] = b.useState(!1), e = l ? ((o) => typeof o == "string" ? { name: o } : o)(l) : void 0, f = () => {
+    c(!i);
+  };
+  return !e && s !== "password" ? /* @__PURE__ */ r.jsx(
+    "input",
+    {
+      type: s,
+      "data-slot": "input",
+      className: u(
+        p({ size: t }),
+        "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",
+        n
+      ),
+      ...d
+    }
+  ) : /* @__PURE__ */ r.jsxs("div", { className: "relative w-full", children: [
+    e && a === "left" && /* @__PURE__ */ r.jsx("span", { className: "text-muted-foreground absolute top-1/2 left-3 -translate-y-1/2", children: /* @__PURE__ */ r.jsx(
+      m,
+      {
+        iconName: e.name,
+        stroke: e.stroke,
+        size: 20
+      }
+    ) }),
+    /* @__PURE__ */ r.jsx(
+      "input",
+      {
+        type: s === "password" ? i ? "text" : "password" : s,
+        "data-slot": "input",
+        className: u(
+          p({ size: t }),
+          "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",
+          e && a === "left" ? "pl-10" : "",
+          e && a === "right" || s === "password" ? "pr-10" : "",
+          n
+        ),
+        ...d
+      }
+    ),
+    s === "password" && /* @__PURE__ */ r.jsx(
+      g,
+      {
+        variant: "inverse",
+        type: "button",
+        size: t === "xs" || t === "sm" ? "xs" : "md",
+        tabIndex: -1,
+        "aria-label": i ? "Hide password" : "Show password",
+        className: "absolute top-1/2 right-3 -translate-y-1/2",
+        onClick: f,
+        iconName: i ? "IconEyeOff" : "IconEye"
+      }
+    ),
+    e && a === "right" && s !== "password" && /* @__PURE__ */ r.jsx("span", { className: "text-muted-foreground absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ r.jsx(
+      m,
+      {
+        iconName: e.name,
+        stroke: e.stroke,
+        size: 20
+      }
+    ) })
+  ] });
+}
+export {
+  k as I
+};

package/dist/input-wSGCWBH-.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("./jsx-runtime-BuHQgaKs.cjs"),u=require("./index-DoxiiusW.cjs"),f=require("./index-C8P6Mn4U.cjs"),b=require("react"),g=require("./button-BnSM-lrr.cjs"),c=require("./icon-component-D5YssRbR.cjs");function v(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const j=v(b),p=f.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 rounded-md border bg-transparent transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",{variants:{size:{xs:"text-label-sm h-7 px-2 py-1",sm:"text-label-md h-8 px-2 py-1",md:"text-label-lg h-12 px-3 py-1",lg:"text-label-xl h-16 px-4 py-2"}},defaultVariants:{size:"md"}});function w({className:s,type:e,size:t,iconName:i,iconPosition:a="left",...d}){const[o,x]=j.useState(!1),r=i?(l=>typeof l=="string"?{name:l}:l)(i):void 0,m=()=>{x(!o)};return!r&&e!=="password"?n.jsxRuntimeExports.jsx("input",{type:e,"data-slot":"input",className:u.cn(p({size:t}),"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",s),...d}):n.jsxRuntimeExports.jsxs("div",{className:"relative w-full",children:[r&&a==="left"&&n.jsxRuntimeExports.jsx("span",{className:"text-muted-foreground absolute top-1/2 left-3 -translate-y-1/2",children:n.jsxRuntimeExports.jsx(c.IconComponent,{iconName:r.name,stroke:r.stroke,size:20})}),n.jsxRuntimeExports.jsx("input",{type:e==="password"?o?"text":"password":e,"data-slot":"input",className:u.cn(p({size:t}),"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&&a==="left"?"pl-10":"",r&&a==="right"||e==="password"?"pr-10":"",s),...d}),e==="password"&&n.jsxRuntimeExports.jsx(g.Button,{variant:"inverse",type:"button",size:t==="xs"||t==="sm"?"xs":"md",tabIndex:-1,"aria-label":o?"Hide password":"Show password",className:"absolute top-1/2 right-3 -translate-y-1/2",onClick:m,iconName:o?"IconEyeOff":"IconEye"}),r&&a==="right"&&e!=="password"&&n.jsxRuntimeExports.jsx("span",{className:"text-muted-foreground absolute top-1/2 right-3 -translate-y-1/2",children:n.jsxRuntimeExports.jsx(c.IconComponent,{iconName:r.name,stroke:r.stroke,size:20})})]})}exports.Input=w;