@webiny/admin-ui 0.0.0-unstable.06b2ede40f → 0.0.0-unstable.0d717d18dd

package/Accordion/Accordion.d.ts

@@ -1,29 +1,33 @@
 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;
+declare const AccordionBase: (props: AccordionProps) => React.JSX.Element;
+export declare const Accordion: typeof AccordionBase & {
+    original: typeof AccordionBase;
     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: typeof AccordionBase & {
+        original: typeof AccordionBase;
         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<typeof AccordionBase & {
+        original: typeof AccordionBase;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
@@ -41,65 +45,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 +111,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,37 @@
-import React from "react";
-import { makeDecoratable, withStaticProps, cva, cn } from "../utils";
-import { AccordionItem } from "./components/AccordionItem";
-const accordionVariants = cva("wby-group wby-w-full", {
-  variants: {
-    variant: {
-      container: "wby-accordion-variant-container wby-gap-xs wby-flex wby-flex-col",
-      underline: "wby-accordion-variant-underline "
+import react from "react";
+import { cn, cva, makeDecoratable, withStaticProps } 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: "accordion-variant-container gap-xs flex flex-col rounded-lg",
+            underline: "accordion-variant-underline"
+        }
     },
-    background: {
-      base: "wby-accordion-background-base",
-      light: "wby-accordion-background-light",
-      transparent: "wby-accordion-background-transparent"
+    defaultVariants: {
+        variant: "underline"
     }
-  },
-  defaultVariants: {
-    variant: "underline",
-    background: "base"
-  }
 });
-const AccordionBase = ({
-  children,
-  variant,
-  background,
-  className,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
-    className: cn(accordionVariants({
-      variant,
-      background
-    }), className)
-  }), children);
+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
+        }), className)
+    }, children)));
 };
 const DecoratableAccordion = makeDecoratable("Accordion", AccordionBase);
 const Accordion = withStaticProps(DecoratableAccordion, {
-  Item: AccordionItem
+    Item: AccordionItem
 });
-export { Accordion };
+export { Accordion, 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,"file":"Accordion/Accordion.js","sources":["../../src/Accordion/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"],"names":["accordionVariants","cva","AccordionBase","props","children","variant","backgroundProp","className","background","useAccordionBackground","AccordionBackgroundProvider","AccordionPropsProvider","cn","DecoratableAccordion","makeDecoratable","Accordion","withStaticProps","AccordionItem"],"mappings":";;;;;AAUA,MAAMA,oBAAoBC,IAAI,gBAAgB;IAC1C,UAAU;QACN,SAAS;YACL,WAAW;YACX,WAAW;QACf;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAUA,MAAMC,gBAAgB,CAACC;IACnB,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAE,YAAYC,iBAAiB,OAAO,EAAEC,SAAS,EAAE,GAAGJ;IAE/E,MAAMK,aAAaC,uBAAuBH;IAE1C,OAAO,WAAP,GACI,oBAACI,6BAA2BA;QAAC,mBAAmBF;qBAC5C,oBAACG,wBAAsBA;QAAC,OAAOR;qBAC3B,oBAAC;QACG,kBAAe;QACf,WAAWS,GAAGZ,kBAAkB;YAAEK;QAAQ,IAAIE;OAE7CH;AAKrB;AAEA,MAAMS,uBAAuBC,gBAAgB,aAAaZ;AAEnD,MAAMa,YAAYC,gBAAgBH,sBAAsB;IAC3D,MAAMI;AACV"}