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

package/Accordion/components/AccordionContent.js

@@ -1,6 +1,7 @@
 import { Collapsible } from "radix-ui";
 import { cn, cva } from "../../utils.js";
 import { useAccordionItemProps } from "./AccordionItem.js";
+import { AccordionItemPropsProvider } from "./AccordionItemPropsProvider.js";
 import * as __rspack_external_react from "react";
 const accordionContentVariants = cva([
     "overflow-hidden text-md pr-xxl",
@@ -39,10 +40,12 @@ const AccordionContent = ({ children, className, ...props })=>{
             withHandle,
             withIcon
         }), className)
+    }, /*#__PURE__*/ __rspack_external_react.createElement(AccordionItemPropsProvider, {
+        props: {}
     }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
         "data-accordion": "content",
         className: "pt-sm pb-lg"
-    }, children));
+    }, children)));
 };
 export { AccordionContent };
 

package/Accordion/components/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion/components/AccordionContent.js","sources":["../../../src/Accordion/components/AccordionContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cva, cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\n\nconst accordionContentVariants = cva(\n    [\n        \"overflow-hidden text-md pr-xxl\",\n        \"transition-all\",\n        \"data-[state=closed]:animate-collapsible-up\",\n        \"data-[state=open]:animate-collapsible-down\"\n    ],\n    {\n        variants: {\n            withIcon: {\n                true: \"pl-xxl\",\n                false: \"pl-md\"\n            },\n            withHandle: {\n                true: \"pl-5\"\n            }\n        },\n        compoundVariants: [\n            {\n                withIcon: true,\n                withHandle: true,\n                className: \"pl-14\"\n            }\n        ],\n        defaultVariants: {\n            withIcon: false,\n            withHandle: false\n        }\n    }\n);\n\nexport interface AccordionContentProps extends React.ComponentPropsWithoutRef<\n    typeof CollapsiblePrimitive.Content\n> {}\n\nexport const AccordionContent = ({ children, className, ...props }: AccordionContentProps) => {\n    const itemProps = useAccordionItemProps();\n    const withIcon = !!itemProps.icon;\n    const withHandle = !!itemProps.handle;\n\n    return (\n        <CollapsiblePrimitive.Content\n            {...props}\n            className={cn(accordionContentVariants({ withHandle, withIcon }), className)}\n        >\n            <div data-accordion={\"content\"} className=\"pt-sm pb-lg\">\n                {children}\n            </div>\n        </CollapsiblePrimitive.Content>\n    );\n};\n"],"names":["accordionContentVariants","cva","AccordionContent","children","className","props","itemProps","useAccordionItemProps","withIcon","withHandle","CollapsiblePrimitive","cn"],"mappings":";;;;AAKA,MAAMA,2BAA2BC,IAC7B;IACI;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,UAAU;YACN,MAAM;YACN,OAAO;QACX;QACA,YAAY;YACR,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YACI,UAAU;YACV,YAAY;YACZ,WAAW;QACf;KACH;IACD,iBAAiB;QACb,UAAU;QACV,YAAY;IAChB;AACJ;AAOG,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAA8B;IACrF,MAAMC,YAAYC;IAClB,MAAMC,WAAW,CAAC,CAACF,UAAU,IAAI;IACjC,MAAMG,aAAa,CAAC,CAACH,UAAU,MAAM;IAErC,OAAO,WAAP,GACI,sCAACI,YAAAA,OAA4B;QACxB,GAAGL,KAAK;QACT,WAAWM,GAAGX,yBAAyB;YAAES;YAAYD;QAAS,IAAIJ;qBAElE,sCAAC;QAAI,kBAAgB;QAAW,WAAU;OACrCD;AAIjB"}
+{"version":3,"file":"Accordion/components/AccordionContent.js","sources":["../../../src/Accordion/components/AccordionContent.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cva, cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\nimport { AccordionItemPropsProvider } from \"./AccordionItemPropsProvider.js\";\nimport type { AccordionItemProps } from \"./AccordionItem.js\";\n\nconst accordionContentVariants = cva(\n    [\n        \"overflow-hidden text-md pr-xxl\",\n        \"transition-all\",\n        \"data-[state=closed]:animate-collapsible-up\",\n        \"data-[state=open]:animate-collapsible-down\"\n    ],\n    {\n        variants: {\n            withIcon: {\n                true: \"pl-xxl\",\n                false: \"pl-md\"\n            },\n            withHandle: {\n                true: \"pl-5\"\n            }\n        },\n        compoundVariants: [\n            {\n                withIcon: true,\n                withHandle: true,\n                className: \"pl-14\"\n            }\n        ],\n        defaultVariants: {\n            withIcon: false,\n            withHandle: false\n        }\n    }\n);\n\nexport interface AccordionContentProps extends React.ComponentPropsWithoutRef<\n    typeof CollapsiblePrimitive.Content\n> {}\n\nexport const AccordionContent = ({ children, className, ...props }: AccordionContentProps) => {\n    const itemProps = useAccordionItemProps();\n    const withIcon = !!itemProps.icon;\n    const withHandle = !!itemProps.handle;\n\n    return (\n        <CollapsiblePrimitive.Content\n            {...props}\n            className={cn(accordionContentVariants({ withHandle, withIcon }), className)}\n        >\n            <AccordionItemPropsProvider props={{} as AccordionItemProps}>\n                <div data-accordion={\"content\"} className=\"pt-sm pb-lg\">\n                    {children}\n                </div>\n            </AccordionItemPropsProvider>\n        </CollapsiblePrimitive.Content>\n    );\n};\n"],"names":["accordionContentVariants","cva","AccordionContent","children","className","props","itemProps","useAccordionItemProps","withIcon","withHandle","CollapsiblePrimitive","cn","AccordionItemPropsProvider"],"mappings":";;;;;AAOA,MAAMA,2BAA2BC,IAC7B;IACI;IACA;IACA;IACA;CACH,EACD;IACI,UAAU;QACN,UAAU;YACN,MAAM;YACN,OAAO;QACX;QACA,YAAY;YACR,MAAM;QACV;IACJ;IACA,kBAAkB;QACd;YACI,UAAU;YACV,YAAY;YACZ,WAAW;QACf;KACH;IACD,iBAAiB;QACb,UAAU;QACV,YAAY;IAChB;AACJ;AAOG,MAAMC,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,OAA8B;IACrF,MAAMC,YAAYC;IAClB,MAAMC,WAAW,CAAC,CAACF,UAAU,IAAI;IACjC,MAAMG,aAAa,CAAC,CAACH,UAAU,MAAM;IAErC,OAAO,WAAP,GACI,sCAACI,YAAAA,OAA4B;QACxB,GAAGL,KAAK;QACT,WAAWM,GAAGX,yBAAyB;YAAES;YAAYD;QAAS,IAAIJ;qBAElE,sCAACQ,4BAA0BA;QAAC,OAAO,CAAC;qBAChC,sCAAC;QAAI,kBAAgB;QAAW,WAAU;OACrCT;AAKrB"}

package/Accordion/components/AccordionItem.d.ts

@@ -11,6 +11,7 @@ interface AccordionItemProps extends Omit<AccordionRootProps, "title"> {
     interactive?: boolean;
     locked?: boolean;
     draggable?: boolean;
+    dragHandleRef?: (element: HTMLElement | null) => void;
     actions?: React.ReactNode;
     children: React.ReactNode;
 }

