@commercetools/nimbus 0.0.9-rc6 → 0.0.9-rc8

package/dist/chunks/number-input.recipe-8gbsGnLJ.js

@@ -0,0 +1,209 @@
+import { defineSlotRecipe as r } from "@chakra-ui/react";
+const e = /* @__PURE__ */ r({
+  // Unique class name prefix for the component
+  className: "nimbus-number-input",
+  // Define the slots for this multi-part component
+  slots: ["root", "input", "incrementButton", "decrementButton"],
+  // Base styles applied to all instances of the component
+  base: {
+    root: {
+      display: "inline-block",
+      position: "relative",
+      // Apply input hover styles when buttons are hovered
+      "&:has(button:hover) input": {
+        backgroundColor: "primary.2"
+      }
+    },
+    input: {
+      "--border-width": "sizes.25",
+      "--border-color": "colors.neutral.7",
+      display: "block",
+      borderRadius: "200",
+      colorPalette: "neutral",
+      focusVisibleRing: "outside",
+      bg: "transparent",
+      outline: "none",
+      appearance: "textfield",
+      width: "full",
+      _placeholder: {
+        opacity: 0.5,
+        color: "currentColor"
+      },
+      _disabled: {
+        layerStyle: "disabled"
+      },
+      "&[data-invalid='true']": {
+        "--border-color": "colors.critical.7",
+        color: "critical.11"
+      }
+    },
+    incrementButton: {
+      "--border-width": "sizes.25",
+      "--border-color": "colors.neutral.7",
+      w: 600,
+      h: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "button",
+      bg: "transparent",
+      _hover: {
+        bg: "primary.2"
+      },
+      _active: {
+        bg: "neutral.4"
+      },
+      _disabled: {
+        opacity: 0.5,
+        cursor: "not-allowed"
+      },
+      "& svg": {
+        fill: "primary.9"
+      },
+      borderTopRightRadius: "200",
+      "&[data-invalid='true']": {
+        "--border-color": "colors.critical.7"
+      }
+    },
+    decrementButton: {
+      "--border-width": "sizes.25",
+      "--border-color": "colors.neutral.7",
+      w: 600,
+      h: "50%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "button",
+      bg: "transparent",
+      _hover: {
+        bg: "primary.2"
+      },
+      _active: {
+        bg: "neutral.4"
+      },
+      _disabled: {
+        opacity: 0.5,
+        cursor: "not-allowed"
+      },
+      "& svg": {
+        fill: "primary.9"
+      },
+      borderBottomRightRadius: "200",
+      "&[data-invalid='true']": {
+        "--border-color": "colors.critical.7"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        input: {
+          h: 800,
+          textStyle: "sm",
+          px: 300,
+          paddingRight: 800
+        }
+      },
+      md: {
+        input: {
+          h: 1e3,
+          textStyle: "md",
+          px: 400,
+          paddingRight: 800
+        }
+      }
+    },
+    variant: {
+      solid: {
+        root: {
+          // Apply input hover styles when buttons are hovered for solid variant
+          "&:has(button:hover) input": {
+            backgroundColor: "primary.2"
+          }
+        },
+        input: {
+          "&[data-invalid='true']": {
+            boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+            "--border-width": "sizes.50"
+          },
+          boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+          backgroundColor: "neutral.1",
+          _hover: {
+            backgroundColor: "primary.2"
+          }
+        },
+        incrementButton: {
+          "&[data-invalid='true']": {
+            borderTop: "2px solid var(--border-color)",
+            borderRight: "2px solid var(--border-color)"
+          },
+          borderTop: "var(--border-width) solid var(--border-color)",
+          borderRight: "var(--border-width) solid var(--border-color)",
+          borderLeft: "var(--border-width) solid var(--border-color)",
+          // Half-pixel shadow to create the illusion of a complete border when paired with the other button
+          boxShadow: "inset 0 -0.5px 0 0 var(--border-color)",
+          _hover: {
+            backgroundColor: "primaryAlpha.3"
+          }
+        },
+        decrementButton: {
+          "&[data-invalid='true']": {
+            borderBottom: "2px solid var(--border-color)",
+            borderRight: "2px solid var(--border-color)"
+          },
+          borderBottom: "var(--border-width) solid var(--border-color)",
+          borderRight: "var(--border-width) solid var(--border-color)",
+          borderLeft: "var(--border-width) solid var(--border-color)",
+          // Half-pixel shadow to create the illusion of a complete border when paired with the other button
+          boxShadow: "inset 0 0.5px 0 0 var(--border-color)",
+          _hover: {
+            backgroundColor: "primaryAlpha.3"
+          }
+        }
+      },
+      ghost: {
+        root: {
+          // Apply input hover styles when buttons are hovered for ghost variant
+          "&:has(button:hover) input": {
+            backgroundColor: "primary.2"
+          }
+        },
+        input: {
+          "&[data-invalid='true']": {
+            boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+            "--border-width": "sizes.50"
+          },
+          _hover: {
+            backgroundColor: "primary.2"
+          }
+        },
+        incrementButton: {
+          "&[data-invalid='true']": {
+            borderTop: "2px solid var(--border-color)",
+            borderRight: "2px solid var(--border-color)"
+          },
+          _hover: {
+            backgroundColor: "primaryAlpha.3"
+          }
+        },
+        decrementButton: {
+          "&[data-invalid='true']": {
+            borderBottom: "2px solid var(--border-color)",
+            borderRight: "2px solid var(--border-color)"
+          },
+          _hover: {
+            backgroundColor: "primaryAlpha.3"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "solid"
+  }
+});
+export {
+  e as n
+};
+//# sourceMappingURL=number-input.recipe-8gbsGnLJ.js.map

package/dist/chunks/number-input.recipe-8gbsGnLJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.recipe-8gbsGnLJ.js","sources":["../../src/components/number-input/number-input.recipe.tsx"],"sourcesContent":["import { defineSlotRecipe } from \"@chakra-ui/react\";\n\n/**\n * Recipe configuration for the NumberInput component.\n * Defines the styling variants and base styles using Chakra UI's slot recipe system.\n */\nexport const numberInputRecipe = defineSlotRecipe({\n  // Unique class name prefix for the component\n  className: \"nimbus-number-input\",\n\n  // Define the slots for this multi-part component\n  slots: [\"root\", \"input\", \"incrementButton\", \"decrementButton\"],\n\n  // Base styles applied to all instances of the component\n  base: {\n    root: {\n      display: \"inline-block\",\n      position: \"relative\",\n      // Apply input hover styles when buttons are hovered\n      \"&:has(button:hover) input\": {\n        backgroundColor: \"primary.2\",\n      },\n    },\n    input: {\n      \"--border-width\": \"sizes.25\",\n      \"--border-color\": \"colors.neutral.7\",\n      display: \"block\",\n      borderRadius: \"200\",\n      colorPalette: \"neutral\",\n      focusVisibleRing: \"outside\",\n      bg: \"transparent\",\n      outline: \"none\",\n      appearance: \"textfield\",\n      width: \"full\",\n      _placeholder: {\n        opacity: 0.5,\n        color: \"currentColor\",\n      },\n      _disabled: {\n        layerStyle: \"disabled\",\n      },\n      \"&[data-invalid='true']\": {\n        \"--border-color\": \"colors.critical.7\",\n        color: \"critical.11\",\n      },\n    },\n    incrementButton: {\n      \"--border-width\": \"sizes.25\",\n      \"--border-color\": \"colors.neutral.7\",\n      w: 600,\n      h: \"50%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      cursor: \"button\",\n      bg: \"transparent\",\n      _hover: {\n        bg: \"primary.2\",\n      },\n      _active: {\n        bg: \"neutral.4\",\n      },\n      _disabled: {\n        opacity: 0.5,\n        cursor: \"not-allowed\",\n      },\n      \"& svg\": {\n        fill: \"primary.9\",\n      },\n      borderTopRightRadius: \"200\",\n      \"&[data-invalid='true']\": {\n        \"--border-color\": \"colors.critical.7\",\n      },\n    },\n    decrementButton: {\n      \"--border-width\": \"sizes.25\",\n      \"--border-color\": \"colors.neutral.7\",\n      w: 600,\n      h: \"50%\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      cursor: \"button\",\n      bg: \"transparent\",\n      _hover: {\n        bg: \"primary.2\",\n      },\n      _active: {\n        bg: \"neutral.4\",\n      },\n      _disabled: {\n        opacity: 0.5,\n        cursor: \"not-allowed\",\n      },\n      \"& svg\": {\n        fill: \"primary.9\",\n      },\n      borderBottomRightRadius: \"200\",\n      \"&[data-invalid='true']\": {\n        \"--border-color\": \"colors.critical.7\",\n      },\n    },\n  },\n\n  variants: {\n    size: {\n      sm: {\n        input: {\n          h: 800,\n          textStyle: \"sm\",\n          px: 300,\n          paddingRight: 800,\n        },\n      },\n      md: {\n        input: {\n          h: 1000,\n          textStyle: \"md\",\n          px: 400,\n          paddingRight: 800,\n        },\n      },\n    },\n\n    variant: {\n      solid: {\n        root: {\n          // Apply input hover styles when buttons are hovered for solid variant\n          \"&:has(button:hover) input\": {\n            backgroundColor: \"primary.2\",\n          },\n        },\n        input: {\n          \"&[data-invalid='true']\": {\n            boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n            \"--border-width\": \"sizes.50\",\n          },\n          boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n          backgroundColor: \"neutral.1\",\n          _hover: {\n            backgroundColor: \"primary.2\",\n          },\n        },\n        incrementButton: {\n          \"&[data-invalid='true']\": {\n            borderTop: \"2px solid var(--border-color)\",\n            borderRight: \"2px solid var(--border-color)\",\n          },\n          borderTop: \"var(--border-width) solid var(--border-color)\",\n          borderRight: \"var(--border-width) solid var(--border-color)\",\n          borderLeft: \"var(--border-width) solid var(--border-color)\",\n          // Half-pixel shadow to create the illusion of a complete border when paired with the other button\n          boxShadow: \"inset 0 -0.5px 0 0 var(--border-color)\",\n          _hover: {\n            backgroundColor: \"primaryAlpha.3\",\n          },\n        },\n        decrementButton: {\n          \"&[data-invalid='true']\": {\n            borderBottom: \"2px solid var(--border-color)\",\n            borderRight: \"2px solid var(--border-color)\",\n          },\n          borderBottom: \"var(--border-width) solid var(--border-color)\",\n          borderRight: \"var(--border-width) solid var(--border-color)\",\n          borderLeft: \"var(--border-width) solid var(--border-color)\",\n          // Half-pixel shadow to create the illusion of a complete border when paired with the other button\n          boxShadow: \"inset 0 0.5px 0 0 var(--border-color)\",\n          _hover: {\n            backgroundColor: \"primaryAlpha.3\",\n          },\n        },\n      },\n      ghost: {\n        root: {\n          // Apply input hover styles when buttons are hovered for ghost variant\n          \"&:has(button:hover) input\": {\n            backgroundColor: \"primary.2\",\n          },\n        },\n        input: {\n          \"&[data-invalid='true']\": {\n            boxShadow: \"inset 0 0 0 var(--border-width) var(--border-color)\",\n            \"--border-width\": \"sizes.50\",\n          },\n          _hover: {\n            backgroundColor: \"primary.2\",\n          },\n        },\n        incrementButton: {\n          \"&[data-invalid='true']\": {\n            borderTop: \"2px solid var(--border-color)\",\n            borderRight: \"2px solid var(--border-color)\",\n          },\n          _hover: {\n            backgroundColor: \"primaryAlpha.3\",\n          },\n        },\n        decrementButton: {\n          \"&[data-invalid='true']\": {\n            borderBottom: \"2px solid var(--border-color)\",\n            borderRight: \"2px solid var(--border-color)\",\n          },\n          _hover: {\n            backgroundColor: \"primaryAlpha.3\",\n          },\n        },\n      },\n    },\n  },\n\n  defaultVariants: {\n    size: \"md\",\n    variant: \"solid\",\n  },\n});\n"],"names":["numberInputRecipe","defineSlotRecipe"],"mappings":";AAMO,MAAMA,IAAoB,gBAAAC,EAAiB;AAAA;AAAA,EAEhD,WAAW;AAAA;AAAA,EAGX,OAAO,CAAC,QAAQ,SAAS,mBAAmB,iBAAiB;AAAA;AAAA,EAG7D,MAAM;AAAA,IACJ,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,UAAU;AAAA;AAAA,MAEV,6BAA6B;AAAA,QAC3B,iBAAiB;AAAA,MAAA;AAAA,IAErB;AAAA,IACA,OAAO;AAAA,MACL,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,SAAS;AAAA,MACT,cAAc;AAAA,MACd,cAAc;AAAA,MACd,kBAAkB;AAAA,MAClB,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,OAAO;AAAA,MACP,cAAc;AAAA,QACZ,SAAS;AAAA,QACT,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA,QACT,YAAY;AAAA,MACd;AAAA,MACA,0BAA0B;AAAA,QACxB,kBAAkB;AAAA,QAClB,OAAO;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,iBAAiB;AAAA,MACf,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,QAAQ;AAAA,QACN,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,sBAAsB;AAAA,MACtB,0BAA0B;AAAA,QACxB,kBAAkB;AAAA,MAAA;AAAA,IAEtB;AAAA,IACA,iBAAiB;AAAA,MACf,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,MAClB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,IAAI;AAAA,MACJ,QAAQ;AAAA,QACN,IAAI;AAAA,MACN;AAAA,MACA,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,MACA,WAAW;AAAA,QACT,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,yBAAyB;AAAA,MACzB,0BAA0B;AAAA,QACxB,kBAAkB;AAAA,MAAA;AAAA,IACpB;AAAA,EAEJ;AAAA,EAEA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,QACF,OAAO;AAAA,UACL,GAAG;AAAA,UACH,WAAW;AAAA,UACX,IAAI;AAAA,UACJ,cAAc;AAAA,QAAA;AAAA,MAElB;AAAA,MACA,IAAI;AAAA,QACF,OAAO;AAAA,UACL,GAAG;AAAA,UACH,WAAW;AAAA,UACX,IAAI;AAAA,UACJ,cAAc;AAAA,QAAA;AAAA,MAChB;AAAA,IAEJ;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,MAAM;AAAA;AAAA,UAEJ,6BAA6B;AAAA,YAC3B,iBAAiB;AAAA,UAAA;AAAA,QAErB;AAAA,QACA,OAAO;AAAA,UACL,0BAA0B;AAAA,YACxB,WAAW;AAAA,YACX,kBAAkB;AAAA,UACpB;AAAA,UACA,WAAW;AAAA,UACX,iBAAiB;AAAA,UACjB,QAAQ;AAAA,YACN,iBAAiB;AAAA,UAAA;AAAA,QAErB;AAAA,QACA,iBAAiB;AAAA,UACf,0BAA0B;AAAA,YACxB,WAAW;AAAA,YACX,aAAa;AAAA,UACf;AAAA,UACA,WAAW;AAAA,UACX,aAAa;AAAA,UACb,YAAY;AAAA;AAAA,UAEZ,WAAW;AAAA,UACX,QAAQ;AAAA,YACN,iBAAiB;AAAA,UAAA;AAAA,QAErB;AAAA,QACA,iBAAiB;AAAA,UACf,0BAA0B;AAAA,YACxB,cAAc;AAAA,YACd,aAAa;AAAA,UACf;AAAA,UACA,cAAc;AAAA,UACd,aAAa;AAAA,UACb,YAAY;AAAA;AAAA,UAEZ,WAAW;AAAA,UACX,QAAQ;AAAA,YACN,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MAEJ;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA;AAAA,UAEJ,6BAA6B;AAAA,YAC3B,iBAAiB;AAAA,UAAA;AAAA,QAErB;AAAA,QACA,OAAO;AAAA,UACL,0BAA0B;AAAA,YACxB,WAAW;AAAA,YACX,kBAAkB;AAAA,UACpB;AAAA,UACA,QAAQ;AAAA,YACN,iBAAiB;AAAA,UAAA;AAAA,QAErB;AAAA,QACA,iBAAiB;AAAA,UACf,0BAA0B;AAAA,YACxB,WAAW;AAAA,YACX,aAAa;AAAA,UACf;AAAA,UACA,QAAQ;AAAA,YACN,iBAAiB;AAAA,UAAA;AAAA,QAErB;AAAA,QACA,iBAAiB;AAAA,UACf,0BAA0B;AAAA,YACxB,cAAc;AAAA,YACd,aAAa;AAAA,UACf;AAAA,UACA,QAAQ;AAAA,YACN,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,MACF;AAAA,IACF;AAAA,EAEJ;AAAA,EAEA,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC;"}

package/dist/chunks/password-input-BD5GZKX7.js

@@ -0,0 +1,2 @@
+"use strict";const s=require("react/jsx-runtime"),e=require("react"),n=require("./box-FU6tRPFs.js"),b=require("./icon-button-Ds1Wzyc1.js"),r=require("./tooltip-C-K5iatf.js"),j=require("./text-input-CtJ2FHJ3.js"),a=require("@commercetools/nimbus-icons"),c=e.forwardRef((i,d)=>{const{size:t="md",isDisabled:l}=i,[o,u]=e.useState(!1),p=()=>u(!o),x=t==="md"?"xs":"2xs",w=t==="md"?{top:"100",right:"400"}:{top:"50",right:"400"},h=t==="md"?"1400":"1100";return s.jsxs(n.Box,{display:"inline-block",position:"relative",children:[s.jsx(j.TextInput,{width:"full",ref:d,type:o?"text":"password",...i,pr:h}),s.jsx(n.Box,{position:"absolute",...w,children:s.jsxs(r.Tooltip.Root,{children:[s.jsx(b.IconButton,{size:x,variant:"ghost",tone:"primary","aria-label":o?"Hide password":"Show password",onPress:p,isDisabled:l,children:o?s.jsx(a.VisibilityOff,{}):s.jsx(a.Visibility,{})}),s.jsx(r.Tooltip.Content,{children:o?"Hide password":"Show Password"})]})})]})});c.displayName="PasswordInput";exports.PasswordInput=c;
+//# sourceMappingURL=password-input-BD5GZKX7.js.map

package/dist/chunks/password-input-BD5GZKX7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input-BD5GZKX7.js","sources":["../../src/components/password-input/password-input.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { Box, IconButton, Tooltip } from \"@/components\";\nimport { TextInput } from \"@/components/text-input\";\nimport { Visibility, VisibilityOff } from \"@commercetools/nimbus-icons\";\nimport type { PasswordInputProps } from \"./password-input.types\";\n\n/**\n * PasswordInput\n * ============================================================\n * An input component that takes in password as input with toggleable visibility\n *\n * Features:\n *\n * - Based on TextInput with added password visibility toggle\n * - Allows toggling between type=\"password\" and type=\"text\"\n * - Positions the toggle button at the right edge of the input\n * - Inherits all TextInput features and props\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, forwardedRef) => {\n    const { size = \"md\", isDisabled } = props;\n    const [showPassword, setShowPassword] = useState(false);\n    const toggleVisibility = () => setShowPassword(!showPassword);\n\n    /** size icon based on input size */\n    const iconSize = size === \"md\" ? \"xs\" : \"2xs\";\n    /**\n     * position the icon button at the right edge of the input based on\n     * the size of the input\n     */\n    const iconPositionProps =\n      size === \"md\"\n        ? {\n            top: \"100\",\n            right: \"400\",\n          }\n        : {\n            top: \"50\",\n            right: \"400\",\n          };\n\n    /** safe space between the text within the input and the icon button */\n    const iconButtonSafeSpace = size === \"md\" ? \"1400\" : \"1100\";\n\n    return (\n      <Box display=\"inline-block\" position=\"relative\">\n        <TextInput\n          width=\"full\"\n          ref={forwardedRef}\n          type={showPassword ? \"text\" : \"password\"}\n          {...props}\n          pr={iconButtonSafeSpace}\n        />\n        <Box position=\"absolute\" {...iconPositionProps}>\n          <Tooltip.Root>\n            <IconButton\n              size={iconSize}\n              variant=\"ghost\"\n              tone=\"primary\"\n              aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n              onPress={toggleVisibility}\n              isDisabled={isDisabled}\n            >\n              {showPassword ? <VisibilityOff /> : <Visibility />}\n            </IconButton>\n            <Tooltip.Content>\n              {showPassword ? \"Hide password\" : \"Show Password\"}\n            </Tooltip.Content>\n          </Tooltip.Root>\n        </Box>\n      </Box>\n    );\n  }\n);\n\nPasswordInput.displayName = \"PasswordInput\";\n"],"names":["PasswordInput","forwardRef","props","forwardedRef","size","isDisabled","showPassword","setShowPassword","useState","toggleVisibility","iconSize","iconPositionProps","iconButtonSafeSpace","jsxs","Box","jsx","TextInput","Tooltip","IconButton","VisibilityOff","Visibility"],"mappings":"6PAkBaA,EAAgBC,EAAA,WAC3B,CAACC,EAAOC,IAAiB,CACvB,KAAM,CAAE,KAAAC,EAAO,KAAM,WAAAC,CAAe,EAAAH,EAC9B,CAACI,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAChDC,EAAmB,IAAMF,EAAgB,CAACD,CAAY,EAGtDI,EAAWN,IAAS,KAAO,KAAO,MAKlCO,EACJP,IAAS,KACL,CACE,IAAK,MACL,MAAO,KAAA,EAET,CACE,IAAK,KACL,MAAO,KACT,EAGAQ,EAAsBR,IAAS,KAAO,OAAS,OAErD,OACGS,EAAAA,KAAAC,EAAAA,IAAA,CAAI,QAAQ,eAAe,SAAS,WACnC,SAAA,CAAAC,EAAA,IAACC,EAAA,UAAA,CACC,MAAM,OACN,IAAKb,EACL,KAAMG,EAAe,OAAS,WAC7B,GAAGJ,EACJ,GAAIU,CAAA,CACN,EACAG,EAAAA,IAACD,OAAI,SAAS,WAAY,GAAGH,EAC3B,SAAAE,OAACI,EAAAA,QAAQ,KAAR,CACC,SAAA,CAAAF,EAAA,IAACG,EAAA,WAAA,CACC,KAAMR,EACN,QAAQ,QACR,KAAK,UACL,aAAYJ,EAAe,gBAAkB,gBAC7C,QAASG,EACT,WAAAJ,EAEC,SAAeC,EAAAS,MAACI,EAAAA,cAAc,CAAA,CAAA,QAAMC,EAAAA,WAAW,CAAA,CAAA,CAAA,CAClD,QACCH,EAAQ,QAAA,QAAR,CACE,SAAAX,EAAe,gBAAkB,eACpC,CAAA,CAAA,CAAA,CACF,CACF,CAAA,CAAA,EACF,CAAA,CAGN,EAEAN,EAAc,YAAc"}

