@webiny/admin-ui 0.0.0-unstable.e53eceafb5 → 0.0.0-unstable.e6f0dc8ca7

package/Accordion/Accordion.d.ts

@@ -1,29 +1,32 @@
 import React from "react";
-import { type VariantProps } from "../utils";
-import type { AccordionRoot } from "./components/AccordionRoot";
-import { type AccordionItemProps } from "./components/AccordionItem";
+import { type VariantProps } from "../utils.js";
+import type { AccordionRoot } from "./components/AccordionRoot.js";
+import { type AccordionItemProps } from "./components/AccordionItem.js";
+import { useAccordionProps } from "./components/AccordionPropsProvider.js";
 declare const accordionVariants: (props?: ({
     variant?: "container" | "underline" | null | undefined;
-    background?: "base" | "transparent" | "light" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> & VariantProps<typeof accordionVariants> & {
     children: React.ReactNode;
+    background?: "base" | "light" | "transparent";
+    border?: "none" | "accent";
+    openClosedIndicatorPosition?: "left" | "right";
 };
-declare const Accordion: (({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element) & {
-    original: ({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element;
+export declare const Accordion: ((props: AccordionProps) => React.JSX.Element) & {
+    original: (props: AccordionProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element) & {
-        original: ({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element;
+    original: ((props: AccordionProps) => React.JSX.Element) & {
+        original: (props: AccordionProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element) & {
-        original: ({ children, variant, background, className, ...props }: AccordionProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AccordionProps) => React.JSX.Element) & {
+        original: (props: AccordionProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -41,65 +44,65 @@ declare const Accordion: (({ children, variant, background, className, ...props
         originalName: string;
         displayName: string;
     } & {
-        createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: AccordionItemProps) => React.JSX.Element) & {
+        createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: AccordionItemProps) => React.JSX.Element) & {
             original: (props: AccordionItemProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         }>) => (props: unknown) => React.JSX.Element;
     } & {
-        Icon: ((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
-            original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+        Icon: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+            original: (props: import("../index.js").IconProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: ((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
-                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+            original: ((props: import("../index.js").IconProps) => React.JSX.Element) & {
+                original: (props: import("../index.js").IconProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Icon/Icon").IconProps) => React.JSX.Element) & {
-                original: (props: import("../Icon/Icon").IconProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").IconProps) => React.JSX.Element) & {
+                original: (props: import("../index.js").IconProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        Action: (({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
-            original: ({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+        Action: (({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element) & {
+            original: ({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
-                original: ({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            original: (({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element) & {
+                original: ({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element) & {
-                original: ({ onClick, ...props }: import("../Button/IconButton").IconButtonProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element) & {
+                original: ({ onClick, ...props }: import("./components/AccordionItemAction.js").AccordionItemActionProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         } & {
-            Separator: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
-                original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+            Separator: ((props: import("../index.js").SeparatorProps) => React.JSX.Element) & {
+                original: (props: import("../index.js").SeparatorProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             } & {
-                original: ((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
-                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                original: ((props: import("../index.js").SeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("../index.js").SeparatorProps) => React.JSX.Element;
                     originalName: string;
                     displayName: string;
                 };
                 originalName: string;
                 displayName: string;
             } & {
-                createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element) & {
-                    original: (props: import("../Separator/Separator").SeparatorProps) => React.JSX.Element;
+                createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: import("../index.js").SeparatorProps) => React.JSX.Element) & {
+                    original: (props: import("../index.js").SeparatorProps) => React.JSX.Element;
                     originalName: string;
                     displayName: string;
                 }>) => (props: unknown) => React.JSX.Element;
@@ -107,4 +110,5 @@ declare const Accordion: (({ children, variant, background, className, ...props
         };
     };
 };
-export { Accordion, type AccordionProps, type AccordionItemProps };
+export { useAccordionProps };
+export type { AccordionProps, AccordionItemProps };

package/Accordion/Accordion.js

@@ -1,41 +1,42 @@
 import React from "react";
-import { makeDecoratable, withStaticProps, cva, cn } from "../utils";
-import { AccordionItem } from "./components/AccordionItem";
-const accordionVariants = cva("wby-group wby-w-full", {
+import { makeDecoratable, withStaticProps, cva, cn } from "../utils.js";
+import { AccordionItem } from "./components/AccordionItem.js";
+import { AccordionBackgroundProvider, useAccordionBackground } from "./components/AccordionBackgroundProvider.js";
+import { AccordionPropsProvider, useAccordionProps } from "./components/AccordionPropsProvider.js";
+const accordionVariants = cva("group w-full", {
   variants: {
     variant: {
-      container: "wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col",
-      underline: "wby-accordion-variant-underline "
-    },
-    background: {
-      base: "wby-accordion-background-base",
-      light: "wby-accordion-background-light",
-      transparent: "wby-accordion-background-transparent"
+      container: "accordion-variant-container gap-xs flex flex-col rounded-lg",
+      underline: "accordion-variant-underline"
     }
   },
   defaultVariants: {
-    variant: "underline",
-    background: "base"
+    variant: "underline"
   }
 });
-const AccordionBase = ({
-  children,
-  variant,
-  background,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
+const AccordionBase = props => {
+  const {
+    children,
+    variant,
+    background: backgroundProp = "light",
+    className
+  } = props;
+  const background = useAccordionBackground(backgroundProp);
+  return /*#__PURE__*/React.createElement(AccordionBackgroundProvider, {
+    currentBackground: background
+  }, /*#__PURE__*/React.createElement(AccordionPropsProvider, {
+    props: props
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-accordion": "base",
     className: cn(accordionVariants({
-      variant,
-      background
+      variant
     }), className)
-  }), children);
+  }, children)));
 };
 const DecoratableAccordion = makeDecoratable("Accordion", AccordionBase);
-const Accordion = withStaticProps(DecoratableAccordion, {
+export const Accordion = withStaticProps(DecoratableAccordion, {
   Item: AccordionItem
 });
-export { Accordion };
+export { useAccordionProps };
 
 //# sourceMappingURL=Accordion.js.map

package/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","cva","cn","AccordionItem","accordionVariants","variants","variant","container","underline","background","base","light","transparent","defaultVariants","AccordionBase","children","className","props","createElement","Object","assign","DecoratableAccordion","Accordion","Item"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from \"~/utils\";\nimport type { AccordionRoot } from \"./components/AccordionRoot\";\nimport { AccordionItem, type AccordionItemProps } from \"./components/AccordionItem\";\n\nconst accordionVariants = cva(\"wby-group wby-w-full\", {\n    variants: {\n        variant: {\n            container: \"wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col\",\n            underline: \"wby-accordion-variant-underline \"\n        },\n        background: {\n            base: \"wby-accordion-background-base\",\n            light: \"wby-accordion-background-light\",\n            transparent: \"wby-accordion-background-transparent\"\n        }\n    },\n    defaultVariants: {\n        variant: \"underline\",\n        background: \"base\"\n    }\n});\n\ntype AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &\n    VariantProps<typeof accordionVariants> & {\n        children: React.ReactNode;\n    };\n\nconst AccordionBase = ({ children, variant, background, className, ...props }: AccordionProps) => {\n    return (\n        <div {...props} className={cn(accordionVariants({ variant, background }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst DecoratableAccordion = makeDecoratable(\"Accordion\", AccordionBase);\n\nconst Accordion = withStaticProps(DecoratableAccordion, {\n    Item: AccordionItem\n});\n\nexport { Accordion, type AccordionProps, type AccordionItemProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,eAAe,EAAEC,GAAG,EAAqBC,EAAE;AAErE,SAASC,aAAa;AAEtB,MAAMC,iBAAiB,GAAGH,GAAG,CAAC,sBAAsB,EAAE;EAClDI,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,SAAS,EAAE,kEAAkE;MAC7EC,SAAS,EAAE;IACf,CAAC;IACDC,UAAU,EAAE;MACRC,IAAI,EAAE,+BAA+B;MACrCC,KAAK,EAAE,gCAAgC;MACvCC,WAAW,EAAE;IACjB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,OAAO,EAAE,WAAW;IACpBG,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAOF,MAAMK,aAAa,GAAGA,CAAC;EAAEC,QAAQ;EAAET,OAAO;EAAEG,UAAU;EAAEO,SAAS;EAAE,GAAGC;AAAsB,CAAC,KAAK;EAC9F,oBACInB,KAAA,CAAAoB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEd,EAAE,CAACE,iBAAiB,CAAC;MAAEE,OAAO;MAAEG;IAAW,CAAC,CAAC,EAAEO,SAAS;EAAE,IAChFD,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,oBAAoB,GAAGtB,eAAe,CAAC,WAAW,EAAEe,aAAa,CAAC;AAExE,MAAMQ,SAAS,GAAGtB,eAAe,CAACqB,oBAAoB,EAAE;EACpDE,IAAI,EAAEpB;AACV,CAAC,CAAC;AAEF,SAASmB,SAAS","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","cva","cn","AccordionItem","AccordionBackgroundProvider","useAccordionBackground","AccordionPropsProvider","useAccordionProps","accordionVariants","variants","variant","container","underline","defaultVariants","AccordionBase","props","children","background","backgroundProp","className","createElement","currentBackground","DecoratableAccordion","Accordion","Item"],"sources":["Accordion.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from \"~/utils.js\";\nimport type { AccordionRoot } from \"./components/AccordionRoot.js\";\nimport { AccordionItem, type AccordionItemProps } from \"./components/AccordionItem.js\";\nimport {\n    AccordionBackgroundProvider,\n    useAccordionBackground\n} from \"./components/AccordionBackgroundProvider.js\";\nimport { AccordionPropsProvider, useAccordionProps } from \"./components/AccordionPropsProvider.js\";\n\nconst accordionVariants = cva(\"group w-full\", {\n    variants: {\n        variant: {\n            container: \"accordion-variant-container gap-xs flex flex-col rounded-lg\",\n            underline: \"accordion-variant-underline\"\n        }\n    },\n    defaultVariants: {\n        variant: \"underline\"\n    }\n});\n\ntype AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionRoot> &\n    VariantProps<typeof accordionVariants> & {\n        children: React.ReactNode;\n        background?: \"base\" | \"light\" | \"transparent\";\n        border?: \"none\" | \"accent\";\n        openClosedIndicatorPosition?: \"left\" | \"right\";\n    };\n\nconst AccordionBase = (props: AccordionProps) => {\n    const { children, variant, background: backgroundProp = \"light\", className } = props;\n\n    const background = useAccordionBackground(backgroundProp);\n\n    return (\n        <AccordionBackgroundProvider currentBackground={background}>\n            <AccordionPropsProvider props={props}>\n                <div\n                    data-accordion=\"base\"\n                    className={cn(accordionVariants({ variant }), className)}\n                >\n                    {children}\n                </div>\n            </AccordionPropsProvider>\n        </AccordionBackgroundProvider>\n    );\n};\n\nconst DecoratableAccordion = makeDecoratable(\"Accordion\", AccordionBase);\n\nexport const Accordion = withStaticProps(DecoratableAccordion, {\n    Item: AccordionItem\n});\n\nexport { useAccordionProps };\nexport type { AccordionProps, AccordionItemProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe,EAAEC,eAAe,EAAEC,GAAG,EAAqBC,EAAE;AAErE,SAASC,aAAa;AACtB,SACIC,2BAA2B,EAC3BC,sBAAsB;AAE1B,SAASC,sBAAsB,EAAEC,iBAAiB;AAElD,MAAMC,iBAAiB,GAAGP,GAAG,CAAC,cAAc,EAAE;EAC1CQ,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,SAAS,EAAE,6DAA6D;MACxEC,SAAS,EAAE;IACf;EACJ,CAAC;EACDC,eAAe,EAAE;IACbH,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAUF,MAAMI,aAAa,GAAIC,KAAqB,IAAK;EAC7C,MAAM;IAAEC,QAAQ;IAAEN,OAAO;IAAEO,UAAU,EAAEC,cAAc,GAAG,OAAO;IAAEC;EAAU,CAAC,GAAGJ,KAAK;EAEpF,MAAME,UAAU,GAAGZ,sBAAsB,CAACa,cAAc,CAAC;EAEzD,oBACIpB,KAAA,CAAAsB,aAAA,CAAChB,2BAA2B;IAACiB,iBAAiB,EAAEJ;EAAW,gBACvDnB,KAAA,CAAAsB,aAAA,CAACd,sBAAsB;IAACS,KAAK,EAAEA;EAAM,gBACjCjB,KAAA,CAAAsB,aAAA;IACI,kBAAe,MAAM;IACrBD,SAAS,EAAEjB,EAAE,CAACM,iBAAiB,CAAC;MAAEE;IAAQ,CAAC,CAAC,EAAES,SAAS;EAAE,GAExDH,QACA,CACe,CACC,CAAC;AAEtC,CAAC;AAED,MAAMM,oBAAoB,GAAGvB,eAAe,CAAC,WAAW,EAAEe,aAAa,CAAC;AAExE,OAAO,MAAMS,SAAS,GAAGvB,eAAe,CAACsB,oBAAoB,EAAE;EAC3DE,IAAI,EAAErB;AACV,CAAC,CAAC;AAEF,SAASI,iBAAiB","ignoreList":[]}