@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/Input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","Input","meta","title","component","argTypes","onChange","action","type","control","options","defaultValue","disabled","parameters","layout","Default","WithLabel","args","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","WithValidateFunction","render","value","setValue","setValidation","undefined","validate","Promise","resolve","setTimeout","includes","createElement","Object","assign","placeholder","newValue","FullExample","Documentation","handleValidation","trim","minLength","length","onBlur","onEnter","size","variant","startIcon","endIcon","maxLength"],"sources":["Input.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Input> = {\n    title: \"Components/Form/Input\",\n    component: Input,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Input>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            // Simulate API call delay\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            // Example validation: check if email already exists\n            if (value.includes(\"exists@\")) {\n                setValidation({ isValid: false, message: \"This email is already registered\" });\n            } else {\n                setValidation({ isValid: true, message: undefined });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                type=\"email\"\n                label=\"Email\"\n                placeholder=\"Enter your email\"\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (args.minLength && value.trim().length < args.minLength) {\n                setValidation({\n                    isValid: false,\n                    message: `Must be at least ${args.minLength} characters long`\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validation={validation}\n                onBlur={handleValidation}\n                onEnter={handleValidation}\n            />\n        );\n    },\n    args: {\n        type: \"text\",\n        size: \"lg\",\n        variant: \"primary\",\n        label: \"Full Name\",\n        description: \"Enter your full name as it appears on your ID\",\n        note: \"This will be used for official documentation\",\n        placeholder: \"Enter your full name\",\n        required: true,\n        disabled: false,\n        startIcon: undefined,\n        endIcon: undefined,\n        minLength: 3,\n        maxLength: undefined,\n        onChange: undefined,\n        onBlur: undefined,\n        onEnter: undefined,\n        validation: undefined,\n        validate: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"HTML input type attribute\",\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\"\n            ],\n            defaultValue: \"text\"\n        },\n        size: {\n            description: \"Input field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Input field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text displayed above the input\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the input\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when input is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the input field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the input field\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        startIcon: {\n            description: \"Icon displayed at the start of the input\"\n        },\n        endIcon: {\n            description: \"Icon displayed at the end of the input\"\n        },\n        minLength: {\n            description: \"Minimum number of characters required\",\n            control: \"number\",\n            defaultValue: 3\n        },\n        maxLength: {\n            description:\n                \"Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.\",\n            control: \"number\"\n        },\n        validation: {\n            description:\n                \"Validation state and error message. Please refer to the example code for details on usage.\"\n        },\n        validate: {\n            description: \"Custom validation function\"\n        },\n        onChange: {\n            description: \"Callback function when input value changes\"\n        },\n        onBlur: {\n            description: \"Callback function when input loses focus\"\n        },\n        onEnter: {\n            description: \"Callback function when Enter key is pressed\"\n        }\n    } // Removed forwardEventOnChange and inputRef\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input/Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Input } from \"~/Input/index.js\";\n\nconst meta: Meta<typeof Input> = {\n    title: \"Components/Form/Input\",\n    component: Input,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        type: {\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\",\n                \"checkbox\",\n                \"radio\",\n                \"range\",\n                \"hidden\",\n                \"button\",\n                \"submit\",\n                \"reset\",\n                \"image\"\n            ],\n            defaultValue: \"text\"\n        },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Input>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        label: \"Any field label\"\n    }\n};\n\nexport const WithLabelRequired: Story = {\n    args: {\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const WithValidateFunction: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            // Simulate API call delay\n            await new Promise(resolve => setTimeout(resolve, 500));\n\n            // Example validation: check if email already exists\n            if (value.includes(\"exists@\")) {\n                setValidation({ isValid: false, message: \"This email is already registered\" });\n            } else {\n                setValidation({ isValid: true, message: undefined });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                type=\"email\"\n                label=\"Email\"\n                placeholder=\"Enter your email\"\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validate={validate}\n                validation={validation}\n            />\n        );\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [value, setValue] = useState(\"\");\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        const handleValidation = () => {\n            if (args.required && !value.trim()) {\n                setValidation({ isValid: false, message: \"This field is required\" });\n            } else if (args.minLength && value.trim().length < args.minLength) {\n                setValidation({\n                    isValid: false,\n                    message: `Must be at least ${args.minLength} characters long`\n                });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        return (\n            <Input\n                {...args}\n                value={value}\n                onChange={newValue => setValue(newValue)}\n                validation={validation}\n                onBlur={handleValidation}\n                onEnter={handleValidation}\n            />\n        );\n    },\n    args: {\n        type: \"text\",\n        size: \"lg\",\n        variant: \"primary\",\n        label: \"Full Name\",\n        description: \"Enter your full name as it appears on your ID\",\n        note: \"This will be used for official documentation\",\n        placeholder: \"Enter your full name\",\n        required: true,\n        disabled: false,\n        startIcon: undefined,\n        endIcon: undefined,\n        minLength: 3,\n        maxLength: undefined,\n        onChange: undefined,\n        onBlur: undefined,\n        onEnter: undefined,\n        validation: undefined,\n        validate: undefined\n    },\n    argTypes: {\n        type: {\n            description: \"HTML input type attribute\",\n            control: \"select\",\n            options: [\n                \"text\",\n                \"number\",\n                \"email\",\n                \"password\",\n                \"tel\",\n                \"url\",\n                \"search\",\n                \"date\",\n                \"datetime-local\",\n                \"month\",\n                \"week\",\n                \"time\",\n                \"color\",\n                \"file\"\n            ],\n            defaultValue: \"text\"\n        },\n        size: {\n            description: \"Input field size\",\n            control: \"select\",\n            options: [\"md\", \"lg\", \"xl\"],\n            defaultValue: \"lg\"\n        },\n        variant: {\n            description: \"Input field style variant\",\n            control: \"select\",\n            options: [\"primary\", \"secondary\", \"ghost\", \"ghost-negative\"],\n            defaultValue: \"primary\"\n        },\n        label: {\n            description: \"Label text displayed above the input\",\n            control: \"text\"\n        },\n        description: {\n            description: \"Helper text displayed below the label\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note displayed below the input\",\n            control: \"text\"\n        },\n        placeholder: {\n            description: \"Placeholder text shown when input is empty\",\n            control: \"text\"\n        },\n        required: {\n            description: \"Makes the input field required\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the input field\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        startIcon: {\n            description: \"Icon displayed at the start of the input\"\n        },\n        endIcon: {\n            description: \"Icon displayed at the end of the input\"\n        },\n        minLength: {\n            description: \"Minimum number of characters required\",\n            control: \"number\",\n            defaultValue: 3\n        },\n        maxLength: {\n            description:\n                \"Maximum number of characters allowed. To apply this maxLength, update the code similarly to how it's done for minLength. Refer to the minLength example above for guidance.\",\n            control: \"number\"\n        },\n        validation: {\n            description:\n                \"Validation state and error message. Please refer to the example code for details on usage.\"\n        },\n        validate: {\n            description: \"Custom validation function\"\n        },\n        onChange: {\n            description: \"Callback function when input value changes\"\n        },\n        onBlur: {\n            description: \"Callback function when input loses focus\"\n        },\n        onEnter: {\n            description: \"Callback function when Enter key is pressed\"\n        }\n    } // Removed forwardEventOnChange and inputRef\n};\n"],"names":["meta","Input","Default","WithLabel","WithLabelRequired","WithDescription","WithNotes","WithErrors","Disabled","WithValidateFunction","args","value","setValue","useState","validation","setValidation","undefined","validate","Promise","resolve","setTimeout","newValue","FullExample","Documentation","handleValidation"],"mappings":"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"}

