@webiny/admin-ui 0.0.0-unstable.06b2ede40f

package/Tags/primitives/presenters/TagsValuesPresenter.d.ts

@@ -0,0 +1,28 @@
+import { type TagItemFormatted } from "../../domain";
+interface TagsValuesPresenterParams {
+    values?: string[];
+    protectedValues?: string[];
+}
+interface ITagsValuesPresenter {
+    vm: {
+        values: TagItemFormatted[];
+    };
+    init: (params: TagsValuesPresenterParams) => void;
+    addValue: (value: string) => void;
+    removeValue: (value: string) => void;
+    hasValue: (value: string) => boolean;
+    isValueProtected: (value: string) => boolean;
+}
+declare class TagsValuesPresenter implements ITagsValuesPresenter {
+    private values;
+    constructor();
+    init(params: TagsValuesPresenterParams): void;
+    get vm(): {
+        values: TagItemFormatted[];
+    };
+    addValue: (value: string) => void;
+    removeValue: (value: string) => void;
+    hasValue: (value: string) => boolean;
+    isValueProtected: (value: string) => boolean;
+}
+export { TagsValuesPresenter, type ITagsValuesPresenter, type TagsValuesPresenterParams };

package/Tags/primitives/presenters/TagsValuesPresenter.js

@@ -0,0 +1,41 @@
+import { makeAutoObservable } from "mobx";
+import minimatch from "minimatch";
+import { TagItem, TagItemMapper } from "../../domain";
+class TagsValuesPresenter {
+  values = [];
+  constructor() {
+    makeAutoObservable(this);
+  }
+  init(params) {
+    this.values = params.values?.map(value => TagItem.create({
+      label: value,
+      protected: params.protectedValues ? params.protectedValues.some(pattern => minimatch(value, pattern)) : false
+    })) ?? [];
+  }
+  get vm() {
+    return {
+      values: this.values.map(value => TagItemMapper.toFormatted(value))
+    };
+  }
+  addValue = value => {
+    if (!value || this.values.find(tag => tag.label === value)) {
+      return;
+    }
+    const tagItem = TagItem.create({
+      label: value
+    });
+    this.values.push(tagItem);
+  };
+  removeValue = value => {
+    this.values = this.values.filter(tagItem => tagItem.label !== value || this.isValueProtected(tagItem.label));
+  };
+  hasValue = value => {
+    return !!this.values.find(tag => tag.label === value);
+  };
+  isValueProtected = value => {
+    return !!this.values.find(tag => tag.label === value && tag.protected);
+  };
+}
+export { TagsValuesPresenter };
+
+//# sourceMappingURL=TagsValuesPresenter.js.map

