@ctlyst.id/internal-ui 4.2.5 → 4.2.6

package/dist/index.d.mts

@@ -161,6 +161,7 @@ interface CheckboxComponentProps extends CheckboxProps, PropsWithChildren {
     helpText?: string;
     errorText?: string;
     boxProps?: BoxProps;
+    animated?: boolean;
 }
 declare const CheckboxComponent: _chakra_ui_react.ComponentWithAs<"input", CheckboxComponentProps>;
 

package/dist/index.d.ts

@@ -161,6 +161,7 @@ interface CheckboxComponentProps extends CheckboxProps, PropsWithChildren {
     helpText?: string;
     errorText?: string;
     boxProps?: BoxProps;
+    animated?: boolean;
 }
 declare const CheckboxComponent: _chakra_ui_react.ComponentWithAs<"input", CheckboxComponentProps>;
 

package/dist/index.js

@@ -840,22 +840,16 @@ var import_react13 = require("@chakra-ui/react");
 var Icon = __toESM(require("@ctlyst.id/internal-icon"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var CheckboxComponent = (0, import_react13.forwardRef)(
-  ({ isError = false, helpText, errorText, boxProps, children, isDisabled, ...rest }, ref) => {
+  ({ isError = false, animated = false, helpText, errorText, boxProps, children, isDisabled, ...rest }, ref) => {
     const { state } = (0, import_react13.useCheckbox)(rest);
     const variant = isError ? "errors" : "unstyled";
+    const renderIcon2 = () => {
+      if (state.isChecked) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon.Check, { size: 3, color: "inherit" });
+      if (state.isIndeterminate) return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon.MinusLine, { size: 3, color: "inherit" });
+      return void 0;
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react13.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react13.Box, { display: "flex", ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        import_react13.Checkbox,
-        {
-          variant,
-          ref,
-          ...rest,
-          isDisabled,
-          color: "white",
-          icon: state.isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon.MinusLine, { size: 3, color: "inherit" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon.Check, { size: 3, color: "inherit" }),
-          children: children && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react13.Text, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children })
-        }
-      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react13.Box, { display: "flex", ...boxProps, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react13.Checkbox, { variant, ref, ...rest, isDisabled, color: "white", icon: renderIcon2(), children: children && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react13.Text, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
       (isError && errorText || helpText) && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react13.Box, { mt: "1", ml: "6", children: isError ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react13.Text, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react13.Text, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
     ] });
   }