xtreme-ui 0.0.106 → 0.0.107

package/dist/components/base/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Select/Select.tsx"],"names":[],"mappings":"AAeA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,MAAM,CAAC,CAAC,EAAG,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,2CA2EhD"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Select/Select.tsx"],"names":[],"mappings":"AAeA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAU,YAAY,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,MAAM,CAAC,CAAC,EAAG,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,2CA6EhD"}

package/dist/components/base/Select/Select.js

@@ -1,61 +1,62 @@
 "use client";
-import { jsxs as I, jsx as c } from "react/jsx-runtime";
-import { useState as O, useMemo as j } from "react";
-import y from "clsx";
-import z from "react-select";
-import { isEqual as d } from "../../../utils/function/common.js";
-import { Icon as H } from "../Icon/Icon.js";
+import { jsxs as O, jsx as c } from "react/jsx-runtime";
+import { useId as j, useState as y, useMemo as z } from "react";
+import H from "clsx";
+import q from "react-select";
+import { isEqual as h } from "../../../utils/function/common.js";
+import { Icon as D } from "../Icon/Icon.js";
 /* empty css            */
-function $(h) {
+function k(S) {
   const {
-    className: S,
+    className: v,
     multi: l = !1,
     placeholder: a = "Select an option",
-    noOptionsMessage: v,
+    noOptionsMessage: x,
     icon: n,
     size: i = "default",
-    iconType: x = "regular",
-    clearable: g = !0,
+    iconType: g = "regular",
+    clearable: b = !0,
     searchable: m = !0,
     disabled: C = !1,
-    loading: b = !1,
+    loading: N = !1,
     options: o,
     value: t,
     onChange: p
-  } = h, [u, f] = O(!1), N = j(() => {
+  } = S, u = j(), [f, d] = y(!1), I = z(() => {
     if (l) {
       const e = t ?? [];
-      return o.filter((s) => e.some((r) => d(s.value, r)));
+      return o.filter((s) => e.some((r) => h(s.value, r)));
     } else
-      return o.find((e) => d(e.value, t)) || null;
-  }, [l, o, t]), M = y(
+      return o.find((e) => h(e.value, t)) || null;
+  }, [l, o, t]), M = H(
     "xtrSelectWrapper",
     i && `${i}Size`,
     l ? "multi" : "single",
     n && "withIcon",
     !!t && "withValue",
-    u && "open",
+    f && "open",
     !m && "noSearch",
-    S
+    v
   );
-  return /* @__PURE__ */ I("div", { className: M, children: [
+  return /* @__PURE__ */ O("div", { className: M, children: [
     /* @__PURE__ */ c(
-      z,
+      q,
       {
         className: "xtrSelect",
         classNamePrefix: "xtrSelect",
+        id: u,
         isMulti: l,
-        menuIsOpen: u,
-        onMenuOpen: () => f(!0),
-        onMenuClose: () => f(!1),
-        noOptionsMessage: v,
+        menuIsOpen: f,
+        onMenuOpen: () => d(!0),
+        onMenuClose: () => d(!1),
+        noOptionsMessage: x,
         placeholder: a,
-        isClearable: g,
+        isClearable: b,
         isSearchable: m,
         isDisabled: C,
-        isLoading: b,
+        isLoading: N,
         options: o,
-        value: N,
+        value: I,
         onChange: (e) => {
           if (l) {
             const s = (e == null ? void 0 : e.map((r) => r.value)) ?? [];
@@ -67,10 +68,10 @@ function $(h) {
         }
       }
     ),
-    a && !l && /* @__PURE__ */ c("p", { className: "placeholder", children: a }),
-    n && /* @__PURE__ */ c(H, { className: "xtrSelectIcon", code: n, type: x })
+    a && !l && /* @__PURE__ */ c("label", { className: "placeholder", htmlFor: u, children: a }),
+    n && /* @__PURE__ */ c(D, { className: "xtrSelectIcon", code: n, type: g })
   ] });
 }
 export {
-  $ as Select
+  k as Select
 };

package/dist/components/base/Textfield/Textfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Textfield/Textfield.tsx"],"names":[],"mappings":"AAMA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,SAAS,8GAwGpB,CAAC"}
+{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../../src/components/base/Textfield/Textfield.tsx"],"names":[],"mappings":"AAMA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C,eAAO,MAAM,SAAS,8GA4GpB,CAAC"}

package/dist/components/base/Textfield/Textfield.js

@@ -1,63 +1,63 @@
 "use client";
-import { jsxs as N, jsx as r } from "react/jsx-runtime";
-import { forwardRef as k, useMemo as p } from "react";
-import D from "clsx";
-import { Icon as F } from "../Icon/Icon.js";
+import { jsxs as w, jsx as r } from "react/jsx-runtime";
+import { forwardRef as k, useId as D, useMemo as f } from "react";
+import L from "clsx";
+import { Icon as U } from "../Icon/Icon.js";
 /* empty css               */
-const L = k((w, g) => {
+const B = k((g, T) => {
   const {
-    className: T,
+    className: I,
     style: v,
     type: e = "text",
     textarea: o,
     placeholder: n,
-    autoComplete: f = "off",
+    autoComplete: m = "off",
     active: C,
-    autoFocus: m,
+    autoFocus: d,
     icon: a,
-    iconType: I = "regular",
+    iconType: E = "regular",
     value: l,
-    onChange: d,
-    onFocus: h,
-    onBlur: x,
-    onKeyUp: c,
-    onKeyDown: s,
+    onChange: h,
+    onFocus: x,
+    onBlur: y,
+    onKeyUp: s,
+    onKeyDown: c,
     onEnterKey: i
-  } = w, u = p(() => {
+  } = g, u = D(), p = f(() => {
     if (o === !0) return null;
     if (a) return a;
     if (e === "number") return "23";
     if (e === "search") return "f002";
     if (e === "password") return "f30d";
-  }, [o, a, e]), E = p(() => {
+  }, [o, a, e]), F = f(() => {
     if (n) return n;
     if (e === "number") return "Enter a number";
     if (e === "search") return "Search";
     if (e === "password") return "Enter password";
     if (e === "phone") return "Enter phone number";
-  }, [n, e]), K = p(() => e === "phone" ? "number" : e, [e]), y = (t) => {
-    c == null || c(t);
-  }, b = (t) => {
-    t.key === "Enter" && (i == null || i(t)), s == null || s(t);
-  }, j = D(
+  }, [n, e]), K = f(() => e === "phone" ? "number" : e, [e]), b = (t) => {
+    s == null || s(t);
+  }, N = (t) => {
+    t.key === "Enter" && (i == null || i(t)), c == null || c(t);
+  }, j = L(
     "xtrTextfield",
-    u && "withIcon",
+    p && "withIcon",
     o && "textarea",
     l && "hasValue",
     e === "phone" && "phone",
     C && "active",
-    T
+    I
   );
-  return /* @__PURE__ */ N(
+  return /* @__PURE__ */ w(
     "div",
     {
-      ref: g,
+      ref: T,
       className: j,
       role: "textbox",
       style: v,
       children: [
-        u && !o && /* @__PURE__ */ r(F, { code: u, type: I }),
-        e === "phone" && /* @__PURE__ */ N("div", { className: "dialCode", children: [
+        p && !o && /* @__PURE__ */ r(U, { code: p, type: E }),
+        e === "phone" && /* @__PURE__ */ w("div", { className: "dialCode", children: [
           /* @__PURE__ */ r("span", { style: { backgroundImage: "url(https://flagcdn.com/in.svg)" } }),
           /* @__PURE__ */ r("p", { children: "+91" })
         ] }),
@@ -65,36 +65,38 @@ const L = k((w, g) => {
           "textarea",
           {
             className: "input",
-            autoFocus: m,
-            autoComplete: f,
+            id: u,
+            autoFocus: d,
+            autoComplete: m,
             value: l,
-            onChange: d,
-            onFocus: h,
-            onBlur: x,
-            onKeyUp: y,
-            onKeyDown: b
+            onChange: h,
+            onFocus: x,
+            onBlur: y,
+            onKeyUp: b,
+            onKeyDown: N
           }
         ) : /* @__PURE__ */ r(
           "input",
           {
             className: "input",
+            id: u,
             type: K,
-            autoFocus: m,
-            autoComplete: f,
+            autoFocus: d,
+            autoComplete: m,
             value: l,
-            onChange: d,
-            onFocus: h,
-            onBlur: x,
-            onKeyUp: y,
-            onKeyDown: b
+            onChange: h,
+            onFocus: x,
+            onBlur: y,
+            onKeyUp: b,
+            onKeyDown: N
           }
         ),
-        /* @__PURE__ */ r("label", { className: "placeholder", children: E })
+        /* @__PURE__ */ r("label", { className: "placeholder", htmlFor: u, children: F })
       ]
     }
   );
 });
-L.displayName = "Textfield";
+B.displayName = "Textfield";
 export {
-  L as Textfield
+  B as Textfield
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xtreme-ui",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "type": "module",
   "description": "Collection of reusable components that can be used in web projects",
   "main": "dist/index.js",