package/Tags/primitives/presenters/TagsValuesPresenter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["makeAutoObservable","minimatch","TagItem","TagItemMapper","TagsValuesPresenter","values","constructor","init","params","map","value","create","label","protected","protectedValues","some","pattern","vm","toFormatted","addValue","find","tag","tagItem","push","removeValue","filter","isValueProtected","hasValue"],"sources":["TagsValuesPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport minimatch from \"minimatch\";\nimport { TagItem, type TagItemFormatted, TagItemMapper } from \"~/Tags/domain\";\n\ninterface TagsValuesPresenterParams {\n    values?: string[];\n    protectedValues?: string[];\n}\n\ninterface ITagsValuesPresenter {\n    vm: {\n        values: TagItemFormatted[];\n    };\n    init: (params: TagsValuesPresenterParams) => void;\n    addValue: (value: string) => void;\n    removeValue: (value: string) => void;\n    hasValue: (value: string) => boolean;\n    isValueProtected: (value: string) => boolean;\n}\n\nclass TagsValuesPresenter implements ITagsValuesPresenter {\n    private values: TagItem[] = [];\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    init(params: TagsValuesPresenterParams) {\n        this.values =\n            params.values?.map(value =>\n                TagItem.create({\n                    label: value,\n                    protected: params.protectedValues\n                        ? params.protectedValues.some(pattern => minimatch(value, pattern))\n                        : false\n                })\n            ) ?? [];\n    }\n\n    get vm() {\n        return {\n            values: this.values.map(value => TagItemMapper.toFormatted(value))\n        };\n    }\n\n    public addValue = (value: string) => {\n        if (!value || this.values.find(tag => tag.label === value)) {\n            return;\n        }\n        const tagItem = TagItem.create({ label: value });\n        this.values.push(tagItem);\n    };\n\n    public removeValue = (value: string) => {\n        this.values = this.values.filter(\n            tagItem => tagItem.label !== value || this.isValueProtected(tagItem.label)\n        );\n    };\n\n    public hasValue = (value: string) => {\n        return !!this.values.find(tag => tag.label === value);\n    };\n\n    public isValueProtected = (value: string) => {\n        return !!this.values.find(tag => tag.label === value && tag.protected);\n    };\n}\n\nexport { TagsValuesPresenter, type ITagsValuesPresenter, type TagsValuesPresenterParams };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AACzC,OAAOC,SAAS,MAAM,WAAW;AACjC,SAASC,OAAO,EAAyBC,aAAa;AAkBtD,MAAMC,mBAAmB,CAAiC;EAC9CC,MAAM,GAAc,EAAE;EAE9BC,WAAWA,CAAA,EAAG;IACVN,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEAO,IAAIA,CAACC,MAAiC,EAAE;IACpC,IAAI,CAACH,MAAM,GACPG,MAAM,CAACH,MAAM,EAAEI,GAAG,CAACC,KAAK,IACpBR,OAAO,CAACS,MAAM,CAAC;MACXC,KAAK,EAAEF,KAAK;MACZG,SAAS,EAAEL,MAAM,CAACM,eAAe,GAC3BN,MAAM,CAACM,eAAe,CAACC,IAAI,CAACC,OAAO,IAAIf,SAAS,CAACS,KAAK,EAAEM,OAAO,CAAC,CAAC,GACjE;IACV,CAAC,CACL,CAAC,IAAI,EAAE;EACf;EAEA,IAAIC,EAAEA,CAAA,EAAG;IACL,OAAO;MACHZ,MAAM,EAAE,IAAI,CAACA,MAAM,CAACI,GAAG,CAACC,KAAK,IAAIP,aAAa,CAACe,WAAW,CAACR,KAAK,CAAC;IACrE,CAAC;EACL;EAEOS,QAAQ,GAAIT,KAAa,IAAK;IACjC,IAAI,CAACA,KAAK,IAAI,IAAI,CAACL,MAAM,CAACe,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACT,KAAK,KAAKF,KAAK,CAAC,EAAE;MACxD;IACJ;IACA,MAAMY,OAAO,GAAGpB,OAAO,CAACS,MAAM,CAAC;MAAEC,KAAK,EAAEF;IAAM,CAAC,CAAC;IAChD,IAAI,CAACL,MAAM,CAACkB,IAAI,CAACD,OAAO,CAAC;EAC7B,CAAC;EAEME,WAAW,GAAId,KAAa,IAAK;IACpC,IAAI,CAACL,MAAM,GAAG,IAAI,CAACA,MAAM,CAACoB,MAAM,CAC5BH,OAAO,IAAIA,OAAO,CAACV,KAAK,KAAKF,KAAK,IAAI,IAAI,CAACgB,gBAAgB,CAACJ,OAAO,CAACV,KAAK,CAC7E,CAAC;EACL,CAAC;EAEMe,QAAQ,GAAIjB,KAAa,IAAK;IACjC,OAAO,CAAC,CAAC,IAAI,CAACL,MAAM,CAACe,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACT,KAAK,KAAKF,KAAK,CAAC;EACzD,CAAC;EAEMgB,gBAAgB,GAAIhB,KAAa,IAAK;IACzC,OAAO,CAAC,CAAC,IAAI,CAACL,MAAM,CAACe,IAAI,CAACC,GAAG,IAAIA,GAAG,CAACT,KAAK,KAAKF,KAAK,IAAIW,GAAG,CAACR,SAAS,CAAC;EAC1E,CAAC;AACL;AAEA,SAAST,mBAAmB","ignoreList":[]}