package/dist/chunks/password-input-fiypX-6w.js

@@ -0,0 +1,50 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { forwardRef as f, useState as w } from "react";
+import { B as e } from "./box-DD4jYgS7.js";
+import { I as h } from "./icon-button-DVBfoOHT.js";
+import { b as n } from "./tooltip-DvoZxHgo.js";
+import { T as u } from "./text-input-SYXEV4sT.js";
+import { VisibilityOff as P, Visibility as S } from "@commercetools/nimbus-icons";
+const b = /* @__PURE__ */ f(
+  (t, a) => {
+    const { size: i = "md", isDisabled: p } = t, [s, d] = w(!1), l = () => d(!s), c = i === "md" ? "xs" : "2xs", m = i === "md" ? {
+      top: "100",
+      right: "400"
+    } : {
+      top: "50",
+      right: "400"
+    };
+    return /* @__PURE__ */ r(e, { display: "inline-block", position: "relative", children: [
+      /* @__PURE__ */ o(
+        u,
+        {
+          width: "full",
+          ref: a,
+          type: s ? "text" : "password",
+          ...t,
+          pr: i === "md" ? "1400" : "1100"
+        }
+      ),
+      /* @__PURE__ */ o(e, { position: "absolute", ...m, children: /* @__PURE__ */ r(n.Root, { children: [
+        /* @__PURE__ */ o(
+          h,
+          {
+            size: c,
+            variant: "ghost",
+            tone: "primary",
+            "aria-label": s ? "Hide password" : "Show password",
+            onPress: l,
+            isDisabled: p,
+            children: s ? /* @__PURE__ */ o(P, {}) : /* @__PURE__ */ o(S, {})
+          }
+        ),
+        /* @__PURE__ */ o(n.Content, { children: s ? "Hide password" : "Show Password" })
+      ] }) })
+    ] });
+  }
+);
+b.displayName = "PasswordInput";
+export {
+  b as P
+};
+//# sourceMappingURL=password-input-fiypX-6w.js.map