package/Input/InputPrimitive.js

@@ -1,133 +1,145 @@
-import * as React from "react";
 import { cn, cva, makeDecoratable } from "../utils.js";
-const InputIcon = ({
-  icon,
-  inputSize,
-  className
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn("fill-inherit", className)
-  }, /*#__PURE__*/React.cloneElement(icon, {
-    ...icon.props,
-    size: inputSize === "xl" ? "lg" : "sm" // Map icon size based on the input size.
-  }));
-};
-
-/**
- * Input
- *
- * We support both `disabled` and `data-disabled` as well as `focused` and `data-focused` variants
- * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,
- * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)
- */
-const inputVariants = cva(["relative flex items-center gap-sm w-full", "border-sm text-md", "has-disabled:cursor-not-allowed data-[disabled=true]:cursor-not-allowed"], {
-  variants: {
-    size: {
-      md: ["rounded-md", "py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]"],
-      lg: ["rounded-md", "py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]"],
-      xl: ["rounded-lg leading-6", "py-[calc(var(--padding-md)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]"]
-    },
-    variant: {
-      primary: ["bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong", "hover:border-neutral-strong", "focus-within:border-neutral-black!", "data-[focused=true]:border-neutral-black!", "has-disabled:bg-neutral-disabled has-disabled:border-neutral-muted has-disabled:hover:border-neutral-muted has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled", "data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:border-neutral-muted data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled"],
-      secondary: ["bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong", "hover:bg-neutral-dimmed", "focus-within:bg-neutral-base! focus-within:border-neutral-black!", "data-[focused=true]:bg-neutral-base! data-[focused=true]:border-neutral-black!", "has-disabled:bg-neutral-disabled has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled", "data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled"],
-      ghost: ["bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed", "hover:bg-neutral-dark/5", "focus-within:bg-neutral-dark/5!", "data-[focused=true]:bg-neutral-dark/5!", "has-disabled:bg-transparent has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled", "data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled"],
-      "ghost-negative": ["bg-transparent border-transparent text-neutral-light/50 placeholder:text-neutral-light/50 fill-neutral-base/50", "hover:bg-neutral-base/20", "focus-within:bg-neutral-base! focus-within:text-neutral-primary! focus-within:!placeholder:text-neutral-dimmed focus-within:fill-neutral-xstrong!", "data-[focused=true]:bg-neutral-base! data-[focused=true]:text-neutral-primary! data-[focused=true]:!placeholder:text-neutral-dimmed data-[focused=true]:fill-neutral-xstrong!", "has-disabled:bg-transparent has-disabled:text-neutral-disabled/50 has-disabled:placeholder:text-neutral-disabled/50", "data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled/50 data-[disabled=true]:placeholder:text-neutral-disabled/50"]
+import * as __rspack_external_react from "react";
+const InputIcon = ({ icon, inputSize, className })=>/*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: cn("fill-inherit", className)
+    }, /*#__PURE__*/ __rspack_external_react.cloneElement(icon, {
+        ...icon.props,
+        size: "xl" === inputSize ? "lg" : "sm"
+    }));
+const inputVariants = cva([
+    "relative flex items-center gap-sm w-full",
+    "border-sm text-md",
+    "has-disabled:cursor-not-allowed data-[disabled=true]:cursor-not-allowed"
+], {
+    variants: {
+        size: {
+            md: [
+                "rounded-md",
+                "py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]"
+            ],
+            lg: [
+                "rounded-md",
+                "py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]"
+            ],
+            xl: [
+                "rounded-lg leading-6",
+                "py-[calc(var(--padding-md)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]"
+            ]
+        },
+        variant: {
+            primary: [
+                "bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong",
+                "hover:border-neutral-strong",
+                "focus-within:border-neutral-black!",
+                "data-[focused=true]:border-neutral-black!",
+                "has-disabled:bg-neutral-disabled has-disabled:border-neutral-muted has-disabled:hover:border-neutral-muted has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled",
+                "data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:border-neutral-muted data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled"
+            ],
+            secondary: [
+                "bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong",
+                "hover:bg-neutral-dimmed",
+                "focus-within:bg-neutral-base! focus-within:border-neutral-black!",
+                "data-[focused=true]:bg-neutral-base! data-[focused=true]:border-neutral-black!",
+                "has-disabled:bg-neutral-disabled has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled",
+                "data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled"
+            ],
+            ghost: [
+                "bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed",
+                "hover:bg-neutral-dark/5",
+                "focus-within:bg-neutral-dark/5!",
+                "data-[focused=true]:bg-neutral-dark/5!",
+                "has-disabled:bg-transparent has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled",
+                "data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled"
+            ],
+            "ghost-negative": [
+                "bg-transparent border-transparent text-neutral-light/50 placeholder:text-neutral-light/50 fill-neutral-base/50",
+                "hover:bg-neutral-base/20",
+                "focus-within:bg-neutral-base! focus-within:text-neutral-primary! focus-within:!placeholder:text-neutral-dimmed focus-within:fill-neutral-xstrong!",
+                "data-[focused=true]:bg-neutral-base! data-[focused=true]:text-neutral-primary! data-[focused=true]:!placeholder:text-neutral-dimmed data-[focused=true]:fill-neutral-xstrong!",
+                "has-disabled:bg-transparent has-disabled:text-neutral-disabled/50 has-disabled:placeholder:text-neutral-disabled/50",
+                "data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled/50 data-[disabled=true]:placeholder:text-neutral-disabled/50"
+            ]
+        },
+        invalid: {
+            true: ""
+        }
     },
-    invalid: {
-      true: ""
+    compoundVariants: [
+        {
+            variant: "primary",
+            invalid: true,
+            class: "border-destructive-default!"
+        },
+        {
+            variant: "secondary",
+            invalid: true,
+            class: "border-destructive-default!"
+        },
+        {
+            variant: "ghost",
+            invalid: true,
+            class: "border-destructive-subtle! bg-destructive-subtle!"
+        },
+        {
+            variant: "ghost-negative",
+            invalid: true,
+            class: "border-destructive-default! bg-destructive-subtle! text-neutral-primary placeholder:text-neutral-dimmed fill-neutral-xstrong!"
+        }
+    ],
+    defaultVariants: {
+        size: "lg",
+        variant: "primary"
     }
-  },
-  compoundVariants: [
-  // Add specific classNames in case of invalid inputs: note the difference between the ghost and the other variants.
-  {
-    variant: "primary",
-    invalid: true,
-    class: "border-destructive-default!"
-  }, {
-    variant: "secondary",
-    invalid: true,
-    class: "border-destructive-default!"
-  }, {
-    variant: "ghost",
-    invalid: true,
-    class: "border-destructive-subtle! bg-destructive-subtle!"
-  }, {
-    variant: "ghost-negative",
-    invalid: true,
-    class: "border-destructive-default! bg-destructive-subtle! text-neutral-primary placeholder:text-neutral-dimmed fill-neutral-xstrong!"
-  }],
-  defaultVariants: {
-    size: "lg",
-    variant: "primary"
-  }
 });
-const DecoratableInputPrimitive = ({
-  autoSelect,
-  className,
-  disabled,
-  endIcon,
-  forwardEventOnChange,
-  inputRef,
-  invalid,
-  maxLength,
-  onChange: originalOnChange,
-  onEnter,
-  onEscape,
-  onKeyDown: originalOnKeyDown,
-  onFocus: originalOnFocus,
-  size,
-  startIcon,
-  value,
-  variant,
-  ...props
-}) => {
-  const onChange = React.useCallback(event => {
-    if (!originalOnChange) {
-      return;
-    }
-
-    // @ts-expect-error
-    originalOnChange(forwardEventOnChange ? event : event.target.value);
-  }, [forwardEventOnChange, originalOnChange]);
-  const onKeyDown = React.useCallback(e => {
-    if (typeof onEnter === "function" && e.key === "Enter") {
-      onEnter(e);
-    }
-    if (typeof onEscape === "function" && e.key === "Escape") {
-      onEscape(e);
-    }
-    if (typeof originalOnKeyDown === "function") {
-      return originalOnKeyDown(e);
-    }
-  }, [originalOnKeyDown, onEnter]);
-  const onFocus = React.useCallback(e => {
-    if (originalOnFocus) {
-      originalOnFocus(e);
-    }
-    if (autoSelect) {
-      e.target.select();
-    }
-  }, [originalOnFocus, autoSelect]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(inputVariants({
-      variant,
-      size,
-      invalid
-    }), className)
-  }, startIcon && /*#__PURE__*/React.createElement(InputIcon, {
-    icon: startIcon
-  }), /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
-    ref: inputRef,
-    className: cn(["w-full bg-transparent border-none text-md peer", "focus-visible:outline-none", "disabled:cursor-not-allowed", "file:text-sm file:font-semibold"]),
-    disabled: disabled,
-    size: maxLength,
-    onChange: onChange,
-    onKeyDown: onKeyDown,
-    value: value ?? "",
-    onFocus: onFocus
-  })), endIcon && /*#__PURE__*/React.createElement(InputIcon, {
-    icon: endIcon
-  }));
+const DecoratableInputPrimitive = ({ autoSelect, className, disabled, endIcon, forwardEventOnChange, inputRef, invalid, maxLength, onChange: originalOnChange, onEnter, onEscape, onKeyDown: originalOnKeyDown, onFocus: originalOnFocus, size, startIcon, value, variant, ...props })=>{
+    const onChange = __rspack_external_react.useCallback((event)=>{
+        if (!originalOnChange) return;
+        originalOnChange(forwardEventOnChange ? event : event.target.value);
+    }, [
+        forwardEventOnChange,
+        originalOnChange
+    ]);
+    const onKeyDown = __rspack_external_react.useCallback((e)=>{
+        if ("function" == typeof onEnter && "Enter" === e.key) onEnter(e);
+        if ("function" == typeof onEscape && "Escape" === e.key) onEscape(e);
+        if ("function" == typeof originalOnKeyDown) return originalOnKeyDown(e);
+    }, [
+        originalOnKeyDown,
+        onEnter
+    ]);
+    const onFocus = __rspack_external_react.useCallback((e)=>{
+        if (originalOnFocus) originalOnFocus(e);
+        if (autoSelect) e.target.select();
+    }, [
+        originalOnFocus,
+        autoSelect
+    ]);
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        className: cn(inputVariants({
+            variant,
+            size,
+            invalid
+        }), className)
+    }, startIcon && /*#__PURE__*/ __rspack_external_react.createElement(InputIcon, {
+        icon: startIcon
+    }), /*#__PURE__*/ __rspack_external_react.createElement("input", {
+        ...props,
+        ref: inputRef,
+        className: cn([
+            "w-full bg-transparent border-none text-md peer",
+            "focus-visible:outline-none",
+            "disabled:cursor-not-allowed",
+            "file:text-sm file:font-semibold"
+        ]),
+        disabled: disabled,
+        size: maxLength,
+        onChange: onChange,
+        onKeyDown: onKeyDown,
+        value: value ?? "",
+        onFocus: onFocus
+    }), endIcon && /*#__PURE__*/ __rspack_external_react.createElement(InputIcon, {
+        icon: endIcon
+    }));
 };
 const InputPrimitive = makeDecoratable("InputPrimitive", DecoratableInputPrimitive);
 export { InputIcon, InputPrimitive, inputVariants };

