@webiny/admin-ui 0.0.0-unstable.2aaa1916d9

package/Input/InputPrimitive.js

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { cn, cva, makeDecoratable } from "../utils";
+const InputIcon = ({
+  icon,
+  inputSize,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn("wby-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(["wby-relative wby-flex wby-items-center wby-gap-sm wby-w-full", "wby-border-sm wby-text-md", "has-[:disabled]:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed"], {
+  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 wby-fill-neutral-xstrong", "hover:wby-border-neutral-strong", "focus-within:!wby-border-neutral-black", "data-[focused=true]:!wby-border-neutral-black", "has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-border-neutral-muted has-[:disabled]:hover:wby-border-neutral-muted has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-muted data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled"],
+      secondary: ["wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed wby-fill-neutral-xstrong", "hover:wby-bg-neutral-dimmed", "focus-within:!wby-bg-neutral-base focus-within:!wby-border-neutral-black", "data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-border-neutral-black", "has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled", "data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-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-within:!wby-bg-neutral-dark/5", "data-[focused=true]:!wby-bg-neutral-dark/5", "has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled", "data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled"],
+      "ghost-negative": ["wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50 wby-fill-neutral-base/50", "hover:wby-bg-neutral-base/20", "focus-within:!wby-bg-neutral-base focus-within:!wby-text-neutral-primary focus-within:!placeholder:wby-text-neutral-dimmed focus-within:!wby-fill-neutral-xstrong", "data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-text-neutral-primary data-[focused=true]:!placeholder:wby-text-neutral-dimmed data-[focused=true]:!wby-fill-neutral-xstrong", "has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled/50 has-[: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"]
+    },
+    invalid: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+  // 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 !wby-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(["wby-w-full wby-bg-transparent wby-border-none wby-text-md wby-peer", "focus-visible:wby-outline-none", "disabled:wby-cursor-not-allowed", "file:wby-text-sm file:wby-font-semibold"]),
+    disabled: disabled,
+    size: maxLength,
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    value: value ?? "",
+    onFocus: onFocus
+  })), endIcon && /*#__PURE__*/React.createElement(InputIcon, {
+    icon: endIcon
+  }));
+};
+const InputPrimitive = makeDecoratable("InputPrimitive", DecoratableInputPrimitive);
+export { InputIcon, InputPrimitive, inputVariants };
+
+//# sourceMappingURL=InputPrimitive.js.map

package/Input/InputPrimitive.js.map

@@ -0,0 +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\";\nimport { cn, cva, type VariantProps, makeDecoratable } from \"~/utils\";\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(\"wby-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        \"wby-relative wby-flex wby-items-center wby-gap-sm wby-w-full\",\n        \"wby-border-sm wby-text-md\",\n        \"has-[:disabled]:wby-cursor-not-allowed data-[disabled=true]:wby-cursor-not-allowed\"\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 wby-fill-neutral-xstrong\",\n                    \"hover:wby-border-neutral-strong\",\n                    \"focus-within:!wby-border-neutral-black\",\n                    \"data-[focused=true]:!wby-border-neutral-black\",\n                    \"has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-border-neutral-muted has-[:disabled]:hover:wby-border-neutral-muted has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled\",\n                    \"data-[disabled=true]:wby-bg-neutral-disabled data-[disabled=true]:wby-border-neutral-muted data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled\"\n                ],\n                secondary: [\n                    \"wby-bg-neutral-light wby-border-neutral-subtle wby-text-neutral-strong placeholder:wby-text-neutral-dimmed wby-fill-neutral-xstrong\",\n                    \"hover:wby-bg-neutral-dimmed\",\n                    \"focus-within:!wby-bg-neutral-base focus-within:!wby-border-neutral-black\",\n                    \"data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-border-neutral-black\",\n                    \"has-[:disabled]:wby-bg-neutral-disabled has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-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 data-[disabled=true]:wby-fill-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-within:!wby-bg-neutral-dark/5\",\n                    \"data-[focused=true]:!wby-bg-neutral-dark/5\",\n                    \"has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled has-[:disabled]:placeholder:wby-text-neutral-disabled has-[:disabled]:wby-fill-neutral-disabled\",\n                    \"data-[disabled=true]:wby-bg-transparent data-[disabled=true]:wby-text-neutral-disabled data-[disabled=true]:placeholder:wby-text-neutral-disabled data-[disabled=true]:wby-fill-neutral-disabled\"\n                ],\n                \"ghost-negative\": [\n                    \"wby-bg-transparent wby-border-transparent wby-text-neutral-light/50 placeholder:wby-text-neutral-light/50 wby-fill-neutral-base/50\",\n                    \"hover:wby-bg-neutral-base/20\",\n                    \"focus-within:!wby-bg-neutral-base focus-within:!wby-text-neutral-primary focus-within:!placeholder:wby-text-neutral-dimmed focus-within:!wby-fill-neutral-xstrong\",\n                    \"data-[focused=true]:!wby-bg-neutral-base data-[focused=true]:!wby-text-neutral-primary data-[focused=true]:!placeholder:wby-text-neutral-dimmed data-[focused=true]:!wby-fill-neutral-xstrong\",\n                    \"has-[:disabled]:wby-bg-transparent has-[:disabled]:wby-text-neutral-disabled/50 has-[: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            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: \"!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 !wby-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                    \"wby-w-full wby-bg-transparent wby-border-none wby-text-md wby-peer\",\n                    \"focus-visible:wby-outline-none\",\n                    \"disabled:wby-cursor-not-allowed\",\n                    \"file:wby-text-sm file:wby-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":[]}

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,183 @@
+import React, { useState } 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"
+  },
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "wby-w-full"
+    }, /*#__PURE__*/React.createElement(InputPrimitive, Object.assign({}, args, {
+      value: value,
+      onChange: setValue
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "wby-mt-4 wby-text-center"
+    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, value)));
+  }
+};
+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: {
+    ...WithStartAndEndIcons.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: {
+    ...WithStartAndEndIcons.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: {
+    ...WithStartAndEndIcons.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: {
+    ...WithStartAndEndIcons.args,
+    variant: "ghost-negative",
+    placeholder: "Custom placeholder"
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "wby-bg-neutral-dark wby-text-neutral-light 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-text-neutral-light 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-text-neutral-light 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","useState","ReactComponent","NotificationsIcon","CalendarIcon","InputPrimitive","Icon","meta","title","component","argTypes","onChange","action","onEnter","onKeyDown","type","control","options","defaultValue","parameters","layout","render","args","value","setValue","createElement","className","Object","assign","Default","MediumSize","placeholder","size","LargeSize","ExtraLargeSize","WithStartIcon","startIcon","label","icon","WithEndIcon","endIcon","WithStartAndEndIcons","PrimaryVariant","variant","PrimaryVariantDisabled","disabled","PrimaryVariantInvalid","invalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","decorators","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithForwardEventOnChange","forwardEventOnChange"],"sources":["InputPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } 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    render: args => {\n        const [value, setValue] = useState(args.value);\n        return (\n            <div className={\"wby-w-full\"}>\n                <InputPrimitive {...args} value={value} onChange={setValue} />\n                <div className={\"wby-mt-4 wby-text-center\"}>\n                    Current selected value: <pre>{value}</pre>\n                </div>\n            </div>\n        );\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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.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        ...WithStartAndEndIcons.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"wby-bg-neutral-dark wby-text-neutral-light 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-text-neutral-light 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-text-neutral-light 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":"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","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":[]}