@webiny/admin-ui 6.0.0-alpha.0

package/Input/InputPrimitive.js

@@ -0,0 +1,244 @@
+import * as React from "react";
+import { cn, cva, makeDecoratable } from "../utils";
+
+/**
+ * Icon
+ */
+const inputIconVariants = cva("wby-absolute wby-fill-neutral-xstrong", {
+  variants: {
+    // Define dummy variants to be used in combination with `compoundVariants` below.
+    inputSize: {
+      md: "wby-top-sm",
+      lg: "wby-top-sm-extra",
+      xl: "wby-top-md"
+    },
+    position: {
+      start: "",
+      end: ""
+    },
+    disabled: {
+      true: "wby-fill-neutral-disabled"
+    }
+  },
+  defaultVariants: {
+    inputSize: "lg",
+    position: "start"
+  },
+  compoundVariants: [
+  // The icon position is `absolute` and is adjusted horizontally across its parent using left and right.
+  {
+    inputSize: "md",
+    position: "start",
+    class: "wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
+  }, {
+    inputSize: "md",
+    position: "end",
+    class: "wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
+  }, {
+    inputSize: "lg",
+    position: "start",
+    class: "wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
+  }, {
+    inputSize: "lg",
+    position: "end",
+    class: "wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]"
+  }, {
+    inputSize: "xl",
+    position: "start",
+    class: "wby-left-[calc(theme(spacing.md)-theme(borderWidth.sm))]"
+  }, {
+    inputSize: "xl",
+    position: "end",
+    class: "wby-right-[calc(theme(spacing.md)-theme(borderWidth.sm))]"
+  }]
+});
+const InputIcon = ({
+  icon,
+  disabled,
+  position,
+  inputSize,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn(inputIconVariants({
+      position,
+      disabled,
+      inputSize
+    }), 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(["wby-w-full wby-border-sm wby-text-md wby-peer", "focus-visible:wby-outline-none", "disabled:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed", "file:wby-bg-transparent file:wby-border-none file:wby-text-sm file:wby-font-semibold"], {
+  variants: {
+    size: {
+      md: ["wby-rounded-md", "wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"],
+      lg: ["wby-rounded-md", "wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"],
+      xl: ["wby-rounded-lg wby-leading-6", "wby-py-[calc(theme(padding.md)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]"]
+    },
+    variant: {
+      primary: ["wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-border-neutral-strong", "focus:wby-border-neutral-black", "data-[focused=true]:wby-border-neutral-black", "disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-dimmed data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled"],
+      secondary: ["wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dimmed", "focus:wby-bg-neutral-base focus:wby-border-neutral-black", "data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-border-neutral-black", "disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled"],
+      ghost: ["wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed", "hover:wby-bg-neutral-dark/5", "focus:wby-bg-neutral-dark/5", "data-[focused=true]:wby-bg-neutral-dark/5", "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled"],
+      "ghost-negative": ["wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50", "hover:wby-bg-neutral-base/20", "focus:wby-bg-neutral-base focus:wby-text-neutral-primary focus:placeholder:wby-text-neutral-dimmed", "data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-bg-neutral-primary data-[focused=true]:placeholder:wby-text-neutral-dimmed", "disabled:wby-bg-transparent disabled:wby-text-neutral-disabled/50 disabled:placeholder:wby-text-neutral-disabled/50", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50"]
+    },
+    iconPosition: {
+      start: "wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]",
+      end: "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]",
+      both: ["wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]", "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]"]
+    },
+    invalid: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+  // Prevent text overlap with icons, add extra padding for icons.
+  {
+    size: "lg",
+    iconPosition: "start",
+    class: "wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]"
+  }, {
+    size: "lg",
+    iconPosition: "end",
+    class: "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]"
+  }, {
+    size: "lg",
+    iconPosition: "both",
+    class: ["wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]", "wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]"]
+  }, {
+    size: "xl",
+    iconPosition: "start",
+    class: "wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]"
+  }, {
+    size: "xl",
+    iconPosition: "end",
+    class: "wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]"
+  }, {
+    size: "xl",
+    iconPosition: "both",
+    class: ["wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]", "wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]"]
+  },
+  // Add specific classNames in case of invalid inputs: note the difference between the ghost and the other variants.
+  {
+    variant: "primary",
+    invalid: true,
+    class: "!wby-border-destructive-default"
+  }, {
+    variant: "secondary",
+    invalid: true,
+    class: "!wby-border-destructive-default"
+  }, {
+    variant: "ghost",
+    invalid: true,
+    class: "!wby-border-destructive-subtle !wby-bg-destructive-subtle"
+  }, {
+    variant: "ghost-negative",
+    invalid: true,
+    class: "!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed"
+  }],
+  defaultVariants: {
+    size: "lg",
+    variant: "primary"
+  }
+});
+const getIconPosition = (startIcon, endIcon) => {
+  if (startIcon && endIcon) {
+    return "both";
+  }
+  if (startIcon) {
+    return "start";
+  }
+  if (endIcon) {
+    return "end";
+  }
+  return;
+};
+const DecoratableInputPrimitive = ({
+  autoSelect,
+  className,
+  disabled,
+  endIcon,
+  forwardEventOnChange,
+  inputRef,
+  invalid,
+  maxLength,
+  onChange: originalOnChange,
+  onEnter,
+  onEscape,
+  onKeyDown: originalOnKeyDown,
+  onFocus: originalOnFocus,
+  size,
+  startIcon,
+  value,
+  variant,
+  ...props
+}) => {
+  const iconPosition = getIconPosition(startIcon, endIcon);
+  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("wby-relative wby-flex wby-items-center wby-w-full", className)
+  }, startIcon && /*#__PURE__*/React.createElement(InputIcon, {
+    disabled: disabled,
+    icon: startIcon,
+    inputSize: size,
+    position: "start"
+  }), /*#__PURE__*/React.createElement("input", Object.assign({}, props, {
+    ref: inputRef,
+    className: cn(inputVariants({
+      variant,
+      size,
+      iconPosition,
+      invalid
+    })),
+    disabled: disabled,
+    size: maxLength,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    value: value ?? "",
+    onFocus: onFocus
+  })), endIcon && /*#__PURE__*/React.createElement(InputIcon, {
+    disabled: disabled,
+    icon: endIcon,
+    inputSize: size,
+    position: "end"
+  }));
+};
+const InputPrimitive = makeDecoratable("InputPrimitive", DecoratableInputPrimitive);
+export { InputIcon, InputPrimitive, getIconPosition, inputVariants, inputIconVariants };
+
+//# sourceMappingURL=InputPrimitive.js.map

package/Input/InputPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","makeDecoratable","inputIconVariants","variants","inputSize","md","lg","xl","position","start","end","disabled","true","defaultVariants","compoundVariants","class","InputIcon","icon","className","createElement","cloneElement","props","size","inputVariants","variant","primary","secondary","ghost","iconPosition","both","invalid","getIconPosition","startIcon","endIcon","DecoratableInputPrimitive","autoSelect","forwardEventOnChange","inputRef","maxLength","onChange","originalOnChange","onEnter","onEscape","onKeyDown","originalOnKeyDown","onFocus","originalOnFocus","value","useCallback","event","target","e","key","select","Object","assign","ref","InputPrimitive"],"sources":["InputPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon as BaseIcon } from \"~/Icon\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\n\n/**\n * Icon\n */\nconst inputIconVariants = cva(\"wby-absolute wby-fill-neutral-xstrong\", {\n    variants: {\n        // Define dummy variants to be used in combination with `compoundVariants` below.\n        inputSize: {\n            md: \"wby-top-sm\",\n            lg: \"wby-top-sm-extra\",\n            xl: \"wby-top-md\"\n        },\n        position: {\n            start: \"\",\n            end: \"\"\n        },\n        disabled: {\n            true: \"wby-fill-neutral-disabled\"\n        }\n    },\n    defaultVariants: {\n        inputSize: \"lg\",\n        position: \"start\"\n    },\n    compoundVariants: [\n        // The icon position is `absolute` and is adjusted horizontally across its parent using left and right.\n        {\n            inputSize: \"md\",\n            position: \"start\",\n            class: \"wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]\"\n        },\n        {\n            inputSize: \"md\",\n            position: \"end\",\n            class: \"wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]\"\n        },\n        {\n            inputSize: \"lg\",\n            position: \"start\",\n            class: \"wby-left-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]\"\n        },\n        {\n            inputSize: \"lg\",\n            position: \"end\",\n            class: \"wby-right-[calc(theme(spacing.sm-plus)-theme(borderWidth.sm))]\"\n        },\n        {\n            inputSize: \"xl\",\n            position: \"start\",\n            class: \"wby-left-[calc(theme(spacing.md)-theme(borderWidth.sm))]\"\n        },\n        {\n            inputSize: \"xl\",\n            position: \"end\",\n            class: \"wby-right-[calc(theme(spacing.md)-theme(borderWidth.sm))]\"\n        }\n    ]\n});\n\ninterface InputIconProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof inputIconVariants> {\n    icon: React.ReactElement;\n}\n\nconst InputIcon = ({ icon, disabled, position, inputSize, className }: InputIconProps) => {\n    return (\n        <div className={cn(inputIconVariants({ position, disabled, inputSize }), 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        \"wby-w-full wby-border-sm wby-text-md wby-peer\",\n        \"focus-visible:wby-outline-none\",\n        \"disabled:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed\",\n        \"file:wby-bg-transparent file:wby-border-none file:wby-text-sm file:wby-font-semibold\"\n    ],\n    {\n        variants: {\n            size: {\n                md: [\n                    \"wby-rounded-md\",\n                    \"wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]\"\n                ],\n                lg: [\n                    \"wby-rounded-md\",\n                    \"wby-py-[calc(theme(padding.sm-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]\"\n                ],\n                xl: [\n                    \"wby-rounded-lg wby-leading-6\",\n                    \"wby-py-[calc(theme(padding.md)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.md)-theme(borderWidth.sm))]\"\n                ]\n            },\n            variant: {\n                primary: [\n                    \"wby-bg-neutral-base wby-border-neutral-muted wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-border-neutral-strong\",\n                    \"focus:wby-border-neutral-black\",\n                    \"data-[focused=true]:wby-border-neutral-black\",\n                    \"disabled:wby-bg-neutral-disabled disabled:wby-border-neutral-dimmed disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\",\n                    \"data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-dimmed data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"focus:wby-bg-neutral-base focus:wby-border-neutral-black\",\n                    \"data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-border-neutral-black\",\n                    \"disabled:wby-bg-neutral-disabled disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\",\n                    \"data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled\"\n                ],\n                ghost: [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-strong placeholder:wby-text-neutral-dimmed\",\n                    \"hover:wby-bg-neutral-dark/5\",\n                    \"focus:wby-bg-neutral-dark/5\",\n                    \"data-[focused=true]:wby-bg-neutral-dark/5\",\n                    \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled disabled:placeholder:wby-text-neutral-disabled\",\n                    \"data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"focus:wby-bg-neutral-base focus:wby-text-neutral-primary focus:placeholder:wby-text-neutral-dimmed\",\n                    \"data-[focused=true]:wby-bg-neutral-base data-[focused=true]:wby-bg-neutral-primary data-[focused=true]:placeholder:wby-text-neutral-dimmed\",\n                    \"disabled:wby-bg-transparent disabled:wby-text-neutral-disabled/50 disabled:placeholder:wby-text-neutral-disabled/50\",\n                    \"data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled/50 data-[disabled=true]:placeholder:wby-text-neutral-disabled/50\"\n                ]\n            },\n            iconPosition: {\n                start: \"wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]\",\n                end: \"wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]\",\n                both: [\n                    \"wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]\",\n                    \"wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]\"\n                ]\n            },\n            invalid: {\n                true: \"\"\n            }\n        },\n        compoundVariants: [\n            // Prevent text overlap with icons, add extra padding for icons.\n            {\n                size: \"lg\",\n                iconPosition: \"start\",\n                class: \"wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]\"\n            },\n            {\n                size: \"lg\",\n                iconPosition: \"end\",\n                class: \"wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]\"\n            },\n            {\n                size: \"lg\",\n                iconPosition: \"both\",\n                class: [\n                    \"wby-pl-[calc(theme(padding.xl)-theme(borderWidth.sm))]\",\n                    \"wby-pr-[calc(theme(padding.xl)-theme(borderWidth.sm))]\"\n                ]\n            },\n            {\n                size: \"xl\",\n                iconPosition: \"start\",\n                class: \"wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]\"\n            },\n            {\n                size: \"xl\",\n                iconPosition: \"end\",\n                class: \"wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]\"\n            },\n            {\n                size: \"xl\",\n                iconPosition: \"both\",\n                class: [\n                    \"wby-pl-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]\",\n                    \"wby-pr-[calc(theme(padding.xxl)+theme(padding.xs)-theme(borderWidth.sm))]\"\n                ]\n            },\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: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"secondary\",\n                invalid: true,\n                class: \"!wby-border-destructive-default\"\n            },\n            {\n                variant: \"ghost\",\n                invalid: true,\n                class: \"!wby-border-destructive-subtle !wby-bg-destructive-subtle\"\n            },\n            {\n                variant: \"ghost-negative\",\n                invalid: true,\n                class: \"!wby-border-destructive-default !wby-bg-destructive-subtle wby-text-neutral-primary placeholder:wby-text-neutral-dimmed\"\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 getIconPosition = (\n    startIcon?: InputPrimitiveProps[\"startIcon\"],\n    endIcon?: InputPrimitiveProps[\"endIcon\"]\n): \"start\" | \"end\" | \"both\" | undefined => {\n    if (startIcon && endIcon) {\n        return \"both\";\n    }\n    if (startIcon) {\n        return \"start\";\n    }\n    if (endIcon) {\n        return \"end\";\n    }\n    return;\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 iconPosition = getIconPosition(startIcon, endIcon);\n\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(\"wby-relative wby-flex wby-items-center wby-w-full\", className)}>\n            {startIcon && (\n                <InputIcon\n                    disabled={disabled}\n                    icon={startIcon}\n                    inputSize={size}\n                    position={\"start\"}\n                />\n            )}\n            <input\n                {...props}\n                ref={inputRef}\n                className={cn(inputVariants({ variant, size, iconPosition, invalid }))}\n                disabled={disabled}\n                size={maxLength}\n                onChange={onChange}\n                onKeyDown={onKeyDown}\n                value={value ?? \"\"}\n                onFocus={onFocus}\n            />\n            {endIcon && (\n                <InputIcon disabled={disabled} icon={endIcon} inputSize={size} position={\"end\"} />\n            )}\n        </div>\n    );\n};\n\nconst InputPrimitive = makeDecoratable(\"InputPrimitive\", DecoratableInputPrimitive);\n\nexport {\n    InputIcon,\n    InputPrimitive,\n    getIconPosition,\n    inputVariants,\n    inputIconVariants,\n    type InputIconProps,\n    type InputPrimitiveProps\n};\n"],"mappings":"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","ignoreList":[]}