package/Input/InputPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","InputIcon","icon","inputSize","className","createElement","cloneElement","props","size","inputVariants","variants","md","lg","xl","variant","primary","secondary","ghost","invalid","true","compoundVariants","class","defaultVariants","DecoratableInputPrimitive","autoSelect","disabled","endIcon","forwardEventOnChange","inputRef","maxLength","onChange","originalOnChange","onEnter","onEscape","onKeyDown","originalOnKeyDown","onFocus","originalOnFocus","startIcon","value","useCallback","event","target","e","key","select","Object","assign","ref","InputPrimitive"],"sources":["InputPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Icon as BaseIcon } from \"~/Icon/index.js\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\ninterface InputIconProps extends React.HTMLAttributes<HTMLDivElement> {\n    icon: React.ReactElement;\n    inputSize?: VariantProps<typeof inputVariants>[\"size\"];\n}\n\nconst InputIcon = ({ icon, inputSize, className }: InputIconProps) => {\n    return (\n        <div className={cn(\"fill-inherit\", className)}>\n            {React.cloneElement(icon, {\n                ...icon.props,\n                size: inputSize === \"xl\" ? \"lg\" : \"sm\" // Map icon size based on the input size.\n            })}\n        </div>\n    );\n};\n\n/**\n * Input\n *\n * We support both `disabled` and `data-disabled` as well as `focused` and `data-focused` variants\n * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,\n * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)\n */\nconst inputVariants = cva(\n    [\n        \"relative flex items-center gap-sm w-full\",\n        \"border-sm text-md\",\n        \"has-disabled:cursor-not-allowed data-[disabled=true]:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            size: {\n                md: [\n                    \"rounded-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                lg: [\n                    \"rounded-md\",\n                    \"py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                xl: [\n                    \"rounded-lg leading-6\",\n                    \"py-[calc(var(--padding-md)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n                ]\n            },\n            variant: {\n                primary: [\n                    \"bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong\",\n                    \"hover:border-neutral-strong\",\n                    \"focus-within:border-neutral-black!\",\n                    \"data-[focused=true]:border-neutral-black!\",\n                    \"has-disabled:bg-neutral-disabled has-disabled:border-neutral-muted has-disabled:hover:border-neutral-muted has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled\",\n                    \"data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:border-neutral-muted data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled\"\n                ],\n                secondary: [\n                    \"bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong\",\n                    \"hover:bg-neutral-dimmed\",\n                    \"focus-within:bg-neutral-base! focus-within:border-neutral-black!\",\n                    \"data-[focused=true]:bg-neutral-base! data-[focused=true]:border-neutral-black!\",\n                    \"has-disabled:bg-neutral-disabled has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled\",\n                    \"data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled\"\n                ],\n                ghost: [\n                    \"bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"focus-within:bg-neutral-dark/5!\",\n                    \"data-[focused=true]:bg-neutral-dark/5!\",\n                    \"has-disabled:bg-transparent has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled\",\n                    \"data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent border-transparent text-neutral-light/50 placeholder:text-neutral-light/50 fill-neutral-base/50\",\n                    \"hover:bg-neutral-base/20\",\n                    \"focus-within:bg-neutral-base! focus-within:text-neutral-primary! focus-within:!placeholder:text-neutral-dimmed focus-within:fill-neutral-xstrong!\",\n                    \"data-[focused=true]:bg-neutral-base! data-[focused=true]:text-neutral-primary! data-[focused=true]:!placeholder:text-neutral-dimmed data-[focused=true]:fill-neutral-xstrong!\",\n                    \"has-disabled:bg-transparent has-disabled:text-neutral-disabled/50 has-disabled:placeholder:text-neutral-disabled/50\",\n                    \"data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled/50 data-[disabled=true]:placeholder:text-neutral-disabled/50\"\n                ]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            // Add specific classNames in case of invalid inputs: note the difference between the ghost and the other variants.\n            {\n                variant: \"primary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"border-destructive-subtle! bg-destructive-subtle!\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"border-destructive-default! bg-destructive-subtle! text-neutral-primary placeholder:text-neutral-dimmed fill-neutral-xstrong!\"\n            }\n        ],\n        defaultVariants: {\n            size: \"lg\",\n            variant: \"primary\"\n        }\n    }\n);\n\ntype InputPrimitiveProps<TValue = any> = Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"onChange\"\n> &\n    VariantProps<typeof inputVariants> & {\n        /**\n         * Icon to be displayed at the start of the input field.\n         */\n        startIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;\n        /**\n         * Icon to be displayed at the end of the input field.\n         */\n        endIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;\n        /**\n         * Maximum length of the input field.\n         */\n        maxLength?: React.InputHTMLAttributes<HTMLInputElement>[\"size\"];\n        /**\n         * Reference to the input element.\n         */\n        inputRef?: React.Ref<HTMLInputElement>;\n        /**\n         * If true, it will pass the native `event` to the `onChange` callback\n         */\n        forwardEventOnChange?: boolean;\n        /**\n         * Callback function to be called when the Enter key is pressed.\n         */\n        onEnter?: InputPrimitiveProps[\"onKeyDown\"];\n        /**\n         * Callback function to be called when the Esc key is pressed.\n         */\n        onEscape?: InputPrimitiveProps[\"onKeyDown\"];\n        /**\n         * A callback that is executed each time a value is changed.\n         */\n        onChange?: (value: TValue) => void;\n        /**\n         * If true, will select the value in the input on focus.\n         */\n        autoSelect?: boolean;\n    };\n\nconst DecoratableInputPrimitive = ({\n    autoSelect,\n    className,\n    disabled,\n    endIcon,\n    forwardEventOnChange,\n    inputRef,\n    invalid,\n    maxLength,\n    onChange: originalOnChange,\n    onEnter,\n    onEscape,\n    onKeyDown: originalOnKeyDown,\n    onFocus: originalOnFocus,\n    size,\n    startIcon,\n    value,\n    variant,\n    ...props\n}: InputPrimitiveProps) => {\n    const onChange = React.useCallback(\n        (event: React.SyntheticEvent<HTMLInputElement>) => {\n            if (!originalOnChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            originalOnChange(forwardEventOnChange ? event : event.target.value);\n        },\n        [forwardEventOnChange, originalOnChange]\n    );\n\n    const onKeyDown = React.useCallback(\n        (e: React.KeyboardEvent<HTMLInputElement>) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter(e);\n            }\n\n            if (typeof onEscape === \"function\" && e.key === \"Escape\") {\n                onEscape(e);\n            }\n\n            if (typeof originalOnKeyDown === \"function\") {\n                return originalOnKeyDown(e);\n            }\n        },\n        [originalOnKeyDown, onEnter]\n    );\n\n    const onFocus = React.useCallback(\n        (e: React.FocusEvent<HTMLInputElement>) => {\n            if (originalOnFocus) {\n                originalOnFocus(e);\n            }\n\n            if (autoSelect) {\n                e.target.select();\n            }\n        },\n        [originalOnFocus, autoSelect]\n    );\n\n    return (\n        <div className={cn(inputVariants({ variant, size, invalid }), className)}>\n            {startIcon && <InputIcon icon={startIcon} />}\n            <input\n                {...props}\n                ref={inputRef}\n                className={cn([\n                    \"w-full bg-transparent border-none text-md peer\",\n                    \"focus-visible:outline-none\",\n                    \"disabled:cursor-not-allowed\",\n                    \"file:text-sm file:font-semibold\"\n                ])}\n                disabled={disabled}\n                size={maxLength}\n                onChange={onChange}\n                onKeyDown={onKeyDown}\n                value={value ?? \"\"}\n                onFocus={onFocus}\n            />\n            {endIcon && <InputIcon icon={endIcon} />}\n        </div>\n    );\n};\n\nconst InputPrimitive = makeDecoratable(\"InputPrimitive\", DecoratableInputPrimitive);\n\nexport { InputIcon, InputPrimitive, inputVariants, type InputIconProps, type InputPrimitiveProps };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input/InputPrimitive.js","sources":["../../src/Input/InputPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { Icon as BaseIcon } from \"~/Icon/index.js\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils.js\";\n\ninterface InputIconProps extends React.HTMLAttributes<HTMLDivElement> {\n    icon: React.ReactElement;\n    inputSize?: VariantProps<typeof inputVariants>[\"size\"];\n}\n\nconst InputIcon = ({ icon, inputSize, className }: InputIconProps) => {\n    return (\n        <div className={cn(\"fill-inherit\", className)}>\n            {React.cloneElement(icon, {\n                ...icon.props,\n                size: inputSize === \"xl\" ? \"lg\" : \"sm\" // Map icon size based on the input size.\n            })}\n        </div>\n    );\n};\n\n/**\n * Input\n *\n * We support both `disabled` and `data-disabled` as well as `focused` and `data-focused` variants\n * because these variants can be used by both input and div elements. The last one is used by `MultiAutocomplete` component,\n * where the `inputVariants` is used to style a div that wraps multiple elements (input, Tags, icons, etc.)\n */\nconst inputVariants = cva(\n    [\n        \"relative flex items-center gap-sm w-full\",\n        \"border-sm text-md\",\n        \"has-disabled:cursor-not-allowed data-[disabled=true]:cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            size: {\n                md: [\n                    \"rounded-md\",\n                    \"py-[calc(var(--padding-xs-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                lg: [\n                    \"rounded-md\",\n                    \"py-[calc(var(--padding-sm-plus)-(var(--border-width-sm)))] px-[calc(var(--padding-sm-extra)-(var(--border-width-sm)))]\"\n                ],\n                xl: [\n                    \"rounded-lg leading-6\",\n                    \"py-[calc(var(--padding-md)-(var(--border-width-sm)))] px-[calc(var(--padding-md)-(var(--border-width-sm)))]\"\n                ]\n            },\n            variant: {\n                primary: [\n                    \"bg-neutral-base border-neutral-muted text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong\",\n                    \"hover:border-neutral-strong\",\n                    \"focus-within:border-neutral-black!\",\n                    \"data-[focused=true]:border-neutral-black!\",\n                    \"has-disabled:bg-neutral-disabled has-disabled:border-neutral-muted has-disabled:hover:border-neutral-muted has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled\",\n                    \"data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:border-neutral-muted data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled\"\n                ],\n                secondary: [\n                    \"bg-neutral-light border-neutral-subtle text-neutral-strong placeholder:text-neutral-dimmed fill-neutral-xstrong\",\n                    \"hover:bg-neutral-dimmed\",\n                    \"focus-within:bg-neutral-base! focus-within:border-neutral-black!\",\n                    \"data-[focused=true]:bg-neutral-base! data-[focused=true]:border-neutral-black!\",\n                    \"has-disabled:bg-neutral-disabled has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled\",\n                    \"data-[disabled=true]:bg-neutral-disabled data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled\"\n                ],\n                ghost: [\n                    \"bg-transparent border-transparent text-neutral-strong placeholder:text-neutral-dimmed\",\n                    \"hover:bg-neutral-dark/5\",\n                    \"focus-within:bg-neutral-dark/5!\",\n                    \"data-[focused=true]:bg-neutral-dark/5!\",\n                    \"has-disabled:bg-transparent has-disabled:text-neutral-disabled has-disabled:placeholder:text-neutral-disabled has-disabled:fill-neutral-disabled\",\n                    \"data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled data-[disabled=true]:placeholder:text-neutral-disabled data-[disabled=true]:fill-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"bg-transparent border-transparent text-neutral-light/50 placeholder:text-neutral-light/50 fill-neutral-base/50\",\n                    \"hover:bg-neutral-base/20\",\n                    \"focus-within:bg-neutral-base! focus-within:text-neutral-primary! focus-within:!placeholder:text-neutral-dimmed focus-within:fill-neutral-xstrong!\",\n                    \"data-[focused=true]:bg-neutral-base! data-[focused=true]:text-neutral-primary! data-[focused=true]:!placeholder:text-neutral-dimmed data-[focused=true]:fill-neutral-xstrong!\",\n                    \"has-disabled:bg-transparent has-disabled:text-neutral-disabled/50 has-disabled:placeholder:text-neutral-disabled/50\",\n                    \"data-[disabled=true]:bg-transparent data-[disabled=true]:text-neutral-disabled/50 data-[disabled=true]:placeholder:text-neutral-disabled/50\"\n                ]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            // Add specific classNames in case of invalid inputs: note the difference between the ghost and the other variants.\n            {\n                variant: \"primary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"border-destructive-default!\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"border-destructive-subtle! bg-destructive-subtle!\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"border-destructive-default! bg-destructive-subtle! text-neutral-primary placeholder:text-neutral-dimmed fill-neutral-xstrong!\"\n            }\n        ],\n        defaultVariants: {\n            size: \"lg\",\n            variant: \"primary\"\n        }\n    }\n);\n\ntype InputPrimitiveProps<TValue = any> = Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"onChange\"\n> &\n    VariantProps<typeof inputVariants> & {\n        /**\n         * Icon to be displayed at the start of the input field.\n         */\n        startIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;\n        /**\n         * Icon to be displayed at the end of the input field.\n         */\n        endIcon?: React.ReactElement<typeof BaseIcon> | React.ReactElement;\n        /**\n         * Maximum length of the input field.\n         */\n        maxLength?: React.InputHTMLAttributes<HTMLInputElement>[\"size\"];\n        /**\n         * Reference to the input element.\n         */\n        inputRef?: React.Ref<HTMLInputElement>;\n        /**\n         * If true, it will pass the native `event` to the `onChange` callback\n         */\n        forwardEventOnChange?: boolean;\n        /**\n         * Callback function to be called when the Enter key is pressed.\n         */\n        onEnter?: InputPrimitiveProps[\"onKeyDown\"];\n        /**\n         * Callback function to be called when the Esc key is pressed.\n         */\n        onEscape?: InputPrimitiveProps[\"onKeyDown\"];\n        /**\n         * A callback that is executed each time a value is changed.\n         */\n        onChange?: (value: TValue) => void;\n        /**\n         * If true, will select the value in the input on focus.\n         */\n        autoSelect?: boolean;\n    };\n\nconst DecoratableInputPrimitive = ({\n    autoSelect,\n    className,\n    disabled,\n    endIcon,\n    forwardEventOnChange,\n    inputRef,\n    invalid,\n    maxLength,\n    onChange: originalOnChange,\n    onEnter,\n    onEscape,\n    onKeyDown: originalOnKeyDown,\n    onFocus: originalOnFocus,\n    size,\n    startIcon,\n    value,\n    variant,\n    ...props\n}: InputPrimitiveProps) => {\n    const onChange = React.useCallback(\n        (event: React.SyntheticEvent<HTMLInputElement>) => {\n            if (!originalOnChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            originalOnChange(forwardEventOnChange ? event : event.target.value);\n        },\n        [forwardEventOnChange, originalOnChange]\n    );\n\n    const onKeyDown = React.useCallback(\n        (e: React.KeyboardEvent<HTMLInputElement>) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter(e);\n            }\n\n            if (typeof onEscape === \"function\" && e.key === \"Escape\") {\n                onEscape(e);\n            }\n\n            if (typeof originalOnKeyDown === \"function\") {\n                return originalOnKeyDown(e);\n            }\n        },\n        [originalOnKeyDown, onEnter]\n    );\n\n    const onFocus = React.useCallback(\n        (e: React.FocusEvent<HTMLInputElement>) => {\n            if (originalOnFocus) {\n                originalOnFocus(e);\n            }\n\n            if (autoSelect) {\n                e.target.select();\n            }\n        },\n        [originalOnFocus, autoSelect]\n    );\n\n    return (\n        <div className={cn(inputVariants({ variant, size, invalid }), className)}>\n            {startIcon && <InputIcon icon={startIcon} />}\n            <input\n                {...props}\n                ref={inputRef}\n                className={cn([\n                    \"w-full bg-transparent border-none text-md peer\",\n                    \"focus-visible:outline-none\",\n                    \"disabled:cursor-not-allowed\",\n                    \"file:text-sm file:font-semibold\"\n                ])}\n                disabled={disabled}\n                size={maxLength}\n                onChange={onChange}\n                onKeyDown={onKeyDown}\n                value={value ?? \"\"}\n                onFocus={onFocus}\n            />\n            {endIcon && <InputIcon icon={endIcon} />}\n        </div>\n    );\n};\n\nconst InputPrimitive = makeDecoratable(\"InputPrimitive\", DecoratableInputPrimitive);\n\nexport { InputIcon, InputPrimitive, inputVariants, type InputIconProps, type InputPrimitiveProps };\n"],"names":["InputIcon","icon","inputSize","className","cn","React","inputVariants","cva","DecoratableInputPrimitive","autoSelect","disabled","endIcon","forwardEventOnChange","inputRef","invalid","maxLength","originalOnChange","onEnter","onEscape","originalOnKeyDown","originalOnFocus","size","startIcon","value","variant","props","onChange","event","onKeyDown","e","onFocus","InputPrimitive","makeDecoratable"],"mappings":";;AASA,MAAMA,YAAY,CAAC,EAAEC,IAAI,EAAEC,SAAS,EAAEC,SAAS,EAAkB,GACtD,WAAP,GACI,sCAAC;QAAI,WAAWC,GAAG,gBAAgBD;qBAC9BE,wBAAAA,YAAkB,CAACJ,MAAM;QACtB,GAAGA,KAAK,KAAK;QACb,MAAMC,AAAc,SAAdA,YAAqB,OAAO;IACtC;AAYZ,MAAMI,gBAAgBC,IAClB;IACI;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,MAAM;YACF,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;YACD,IAAI;gBACA;gBACA;aACH;QACL;QACA,SAAS;YACL,SAAS;gBACL;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,WAAW;gBACP;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,OAAO;gBACH;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;YACD,kBAAkB;gBACd;gBACA;gBACA;gBACA;gBACA;gBACA;aACH;QACL;QACA,SAAS;YACL,MAAM;QACV;IACJ;IACA,kBAAkB;QAEd;YACI,SAAS;YACT,SAAS;YACT,OAAO;QACX;QACA;YACI,SAAS;YACT,SAAS;YACT,OAAO;QACX;QACA;YACI,SAAS;YACT,SAAS;YACT,OAAO;QACX;QACA;YACI,SAAS;YACT,SAAS;YACT,OAAO;QACX;KACH;IACD,iBAAiB;QACb,MAAM;QACN,SAAS;IACb;AACJ;AA8CJ,MAAMC,4BAA4B,CAAC,EAC/BC,UAAU,EACVN,SAAS,EACTO,QAAQ,EACRC,OAAO,EACPC,oBAAoB,EACpBC,QAAQ,EACRC,OAAO,EACPC,SAAS,EACT,UAAUC,gBAAgB,EAC1BC,OAAO,EACPC,QAAQ,EACR,WAAWC,iBAAiB,EAC5B,SAASC,eAAe,EACxBC,IAAI,EACJC,SAAS,EACTC,KAAK,EACLC,OAAO,EACP,GAAGC,OACe;IAClB,MAAMC,WAAWrB,wBAAAA,WAAiB,CAC9B,CAACsB;QACG,IAAI,CAACX,kBACD;QAIJA,iBAAiBJ,uBAAuBe,QAAQA,MAAM,MAAM,CAAC,KAAK;IACtE,GACA;QAACf;QAAsBI;KAAiB;IAG5C,MAAMY,YAAYvB,wBAAAA,WAAiB,CAC/B,CAACwB;QACG,IAAI,AAAmB,cAAnB,OAAOZ,WAA0BY,AAAU,YAAVA,EAAE,GAAG,EACtCZ,QAAQY;QAGZ,IAAI,AAAoB,cAApB,OAAOX,YAA2BW,AAAU,aAAVA,EAAE,GAAG,EACvCX,SAASW;QAGb,IAAI,AAA6B,cAA7B,OAAOV,mBACP,OAAOA,kBAAkBU;IAEjC,GACA;QAACV;QAAmBF;KAAQ;IAGhC,MAAMa,UAAUzB,wBAAAA,WAAiB,CAC7B,CAACwB;QACG,IAAIT,iBACAA,gBAAgBS;QAGpB,IAAIpB,YACAoB,EAAE,MAAM,CAAC,MAAM;IAEvB,GACA;QAACT;QAAiBX;KAAW;IAGjC,OAAO,WAAP,GACI,sCAAC;QAAI,WAAWL,GAAGE,cAAc;YAAEkB;YAASH;YAAMP;QAAQ,IAAIX;OACzDmB,aAAa,WAAbA,GAAa,sCAACtB,WAASA;QAAC,MAAMsB;sBAC/B,sCAAC;QACI,GAAGG,KAAK;QACT,KAAKZ;QACL,WAAWT,GAAG;YACV;YACA;YACA;YACA;SACH;QACD,UAAUM;QACV,MAAMK;QACN,UAAUW;QACV,WAAWE;QACX,OAAOL,SAAS;QAChB,SAASO;QAEZnB,WAAW,WAAXA,GAAW,sCAACX,WAASA;QAAC,MAAMW;;AAGzC;AAEA,MAAMoB,iBAAiBC,gBAAgB,kBAAkBxB"}