@webiny/admin-ui 0.0.0-unstable.e53eceafb5

package/Tag/Tag.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ReactComponent","AddIcon","Tag","meta","title","component","parameters","layout","Default","args","content","WithOnClickCallback","onClick","evt","console","log","WithOnDismissCallback","onDismiss","WithCustomDismissIconElement","dismissIconElement","createElement","dismissIconLabel","NeutralBase","variant","NeutralBaseDisabled","disabled","NeutralBaseOutline","NeutralBaseOutlineDisabled","NeutralLight","NeutralLightDisabled","NeutralMuted","NeutralMutedDisabled","NeutralStrong","NeutralStrongDisabled","NeutralXStrong","NeutralXStrongDisabled","NeutralDark","NeutralDarkDisabled","Accent","AccentDisabled","AccentLight","AccentLightDisabled","Success","SuccessDisabled","SuccessLight","SuccessLightDisabled","Warning","WarningDisabled","Destructive","DestructiveDisabled","FullExample","render","className","Object","assign","Documentation","undefined","argTypes","description","control","options"],"sources":["Tag.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as AddIcon } from \"@webiny/icons/add.svg\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { Tag } from \"./Tag\";\n\nconst meta: Meta<typeof Tag> = {\n    title: \"Components/Tag\",\n    component: Tag,\n    parameters: {\n        layout: \"padded\"\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Tag>;\n\nexport const Default: Story = {\n    args: {\n        content: \"Label\"\n    }\n};\n\nexport const WithOnClickCallback: Story = {\n    args: {\n        ...Default.args,\n        onClick: evt => {\n            console.log(\"onClick\", evt);\n        }\n    }\n};\n\nexport const WithOnDismissCallback: Story = {\n    args: {\n        ...Default.args,\n        onDismiss: evt => {\n            console.log(\"onDismiss\", evt);\n        }\n    }\n};\n\nexport const WithCustomDismissIconElement: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        dismissIconElement: <AddIcon />,\n        dismissIconLabel: \"Custom dismiss label\"\n    }\n};\n\nexport const NeutralBase: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base\"\n    }\n};\n\nexport const NeutralBaseDisabled: Story = {\n    args: {\n        ...NeutralBase.args,\n        disabled: true\n    }\n};\n\nexport const NeutralBaseOutline: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-base-outline\"\n    }\n};\n\nexport const NeutralBaseOutlineDisabled: Story = {\n    args: {\n        ...NeutralBaseOutline.args,\n        disabled: true\n    }\n};\n\nexport const NeutralLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-light\"\n    }\n};\n\nexport const NeutralLightDisabled: Story = {\n    args: {\n        ...NeutralLight.args,\n        disabled: true\n    }\n};\n\nexport const NeutralMuted: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-muted\"\n    }\n};\n\nexport const NeutralMutedDisabled: Story = {\n    args: {\n        ...NeutralMuted.args,\n        disabled: true\n    }\n};\n\nexport const NeutralStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-strong\"\n    }\n};\n\nexport const NeutralStrongDisabled: Story = {\n    args: {\n        ...NeutralStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralXStrong: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-xstrong\"\n    }\n};\n\nexport const NeutralXStrongDisabled: Story = {\n    args: {\n        ...NeutralXStrong.args,\n        disabled: true\n    }\n};\n\nexport const NeutralDark: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"neutral-dark\"\n    }\n};\n\nexport const NeutralDarkDisabled: Story = {\n    args: {\n        ...NeutralDark.args,\n        disabled: true\n    }\n};\n\nexport const Accent: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent\"\n    }\n};\n\nexport const AccentDisabled: Story = {\n    args: {\n        ...Accent.args,\n        disabled: true\n    }\n};\n\nexport const AccentLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"accent-light\"\n    }\n};\n\nexport const AccentLightDisabled: Story = {\n    args: {\n        ...AccentLight.args,\n        disabled: true\n    }\n};\n\nexport const Success: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success\"\n    }\n};\n\nexport const SuccessDisabled: Story = {\n    args: {\n        ...Success.args,\n        disabled: true\n    }\n};\n\nexport const SuccessLight: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"success-light\"\n    }\n};\n\nexport const SuccessLightDisabled: Story = {\n    args: {\n        ...SuccessLight.args,\n        disabled: true\n    }\n};\n\nexport const Warning: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"warning\"\n    }\n};\n\nexport const WarningDisabled: Story = {\n    args: {\n        ...Warning.args,\n        disabled: true\n    }\n};\n\nexport const Destructive: Story = {\n    args: {\n        ...WithOnDismissCallback.args,\n        variant: \"destructive\"\n    }\n};\n\nexport const DestructiveDisabled: Story = {\n    args: {\n        ...Destructive.args,\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: WithOnDismissCallback.args,\n    render: args => {\n        return (\n            <div className={\"wby-flex wby-gap-sm\"}>\n                <Tag {...args} content={\"Neutral base\"} variant={\"neutral-base\"} />\n                <Tag {...args} content={\"Neutral base outline\"} variant={\"neutral-base-outline\"} />\n                <Tag {...args} content={\"Neutral light\"} variant={\"neutral-light\"} />\n                <Tag {...args} content={\"Neutral muted\"} variant={\"neutral-muted\"} />\n                <Tag {...args} content={\"Neutral strong\"} variant={\"neutral-strong\"} />\n                <Tag {...args} content={\"Neutral xstrong\"} variant={\"neutral-xstrong\"} />\n                <Tag {...args} content={\"Neutral dark\"} variant={\"neutral-dark\"} />\n                <Tag {...args} content={\"Success\"} variant={\"success\"} />\n                <Tag {...args} content={\"Success light\"} variant={\"success-light\"} />\n                <Tag {...args} content={\"Warning\"} variant={\"warning\"} />\n                <Tag {...args} content={\"Destructive\"} variant={\"destructive\"} />\n                <Tag {...args} content={\"Accent\"} variant={\"accent\"} />\n                <Tag {...args} content={\"Accent light\"} variant={\"accent-light\"} />\n            </div>\n        );\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        content: \"Label\",\n        variant: \"neutral-base\",\n        disabled: false,\n        onDismiss: undefined,\n        dismissIconElement: undefined,\n        dismissIconLabel: undefined\n    },\n    argTypes: {\n        content: {\n            description: \"The content of the tag. Please refer to the example code for details.\",\n            control: \"text\"\n        },\n        variant: {\n            description: \"The color variant of the tag.\",\n            control: \"select\",\n            options: [\n                \"neutral-base\",\n                \"neutral-base-outline\",\n                \"neutral-light\",\n                \"neutral-muted\",\n                \"neutral-strong\",\n                \"neutral-xstrong\",\n                \"neutral-dark\",\n                \"success\",\n                \"success-light\",\n                \"warning\",\n                \"destructive\",\n                \"accent\",\n                \"accent-light\"\n            ]\n        },\n        disabled: {\n            description: \"Whether the tag is disabled.\",\n            control: \"boolean\"\n        },\n        onDismiss: {\n            description:\n                \"Callback function when the tag is dismissed. Please refer to the 'Dismissible Tag' example code for details.\",\n            control: \"none\"\n        },\n        dismissIconElement: {\n            description:\n                \"Custom dismiss icon element. Please refer to the 'Custom Dismiss Icon' example code for details.\",\n            control: \"none\"\n        },\n        dismissIconLabel: {\n            description:\n                \"Custom dismiss icon label. Please refer to the 'Custom Dismiss Icon' example code for details.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/Tag/index.d.ts

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