package/Tags/primitives/presenters/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./TagsPresenter";
+export * from "./TagsInputPresenter";
+export * from "./TagsValuesPresenter";

package/Tags/primitives/presenters/index.js

@@ -0,0 +1,5 @@
+export * from "./TagsPresenter";
+export * from "./TagsInputPresenter";
+export * from "./TagsValuesPresenter";
+
+//# sourceMappingURL=index.js.map

package/Tags/primitives/presenters/index.js.map

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

package/Tags/primitives/useTags.d.ts

@@ -0,0 +1,15 @@
+import type { TagsPrimitiveProps } from "./TagsPrimitive";
+export declare const useTags: (props: TagsPrimitiveProps) => {
+    vm: {
+        inputVm: {
+            placeholder: string;
+            value: string;
+        };
+        valuesVm: {
+            values: import("../domain").TagItemFormatted[];
+        };
+    };
+    inputValue: (value: string) => void;
+    addValue: () => void;
+    removeValue: (value: string) => void;
+};

package/Tags/primitives/useTags.js

@@ -0,0 +1,36 @@
+import { useEffect, useMemo, useState } from "react";
+import { autorun } from "mobx";
+import { TagsInputPresenter, TagsPresenter, TagsValuesPresenter } from "./presenters";
+export const useTags = props => {
+  const params = useMemo(() => ({
+    values: props.value,
+    protectedValues: props.protectedValues,
+    placeholder: props.placeholder,
+    onValueChange: props.onChange,
+    onValueInput: props.onValueInput,
+    onValueAdd: props.onValueAdd,
+    onValueRemove: props.onValueRemove
+  }), [props.value, props.protectedValues, props.placeholder, props.onChange, props.onValueInput, props.onValueAdd, props.onValueRemove]);
+  const presenter = useMemo(() => {
+    const inputPresenter = new TagsInputPresenter();
+    const valuesPresenter = new TagsValuesPresenter();
+    return new TagsPresenter(inputPresenter, valuesPresenter);
+  }, []);
+  const [vm, setVm] = useState(presenter.vm);
+  useEffect(() => {
+    presenter.init(params);
+  }, [params, presenter]);
+  useEffect(() => {
+    return autorun(() => {
+      setVm(presenter.vm);
+    });
+  }, [presenter]);
+  return {
+    vm,
+    inputValue: presenter.inputValue,
+    addValue: presenter.addValue,
+    removeValue: presenter.removeValue
+  };
+};
+
+//# sourceMappingURL=useTags.js.map