package/Accordion/components/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion/components/AccordionItem.js","sources":["../../../src/Accordion/components/AccordionItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, cn, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { AccordionTrigger } from \"./AccordionTrigger.js\";\nimport { AccordionContent } from \"./AccordionContent.js\";\nimport { AccordionItemIcon } from \"./AccordionItemIcon.js\";\nimport { AccordionItemAction } from \"./AccordionItemAction.js\";\nimport { AccordionRoot, type AccordionRootProps } from \"~/Accordion/components/AccordionRoot.js\";\nimport { useAccordionBackground } from \"~/Accordion/components/AccordionBackgroundProvider.js\";\nimport { AccordionItemPropsProvider, useAccordionItemProps } from \"./AccordionItemPropsProvider.js\";\nimport { useAccordionProps } from \"../Accordion.js\";\n\ninterface AccordionItemProps extends Omit<AccordionRootProps, \"title\"> {\n    title: React.ReactNode;\n    subtitle?: React.ReactNode;\n    description?: React.ReactNode;\n    colorMark?: string;\n    icon?: React.ReactNode;\n    handle?: React.ReactNode;\n    interactive?: boolean;\n    locked?: boolean;\n    draggable?: boolean;\n    actions?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nconst accordionItemVariants = cva(\"\", {\n    variants: {\n        locked: {\n            true: \"pointer-events-none\"\n        },\n        background: {\n            base: \"bg-neutral-base\",\n            light: \"bg-neutral-light\",\n            transparent: \"bg-transparent\"\n        },\n        variant: {\n            underline: \"border-b-sm border-b-neutral-dimmed\",\n            container: \"rounded-lg\"\n        },\n        border: {\n            none: \"\",\n            accent: \"\"\n        }\n    },\n    compoundVariants: [\n        {\n            variant: \"container\",\n            border: \"accent\",\n            className: \"border-md border-neutral-dimmed-darker rounded-lg\"\n        }\n    ],\n    defaultVariants: {\n        variant: \"underline\"\n    }\n});\n\nconst AccordionItemBase = (props: AccordionItemProps) => {\n    const providedProps = useAccordionItemProps();\n    const mergedProps = { ...providedProps, ...props };\n    const accordionProps = useAccordionProps();\n    const background = useAccordionBackground(\"light\");\n\n    const { className, defaultOpen, disabled, onOpenChange, open, children, locked } = mergedProps;\n\n    return (\n        <AccordionRoot\n            className={cn(\n                \"group-item data-[state=open]:rounded-bl-lg data-[state=open]:rounded-br-lg\",\n                \"group-[.accordion-variant-container]/accordion:rounded-lg\",\n                \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\n                // Designer had a hover effect that was basically an overlay over the original\n                // bg color. We achieve that with a pseudo element. Dirty but it works well.\n                \"relative\",\n                \"before:absolute before:inset-0 before:pointer-events-none before:rounded-[inherit]\",\n                \"before:bg-neutral-dark/0 before:transition-colors\",\n                \"hover:before:bg-neutral-dark/2\",\n\n                // These are useful for nested accordions.\n                background === \"base\" && \"has-[.group-item:hover]:bg-neutral-base\",\n                background === \"light\" && \"has-[.group-item:hover]:bg-neutral-light\",\n                background === \"transparent\" && \"has-[.group-item:hover]:bg-transparent\",\n                accordionItemVariants({\n                    locked,\n                    background,\n                    variant: accordionProps.variant,\n                    border: accordionProps.border\n                }),\n                className\n            )}\n            defaultOpen={defaultOpen}\n            disabled={disabled}\n            onOpenChange={onOpenChange}\n            open={open}\n        >\n            <AccordionItemPropsProvider props={mergedProps}>\n                <AccordionTrigger />\n                <AccordionContent>{children}</AccordionContent>\n            </AccordionItemPropsProvider>\n        </AccordionRoot>\n    );\n};\n\nconst DecoratableAccordionItem = makeDecoratable(\"AccordionItem\", AccordionItemBase);\n\nconst AccordionItem = withStaticProps(DecoratableAccordionItem, {\n    Icon: AccordionItemIcon,\n    Action: AccordionItemAction\n});\n\nexport { AccordionItem, type AccordionItemProps, useAccordionItemProps };\n"],"names":["accordionItemVariants","cva","AccordionItemBase","props","providedProps","useAccordionItemProps","mergedProps","accordionProps","useAccordionProps","background","useAccordionBackground","className","defaultOpen","disabled","onOpenChange","open","children","locked","AccordionRoot","cn","AccordionItemPropsProvider","AccordionTrigger","AccordionContent","DecoratableAccordionItem","makeDecoratable","AccordionItem","withStaticProps","AccordionItemIcon","AccordionItemAction"],"mappings":";;;;;;;;;;AAyBA,MAAMA,wBAAwBC,IAAI,IAAI;IAClC,UAAU;QACN,QAAQ;YACJ,MAAM;QACV;QACA,YAAY;YACR,MAAM;YACN,OAAO;YACP,aAAa;QACjB;QACA,SAAS;YACL,WAAW;YACX,WAAW;QACf;QACA,QAAQ;YACJ,MAAM;YACN,QAAQ;QACZ;IACJ;IACA,kBAAkB;QACd;YACI,SAAS;YACT,QAAQ;YACR,WAAW;QACf;KACH;IACD,iBAAiB;QACb,SAAS;IACb;AACJ;AAEA,MAAMC,oBAAoB,CAACC;IACvB,MAAMC,gBAAgBC;IACtB,MAAMC,cAAc;QAAE,GAAGF,aAAa;QAAE,GAAGD,KAAK;IAAC;IACjD,MAAMI,iBAAiBC;IACvB,MAAMC,aAAaC,uBAAuB;IAE1C,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGX;IAEnF,OAAO,WAAP,GACI,sCAACY,eAAaA;QACV,WAAWC,GACP,8EACA,6DACA,kEAIA,YACA,sFACA,qDACA,kCAGAV,AAAe,WAAfA,cAAyB,2CACzBA,AAAe,YAAfA,cAA0B,4CAC1BA,AAAe,kBAAfA,cAAgC,0CAChCT,sBAAsB;YAClBiB;YACAR;YACA,SAASF,eAAe,OAAO;YAC/B,QAAQA,eAAe,MAAM;QACjC,IACAI;QAEJ,aAAaC;QACb,UAAUC;QACV,cAAcC;QACd,MAAMC;qBAEN,sCAACK,4BAA0BA;QAAC,OAAOd;qBAC/B,sCAACe,kBAAgBA,OAAAA,WAAAA,GACjB,sCAACC,kBAAgBA,MAAEN;AAInC;AAEA,MAAMO,2BAA2BC,gBAAgB,iBAAiBtB;AAElE,MAAMuB,gBAAgBC,gBAAgBH,0BAA0B;IAC5D,MAAMI;IACN,QAAQC;AACZ"}
+{"version":3,"file":"Accordion/components/AccordionItem.js","sources":["../../../src/Accordion/components/AccordionItem.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, cn, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { AccordionTrigger } from \"./AccordionTrigger.js\";\nimport { AccordionContent } from \"./AccordionContent.js\";\nimport { AccordionItemIcon } from \"./AccordionItemIcon.js\";\nimport { AccordionItemAction } from \"./AccordionItemAction.js\";\nimport { AccordionRoot, type AccordionRootProps } from \"~/Accordion/components/AccordionRoot.js\";\nimport { useAccordionBackground } from \"~/Accordion/components/AccordionBackgroundProvider.js\";\nimport { AccordionItemPropsProvider, useAccordionItemProps } from \"./AccordionItemPropsProvider.js\";\nimport { useAccordionProps } from \"../Accordion.js\";\n\ninterface AccordionItemProps extends Omit<AccordionRootProps, \"title\"> {\n    title: React.ReactNode;\n    subtitle?: React.ReactNode;\n    description?: React.ReactNode;\n    colorMark?: string;\n    icon?: React.ReactNode;\n    handle?: React.ReactNode;\n    interactive?: boolean;\n    locked?: boolean;\n    draggable?: boolean;\n    dragHandleRef?: (element: HTMLElement | null) => void;\n    actions?: React.ReactNode;\n    children: React.ReactNode;\n}\n\nconst accordionItemVariants = cva(\"\", {\n    variants: {\n        locked: {\n            true: \"pointer-events-none\"\n        },\n        background: {\n            base: \"bg-neutral-base\",\n            light: \"bg-neutral-light\",\n            transparent: \"bg-transparent\"\n        },\n        variant: {\n            underline: \"border-b-sm border-b-neutral-dimmed\",\n            container: \"rounded-lg\"\n        },\n        border: {\n            none: \"\",\n            accent: \"\"\n        }\n    },\n    compoundVariants: [\n        {\n            variant: \"container\",\n            border: \"accent\",\n            className: \"border-md border-neutral-dimmed-darker rounded-lg\"\n        }\n    ],\n    defaultVariants: {\n        variant: \"underline\"\n    }\n});\n\nconst AccordionItemBase = (props: AccordionItemProps) => {\n    const providedProps = useAccordionItemProps();\n    const mergedProps = { ...providedProps, ...props };\n    const accordionProps = useAccordionProps();\n    const background = useAccordionBackground(\"light\");\n\n    const { className, defaultOpen, disabled, onOpenChange, open, children, locked } = mergedProps;\n\n    return (\n        <AccordionRoot\n            className={cn(\n                \"group-item data-[state=open]:rounded-bl-lg data-[state=open]:rounded-br-lg\",\n                \"group-[.accordion-variant-container]/accordion:rounded-lg\",\n                \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\n                // Designer had a hover effect that was basically an overlay over the original\n                // bg color. We achieve that with a pseudo element. Dirty but it works well.\n                \"relative\",\n                \"before:absolute before:inset-0 before:pointer-events-none before:rounded-[inherit]\",\n                \"before:bg-neutral-dark/0 before:transition-colors\",\n                \"hover:before:bg-neutral-dark/2\",\n\n                // These are useful for nested accordions.\n                background === \"base\" && \"has-[.group-item:hover]:bg-neutral-base\",\n                background === \"light\" && \"has-[.group-item:hover]:bg-neutral-light\",\n                background === \"transparent\" && \"has-[.group-item:hover]:bg-transparent\",\n                accordionItemVariants({\n                    locked,\n                    background,\n                    variant: accordionProps.variant,\n                    border: accordionProps.border\n                }),\n                className\n            )}\n            defaultOpen={defaultOpen}\n            disabled={disabled}\n            onOpenChange={onOpenChange}\n            open={open}\n        >\n            <AccordionItemPropsProvider props={mergedProps}>\n                <AccordionTrigger />\n                <AccordionContent>{children}</AccordionContent>\n            </AccordionItemPropsProvider>\n        </AccordionRoot>\n    );\n};\n\nconst DecoratableAccordionItem = makeDecoratable(\"AccordionItem\", AccordionItemBase);\n\nconst AccordionItem = withStaticProps(DecoratableAccordionItem, {\n    Icon: AccordionItemIcon,\n    Action: AccordionItemAction\n});\n\nexport { AccordionItem, type AccordionItemProps, useAccordionItemProps };\n"],"names":["accordionItemVariants","cva","AccordionItemBase","props","providedProps","useAccordionItemProps","mergedProps","accordionProps","useAccordionProps","background","useAccordionBackground","className","defaultOpen","disabled","onOpenChange","open","children","locked","AccordionRoot","cn","AccordionItemPropsProvider","AccordionTrigger","AccordionContent","DecoratableAccordionItem","makeDecoratable","AccordionItem","withStaticProps","AccordionItemIcon","AccordionItemAction"],"mappings":";;;;;;;;;;AA0BA,MAAMA,wBAAwBC,IAAI,IAAI;IAClC,UAAU;QACN,QAAQ;YACJ,MAAM;QACV;QACA,YAAY;YACR,MAAM;YACN,OAAO;YACP,aAAa;QACjB;QACA,SAAS;YACL,WAAW;YACX,WAAW;QACf;QACA,QAAQ;YACJ,MAAM;YACN,QAAQ;QACZ;IACJ;IACA,kBAAkB;QACd;YACI,SAAS;YACT,QAAQ;YACR,WAAW;QACf;KACH;IACD,iBAAiB;QACb,SAAS;IACb;AACJ;AAEA,MAAMC,oBAAoB,CAACC;IACvB,MAAMC,gBAAgBC;IACtB,MAAMC,cAAc;QAAE,GAAGF,aAAa;QAAE,GAAGD,KAAK;IAAC;IACjD,MAAMI,iBAAiBC;IACvB,MAAMC,aAAaC,uBAAuB;IAE1C,MAAM,EAAEC,SAAS,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,MAAM,EAAE,GAAGX;IAEnF,OAAO,WAAP,GACI,sCAACY,eAAaA;QACV,WAAWC,GACP,8EACA,6DACA,kEAIA,YACA,sFACA,qDACA,kCAGAV,AAAe,WAAfA,cAAyB,2CACzBA,AAAe,YAAfA,cAA0B,4CAC1BA,AAAe,kBAAfA,cAAgC,0CAChCT,sBAAsB;YAClBiB;YACAR;YACA,SAASF,eAAe,OAAO;YAC/B,QAAQA,eAAe,MAAM;QACjC,IACAI;QAEJ,aAAaC;QACb,UAAUC;QACV,cAAcC;QACd,MAAMC;qBAEN,sCAACK,4BAA0BA;QAAC,OAAOd;qBAC/B,sCAACe,kBAAgBA,OAAAA,WAAAA,GACjB,sCAACC,kBAAgBA,MAAEN;AAInC;AAEA,MAAMO,2BAA2BC,gBAAgB,iBAAiBtB;AAElE,MAAMuB,gBAAgBC,gBAAgBH,0BAA0B;IAC5D,MAAMI;IACN,QAAQC;AACZ"}