package/dist/chunks/password-input-fiypX-6w.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-input-fiypX-6w.js","sources":["../../src/components/password-input/password-input.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { Box, IconButton, Tooltip } from \"@/components\";\nimport { TextInput } from \"@/components/text-input\";\nimport { Visibility, VisibilityOff } from \"@commercetools/nimbus-icons\";\nimport type { PasswordInputProps } from \"./password-input.types\";\n\n/**\n * PasswordInput\n * ============================================================\n * An input component that takes in password as input with toggleable visibility\n *\n * Features:\n *\n * - Based on TextInput with added password visibility toggle\n * - Allows toggling between type=\"password\" and type=\"text\"\n * - Positions the toggle button at the right edge of the input\n * - Inherits all TextInput features and props\n */\nexport const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n  (props, forwardedRef) => {\n    const { size = \"md\", isDisabled } = props;\n    const [showPassword, setShowPassword] = useState(false);\n    const toggleVisibility = () => setShowPassword(!showPassword);\n\n    /** size icon based on input size */\n    const iconSize = size === \"md\" ? \"xs\" : \"2xs\";\n    /**\n     * position the icon button at the right edge of the input based on\n     * the size of the input\n     */\n    const iconPositionProps =\n      size === \"md\"\n        ? {\n            top: \"100\",\n            right: \"400\",\n          }\n        : {\n            top: \"50\",\n            right: \"400\",\n          };\n\n    /** safe space between the text within the input and the icon button */\n    const iconButtonSafeSpace = size === \"md\" ? \"1400\" : \"1100\";\n\n    return (\n      <Box display=\"inline-block\" position=\"relative\">\n        <TextInput\n          width=\"full\"\n          ref={forwardedRef}\n          type={showPassword ? \"text\" : \"password\"}\n          {...props}\n          pr={iconButtonSafeSpace}\n        />\n        <Box position=\"absolute\" {...iconPositionProps}>\n          <Tooltip.Root>\n            <IconButton\n              size={iconSize}\n              variant=\"ghost\"\n              tone=\"primary\"\n              aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n              onPress={toggleVisibility}\n              isDisabled={isDisabled}\n            >\n              {showPassword ? <VisibilityOff /> : <Visibility />}\n            </IconButton>\n            <Tooltip.Content>\n              {showPassword ? \"Hide password\" : \"Show Password\"}\n            </Tooltip.Content>\n          </Tooltip.Root>\n        </Box>\n      </Box>\n    );\n  }\n);\n\nPasswordInput.displayName = \"PasswordInput\";\n"],"names":["PasswordInput","forwardRef","props","forwardedRef","size","isDisabled","showPassword","setShowPassword","useState","toggleVisibility","iconSize","iconPositionProps","jsxs","Box","jsx","TextInput","Tooltip","IconButton","VisibilityOff","Visibility"],"mappings":";;;;;;;AAkBO,MAAMA,IAAgB,gBAAAC;AAAA,EAC3B,CAACC,GAAOC,MAAiB;AACvB,UAAM,EAAE,MAAAC,IAAO,MAAM,YAAAC,EAAe,IAAAH,GAC9B,CAACI,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChDC,IAAmB,MAAMF,EAAgB,CAACD,CAAY,GAGtDI,IAAWN,MAAS,OAAO,OAAO,OAKlCO,IACJP,MAAS,OACL;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,IAAA,IAET;AAAA,MACE,KAAK;AAAA,MACL,OAAO;AAAA,IACT;AAKN,WACG,gBAAAQ,EAAAC,GAAA,EAAI,SAAQ,gBAAe,UAAS,YACnC,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,KAAKZ;AAAA,UACL,MAAMG,IAAe,SAAS;AAAA,UAC7B,GAAGJ;AAAA,UACJ,IATsBE,MAAS,OAAO,SAAS;AAAA,QAS3C;AAAA,MACN;AAAA,MACA,gBAAAU,EAACD,KAAI,UAAS,YAAY,GAAGF,GAC3B,UAAA,gBAAAC,EAACI,EAAQ,MAAR,EACC,UAAA;AAAA,QAAA,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,MAAMP;AAAA,YACN,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,cAAYJ,IAAe,kBAAkB;AAAA,YAC7C,SAASG;AAAA,YACT,YAAAJ;AAAA,YAEC,UAAeC,IAAA,gBAAAQ,EAACI,GAAc,CAAA,CAAA,sBAAMC,GAAW,CAAA,CAAA;AAAA,UAAA;AAAA,QAClD;AAAA,0BACCH,EAAQ,SAAR,EACE,UAAAV,IAAe,kBAAkB,gBACpC,CAAA;AAAA,MAAA,EAAA,CACF,EACF,CAAA;AAAA,IAAA,GACF;AAAA,EAAA;AAGN;AAEAN,EAAc,cAAc;"}