package/Tags/primitives/useTags.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useMemo","useState","autorun","TagsInputPresenter","TagsPresenter","TagsValuesPresenter","useTags","props","params","values","value","protectedValues","placeholder","onValueChange","onChange","onValueInput","onValueAdd","onValueRemove","presenter","inputPresenter","valuesPresenter","vm","setVm","init","inputValue","addValue","removeValue"],"sources":["useTags.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport {\n    TagsInputPresenter,\n    TagsPresenter,\n    type TagsPresenterParams,\n    TagsValuesPresenter\n} from \"./presenters\";\nimport type { TagsPrimitiveProps } from \"./TagsPrimitive\";\n\nexport const useTags = (props: TagsPrimitiveProps) => {\n    const params: TagsPresenterParams = useMemo(\n        () => ({\n            values: props.value,\n            protectedValues: props.protectedValues,\n            placeholder: props.placeholder,\n            onValueChange: props.onChange,\n            onValueInput: props.onValueInput,\n            onValueAdd: props.onValueAdd,\n            onValueRemove: props.onValueRemove\n        }),\n        [\n            props.value,\n            props.protectedValues,\n            props.placeholder,\n            props.onChange,\n            props.onValueInput,\n            props.onValueAdd,\n            props.onValueRemove\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const inputPresenter = new TagsInputPresenter();\n        const valuesPresenter = new TagsValuesPresenter();\n\n        return new TagsPresenter(inputPresenter, valuesPresenter);\n    }, []);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        inputValue: presenter.inputValue,\n        addValue: presenter.addValue,\n        removeValue: presenter.removeValue\n    };\n};\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,OAAO,QAAQ,MAAM;AAC9B,SACIC,kBAAkB,EAClBC,aAAa,EAEbC,mBAAmB;AAIvB,OAAO,MAAMC,OAAO,GAAIC,KAAyB,IAAK;EAClD,MAAMC,MAA2B,GAAGR,OAAO,CACvC,OAAO;IACHS,MAAM,EAAEF,KAAK,CAACG,KAAK;IACnBC,eAAe,EAAEJ,KAAK,CAACI,eAAe;IACtCC,WAAW,EAAEL,KAAK,CAACK,WAAW;IAC9BC,aAAa,EAAEN,KAAK,CAACO,QAAQ;IAC7BC,YAAY,EAAER,KAAK,CAACQ,YAAY;IAChCC,UAAU,EAAET,KAAK,CAACS,UAAU;IAC5BC,aAAa,EAAEV,KAAK,CAACU;EACzB,CAAC,CAAC,EACF,CACIV,KAAK,CAACG,KAAK,EACXH,KAAK,CAACI,eAAe,EACrBJ,KAAK,CAACK,WAAW,EACjBL,KAAK,CAACO,QAAQ,EACdP,KAAK,CAACQ,YAAY,EAClBR,KAAK,CAACS,UAAU,EAChBT,KAAK,CAACU,aAAa,CAE3B,CAAC;EAED,MAAMC,SAAS,GAAGlB,OAAO,CAAC,MAAM;IAC5B,MAAMmB,cAAc,GAAG,IAAIhB,kBAAkB,CAAC,CAAC;IAC/C,MAAMiB,eAAe,GAAG,IAAIf,mBAAmB,CAAC,CAAC;IAEjD,OAAO,IAAID,aAAa,CAACe,cAAc,EAAEC,eAAe,CAAC;EAC7D,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM,CAACC,EAAE,EAAEC,KAAK,CAAC,GAAGrB,QAAQ,CAACiB,SAAS,CAACG,EAAE,CAAC;EAE1CtB,SAAS,CAAC,MAAM;IACZmB,SAAS,CAACK,IAAI,CAACf,MAAM,CAAC;EAC1B,CAAC,EAAE,CAACA,MAAM,EAAEU,SAAS,CAAC,CAAC;EAEvBnB,SAAS,CAAC,MAAM;IACZ,OAAOG,OAAO,CAAC,MAAM;MACjBoB,KAAK,CAACJ,SAAS,CAACG,EAAE,CAAC;IACvB,CAAC,CAAC;EACN,CAAC,EAAE,CAACH,SAAS,CAAC,CAAC;EAEf,OAAO;IACHG,EAAE;IACFG,UAAU,EAAEN,SAAS,CAACM,UAAU;IAChCC,QAAQ,EAAEP,SAAS,CAACO,QAAQ;IAC5BC,WAAW,EAAER,SAAS,CAACQ;EAC3B,CAAC;AACL,CAAC","ignoreList":[]}

