@webiny/admin-ui 6.0.0-alpha.0 → 6.0.0-alpha.1

package/Tabs/components/Tab.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
+import type React from "react";
 import { type VariantProps } from "../../utils";
-import { tabListVariants } from "./List";
+import type { tabListVariants } from "./List";
 interface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "content"> {
     value: string;
     trigger: React.ReactNode;

package/Tabs/components/Tab.js.map

@@ -1 +1 @@
-{"version":3,"names":["useContext","useEffect","useRef","makeDecoratable","generateId","TabsContext","DecoratableTab","props","tabsContext","idRef","addTab","id","current","visible","removeTab","Tab"],"sources":["Tab.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef } from \"react\";\nimport { makeDecoratable, generateId, type VariantProps } from \"~/utils\";\nimport { TabsContext } from \"./Context\";\nimport { tabListVariants } from \"./List\";\n\ninterface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"content\"> {\n    value: string;\n    trigger: React.ReactNode;\n    content: React.ReactNode;\n    icon?: React.ReactElement;\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    disabled?: boolean;\n    visible?: boolean;\n    \"data-testid\"?: string;\n}\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\nconst DecoratableTab = (props: TabProps) => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(generateId());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n};\n\nconst Tab = makeDecoratable(\"Tab\", DecoratableTab);\n\nexport { Tab, type TabProps, type TabItem };\n"],"mappings":"AAAA,SAAgBA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAC5D,SAASC,eAAe,EAAEC,UAAU;AACpC,SAASC,WAAW;AAkBpB,MAAMC,cAAc,GAAIC,KAAe,IAAK;EACxC,MAAMC,WAAW,GAAGR,UAAU,CAACK,WAAW,CAAC;EAC3C,MAAMI,KAAK,GAAGP,MAAM,CAACE,UAAU,CAAC,CAAC,CAAC;EAElCH,SAAS,CAAC,MAAM;IACZO,WAAW,CAAEE,MAAM,CAAC;MAAE,GAAGH,KAAK;MAAEI,EAAE,EAAEF,KAAK,CAACG,OAAO;MAAEC,OAAO,EAAEN,KAAK,CAACM,OAAO,IAAI;IAAK,CAAC,CAAC;EACxF,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEXN,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,OAAOO,WAAW,CAAEM,SAAS,CAACL,KAAK,CAACG,OAAO,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC;AAED,MAAMG,GAAG,GAAGZ,eAAe,CAAC,KAAK,EAAEG,cAAc,CAAC;AAElD,SAASS,GAAG","ignoreList":[]}
+{"version":3,"names":["useContext","useEffect","useRef","makeDecoratable","generateId","TabsContext","DecoratableTab","props","tabsContext","idRef","addTab","id","current","visible","removeTab","Tab"],"sources":["Tab.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useContext, useEffect, useRef } from \"react\";\nimport { makeDecoratable, generateId, type VariantProps } from \"~/utils\";\nimport { TabsContext } from \"./Context\";\nimport type { tabListVariants } from \"./List\";\n\ninterface TabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\" | \"content\"> {\n    value: string;\n    trigger: React.ReactNode;\n    content: React.ReactNode;\n    icon?: React.ReactElement;\n    spacing?: VariantProps<typeof tabListVariants>[\"spacing\"];\n    disabled?: boolean;\n    visible?: boolean;\n    \"data-testid\"?: string;\n}\n\ninterface TabItem extends TabProps {\n    id: string;\n}\n\nconst DecoratableTab = (props: TabProps) => {\n    const tabsContext = useContext(TabsContext);\n    const idRef = useRef(generateId());\n\n    useEffect(() => {\n        tabsContext!.addTab({ ...props, id: idRef.current, visible: props.visible ?? true });\n    }, [props]);\n\n    useEffect(() => {\n        return () => {\n            return tabsContext!.removeTab(idRef.current);\n        };\n    }, []);\n\n    return null;\n};\n\nconst Tab = makeDecoratable(\"Tab\", DecoratableTab);\n\nexport { Tab, type TabProps, type TabItem };\n"],"mappings":"AACA,SAASA,UAAU,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACrD,SAASC,eAAe,EAAEC,UAAU;AACpC,SAASC,WAAW;AAkBpB,MAAMC,cAAc,GAAIC,KAAe,IAAK;EACxC,MAAMC,WAAW,GAAGR,UAAU,CAACK,WAAW,CAAC;EAC3C,MAAMI,KAAK,GAAGP,MAAM,CAACE,UAAU,CAAC,CAAC,CAAC;EAElCH,SAAS,CAAC,MAAM;IACZO,WAAW,CAAEE,MAAM,CAAC;MAAE,GAAGH,KAAK;MAAEI,EAAE,EAAEF,KAAK,CAACG,OAAO;MAAEC,OAAO,EAAEN,KAAK,CAACM,OAAO,IAAI;IAAK,CAAC,CAAC;EACxF,CAAC,EAAE,CAACN,KAAK,CAAC,CAAC;EAEXN,SAAS,CAAC,MAAM;IACZ,OAAO,MAAM;MACT,OAAOO,WAAW,CAAEM,SAAS,CAACL,KAAK,CAACG,OAAO,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAI;AACf,CAAC;AAED,MAAMG,GAAG,GAAGZ,eAAe,CAAC,KAAK,EAAEG,cAAc,CAAC;AAElD,SAASS,GAAG","ignoreList":[]}

package/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","Close","cn","cva","makeDecoratable","Icon","IconButton","tagVariants","variants","isInteractive","true","isDismissible","false","isDisabled","variant","accent","success","warning","destructive","defaultVariants","DecoratableTag","className","content","onClick","onDismiss","dismissIconElement","createElement","dismissIconLabel","disabled","props","dismissButtonVariant","useMemo","includes","dismissIconColor","Object","assign","Boolean","icon","label","color","size","event","stopPropagation","Tag"],"sources":["Tag.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\nimport { Icon, type IconProps } from \"~/Icon\";\nimport { IconButton, iconButtonVariants } from \"~/Button\";\n\nconst tagVariants = cva(\n    [\n        \"wby-inline-flex wby-items-center wby-gap-xxs wby-rounded-sm wby-text-sm wby-text-regular wby-transition-colors wby-overflow-hidden\",\n        \"focus:outline-none\"\n    ],\n    {\n        variants: {\n            isInteractive: {\n                true: \"wby-cursor-pointer\"\n            },\n            isDismissible: {\n                true: \"wby-pl-xs-plus wby-pt-xxs wby-pb-xxs wby-pr-xs\",\n                false: \"wby-px-xs-plus wby-py-xxs\"\n            },\n            isDisabled: {\n                true: \"wby-cursor-not-allowed wby-pointer-events-none\"\n            },\n            variant: {\n                \"neutral-base\": [\n                    \"wby-bg-transparent wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"aria-disabled:wby-bg-transparent aria-disabled:wby-text-neutral-disabled\"\n                ],\n                \"neutral-base-outline\": [\n                    \"wby-border-sm wby-border-solid wby-px-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-py-[calc(theme(padding.xxs)-theme(borderWidth.sm))]\",\n                    \"wby-bg-transparent wby-border-neutral-muted wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"aria-disabled:wby-bg-transparent aria-disabled:wby-border-neutral-dimmed aria-disabled:wby-text-neutral-disabled\"\n                ],\n                \"neutral-light\": [\n                    \"wby-bg-neutral-light wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-bg-neutral-light aria-disabled:wby-text-neutral-muted\"\n                ],\n                \"neutral-muted\": [\n                    \"wby-bg-neutral-muted wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-strong\",\n                    \"aria-disabled:wby-bg-neutral-muted aria-disabled:wby-text-neutral-muted\"\n                ],\n                \"neutral-strong\": [\n                    \"wby-bg-neutral-strong wby-text-neutral-light\",\n                    \"hover:wby-bg-neutral-xstrong\",\n                    \"aria-disabled:wby-bg-neutral-muted\"\n                ],\n                \"neutral-xstrong\": [\n                    \"wby-bg-neutral-xstrong wby-text-neutral-light\",\n                    \"hover:wby-bg-neutral-dark\",\n                    \"aria-disabled:wby-bg-neutral-strong\"\n                ],\n                \"neutral-dark\": [\n                    \"wby-bg-neutral-dark wby-text-neutral-light\",\n                    \"hover:wby-bg-neutral-xstrong\",\n                    \"aria-disabled:wby-bg-neutral-strong\"\n                ],\n                accent: [\n                    \"wby-bg-primary-default wby-text-neutral-light\",\n                    \"hover:wby-bg-primary-strong\",\n                    \"aria-disabled:wby-bg-primary-disabled\"\n                ],\n                \"accent-light\": [\n                    \"wby-bg-primary-subtle wby-text-neutral-primary\",\n                    \"hover:wby-bg-primary-muted\",\n                    \"aria-disabled:wby-bg-primary-subtle aria-disabled:wby-text-neutral-muted\"\n                ],\n                success: [\n                    \"wby-bg-success-default wby-text-neutral-light\",\n                    \"hover:wby-bg-success-strong\",\n                    \"aria-disabled:wby-bg-success-disabled\"\n                ],\n                \"success-light\": [\n                    \"wby-bg-success-subtle wby-text-neutral-primary\",\n                    \"hover:wby-bg-success-muted\",\n                    \"aria-disabled:wby-bg-success-subtle aria-disabled:wby-text-neutral-muted\"\n                ],\n                warning: [\n                    \"wby-bg-warning-muted wby-text-neutral-primary\",\n                    \"hover:wby-bg-warning-default\",\n                    \"aria-disabled:wby-bg-warning-disabled aria-disabled:wby-text-neutral-disabled\"\n                ],\n                destructive: [\n                    \"wby-bg-destructive-default wby-text-neutral-light\",\n                    \"hover:wby-bg-destructive-strong\",\n                    \"aria-disabled:wby-bg-destructive-disabled\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"neutral-base\"\n        }\n    }\n);\n\nexport interface TagProps\n    extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\" | \"content\">,\n        VariantProps<typeof tagVariants> {\n    content: React.ReactNode;\n    onDismiss?: (event: React.SyntheticEvent<HTMLSpanElement>) => void;\n    dismissIconElement?: React.ReactElement;\n    dismissIconLabel?: string;\n    disabled?: boolean;\n}\n\nconst DecoratableTag = ({\n    className,\n    variant,\n    content,\n    onClick,\n    onDismiss,\n    dismissIconElement = <Close />,\n    dismissIconLabel = \"Close\",\n    disabled,\n    ...props\n}: TagProps) => {\n    const dismissButtonVariant = React.useMemo((): VariantProps<\n        typeof iconButtonVariants\n    >[\"variant\"] => {\n        if (\n            variant &&\n            [\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"accent\",\n                \"destructive\"\n            ].includes(variant)\n        ) {\n            return \"ghost-negative\";\n        }\n\n        return \"ghost\";\n    }, [variant]);\n\n    const dismissIconColor: IconProps[\"color\"] = React.useMemo(() => {\n        if (\n            variant &&\n            [\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"accent\",\n                \"success\",\n                \"destructive\"\n            ].includes(variant)\n        ) {\n            return \"neutral-negative\";\n        }\n\n        if (variant && [\"warning\"].includes(variant)) {\n            return \"neutral-strong\";\n        }\n\n        return \"neutral-strong-transparent\";\n    }, [variant]);\n\n    return (\n        <span\n            {...props}\n            onClick={onClick}\n            className={cn(\n                tagVariants({\n                    variant,\n                    isDismissible: Boolean(onDismiss),\n                    isInteractive: Boolean(onClick),\n                    isDisabled: Boolean(disabled)\n                }),\n                className\n            )}\n            aria-disabled={disabled}\n        >\n            <span className={\"wby-overflow-hidden wby-truncate wby-whitespace-nowrap\"}>\n                {content}\n            </span>\n            {onDismiss && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={dismissIconElement}\n                            label={dismissIconLabel}\n                            color={dismissIconColor}\n                            size={\"sm\"}\n                        />\n                    }\n                    size={\"xxs\"}\n                    variant={dismissButtonVariant}\n                    disabled={disabled}\n                    onClick={event => {\n                        event.stopPropagation();\n                        onDismiss(event);\n                    }}\n                />\n            )}\n        </span>\n    );\n};\nconst Tag = makeDecoratable(\"Tag\", DecoratableTag);\n\nexport { Tag };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","Close","cn","cva","makeDecoratable","Icon","IconButton","tagVariants","variants","isInteractive","true","isDismissible","false","isDisabled","variant","accent","success","warning","destructive","defaultVariants","DecoratableTag","className","content","onClick","onDismiss","dismissIconElement","createElement","dismissIconLabel","disabled","props","dismissButtonVariant","useMemo","includes","dismissIconColor","Object","assign","Boolean","icon","label","color","size","event","stopPropagation","Tag"],"sources":["Tag.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as Close } from \"@webiny/icons/close.svg\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\nimport { Icon, type IconProps } from \"~/Icon\";\nimport type { iconButtonVariants } from \"~/Button\";\nimport { IconButton } from \"~/Button\";\n\nconst tagVariants = cva(\n    [\n        \"wby-inline-flex wby-items-center wby-gap-xxs wby-rounded-sm wby-text-sm wby-text-regular wby-transition-colors wby-overflow-hidden\",\n        \"focus:outline-none\"\n    ],\n    {\n        variants: {\n            isInteractive: {\n                true: \"wby-cursor-pointer\"\n            },\n            isDismissible: {\n                true: \"wby-pl-xs-plus wby-pt-xxs wby-pb-xxs wby-pr-xs\",\n                false: \"wby-px-xs-plus wby-py-xxs\"\n            },\n            isDisabled: {\n                true: \"wby-cursor-not-allowed wby-pointer-events-none\"\n            },\n            variant: {\n                \"neutral-base\": [\n                    \"wby-bg-transparent wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"aria-disabled:wby-bg-transparent aria-disabled:wby-text-neutral-disabled\"\n                ],\n                \"neutral-base-outline\": [\n                    \"wby-border-sm wby-border-solid wby-px-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-py-[calc(theme(padding.xxs)-theme(borderWidth.sm))]\",\n                    \"wby-bg-transparent wby-border-neutral-muted wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"aria-disabled:wby-bg-transparent aria-disabled:wby-border-neutral-dimmed aria-disabled:wby-text-neutral-disabled\"\n                ],\n                \"neutral-light\": [\n                    \"wby-bg-neutral-light wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-muted\",\n                    \"aria-disabled:wby-bg-neutral-light aria-disabled:wby-text-neutral-muted\"\n                ],\n                \"neutral-muted\": [\n                    \"wby-bg-neutral-muted wby-text-neutral-primary\",\n                    \"hover:wby-bg-neutral-strong\",\n                    \"aria-disabled:wby-bg-neutral-muted aria-disabled:wby-text-neutral-muted\"\n                ],\n                \"neutral-strong\": [\n                    \"wby-bg-neutral-strong wby-text-neutral-light\",\n                    \"hover:wby-bg-neutral-xstrong\",\n                    \"aria-disabled:wby-bg-neutral-muted\"\n                ],\n                \"neutral-xstrong\": [\n                    \"wby-bg-neutral-xstrong wby-text-neutral-light\",\n                    \"hover:wby-bg-neutral-dark\",\n                    \"aria-disabled:wby-bg-neutral-strong\"\n                ],\n                \"neutral-dark\": [\n                    \"wby-bg-neutral-dark wby-text-neutral-light\",\n                    \"hover:wby-bg-neutral-xstrong\",\n                    \"aria-disabled:wby-bg-neutral-strong\"\n                ],\n                accent: [\n                    \"wby-bg-primary-default wby-text-neutral-light\",\n                    \"hover:wby-bg-primary-strong\",\n                    \"aria-disabled:wby-bg-primary-disabled\"\n                ],\n                \"accent-light\": [\n                    \"wby-bg-primary-subtle wby-text-neutral-primary\",\n                    \"hover:wby-bg-primary-muted\",\n                    \"aria-disabled:wby-bg-primary-subtle aria-disabled:wby-text-neutral-muted\"\n                ],\n                success: [\n                    \"wby-bg-success-default wby-text-neutral-light\",\n                    \"hover:wby-bg-success-strong\",\n                    \"aria-disabled:wby-bg-success-disabled\"\n                ],\n                \"success-light\": [\n                    \"wby-bg-success-subtle wby-text-neutral-primary\",\n                    \"hover:wby-bg-success-muted\",\n                    \"aria-disabled:wby-bg-success-subtle aria-disabled:wby-text-neutral-muted\"\n                ],\n                warning: [\n                    \"wby-bg-warning-muted wby-text-neutral-primary\",\n                    \"hover:wby-bg-warning-default\",\n                    \"aria-disabled:wby-bg-warning-disabled aria-disabled:wby-text-neutral-disabled\"\n                ],\n                destructive: [\n                    \"wby-bg-destructive-default wby-text-neutral-light\",\n                    \"hover:wby-bg-destructive-strong\",\n                    \"aria-disabled:wby-bg-destructive-disabled\"\n                ]\n            }\n        },\n        defaultVariants: {\n            variant: \"neutral-base\"\n        }\n    }\n);\n\nexport interface TagProps\n    extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\" | \"content\">,\n        VariantProps<typeof tagVariants> {\n    content: React.ReactNode;\n    onDismiss?: (event: React.SyntheticEvent<HTMLSpanElement>) => void;\n    dismissIconElement?: React.ReactElement;\n    dismissIconLabel?: string;\n    disabled?: boolean;\n}\n\nconst DecoratableTag = ({\n    className,\n    variant,\n    content,\n    onClick,\n    onDismiss,\n    dismissIconElement = <Close />,\n    dismissIconLabel = \"Close\",\n    disabled,\n    ...props\n}: TagProps) => {\n    const dismissButtonVariant = React.useMemo((): VariantProps<\n        typeof iconButtonVariants\n    >[\"variant\"] => {\n        if (\n            variant &&\n            [\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"accent\",\n                \"destructive\"\n            ].includes(variant)\n        ) {\n            return \"ghost-negative\";\n        }\n\n        return \"ghost\";\n    }, [variant]);\n\n    const dismissIconColor: IconProps[\"color\"] = React.useMemo(() => {\n        if (\n            variant &&\n            [\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"accent\",\n                \"success\",\n                \"destructive\"\n            ].includes(variant)\n        ) {\n            return \"neutral-negative\";\n        }\n\n        if (variant && [\"warning\"].includes(variant)) {\n            return \"neutral-strong\";\n        }\n\n        return \"neutral-strong-transparent\";\n    }, [variant]);\n\n    return (\n        <span\n            {...props}\n            onClick={onClick}\n            className={cn(\n                tagVariants({\n                    variant,\n                    isDismissible: Boolean(onDismiss),\n                    isInteractive: Boolean(onClick),\n                    isDisabled: Boolean(disabled)\n                }),\n                className\n            )}\n            aria-disabled={disabled}\n        >\n            <span className={\"wby-overflow-hidden wby-truncate wby-whitespace-nowrap\"}>\n                {content}\n            </span>\n            {onDismiss && (\n                <IconButton\n                    icon={\n                        <Icon\n                            icon={dismissIconElement}\n                            label={dismissIconLabel}\n                            color={dismissIconColor}\n                            size={\"sm\"}\n                        />\n                    }\n                    size={\"xxs\"}\n                    variant={dismissButtonVariant}\n                    disabled={disabled}\n                    onClick={event => {\n                        event.stopPropagation();\n                        onDismiss(event);\n                    }}\n                />\n            )}\n        </span>\n    );\n};\nconst Tag = makeDecoratable(\"Tag\", DecoratableTag);\n\nexport { Tag };\n"],"mappings":"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","ignoreList":[]}

