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

package/FilePicker/FilePicker.js

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from "react";
 import { makeDecoratable, withStaticProps } from "../utils";
-import { FilePickerPrimitive } from "./primitives";
+import { FilePickerDescription, FilePickerLabel, FilePickerPrimitive } from "./primitives";
 import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent";
-import { ImagePreview, RichItemPreview, TextOnlyPreview, FormPickerLabel } from "./primitives/components";
+import { ImagePreview, RichItemPreview, TextOnlyPreview } from "./primitives/components";
 const BaseFilePicker = ({
   label,
   description,
@@ -31,21 +31,17 @@ const BaseFilePicker = ({
   }, [validate, originalOnBlur]);
   return /*#__PURE__*/React.createElement("div", {
     className: "wby-w-full"
-  }, type !== "area" && /*#__PURE__*/React.createElement(FormPickerLabel, {
+  }, type !== "area" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilePickerLabel, {
     label: label,
     required: required,
     disabled: disabled,
-    description: description,
     invalid: invalid
-  }), /*#__PURE__*/React.createElement(FilePickerPrimitive, Object.assign({}, props, {
-    label: /*#__PURE__*/React.createElement(FormPickerLabel, {
-      label: label,
-      required: required,
-      disabled: disabled,
-      description: description,
-      className: "wby-m-0",
-      invalid: invalid
-    }),
+  }), /*#__PURE__*/React.createElement(FilePickerDescription, {
+    description: description,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(FilePickerPrimitive, Object.assign({}, props, {
+    label: label,
+    description: description,
     disabled: disabled,
     invalid: invalid,
     onBlur: onBlur,

package/FilePicker/FilePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","withStaticProps","FilePickerPrimitive","FormComponentErrorMessage","FormComponentNote","ImagePreview","RichItemPreview","TextOnlyPreview","FormPickerLabel","BaseFilePicker","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","type","props","isValid","validationIsValid","message","validationMessage","invalid","e","persist","createElement","className","Object","assign","text","DecoratableFilePicker","FilePicker","Preview","Image","RichItem","TextOnly"],"sources":["FilePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { FilePickerPrimitive, type FilePickerPrimitiveProps } from \"./primitives\";\nimport {\n    FormComponentErrorMessage,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent\";\nimport {\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview,\n    FormPickerLabel\n} from \"~/FilePicker/primitives/components\";\n\ntype FilePickerProps = FilePickerPrimitiveProps & FormComponentProps;\n\nconst BaseFilePicker = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    type = \"area\",\n    ...props\n}: FilePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\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            {type !== \"area\" && (\n                <FormPickerLabel\n                    label={label}\n                    required={required}\n                    disabled={disabled}\n                    description={description}\n                    invalid={invalid}\n                />\n            )}\n            <FilePickerPrimitive\n                {...props}\n                label={\n                    <FormPickerLabel\n                        label={label}\n                        required={required}\n                        disabled={disabled}\n                        description={description}\n                        className={\"wby-m-0\"}\n                        invalid={invalid}\n                    />\n                }\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n                type={type}\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 DecoratableFilePicker = makeDecoratable(\"FilePicker\", BaseFilePicker);\n\nconst FilePicker = withStaticProps(DecoratableFilePicker, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\nexport { FilePicker, type FilePickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,mBAAmB;AAC5B,SACIC,yBAAyB,EACzBC,iBAAiB;AAGrB,SACIC,YAAY,EACZC,eAAe,EACfC,eAAe,EACfC,eAAe;AAKnB,MAAMC,cAAc,GAAGA,CAAC;EACpBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtBC,IAAI,GAAG,MAAM;EACb,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGT,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMU,OAAO,GAAG1B,OAAO,CAAC,MAAMuB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAML,MAAM,GAAGnB,WAAW,CACtB,MAAO4B,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,oBACIrB,KAAA,CAAA+B,aAAA;IAAKC,SAAS,EAAE;EAAa,GACxBV,IAAI,KAAK,MAAM,iBACZtB,KAAA,CAAA+B,aAAA,CAACpB,eAAe;IACZE,KAAK,EAAEA,KAAM;IACbG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBH,WAAW,EAAEA,WAAY;IACzBc,OAAO,EAAEA;EAAQ,CACpB,CACJ,eACD5B,KAAA,CAAA+B,aAAA,CAAC1B,mBAAmB,EAAA4B,MAAA,CAAAC,MAAA,KACZX,KAAK;IACTV,KAAK,eACDb,KAAA,CAAA+B,aAAA,CAACpB,eAAe;MACZE,KAAK,EAAEA,KAAM;MACbG,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA,QAAS;MACnBH,WAAW,EAAEA,WAAY;MACzBkB,SAAS,EAAE,SAAU;MACrBJ,OAAO,EAAEA;IAAQ,CACpB,CACJ;IACDX,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA,MAAO;IACfE,IAAI,EAAEA;EAAK,EACd,CAAC,eACFtB,KAAA,CAAA+B,aAAA,CAACzB,yBAAyB;IACtB6B,IAAI,EAAER,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFjB,KAAA,CAAA+B,aAAA,CAACxB,iBAAiB;IAAC4B,IAAI,EAAEpB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,qBAAqB,GAAGjC,eAAe,CAAC,YAAY,EAAES,cAAc,CAAC;AAE3E,MAAMyB,UAAU,GAAGjC,eAAe,CAACgC,qBAAqB,EAAE;EACtDE,OAAO,EAAE;IACLC,KAAK,EAAE/B,YAAY;IACnBgC,QAAQ,EAAE/B,eAAe;IACzBgC,QAAQ,EAAE/B;EACd;AACJ,CAAC,CAAC;AACF,SAAS2B,UAAU","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","withStaticProps","FilePickerDescription","FilePickerLabel","FilePickerPrimitive","FormComponentErrorMessage","FormComponentNote","ImagePreview","RichItemPreview","TextOnlyPreview","BaseFilePicker","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","type","props","isValid","validationIsValid","message","validationMessage","invalid","e","persist","createElement","className","Fragment","Object","assign","text","DecoratableFilePicker","FilePicker","Preview","Image","RichItem","TextOnly"],"sources":["FilePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport {\n    FilePickerDescription,\n    FilePickerLabel,\n    FilePickerPrimitive,\n    type FilePickerPrimitiveProps\n} from \"./primitives\";\nimport {\n    FormComponentErrorMessage,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent\";\nimport { ImagePreview, RichItemPreview, TextOnlyPreview } from \"~/FilePicker/primitives/components\";\n\ntype FilePickerProps = FilePickerPrimitiveProps & FormComponentProps;\n\nconst BaseFilePicker = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    type = \"area\",\n    ...props\n}: FilePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\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            {type !== \"area\" && (\n                <>\n                    <FilePickerLabel\n                        label={label}\n                        required={required}\n                        disabled={disabled}\n                        invalid={invalid}\n                    />\n                    <FilePickerDescription description={description} disabled={disabled} />\n                </>\n            )}\n            <FilePickerPrimitive\n                {...props}\n                label={label}\n                description={description}\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n                type={type}\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 DecoratableFilePicker = makeDecoratable(\"FilePicker\", BaseFilePicker);\n\nconst FilePicker = withStaticProps(DecoratableFilePicker, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\nexport { FilePicker, type FilePickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,eAAe;AACzC,SACIC,qBAAqB,EACrBC,eAAe,EACfC,mBAAmB;AAGvB,SACIC,yBAAyB,EACzBC,iBAAiB;AAGrB,SAASC,YAAY,EAAEC,eAAe,EAAEC,eAAe;AAIvD,MAAMC,cAAc,GAAGA,CAAC;EACpBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtBC,IAAI,GAAG,MAAM;EACb,GAAGC;AACU,CAAC,KAAK;EACnB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGT,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMU,OAAO,GAAG3B,OAAO,CAAC,MAAMwB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAML,MAAM,GAAGpB,WAAW,CACtB,MAAO6B,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,oBACItB,KAAA,CAAAgC,aAAA;IAAKC,SAAS,EAAE;EAAa,GACxBV,IAAI,KAAK,MAAM,iBACZvB,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAAkC,QAAA,qBACIlC,KAAA,CAAAgC,aAAA,CAAC1B,eAAe;IACZQ,KAAK,EAAEA,KAAM;IACbG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACF7B,KAAA,CAAAgC,aAAA,CAAC3B,qBAAqB;IAACU,WAAW,EAAEA,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACxE,CACL,eACDlB,KAAA,CAAAgC,aAAA,CAACzB,mBAAmB,EAAA4B,MAAA,CAAAC,MAAA,KACZZ,KAAK;IACTV,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA,WAAY;IACzBG,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA,MAAO;IACfE,IAAI,EAAEA;EAAK,EACd,CAAC,eACFvB,KAAA,CAAAgC,aAAA,CAACxB,yBAAyB;IACtB6B,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFlB,KAAA,CAAAgC,aAAA,CAACvB,iBAAiB;IAAC4B,IAAI,EAAErB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMoB,qBAAqB,GAAGnC,eAAe,CAAC,YAAY,EAAEU,cAAc,CAAC;AAE3E,MAAM0B,UAAU,GAAGnC,eAAe,CAACkC,qBAAqB,EAAE;EACtDE,OAAO,EAAE;IACLC,KAAK,EAAE/B,YAAY;IACnBgC,QAAQ,EAAE/B,eAAe;IACzBgC,QAAQ,EAAE/B;EACd;AACJ,CAAC,CAAC;AACF,SAAS2B,UAAU","ignoreList":[]}

package/FilePicker/domains/FileItemFormatter.d.ts

@@ -1,4 +1,4 @@
-import { FileItem } from "./FileItem";
+import type { FileItem } from "./FileItem";
 import type { FileItemFormatted } from "./FileItemFormatted";
 export declare class FileItemFormatter {
     static format(item: FileItem): FileItemFormatted;

package/FilePicker/domains/FileItemFormatter.js.map

@@ -1 +1 @@
-{"version":3,"names":["FileItemFormatter","format","item","id","name","url","mimeType","size"],"sources":["FileItemFormatter.ts"],"sourcesContent":["import { FileItem } from \"./FileItem\";\nimport type { FileItemFormatted } from \"./FileItemFormatted\";\n\nexport class FileItemFormatter {\n    static format(item: FileItem): FileItemFormatted {\n        return {\n            id: item.id,\n            name: item.name,\n            url: item.url,\n            mimeType: item.mimeType,\n            size: item.size\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,iBAAiB,CAAC;EAC3B,OAAOC,MAAMA,CAACC,IAAc,EAAqB;IAC7C,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,IAAI,EAAEF,IAAI,CAACE,IAAI;MACfC,GAAG,EAAEH,IAAI,CAACG,GAAG;MACbC,QAAQ,EAAEJ,IAAI,CAACI,QAAQ;MACvBC,IAAI,EAAEL,IAAI,CAACK;IACf,CAAC;EACL;AACJ","ignoreList":[]}
+{"version":3,"names":["FileItemFormatter","format","item","id","name","url","mimeType","size"],"sources":["FileItemFormatter.ts"],"sourcesContent":["import type { FileItem } from \"./FileItem\";\nimport type { FileItemFormatted } from \"./FileItemFormatted\";\n\nexport class FileItemFormatter {\n    static format(item: FileItem): FileItemFormatted {\n        return {\n            id: item.id,\n            name: item.name,\n            url: item.url,\n            mimeType: item.mimeType,\n            size: item.size\n        };\n    }\n}\n"],"mappings":"AAGA,OAAO,MAAMA,iBAAiB,CAAC;EAC3B,OAAOC,MAAMA,CAACC,IAAc,EAAqB;IAC7C,OAAO;MACHC,EAAE,EAAED,IAAI,CAACC,EAAE;MACXC,IAAI,EAAEF,IAAI,CAACE,IAAI;MACfC,GAAG,EAAEH,IAAI,CAACG,GAAG;MACbC,QAAQ,EAAEJ,IAAI,CAACI,QAAQ;MACvBC,IAAI,EAAEL,IAAI,CAACK;IACf,CAAC;EACL;AACJ","ignoreList":[]}

package/FilePicker/primitives/FilePickerPrimitive.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "../../utils";
-import { Label } from "../../Label";
-import { InputPrimitiveProps } from "../../Input";
+import type { Label } from "../../Label";
+import type { InputPrimitiveProps } from "../../Input";
 import { FileItem, type FileItemDto, type FileItemFormatted } from "../domains";
 import type { FilePreviewRendererProps, TriggerRendererProps } from "./components/types";
 declare const filePickerVariants: (props?: ({
@@ -26,6 +26,10 @@ interface FilePickerPrimitiveProps extends React.HTMLAttributes<HTMLDivElement>,
      * Label for the file picker.
      */
     label?: React.ReactElement<typeof Label> | React.ReactNode | string;
+    /**
+     * Description for the file picker.
+     */
+    description?: React.ReactNode | string;
     /**
      * Callback triggered when an item is edited.
      */
@@ -59,21 +63,21 @@ interface FilePickerPrimitiveProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     value?: FileItemDto | string | null;
 }
-declare const FilePickerPrimitive: (({ className, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element) & {
-    original: ({ className, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
+declare const FilePickerPrimitive: (({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element) & {
+    original: ({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ className, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
+    original: (({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element) & {
+        original: ({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ className, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element) & {
+        original: ({ className, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, value, variant }: FilePickerPrimitiveProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/FilePicker/primitives/FilePickerPrimitive.js

@@ -1,15 +1,15 @@
 import * as React from "react";
 import { cn, cva, makeDecoratable, withStaticProps } from "../../utils";
-import { FormPickerLabel, Trigger } from "./components";
+import { FilePickerLabel, FilePickerDescription, Trigger } from "./components";
 import { inputVariants } from "../../Input";
 import { ImagePreview, RichItemPreview, TextOnlyPreview, FilePreview } from "./components";
 import { FileItem } from "../domains";
 import { useFilePicker } from "./useFilePicker";
-const filePickerVariants = cva(["wby-w-full wby-border-sm wby-text-md wby-peer wby-rounded-md", "focus-visible:wby-outline-none", "data-[disabled=true]:wby-cursor-not-allowed", "wby-flex wby-flex-col wby-gap-y-sm-extra"], {
+const filePickerVariants = cva(["wby-w-full wby-border-sm wby-text-md wby-peer wby-rounded-md", "focus-visible:wby-outline-none", "data-[disabled=true]:wby-cursor-not-allowed", "wby-flex wby-flex-col wby-items-start wby-gap-y-sm-extra"], {
   variants: {
     type: {
       area: ["wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] wby-py-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]"],
-      compact: ["wby-py-[calc(theme(padding.sm)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm)-theme(borderWidth.sm))]"]
+      compact: ["wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm)-theme(borderWidth.sm))]"]
     },
     variant: {
       primary: "",
@@ -25,6 +25,7 @@ const filePickerVariants = cva(["wby-w-full wby-border-sm wby-text-md wby-peer w
 const BaseFilePickerPrimitive = ({
   className,
   containerStyle,
+  description,
   disabled,
   invalid,
   label,
@@ -53,10 +54,19 @@ const BaseFilePickerPrimitive = ({
       variant
     }), className),
     style: containerStyle
-  }, label && type === "area" && (typeof label === "string" ? /*#__PURE__*/React.createElement(FormPickerLabel, {
+  }, type === "area" && (label || description) && /*#__PURE__*/React.createElement("div", {
+    className: "wby-w-full"
+  }, label && /*#__PURE__*/React.createElement("div", {
+    className: "wby-mb-xs"
+  }, typeof label === "string" ? /*#__PURE__*/React.createElement(FilePickerLabel, {
     label: label,
+    className: "wby-m-0",
+    disabled: disabled
+  }) : label), description && /*#__PURE__*/React.createElement(FilePickerDescription, {
+    description: description,
+    disabled: disabled,
     className: "wby-m-0"
-  }) : label), vm.file ? /*#__PURE__*/React.createElement(FilePreview, {
+  })), vm.file ? /*#__PURE__*/React.createElement(FilePreview, {
     disabled: disabled,
     onEditItem: onEditItem ? () => onEditItem(vm.file) : undefined,
     onRemoveItem: onRemoveItem ? () => onRemoveItem(vm.file) : undefined,

package/FilePicker/primitives/FilePickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","FormPickerLabel","Trigger","inputVariants","ImagePreview","RichItemPreview","TextOnlyPreview","FilePreview","FileItem","useFilePicker","filePickerVariants","variants","type","area","compact","variant","primary","secondary","ghost","defaultVariants","BaseFilePickerPrimitive","className","containerStyle","disabled","invalid","label","onEditItem","onRemoveItem","onSelectItem","placeholder","renderFilePreview","renderTrigger","value","vm","createElement","style","file","undefined","onReplaceItem","text","DecoratableFilePickerPrimitive","FilePickerPrimitive","Preview","Image","RichItem","TextOnly"],"sources":["FilePickerPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable, withStaticProps } from \"~/utils\";\nimport { FormPickerLabel, Trigger } from \"./components\";\nimport { Label } from \"~/Label\";\nimport { InputPrimitiveProps, inputVariants } from \"~/Input\";\nimport { ImagePreview, RichItemPreview, TextOnlyPreview, FilePreview } from \"./components\";\nimport { FileItem, type FileItemDto, type FileItemFormatted } from \"../domains\";\nimport { useFilePicker } from \"./useFilePicker\";\nimport type { FilePreviewRendererProps, TriggerRendererProps } from \"./components/types\";\n\nconst filePickerVariants = cva(\n    [\n        \"wby-w-full wby-border-sm wby-text-md wby-peer wby-rounded-md\",\n        \"focus-visible:wby-outline-none\",\n        \"data-[disabled=true]:wby-cursor-not-allowed\",\n        \"wby-flex wby-flex-col wby-gap-y-sm-extra\"\n    ],\n    {\n        variants: {\n            type: {\n                area: [\n                    \"wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] wby-py-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]\"\n                ],\n                compact: [\n                    \"wby-py-[calc(theme(padding.sm)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm)-theme(borderWidth.sm))]\"\n                ]\n            },\n            variant: {\n                primary: \"\",\n                secondary: \"\",\n                ghost: [\"hover:wby-bg-transparent\"]\n            }\n        },\n        defaultVariants: {\n            type: \"area\",\n            variant: \"primary\"\n        }\n    }\n);\n\ninterface FilePickerPrimitiveProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof filePickerVariants> {\n    /**\n     * Custom styles for the container.\n     */\n    containerStyle?: React.CSSProperties;\n    /**\n     * Indicates if the file picker is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Label for the file picker.\n     */\n    label?: React.ReactElement<typeof Label> | React.ReactNode | string;\n    /**\n     * Callback triggered when an item is edited.\n     */\n    onEditItem?: (item: FileItemFormatted | null) => void;\n    /**\n     * Callback triggered when an item is removed.\n     */\n    onRemoveItem?: (item: FileItemFormatted | null) => void;\n    /**\n     * Callback triggered when an item is selected.\n     */\n    onSelectItem: () => void;\n    /**\n     * Placeholder text for the file picker.\n     */\n    placeholder?: string;\n    /**\n     * Custom renderer for the file preview.\n     */\n    renderFilePreview?: (props: FilePreviewRendererProps) => React.ReactElement<any>;\n    /**\n     * Custom renderer for the trigger.\n     */\n    renderTrigger?: (props: TriggerRendererProps) => React.ReactElement<any>;\n    /**\n     * Custom styles for the file picker.\n     */\n    style?: React.CSSProperties;\n    /**\n     * Value of the selected file.\n     */\n    value?: FileItemDto | string | null;\n}\n\nconst BaseFilePickerPrimitive = ({\n    className,\n    containerStyle,\n    disabled,\n    invalid,\n    label,\n    onEditItem,\n    onRemoveItem,\n    onSelectItem,\n    placeholder,\n    renderFilePreview,\n    renderTrigger,\n    type = \"area\",\n    value,\n    variant\n}: FilePickerPrimitiveProps) => {\n    const { vm } = useFilePicker({ value });\n\n    return (\n        <div\n            data-disabled={disabled}\n            className={cn(\n                inputVariants({ variant, invalid }),\n                filePickerVariants({ type, variant }),\n                className\n            )}\n            style={containerStyle}\n        >\n            {label &&\n                type === \"area\" &&\n                (typeof label === \"string\" ? (\n                    <FormPickerLabel label={label} className={\"wby-m-0\"} />\n                ) : (\n                    label\n                ))}\n            {vm.file ? (\n                <FilePreview\n                    disabled={disabled}\n                    onEditItem={onEditItem ? () => onEditItem(vm.file) : undefined}\n                    onRemoveItem={onRemoveItem ? () => onRemoveItem(vm.file) : undefined}\n                    onReplaceItem={onSelectItem}\n                    renderFilePreview={renderFilePreview}\n                    type={type}\n                    value={vm.file}\n                />\n            ) : (\n                <Trigger\n                    disabled={disabled}\n                    onSelectItem={onSelectItem}\n                    renderTrigger={renderTrigger}\n                    text={placeholder}\n                    type={type}\n                    variant={variant}\n                />\n            )}\n        </div>\n    );\n};\n\nconst DecoratableFilePickerPrimitive = makeDecoratable(\n    \"FilePickerPrimitive\",\n    BaseFilePickerPrimitive\n);\n\nconst FilePickerPrimitive = withStaticProps(DecoratableFilePickerPrimitive, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\n\nexport { FilePickerPrimitive, FileItem, type FilePickerPrimitiveProps, filePickerVariants };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","cn","cva","makeDecoratable","withStaticProps","FilePickerLabel","FilePickerDescription","Trigger","inputVariants","ImagePreview","RichItemPreview","TextOnlyPreview","FilePreview","FileItem","useFilePicker","filePickerVariants","variants","type","area","compact","variant","primary","secondary","ghost","defaultVariants","BaseFilePickerPrimitive","className","containerStyle","description","disabled","invalid","label","onEditItem","onRemoveItem","onSelectItem","placeholder","renderFilePreview","renderTrigger","value","vm","createElement","style","file","undefined","onReplaceItem","text","DecoratableFilePickerPrimitive","FilePickerPrimitive","Preview","Image","RichItem","TextOnly"],"sources":["FilePickerPrimitive.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn, cva, type VariantProps, makeDecoratable, withStaticProps } from \"~/utils\";\nimport { FilePickerLabel, FilePickerDescription, Trigger } from \"./components\";\nimport type { Label } from \"~/Label\";\nimport type { InputPrimitiveProps } from \"~/Input\";\nimport { inputVariants } from \"~/Input\";\nimport { ImagePreview, RichItemPreview, TextOnlyPreview, FilePreview } from \"./components\";\nimport { FileItem, type FileItemDto, type FileItemFormatted } from \"../domains\";\nimport { useFilePicker } from \"./useFilePicker\";\nimport type { FilePreviewRendererProps, TriggerRendererProps } from \"./components/types\";\n\nconst filePickerVariants = cva(\n    [\n        \"wby-w-full wby-border-sm wby-text-md wby-peer wby-rounded-md\",\n        \"focus-visible:wby-outline-none\",\n        \"data-[disabled=true]:wby-cursor-not-allowed\",\n        \"wby-flex wby-flex-col wby-items-start wby-gap-y-sm-extra\"\n    ],\n    {\n        variants: {\n            type: {\n                area: [\n                    \"wby-px-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))] wby-py-[calc(theme(padding.sm-extra)-theme(borderWidth.sm))]\"\n                ],\n                compact: [\n                    \"wby-py-[calc(theme(padding.xs-plus)-theme(borderWidth.sm))] wby-px-[calc(theme(padding.sm)-theme(borderWidth.sm))]\"\n                ]\n            },\n            variant: {\n                primary: \"\",\n                secondary: \"\",\n                ghost: [\"hover:wby-bg-transparent\"]\n            }\n        },\n        defaultVariants: {\n            type: \"area\",\n            variant: \"primary\"\n        }\n    }\n);\n\ninterface FilePickerPrimitiveProps\n    extends React.HTMLAttributes<HTMLDivElement>,\n        VariantProps<typeof filePickerVariants> {\n    /**\n     * Custom styles for the container.\n     */\n    containerStyle?: React.CSSProperties;\n    /**\n     * Indicates if the file picker is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the input field is invalid.\n     * Refer to `InputPrimitiveProps[\"invalid\"]` for possible values.\n     */\n    invalid?: InputPrimitiveProps[\"invalid\"];\n    /**\n     * Label for the file picker.\n     */\n    label?: React.ReactElement<typeof Label> | React.ReactNode | string;\n    /**\n     * Description for the file picker.\n     */\n    description?: React.ReactNode | string;\n    /**\n     * Callback triggered when an item is edited.\n     */\n    onEditItem?: (item: FileItemFormatted | null) => void;\n    /**\n     * Callback triggered when an item is removed.\n     */\n    onRemoveItem?: (item: FileItemFormatted | null) => void;\n    /**\n     * Callback triggered when an item is selected.\n     */\n    onSelectItem: () => void;\n    /**\n     * Placeholder text for the file picker.\n     */\n    placeholder?: string;\n    /**\n     * Custom renderer for the file preview.\n     */\n    renderFilePreview?: (props: FilePreviewRendererProps) => React.ReactElement<any>;\n    /**\n     * Custom renderer for the trigger.\n     */\n    renderTrigger?: (props: TriggerRendererProps) => React.ReactElement<any>;\n    /**\n     * Custom styles for the file picker.\n     */\n    style?: React.CSSProperties;\n    /**\n     * Value of the selected file.\n     */\n    value?: FileItemDto | string | null;\n}\n\nconst BaseFilePickerPrimitive = ({\n    className,\n    containerStyle,\n    description,\n    disabled,\n    invalid,\n    label,\n    onEditItem,\n    onRemoveItem,\n    onSelectItem,\n    placeholder,\n    renderFilePreview,\n    renderTrigger,\n    type = \"area\",\n    value,\n    variant\n}: FilePickerPrimitiveProps) => {\n    const { vm } = useFilePicker({ value });\n\n    return (\n        <div\n            data-disabled={disabled}\n            className={cn(\n                inputVariants({ variant, invalid }),\n                filePickerVariants({ type, variant }),\n                className\n            )}\n            style={containerStyle}\n        >\n            {type === \"area\" && (label || description) && (\n                <div className={\"wby-w-full\"}>\n                    {label && (\n                        <div className={\"wby-mb-xs\"}>\n                            {typeof label === \"string\" ? (\n                                <FilePickerLabel\n                                    label={label}\n                                    className={\"wby-m-0\"}\n                                    disabled={disabled}\n                                />\n                            ) : (\n                                label\n                            )}\n                        </div>\n                    )}\n                    {description && (\n                        <FilePickerDescription\n                            description={description}\n                            disabled={disabled}\n                            className={\"wby-m-0\"}\n                        />\n                    )}\n                </div>\n            )}\n            {vm.file ? (\n                <FilePreview\n                    disabled={disabled}\n                    onEditItem={onEditItem ? () => onEditItem(vm.file) : undefined}\n                    onRemoveItem={onRemoveItem ? () => onRemoveItem(vm.file) : undefined}\n                    onReplaceItem={onSelectItem}\n                    renderFilePreview={renderFilePreview}\n                    type={type}\n                    value={vm.file}\n                />\n            ) : (\n                <Trigger\n                    disabled={disabled}\n                    onSelectItem={onSelectItem}\n                    renderTrigger={renderTrigger}\n                    text={placeholder}\n                    type={type}\n                    variant={variant}\n                />\n            )}\n        </div>\n    );\n};\n\nconst DecoratableFilePickerPrimitive = makeDecoratable(\n    \"FilePickerPrimitive\",\n    BaseFilePickerPrimitive\n);\n\nconst FilePickerPrimitive = withStaticProps(DecoratableFilePickerPrimitive, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\n\nexport { FilePickerPrimitive, FileItem, type FilePickerPrimitiveProps, filePickerVariants };\n"],"mappings":"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","ignoreList":[]}

package/FilePicker/primitives/components/Description.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { type FormComponentProps } from "../../../FormComponent";
+type FilePickerDescriptionProps = Pick<FormComponentProps, "description" | "disabled"> & {
+    invalid?: boolean;
+    className?: string;
+};
+declare const FilePickerDescription: ({ description, disabled, className }: FilePickerDescriptionProps) => React.JSX.Element | null;
+export { FilePickerDescription, type FilePickerDescriptionProps };

package/FilePicker/primitives/components/Description.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { FormComponentDescription } from "../../../FormComponent";
+const FilePickerDescription = ({
+  description,
+  disabled,
+  className
+}) => {
+  if (!description) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormComponentDescription, {
+    text: description,
+    disabled: disabled,
+    className: className
+  });
+};
+export { FilePickerDescription };
+
+//# sourceMappingURL=Description.js.map

package/FilePicker/primitives/components/Description.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormComponentDescription","FilePickerDescription","description","disabled","className","createElement","text"],"sources":["Description.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormComponentDescription, type FormComponentProps } from \"~/FormComponent\";\n\ntype FilePickerDescriptionProps = Pick<FormComponentProps, \"description\" | \"disabled\"> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FilePickerDescription = ({\n    description,\n    disabled,\n    className\n}: FilePickerDescriptionProps) => {\n    if (!description) {\n        return null;\n    }\n\n    return (\n        <FormComponentDescription text={description} disabled={disabled} className={className} />\n    );\n};\n\nexport { FilePickerDescription, type FilePickerDescriptionProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,wBAAwB;AAOjC,MAAMC,qBAAqB,GAAGA,CAAC;EAC3BC,WAAW;EACXC,QAAQ;EACRC;AACwB,CAAC,KAAK;EAC9B,IAAI,CAACF,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,oBACIH,KAAA,CAAAM,aAAA,CAACL,wBAAwB;IAACM,IAAI,EAAEJ,WAAY;IAACC,QAAQ,EAAEA,QAAS;IAACC,SAAS,EAAEA;EAAU,CAAE,CAAC;AAEjG,CAAC;AAED,SAASH,qBAAqB","ignoreList":[]}

package/FilePicker/primitives/components/Label.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { type FormComponentProps } from "../../../FormComponent";
-type FormPickerLabelProps = Pick<FormComponentProps, "label" | "description" | "disabled" | "required"> & {
+type FilePickerLabelProps = Pick<FormComponentProps, "label" | "disabled" | "required"> & {
     invalid?: boolean;
     className?: string;
 };
-declare const FormPickerLabel: ({ label, description, required, disabled, invalid, className }: FormPickerLabelProps) => React.JSX.Element;
-export { FormPickerLabel, type FormPickerLabelProps };
+declare const FilePickerLabel: ({ label, required, disabled, invalid, className }: FilePickerLabelProps) => React.JSX.Element | null;
+export { FilePickerLabel, type FilePickerLabelProps };

package/FilePicker/primitives/components/Label.js

@@ -1,24 +1,23 @@
 import * as React from "react";
-import { FormComponentDescription, FormComponentLabel } from "../../../FormComponent";
-const FormPickerLabel = ({
+import { FormComponentLabel } from "../../../FormComponent";
+const FilePickerLabel = ({
   label,
-  description,
   required,
   disabled,
   invalid,
   className
 }) => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormComponentLabel, {
+  if (!label) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: label,
     required: required,
     disabled: disabled,
     className: className,
     invalid: invalid
-  }), /*#__PURE__*/React.createElement(FormComponentDescription, {
-    text: description,
-    disabled: disabled
-  }));
+  });
 };
-export { FormPickerLabel };
+export { FilePickerLabel };
 
 //# sourceMappingURL=Label.js.map

package/FilePicker/primitives/components/Label.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FormComponentDescription","FormComponentLabel","FormPickerLabel","label","description","required","disabled","invalid","className","createElement","Fragment","text"],"sources":["Label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n    FormComponentDescription,\n    FormComponentLabel,\n    type FormComponentProps\n} from \"~/FormComponent\";\n\ntype FormPickerLabelProps = Pick<\n    FormComponentProps,\n    \"label\" | \"description\" | \"disabled\" | \"required\"\n> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FormPickerLabel = ({\n    label,\n    description,\n    required,\n    disabled,\n    invalid,\n    className\n}: FormPickerLabelProps) => {\n    return (\n        <>\n            <FormComponentLabel\n                text={label}\n                required={required}\n                disabled={disabled}\n                className={className}\n                invalid={invalid}\n            />\n            <FormComponentDescription text={description} disabled={disabled} />\n        </>\n    );\n};\n\nexport { FormPickerLabel, type FormPickerLabelProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACIC,wBAAwB,EACxBC,kBAAkB;AAYtB,MAAMC,eAAe,GAAGA,CAAC;EACrBC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC;AACkB,CAAC,KAAK;EACxB,oBACIT,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAW,QAAA,qBACIX,KAAA,CAAAU,aAAA,CAACR,kBAAkB;IACfU,IAAI,EAAER,KAAM;IACZE,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBE,SAAS,EAAEA,SAAU;IACrBD,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFR,KAAA,CAAAU,aAAA,CAACT,wBAAwB;IAACW,IAAI,EAAEP,WAAY;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACpE,CAAC;AAEX,CAAC;AAED,SAASJ,eAAe","ignoreList":[]}
+{"version":3,"names":["React","FormComponentLabel","FilePickerLabel","label","required","disabled","invalid","className","createElement","text"],"sources":["Label.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { FormComponentLabel, type FormComponentProps } from \"~/FormComponent\";\n\ntype FilePickerLabelProps = Pick<FormComponentProps, \"label\" | \"disabled\" | \"required\"> & {\n    invalid?: boolean;\n    className?: string;\n};\n\nconst FilePickerLabel = ({\n    label,\n    required,\n    disabled,\n    invalid,\n    className\n}: FilePickerLabelProps) => {\n    if (!label) {\n        return null;\n    }\n\n    return (\n        <FormComponentLabel\n            text={label}\n            required={required}\n            disabled={disabled}\n            className={className}\n            invalid={invalid}\n        />\n    );\n};\n\nexport { FilePickerLabel, type FilePickerLabelProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB;AAO3B,MAAMC,eAAe,GAAGA,CAAC;EACrBC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC;AACkB,CAAC,KAAK;EACxB,IAAI,CAACJ,KAAK,EAAE;IACR,OAAO,IAAI;EACf;EAEA,oBACIH,KAAA,CAAAQ,aAAA,CAACP,kBAAkB;IACfQ,IAAI,EAAEN,KAAM;IACZC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBE,SAAS,EAAEA,SAAU;IACrBD,OAAO,EAAEA;EAAQ,CACpB,CAAC;AAEV,CAAC;AAED,SAASJ,eAAe","ignoreList":[]}

package/FilePicker/primitives/components/Trigger.js

@@ -1,17 +1,18 @@
 import * as React from "react";
 import { ReactComponent as ImageIcon } from "@webiny/icons/image.svg";
-import { Button } from "../../../Button";
 import { cn, cva } from "../../../utils";
-const triggerVariants = cva(["wby-flex", "data-[disabled=true]:wby-cursor-not-allowed"], {
+import { Icon } from "../../../Icon";
+import { Text } from "../../../Text";
+const triggerVariants = cva(["wby-w-full wby-flex wby-items-center wby-justify-center", "data-[disabled=true]:wby-cursor-not-allowed data-[disabled=true]:wby-bg-neutral-disabled", "focus-visible:wby-outline-none  focus-visible:wby-ring-primary-dimmed", "wby-text-neutral-strong data-[disabled=true]:wby-text-neutral-disabled", "wby-fill-neutral-strong data-[disabled=true]:wby-fill-neutral-disabled"], {
   variants: {
     type: {
-      area: ["wby-justify-center", "wby-px-xl wby-py-md-extra"],
-      compact: "wby-w-full [&>span]:!wby-flex-1 [&_button]:!wby-w-full"
+      area: "wby-px-xs wby-py-md-extra wby-rounded-md focus-visible:wby-ring-lg",
+      compact: "wby-px-sm wby-py-xs wby-rounded-sm focus-visible:wby-ring-md"
     },
     variant: {
-      primary: "",
-      secondary: "",
-      ghost: ""
+      primary: ["wby-bg-neutral-subtle", "hover:wby-bg-neutral-light"],
+      secondary: ["wby-bg-neutral-base", "hover:wby-bg-neutral-base"],
+      ghost: ["wby-bg-neutral-subtle", "hover:wby-bg-neutral-light"]
     }
   },
   compoundVariants: [
@@ -19,11 +20,11 @@ const triggerVariants = cva(["wby-flex", "data-[disabled=true]:wby-cursor-not-al
   {
     type: "area",
     variant: "primary",
-    className: ["wby-bg-neutral-subtle", "hover:wby-bg-neutral-light", "data-[disabled=true]:wby-bg-neutral-disabled"]
+    className: ["wby-bg-neutral-subtle", "hover:wby-bg-neutral-light"]
   }, {
     type: "area",
     variant: "secondary",
-    className: ["wby-bg-neutral-base", "hover:wby-bg-neutral-base", "data-[disabled=true]:wby-bg-neutral-disabled"]
+    className: ["wby-bg-neutral-base", "hover:wby-bg-neutral-base"]
   }, {
     type: "area",
     variant: "ghost",
@@ -52,21 +53,26 @@ const Trigger = ({
       ...props
     });
   }
-  return /*#__PURE__*/React.createElement("div", Object.assign({
+  const label = text ?? "Select from library";
+  return /*#__PURE__*/React.createElement("button", Object.assign({
     "data-role": "select-image",
     "data-disabled": disabled,
+    disabled: disabled,
+    onClick: onSelectItem,
     className: cn(triggerVariants({
       type,
       variant
     }), className)
-  }, props), /*#__PURE__*/React.createElement(Button, {
-    disabled: disabled,
+  }, props), /*#__PURE__*/React.createElement("span", {
+    className: "wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-gap-xs"
+  }, /*#__PURE__*/React.createElement(Icon, {
     icon: /*#__PURE__*/React.createElement(ImageIcon, null),
-    onClick: onSelectItem,
+    label: label,
+    color: "inherit"
+  }), /*#__PURE__*/React.createElement(Text, {
     size: "sm",
-    text: text ?? "Select from library",
-    variant: "ghost"
-  }));
+    className: "wby-leading-none"
+  }, label)));
 };
 export { Trigger, triggerVariants };
 

package/FilePicker/primitives/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","ImageIcon","Button","cn","cva","triggerVariants","variants","type","area","compact","variant","primary","secondary","ghost","compoundVariants","className","defaultVariants","Trigger","renderTrigger","text","disabled","onSelectItem","props","createElement","Object","assign","icon","onClick","size"],"sources":["Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\nimport { Button } from \"~/Button\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport type { TriggerDefaultProps } from \"~/FilePicker/primitives/components/types\";\n\nconst triggerVariants = cva([\"wby-flex\", \"data-[disabled=true]:wby-cursor-not-allowed\"], {\n    variants: {\n        type: {\n            area: [\"wby-justify-center\", \"wby-px-xl wby-py-md-extra\"],\n            compact: \"wby-w-full [&>span]:!wby-flex-1 [&_button]:!wby-w-full\"\n        },\n        variant: {\n            primary: \"\",\n            secondary: \"\",\n            ghost: \"\"\n        }\n    },\n    compoundVariants: [\n        // Combination of `type = area` and different `variant`\n        {\n            type: \"area\",\n            variant: \"primary\",\n            className: [\n                \"wby-bg-neutral-subtle\",\n                \"hover:wby-bg-neutral-light\",\n                \"data-[disabled=true]:wby-bg-neutral-disabled\"\n            ]\n        },\n        {\n            type: \"area\",\n            variant: \"secondary\",\n            className: [\n                \"wby-bg-neutral-base\",\n                \"hover:wby-bg-neutral-base\",\n                \"data-[disabled=true]:wby-bg-neutral-disabled\"\n            ]\n        },\n        {\n            type: \"area\",\n            variant: \"ghost\",\n            className: [\n                \"wby-bg-neutral-subtle\",\n                \"hover:wby-bg-neutral-light\",\n                \"data-[disabled=true]:wby-bg-neutral-base\"\n            ]\n        }\n    ],\n    defaultVariants: {\n        type: \"area\",\n        variant: \"primary\"\n    }\n});\n\ninterface TriggerProps extends TriggerDefaultProps, VariantProps<typeof triggerVariants> {\n    renderTrigger?: (props: any) => React.ReactElement<any>;\n}\n\nconst Trigger = ({\n    renderTrigger,\n    type,\n    variant,\n    text,\n    className,\n    disabled,\n    onSelectItem,\n    ...props\n}: TriggerProps) => {\n    if (typeof renderTrigger === \"function\") {\n        return renderTrigger({ disabled, text, onSelectItem, ...props });\n    }\n\n    return (\n        <div\n            data-role={\"select-image\"}\n            data-disabled={disabled}\n            className={cn(triggerVariants({ type, variant }), className)}\n            {...props}\n        >\n            <Button\n                disabled={disabled}\n                icon={<ImageIcon />}\n                onClick={onSelectItem}\n                size={\"sm\"}\n                text={text ?? \"Select from library\"}\n                variant={\"ghost\"}\n            />\n        </div>\n    );\n};\n\nexport { Trigger, type TriggerProps, triggerVariants };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASC,MAAM;AACf,SAASC,EAAE,EAAEC,GAAG;AAGhB,MAAMC,eAAe,GAAGD,GAAG,CAAC,CAAC,UAAU,EAAE,6CAA6C,CAAC,EAAE;EACrFE,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,CAAC,oBAAoB,EAAE,2BAA2B,CAAC;MACzDC,OAAO,EAAE;IACb,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,EAAE;MACXC,SAAS,EAAE,EAAE;MACbC,KAAK,EAAE;IACX;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIP,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,SAAS;IAClBK,SAAS,EAAE,CACP,uBAAuB,EACvB,4BAA4B,EAC5B,8CAA8C;EAEtD,CAAC,EACD;IACIR,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,WAAW;IACpBK,SAAS,EAAE,CACP,qBAAqB,EACrB,2BAA2B,EAC3B,8CAA8C;EAEtD,CAAC,EACD;IACIR,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,OAAO;IAChBK,SAAS,EAAE,CACP,uBAAuB,EACvB,4BAA4B,EAC5B,0CAA0C;EAElD,CAAC,CACJ;EACDC,eAAe,EAAE;IACbT,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAMF,MAAMO,OAAO,GAAGA,CAAC;EACbC,aAAa;EACbX,IAAI;EACJG,OAAO;EACPS,IAAI;EACJJ,SAAS;EACTK,QAAQ;EACRC,YAAY;EACZ,GAAGC;AACO,CAAC,KAAK;EAChB,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;IACrC,OAAOA,aAAa,CAAC;MAAEE,QAAQ;MAAED,IAAI;MAAEE,YAAY;MAAE,GAAGC;IAAM,CAAC,CAAC;EACpE;EAEA,oBACIvB,KAAA,CAAAwB,aAAA,QAAAC,MAAA,CAAAC,MAAA;IACI,aAAW,cAAe;IAC1B,iBAAeL,QAAS;IACxBL,SAAS,EAAEZ,EAAE,CAACE,eAAe,CAAC;MAAEE,IAAI;MAAEG;IAAQ,CAAC,CAAC,EAAEK,SAAS;EAAE,GACzDO,KAAK,gBAETvB,KAAA,CAAAwB,aAAA,CAACrB,MAAM;IACHkB,QAAQ,EAAEA,QAAS;IACnBM,IAAI,eAAE3B,KAAA,CAAAwB,aAAA,CAACtB,SAAS,MAAE,CAAE;IACpB0B,OAAO,EAAEN,YAAa;IACtBO,IAAI,EAAE,IAAK;IACXT,IAAI,EAAEA,IAAI,IAAI,qBAAsB;IACpCT,OAAO,EAAE;EAAQ,CACpB,CACA,CAAC;AAEd,CAAC;AAED,SAASO,OAAO,EAAqBZ,eAAe","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","ImageIcon","cn","cva","Icon","Text","triggerVariants","variants","type","area","compact","variant","primary","secondary","ghost","compoundVariants","className","defaultVariants","Trigger","renderTrigger","text","disabled","onSelectItem","props","label","createElement","Object","assign","onClick","icon","color","size"],"sources":["Trigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as ImageIcon } from \"@webiny/icons/image.svg\";\nimport { cn, cva, type VariantProps } from \"~/utils\";\nimport type { TriggerDefaultProps } from \"~/FilePicker/primitives/components/types\";\nimport { Icon } from \"~/Icon\";\nimport { Text } from \"~/Text\";\n\nconst triggerVariants = cva(\n    [\n        \"wby-w-full wby-flex wby-items-center wby-justify-center\",\n        \"data-[disabled=true]:wby-cursor-not-allowed data-[disabled=true]:wby-bg-neutral-disabled\",\n        \"focus-visible:wby-outline-none  focus-visible:wby-ring-primary-dimmed\",\n        \"wby-text-neutral-strong data-[disabled=true]:wby-text-neutral-disabled\",\n        \"wby-fill-neutral-strong data-[disabled=true]:wby-fill-neutral-disabled\"\n    ],\n    {\n        variants: {\n            type: {\n                area: \"wby-px-xs wby-py-md-extra wby-rounded-md focus-visible:wby-ring-lg\",\n                compact: \"wby-px-sm wby-py-xs wby-rounded-sm focus-visible:wby-ring-md\"\n            },\n            variant: {\n                primary: [\"wby-bg-neutral-subtle\", \"hover:wby-bg-neutral-light\"],\n                secondary: [\"wby-bg-neutral-base\", \"hover:wby-bg-neutral-base\"],\n                ghost: [\"wby-bg-neutral-subtle\", \"hover:wby-bg-neutral-light\"]\n            }\n        },\n        compoundVariants: [\n            // Combination of `type = area` and different `variant`\n            {\n                type: \"area\",\n                variant: \"primary\",\n                className: [\"wby-bg-neutral-subtle\", \"hover:wby-bg-neutral-light\"]\n            },\n            {\n                type: \"area\",\n                variant: \"secondary\",\n                className: [\"wby-bg-neutral-base\", \"hover:wby-bg-neutral-base\"]\n            },\n            {\n                type: \"area\",\n                variant: \"ghost\",\n                className: [\n                    \"wby-bg-neutral-subtle\",\n                    \"hover:wby-bg-neutral-light\",\n                    \"data-[disabled=true]:wby-bg-neutral-base\"\n                ]\n            }\n        ],\n        defaultVariants: {\n            type: \"area\",\n            variant: \"primary\"\n        }\n    }\n);\n\ninterface TriggerProps extends TriggerDefaultProps, VariantProps<typeof triggerVariants> {\n    renderTrigger?: (props: any) => React.ReactElement<any>;\n}\n\nconst Trigger = ({\n    renderTrigger,\n    type,\n    variant,\n    text,\n    className,\n    disabled,\n    onSelectItem,\n    ...props\n}: TriggerProps) => {\n    if (typeof renderTrigger === \"function\") {\n        return renderTrigger({ disabled, text, onSelectItem, ...props });\n    }\n\n    const label = text ?? \"Select from library\";\n\n    return (\n        <button\n            data-role={\"select-image\"}\n            data-disabled={disabled}\n            disabled={disabled}\n            onClick={onSelectItem}\n            className={cn(triggerVariants({ type, variant }), className)}\n            {...props}\n        >\n            <span\n                className={\n                    \"wby-inline-flex wby-items-center wby-justify-center wby-whitespace-nowrap wby-gap-xs\"\n                }\n            >\n                <Icon icon={<ImageIcon />} label={label} color={\"inherit\"} />\n                <Text size={\"sm\"} className={\"wby-leading-none\"}>\n                    {label}\n                </Text>\n            </span>\n        </button>\n    );\n};\n\nexport { Trigger, type TriggerProps, triggerVariants };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,SAAS,QAAQ,yBAAyB;AACrE,SAASC,EAAE,EAAEC,GAAG;AAEhB,SAASC,IAAI;AACb,SAASC,IAAI;AAEb,MAAMC,eAAe,GAAGH,GAAG,CACvB,CACI,yDAAyD,EACzD,0FAA0F,EAC1F,uEAAuE,EACvE,wEAAwE,EACxE,wEAAwE,CAC3E,EACD;EACII,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,IAAI,EAAE,oEAAoE;MAC1EC,OAAO,EAAE;IACb,CAAC;IACDC,OAAO,EAAE;MACLC,OAAO,EAAE,CAAC,uBAAuB,EAAE,4BAA4B,CAAC;MAChEC,SAAS,EAAE,CAAC,qBAAqB,EAAE,2BAA2B,CAAC;MAC/DC,KAAK,EAAE,CAAC,uBAAuB,EAAE,4BAA4B;IACjE;EACJ,CAAC;EACDC,gBAAgB,EAAE;EACd;EACA;IACIP,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,SAAS;IAClBK,SAAS,EAAE,CAAC,uBAAuB,EAAE,4BAA4B;EACrE,CAAC,EACD;IACIR,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,WAAW;IACpBK,SAAS,EAAE,CAAC,qBAAqB,EAAE,2BAA2B;EAClE,CAAC,EACD;IACIR,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE,OAAO;IAChBK,SAAS,EAAE,CACP,uBAAuB,EACvB,4BAA4B,EAC5B,0CAA0C;EAElD,CAAC,CACJ;EACDC,eAAe,EAAE;IACbT,IAAI,EAAE,MAAM;IACZG,OAAO,EAAE;EACb;AACJ,CACJ,CAAC;AAMD,MAAMO,OAAO,GAAGA,CAAC;EACbC,aAAa;EACbX,IAAI;EACJG,OAAO;EACPS,IAAI;EACJJ,SAAS;EACTK,QAAQ;EACRC,YAAY;EACZ,GAAGC;AACO,CAAC,KAAK;EAChB,IAAI,OAAOJ,aAAa,KAAK,UAAU,EAAE;IACrC,OAAOA,aAAa,CAAC;MAAEE,QAAQ;MAAED,IAAI;MAAEE,YAAY;MAAE,GAAGC;IAAM,CAAC,CAAC;EACpE;EAEA,MAAMC,KAAK,GAAGJ,IAAI,IAAI,qBAAqB;EAE3C,oBACIrB,KAAA,CAAA0B,aAAA,WAAAC,MAAA,CAAAC,MAAA;IACI,aAAW,cAAe;IAC1B,iBAAeN,QAAS;IACxBA,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEN,YAAa;IACtBN,SAAS,EAAEd,EAAE,CAACI,eAAe,CAAC;MAAEE,IAAI;MAAEG;IAAQ,CAAC,CAAC,EAAEK,SAAS;EAAE,GACzDO,KAAK,gBAETxB,KAAA,CAAA0B,aAAA;IACIT,SAAS,EACL;EACH,gBAEDjB,KAAA,CAAA0B,aAAA,CAACrB,IAAI;IAACyB,IAAI,eAAE9B,KAAA,CAAA0B,aAAA,CAACxB,SAAS,MAAE,CAAE;IAACuB,KAAK,EAAEA,KAAM;IAACM,KAAK,EAAE;EAAU,CAAE,CAAC,eAC7D/B,KAAA,CAAA0B,aAAA,CAACpB,IAAI;IAAC0B,IAAI,EAAE,IAAK;IAACf,SAAS,EAAE;EAAmB,GAC3CQ,KACC,CACJ,CACF,CAAC;AAEjB,CAAC;AAED,SAASN,OAAO,EAAqBZ,eAAe","ignoreList":[]}

package/FilePicker/primitives/components/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./previews";
+export * from "./Description";
 export * from "./Label";
 export * from "./Trigger";

package/FilePicker/primitives/components/index.js

@@ -1,4 +1,5 @@
 export * from "./previews";
+export * from "./Description";
 export * from "./Label";
 export * from "./Trigger";
 

package/FilePicker/primitives/components/index.js.map

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

package/FilePicker/primitives/components/previews/FilePreview.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "../../../../utils";
-import { filePickerVariants } from "../../..";
-import { FilePreviewDefaultProps } from "../types";
+import type { filePickerVariants } from "../../..";
+import type { FilePreviewDefaultProps } from "../types";
 type FilePreviewProps = FilePreviewDefaultProps & {
     type: VariantProps<typeof filePickerVariants>["type"];
     renderFilePreview?: (props: any) => React.ReactElement<any>;

package/FilePicker/primitives/components/previews/FilePreview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","RichItemPreview","TextOnlyPreview","FilePreview","type","renderFilePreview","props","createElement"],"sources":["FilePreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type VariantProps } from \"~/utils\";\nimport { filePickerVariants } from \"~/FilePicker\";\nimport { FilePreviewDefaultProps } from \"../types\";\nimport { RichItemPreview, TextOnlyPreview } from \"../previews\";\n\ntype FilePreviewProps = FilePreviewDefaultProps & {\n    type: VariantProps<typeof filePickerVariants>[\"type\"];\n    renderFilePreview?: (props: any) => React.ReactElement<any>;\n};\n\nconst FilePreview = ({ type, renderFilePreview, ...props }: FilePreviewProps) => {\n    if (typeof renderFilePreview === \"function\") {\n        return renderFilePreview(props);\n    }\n\n    if (type === \"compact\") {\n        return <TextOnlyPreview {...props} />;\n    }\n\n    return <RichItemPreview {...props} />;\n};\n\nexport { FilePreview, type FilePreviewProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAI9B,SAASC,eAAe,EAAEC,eAAe;AAOzC,MAAMC,WAAW,GAAGA,CAAC;EAAEC,IAAI;EAAEC,iBAAiB;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAC7E,IAAI,OAAOD,iBAAiB,KAAK,UAAU,EAAE;IACzC,OAAOA,iBAAiB,CAACC,KAAK,CAAC;EACnC;EAEA,IAAIF,IAAI,KAAK,SAAS,EAAE;IACpB,oBAAOJ,KAAA,CAAAO,aAAA,CAACL,eAAe,EAAKI,KAAQ,CAAC;EACzC;EAEA,oBAAON,KAAA,CAAAO,aAAA,CAACN,eAAe,EAAKK,KAAQ,CAAC;AACzC,CAAC;AAED,SAASH,WAAW","ignoreList":[]}
+{"version":3,"names":["React","RichItemPreview","TextOnlyPreview","FilePreview","type","renderFilePreview","props","createElement"],"sources":["FilePreview.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { type VariantProps } from \"~/utils\";\nimport type { filePickerVariants } from \"~/FilePicker\";\nimport type { FilePreviewDefaultProps } from \"../types\";\nimport { RichItemPreview, TextOnlyPreview } from \"../previews\";\n\ntype FilePreviewProps = FilePreviewDefaultProps & {\n    type: VariantProps<typeof filePickerVariants>[\"type\"];\n    renderFilePreview?: (props: any) => React.ReactElement<any>;\n};\n\nconst FilePreview = ({ type, renderFilePreview, ...props }: FilePreviewProps) => {\n    if (typeof renderFilePreview === \"function\") {\n        return renderFilePreview(props);\n    }\n\n    if (type === \"compact\") {\n        return <TextOnlyPreview {...props} />;\n    }\n\n    return <RichItemPreview {...props} />;\n};\n\nexport { FilePreview, type FilePreviewProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAI9B,SAASC,eAAe,EAAEC,eAAe;AAOzC,MAAMC,WAAW,GAAGA,CAAC;EAAEC,IAAI;EAAEC,iBAAiB;EAAE,GAAGC;AAAwB,CAAC,KAAK;EAC7E,IAAI,OAAOD,iBAAiB,KAAK,UAAU,EAAE;IACzC,OAAOA,iBAAiB,CAACC,KAAK,CAAC;EACnC;EAEA,IAAIF,IAAI,KAAK,SAAS,EAAE;IACpB,oBAAOJ,KAAA,CAAAO,aAAA,CAACL,eAAe,EAAKI,KAAQ,CAAC;EACzC;EAEA,oBAAON,KAAA,CAAAO,aAAA,CAACN,eAAe,EAAKK,KAAQ,CAAC;AACzC,CAAC;AAED,SAASH,WAAW","ignoreList":[]}

package/FilePicker/primitives/components/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { VariantProps } from "../../../utils";
-import { previewVariants } from "./previews/variants";
+import type { previewVariants } from "./previews/variants";
 import type { FileItemFormatted } from "../../domains";
 /**
  * Default properties of a file preview component.
@@ -22,7 +22,7 @@ export type FilePreviewRendererProps = Omit<FilePreviewDefaultProps, "type"> & R
  * Default properties of a trigger component.
  * They are shared between the default and custom renderers.
  */
-export interface TriggerDefaultProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+export interface TriggerDefaultProps extends React.HTMLAttributes<HTMLButtonElement> {
     disabled?: boolean;
     text?: string;
     onSelectItem: () => void;

package/FilePicker/primitives/components/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { VariantProps } from \"~/utils\";\nimport { previewVariants } from \"./previews/variants\";\nimport type { FileItemFormatted } from \"../../domains\";\n\n/**\n * Default properties of a file preview component.\n * They are shared between the default and custom renderers.\n */\nexport interface FilePreviewDefaultProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n        VariantProps<typeof previewVariants> {\n    onReplaceItem?: () => void;\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    value: FileItemFormatted;\n    disabled?: boolean;\n}\n\n/**\n * Properties that can be used to render a custom file preview component.\n * @see `renderFilePreview` property of the FilePickerPrimitiveProps.\n */\nexport type FilePreviewRendererProps = Omit<FilePreviewDefaultProps, \"type\"> & Record<string, any>;\n\n/**\n * Default properties of a trigger component.\n * They are shared between the default and custom renderers.\n */\nexport interface TriggerDefaultProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onClick\"> {\n    disabled?: boolean;\n    text?: string;\n    onSelectItem: () => void;\n}\n\n/**\n * Properties that can be used to render a custom trigger component.\n * @see `renderTrigger` property of the FilePickerPrimitiveProps.\n */\nexport type TriggerRendererProps = TriggerDefaultProps & Record<string, any>;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { VariantProps } from \"~/utils\";\nimport type { previewVariants } from \"./previews/variants\";\nimport type { FileItemFormatted } from \"../../domains\";\n\n/**\n * Default properties of a file preview component.\n * They are shared between the default and custom renderers.\n */\nexport interface FilePreviewDefaultProps\n    extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n        VariantProps<typeof previewVariants> {\n    onReplaceItem?: () => void;\n    onRemoveItem?: () => void;\n    onEditItem?: () => void;\n    value: FileItemFormatted;\n    disabled?: boolean;\n}\n\n/**\n * Properties that can be used to render a custom file preview component.\n * @see `renderFilePreview` property of the FilePickerPrimitiveProps.\n */\nexport type FilePreviewRendererProps = Omit<FilePreviewDefaultProps, \"type\"> & Record<string, any>;\n\n/**\n * Default properties of a trigger component.\n * They are shared between the default and custom renderers.\n */\nexport interface TriggerDefaultProps extends React.HTMLAttributes<HTMLButtonElement> {\n    disabled?: boolean;\n    text?: string;\n    onSelectItem: () => void;\n}\n\n/**\n * Properties that can be used to render a custom trigger component.\n * @see `renderTrigger` property of the FilePickerPrimitiveProps.\n */\nexport type TriggerRendererProps = TriggerDefaultProps & Record<string, any>;\n"],"mappings":"","ignoreList":[]}

package/FormComponent/FormComponent.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { Label } from "../Label";
+import type React from "react";
+import type { Label } from "../Label";
 interface FormComponentProps<TValue = any> {
     /**
      * Label for the form component, which can be a React element of type `Label` or any React node.

package/FormComponent/FormComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["FormComponent.tsx"],"sourcesContent":["import React from \"react\";\nimport { Label } from \"~/Label\";\n\ninterface FormComponentProps<TValue = any> {\n    /**\n     * Label for the form component, which can be a React element of type `Label` or any React node.\n     */\n    label?: React.ReactElement<typeof Label> | React.ReactNode;\n\n    /**\n     * Description providing additional context or guidance for the form component.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * Note or supplementary information to display below the form component.\n     */\n    note?: React.ReactNode;\n\n    /**\n     * Indicates whether the form component is required.\n     */\n    required?: boolean;\n\n    /**\n     * Indicates whether the form component is disabled, preventing user interaction.\n     */\n    disabled?: boolean;\n\n    /**\n     * Validation state for the form component. Provides details about validity,\n     * error messages, and additional validation results.\n     */\n    validation?: {\n        /**\n         * Indicates whether the form component's value is valid.\n         * Can be `true`, `false`, or `null` if not yet validated.\n         */\n        isValid: boolean | null;\n\n        /**\n         * Error message to display when the form component's value is invalid.\n         */\n        message?: string;\n\n        /**\n         * Additional results or metadata returned by the validation logic.\n         */\n        results?: { [key: string]: any };\n    };\n\n    /**\n     * Function provided by the parent `<Form>` component to trigger validation when the form component's value changes.\n     * Returns a promise that resolves with the validation result.\n     */\n    validate?: () => Promise<boolean | any>;\n\n    /**\n     *  Form component's value.\n     */\n    value?: TValue;\n\n    /**\n     * A callback that is executed each time a value is changed.\n     */\n    onChange?: (value: TValue) => void;\n}\n\nexport { type FormComponentProps };\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["FormComponent.tsx"],"sourcesContent":["import type React from \"react\";\nimport type { Label } from \"~/Label\";\n\ninterface FormComponentProps<TValue = any> {\n    /**\n     * Label for the form component, which can be a React element of type `Label` or any React node.\n     */\n    label?: React.ReactElement<typeof Label> | React.ReactNode;\n\n    /**\n     * Description providing additional context or guidance for the form component.\n     */\n    description?: React.ReactNode;\n\n    /**\n     * Note or supplementary information to display below the form component.\n     */\n    note?: React.ReactNode;\n\n    /**\n     * Indicates whether the form component is required.\n     */\n    required?: boolean;\n\n    /**\n     * Indicates whether the form component is disabled, preventing user interaction.\n     */\n    disabled?: boolean;\n\n    /**\n     * Validation state for the form component. Provides details about validity,\n     * error messages, and additional validation results.\n     */\n    validation?: {\n        /**\n         * Indicates whether the form component's value is valid.\n         * Can be `true`, `false`, or `null` if not yet validated.\n         */\n        isValid: boolean | null;\n\n        /**\n         * Error message to display when the form component's value is invalid.\n         */\n        message?: string;\n\n        /**\n         * Additional results or metadata returned by the validation logic.\n         */\n        results?: { [key: string]: any };\n    };\n\n    /**\n     * Function provided by the parent `<Form>` component to trigger validation when the form component's value changes.\n     * Returns a promise that resolves with the validation result.\n     */\n    validate?: () => Promise<boolean | any>;\n\n    /**\n     *  Form component's value.\n     */\n    value?: TValue;\n\n    /**\n     * A callback that is executed each time a value is changed.\n     */\n    onChange?: (value: TValue) => void;\n}\n\nexport { type FormComponentProps };\n"],"mappings":"","ignoreList":[]}

package/FormComponent/Label.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","cn","makeDecoratable","Label","DecoratableFormComponentLabel","htmlFor","text","required","disabled","hint","invalid","className","props","renderLabel","isValidElement","type","cloneElement","createElement","Object","assign","FormComponentLabel"],"sources":["Label.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport { Label, LabelProps } from \"~/Label\";\n\ninterface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {\n    text?: React.ReactElement<typeof Label> | React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n    disabled?: boolean;\n    hint?: React.ReactNode;\n    htmlFor?: string;\n}\n\nconst DecoratableFormComponentLabel = ({\n    htmlFor,\n    text,\n    required,\n    disabled,\n    hint,\n    invalid,\n    className,\n    ...props\n}: FormComponentLabelProps) => {\n    // UseMemo correctly to memoize the rendered label\n    const renderLabel = useMemo(() => {\n        if (!text) {\n            return null;\n        }\n\n        if (React.isValidElement(text) && text.type === Label) {\n            return React.cloneElement(text as React.ReactElement<LabelProps>, {\n                ...text.props,\n                htmlFor: text.props.htmlFor ?? htmlFor,\n                required: text.props.required ?? required,\n                disabled: text.props.disabled ?? disabled,\n                hint: text.props.hint ?? hint,\n                invalid: text.props.invalid ?? invalid\n            });\n        }\n\n        return (\n            <Label\n                htmlFor={htmlFor}\n                text={text}\n                required={required}\n                disabled={disabled}\n                hint={hint}\n                invalid={invalid}\n            />\n        );\n    }, [text, required, disabled, hint, invalid, htmlFor]);\n\n    if (!renderLabel) {\n        return null;\n    }\n\n    return (\n        <div {...props} className={cn(\"wby-mb-xs\", className)}>\n            {renderLabel}\n        </div>\n    );\n};\n\nconst FormComponentLabel = makeDecoratable(\"FormComponentLabel\", DecoratableFormComponentLabel);\n\nexport { FormComponentLabel, type FormComponentLabelProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,EAAE,EAAEC,eAAe;AAC5B,SAASC,KAAK;AAWd,MAAMC,6BAA6B,GAAGA,CAAC;EACnCC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,SAAS;EACT,GAAGC;AACkB,CAAC,KAAK;EAC3B;EACA,MAAMC,WAAW,GAAGb,OAAO,CAAC,MAAM;IAC9B,IAAI,CAACM,IAAI,EAAE;MACP,OAAO,IAAI;IACf;IAEA,IAAI,aAAAP,KAAK,CAACe,cAAc,CAACR,IAAI,CAAC,IAAIA,IAAI,CAACS,IAAI,KAAKZ,KAAK,EAAE;MACnD,oBAAOJ,KAAK,CAACiB,YAAY,CAACV,IAAI,EAAoC;QAC9D,GAAGA,IAAI,CAACM,KAAK;QACbP,OAAO,EAAEC,IAAI,CAACM,KAAK,CAACP,OAAO,IAAIA,OAAO;QACtCE,QAAQ,EAAED,IAAI,CAACM,KAAK,CAACL,QAAQ,IAAIA,QAAQ;QACzCC,QAAQ,EAAEF,IAAI,CAACM,KAAK,CAACJ,QAAQ,IAAIA,QAAQ;QACzCC,IAAI,EAAEH,IAAI,CAACM,KAAK,CAACH,IAAI,IAAIA,IAAI;QAC7BC,OAAO,EAAEJ,IAAI,CAACM,KAAK,CAACF,OAAO,IAAIA;MACnC,CAAC,CAAC;IACN;IAEA,oBACIX,KAAA,CAAAkB,aAAA,CAACd,KAAK;MACFE,OAAO,EAAEA,OAAQ;MACjBC,IAAI,EAAEA,IAAK;MACXC,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA,QAAS;MACnBC,IAAI,EAAEA,IAAK;MACXC,OAAO,EAAEA;IAAQ,CACpB,CAAC;EAEV,CAAC,EAAE,CAACJ,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAEL,OAAO,CAAC,CAAC;EAEtD,IAAI,CAACQ,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,oBACId,KAAA,CAAAkB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASP,KAAK;IAAED,SAAS,EAAEV,EAAE,CAAC,WAAW,EAAEU,SAAS;EAAE,IACjDE,WACA,CAAC;AAEd,CAAC;AAED,MAAMO,kBAAkB,GAAGlB,eAAe,CAAC,oBAAoB,EAAEE,6BAA6B,CAAC;AAE/F,SAASgB,kBAAkB","ignoreList":[]}
+{"version":3,"names":["React","useMemo","cn","makeDecoratable","Label","DecoratableFormComponentLabel","htmlFor","text","required","disabled","hint","invalid","className","props","renderLabel","isValidElement","type","cloneElement","createElement","Object","assign","FormComponentLabel"],"sources":["Label.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { cn, makeDecoratable } from \"~/utils\";\nimport type { LabelProps } from \"~/Label\";\nimport { Label } from \"~/Label\";\n\ninterface FormComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {\n    text?: React.ReactElement<typeof Label> | React.ReactNode;\n    invalid?: boolean;\n    required?: boolean;\n    disabled?: boolean;\n    hint?: React.ReactNode;\n    htmlFor?: string;\n}\n\nconst DecoratableFormComponentLabel = ({\n    htmlFor,\n    text,\n    required,\n    disabled,\n    hint,\n    invalid,\n    className,\n    ...props\n}: FormComponentLabelProps) => {\n    // UseMemo correctly to memoize the rendered label\n    const renderLabel = useMemo(() => {\n        if (!text) {\n            return null;\n        }\n\n        if (React.isValidElement(text) && text.type === Label) {\n            return React.cloneElement(text as React.ReactElement<LabelProps>, {\n                ...text.props,\n                htmlFor: text.props.htmlFor ?? htmlFor,\n                required: text.props.required ?? required,\n                disabled: text.props.disabled ?? disabled,\n                hint: text.props.hint ?? hint,\n                invalid: text.props.invalid ?? invalid\n            });\n        }\n\n        return (\n            <Label\n                htmlFor={htmlFor}\n                text={text}\n                required={required}\n                disabled={disabled}\n                hint={hint}\n                invalid={invalid}\n            />\n        );\n    }, [text, required, disabled, hint, invalid, htmlFor]);\n\n    if (!renderLabel) {\n        return null;\n    }\n\n    return (\n        <div {...props} className={cn(\"wby-mb-xs\", className)}>\n            {renderLabel}\n        </div>\n    );\n};\n\nconst FormComponentLabel = makeDecoratable(\"FormComponentLabel\", DecoratableFormComponentLabel);\n\nexport { FormComponentLabel, type FormComponentLabelProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,EAAE,EAAEC,eAAe;AAE5B,SAASC,KAAK;AAWd,MAAMC,6BAA6B,GAAGA,CAAC;EACnCC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,SAAS;EACT,GAAGC;AACkB,CAAC,KAAK;EAC3B;EACA,MAAMC,WAAW,GAAGb,OAAO,CAAC,MAAM;IAC9B,IAAI,CAACM,IAAI,EAAE;MACP,OAAO,IAAI;IACf;IAEA,IAAI,aAAAP,KAAK,CAACe,cAAc,CAACR,IAAI,CAAC,IAAIA,IAAI,CAACS,IAAI,KAAKZ,KAAK,EAAE;MACnD,oBAAOJ,KAAK,CAACiB,YAAY,CAACV,IAAI,EAAoC;QAC9D,GAAGA,IAAI,CAACM,KAAK;QACbP,OAAO,EAAEC,IAAI,CAACM,KAAK,CAACP,OAAO,IAAIA,OAAO;QACtCE,QAAQ,EAAED,IAAI,CAACM,KAAK,CAACL,QAAQ,IAAIA,QAAQ;QACzCC,QAAQ,EAAEF,IAAI,CAACM,KAAK,CAACJ,QAAQ,IAAIA,QAAQ;QACzCC,IAAI,EAAEH,IAAI,CAACM,KAAK,CAACH,IAAI,IAAIA,IAAI;QAC7BC,OAAO,EAAEJ,IAAI,CAACM,KAAK,CAACF,OAAO,IAAIA;MACnC,CAAC,CAAC;IACN;IAEA,oBACIX,KAAA,CAAAkB,aAAA,CAACd,KAAK;MACFE,OAAO,EAAEA,OAAQ;MACjBC,IAAI,EAAEA,IAAK;MACXC,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA,QAAS;MACnBC,IAAI,EAAEA,IAAK;MACXC,OAAO,EAAEA;IAAQ,CACpB,CAAC;EAEV,CAAC,EAAE,CAACJ,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,OAAO,EAAEL,OAAO,CAAC,CAAC;EAEtD,IAAI,CAACQ,WAAW,EAAE;IACd,OAAO,IAAI;EACf;EAEA,oBACId,KAAA,CAAAkB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASP,KAAK;IAAED,SAAS,EAAEV,EAAE,CAAC,WAAW,EAAEU,SAAS;EAAE,IACjDE,WACA,CAAC;AAEd,CAAC;AAED,MAAMO,kBAAkB,GAAGlB,eAAe,CAAC,oBAAoB,EAAEE,6BAA6B,CAAC;AAE/F,SAASgB,kBAAkB","ignoreList":[]}

package/Grid/Grid.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import { type VariantProps } from "../utils";
 declare const columnVariants: (props?: ({
-    span?: "auto" | 2 | 1 | 3 | 4 | 8 | 5 | 6 | 10 | 7 | 12 | 9 | 11 | null | undefined;
-    offset?: 2 | 1 | 3 | 4 | 8 | 5 | 6 | 10 | 7 | 9 | 11 | null | undefined;
-    align?: "top" | "bottom" | "middle" | null | undefined;
+    span?: 1 | 4 | 2 | 3 | 5 | 12 | 6 | 8 | 10 | "auto" | 9 | 7 | 11 | null | undefined;
+    offset?: 1 | 4 | 2 | 3 | 5 | 6 | 8 | 10 | 9 | 7 | 11 | null | undefined;
+    align?: "bottom" | "top" | "middle" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface ColumnProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof columnVariants> {
     children?: React.ReactNode;
@@ -28,7 +28,7 @@ declare const Column: (({ span, align, children, className, offset, ...props }:
     }>) => (props: unknown) => React.JSX.Element;
 };
 declare const gridVariants: (props?: ({
-    gap?: "small" | "none" | "compact" | "comfortable" | "micro" | "spacious" | null | undefined;
+    gap?: "none" | "small" | "comfortable" | "compact" | "micro" | "spacious" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
     children: React.ReactElement<ColumnProps, typeof Column> | Array<React.ReactElement<ColumnProps, typeof Column>>;

package/Heading/Heading.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from "../utils";
 export type HeadingTags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 export type HeadingLevels = 1 | 2 | 3 | 4 | 5 | 6;
 declare const headingVariants: (props?: ({
-    level?: 2 | 1 | 3 | 4 | 5 | 6 | null | undefined;
+    level?: 1 | 4 | 2 | 3 | 5 | 6 | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
     as?: HeadingTags;