package/Text/Text.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { type VariantProps } from "../utils";
+type TextTags = "span" | "div";
+declare const textVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof textVariants> {
+    as?: TextTags;
+}
+declare const Text: (({ children, size, className, as: Tag, ...props }: TextProps) => React.JSX.Element) & {
+    original: ({ children, size, className, as: Tag, ...props }: TextProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children, size, className, as: Tag, ...props }: TextProps) => React.JSX.Element) & {
+        original: ({ children, size, className, as: Tag, ...props }: TextProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, size, className, as: Tag, ...props }: TextProps) => React.JSX.Element) & {
+        original: ({ children, size, className, as: Tag, ...props }: TextProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Text, type TextProps, type TextTags };

package/Text/Text.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { cn, cva, makeDecoratable } from "../utils";
+const textVariants = cva("wby-font-sans", {
+  variants: {
+    size: {
+      xl: "wby-text-xl",
+      lg: "wby-text-lg",
+      md: "wby-text-md",
+      sm: "wby-text-sm"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const TextBase = ({
+  children,
+  size,
+  className,
+  as: Tag = "span",
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({}, props, {
+    className: cn(textVariants({
+      size
+    }), className)
+  }), children);
+};
+const Text = makeDecoratable("Text", TextBase);
+export { Text };
+
+//# sourceMappingURL=Text.js.map

package/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","cn","cva","makeDecoratable","textVariants","variants","size","xl","lg","md","sm","defaultVariants","TextBase","children","className","as","Tag","props","createElement","Object","assign","Text"],"sources":["Text.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\ntype TextTags = \"span\" | \"div\";\n\nconst textVariants = cva(\"wby-font-sans\", {\n    variants: {\n        size: {\n            xl: \"wby-text-xl\",\n            lg: \"wby-text-lg\",\n            md: \"wby-text-md\",\n            sm: \"wby-text-sm\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\"\n    }\n});\n\ninterface TextProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof textVariants> {\n    as?: TextTags;\n}\n\nconst TextBase = ({ children, size, className, as: Tag = \"span\", ...props }: TextProps) => {\n    return (\n        <Tag {...props} className={cn(textVariants({ size }), className)}>\n            {children}\n        </Tag>\n    );\n};\n\nconst Text = makeDecoratable(\"Text\", TextBase);\n\nexport { Text, type TextProps, type TextTags };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAIjC,MAAMC,YAAY,GAAGF,GAAG,CAAC,eAAe,EAAE;EACtCG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE;IACR;EACJ,CAAC;EACDC,eAAe,EAAE;IACbL,IAAI,EAAE;EACV;AACJ,CAAC,CAAC;AAMF,MAAMM,QAAQ,GAAGA,CAAC;EAAEC,QAAQ;EAAEP,IAAI;EAAEQ,SAAS;EAAEC,EAAE,EAAEC,GAAG,GAAG,MAAM;EAAE,GAAGC;AAAiB,CAAC,KAAK;EACvF,oBACIjB,KAAA,CAAAkB,aAAA,CAACF,GAAG,EAAAG,MAAA,CAAAC,MAAA,KAAKH,KAAK;IAAEH,SAAS,EAAEb,EAAE,CAACG,YAAY,CAAC;MAAEE;IAAK,CAAC,CAAC,EAAEQ,SAAS;EAAE,IAC5DD,QACA,CAAC;AAEd,CAAC;AAED,MAAMQ,IAAI,GAAGlB,eAAe,CAAC,MAAM,EAAES,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}

package/Text/Text.mdx

@@ -0,0 +1,141 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as TextStories from './Text.stories';
+
+<Meta of={TextStories} />
+
+# Text
+
+The Text component is a fundamental UI element used for displaying text content with consistent styling across the application. It provides a standardized way to render text with different sizes while maintaining the design system's typography guidelines. The component is designed to be flexible, allowing it to be rendered as different HTML elements while preserving consistent styling.
+
+## Usage
+
+<Canvas of={TextStories.Documentation} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextExample = () => {
+    return <Text size="md">Text component example</Text>;
+};
+
+export default TextExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Text/Text.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={TextStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextExample = () => {
+    return <Text size="md">Text component example</Text>;
+};
+
+export default TextExample;
+```
+
+## Examples
+
+### Extra Large Text
+
+<Canvas of={TextStories.TextXl} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextXlExample = () => {
+    return (
+        <Text size="xl">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Text>
+    );
+};
+
+export default TextXlExample;
+` } } />
+
+### Large Text
+
+<Canvas of={TextStories.TextLg} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextLgExample = () => {
+    return (
+        <Text size="lg">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Text>
+    );
+};
+
+export default TextLgExample;
+` } } />
+
+### Medium Text
+
+<Canvas of={TextStories.TextMd} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextMdExample = () => {
+    return (
+        <Text size="md">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Text>
+    );
+};
+
+export default TextMdExample;
+` } } />
+
+### Small Text
+
+<Canvas of={TextStories.TextSm} source={ { code: `
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextSmExample = () => {
+    return (
+        <Text size="sm">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Text>
+    );
+};
+
+export default TextSmExample;
+` } } />
+
+### Using Different HTML Elements
+
+The Text component can be rendered as different HTML elements using the `as` prop. This is useful when you want to maintain semantic structure but want different visual styling.
+
+```tsx
+import React from "react";
+import { Text } from "@webiny/admin-ui";
+
+const TextAsExample = () => {
+    return (
+        <>
+            {/* Render as a div element */}
+            <Text as="div" size="md">This text is rendered as a div</Text>
+
+            {/* Default is span */}
+            <Text size="md">This text is rendered as a span</Text>
+        </>
+    );
+};
+
+export default TextAsExample;
+```

package/Text/Text.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "./Text";
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof Text>;
+export declare const TextXl: Story;
+export declare const TextLg: Story;
+export declare const TextMd: Story;
+export declare const TextSm: Story;
+export declare const Documentation: Story;

package/Text/Text.stories.js

@@ -0,0 +1,55 @@
+import { Text } from "./Text";
+const meta = {
+  title: "Components/Text",
+  component: Text,
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "xl"]
+    }
+  }
+};
+export default meta;
+export const TextXl = {
+  args: {
+    size: "xl",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const TextLg = {
+  args: {
+    size: "lg",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const TextMd = {
+  args: {
+    size: "md",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const TextSm = {
+  args: {
+    size: "sm",
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const Documentation = {
+  args: {
+    size: "md",
+    children: "Text component example"
+  },
+  argTypes: {
+    size: {
+      description: "The size of the text",
+      control: "select",
+      options: ["sm", "md", "lg", "xl"]
+    },
+    children: {
+      description: "The content of the text",
+      control: "text"
+    }
+  }
+};
+
+//# sourceMappingURL=Text.stories.js.map

package/Text/Text.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","meta","title","component","argTypes","size","control","options","TextXl","args","children","TextLg","TextMd","TextSm","Documentation","description"],"sources":["Text.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Text } from \"./Text\";\n\nconst meta: Meta<typeof Text> = {\n    title: \"Components/Text\",\n    component: Text,\n    argTypes: {\n        size: { control: \"select\", options: [\"sm\", \"md\", \"lg\", \"xl\"] }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Text>;\n\nexport const TextXl: Story = {\n    args: {\n        size: \"xl\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const TextLg: Story = {\n    args: {\n        size: \"lg\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const TextMd: Story = {\n    args: {\n        size: \"md\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const TextSm: Story = {\n    args: {\n        size: \"sm\",\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        size: \"md\",\n        children: \"Text component example\"\n    },\n    argTypes: {\n        size: {\n            description: \"The size of the text\",\n            control: \"select\",\n            options: [\"sm\", \"md\", \"lg\", \"xl\"]\n        },\n        children: {\n            description: \"The content of the text\",\n            control: \"text\"\n        }\n    }\n};\n"],"mappings":"AAEA,SAASA,IAAI;AAEb,MAAMC,IAAuB,GAAG;EAC5BC,KAAK,EAAE,iBAAiB;EACxBC,SAAS,EAAEH,IAAI;EACfI,QAAQ,EAAE;IACNC,IAAI,EAAE;MAAEC,OAAO,EAAE,QAAQ;MAAEC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IAAE;EACjE;AACJ,CAAC;AAED,eAAeN,IAAI;AAGnB,OAAO,MAAMO,MAAa,GAAG;EACzBC,IAAI,EAAE;IACFJ,IAAI,EAAE,IAAI;IACVK,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMC,MAAa,GAAG;EACzBF,IAAI,EAAE;IACFJ,IAAI,EAAE,IAAI;IACVK,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAME,MAAa,GAAG;EACzBH,IAAI,EAAE;IACFJ,IAAI,EAAE,IAAI;IACVK,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMG,MAAa,GAAG;EACzBJ,IAAI,EAAE;IACFJ,IAAI,EAAE,IAAI;IACVK,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMI,aAAoB,GAAG;EAChCL,IAAI,EAAE;IACFJ,IAAI,EAAE,IAAI;IACVK,QAAQ,EAAE;EACd,CAAC;EACDN,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFU,WAAW,EAAE,sBAAsB;MACnCT,OAAO,EAAE,QAAQ;MACjBC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACpC,CAAC;IACDG,QAAQ,EAAE;MACNK,WAAW,EAAE,yBAAyB;MACtCT,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}

package/Text/index.d.ts

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

package/Text/index.js

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

package/Text/index.js.map

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

package/Textarea/Textarea.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { TextareaPrimitiveProps } from "./TextareaPrimitive";
+import type { FormComponentProps } from "../FormComponent";
+type TextareaGroupProps = TextareaPrimitiveProps & FormComponentProps;
+declare const Textarea: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TextareaGroupProps) => React.JSX.Element) & {
+    original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TextareaGroupProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TextareaGroupProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TextareaGroupProps) => 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 }: TextareaGroupProps) => React.JSX.Element) & {
+        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, ...props }: TextareaGroupProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Textarea };