package/Accordion/components/AccordionItemDragHandle.d.ts

@@ -3,6 +3,7 @@ import { type IconButtonProps } from "../../Button/index.js";
 interface AccordionItemDragHandleProps extends Omit<IconButtonProps, "icon"> {
     icon?: React.ReactElement;
     label?: string;
+    dragHandleRef?: (element: HTMLElement | null) => void;
 }
-declare const AccordionItemDragHandle: ({ onClick, className, ...props }: AccordionItemDragHandleProps) => React.JSX.Element;
+declare const AccordionItemDragHandle: ({ onClick, className, dragHandleRef, ...props }: AccordionItemDragHandleProps) => React.JSX.Element;
 export { AccordionItemDragHandle, type AccordionItemDragHandleProps };

package/Accordion/components/AccordionItemDragHandle.js

@@ -3,7 +3,7 @@ import { Icon } from "../../Icon/index.js";
 import { IconButton } from "../../Button/index.js";
 import { cn } from "../../utils.js";
 import * as __rspack_external_react from "react";
-const AccordionItemDragHandle = ({ onClick, className, ...props })=>{
+const AccordionItemDragHandle = ({ onClick, className, dragHandleRef, ...props })=>{
     const onClickCallback = __rspack_external_react.useCallback((e)=>{
         e.stopPropagation();
         if (onClick) onClick(e);
@@ -11,6 +11,7 @@ const AccordionItemDragHandle = ({ onClick, className, ...props })=>{
         onClick
     ]);
     return /*#__PURE__*/ __rspack_external_react.createElement("span", {
+        ref: dragHandleRef,
         className: cn([
             "absolute top-1/2 -left-sm -translate-y-sm",
             "invisible group-hover/trigger:visible"

package/Accordion/components/AccordionItemDragHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion/components/AccordionItemDragHandle.js","sources":["../../../src/Accordion/components/AccordionItemDragHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton, type IconButtonProps } from \"~/Button/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface AccordionItemDragHandleProps extends Omit<IconButtonProps, \"icon\"> {\n    icon?: React.ReactElement;\n    label?: string;\n}\n\nconst AccordionItemDragHandle = ({\n    onClick,\n    className,\n    ...props\n}: AccordionItemDragHandleProps) => {\n    // We need to stop the event propagation to prevent the accordion from opening/closing when the handle is clicked.\n    const onClickCallback = React.useCallback(\n        (e: React.MouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n\n            if (onClick) {\n                onClick(e);\n            }\n        },\n        [onClick]\n    );\n\n    return (\n        <span\n            className={cn(\n                [\n                    \"absolute top-1/2 -left-sm -translate-y-sm\",\n                    \"invisible group-hover/trigger:visible\"\n                ],\n                className\n            )}\n        >\n            <IconButton\n                {...props}\n                onClick={onClickCallback}\n                size={\"xs\"}\n                iconSize={\"default\"}\n                variant={\"secondary\"}\n                className={\"cursor-grab\"}\n                icon={\n                    <Icon\n                        size={\"sm\"}\n                        color={\"neutral-strong\"}\n                        icon={<DragHandleIcon />}\n                        label={\"Drag handle\"}\n                    />\n                }\n            />\n        </span>\n    );\n};\n\nexport { AccordionItemDragHandle, type AccordionItemDragHandleProps };\n"],"names":["AccordionItemDragHandle","onClick","className","props","onClickCallback","React","e","cn","IconButton","Icon","DragHandleIcon"],"mappings":";;;;;AAWA,MAAMA,0BAA0B,CAAC,EAC7BC,OAAO,EACPC,SAAS,EACT,GAAGC,OACwB;IAE3B,MAAMC,kBAAkBC,wBAAAA,WAAiB,CACrC,CAACC;QACGA,EAAE,eAAe;QAEjB,IAAIL,SACAA,QAAQK;IAEhB,GACA;QAACL;KAAQ;IAGb,OAAO,WAAP,GACI,sCAAC;QACG,WAAWM,GACP;YACI;YACA;SACH,EACDL;qBAGJ,sCAACM,YAAUA;QACN,GAAGL,KAAK;QACT,SAASC;QACT,MAAM;QACN,UAAU;QACV,SAAS;QACT,WAAW;QACX,oBACI,sCAACK,MAAIA;YACD,MAAM;YACN,OAAO;YACP,oBAAM,sCAACC,gBAAcA;YACrB,OAAO;;;AAM/B"}
+{"version":3,"file":"Accordion/components/AccordionItemDragHandle.js","sources":["../../../src/Accordion/components/AccordionItemDragHandle.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as DragHandleIcon } from \"@webiny/icons/drag_indicator.svg\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { IconButton, type IconButtonProps } from \"~/Button/index.js\";\nimport { cn } from \"~/utils.js\";\n\ninterface AccordionItemDragHandleProps extends Omit<IconButtonProps, \"icon\"> {\n    icon?: React.ReactElement;\n    label?: string;\n    dragHandleRef?: (element: HTMLElement | null) => void;\n}\n\nconst AccordionItemDragHandle = ({\n    onClick,\n    className,\n    dragHandleRef,\n    ...props\n}: AccordionItemDragHandleProps) => {\n    // We need to stop the event propagation to prevent the accordion from opening/closing when the handle is clicked.\n    const onClickCallback = React.useCallback(\n        (e: React.MouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n\n            if (onClick) {\n                onClick(e);\n            }\n        },\n        [onClick]\n    );\n\n    return (\n        <span\n            ref={dragHandleRef as React.Ref<HTMLSpanElement>}\n            className={cn(\n                [\n                    \"absolute top-1/2 -left-sm -translate-y-sm\",\n                    \"invisible group-hover/trigger:visible\"\n                ],\n                className\n            )}\n        >\n            <IconButton\n                {...props}\n                onClick={onClickCallback}\n                size={\"xs\"}\n                iconSize={\"default\"}\n                variant={\"secondary\"}\n                className={\"cursor-grab\"}\n                icon={\n                    <Icon\n                        size={\"sm\"}\n                        color={\"neutral-strong\"}\n                        icon={<DragHandleIcon />}\n                        label={\"Drag handle\"}\n                    />\n                }\n            />\n        </span>\n    );\n};\n\nexport { AccordionItemDragHandle, type AccordionItemDragHandleProps };\n"],"names":["AccordionItemDragHandle","onClick","className","dragHandleRef","props","onClickCallback","React","e","cn","IconButton","Icon","DragHandleIcon"],"mappings":";;;;;AAYA,MAAMA,0BAA0B,CAAC,EAC7BC,OAAO,EACPC,SAAS,EACTC,aAAa,EACb,GAAGC,OACwB;IAE3B,MAAMC,kBAAkBC,wBAAAA,WAAiB,CACrC,CAACC;QACGA,EAAE,eAAe;QAEjB,IAAIN,SACAA,QAAQM;IAEhB,GACA;QAACN;KAAQ;IAGb,OAAO,WAAP,GACI,sCAAC;QACG,KAAKE;QACL,WAAWK,GACP;YACI;YACA;SACH,EACDN;qBAGJ,sCAACO,YAAUA;QACN,GAAGL,KAAK;QACT,SAASC;QACT,MAAM;QACN,UAAU;QACV,SAAS;QACT,WAAW;QACX,oBACI,sCAACK,MAAIA;YACD,MAAM;YACN,OAAO;YACP,oBAAM,sCAACC,gBAAcA;YACrB,OAAO;;;AAM/B"}

package/Accordion/components/AccordionTrigger.js

@@ -17,7 +17,7 @@ const OpenCloseIndicator = ()=>/*#__PURE__*/ __rspack_external_react.createEleme
         icon: /*#__PURE__*/ __rspack_external_react.createElement(ReactComponent, null)
     });
 const AccordionTrigger = ()=>{
-    const { title, subtitle, description, colorMark, actions, icon, interactive = true, locked, draggable } = useAccordionItemProps();
+    const { title, subtitle, description, colorMark, actions, icon, interactive = true, locked, draggable, dragHandleRef } = useAccordionItemProps();
     const accordionProps = useAccordionProps();
     const openClosedIndicatorPosition = accordionProps.openClosedIndicatorPosition || "right";
     const divAsButtonProps = __rspack_external_react.useMemo(()=>({
@@ -38,7 +38,9 @@ const AccordionTrigger = ()=>{
     }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
         ...divAsButtonProps,
         className: cn("group/trigger w-full flex items-center relative min-h-[62px]", "focus-visible:outline-none focus-visible:border-none focus-visible:ring-sm focus-visible:ring-primary-dimmed", "group-[.accordion-variant-container]:rounded-lg", "[&[data-state=open]_[data-role=open-close-indicator]]:rotate-180 border-l-accent", interactive ? "cursor-pointer" : "cursor-default")
-    }, draggable ? /*#__PURE__*/ __rspack_external_react.createElement(AccordionItemDragHandle, null) : null, colorMark && /*#__PURE__*/ __rspack_external_react.createElement("div", {
+    }, draggable ? /*#__PURE__*/ __rspack_external_react.createElement(AccordionItemDragHandle, {
+        dragHandleRef: dragHandleRef
+    }) : null, colorMark && /*#__PURE__*/ __rspack_external_react.createElement("div", {
         style: {
             backgroundColor: colorMark
         },

package/Accordion/components/AccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion/components/AccordionTrigger.js","sources":["../../../src/Accordion/components/AccordionTrigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as KeyboardArrowDownIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\nimport { useAccordionProps } from \"./AccordionPropsProvider.js\";\nimport { AccordionItemAction } from \"./AccordionItemAction.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { AccordionItemDragHandle } from \"~/Accordion/components/AccordionItemDragHandle.js\";\n\nconst OpenCloseIndicator = () => {\n    return (\n        <Icon\n            size={\"md\"}\n            className={\"transition\"}\n            color={\"neutral-strong\"}\n            data-role={\"open-close-indicator\"}\n            label={\"Open/close indicator\"}\n            icon={<KeyboardArrowDownIcon />}\n        />\n    );\n};\n\nconst AccordionTrigger = () => {\n    const {\n        title,\n        subtitle,\n        description,\n        colorMark,\n        actions,\n        icon,\n        interactive = true,\n        locked,\n        draggable\n    } = useAccordionItemProps();\n\n    const accordionProps = useAccordionProps();\n    const openClosedIndicatorPosition = accordionProps.openClosedIndicatorPosition || \"right\";\n    // The following three attributes are required for the trigger to act as a button.\n    // We can't use the default button element here because the content of the trigger\n    // can also contain one or more buttons.\n    const divAsButtonProps = React.useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {\n        return {\n            role: \"button\",\n            tabIndex: interactive ? 0 : -1, // Disable keyboard interaction if not interactive\n            onKeyDown: e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    e.currentTarget.click();\n                }\n            }\n        };\n    }, [interactive]);\n\n    return (\n        <CollapsiblePrimitive.Trigger\n            asChild\n            onClick={e => !interactive && e.preventDefault()} // Prevent clicking if not interactive\n        >\n            <div\n                {...divAsButtonProps}\n                className={cn(\n                    \"group/trigger w-full flex items-center relative min-h-[62px]\",\n                    \"focus-visible:outline-none focus-visible:border-none focus-visible:ring-sm focus-visible:ring-primary-dimmed\",\n                    \"group-[.accordion-variant-container]:rounded-lg\",\n                    \"[&[data-state=open]_[data-role=open-close-indicator]]:rotate-180 border-l-accent\",\n                    interactive ? \"cursor-pointer\" : \"cursor-default\"\n                )}\n            >\n                {draggable ? <AccordionItemDragHandle /> : null}\n                {colorMark && (\n                    <div\n                        style={{ backgroundColor: colorMark }}\n                        className={\"block w-[4px] h-[48px] rounded-sm ml-sm\"}\n                    />\n                )}\n                <div className={\"w-full flex justify-between items-center px-md py-sm-extra\"}>\n                    {/* Left side: icon or indicator based on position */}\n                    {openClosedIndicatorPosition === \"left\" ? (\n                        <>\n                            {interactive && !locked ? (\n                                <div className={\"mr-md\"}>\n                                    <OpenCloseIndicator />\n                                </div>\n                            ) : null}\n                        </>\n                    ) : (\n                        <>{icon ? <div className={\"mr-md\"}>{icon}</div> : null}</>\n                    )}\n\n                    {/* Center: title, subtitle, description */}\n                    <div className={\"flex flex-col gap-xxs flex-grow text-left\"}>\n                        <div className={\"flex gap-xs\"}>\n                            <div className={\"text-md font-semibold webiny_accordion-item-title\"}>\n                                {title}\n                            </div>\n                            {subtitle && (\n                                <div className={\"text-neutral-muted text-md\"}>{subtitle}</div>\n                            )}\n                        </div>\n\n                        <div className={\"text-sm text-neutral-strong\"}>{description}</div>\n                    </div>\n\n                    {/* Right side: actions and indicator (or locked icon) */}\n                    {openClosedIndicatorPosition === \"right\" ? (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>\n                                    {actions}\n                                    {/* No need to show the separator if there are no actions and the item is not interactive. */}\n                                    {actions && interactive ? (\n                                        <AccordionItemAction.Separator />\n                                    ) : null}\n                                    {interactive ? <OpenCloseIndicator /> : null}\n                                </>\n                            )}\n                        </div>\n                    ) : (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>{actions}</>\n                            )}\n                        </div>\n                    )}\n                </div>\n            </div>\n        </CollapsiblePrimitive.Trigger>\n    );\n};\n\nexport { AccordionTrigger };\n"],"names":["OpenCloseIndicator","Icon","KeyboardArrowDownIcon","AccordionTrigger","title","subtitle","description","colorMark","actions","icon","interactive","locked","draggable","useAccordionItemProps","accordionProps","useAccordionProps","openClosedIndicatorPosition","divAsButtonProps","React","e","CollapsiblePrimitive","cn","AccordionItemDragHandle","LockIcon","AccordionItemAction"],"mappings":";;;;;;;;;;AAWA,MAAMA,qBAAqB,IAChB,WAAP,GACI,sCAACC,MAAIA;QACD,MAAM;QACN,WAAW;QACX,OAAO;QACP,aAAW;QACX,OAAO;QACP,oBAAM,sCAACC,gBAAqBA;;AAKxC,MAAMC,mBAAmB;IACrB,MAAM,EACFC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,cAAc,IAAI,EAClBC,MAAM,EACNC,SAAS,EACZ,GAAGC;IAEJ,MAAMC,iBAAiBC;IACvB,MAAMC,8BAA8BF,eAAe,2BAA2B,IAAI;IAIlF,MAAMG,mBAAmBC,wBAAAA,OAAa,CAAuC,IAClE;YACH,MAAM;YACN,UAAUR,cAAc,IAAI;YAC5B,WAAWS,CAAAA;gBACP,IAAIA,AAAU,YAAVA,EAAE,GAAG,IAAgBA,AAAU,QAAVA,EAAE,GAAG,EAAU;oBACpCA,EAAE,cAAc;oBAChBA,EAAE,aAAa,CAAC,KAAK;gBACzB;YACJ;QACJ,IACD;QAACT;KAAY;IAEhB,OAAO,WAAP,GACI,sCAACU,YAAAA,OAA4B;QACzB;QACA,SAASD,CAAAA,IAAK,CAACT,eAAeS,EAAE,cAAc;qBAE9C,sCAAC;QACI,GAAGF,gBAAgB;QACpB,WAAWI,GACP,gEACA,gHACA,mDACA,oFACAX,cAAc,mBAAmB;OAGpCE,YAAY,WAAZA,GAAY,sCAACU,yBAAuBA,QAAM,MAC1Cf,aAAa,WAAbA,GACG,sCAAC;QACG,OAAO;YAAE,iBAAiBA;QAAU;QACpC,WAAW;sBAGnB,sCAAC;QAAI,WAAW;OAEXS,AAAgC,WAAhCA,8BAAyC,WAAT,GAC7B,8EACKN,eAAe,CAACC,SAAS,WAATA,GACb,sCAAC;QAAI,WAAW;qBACZ,sCAACX,oBAAkBA,SAEvB,sBAGR,8EAAGS,OAAO,WAAPA,GAAO,sCAAC;QAAI,WAAW;OAAUA,QAAc,qBAItD,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;OACXL,QAEJC,YAAY,WAAZA,GACG,sCAAC;QAAI,WAAW;OAA+BA,YAAAA,WAAAA,GAIvD,sCAAC;QAAI,WAAW;OAAgCC,eAInDU,AAAgC,YAAhCA,8BAA0C,WAAV,GAC7B,sCAAC;QAAI,WAAW;OACXL,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACsB,yBAAQA;QAAK,OAAO;uBAEhD,8EACKf,SAEAA,WAAWE,cAAc,WAAdA,GACR,sCAACc,oBAAoB,SAAS,UAC9B,MACHd,cAAc,WAAdA,GAAc,sCAACV,oBAAkBA,QAAM,uBAKpD,sCAAC;QAAI,WAAW;OACXW,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACsB,yBAAQA;QAAK,OAAO;uBAEhD,8EAAGf;AAQnC"}
+{"version":3,"file":"Accordion/components/AccordionTrigger.js","sources":["../../../src/Accordion/components/AccordionTrigger.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as KeyboardArrowDownIcon } from \"@webiny/icons/keyboard_arrow_down.svg\";\nimport { ReactComponent as LockIcon } from \"@webiny/icons/lock.svg\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport { cn } from \"~/utils.js\";\nimport { useAccordionItemProps } from \"./AccordionItem.js\";\nimport { useAccordionProps } from \"./AccordionPropsProvider.js\";\nimport { AccordionItemAction } from \"./AccordionItemAction.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { AccordionItemDragHandle } from \"~/Accordion/components/AccordionItemDragHandle.js\";\n\nconst OpenCloseIndicator = () => {\n    return (\n        <Icon\n            size={\"md\"}\n            className={\"transition\"}\n            color={\"neutral-strong\"}\n            data-role={\"open-close-indicator\"}\n            label={\"Open/close indicator\"}\n            icon={<KeyboardArrowDownIcon />}\n        />\n    );\n};\n\nconst AccordionTrigger = () => {\n    const {\n        title,\n        subtitle,\n        description,\n        colorMark,\n        actions,\n        icon,\n        interactive = true,\n        locked,\n        draggable,\n        dragHandleRef\n    } = useAccordionItemProps();\n\n    const accordionProps = useAccordionProps();\n    const openClosedIndicatorPosition = accordionProps.openClosedIndicatorPosition || \"right\";\n    // The following three attributes are required for the trigger to act as a button.\n    // We can't use the default button element here because the content of the trigger\n    // can also contain one or more buttons.\n    const divAsButtonProps = React.useMemo<React.HTMLAttributes<HTMLDivElement>>(() => {\n        return {\n            role: \"button\",\n            tabIndex: interactive ? 0 : -1, // Disable keyboard interaction if not interactive\n            onKeyDown: e => {\n                if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    e.currentTarget.click();\n                }\n            }\n        };\n    }, [interactive]);\n\n    return (\n        <CollapsiblePrimitive.Trigger\n            asChild\n            onClick={e => !interactive && e.preventDefault()} // Prevent clicking if not interactive\n        >\n            <div\n                {...divAsButtonProps}\n                className={cn(\n                    \"group/trigger w-full flex items-center relative min-h-[62px]\",\n                    \"focus-visible:outline-none focus-visible:border-none focus-visible:ring-sm focus-visible:ring-primary-dimmed\",\n                    \"group-[.accordion-variant-container]:rounded-lg\",\n                    \"[&[data-state=open]_[data-role=open-close-indicator]]:rotate-180 border-l-accent\",\n                    interactive ? \"cursor-pointer\" : \"cursor-default\"\n                )}\n            >\n                {draggable ? <AccordionItemDragHandle dragHandleRef={dragHandleRef} /> : null}\n                {colorMark && (\n                    <div\n                        style={{ backgroundColor: colorMark }}\n                        className={\"block w-[4px] h-[48px] rounded-sm ml-sm\"}\n                    />\n                )}\n                <div className={\"w-full flex justify-between items-center px-md py-sm-extra\"}>\n                    {/* Left side: icon or indicator based on position */}\n                    {openClosedIndicatorPosition === \"left\" ? (\n                        <>\n                            {interactive && !locked ? (\n                                <div className={\"mr-md\"}>\n                                    <OpenCloseIndicator />\n                                </div>\n                            ) : null}\n                        </>\n                    ) : (\n                        <>{icon ? <div className={\"mr-md\"}>{icon}</div> : null}</>\n                    )}\n\n                    {/* Center: title, subtitle, description */}\n                    <div className={\"flex flex-col gap-xxs flex-grow text-left\"}>\n                        <div className={\"flex gap-xs\"}>\n                            <div className={\"text-md font-semibold webiny_accordion-item-title\"}>\n                                {title}\n                            </div>\n                            {subtitle && (\n                                <div className={\"text-neutral-muted text-md\"}>{subtitle}</div>\n                            )}\n                        </div>\n\n                        <div className={\"text-sm text-neutral-strong\"}>{description}</div>\n                    </div>\n\n                    {/* Right side: actions and indicator (or locked icon) */}\n                    {openClosedIndicatorPosition === \"right\" ? (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>\n                                    {actions}\n                                    {/* No need to show the separator if there are no actions and the item is not interactive. */}\n                                    {actions && interactive ? (\n                                        <AccordionItemAction.Separator />\n                                    ) : null}\n                                    {interactive ? <OpenCloseIndicator /> : null}\n                                </>\n                            )}\n                        </div>\n                    ) : (\n                        <div className={\"flex gap-xs items-center\"}>\n                            {locked ? (\n                                <Icon label=\"Locked\" icon={<LockIcon />} color={\"neutral-light\"} />\n                            ) : (\n                                <>{actions}</>\n                            )}\n                        </div>\n                    )}\n                </div>\n            </div>\n        </CollapsiblePrimitive.Trigger>\n    );\n};\n\nexport { AccordionTrigger };\n"],"names":["OpenCloseIndicator","Icon","KeyboardArrowDownIcon","AccordionTrigger","title","subtitle","description","colorMark","actions","icon","interactive","locked","draggable","dragHandleRef","useAccordionItemProps","accordionProps","useAccordionProps","openClosedIndicatorPosition","divAsButtonProps","React","e","CollapsiblePrimitive","cn","AccordionItemDragHandle","LockIcon","AccordionItemAction"],"mappings":";;;;;;;;;;AAWA,MAAMA,qBAAqB,IAChB,WAAP,GACI,sCAACC,MAAIA;QACD,MAAM;QACN,WAAW;QACX,OAAO;QACP,aAAW;QACX,OAAO;QACP,oBAAM,sCAACC,gBAAqBA;;AAKxC,MAAMC,mBAAmB;IACrB,MAAM,EACFC,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,IAAI,EACJC,cAAc,IAAI,EAClBC,MAAM,EACNC,SAAS,EACTC,aAAa,EAChB,GAAGC;IAEJ,MAAMC,iBAAiBC;IACvB,MAAMC,8BAA8BF,eAAe,2BAA2B,IAAI;IAIlF,MAAMG,mBAAmBC,wBAAAA,OAAa,CAAuC,IAClE;YACH,MAAM;YACN,UAAUT,cAAc,IAAI;YAC5B,WAAWU,CAAAA;gBACP,IAAIA,AAAU,YAAVA,EAAE,GAAG,IAAgBA,AAAU,QAAVA,EAAE,GAAG,EAAU;oBACpCA,EAAE,cAAc;oBAChBA,EAAE,aAAa,CAAC,KAAK;gBACzB;YACJ;QACJ,IACD;QAACV;KAAY;IAEhB,OAAO,WAAP,GACI,sCAACW,YAAAA,OAA4B;QACzB;QACA,SAASD,CAAAA,IAAK,CAACV,eAAeU,EAAE,cAAc;qBAE9C,sCAAC;QACI,GAAGF,gBAAgB;QACpB,WAAWI,GACP,gEACA,gHACA,mDACA,oFACAZ,cAAc,mBAAmB;OAGpCE,YAAY,WAAZA,GAAY,sCAACW,yBAAuBA;QAAC,eAAeV;SAAoB,MACxEN,aAAa,WAAbA,GACG,sCAAC;QACG,OAAO;YAAE,iBAAiBA;QAAU;QACpC,WAAW;sBAGnB,sCAAC;QAAI,WAAW;OAEXU,AAAgC,WAAhCA,8BAAyC,WAAT,GAC7B,8EACKP,eAAe,CAACC,SAAS,WAATA,GACb,sCAAC;QAAI,WAAW;qBACZ,sCAACX,oBAAkBA,SAEvB,sBAGR,8EAAGS,OAAO,WAAPA,GAAO,sCAAC;QAAI,WAAW;OAAUA,QAAc,qBAItD,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;qBACZ,sCAAC;QAAI,WAAW;OACXL,QAEJC,YAAY,WAAZA,GACG,sCAAC;QAAI,WAAW;OAA+BA,YAAAA,WAAAA,GAIvD,sCAAC;QAAI,WAAW;OAAgCC,eAInDW,AAAgC,YAAhCA,8BAA0C,WAAV,GAC7B,sCAAC;QAAI,WAAW;OACXN,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACuB,yBAAQA;QAAK,OAAO;uBAEhD,8EACKhB,SAEAA,WAAWE,cAAc,WAAdA,GACR,sCAACe,oBAAoB,SAAS,UAC9B,MACHf,cAAc,WAAdA,GAAc,sCAACV,oBAAkBA,QAAM,uBAKpD,sCAAC;QAAI,WAAW;OACXW,SAAS,WAATA,GACG,sCAACV,MAAIA;QAAC,OAAM;QAAS,oBAAM,sCAACuB,yBAAQA;QAAK,OAAO;uBAEhD,8EAAGhB;AAQnC"}

package/BetaBadge/BetaBadge.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface BetaBadgeProps {
+    text?: React.ReactNode;
+}
+declare const BetaBadge: ({ text }: BetaBadgeProps) => React.JSX.Element;
+export { BetaBadge, type BetaBadgeProps };

package/BetaBadge/BetaBadge.js

@@ -0,0 +1,7 @@
+import react from "react";
+const BetaBadge = ({ text = "beta" })=>/*#__PURE__*/ react.createElement("span", {
+        className: "inline-flex items-center rounded-sm bg-primary/50 px-xs text-[10px] font-semibold text-neutral-light leading-none h-md shrink-0"
+    }, text);
+export { BetaBadge };
+
+//# sourceMappingURL=BetaBadge.js.map

package/BetaBadge/BetaBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BetaBadge/BetaBadge.js","sources":["../../src/BetaBadge/BetaBadge.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface BetaBadgeProps {\n    text?: React.ReactNode;\n}\n\nconst BetaBadge = ({ text = \"beta\" }: BetaBadgeProps) => {\n    return (\n        <span\n            className={\n                \"inline-flex items-center rounded-sm bg-primary/50 px-xs text-[10px] font-semibold text-neutral-light leading-none h-md shrink-0\"\n            }\n        >\n            {text}\n        </span>\n    );\n};\n\nexport { BetaBadge, type BetaBadgeProps };\n"],"names":["BetaBadge","text"],"mappings":";AAMA,MAAMA,YAAY,CAAC,EAAEC,OAAO,MAAM,EAAkB,GACzC,WAAP,GACI,oBAAC;QACG,WACI;OAGHA"}

package/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+export interface BreadcrumbsItem {
+    /**
+     * Text label of the breadcrumb. Omitted for the leading home item, which is icon-only.
+     */
+    label?: string;
+    /**
+     * Leading icon. Used by the home item; other items typically render text only. Sized and
+     * colored by the breadcrumb — pass the raw icon component (e.g. `<HomeIcon />`).
+     */
+    icon?: React.ReactNode;
+    /**
+     * Full, untruncated text used as the item's `title` (native tooltip). Defaults to `label`.
+     */
+    title?: string;
+    /**
+     * Navigates when the item is activated. Omitted (or on the current item) renders a
+     * non-interactive item.
+     */
+    onClick?: () => void;
+    /**
+     * Marks the current location — the last item in the trail. Rendered with stronger text
+     * and never interactive, per the design system's breadcrumb guidelines.
+     */
+    current?: boolean;
+}
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    items: BreadcrumbsItem[];
+}
+declare const BreadcrumbsBase: ({ items, className, ...props }: BreadcrumbsProps) => React.JSX.Element | null;
+declare const Breadcrumbs: typeof BreadcrumbsBase & {
+    original: typeof BreadcrumbsBase;
+    originalName: string;
+    displayName: string;
+} & {
+    original: typeof BreadcrumbsBase & {
+        original: typeof BreadcrumbsBase;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BreadcrumbsBase & {
+        original: typeof BreadcrumbsBase;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+/**
+ * Convenience factory for the leading, icon-only home entry.
+ */
+export declare const createHomeBreadcrumbItem: (onClick?: () => void) => BreadcrumbsItem;
+export { Breadcrumbs };

package/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,66 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/home.svg";
+import { ReactComponent as keyboard_arrow_right_svg_ReactComponent } from "@webiny/icons/keyboard_arrow_right.svg";
+import { cn, makeDecoratable } from "../utils.js";
+const itemTextClassName = "block max-w-[150px] truncate text-sm leading-none tracking-normal whitespace-nowrap";
+const glyphClassName = "size-md shrink-0 fill-current";
+const renderGlyph = (icon)=>{
+    if (!/*#__PURE__*/ react.isValidElement(icon)) return icon;
+    const element = icon;
+    return /*#__PURE__*/ react.cloneElement(element, {
+        className: cn(glyphClassName, element.props.className)
+    });
+};
+const BreadcrumbItem = ({ item })=>{
+    const interactive = Boolean(item.onClick) && !item.current;
+    const title = item.title ?? item.label;
+    const content = /*#__PURE__*/ react.createElement("span", {
+        className: "flex items-center gap-xs"
+    }, item.icon ? renderGlyph(item.icon) : null, item.label ? /*#__PURE__*/ react.createElement("span", {
+        className: itemTextClassName
+    }, item.label) : null);
+    if (!interactive) return /*#__PURE__*/ react.createElement("span", {
+        "aria-current": item.current ? "page" : void 0,
+        title: title,
+        className: cn("flex items-center rounded-sm px-xs py-xxs", item.current ? "text-neutral-primary" : "text-neutral-muted")
+    }, content);
+    return /*#__PURE__*/ react.createElement("button", {
+        type: "button",
+        onClick: item.onClick,
+        title: title,
+        className: cn("flex items-center rounded-sm px-xs py-xxs", "text-neutral-muted transition-colors", "hover:bg-neutral-dimmed hover:text-neutral-primary", "focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed")
+    }, content);
+};
+const BreadcrumbSeparator = ()=>/*#__PURE__*/ react.createElement("span", {
+        "aria-hidden": "true",
+        className: "flex items-center text-neutral-muted"
+    }, /*#__PURE__*/ react.createElement(keyboard_arrow_right_svg_ReactComponent, {
+        className: glyphClassName
+    }));
+const BreadcrumbsBase = ({ items, className, ...props })=>{
+    if (0 === items.length) return null;
+    return /*#__PURE__*/ react.createElement("nav", {
+        "aria-label": "Breadcrumb",
+        className: cn("flex items-center", className),
+        ...props
+    }, /*#__PURE__*/ react.createElement("ol", {
+        className: "flex items-center gap-none"
+    }, items.map((item, index)=>{
+        const key = `${item.label ?? "home"}-${index}`;
+        return /*#__PURE__*/ react.createElement("li", {
+            key: key,
+            className: "flex items-center"
+        }, index > 0 ? /*#__PURE__*/ react.createElement(BreadcrumbSeparator, null) : null, /*#__PURE__*/ react.createElement(BreadcrumbItem, {
+            item: item
+        }));
+    })));
+};
+const Breadcrumbs = makeDecoratable("Breadcrumbs", BreadcrumbsBase);
+const createHomeBreadcrumbItem = (onClick)=>({
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        title: "Home",
+        onClick
+    });
+export { Breadcrumbs, createHomeBreadcrumbItem };
+
+//# sourceMappingURL=Breadcrumbs.js.map

package/Breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs/Breadcrumbs.js","sources":["../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React from \"react\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { ReactComponent as SeparatorIcon } from \"@webiny/icons/keyboard_arrow_right.svg\";\nimport { cn } from \"~/utils.js\";\nimport { makeDecoratable } from \"~/utils.js\";\n\nexport interface BreadcrumbsItem {\n    /**\n     * Text label of the breadcrumb. Omitted for the leading home item, which is icon-only.\n     */\n    label?: string;\n    /**\n     * Leading icon. Used by the home item; other items typically render text only. Sized and\n     * colored by the breadcrumb — pass the raw icon component (e.g. `<HomeIcon />`).\n     */\n    icon?: React.ReactNode;\n    /**\n     * Full, untruncated text used as the item's `title` (native tooltip). Defaults to `label`.\n     */\n    title?: string;\n    /**\n     * Navigates when the item is activated. Omitted (or on the current item) renders a\n     * non-interactive item.\n     */\n    onClick?: () => void;\n    /**\n     * Marks the current location — the last item in the trail. Rendered with stronger text\n     * and never interactive, per the design system's breadcrumb guidelines.\n     */\n    current?: boolean;\n}\n\nexport interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {\n    items: BreadcrumbsItem[];\n}\n\nconst itemTextClassName =\n    \"block max-w-[150px] truncate text-sm leading-none tracking-normal whitespace-nowrap\";\n\n// The material glyphs default their `fill` to `currentColor`, so the surrounding text color\n// (muted / primary / hover) drives the icon color too.\nconst glyphClassName = \"size-md shrink-0 fill-current\";\n\nconst renderGlyph = (icon: React.ReactNode) => {\n    if (!React.isValidElement(icon)) {\n        return icon;\n    }\n    const element = icon as React.ReactElement<{ className?: string }>;\n    return React.cloneElement(element, {\n        className: cn(glyphClassName, element.props.className)\n    });\n};\n\nconst BreadcrumbItem = ({ item }: { item: BreadcrumbsItem }) => {\n    const interactive = Boolean(item.onClick) && !item.current;\n    const title = item.title ?? item.label;\n\n    const content = (\n        <span className=\"flex items-center gap-xs\">\n            {item.icon ? renderGlyph(item.icon) : null}\n            {item.label ? <span className={itemTextClassName}>{item.label}</span> : null}\n        </span>\n    );\n\n    // The current (active) item and any item without an action render as plain text.\n    if (!interactive) {\n        return (\n            <span\n                aria-current={item.current ? \"page\" : undefined}\n                title={title}\n                className={cn(\n                    \"flex items-center rounded-sm px-xs py-xxs\",\n                    item.current ? \"text-neutral-primary\" : \"text-neutral-muted\"\n                )}\n            >\n                {content}\n            </span>\n        );\n    }\n\n    return (\n        <button\n            type=\"button\"\n            onClick={item.onClick}\n            title={title}\n            className={cn(\n                \"flex items-center rounded-sm px-xs py-xxs\",\n                \"text-neutral-muted transition-colors\",\n                \"hover:bg-neutral-dimmed hover:text-neutral-primary\",\n                \"focus-visible:outline-none focus-visible:ring-md focus-visible:ring-primary-dimmed\"\n            )}\n        >\n            {content}\n        </button>\n    );\n};\n\nconst BreadcrumbSeparator = () => {\n    return (\n        <span aria-hidden=\"true\" className=\"flex items-center text-neutral-muted\">\n            <SeparatorIcon className={glyphClassName} />\n        </span>\n    );\n};\n\nconst BreadcrumbsBase = ({ items, className, ...props }: BreadcrumbsProps) => {\n    if (items.length === 0) {\n        return null;\n    }\n\n    return (\n        <nav aria-label=\"Breadcrumb\" className={cn(\"flex items-center\", className)} {...props}>\n            <ol className=\"flex items-center gap-none\">\n                {items.map((item, index) => {\n                    // A stable-enough key: labels are unique within a trail; index breaks ties.\n                    const key = `${item.label ?? \"home\"}-${index}`;\n                    return (\n                        <li key={key} className=\"flex items-center\">\n                            {index > 0 ? <BreadcrumbSeparator /> : null}\n                            <BreadcrumbItem item={item} />\n                        </li>\n                    );\n                })}\n            </ol>\n        </nav>\n    );\n};\n\nconst Breadcrumbs = makeDecoratable(\"Breadcrumbs\", BreadcrumbsBase);\n\n/**\n * Convenience factory for the leading, icon-only home entry.\n */\nexport const createHomeBreadcrumbItem = (onClick?: () => void): BreadcrumbsItem => ({\n    icon: <HomeIcon />,\n    title: \"Home\",\n    onClick\n});\n\nexport { Breadcrumbs };\n"],"names":["itemTextClassName","glyphClassName","renderGlyph","icon","React","element","cn","BreadcrumbItem","item","interactive","Boolean","title","content","undefined","BreadcrumbSeparator","SeparatorIcon","BreadcrumbsBase","items","className","props","index","key","Breadcrumbs","makeDecoratable","createHomeBreadcrumbItem","onClick","HomeIcon"],"mappings":";;;;AAoCA,MAAMA,oBACF;AAIJ,MAAMC,iBAAiB;AAEvB,MAAMC,cAAc,CAACC;IACjB,IAAI,CAAC,WAAD,GAACC,MAAAA,cAAoB,CAACD,OACtB,OAAOA;IAEX,MAAME,UAAUF;IAChB,OAAO,WAAP,GAAOC,MAAAA,YAAkB,CAACC,SAAS;QAC/B,WAAWC,GAAGL,gBAAgBI,QAAQ,KAAK,CAAC,SAAS;IACzD;AACJ;AAEA,MAAME,iBAAiB,CAAC,EAAEC,IAAI,EAA6B;IACvD,MAAMC,cAAcC,QAAQF,KAAK,OAAO,KAAK,CAACA,KAAK,OAAO;IAC1D,MAAMG,QAAQH,KAAK,KAAK,IAAIA,KAAK,KAAK;IAEtC,MAAMI,UAAU,WAAVA,GACF,oBAAC;QAAK,WAAU;OACXJ,KAAK,IAAI,GAAGN,YAAYM,KAAK,IAAI,IAAI,MACrCA,KAAK,KAAK,GAAG,WAAH,GAAG,oBAAC;QAAK,WAAWR;OAAoBQ,KAAK,KAAK,IAAW;IAKhF,IAAI,CAACC,aACD,OAAO,WAAP,GACI,oBAAC;QACG,gBAAcD,KAAK,OAAO,GAAG,SAASK;QACtC,OAAOF;QACP,WAAWL,GACP,6CACAE,KAAK,OAAO,GAAG,yBAAyB;OAG3CI;IAKb,OAAO,WAAP,GACI,oBAAC;QACG,MAAK;QACL,SAASJ,KAAK,OAAO;QACrB,OAAOG;QACP,WAAWL,GACP,6CACA,wCACA,sDACA;OAGHM;AAGb;AAEA,MAAME,sBAAsB,IACjB,WAAP,GACI,oBAAC;QAAK,eAAY;QAAO,WAAU;qBAC/B,oBAACC,yCAAaA;QAAC,WAAWd;;AAKtC,MAAMe,kBAAkB,CAAC,EAAEC,KAAK,EAAEC,SAAS,EAAE,GAAGC,OAAyB;IACrE,IAAIF,AAAiB,MAAjBA,MAAM,MAAM,EACZ,OAAO;IAGX,OAAO,WAAP,GACI,oBAAC;QAAI,cAAW;QAAa,WAAWX,GAAG,qBAAqBY;QAAa,GAAGC,KAAK;qBACjF,oBAAC;QAAG,WAAU;OACTF,MAAM,GAAG,CAAC,CAACT,MAAMY;QAEd,MAAMC,MAAM,GAAGb,KAAK,KAAK,IAAI,OAAO,CAAC,EAAEY,OAAO;QAC9C,OAAO,WAAP,GACI,oBAAC;YAAG,KAAKC;YAAK,WAAU;WACnBD,QAAQ,IAAI,WAAJ,GAAI,oBAACN,qBAAmBA,QAAM,oBACvC,oBAACP,gBAAcA;YAAC,MAAMC;;IAGlC;AAIhB;AAEA,MAAMc,cAAcC,gBAAgB,eAAeP;AAK5C,MAAMQ,2BAA2B,CAACC,UAA2C;QAChF,MAAM,WAAN,GAAM,oBAACC,gBAAQA;QACf,OAAO;QACPD;IACJ"}

package/Breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta } from "@storybook/react";
+import type { StoryObj } from "@storybook/react";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+declare const meta: Meta<typeof Breadcrumbs>;
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
+export declare const Default: Story;
+export declare const DeepTrail: Story;
+export declare const HomeOnly: Story;

package/Breadcrumbs/Breadcrumbs.stories.js

@@ -0,0 +1,71 @@
+import react from "react";
+import { ReactComponent } from "@webiny/icons/home.svg";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+const meta = {
+    title: "Components/Breadcrumbs",
+    component: Breadcrumbs,
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement("div", {
+                className: "w-[850px] rounded-sm bg-neutral-base px-md py-xs-plus"
+            }, /*#__PURE__*/ react.createElement(Story, null))
+    ]
+};
+const Breadcrumbs_stories = meta;
+const noop = ()=>void 0;
+const Default = {
+    args: {
+        items: [
+            {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                title: "Home",
+                onClick: noop
+            },
+            {
+                label: "Page Builder",
+                onClick: noop
+            },
+            {
+                label: "Articles",
+                current: true
+            }
+        ]
+    }
+};
+const DeepTrail = {
+    args: {
+        items: [
+            {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                title: "Home",
+                onClick: noop
+            },
+            {
+                label: "Headless CMS",
+                onClick: noop
+            },
+            {
+                label: "Articles",
+                onClick: noop
+            },
+            {
+                label: "The best article ever written about breadcrumbs",
+                current: true
+            }
+        ]
+    }
+};
+const HomeOnly = {
+    args: {
+        items: [
+            {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                title: "Home",
+                current: true
+            }
+        ]
+    }
+};
+export default Breadcrumbs_stories;
+export { DeepTrail, Default, HomeOnly };
+
+//# sourceMappingURL=Breadcrumbs.stories.js.map

package/Breadcrumbs/Breadcrumbs.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs/Breadcrumbs.stories.js","sources":["../../src/Breadcrumbs/Breadcrumbs.stories.tsx"],"sourcesContent":["import type { Meta } from \"@storybook/react\";\nimport type { StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { ReactComponent as HomeIcon } from \"@webiny/icons/home.svg\";\nimport { Breadcrumbs } from \"./Breadcrumbs.js\";\n\nconst meta: Meta<typeof Breadcrumbs> = {\n    title: \"Components/Breadcrumbs\",\n    component: Breadcrumbs,\n    decorators: [\n        Story => (\n            <div className=\"w-[850px] rounded-sm bg-neutral-base px-md py-xs-plus\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Breadcrumbs>;\n\nconst noop = () => undefined;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            { icon: <HomeIcon />, title: \"Home\", onClick: noop },\n            { label: \"Page Builder\", onClick: noop },\n            { label: \"Articles\", current: true }\n        ]\n    }\n};\n\nexport const DeepTrail: Story = {\n    args: {\n        items: [\n            { icon: <HomeIcon />, title: \"Home\", onClick: noop },\n            { label: \"Headless CMS\", onClick: noop },\n            { label: \"Articles\", onClick: noop },\n            { label: \"The best article ever written about breadcrumbs\", current: true }\n        ]\n    }\n};\n\nexport const HomeOnly: Story = {\n    args: {\n        items: [{ icon: <HomeIcon />, title: \"Home\", current: true }]\n    }\n};\n"],"names":["meta","Breadcrumbs","Story","noop","undefined","Default","HomeIcon","DeepTrail","HomeOnly"],"mappings":";;;AAMA,MAAMA,OAAiC;IACnC,OAAO;IACP,WAAWC;IACX,YAAY;QACRC,CAAAA,QAAAA,WAAAA,GACI,oBAAC;gBAAI,WAAU;6BACX,oBAACA,OAAAA;KAGZ;AACL;AAEA,4BAAeF;AAIf,MAAMG,OAAO,IAAMC;AAEZ,MAAMC,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBAAE,MAAM,WAAN,GAAM,oBAACC,gBAAQA;gBAAK,OAAO;gBAAQ,SAASH;YAAK;YACnD;gBAAE,OAAO;gBAAgB,SAASA;YAAK;YACvC;gBAAE,OAAO;gBAAY,SAAS;YAAK;SACtC;IACL;AACJ;AAEO,MAAMI,YAAmB;IAC5B,MAAM;QACF,OAAO;YACH;gBAAE,MAAM,WAAN,GAAM,oBAACD,gBAAQA;gBAAK,OAAO;gBAAQ,SAASH;YAAK;YACnD;gBAAE,OAAO;gBAAgB,SAASA;YAAK;YACvC;gBAAE,OAAO;gBAAY,SAASA;YAAK;YACnC;gBAAE,OAAO;gBAAmD,SAAS;YAAK;SAC7E;IACL;AACJ;AAEO,MAAMK,WAAkB;IAC3B,MAAM;QACF,OAAO;YAAC;gBAAE,MAAM,WAAN,GAAM,oBAACF,gBAAQA;gBAAK,OAAO;gBAAQ,SAAS;YAAK;SAAE;IACjE;AACJ"}

package/Breadcrumbs/index.d.ts

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

package/Breadcrumbs/index.js

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

package/Calendar/calendarClassNames.js

@@ -4,7 +4,7 @@ const calendarClassNames = {
     month: "flex flex-col gap-sm",
     month_caption: "flex items-center justify-center h-8 relative",
     caption_label: "text-md font-semibold text-neutral-strong",
-    nav: "absolute inset-x-0 flex items-center justify-between",
+    nav: "absolute inset-x-0 z-10 flex items-center justify-between",
     button_previous: "inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light",
     button_next: "inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light",
     month_grid: "border-collapse",

package/Calendar/calendarClassNames.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar/calendarClassNames.js","sources":["../../src/Calendar/calendarClassNames.ts"],"sourcesContent":["import type { ClassNames } from \"react-day-picker\";\n\nexport const calendarClassNames: Partial<ClassNames> = {\n    root: \"p-md\",\n    months: \"relative flex gap-md\",\n    month: \"flex flex-col gap-sm\",\n    month_caption: \"flex items-center justify-center h-8 relative\",\n    caption_label: \"text-md font-semibold text-neutral-strong\",\n    nav: \"absolute inset-x-0 flex items-center justify-between\",\n    button_previous:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    button_next:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    month_grid: \"border-collapse\",\n    weekdays: \"\",\n    weekday: \"text-xs font-medium text-neutral-dimmed size-9 text-center\",\n    weeks: \"\",\n    week: \"\",\n    day: \"size-9 text-center text-sm p-0 relative\",\n    day_button:\n        \"inline-flex items-center justify-center size-9 rounded-sm font-normal cursor-pointer hover:bg-neutral-light transition-colors\",\n    selected:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:font-medium\",\n    today: \"[&>button]:border-sm [&>button]:border-primary\",\n    outside: \"[&>button]:text-neutral-dimmed [&>button]:opacity-50\",\n    disabled: \"[&>button]:text-neutral-disabled [&>button]:cursor-not-allowed\",\n    hidden: \"invisible\",\n    range_start:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-r-none\",\n    range_end:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-l-none\",\n    range_middle:\n        \"bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70\",\n    focused: \"[&>button]:ring-2 [&>button]:ring-primary-dimmed\",\n    dropdowns: \"flex items-center gap-sm\",\n    dropdown:\n        \"appearance-none border-sm border-neutral-muted rounded-sm px-sm py-xs text-sm cursor-pointer bg-neutral-base\",\n    dropdown_root: \"relative\",\n    chevron: \"size-md fill-current\",\n    footer: \"pt-sm text-sm text-neutral-dimmed\"\n};\n"],"names":["calendarClassNames"],"mappings":"AAEO,MAAMA,qBAA0C;IACnD,MAAM;IACN,QAAQ;IACR,OAAO;IACP,eAAe;IACf,eAAe;IACf,KAAK;IACL,iBACI;IACJ,aACI;IACJ,YAAY;IACZ,UAAU;IACV,SAAS;IACT,OAAO;IACP,MAAM;IACN,KAAK;IACL,YACI;IACJ,UACI;IACJ,OAAO;IACP,SAAS;IACT,UAAU;IACV,QAAQ;IACR,aACI;IACJ,WACI;IACJ,cACI;IACJ,SAAS;IACT,WAAW;IACX,UACI;IACJ,eAAe;IACf,SAAS;IACT,QAAQ;AACZ"}
+{"version":3,"file":"Calendar/calendarClassNames.js","sources":["../../src/Calendar/calendarClassNames.ts"],"sourcesContent":["import type { ClassNames } from \"react-day-picker\";\n\nexport const calendarClassNames: Partial<ClassNames> = {\n    root: \"p-md\",\n    months: \"relative flex gap-md\",\n    month: \"flex flex-col gap-sm\",\n    month_caption: \"flex items-center justify-center h-8 relative\",\n    caption_label: \"text-md font-semibold text-neutral-strong\",\n    nav: \"absolute inset-x-0 z-10 flex items-center justify-between\",\n    button_previous:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    button_next:\n        \"inline-flex items-center justify-center size-8 rounded-sm cursor-pointer text-neutral-strong hover:bg-neutral-light\",\n    month_grid: \"border-collapse\",\n    weekdays: \"\",\n    weekday: \"text-xs font-medium text-neutral-dimmed size-9 text-center\",\n    weeks: \"\",\n    week: \"\",\n    day: \"size-9 text-center text-sm p-0 relative\",\n    day_button:\n        \"inline-flex items-center justify-center size-9 rounded-sm font-normal cursor-pointer hover:bg-neutral-light transition-colors\",\n    selected:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:font-medium\",\n    today: \"[&>button]:border-sm [&>button]:border-primary\",\n    outside: \"[&>button]:text-neutral-dimmed [&>button]:opacity-50\",\n    disabled: \"[&>button]:text-neutral-disabled [&>button]:cursor-not-allowed\",\n    hidden: \"invisible\",\n    range_start:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-r-none\",\n    range_end:\n        \"[&>button]:bg-primary [&>button]:text-neutral-base [&>button]:hover:bg-primary-strong [&>button]:rounded-l-none\",\n    range_middle:\n        \"bg-primary-subtle [&>button]:bg-transparent [&>button]:text-primary-strong [&>button]:rounded-none [&>button]:hover:bg-primary-subtle/70\",\n    focused: \"[&>button]:ring-2 [&>button]:ring-primary-dimmed\",\n    dropdowns: \"flex items-center gap-sm\",\n    dropdown:\n        \"appearance-none border-sm border-neutral-muted rounded-sm px-sm py-xs text-sm cursor-pointer bg-neutral-base\",\n    dropdown_root: \"relative\",\n    chevron: \"size-md fill-current\",\n    footer: \"pt-sm text-sm text-neutral-dimmed\"\n};\n"],"names":["calendarClassNames"],"mappings":"AAEO,MAAMA,qBAA0C;IACnD,MAAM;IACN,QAAQ;IACR,OAAO;IACP,eAAe;IACf,eAAe;IACf,KAAK;IACL,iBACI;IACJ,aACI;IACJ,YAAY;IACZ,UAAU;IACV,SAAS;IACT,OAAO;IACP,MAAM;IACN,KAAK;IACL,YACI;IACJ,UACI;IACJ,OAAO;IACP,SAAS;IACT,UAAU;IACV,QAAQ;IACR,aACI;IACJ,WACI;IACJ,cACI;IACJ,SAAS;IACT,WAAW;IACX,UACI;IACJ,eAAe;IACf,SAAS;IACT,QAAQ;AACZ"}

package/CodeEditor/CodeEditorPrimitive.js

@@ -6,7 +6,9 @@ const monacoOptions = {
     readOnly: true,
     minimap: {
         enabled: false
-    }
+    },
+    scrollBeyondLastLine: false,
+    wordWrap: "on"
 };
 const DecoratableCodeEditorPrimitive = ({ value, disabled, options: optionsInput, ...rest })=>{
     const options = useMemo(()=>({

package/CodeEditor/CodeEditorPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeEditor/CodeEditorPrimitive.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorProps } from \"@monaco-editor/react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface CodeEditorPrimitiveProps extends Partial<EditorProps> {\n    disabled?: boolean;\n}\n\nconst monacoOptions: editor.IEditorConstructionOptions = {\n    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    }\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    disabled,\n    options: optionsInput,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n        return {\n            ...monacoOptions,\n            ...optionsInput,\n            domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,\n            readOnly: disabled === undefined ? monacoOptions.readOnly : disabled\n        };\n    }, [disabled]);\n    return (\n        <MonacoEditor\n            height={\"calc(100vh - 400px)\"}\n            {...rest}\n            language={rest.language ?? \"json\"}\n            defaultValue={value}\n            options={options}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"names":["monacoOptions","DecoratableCodeEditorPrimitive","value","disabled","optionsInput","rest","options","useMemo","undefined","MonacoEditor","CodeEditorPrimitive","makeDecoratable"],"mappings":";;;AAUA,MAAMA,gBAAmD;IACrD,aAAa;IACb,UAAU;IACV,SAAS;QACL,SAAS;IACb;AACJ;AAEA,MAAMC,iCAAiC,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACR,SAASC,YAAY,EACrB,GAAGC,MACoB;IACvB,MAAMC,UAAUC,QAAQ,IACb;YACH,GAAGP,aAAa;YAChB,GAAGI,YAAY;YACf,aAAaD,AAAaK,WAAbL,WAAyBH,cAAc,WAAW,GAAGG;YAClE,UAAUA,AAAaK,WAAbL,WAAyBH,cAAc,QAAQ,GAAGG;QAChE,IACD;QAACA;KAAS;IACb,OAAO,WAAP,GACI,oBAACM,sBAAYA;QACT,QAAQ;QACP,GAAGJ,IAAI;QACR,UAAUA,KAAK,QAAQ,IAAI;QAC3B,cAAcH;QACd,SAASI;;AAGrB;AAEA,MAAMI,sBAAsBC,gBAAgB,uBAAuBV"}
+{"version":3,"file":"CodeEditor/CodeEditorPrimitive.js","sources":["../../src/CodeEditor/CodeEditorPrimitive.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport type { EditorProps } from \"@monaco-editor/react\";\nimport MonacoEditor from \"@monaco-editor/react\";\nimport type { editor } from \"monaco-editor\";\nimport { makeDecoratable } from \"~/utils.js\";\n\ninterface CodeEditorPrimitiveProps extends Partial<EditorProps> {\n    disabled?: boolean;\n}\n\nconst monacoOptions: editor.IEditorConstructionOptions = {\n    domReadOnly: true,\n    readOnly: true,\n    minimap: {\n        enabled: false\n    },\n    scrollBeyondLastLine: false,\n    wordWrap: \"on\"\n};\n\nconst DecoratableCodeEditorPrimitive = ({\n    value,\n    disabled,\n    options: optionsInput,\n    ...rest\n}: CodeEditorPrimitiveProps) => {\n    const options = useMemo((): editor.IDiffEditorConstructionOptions => {\n        return {\n            ...monacoOptions,\n            ...optionsInput,\n            domReadOnly: disabled === undefined ? monacoOptions.domReadOnly : disabled,\n            readOnly: disabled === undefined ? monacoOptions.readOnly : disabled\n        };\n    }, [disabled]);\n    return (\n        <MonacoEditor\n            height={\"calc(100vh - 400px)\"}\n            {...rest}\n            language={rest.language ?? \"json\"}\n            defaultValue={value}\n            options={options}\n        />\n    );\n};\n\nconst CodeEditorPrimitive = makeDecoratable(\"CodeEditorPrimitive\", DecoratableCodeEditorPrimitive);\n\nexport { CodeEditorPrimitive, type CodeEditorPrimitiveProps };\n"],"names":["monacoOptions","DecoratableCodeEditorPrimitive","value","disabled","optionsInput","rest","options","useMemo","undefined","MonacoEditor","CodeEditorPrimitive","makeDecoratable"],"mappings":";;;AAUA,MAAMA,gBAAmD;IACrD,aAAa;IACb,UAAU;IACV,SAAS;QACL,SAAS;IACb;IACA,sBAAsB;IACtB,UAAU;AACd;AAEA,MAAMC,iCAAiC,CAAC,EACpCC,KAAK,EACLC,QAAQ,EACR,SAASC,YAAY,EACrB,GAAGC,MACoB;IACvB,MAAMC,UAAUC,QAAQ,IACb;YACH,GAAGP,aAAa;YAChB,GAAGI,YAAY;YACf,aAAaD,AAAaK,WAAbL,WAAyBH,cAAc,WAAW,GAAGG;YAClE,UAAUA,AAAaK,WAAbL,WAAyBH,cAAc,QAAQ,GAAGG;QAChE,IACD;QAACA;KAAS;IACb,OAAO,WAAP,GACI,oBAACM,sBAAYA;QACT,QAAQ;QACP,GAAGJ,IAAI;QACR,UAAUA,KAAK,QAAQ,IAAI;QAC3B,cAAcH;QACd,SAASI;;AAGrB;AAEA,MAAMI,sBAAsBC,gBAAgB,uBAAuBV"}

package/DataTable/DataTable.d.ts

@@ -1,5 +1,15 @@
 import React from "react";
-import type { ColumnSort, OnChangeFn, Row, SortingState, VisibilityState } from "@tanstack/react-table";
+import type { ColumnSort, ColumnVisibilityState, OnChangeFn, Row, RowData, SortingState } from "@tanstack/react-table";
+declare const features: {
+    columnResizingFeature: import("@tanstack/table-core").TableFeature;
+    columnSizingFeature: import("@tanstack/table-core").TableFeature;
+    columnVisibilityFeature: import("@tanstack/table-core").TableFeature;
+    rowSelectionFeature: import("@tanstack/table-core").TableFeature;
+    rowSortingFeature: import("@tanstack/table-core").TableFeature;
+    sortedRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+    coreRowModel: (table: import("@tanstack/table-core").Table<any, any>) => () => import("@tanstack/table-core").RowModel<any, any>;
+};
+type Features = typeof features;
 interface DataTableColumn<T> {
     header?: string | number | React.JSX.Element;
     cell?: (row: T) => string | number | React.JSX.Element | null;
@@ -18,13 +28,13 @@ type DataTableDefaultData = {
     id: string;
     $selectable?: boolean;
 };
-type DataTableRow<T> = Row<DataTableDefaultData & T>;
+type DataTableRow<T extends RowData> = Row<Features, DataTableDefaultData & T>;
 type DataTableSorting = SortingState;
 type DataTableColumnSort = ColumnSort;
 type OnDataTableSortingChange = OnChangeFn<DataTableSorting>;
-type DataTableColumnVisibility = VisibilityState;
+type DataTableColumnVisibility = ColumnVisibilityState;
 type OnDataTableColumnVisibilityChange = OnChangeFn<DataTableColumnVisibility>;
-interface DataTableProps<TEntry> {
+interface DataTableProps<TEntry extends RowData> {
     /**
      * Show or hide borders.
      */
@@ -52,7 +62,7 @@ interface DataTableProps<TEntry> {
     /**
      * Callback that is called to determine if the row is selectable.
      */
-    isRowSelectable?: (row: Row<TEntry>) => boolean;
+    isRowSelectable?: (row: Row<Features, TEntry>) => boolean;
     /**
      * Render the skeleton state while data are loading.
      */
@@ -106,4 +116,4 @@ declare const DataTable: typeof DecoratableDataTable & {
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 };
-export { DataTable, type DataTableProps, type DataTableColumn, type DataTableColumns, type DataTableDefaultData, type DataTableRow, type DataTableSorting, type DataTableColumnSort, type OnDataTableSortingChange, type DataTableColumnVisibility, type OnDataTableColumnVisibilityChange };
+export { DataTable, type Features, type DataTableProps, type DataTableColumn, type DataTableColumns, type DataTableDefaultData, type DataTableRow, type DataTableSorting, type DataTableColumnSort, type OnDataTableSortingChange, type DataTableColumnVisibility, type OnDataTableColumnVisibilityChange };

package/DataTable/DataTable.js

@@ -1,10 +1,19 @@
 import react, { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { columnResizingFeature, columnSizingFeature, columnVisibilityFeature, createCoreRowModel, createSortedRowModel, flexRender, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
 import { CheckboxPrimitive } from "../Checkbox/index.js";
 import { Skeleton } from "../Skeleton/index.js";
 import { Table } from "../Table/index.js";
 import { ColumnSorter, ColumnsVisibility } from "./components/index.js";
 import { cn, makeDecoratable } from "../utils.js";
+const features = tableFeatures({
+    columnResizingFeature: columnResizingFeature,
+    columnSizingFeature: columnSizingFeature,
+    columnVisibilityFeature: columnVisibilityFeature,
+    rowSelectionFeature: rowSelectionFeature,
+    rowSortingFeature: rowSortingFeature,
+    sortedRowModel: createSortedRowModel(),
+    coreRowModel: createCoreRowModel()
+});
 const defineColumns = (columns, options)=>{
     const { canSelectAllRows, onSelectRow, onToggleRow, loading } = options;
     return useMemo(()=>{
@@ -158,7 +167,8 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
         onToggleRow,
         loading
     });
-    const table = useReactTable({
+    const table = useTable({
+        features: features,
         columnResizeMode: "onChange",
         columns,
         data,
@@ -167,8 +177,6 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
         enableRowSelection: isRowSelectable,
         enableSorting: !!onSortingChange,
         enableSortingRemoval: false,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
         manualSorting: true,
         onColumnVisibilityChange,
         onRowSelectionChange,
@@ -181,9 +189,12 @@ const DecoratableDataTable = ({ bordered, canSelectAllRows = true, columnVisibil
     });
     const getColumnWidth = useCallback((column)=>{
         if (!column.getCanResize()) return column.getSize();
-        const tableSize = table.getTotalSize();
-        const columnSize = column.getSize();
-        return Math.ceil(columnSize * tableWidth / tableSize);
+        const visibleColumns = table.getVisibleLeafColumns();
+        const fixedTotal = visibleColumns.filter((col)=>!col.getCanResize()).reduce((total, col)=>total + col.getSize(), 0);
+        const resizableTotal = visibleColumns.filter((col)=>col.getCanResize()).reduce((total, col)=>total + col.getSize(), 0);
+        if (0 === resizableTotal) return column.getSize();
+        const available = Math.max(tableWidth - fixedTotal, 0);
+        return Math.ceil(column.getSize() * available / resizableTotal);
     }, [
         table,
         tableWidth