package/dist/chunks/radio-input-4v_6tT94.js

@@ -0,0 +1,319 @@
+import { jsx as D, jsxs as W, Fragment as A } from "react/jsx-runtime";
+import { createSlotRecipeContext as G, useSlotRecipe as j } from "@chakra-ui/react";
+import { r as H } from "./radio-input.recipe-CM9R2ilP.js";
+import { $ as O, f as K, d as U, a as M, b as z, c as J, e as Q } from "./utils-7n9JR4ke.js";
+import { $ as X, a as Y, b as Z } from "./Form-DdaqVtM4.js";
+import { $ as ee } from "./Text-DOcU1ycg.js";
+import { $ as y, c as ae } from "./mergeProps-tCFA9wZ1.js";
+import { $ as F } from "./filterDOMProps-D6KHYVBX.js";
+import { $ as ie } from "./useObjectRef-CaJ5pgjX.js";
+import g, { useMemo as q, useState as de, forwardRef as w, createContext as B } from "react";
+import { $ as re } from "./useFormReset-BgCb2h6r.js";
+import { $ as C } from "./usePress-Dk0M2Js8.js";
+import { $ as te } from "./useFocusable-DBEQCS1T.js";
+import { a as oe, $ as le } from "./useFormValidation-DoG8pVu2.js";
+import { a as se } from "./FocusScope-CsXy0kJw.js";
+import { $ as ne } from "./useFocusWithin-AKRo9mz0.js";
+import { $ as ce } from "./useField-BY58-2Ft.js";
+import { $ as ue } from "./context-CI0Y3O6x.js";
+import { $ as k } from "./useFocusRing-DNviWqC5.js";
+import { $ as fe } from "./useHover-3Zee5Ds5.js";
+import { $ as $e } from "./VisuallyHidden-2REhp9RT.js";
+import { $ as be } from "./useControlledState-u436Wbp1.js";
+import { e as E } from "./extractStyleProps-CxgBrz3O.js";
+import { RadioButtonChecked as pe, RadioButtonUnchecked as ve } from "@commercetools/nimbus-icons";
+const _ = /* @__PURE__ */ new WeakMap();
+function me(a, e, d) {
+  let { value: t, children: o, "aria-label": r, "aria-labelledby": l } = a;
+  const i = a.isDisabled || e.isDisabled;
+  let c = o != null, f = r != null || l != null;
+  !c && !f && process.env.NODE_ENV !== "production" && console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+  let s = e.selectedValue === t, v = (x) => {
+    x.stopPropagation(), e.setSelectedValue(t);
+  }, { pressProps: m, isPressed: P } = C({
+    isDisabled: i
+  }), { pressProps: h, isPressed: b } = C({
+    isDisabled: i,
+    onPress() {
+      var x;
+      e.setSelectedValue(t), (x = d.current) === null || x === void 0 || x.focus();
+    }
+  }), { focusableProps: S } = te(y(a, {
+    onFocus: () => e.setLastFocusedValue(t)
+  }), d), I = y(m, S), V = F(a, {
+    labelable: !0
+  }), p = -1;
+  e.selectedValue != null ? e.selectedValue === t && (p = 0) : (e.lastFocusedValue === t || e.lastFocusedValue == null) && (p = 0), i && (p = void 0);
+  let { name: $, descriptionId: n, errorMessageId: R, validationBehavior: u } = _.get(e);
+  return re(d, e.selectedValue, e.setSelectedValue), oe({
+    validationBehavior: u
+  }, e, d), {
+    labelProps: y(h, {
+      onClick: (x) => x.preventDefault()
+    }),
+    inputProps: y(V, {
+      ...I,
+      type: "radio",
+      name: $,
+      tabIndex: p,
+      disabled: i,
+      required: e.isRequired && u === "native",
+      checked: s,
+      value: t,
+      onChange: v,
+      "aria-describedby": [
+        a["aria-describedby"],
+        e.isInvalid ? R : null,
+        n
+      ].filter(Boolean).join(" ") || void 0
+    }),
+    isDisabled: i,
+    isSelected: s,
+    isPressed: P || b
+  };
+}
+function Pe(a, e) {
+  let { name: d, isReadOnly: t, isRequired: o, isDisabled: r, orientation: l = "vertical", validationBehavior: i = "aria" } = a, { direction: c } = ue(), { isInvalid: f, validationErrors: s, validationDetails: v } = e.displayValidation, { labelProps: m, fieldProps: P, descriptionProps: h, errorMessageProps: b } = ce({
+    ...a,
+    // Radio group is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: "span",
+    isInvalid: e.isInvalid,
+    errorMessage: a.errorMessage || s
+  }), S = F(a, {
+    labelable: !0
+  }), { focusWithinProps: I } = ne({
+    onBlurWithin($) {
+      var n;
+      (n = a.onBlur) === null || n === void 0 || n.call(a, $), e.selectedValue || e.setLastFocusedValue(null);
+    },
+    onFocusWithin: a.onFocus,
+    onFocusWithinChange: a.onFocusChange
+  }), V = ($) => {
+    let n;
+    switch ($.key) {
+      case "ArrowRight":
+        c === "rtl" && l !== "vertical" ? n = "prev" : n = "next";
+        break;
+      case "ArrowLeft":
+        c === "rtl" && l !== "vertical" ? n = "next" : n = "prev";
+        break;
+      case "ArrowDown":
+        n = "next";
+        break;
+      case "ArrowUp":
+        n = "prev";
+        break;
+      default:
+        return;
+    }
+    $.preventDefault();
+    let R = se($.currentTarget, {
+      from: $.target
+    }), u;
+    n === "next" ? (u = R.nextNode(), u || (R.currentNode = $.currentTarget, u = R.firstChild())) : (u = R.previousNode(), u || (R.currentNode = $.currentTarget, u = R.lastChild())), u && (u.focus(), e.setSelectedValue(u.value));
+  }, p = ae(d);
+  return _.set(e, {
+    name: p,
+    descriptionId: h.id,
+    errorMessageId: b.id,
+    validationBehavior: i
+  }), {
+    radioGroupProps: y(S, {
+      // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
+      role: "radiogroup",
+      onKeyDown: V,
+      "aria-invalid": e.isInvalid || void 0,
+      "aria-errormessage": a["aria-errormessage"],
+      "aria-readonly": t || void 0,
+      "aria-required": o || void 0,
+      "aria-disabled": r || void 0,
+      "aria-orientation": l,
+      ...P,
+      ...I
+    }),
+    labelProps: m,
+    descriptionProps: h,
+    errorMessageProps: b,
+    isInvalid: f,
+    validationErrors: s,
+    validationDetails: v
+  };
+}
+let he = /* @__PURE__ */ Math.round(/* @__PURE__ */ Math.random() * 1e10), Re = 0;
+function xe(a) {
+  let e = q(() => a.name || `radio-group-${he}-${++Re}`, [
+    a.name
+  ]);
+  var d;
+  let [t, o] = be(a.value, (d = a.defaultValue) !== null && d !== void 0 ? d : null, a.onChange), [r, l] = de(null), i = le({
+    ...a,
+    value: t
+  }), c = (s) => {
+    !a.isReadOnly && !a.isDisabled && (o(s), i.commitValidation());
+  }, f = i.displayValidation.isInvalid;
+  return {
+    ...i,
+    name: e,
+    selectedValue: t,
+    setSelectedValue: c,
+    lastFocusedValue: r,
+    setLastFocusedValue: l,
+    isDisabled: a.isDisabled || !1,
+    isReadOnly: a.isReadOnly || !1,
+    isRequired: a.isRequired || !1,
+    validationState: a.validationState || (f ? "invalid" : null),
+    isInvalid: f
+  };
+}
+const ye = /* @__PURE__ */ B(null), Ie = /* @__PURE__ */ B(null), N = /* @__PURE__ */ B(null), Ve = /* @__PURE__ */ w(function(e, d) {
+  [e, d] = O(e, d, ye);
+  let { validationBehavior: t } = z(X) || {};
+  var o, r;
+  let l = (r = (o = e.validationBehavior) !== null && o !== void 0 ? o : t) !== null && r !== void 0 ? r : "native", i = xe({
+    ...e,
+    validationBehavior: l
+  }), [c, f] = J(!e["aria-label"] && !e["aria-labelledby"]), { radioGroupProps: s, labelProps: v, descriptionProps: m, errorMessageProps: P, ...h } = Pe({
+    ...e,
+    label: f,
+    validationBehavior: l
+  }, i), b = M({
+    ...e,
+    values: {
+      orientation: e.orientation || "vertical",
+      isDisabled: i.isDisabled,
+      isReadOnly: i.isReadOnly,
+      isRequired: i.isRequired,
+      isInvalid: i.isInvalid,
+      state: i
+    },
+    defaultClassName: "react-aria-RadioGroup"
+  });
+  return /* @__PURE__ */ g.createElement("div", {
+    ...s,
+    ...b,
+    ref: d,
+    slot: e.slot || void 0,
+    "data-orientation": e.orientation || "vertical",
+    "data-invalid": i.isInvalid || void 0,
+    "data-disabled": i.isDisabled || void 0,
+    "data-readonly": i.isReadOnly || void 0,
+    "data-required": i.isRequired || void 0
+  }, /* @__PURE__ */ g.createElement(Q, {
+    values: [
+      [
+        N,
+        i
+      ],
+      [
+        Y,
+        {
+          ...v,
+          ref: c,
+          elementType: "span"
+        }
+      ],
+      [
+        ee,
+        {
+          slots: {
+            description: m,
+            errorMessage: P
+          }
+        }
+      ],
+      [
+        Z,
+        h
+      ]
+    ]
+  }, b.children));
+}), De = /* @__PURE__ */ w(function(e, d) {
+  let { inputRef: t = null, ...o } = e;
+  [e, d] = O(o, d, Ie);
+  let r = g.useContext(N), l = ie(q(() => K(t, e.inputRef !== void 0 ? e.inputRef : null), [
+    t,
+    e.inputRef
+  ])), { labelProps: i, inputProps: c, isSelected: f, isDisabled: s, isPressed: v } = me({
+    ...U(e),
+    // ReactNode type doesn't allow function children.
+    children: typeof e.children == "function" ? !0 : e.children
+  }, r, l), { isFocused: m, isFocusVisible: P, focusProps: h } = k(), b = s || r.isReadOnly, { hoverProps: S, isHovered: I } = fe({
+    ...e,
+    isDisabled: b
+  }), V = M({
+    ...e,
+    defaultClassName: "react-aria-Radio",
+    values: {
+      isSelected: f,
+      isPressed: v,
+      isHovered: I,
+      isFocused: m,
+      isFocusVisible: P,
+      isDisabled: s,
+      isReadOnly: r.isReadOnly,
+      isInvalid: r.isInvalid,
+      isRequired: r.isRequired
+    }
+  }), p = F(e);
+  return delete p.id, /* @__PURE__ */ g.createElement("label", {
+    ...y(p, i, S, V),
+    ref: d,
+    "data-selected": f || void 0,
+    "data-pressed": v || void 0,
+    "data-hovered": I || void 0,
+    "data-focused": m || void 0,
+    "data-focus-visible": P || void 0,
+    "data-disabled": s || void 0,
+    "data-readonly": r.isReadOnly || void 0,
+    "data-invalid": r.isInvalid || void 0,
+    "data-required": r.isRequired || void 0
+  }, /* @__PURE__ */ g.createElement($e, {
+    elementType: "span"
+  }, /* @__PURE__ */ g.createElement("input", {
+    ...y(c, h),
+    ref: l
+  })), V.children);
+}), { withProvider: ge, withContext: Se } = /* @__PURE__ */ G({
+  key: "radioInput"
+}), Fe = /* @__PURE__ */ ge("div", "root"), Be = /* @__PURE__ */ Se("span", "option"), L = (a) => {
+  const e = j({ recipe: H }), [d, t] = e.splitVariantProps(a), [o, r] = E(t);
+  return /* @__PURE__ */ D(Fe, { ...d, ...o, asChild: !0, children: /* @__PURE__ */ D(Ve, { ...r, children: a.children }) });
+};
+L.displayName = "RadioInputRoot";
+const T = ({
+  children: a,
+  value: e,
+  ...d
+}) => {
+  const [t, o] = E(d), { isFocused: r, focusProps: l } = k();
+  return /* @__PURE__ */ D(
+    Be,
+    {
+      ...t,
+      ...l,
+      "data-focus": r || void 0,
+      asChild: !0,
+      children: /* @__PURE__ */ D(De, { value: e, ...o, children: (i) => {
+        const c = typeof a == "function" ? a({
+          ...i
+        }) : a;
+        return /* @__PURE__ */ W(A, { children: [
+          i.isSelected ? /* @__PURE__ */ D(pe, {}) : /* @__PURE__ */ D(ve, {}),
+          c
+        ] });
+      } })
+    }
+  );
+};
+T.displayName = "RadioInputOption";
+const ea = {
+  Root: L,
+  Option: T
+};
+export {
+  ea as R,
+  L as a,
+  T as b
+};
+//# sourceMappingURL=radio-input-4v_6tT94.js.map