package/Input/InputPrimitive.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputPrimitive } from "./InputPrimitive";
+declare const meta: Meta<typeof InputPrimitive>;
+export default meta;
+type Story = StoryObj<typeof InputPrimitive>;
+export declare const Default: Story;
+export declare const MediumSize: Story;
+export declare const LargeSize: Story;
+export declare const ExtraLargeSize: Story;
+export declare const WithStartIcon: Story;
+export declare const WithEndIcon: Story;
+export declare const WithStartAndEndIcons: Story;
+export declare const PrimaryVariant: Story;
+export declare const PrimaryVariantDisabled: Story;
+export declare const PrimaryVariantInvalid: Story;
+export declare const SecondaryVariant: Story;
+export declare const SecondaryVariantDisabled: Story;
+export declare const SecondaryVariantInvalid: Story;
+export declare const GhostVariant: Story;
+export declare const GhostVariantDisabled: Story;
+export declare const GhostVariantInvalid: Story;
+export declare const GhostNegativeVariant: Story;
+export declare const GhostNegativeVariantDisabled: Story;
+export declare const GhostNegativeVariantInvalid: Story;
+export declare const WithForwardEventOnChange: Story;

package/Input/InputPrimitive.stories.js

@@ -0,0 +1,168 @@
+import React from "react";
+import { ReactComponent as NotificationsIcon } from "@webiny/icons/notifications.svg";
+import { ReactComponent as CalendarIcon } from "@webiny/icons/calendar_month.svg";
+import { InputPrimitive } from "./InputPrimitive";
+import { Icon } from "../Icon";
+const meta = {
+  title: "Components/Form Primitives/Input",
+  component: InputPrimitive,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    onEnter: {
+      action: "onEnter"
+    },
+    onKeyDown: {
+      action: "onKeyDown"
+    },
+    type: {
+      control: "select",
+      options: ["text", "number", "email", "password", "tel", "url", "search", "date", "datetime-local", "month", "week", "time", "color", "file", "checkbox", "radio", "range", "hidden", "button", "submit", "reset", "image"],
+      defaultValue: "text"
+    }
+  },
+  parameters: {
+    layout: "padded"
+  }
+};
+export default meta;
+export const Default = {};
+export const MediumSize = {
+  args: {
+    placeholder: "Custom placeholder",
+    size: "md"
+  }
+};
+export const LargeSize = {
+  args: {
+    placeholder: "Custom placeholder",
+    size: "lg"
+  }
+};
+export const ExtraLargeSize = {
+  args: {
+    placeholder: "Custom placeholder",
+    size: "xl"
+  }
+};
+export const WithStartIcon = {
+  args: {
+    placeholder: "Custom placeholder",
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Bell",
+      icon: /*#__PURE__*/React.createElement(NotificationsIcon, null)
+    })
+  }
+};
+export const WithEndIcon = {
+  args: {
+    placeholder: "Custom placeholder",
+    endIcon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Calendar",
+      icon: /*#__PURE__*/React.createElement(CalendarIcon, null)
+    })
+  }
+};
+export const WithStartAndEndIcons = {
+  args: {
+    placeholder: "Custom placeholder",
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Bell",
+      icon: /*#__PURE__*/React.createElement(NotificationsIcon, null)
+    }),
+    endIcon: /*#__PURE__*/React.createElement(Icon, {
+      label: "Calendar",
+      icon: /*#__PURE__*/React.createElement(CalendarIcon, null)
+    })
+  }
+};
+export const PrimaryVariant = {
+  args: {
+    variant: "primary",
+    placeholder: "Custom placeholder"
+  }
+};
+export const PrimaryVariantDisabled = {
+  args: {
+    ...PrimaryVariant.args,
+    disabled: true
+  }
+};
+export const PrimaryVariantInvalid = {
+  args: {
+    ...PrimaryVariant.args,
+    invalid: true
+  }
+};
+export const SecondaryVariant = {
+  args: {
+    variant: "secondary",
+    placeholder: "Custom placeholder"
+  }
+};
+export const SecondaryVariantDisabled = {
+  args: {
+    ...SecondaryVariant.args,
+    disabled: true
+  }
+};
+export const SecondaryVariantInvalid = {
+  args: {
+    ...SecondaryVariant.args,
+    invalid: true
+  }
+};
+export const GhostVariant = {
+  args: {
+    variant: "ghost",
+    placeholder: "Custom placeholder"
+  }
+};
+export const GhostVariantDisabled = {
+  args: {
+    ...GhostVariant.args,
+    disabled: true
+  }
+};
+export const GhostVariantInvalid = {
+  args: {
+    ...GhostVariant.args,
+    invalid: true
+  }
+};
+export const GhostNegativeVariant = {
+  args: {
+    variant: "ghost-negative",
+    placeholder: "Custom placeholder"
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const GhostNegativeVariantDisabled = {
+  args: {
+    ...GhostNegativeVariant.args,
+    disabled: true
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const GhostNegativeVariantInvalid = {
+  args: {
+    ...GhostNegativeVariant.args,
+    invalid: true
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-p-xl"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export const WithForwardEventOnChange = {
+  args: {
+    ...Default.args,
+    forwardEventOnChange: true
+  }
+};
+
+//# sourceMappingURL=InputPrimitive.stories.js.map

package/Input/InputPrimitive.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","NotificationsIcon","CalendarIcon","InputPrimitive","Icon","meta","title","component","argTypes","onChange","action","onEnter","onKeyDown","type","control","options","defaultValue","parameters","layout","Default","MediumSize","args","placeholder","size","LargeSize","ExtraLargeSize","WithStartIcon","startIcon","createElement","label","icon","WithEndIcon","endIcon","WithStartAndEndIcons","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","className","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange","forwardEventOnChange"],"sources":["InputPrimitive.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as NotificationsIcon } from \"@webiny/icons/notifications.svg\";\nimport { ReactComponent as CalendarIcon } from \"@webiny/icons/calendar_month.svg\";\n\nimport { InputPrimitive } from \"./InputPrimitive\";\nimport { Icon } from \"~/Icon\";\n\nconst meta: Meta<typeof InputPrimitive> = {\n    title: \"Components/Form Primitives/Input\",\n    component: InputPrimitive,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onEnter: { action: \"onEnter\" },\n        onKeyDown: { action: \"onKeyDown\" },\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    },\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof InputPrimitive>;\n\nexport const Default: Story = {};\n\nexport const MediumSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />\n    }\n};\n\nexport const WithEndIcon: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const WithStartAndEndIcons: Story = {\n    args: {\n        placeholder: \"Custom placeholder\",\n        startIcon: <Icon label={\"Bell\"} icon={<NotificationsIcon />} />,\n        endIcon: <Icon label={\"Calendar\"} icon={<CalendarIcon />} />\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        variant: \"primary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithForwardEventOnChange: Story = {\n    args: {\n        ...Default.args,\n        forwardEventOnChange: true\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,cAAc,IAAIC,iBAAiB,QAAQ,iCAAiC;AACrF,SAASD,cAAc,IAAIE,YAAY,QAAQ,kCAAkC;AAEjF,SAASC,cAAc;AACvB,SAASC,IAAI;AAEb,MAAMC,IAAiC,GAAG;EACtCC,KAAK,EAAE,kCAAkC;EACzCC,SAAS,EAAEJ,cAAc;EACzBK,QAAQ,EAAE;IACNC,QAAQ,EAAE;MAAEC,MAAM,EAAE;IAAW,CAAC;IAChCC,OAAO,EAAE;MAAED,MAAM,EAAE;IAAU,CAAC;IAC9BE,SAAS,EAAE;MAAEF,MAAM,EAAE;IAAY,CAAC;IAClCG,IAAI,EAAE;MACFC,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,UAAU,EACV,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,OAAO,EACP,MAAM,EACN,MAAM,EACN,OAAO,EACP,MAAM,EACN,UAAU,EACV,OAAO,EACP,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,CACV;MACDC,YAAY,EAAE;IAClB;EACJ,CAAC;EACDC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ;AACJ,CAAC;AAED,eAAeb,IAAI;AAGnB,OAAO,MAAMc,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,UAAiB,GAAG;EAC7BC,IAAI,EAAE;IACFC,WAAW,EAAE,oBAAoB;IACjCC,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,SAAgB,GAAG;EAC5BH,IAAI,EAAE;IACFC,WAAW,EAAE,oBAAoB;IACjCC,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAME,cAAqB,GAAG;EACjCJ,IAAI,EAAE;IACFC,WAAW,EAAE,oBAAoB;IACjCC,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMG,aAAoB,GAAG;EAChCL,IAAI,EAAE;IACFC,WAAW,EAAE,oBAAoB;IACjCK,SAAS,eAAE5B,KAAA,CAAA6B,aAAA,CAACxB,IAAI;MAACyB,KAAK,EAAE,MAAO;MAACC,IAAI,eAAE/B,KAAA,CAAA6B,aAAA,CAAC3B,iBAAiB,MAAE;IAAE,CAAE;EAClE;AACJ,CAAC;AAED,OAAO,MAAM8B,WAAkB,GAAG;EAC9BV,IAAI,EAAE;IACFC,WAAW,EAAE,oBAAoB;IACjCU,OAAO,eAAEjC,KAAA,CAAA6B,aAAA,CAACxB,IAAI;MAACyB,KAAK,EAAE,UAAW;MAACC,IAAI,eAAE/B,KAAA,CAAA6B,aAAA,CAAC1B,YAAY,MAAE;IAAE,CAAE;EAC/D;AACJ,CAAC;AAED,OAAO,MAAM+B,oBAA2B,GAAG;EACvCZ,IAAI,EAAE;IACFC,WAAW,EAAE,oBAAoB;IACjCK,SAAS,eAAE5B,KAAA,CAAA6B,aAAA,CAACxB,IAAI;MAACyB,KAAK,EAAE,MAAO;MAACC,IAAI,eAAE/B,KAAA,CAAA6B,aAAA,CAAC3B,iBAAiB,MAAE;IAAE,CAAE,CAAC;IAC/D+B,OAAO,eAAEjC,KAAA,CAAA6B,aAAA,CAACxB,IAAI;MAACyB,KAAK,EAAE,UAAW;MAACC,IAAI,eAAE/B,KAAA,CAAA6B,aAAA,CAAC1B,YAAY,MAAE;IAAE,CAAE;EAC/D;AACJ,CAAC;AAED,OAAO,MAAMgC,cAAqB,GAAG;EACjCb,IAAI,EAAE;IACFc,OAAO,EAAE,SAAS;IAClBb,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMc,sBAA6B,GAAG;EACzCf,IAAI,EAAE;IACF,GAAGa,cAAc,CAACb,IAAI;IACtBgB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,qBAA4B,GAAG;EACxCjB,IAAI,EAAE;IACF,GAAGa,cAAc,CAACb,IAAI;IACtBkB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMC,gBAAuB,GAAG;EACnCnB,IAAI,EAAE;IACFc,OAAO,EAAE,WAAW;IACpBb,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMmB,wBAA+B,GAAG;EAC3CpB,IAAI,EAAE;IACF,GAAGmB,gBAAgB,CAACnB,IAAI;IACxBgB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMK,uBAA8B,GAAG;EAC1CrB,IAAI,EAAE;IACF,GAAGmB,gBAAgB,CAACnB,IAAI;IACxBkB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMI,YAAmB,GAAG;EAC/BtB,IAAI,EAAE;IACFc,OAAO,EAAE,OAAO;IAChBb,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMsB,oBAA2B,GAAG;EACvCvB,IAAI,EAAE;IACF,GAAGsB,YAAY,CAACtB,IAAI;IACpBgB,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMQ,mBAA0B,GAAG;EACtCxB,IAAI,EAAE;IACF,GAAGsB,YAAY,CAACtB,IAAI;IACpBkB,OAAO,EAAE;EACb;AACJ,CAAC;AAED,OAAO,MAAMO,oBAA2B,GAAG;EACvCzB,IAAI,EAAE;IACFc,OAAO,EAAE,gBAAgB;IACzBb,WAAW,EAAE;EACjB,CAAC;EACDyB,UAAU,EAAE,CACRC,KAAK,iBACDjD,KAAA,CAAA6B,aAAA;IAAKqB,SAAS,EAAC;EAA8B,gBACzClD,KAAA,CAAA6B,aAAA,CAACoB,KAAK,MAAE,CACP,CACR;AAET,CAAC;AAED,OAAO,MAAME,4BAAmC,GAAG;EAC/C7B,IAAI,EAAE;IACF,GAAGyB,oBAAoB,CAACzB,IAAI;IAC5BgB,QAAQ,EAAE;EACd,CAAC;EACDU,UAAU,EAAE,CACRC,KAAK,iBACDjD,KAAA,CAAA6B,aAAA;IAAKqB,SAAS,EAAC;EAA8B,gBACzClD,KAAA,CAAA6B,aAAA,CAACoB,KAAK,MAAE,CACP,CACR;AAET,CAAC;AAED,OAAO,MAAMG,2BAAkC,GAAG;EAC9C9B,IAAI,EAAE;IACF,GAAGyB,oBAAoB,CAACzB,IAAI;IAC5BkB,OAAO,EAAE;EACb,CAAC;EACDQ,UAAU,EAAE,CACRC,KAAK,iBACDjD,KAAA,CAAA6B,aAAA;IAAKqB,SAAS,EAAC;EAA8B,gBACzClD,KAAA,CAAA6B,aAAA,CAACoB,KAAK,MAAE,CACP,CACR;AAET,CAAC;AAED,OAAO,MAAMI,wBAA+B,GAAG;EAC3C/B,IAAI,EAAE;IACF,GAAGF,OAAO,CAACE,IAAI;IACfgC,oBAAoB,EAAE;EAC1B;AACJ,CAAC","ignoreList":[]}

package/Input/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Input";
+export * from "./InputPrimitive";

package/Input/index.js

@@ -0,0 +1,4 @@
+export * from "./Input";
+export * from "./InputPrimitive";
+
+//# sourceMappingURL=index.js.map

package/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Input\";\nexport * from \"./InputPrimitive\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Webiny
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Label/Label.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+import { type VariantProps } from "../utils";
+declare const labelVariants: (props?: ({
+    weight?: "strong" | "light" | null | undefined;
+    disabled?: boolean | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface LabelProps extends Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, "children">, VariantProps<typeof labelVariants> {
+    text: React.ReactNode;
+    value?: React.ReactNode;
+    description?: React.ReactNode;
+    hint?: React.ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+}
+declare const Label: (({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null) & {
+    original: ({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null) & {
+        original: ({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null) & {
+        original: ({ className, disabled, description, hint, required, value, text, weight, invalid, ...props }: LabelProps) => React.JSX.Element | null;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Label, type LabelProps };

package/Label/Label.js

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
+import { cn, makeDecoratable, cva } from "../utils";
+import { LabelDescription, LabelHint, LabelRequired, LabelValue } from "./components";
+const labelVariants = cva(["wby-inline-flex wby-items-center wby-justify-between wby-w-full wby-text-sm", "wby-text-neutral-primary wby-whitespace-nowrap", "peer-disabled:wby-text-neutral-disabled peer-disabled:wby-cursor-not-allowed"], {
+  variants: {
+    weight: {
+      strong: "wby-font-semibold",
+      light: "wby-font-regular"
+    },
+    disabled: {
+      true: "wby-text-neutral-disabled wby-cursor-not-allowed"
+    },
+    invalid: {
+      true: "webiny_label-invalid"
+    }
+  },
+  defaultVariants: {
+    weight: "strong"
+  }
+});
+const LabelBase = ({
+  className,
+  disabled,
+  description,
+  hint,
+  required,
+  value,
+  text,
+  weight,
+  invalid,
+  ...props
+}) => {
+  if (!text) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(LabelPrimitive.Root, Object.assign({
+    className: cn(labelVariants({
+      weight,
+      disabled,
+      invalid
+    }), className)
+  }, props), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+    className: "wby-flex wby-items-center wby-gap-xxs"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "webiny_label-text"
+  }, text), description && /*#__PURE__*/React.createElement(LabelDescription, {
+    content: description,
+    disabled: disabled
+  }), hint && /*#__PURE__*/React.createElement(LabelHint, {
+    content: hint
+  }), required && /*#__PURE__*/React.createElement(LabelRequired, {
+    disabled: disabled
+  }))), value && /*#__PURE__*/React.createElement(LabelValue, {
+    value: value,
+    weight: weight,
+    disabled: disabled
+  }));
+};
+const Label = makeDecoratable("Label", LabelBase);
+export { Label };
+
+//# sourceMappingURL=Label.js.map

package/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Label","LabelPrimitive","cn","makeDecoratable","cva","LabelDescription","LabelHint","LabelRequired","LabelValue","labelVariants","variants","weight","strong","light","disabled","true","invalid","defaultVariants","LabelBase","className","description","hint","required","value","text","props","createElement","Root","Object","assign","content"],"sources":["Label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Label as LabelPrimitive } from \"radix-ui\";\nimport { cn, makeDecoratable, cva, type VariantProps } from \"~/utils\";\nimport { LabelDescription, LabelHint, LabelRequired, LabelValue } from \"./components\";\n\nconst labelVariants = cva(\n    [\n        \"wby-inline-flex wby-items-center wby-justify-between wby-w-full wby-text-sm\",\n        \"wby-text-neutral-primary wby-whitespace-nowrap\",\n        \"peer-disabled:wby-text-neutral-disabled peer-disabled:wby-cursor-not-allowed\"\n    ],\n    {\n        variants: {\n            weight: {\n                strong: \"wby-font-semibold\",\n                light: \"wby-font-regular\"\n            },\n            disabled: {\n                true: \"wby-text-neutral-disabled wby-cursor-not-allowed\"\n            },\n            invalid: {\n                true: \"webiny_label-invalid\"\n            }\n        },\n        defaultVariants: {\n            weight: \"strong\"\n        }\n    }\n);\n\ninterface LabelProps\n    extends Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, \"children\">,\n        VariantProps<typeof labelVariants> {\n    text: React.ReactNode;\n    value?: React.ReactNode;\n    description?: React.ReactNode;\n    hint?: React.ReactNode;\n    required?: boolean;\n    disabled?: boolean;\n}\n\nconst LabelBase = ({\n    className,\n    disabled,\n    description,\n    hint,\n    required,\n    value,\n    text,\n    weight,\n    invalid,\n    ...props\n}: LabelProps) => {\n    if (!text) {\n        return null;\n    }\n\n    return (\n        <LabelPrimitive.Root\n            className={cn(labelVariants({ weight, disabled, invalid }), className)}\n            {...props}\n        >\n            <span>\n                <span className={\"wby-flex wby-items-center wby-gap-xxs\"}>\n                    <span className={\"webiny_label-text\"}>{text}</span>\n                    {description && <LabelDescription content={description} disabled={disabled} />}\n                    {hint && <LabelHint content={hint} />}\n                    {required && <LabelRequired disabled={disabled} />}\n                </span>\n            </span>\n            {value && <LabelValue value={value} weight={weight} disabled={disabled} />}\n        </LabelPrimitive.Root>\n    );\n};\n\nconst Label = makeDecoratable(\"Label\", LabelBase);\n\nexport { Label, type LabelProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,IAAIC,cAAc,QAAQ,UAAU;AAClD,SAASC,EAAE,EAAEC,eAAe,EAAEC,GAAG;AACjC,SAASC,gBAAgB,EAAEC,SAAS,EAAEC,aAAa,EAAEC,UAAU;AAE/D,MAAMC,aAAa,GAAGL,GAAG,CACrB,CACI,6EAA6E,EAC7E,gDAAgD,EAChD,8EAA8E,CACjF,EACD;EACIM,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,MAAM,EAAE,mBAAmB;MAC3BC,KAAK,EAAE;IACX,CAAC;IACDC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV,CAAC;IACDC,OAAO,EAAE;MACLD,IAAI,EAAE;IACV;EACJ,CAAC;EACDE,eAAe,EAAE;IACbN,MAAM,EAAE;EACZ;AACJ,CACJ,CAAC;AAaD,MAAMO,SAAS,GAAGA,CAAC;EACfC,SAAS;EACTL,QAAQ;EACRM,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,KAAK;EACLC,IAAI;EACJb,MAAM;EACNK,OAAO;EACP,GAAGS;AACK,CAAC,KAAK;EACd,IAAI,CAACD,IAAI,EAAE;IACP,OAAO,IAAI;EACf;EAEA,oBACIzB,KAAA,CAAA2B,aAAA,CAACzB,cAAc,CAAC0B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IAChBV,SAAS,EAAEjB,EAAE,CAACO,aAAa,CAAC;MAAEE,MAAM;MAAEG,QAAQ;MAAEE;IAAQ,CAAC,CAAC,EAAEG,SAAS;EAAE,GACnEM,KAAK,gBAET1B,KAAA,CAAA2B,aAAA,4BACI3B,KAAA,CAAA2B,aAAA;IAAMP,SAAS,EAAE;EAAwC,gBACrDpB,KAAA,CAAA2B,aAAA;IAAMP,SAAS,EAAE;EAAoB,GAAEK,IAAW,CAAC,EAClDJ,WAAW,iBAAIrB,KAAA,CAAA2B,aAAA,CAACrB,gBAAgB;IAACyB,OAAO,EAAEV,WAAY;IAACN,QAAQ,EAAEA;EAAS,CAAE,CAAC,EAC7EO,IAAI,iBAAItB,KAAA,CAAA2B,aAAA,CAACpB,SAAS;IAACwB,OAAO,EAAET;EAAK,CAAE,CAAC,EACpCC,QAAQ,iBAAIvB,KAAA,CAAA2B,aAAA,CAACnB,aAAa;IAACO,QAAQ,EAAEA;EAAS,CAAE,CAC/C,CACJ,CAAC,EACNS,KAAK,iBAAIxB,KAAA,CAAA2B,aAAA,CAAClB,UAAU;IAACe,KAAK,EAAEA,KAAM;IAACZ,MAAM,EAAEA,MAAO;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACxD,CAAC;AAE9B,CAAC;AAED,MAAMd,KAAK,GAAGG,eAAe,CAAC,OAAO,EAAEe,SAAS,CAAC;AAEjD,SAASlB,KAAK","ignoreList":[]}