globalfy-design-system 0.111.0 → 0.113.0

package/dist/components/atoms/Input/Input.d.ts

@@ -6,6 +6,7 @@ export declare const Input: React.ForwardRefExoticComponent<{
     message?: string | undefined;
     icon?: React.ReactNode;
     isInvalid?: boolean | undefined;
+    isRequired?: boolean | undefined;
     isValid?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;

package/dist/components/atoms/Input/Input.stories.d.ts

@@ -8,6 +8,7 @@ declare const meta: {
         message?: string | undefined;
         icon?: import('react').ReactNode;
         isInvalid?: boolean | undefined;
+        isRequired?: boolean | undefined;
         isValid?: boolean | undefined;
         disabled?: boolean | undefined;
         value?: string | undefined;

package/dist/components/atoms/Input/Input.types.d.ts

@@ -5,6 +5,7 @@ export type InputProps = {
     message?: string;
     icon?: React.ReactNode;
     isInvalid?: boolean;
+    isRequired?: boolean;
     isValid?: boolean;
     disabled?: boolean;
     value?: string;

package/dist/globalfy-design-system.js

@@ -20943,13 +20943,14 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
     isDatePicker: t,
     isInvalid: n,
     isValid: r,
-    className: o,
-    icon: a,
-    message: i,
-    iconAction: s,
-    ...l
-  }, c) => {
-    const u = be({
+    isRequired: o,
+    className: a,
+    icon: i,
+    message: s,
+    iconAction: l,
+    ...c
+  }, u) => {
+    const d = be({
       base: "[&_input]:data-[filled-within=true]:!bg-transparent [&_label]:data-[filled-within=true]:!left-[15px] [&_label]:data-[filled-within=true]:!top-[20px] [&_label]:data-[filled-within=true]:!ml-[1px] [&_label]:data-[filled-within=true]:!text-xs [&_label]:data-[filled-within=true]:!text-primary-grey-800",
       variants: {
         isInvalid: {
@@ -20962,8 +20963,8 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
           true: "[&_label]:data-[filled-within=true]:!text-primary-grey-700"
         }
       }
-    }), d = be({
-      base: "left-[16px] top-6 font-satoshi text-sm text-primary-grey-800",
+    }), f = be({
+      base: "left-[16px] top-6 max-w-[calc(100%-40px)] font-satoshi text-sm text-primary-grey-800",
       variants: {
         isInvalid: {
           true: "text-complementary-red-500"
@@ -20973,9 +20974,12 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
         },
         disabled: {
           true: "text-primary-grey-700"
+        },
+        isRequired: {
+          true: "after:content-['*']"
         }
       }
-    }), f = be({
+    }), p = be({
       base: "text-left font-satoshi text-base",
       variants: {
         disabled: {
@@ -20985,7 +20989,7 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
           true: "!cursor-pointer"
         }
       }
-    }), p = be({
+    }), m = be({
       base: "h-12 rounded-lg border border-primary-grey-700 !bg-white px-[15px] text-black !ring-0 !ring-offset-0",
       variants: {
         isInvalid: {
@@ -21001,7 +21005,7 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
           true: "!cursor-pointer"
         }
       }
-    }), m = be({
+    }), h = be({
       base: "mt-[5px] pl-3 font-satoshi",
       variants: {
         isInvalid: {
@@ -21011,7 +21015,7 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
           true: "text-secondary-green-500"
         }
       }
-    }), h = be({
+    }), g = be({
       base: "text-primary-grey-800",
       variants: {
         iconAction: {
@@ -21019,77 +21023,77 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
         }
       }
     }), {
-      Component: g,
-      label: v,
-      domRef: y,
-      startContent: x,
-      shouldLabelBeOutside: I,
-      shouldLabelBeInside: P,
-      getBaseProps: T,
-      getLabelProps: D,
-      getInputProps: C,
-      getInnerWrapperProps: R,
-      getInputWrapperProps: $,
-      getDescriptionProps: j
+      Component: v,
+      label: y,
+      domRef: x,
+      startContent: I,
+      shouldLabelBeOutside: P,
+      shouldLabelBeInside: T,
+      getBaseProps: D,
+      getLabelProps: C,
+      getInputProps: R,
+      getInnerWrapperProps: $,
+      getInputWrapperProps: j,
+      getDescriptionProps: F
     } = K9({
-      ...l,
+      ...c,
       disabled: e,
       labelPlacement: "outside",
-      ref: c,
+      ref: u,
       classNames: {
-        input: f({ disabled: e, isDatePicker: t }),
-        inputWrapper: p({
+        input: p({ disabled: e, isDatePicker: t }),
+        inputWrapper: m({
           isInvalid: n,
           isValid: r,
           disabled: e,
           isDatePicker: t
         }),
-        base: u({
+        base: d({
           isInvalid: n,
           isValid: r,
           disabled: e,
-          className: o
+          className: a
         }),
-        label: d({ isInvalid: n, isValid: r, disabled: e }),
-        description: m({ isInvalid: n, isValid: r })
+        label: f({ isInvalid: n, isValid: r, disabled: e, isRequired: o }),
+        description: h({ isInvalid: n, isValid: r })
       }
-    }), F = /* @__PURE__ */ S.jsx("label", { ...D(), children: v }), A = se.useMemo(() => x || a ? /* @__PURE__ */ S.jsxs("div", { ...R(), children: [
-      x,
-      /* @__PURE__ */ S.jsx("input", { ...C() }),
-      a && (typeof a == "string" ? /* @__PURE__ */ S.jsx(
+    }), A = /* @__PURE__ */ S.jsx("label", { ...C(), children: y }), N = se.useMemo(() => I || i ? /* @__PURE__ */ S.jsxs("div", { ...$(), children: [
+      I,
+      /* @__PURE__ */ S.jsx("input", { ...R() }),
+      i && (typeof i == "string" ? /* @__PURE__ */ S.jsx(
         lt,
         {
-          onClick: s,
-          name: a,
-          className: h({ iconAction: !!s })
+          onClick: l,
+          name: i,
+          className: g({ iconAction: !!l })
         }
-      ) : a)
-    ] }) : /* @__PURE__ */ S.jsx("input", { ...C() }), [
-      x,
-      s,
-      h,
-      a,
-      C,
-      R
+      ) : i)
+    ] }) : /* @__PURE__ */ S.jsx("input", { ...R() }), [
+      I,
+      l,
+      g,
+      i,
+      R,
+      $
     ]);
-    return /* @__PURE__ */ S.jsx("div", { className: "w-full", children: /* @__PURE__ */ S.jsxs(g, { ...T(), children: [
-      I ? F : null,
+    return /* @__PURE__ */ S.jsx("div", { className: "w-full", children: /* @__PURE__ */ S.jsxs(v, { ...D(), children: [
+      P ? A : null,
       /* @__PURE__ */ S.jsxs(
         "div",
         {
-          ...$(),
+          ...j(),
           role: "button",
           onClick: () => {
-            var N;
-            (N = y.current) == null || N.focus();
+            var V;
+            (V = x.current) == null || V.focus();
           },
           children: [
-            P ? F : null,
-            A
+            T ? A : null,
+            N
           ]
         }
       ),
-      i && /* @__PURE__ */ S.jsx("div", { ...j(), children: i })
+      s && /* @__PURE__ */ S.jsx("div", { ...F(), children: s })
     ] }) });
   }
 ), ID = Ie(
@@ -30837,7 +30841,7 @@ const rD = ({
         }
       }
     }), h = be({
-      base: "absolute bottom-0 right-0 mb-3 mr-4 font-inter text-xs font-normal leading-normal text-primary-grey-800",
+      base: "absolute bottom-3 right-3 font-inter text-xs font-normal leading-normal text-primary-grey-800",
       variants: {
         isInvalid: {
           true: "text-complementary-red-500"
@@ -30847,7 +30851,7 @@ const rD = ({
         }
       }
     }), g = be({
-      base: "mt-[5px] pl-3 font-inter text-xs font-normal leading-normal text-primary-grey-800",
+      base: "pl-3 font-inter text-xs font-normal leading-normal text-primary-grey-800",
       variants: {
         isInvalid: {
           true: "text-complementary-red-500"
@@ -30857,7 +30861,7 @@ const rD = ({
         }
       }
     });
-    return /* @__PURE__ */ S.jsxs(S.Fragment, { children: [
+    return /* @__PURE__ */ S.jsxs("div", { className: "flex flex-col", children: [
       /* @__PURE__ */ S.jsxs("div", { className: f(), children: [
         /* @__PURE__ */ S.jsx(
           "textarea",