package/Textarea/Textarea.js

@@ -0,0 +1,59 @@
+import React, { useCallback, useMemo } from "react";
+import { generateId, makeDecoratable } from "../utils";
+import { TextareaPrimitive } from "./TextareaPrimitive";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
+const DecoratableTextarea = ({
+  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(TextareaPrimitive, 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 Textarea = makeDecoratable("Textarea", DecoratableTextarea);
+export { Textarea };
+
+//# sourceMappingURL=Textarea.js.map

package/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","generateId","makeDecoratable","TextareaPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableTextarea","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","props","isValid","validationIsValid","message","validationMessage","id","invalid","e","persist","createElement","className","htmlFor","text","Object","assign","Textarea"],"sources":["Textarea.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { generateId, makeDecoratable } from \"~/utils\";\nimport type { TextareaPrimitiveProps } from \"./TextareaPrimitive\";\nimport { TextareaPrimitive } from \"./TextareaPrimitive\";\nimport type { FormComponentProps } from \"~/FormComponent\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent\";\n\ntype TextareaGroupProps = TextareaPrimitiveProps & FormComponentProps;\n\nconst DecoratableTextarea = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    ...props\n}: TextareaGroupProps) => {\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<HTMLTextAreaElement>) => {\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            <TextareaPrimitive\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};\nconst Textarea = makeDecoratable(\"Textarea\", DecoratableTextarea);\n\nexport { Textarea };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,UAAU,EAAEC,eAAe;AAEpC,SAASC,iBAAiB;AAE1B,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,mBAAmB,GAAGA,CAAC;EACzBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtB,GAAGC;AACa,CAAC,KAAK;EACtB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGR,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMS,EAAE,GAAGvB,OAAO,CAAC,MAAMC,UAAU,CAACiB,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,CAAwC,IAAK;IAChD,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,iBAAiB,EAAA4B,MAAA,CAAAC,MAAA,KACVd,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;AACD,MAAMoB,QAAQ,GAAG/B,eAAe,CAAC,UAAU,EAAEM,mBAAmB,CAAC;AAEjE,SAASyB,QAAQ","ignoreList":[]}