package/Tags/Tags.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { type TagsPrimitiveProps } from "./primitives";
+import { type FormComponentProps } from "../FormComponent";
+type TagsProps = TagsPrimitiveProps & FormComponentProps;
+declare const Tags: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element) & {
+    original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TagsProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Tags, type TagsProps };

package/Tags/Tags.js

@@ -0,0 +1,59 @@
+import React, { useCallback, useMemo } from "react";
+import { makeDecoratable, generateId } from "../utils";
+import { TagsPrimitive } from "./primitives";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+const DecoratableTags = ({
+  label,
+  description,
+  note,
+  required,
+  disabled,
+  validation,
+  validate,
+  onBlur: originalOnBlur,
+  ...props
+}) => {
+  const {
+    isValid: validationIsValid,
+    message: validationMessage
+  } = validation || {};
+  const id = useMemo(() => generateId(props.id), [props.id]);
+  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
+  const onBlur = useCallback(async e => {
+    if (validate) {
+      // Since we are accessing event in an async operation, we need to persist it.
+      // See https://reactjs.org/docs/events.html#event-pooling.
+      e.persist();
+      await validate();
+    }
+    originalOnBlur && originalOnBlur(e);
+  }, [validate, originalOnBlur]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, /*#__PURE__*/React.createElement(FormComponentLabel, {
+    htmlFor: id,
+    text: label,
+    required: required,
+    disabled: disabled,
+    invalid: invalid
+  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(TagsPrimitive, Object.assign({}, props, {
+    id: id,
+    disabled: disabled,
+    invalid: invalid,
+    onBlur: onBlur
+  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    text: validationMessage,
+    invalid: invalid,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+    text: note,
+    disabled: disabled
+  }));
+};
+const Tags = makeDecoratable("Tags", DecoratableTags);
+export { Tags };
+
+//# sourceMappingURL=Tags.js.map

package/Tags/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","generateId","TagsPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableTags","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","props","isValid","validationIsValid","message","validationMessage","id","invalid","e","persist","createElement","className","htmlFor","text","Object","assign","Tags"],"sources":["Tags.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, generateId } from \"~/utils\";\nimport { TagsPrimitive, type TagsPrimitiveProps } from \"./primitives\";\n\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent\";\n\ntype TagsProps = TagsPrimitiveProps & FormComponentProps;\n\nconst DecoratableTags = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    ...props\n}: TagsProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const id = useMemo(() => generateId(props.id), [props.id]);\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const onBlur = useCallback(\n        async (e: React.FocusEvent<HTMLInputElement>) => {\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            originalOnBlur && originalOnBlur(e);\n        },\n        [validate, originalOnBlur]\n    );\n\n    return (\n        <div className={\"wby-w-full\"}>\n            <FormComponentLabel\n                htmlFor={id}\n                text={label}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n            <TagsPrimitive\n                {...props}\n                id={id}\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst Tags = makeDecoratable(\"Tags\", DecoratableTags);\n\nexport { Tags, type TagsProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,UAAU;AACpC,SAASC,aAAa;AAEtB,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAMrB,MAAMC,eAAe,GAAGA,CAAC;EACrBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtB,GAAGC;AACI,CAAC,KAAK;EACb,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGR,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMS,EAAE,GAAGvB,OAAO,CAAC,MAAME,UAAU,CAACgB,KAAK,CAACK,EAAE,CAAC,EAAE,CAACL,KAAK,CAACK,EAAE,CAAC,CAAC;EAC1D,MAAMC,OAAO,GAAGxB,OAAO,CAAC,MAAMoB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAMJ,MAAM,GAAGjB,WAAW,CACtB,MAAO0B,CAAqC,IAAK;IAC7C,IAAIV,QAAQ,EAAE;MACV;MACA;MACAU,CAAC,CAACC,OAAO,CAAC,CAAC;MACX,MAAMX,QAAQ,CAAC,CAAC;IACpB;IACAE,cAAc,IAAIA,cAAc,CAACQ,CAAC,CAAC;EACvC,CAAC,EACD,CAACV,QAAQ,EAAEE,cAAc,CAC7B,CAAC;EAED,oBACInB,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAa,gBACzB9B,KAAA,CAAA6B,aAAA,CAACrB,kBAAkB;IACfuB,OAAO,EAAEN,EAAG;IACZO,IAAI,EAAErB,KAAM;IACZG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACF1B,KAAA,CAAA6B,aAAA,CAACvB,wBAAwB;IAAC0B,IAAI,EAAEpB,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CAAC,eACnEf,KAAA,CAAA6B,aAAA,CAACxB,aAAa,EAAA4B,MAAA,CAAAC,MAAA,KACNd,KAAK;IACTK,EAAE,EAAEA,EAAG;IACPV,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA;EAAO,EAClB,CAAC,eACFlB,KAAA,CAAA6B,aAAA,CAACtB,yBAAyB;IACtByB,IAAI,EAAER,iBAAkB;IACxBE,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFf,KAAA,CAAA6B,aAAA,CAACpB,iBAAiB;IAACuB,IAAI,EAAEnB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMoB,IAAI,GAAGhC,eAAe,CAAC,MAAM,EAAEO,eAAe,CAAC;AAErD,SAASyB,IAAI","ignoreList":[]}

package/Tags/Tags.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tags } from "./Tags";
+declare const meta: Meta<typeof Tags>;
+export default meta;
+type Story = StoryObj<typeof Tags>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const WithRequiredLabel: Story;
+export declare const WithDescription: Story;
+export declare const WithNotes: Story;
+export declare const WithErrors: Story;
+export declare const Disabled: Story;
+export declare const FullExample: Story;

