@clickpalm/react 1.1.1 → 1.1.2

package/dist/index.d.ts

@@ -2300,8 +2300,8 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
 
 interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
     label: string;
-    checked: boolean | 'indeterminate';
-    onCheckedChange: (checked: boolean | 'indeterminate') => void;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
     errorMessage?: string;
 }
 declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;

package/dist/index.js

@@ -2797,17 +2797,24 @@ var Container2 = styled("div", {
   flexDirection: "column",
   justifyContent: "center",
   alignItems: "center",
-  marginBottom: "$6"
+  marginBottom: "$6",
+  width: "100%"
 });
 var StyledWrapper5 = styled("div", {
   display: "flex",
-  flexDirection: "column",
-  gap: "$5"
+  flexDirection: "column"
 });
 var StyledRoot4 = styled(OneTimePasswordField.Root, {
-  display: "flex",
+  display: "grid",
   gap: "$2",
-  flexWrap: "nowrap"
+  gridTemplateColumns: "repeat(var(--otp-length), 1fr)",
+  width: "100%"
+});
+var StyledLabel3 = styled(OneTimePasswordField.Root, {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  marginBottom: "$5"
 });
 var StyledInput = styled(OneTimePasswordField.Input, {
   all: "unset",
@@ -2824,8 +2831,9 @@ var StyledInput = styled(OneTimePasswordField.Input, {
   fontSize: "$md",
   color: "$black",
   padding: "0",
-  height: "50px",
-  width: "53px",
+  width: "100%",
+  aspectRatio: "1 / 1",
+  maxWidth: "53px",
   "&:hover": {
     borderColor: "$gray_dark"
   },
@@ -2847,24 +2855,23 @@ var Span7 = styled("span", {
 // src/components/OneTimePassword/index.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...rootProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Container2, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(StyledWrapper5, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("label", { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-        StyledRoot4,
-        {
-          value,
-          onValueChange,
-          ...rootProps,
-          children: [
-            Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledInput, {}, index)),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OneTimePasswordField2.HiddenInput, {})
-          ]
-        }
-      )
-    ] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Container2, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(StyledWrapper5, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledLabel3, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      StyledRoot4,
+      {
+        value,
+        onValueChange,
+        ...rootProps,
+        style: { "--otp-length": length },
+        children: [
+          Array.from({ length }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledInput, {}, index)),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OneTimePasswordField2.HiddenInput, {})
+        ]
+      }
+    ),
     errorMessage && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Span7, { children: errorMessage })
-  ] });
+  ] }) });
 };
 OneTimePassword.displayName = "OneTimePasswordInput";
 
@@ -3097,7 +3104,8 @@ var Wrapper5 = styled("div", {
   variants: {
     orientation: {
       horizontal: {
-        flexDirection: "row",
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
         alignItems: "center",
         gap: "var(--gap)"
       },
@@ -3115,7 +3123,6 @@ var StepItem = styled("div", {
   variants: {
     orientation: {
       horizontal: {
-        flex: 1,
         flexDirection: "column",
         textAlign: "center"
       },
@@ -3128,7 +3135,7 @@ var StepItem = styled("div", {
 });
 var StepCircle = styled("div", {
   position: "relative",
-  zIndex: 999,
+  zIndex: 990,
   width: "var(--circle-size)",
   height: "var(--circle-size)",
   borderRadius: "50%",

package/dist/index.mjs

@@ -2733,17 +2733,24 @@ var Container2 = styled("div", {
   flexDirection: "column",
   justifyContent: "center",
   alignItems: "center",
-  marginBottom: "$6"
+  marginBottom: "$6",
+  width: "100%"
 });
 var StyledWrapper5 = styled("div", {
   display: "flex",
-  flexDirection: "column",
-  gap: "$5"
+  flexDirection: "column"
 });
 var StyledRoot4 = styled(OneTimePasswordField.Root, {
-  display: "flex",
+  display: "grid",
   gap: "$2",
-  flexWrap: "nowrap"
+  gridTemplateColumns: "repeat(var(--otp-length), 1fr)",
+  width: "100%"
+});
+var StyledLabel3 = styled(OneTimePasswordField.Root, {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  marginBottom: "$5"
 });
 var StyledInput = styled(OneTimePasswordField.Input, {
   all: "unset",
@@ -2760,8 +2767,9 @@ var StyledInput = styled(OneTimePasswordField.Input, {
   fontSize: "$md",
   color: "$black",
   padding: "0",
-  height: "50px",
-  width: "53px",
+  width: "100%",
+  aspectRatio: "1 / 1",
+  maxWidth: "53px",
   "&:hover": {
     borderColor: "$gray_dark"
   },
@@ -2783,24 +2791,23 @@ var Span7 = styled("span", {
 // src/components/OneTimePassword/index.tsx
 import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...rootProps }) => {
-  return /* @__PURE__ */ jsxs15(Container2, { children: [
-    /* @__PURE__ */ jsxs15(StyledWrapper5, { children: [
-      /* @__PURE__ */ jsx37("label", { children: label }),
-      /* @__PURE__ */ jsxs15(
-        StyledRoot4,
-        {
-          value,
-          onValueChange,
-          ...rootProps,
-          children: [
-            Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx37(StyledInput, {}, index)),
-            /* @__PURE__ */ jsx37(OneTimePasswordField2.HiddenInput, {})
-          ]
-        }
-      )
-    ] }),
+  return /* @__PURE__ */ jsx37(Container2, { children: /* @__PURE__ */ jsxs15(StyledWrapper5, { children: [
+    /* @__PURE__ */ jsx37(StyledLabel3, { children: label }),
+    /* @__PURE__ */ jsxs15(
+      StyledRoot4,
+      {
+        value,
+        onValueChange,
+        ...rootProps,
+        style: { "--otp-length": length },
+        children: [
+          Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx37(StyledInput, {}, index)),
+          /* @__PURE__ */ jsx37(OneTimePasswordField2.HiddenInput, {})
+        ]
+      }
+    ),
     errorMessage && /* @__PURE__ */ jsx37(Span7, { children: errorMessage })
-  ] });
+  ] }) });
 };
 OneTimePassword.displayName = "OneTimePasswordInput";
 
@@ -3033,7 +3040,8 @@ var Wrapper5 = styled("div", {
   variants: {
     orientation: {
       horizontal: {
-        flexDirection: "row",
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(100px, 1fr))",
         alignItems: "center",
         gap: "var(--gap)"
       },
@@ -3051,7 +3059,6 @@ var StepItem = styled("div", {
   variants: {
     orientation: {
       horizontal: {
-        flex: 1,
         flexDirection: "column",
         textAlign: "center"
       },
@@ -3064,7 +3071,7 @@ var StepItem = styled("div", {
 });
 var StepCircle = styled("div", {
   position: "relative",
-  zIndex: 999,
+  zIndex: 990,
   width: "var(--circle-size)",
   height: "var(--circle-size)",
   borderRadius: "50%",

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Design System da Clikpalm",
 	"author": "Enisson Shilo",
 	"license": "MIT",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"