package/Tag/index.js

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

package/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Tag\";\n"],"mappings":"AAAA","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":[]}

package/Textarea/Textarea.mdx

@@ -0,0 +1,143 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as TextareaStories from './Textarea.stories';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+The Textarea component is a multi-line text input field that enables users to enter longer text content. It's ideal for collecting detailed information, feedback, comments, or any content that requires multiple lines of text.
+
+## Usage
+
+<Canvas of={TextareaStories.Documentation} source={ { code: `
+import React, { useState } from "react";
+
+import { Textarea } from "@webiny/admin-ui";
+
+const TextareaExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Textarea
+            label="Message"
+            description="Enter your feedback or message"
+            note="Please be specific and provide relevant details"
+            placeholder="Type your message here..."
+            required={true}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+        />
+    );
+};
+
+export default TextareaExample;
+
+`} }
+    additionalActions={[
+        {
+            title: 'Open in GitHub',
+            onClick: () => {
+                window.open(
+                    'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Textarea/Textarea.tsx',
+                    '_blank'
+                );
+            },
+        }
+    ]}
+/>
+
+<Controls of={TextareaStories.Documentation}/>
+
+```jsx
+import React, { useState } from "react";
+
+import { Textarea } from "@webiny/admin-ui";
+
+const TextareaExample = () => {
+    const [value, setValue] = useState("");
+
+    return (
+        <Textarea
+            label="Message"
+            description="Enter your feedback or message"
+            note="Please be specific and provide relevant details"
+            placeholder="Type your message here..."
+            required={true}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+        />
+    );
+};
+
+export default TextareaExample;
+```
+
+## Examples
+
+### With Validate Function
+The Textarea component supports validation using the validation prop, as shown in the example above.
+For more complex or reusable validation scenarios, you can use the validate prop, which accepts a custom validation function.
+Try entering less than 10 characters to see it in action, and click on **Show code** to view the validation function.
+
+<Canvas of={TextareaStories.WithValidateFunction} source={ { code: `
+import React, { useState } from "react";
+
+import { Textarea } from "@webiny/admin-ui";
+
+const MessageTextarea = () => {
+    const [value, setValue] = useState("");
+    const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+    const validate = async () => {
+        if (!value.trim()) {
+            setValidation({ isValid: false, message: "This field is required" });
+        } else if (value.length < 10) {
+            setValidation({ isValid: false, message: "Message must be at least 10 characters long" });
+        } else {
+            setValidation({ isValid: true, message: "" });
+        }
+    };
+
+    return (
+        <Textarea
+            label="Message"
+            description="Enter a message (minimum 10 characters)"
+            required={true}
+            value={value}
+            onChange={newValue => setValue(newValue)}
+            validate={validate}
+            validation={validation}
+        />
+    );
+};` } }
+/>
+
+
+## Anatomy
+
+### Textarea
+<img src="/images/storybook/textarea/anatomy.png" alt="Textarea Anatomy"/>
+
+### Styles
+<img src="/images/storybook/textarea/styles.png" alt="Styles"/>
+
+### Field Size
+<img src="/images/storybook/textarea/field-size.png" alt="Field Size"/>
+
+### States and Styles
+<img src="/images/storybook/textarea/states-and-styles.png" alt="States and Styles"/>
+
+### Label Anatomy
+<img src="/images/storybook/textarea/label-anatomy.png" alt="Label Anatomy"/>
+
+### Label Properties
+<img src="/images/storybook/textarea/label-properties.png" alt="Label Properties"/>
+
+### Label Options
+<img src="/images/storybook/textarea/label-options.png" alt="Label Options"/>
+
+## Usage
+
+### Used in forms
+<img src="/images/storybook/textarea/used-in-forms.png" alt="Used in forms"/>

package/Textarea/Textarea.stories.d.ts

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