package/Tags/Tags.stories.js

@@ -0,0 +1,92 @@
+import React, { useState } from "react";
+import { Tags } from "./Tags";
+const meta = {
+  title: "Components/Form/Tags",
+  component: Tags,
+  argTypes: {
+    onChange: {
+      action: "onChange"
+    },
+    onValueInput: {
+      action: "onValueInput"
+    },
+    onValueAdd: {
+      action: "onValueAdd"
+    },
+    onValueRemove: {
+      action: "onValueRemove"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [values, setValues] = useState(args.value);
+    return /*#__PURE__*/React.createElement(Tags, Object.assign({}, args, {
+      value: values,
+      onChange: setValues
+    }));
+  }
+};
+export default meta;
+export const Default = {};
+export const WithLabel = {
+  args: {
+    ...Default.args,
+    label: "Any field label"
+  }
+};
+export const WithRequiredLabel = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true
+  }
+};
+export const WithDescription = {
+  args: {
+    ...Default.args,
+    description: "Provide the required information for processing your request."
+  }
+};
+export const WithNotes = {
+  args: {
+    ...Default.args,
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const WithErrors = {
+  args: {
+    ...Default.args,
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Disabled = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    disabled: true
+  }
+};
+export const FullExample = {
+  args: {
+    ...Default.args,
+    label: "Any field label",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+
+//# sourceMappingURL=Tags.stories.js.map

package/Tags/Tags.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","Tags","meta","title","component","argTypes","onChange","action","onValueInput","onValueAdd","onValueRemove","disabled","control","defaultValue","parameters","layout","render","args","values","setValues","value","createElement","Object","assign","Default","WithLabel","label","WithRequiredLabel","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample"],"sources":["Tags.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tags } from \"./Tags\";\n\nconst meta: Meta<typeof Tags> = {\n    title: \"Components/Form/Tags\",\n    component: Tags,\n    argTypes: {\n        onChange: { action: \"onChange\" },\n        onValueInput: { action: \"onValueInput\" },\n        onValueAdd: { action: \"onValueAdd\" },\n        onValueRemove: { action: \"onValueRemove\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return <Tags {...args} value={values} onChange={setValues} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tags>;\n\nexport const Default: Story = {};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AAEvC,SAASC,IAAI;AAEb,MAAMC,IAAuB,GAAG;EAC5BC,KAAK,EAAE,sBAAsB;EAC7BC,SAAS,EAAEH,IAAI;EACfI,QAAQ,EAAE;IACNC,QAAQ,EAAE;MAAEC,MAAM,EAAE;IAAW,CAAC;IAChCC,YAAY,EAAE;MAAED,MAAM,EAAE;IAAe,CAAC;IACxCE,UAAU,EAAE;MAAEF,MAAM,EAAE;IAAa,CAAC;IACpCG,aAAa,EAAE;MAAEH,MAAM,EAAE;IAAgB,CAAC;IAC1CI,QAAQ,EAAE;MACNC,OAAO,EAAE,SAAS;MAClBC,YAAY,EAAE;IAClB;EACJ,CAAC;EACDC,UAAU,EAAE;IACRC,MAAM,EAAE;EACZ,CAAC;EACDC,MAAM,EAAEC,IAAI,IAAI;IACZ,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGnB,QAAQ,CAACiB,IAAI,CAACG,KAAK,CAAC;IAChD,oBAAOrB,KAAA,CAAAsB,aAAA,CAACpB,IAAI,EAAAqB,MAAA,CAAAC,MAAA,KAAKN,IAAI;MAAEG,KAAK,EAAEF,MAAO;MAACZ,QAAQ,EAAEa;IAAU,EAAE,CAAC;EACjE;AACJ,CAAC;AAED,eAAejB,IAAI;AAGnB,OAAO,MAAMsB,OAAc,GAAG,CAAC,CAAC;AAEhC,OAAO,MAAMC,SAAgB,GAAG;EAC5BR,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE;EACX;AACJ,CAAC;AAED,OAAO,MAAMC,iBAAwB,GAAG;EACpCV,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMC,eAAsB,GAAG;EAClCZ,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfa,WAAW,EAAE;EACjB;AACJ,CAAC;AAED,OAAO,MAAMC,SAAgB,GAAG;EAC5Bd,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfe,IAAI,EAAE;EACV;AACJ,CAAC;AAED,OAAO,MAAMC,UAAiB,GAAG;EAC7BhB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfiB,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC;AAED,OAAO,MAAMC,QAAe,GAAG;EAC3BpB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE,iBAAiB;IACxBf,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAM2B,WAAkB,GAAG;EAC9BrB,IAAI,EAAE;IACF,GAAGO,OAAO,CAACP,IAAI;IACfS,KAAK,EAAE,iBAAiB;IACxBE,QAAQ,EAAE,IAAI;IACdE,WAAW,EAAE,+DAA+D;IAC5EE,IAAI,EAAE,qEAAqE;IAC3EE,UAAU,EAAE;MACRC,OAAO,EAAE,KAAK;MACdC,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}

package/Tags/domain/TagItem.d.ts

@@ -0,0 +1,18 @@
+export declare class TagItem {
+    private readonly _id;
+    private readonly _label;
+    protected _protected: boolean;
+    protected constructor(data: {
+        id: string;
+        label: string;
+        protected: boolean;
+    });
+    static create(data: {
+        id?: string;
+        label: string;
+        protected?: boolean;
+    }): TagItem;
+    get id(): string;
+    get label(): string;
+    get protected(): boolean;
+}

package/Tags/domain/TagItem.js

@@ -0,0 +1,26 @@
+import { generateId } from "../../utils";
+export class TagItem {
+  constructor(data) {
+    this._id = data.id;
+    this._label = data.label;
+    this._protected = data.protected;
+  }
+  static create(data) {
+    return new TagItem({
+      id: generateId(data.id),
+      label: data.label,
+      protected: data.protected || false
+    });
+  }
+  get id() {
+    return this._id;
+  }
+  get label() {
+    return this._label;
+  }
+  get protected() {
+    return this._protected;
+  }
+}
+
+//# sourceMappingURL=TagItem.js.map

package/Tags/domain/TagItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["generateId","TagItem","constructor","data","_id","id","_label","label","_protected","protected","create"],"sources":["TagItem.ts"],"sourcesContent":["import { generateId } from \"~/utils\";\n\nexport class TagItem {\n    private readonly _id: string;\n    private readonly _label: string;\n    protected _protected: boolean;\n\n    protected constructor(data: { id: string; label: string; protected: boolean }) {\n        this._id = data.id;\n        this._label = data.label;\n        this._protected = data.protected;\n    }\n\n    static create(data: { id?: string; label: string; protected?: boolean }): TagItem {\n        return new TagItem({\n            id: generateId(data.id),\n            label: data.label,\n            protected: data.protected || false\n        });\n    }\n\n    get id() {\n        return this._id;\n    }\n\n    get label() {\n        return this._label;\n    }\n\n    get protected() {\n        return this._protected;\n    }\n}\n"],"mappings":"AAAA,SAASA,UAAU;AAEnB,OAAO,MAAMC,OAAO,CAAC;EAKPC,WAAWA,CAACC,IAAuD,EAAE;IAC3E,IAAI,CAACC,GAAG,GAAGD,IAAI,CAACE,EAAE;IAClB,IAAI,CAACC,MAAM,GAAGH,IAAI,CAACI,KAAK;IACxB,IAAI,CAACC,UAAU,GAAGL,IAAI,CAACM,SAAS;EACpC;EAEA,OAAOC,MAAMA,CAACP,IAAyD,EAAW;IAC9E,OAAO,IAAIF,OAAO,CAAC;MACfI,EAAE,EAAEL,UAAU,CAACG,IAAI,CAACE,EAAE,CAAC;MACvBE,KAAK,EAAEJ,IAAI,CAACI,KAAK;MACjBE,SAAS,EAAEN,IAAI,CAACM,SAAS,IAAI;IACjC,CAAC,CAAC;EACN;EAEA,IAAIJ,EAAEA,CAAA,EAAG;IACL,OAAO,IAAI,CAACD,GAAG;EACnB;EAEA,IAAIG,KAAKA,CAAA,EAAG;IACR,OAAO,IAAI,CAACD,MAAM;EACtB;EAEA,IAAIG,SAASA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACD,UAAU;EAC1B;AACJ","ignoreList":[]}

package/Tags/domain/TagItemDto.d.ts

@@ -0,0 +1,5 @@
+export interface TagItemDto {
+    id?: string;
+    label: string;
+    protected?: boolean;
+}

package/Tags/domain/TagItemDto.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=TagItemDto.js.map

package/Tags/domain/TagItemDto.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["TagItemDto.ts"],"sourcesContent":["export interface TagItemDto {\n    id?: string;\n    label: string;\n    protected?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/Tags/domain/TagItemFormatted.d.ts

@@ -0,0 +1,5 @@
+export interface TagItemFormatted {
+    id: string;
+    label: string;
+    protected: boolean;
+}

package/Tags/domain/TagItemFormatted.js

@@ -0,0 +1,3 @@
+export {};
+
+//# sourceMappingURL=TagItemFormatted.js.map

package/Tags/domain/TagItemFormatted.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["TagItemFormatted.ts"],"sourcesContent":["export interface TagItemFormatted {\n    id: string;\n    label: string;\n    protected: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/Tags/domain/TagItemMapper.d.ts

@@ -0,0 +1,5 @@
+import type { TagItem } from "./TagItem";
+import type { TagItemFormatted } from "./TagItemFormatted";
+export declare class TagItemMapper {
+    static toFormatted(item: TagItem): TagItemFormatted;
+}

package/Tags/domain/TagItemMapper.js

@@ -0,0 +1,11 @@
+export class TagItemMapper {
+  static toFormatted(item) {
+    return {
+      id: item.id,
+      label: item.label,
+      protected: item.protected
+    };
+  }
+}
+
+//# sourceMappingURL=TagItemMapper.js.map

package/Tags/domain/TagItemMapper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TagItemMapper","toFormatted","item","id","label","protected"],"sources":["TagItemMapper.ts"],"sourcesContent":["import type { TagItem } from \"./TagItem\";\nimport type { TagItemFormatted } from \"./TagItemFormatted\";\n\nexport class TagItemMapper {\n    static toFormatted(item: TagItem): TagItemFormatted {\n        return {\n            id: item.id,\n            label: item.label,\n            protected: item.protected\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,aAAa,CAAC;EACvB,OAAOC,WAAWA,CAACC,IAAa,EAAoB;IAChD,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,KAAK,EAAEF,IAAI,CAACE,KAAK;MACjBC,SAAS,EAAEH,IAAI,CAACG;IACpB,CAAC;EACL;AACJ","ignoreList":[]}

package/Tags/domain/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./TagItem";
+export * from "./TagItemDto";
+export * from "./TagItemFormatted";
+export * from "./TagItemMapper";

package/Tags/domain/index.js

@@ -0,0 +1,6 @@
+export * from "./TagItem";
+export * from "./TagItemDto";
+export * from "./TagItemFormatted";
+export * from "./TagItemMapper";
+
+//# sourceMappingURL=index.js.map

package/Tags/domain/index.js.map

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

package/Tags/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tags";

package/Tags/index.js

@@ -0,0 +1,3 @@
+export * from "./Tags";
+
+//# sourceMappingURL=index.js.map

package/Tags/index.js.map

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

package/Tags/primitives/TagsPrimitive.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { type InputPrimitiveProps } from "../../Input";
+import type { Icon } from "../../Icon";
+interface TagsPrimitiveProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    /**
+     * Indicates if the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Reference to the input element.
+     */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Indicates if the input field is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Callback triggered when a tag is added or removed.
+     */
+    onChange?: (values: string[]) => void;
+    /**
+     * Callback triggered when the input value changes.
+     */
+    onValueInput?: (value: string) => void;
+    /**
+     * Callback triggered when the value is added to the list.
+     */
+    onValueAdd?: (value: string) => void;
+    /**
+     * Callback triggered when a tag is removed.
+     */
+    onValueRemove?: (value: string) => void;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Size of the input field.
+     * Refer to `InputPrimitiveProps["size"]` for possible values.
+     */
+    size?: InputPrimitiveProps["size"];
+    /**
+     * Icon to be displayed at the start of the input field.
+     */
+    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;
+    /**
+     * Variant of the input field.
+     * Refer to `InputPrimitiveProps["variant"]` for possible values.
+     */
+    variant?: InputPrimitiveProps["variant"];
+    /**
+     * Optional selected item.
+     */
+    value?: string[];
+    /**
+     * Protected values cannot be removed by the user, these can be simple strings or regex patterns.
+     */
+    protectedValues?: string[];
+}
+declare const TagsPrimitive: ((props: TagsPrimitiveProps) => React.JSX.Element) & {
+    original: (props: TagsPrimitiveProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: TagsPrimitiveProps) => React.JSX.Element) & {
+        original: (props: TagsPrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: TagsPrimitiveProps) => React.JSX.Element) & {
+        original: (props: TagsPrimitiveProps) => React.JSX.Element;
+        originalName: string; /**
+         * Indicates if the input field is invalid.
+         */
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { TagsPrimitive, type TagsPrimitiveProps };

package/Tags/primitives/TagsPrimitive.js

@@ -0,0 +1,54 @@
+import React, { useMemo } from "react";
+import { ReactComponent as AddIcon } from "@webiny/icons/add.svg";
+import { makeDecoratable } from "../../utils";
+import { useTags } from "./useTags";
+import { InputPrimitive } from "../../Input";
+import { Tag } from "../../Tag";
+import { IconButton } from "../../Button";
+const DecoratableTagsPrimitive = props => {
+  const {
+    vm,
+    inputValue,
+    addValue,
+    removeValue
+  } = useTags(props);
+  const inputProps = useMemo(() => ({
+    disabled: props.disabled,
+    inputRef: props.inputRef,
+    invalid: props.invalid,
+    onChange: inputValue,
+    placeholder: props.placeholder,
+    size: props.size,
+    variant: props.variant
+  }), [props]);
+
+  // When user press Enter, add the current input value as a tag
+  const handleKeyDown = event => {
+    if (event.key === "Enter" && event.target) {
+      event.preventDefault();
+      addValue();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(InputPrimitive, Object.assign({}, inputProps, vm.inputVm, {
+    onChange: inputValue,
+    onKeyDown: handleKeyDown,
+    startIcon: props.startIcon,
+    endIcon: /*#__PURE__*/React.createElement(IconButton, {
+      onClick: addValue,
+      icon: /*#__PURE__*/React.createElement(AddIcon, null),
+      variant: "ghost",
+      disabled: inputProps.disabled
+    })
+  })), vm.valuesVm.values.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "wby-mt-sm wby-flex wby-flex-wrap wby-gap-xs"
+  }, vm.valuesVm.values.map(tag => /*#__PURE__*/React.createElement(Tag, {
+    key: tag.id,
+    content: tag.label,
+    onDismiss: !tag.protected ? () => removeValue(tag.label) : undefined,
+    variant: "neutral-muted"
+  }))));
+};
+const TagsPrimitive = makeDecoratable("TagsPrimitive", DecoratableTagsPrimitive);
+export { TagsPrimitive };
+
+//# sourceMappingURL=TagsPrimitive.js.map

package/Tags/primitives/TagsPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","ReactComponent","AddIcon","makeDecoratable","useTags","InputPrimitive","Tag","IconButton","DecoratableTagsPrimitive","props","vm","inputValue","addValue","removeValue","inputProps","disabled","inputRef","invalid","onChange","placeholder","size","variant","handleKeyDown","event","key","target","preventDefault","createElement","Object","assign","inputVm","onKeyDown","startIcon","endIcon","onClick","icon","valuesVm","values","length","className","map","tag","id","content","label","onDismiss","protected","undefined","TagsPrimitive"],"sources":["TagsPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport { makeDecoratable } from \"~/utils\";\nimport { useTags } from \"./useTags\";\nimport { InputPrimitive, type InputPrimitiveProps } from \"~/Input\";\nimport { Tag } from \"~/Tag\";\nimport { IconButton } from \"~/Button\";\nimport type { Icon } from \"~/Icon\";\n\ninterface TagsPrimitiveProps\n    extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"onChange\"> {\n    /**\n     * Indicates if the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Reference to the input element.\n     */\n    inputRef?: React.Ref<HTMLInputElement>;\n    /**\n     * Indicates if the input field is invalid.\n     */\n    invalid?: boolean;\n    /**\n     * Callback triggered when a tag is added or removed.\n     */\n    onChange?: (values: string[]) => void;\n    /**\n     * Callback triggered when the input value changes.\n     */\n    onValueInput?: (value: string) => void;\n    /**\n     * Callback triggered when the value is added to the list.\n     */\n    onValueAdd?: (value: string) => void;\n    /**\n     * Callback triggered when a tag is removed.\n     */\n    onValueRemove?: (value: string) => void;\n    /**\n     * Placeholder text for the input field.\n     */\n    placeholder?: string;\n    /**\n     * Size of the input field.\n     * Refer to `InputPrimitiveProps[\"size\"]` for possible values.\n     */\n    size?: InputPrimitiveProps[\"size\"];\n    /**\n     * Icon to be displayed at the start of the input field.\n     */\n    startIcon?: React.ReactElement<typeof Icon> | React.ReactElement;\n    /**\n     * Variant of the input field.\n     * Refer to `InputPrimitiveProps[\"variant\"]` for possible values.\n     */\n    variant?: InputPrimitiveProps[\"variant\"];\n    /**\n     * Optional selected item.\n     */\n    value?: string[];\n    /**\n     * Protected values cannot be removed by the user, these can be simple strings or regex patterns.\n     */\n    protectedValues?: string[];\n}\n\nconst DecoratableTagsPrimitive = (props: TagsPrimitiveProps) => {\n    const { vm, inputValue, addValue, removeValue } = useTags(props);\n\n    const inputProps: InputPrimitiveProps = useMemo(\n        () => ({\n            disabled: props.disabled,\n            inputRef: props.inputRef,\n            invalid: props.invalid,\n            onChange: inputValue,\n            placeholder: props.placeholder,\n            size: props.size,\n            variant: props.variant\n        }),\n        [props]\n    );\n\n    // When user press Enter, add the current input value as a tag\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === \"Enter\" && event.target) {\n            event.preventDefault();\n            addValue();\n        }\n    };\n\n    return (\n        <div>\n            <InputPrimitive\n                {...inputProps}\n                {...vm.inputVm}\n                onChange={inputValue}\n                onKeyDown={handleKeyDown}\n                startIcon={props.startIcon}\n                endIcon={\n                    <IconButton\n                        onClick={addValue}\n                        icon={<AddIcon />}\n                        variant={\"ghost\"}\n                        disabled={inputProps.disabled}\n                    />\n                }\n            />\n\n            {vm.valuesVm.values.length > 0 && (\n                <div className={\"wby-mt-sm wby-flex wby-flex-wrap wby-gap-xs\"}>\n                    {vm.valuesVm.values.map(tag => (\n                        <Tag\n                            key={tag.id}\n                            content={tag.label}\n                            onDismiss={!tag.protected ? () => removeValue(tag.label) : undefined}\n                            variant={\"neutral-muted\"}\n                        />\n                    ))}\n                </div>\n            )}\n        </div>\n    );\n};\n\nconst TagsPrimitive = makeDecoratable(\"TagsPrimitive\", DecoratableTagsPrimitive);\n\nexport { TagsPrimitive, type TagsPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,cAAc,IAAIC,OAAO,QAAQ,uBAAuB;AACjE,SAASC,eAAe;AACxB,SAASC,OAAO;AAChB,SAASC,cAAc;AACvB,SAASC,GAAG;AACZ,SAASC,UAAU;AA6DnB,MAAMC,wBAAwB,GAAIC,KAAyB,IAAK;EAC5D,MAAM;IAAEC,EAAE;IAAEC,UAAU;IAAEC,QAAQ;IAAEC;EAAY,CAAC,GAAGT,OAAO,CAACK,KAAK,CAAC;EAEhE,MAAMK,UAA+B,GAAGd,OAAO,CAC3C,OAAO;IACHe,QAAQ,EAAEN,KAAK,CAACM,QAAQ;IACxBC,QAAQ,EAAEP,KAAK,CAACO,QAAQ;IACxBC,OAAO,EAAER,KAAK,CAACQ,OAAO;IACtBC,QAAQ,EAAEP,UAAU;IACpBQ,WAAW,EAAEV,KAAK,CAACU,WAAW;IAC9BC,IAAI,EAAEX,KAAK,CAACW,IAAI;IAChBC,OAAO,EAAEZ,KAAK,CAACY;EACnB,CAAC,CAAC,EACF,CAACZ,KAAK,CACV,CAAC;;EAED;EACA,MAAMa,aAAa,GAAIC,KAA4C,IAAK;IACpE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACE,MAAM,EAAE;MACvCF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBd,QAAQ,CAAC,CAAC;IACd;EACJ,CAAC;EAED,oBACIb,KAAA,CAAA4B,aAAA,2BACI5B,KAAA,CAAA4B,aAAA,CAACtB,cAAc,EAAAuB,MAAA,CAAAC,MAAA,KACPf,UAAU,EACVJ,EAAE,CAACoB,OAAO;IACdZ,QAAQ,EAAEP,UAAW;IACrBoB,SAAS,EAAET,aAAc;IACzBU,SAAS,EAAEvB,KAAK,CAACuB,SAAU;IAC3BC,OAAO,eACHlC,KAAA,CAAA4B,aAAA,CAACpB,UAAU;MACP2B,OAAO,EAAEtB,QAAS;MAClBuB,IAAI,eAAEpC,KAAA,CAAA4B,aAAA,CAACzB,OAAO,MAAE,CAAE;MAClBmB,OAAO,EAAE,OAAQ;MACjBN,QAAQ,EAAED,UAAU,CAACC;IAAS,CACjC;EACJ,EACJ,CAAC,EAEDL,EAAE,CAAC0B,QAAQ,CAACC,MAAM,CAACC,MAAM,GAAG,CAAC,iBAC1BvC,KAAA,CAAA4B,aAAA;IAAKY,SAAS,EAAE;EAA8C,GACzD7B,EAAE,CAAC0B,QAAQ,CAACC,MAAM,CAACG,GAAG,CAACC,GAAG,iBACvB1C,KAAA,CAAA4B,aAAA,CAACrB,GAAG;IACAkB,GAAG,EAAEiB,GAAG,CAACC,EAAG;IACZC,OAAO,EAAEF,GAAG,CAACG,KAAM;IACnBC,SAAS,EAAE,CAACJ,GAAG,CAACK,SAAS,GAAG,MAAMjC,WAAW,CAAC4B,GAAG,CAACG,KAAK,CAAC,GAAGG,SAAU;IACrE1B,OAAO,EAAE;EAAgB,CAC5B,CACJ,CACA,CAER,CAAC;AAEd,CAAC;AAED,MAAM2B,aAAa,GAAG7C,eAAe,CAAC,eAAe,EAAEK,wBAAwB,CAAC;AAEhF,SAASwC,aAAa","ignoreList":[]}

package/Tags/primitives/TagsPrimitive.stories.d.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TagsPrimitive } from "./TagsPrimitive";
+declare const meta: Meta<typeof TagsPrimitive>;
+export default meta;
+type Story = StoryObj<typeof TagsPrimitive>;
+export declare const Default: Story;
+export declare const MediumSize: Story;
+export declare const LargeSize: Story;
+export declare const ExtraLargeSize: 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 WithCustomPlaceholder: Story;
+export declare const WithStartIcon: Story;
+export declare const WithInitialValues: Story;
+export declare const WithProtectedValues: Story;
+export declare const WithExternalValueControl: Story;