globalfy-design-system 0.112.0 → 0.114.0

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

@@ -6,9 +6,11 @@ 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;
     isDatePicker?: boolean | undefined;
     iconAction?: (() => void) | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "color" | "onFocus" | "onBlur" | "size"> & React.RefAttributes<HTMLInputElement>>;
+    handleBlur?: ((event: React.FocusEvent<HTMLInputElement, Element>) => unknown) | undefined;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "color" | "onFocus" | "onBlur" | "onBlurCapture" | "size"> & React.RefAttributes<HTMLInputElement>>;

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

@@ -8,12 +8,14 @@ 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;
         isDatePicker?: boolean | undefined;
         iconAction?: (() => void) | undefined;
-    } & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "color" | "onFocus" | "onBlur" | "size"> & import('react').RefAttributes<HTMLInputElement>>;
+        handleBlur?: ((event: import('react').FocusEvent<HTMLInputElement, Element>) => unknown) | undefined;
+    } & Omit<import('react').InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "color" | "onFocus" | "onBlur" | "onBlurCapture" | "size"> & import('react').RefAttributes<HTMLInputElement>>;
     tags: string[];
 };
 export default meta;

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

@@ -1,14 +1,17 @@
-/// <reference types="react" />
+import { FocusEvent } from 'react';
+
 export type InputProps = {
     label: string;
     placeholder?: string;
     message?: string;
     icon?: React.ReactNode;
     isInvalid?: boolean;
+    isRequired?: boolean;
     isValid?: boolean;
     disabled?: boolean;
     value?: string;
     isDatePicker?: boolean;
     iconAction?: () => void;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "color" | "onFocus" | "onBlur">;
+    handleBlur?: (event: FocusEvent<HTMLInputElement>) => unknown;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "defaultValue" | "color" | "onFocus" | "onBlur" | "onBlurCapture">;
 export type InputPasswordProps = Omit<InputProps, "icon" | "type" | "isDatePicker">;

package/dist/globalfy-design-system.js

@@ -20943,13 +20943,15 @@ 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,
+    handleBlur: c,
+    ...u
+  }, d) => {
+    const f = 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 +20964,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",
+    }), p = 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 +20975,12 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
         },
         disabled: {
           true: "text-primary-grey-700"
+        },
+        isRequired: {
+          true: "after:content-['*']"
         }
       }
-    }), f = be({
+    }), m = be({
       base: "text-left font-satoshi text-base",
       variants: {
         disabled: {
@@ -20985,7 +20990,7 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
           true: "!cursor-pointer"
         }
       }
-    }), p = be({
+    }), h = 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 +21006,7 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
           true: "!cursor-pointer"
         }
       }
-    }), m = be({
+    }), g = be({
       base: "mt-[5px] pl-3 font-satoshi",
       variants: {
         isInvalid: {
@@ -21011,7 +21016,7 @@ const bC = uC, vC = fC, yC = hC, xC = gC, wD = ({
           true: "text-secondary-green-500"
         }
       }
-    }), h = be({
+    }), v = be({
       base: "text-primary-grey-800",
       variants: {
         iconAction: {
@@ -21019,77 +21024,78 @@ 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: y,
+      label: x,
+      domRef: I,
+      startContent: P,
+      shouldLabelBeOutside: T,
+      shouldLabelBeInside: D,
+      getBaseProps: C,
+      getLabelProps: R,
+      getInputProps: $,
+      getInnerWrapperProps: j,
+      getInputWrapperProps: F,
+      getDescriptionProps: A
     } = K9({
-      ...l,
+      ...u,
       disabled: e,
       labelPlacement: "outside",
-      ref: c,
+      ref: d,
+      onBlurCapture: c,
       classNames: {
-        input: f({ disabled: e, isDatePicker: t }),
-        inputWrapper: p({
+        input: m({ disabled: e, isDatePicker: t }),
+        inputWrapper: h({
           isInvalid: n,
           isValid: r,
           disabled: e,
           isDatePicker: t
         }),
-        base: u({
+        base: f({
           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: p({ isInvalid: n, isValid: r, disabled: e, isRequired: o }),
+        description: g({ 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(
+    }), N = /* @__PURE__ */ S.jsx("label", { ...R(), children: x }), V = se.useMemo(() => P || i ? /* @__PURE__ */ S.jsxs("div", { ...j(), children: [
+      P,
+      /* @__PURE__ */ S.jsx("input", { ...$() }),
+      i && (typeof i == "string" ? /* @__PURE__ */ S.jsx(
         lt,
         {
-          onClick: s,
-          name: a,
-          className: h({ iconAction: !!s })
+          onClick: l,
+          name: i,
+          className: v({ iconAction: !!l })
         }
-      ) : a)
-    ] }) : /* @__PURE__ */ S.jsx("input", { ...C() }), [
-      x,
-      s,
-      h,
-      a,
-      C,
-      R
+      ) : i)
+    ] }) : /* @__PURE__ */ S.jsx("input", { ...$() }), [
+      P,
+      l,
+      v,
+      i,
+      $,
+      j
     ]);
-    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(y, { ...C(), children: [
+      T ? N : null,
       /* @__PURE__ */ S.jsxs(
         "div",
         {
-          ...$(),
+          ...F(),
           role: "button",
           onClick: () => {
-            var N;
-            (N = y.current) == null || N.focus();
+            var _;
+            (_ = I.current) == null || _.focus();
           },
           children: [
-            P ? F : null,
-            A
+            D ? N : null,
+            V
           ]
         }
       ),
-      i && /* @__PURE__ */ S.jsx("div", { ...j(), children: i })
+      s && /* @__PURE__ */ S.jsx("div", { ...A(), children: s })
     ] }) });
   }
 ), ID = Ie(