react-miui 0.28.2 → 0.29.0

package/esm/components/ui/drawer/Drawer.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Drawer } from "./Drawer";
+declare const meta: Meta<typeof Drawer>;
+type Story = StoryObj<typeof Drawer>;
+declare const Default: Story;
+declare const NoEscClose: Story;
+declare const WithLongContent: Story;
+declare const CustomStyled: Story;
+export { Default, NoEscClose, WithLongContent, CustomStyled };
+export default meta;
+//# sourceMappingURL=Drawer.stories.d.ts.map

package/esm/components/ui/drawer/Drawer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAO7B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAKrC,QAAA,MAAM,OAAO,EAAE,KA2Bd,CAAC;AAKF,QAAA,MAAM,UAAU,EAAE,KA6BjB,CAAC;AAKF,QAAA,MAAM,eAAe,EAAE,KAgCtB,CAAC;AAcF,QAAA,MAAM,YAAY,EAAE,KA2BnB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC;AAC9D,eAAe,IAAI,CAAC"}

package/esm/components/ui/drawer/Drawer.stories.js

@@ -0,0 +1,101 @@
+import React, { useState, useCallback } from "react";
+import { styled } from "../../../theme.js";
+import { Section } from "../../layout/section/Section.js";
+import { Button } from "../button/Button.js";
+import { Drawer } from "./Drawer.js";
+const meta = {
+    title: "UI/Drawer",
+    component: Drawer,
+    parameters: {
+        layout: "fullscreen",
+    },
+    tags: ["autodocs"],
+};
+const Default = {
+    render: () => {
+        const [isOpen, setisOpen] = useState(false);
+        const handleToggleOpen = useCallback(() => {
+            setisOpen((prev) => !prev);
+        }, []);
+        const handleClose = useCallback(() => {
+            setisOpen(false);
+        }, []);
+        return (React.createElement("div", { style: { padding: "20px" } },
+            React.createElement(Drawer, { isOpen: isOpen, onClose: handleClose },
+                React.createElement("div", { style: { padding: "20px" } },
+                    React.createElement("h2", null, "Drawer Content"),
+                    React.createElement("p", null, "This is the content inside the drawer."),
+                    React.createElement("p", null, "Press ESC to close."))),
+            React.createElement(Button, { onClick: handleToggleOpen }, isOpen ? "Close Drawer" : "Open Drawer")));
+    },
+};
+const NoEscClose = {
+    render: () => {
+        const [open, setOpen] = useState(false);
+        const handleToggleOpen = useCallback(() => {
+            setOpen((prev) => !prev);
+        }, []);
+        const handleClose = useCallback(() => {
+            setOpen(false);
+        }, []);
+        return (React.createElement("div", { style: { padding: "20px" } },
+            React.createElement(Drawer, { isOpen: open, onClose: handleClose, closeOnEsc: false },
+                React.createElement("div", { style: { padding: "20px" } },
+                    React.createElement("h2", null, "Drawer Without ESC Close"),
+                    React.createElement("p", null, "This drawer will not close when you press ESC."),
+                    React.createElement("p", null, "Use the button below to close it."),
+                    React.createElement(Button, { onClick: handleClose }, "Close Drawer"))),
+            React.createElement(Button, { onClick: handleToggleOpen }, open ? "Close Drawer" : "Open Drawer (No ESC Close)")));
+    },
+};
+const WithLongContent = {
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const handleToggleOpen = useCallback(() => {
+            setIsOpen(prev => !prev);
+        }, []);
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+        return (React.createElement("div", { style: { padding: "20px" } },
+            React.createElement(Drawer, { isOpen: isOpen, onClose: handleClose },
+                React.createElement("div", { style: { padding: "20px" } },
+                    React.createElement("h2", null, "Drawer with Long Content"),
+                    React.createElement("p", null, "This drawer has enough content to demonstrate scrolling behavior."),
+                    Array(20).fill(0).map((_, i) => (React.createElement(Section, { key: String(`${i}`), vertical: true, horizontal: true },
+                        React.createElement("h3", null,
+                            "Section ",
+                            i + 1),
+                        React.createElement("p", null,
+                            "This is content section ",
+                            i + 1,
+                            " in the scrollable drawer.")))))),
+            React.createElement(Button, { onClick: handleToggleOpen }, isOpen ? "Close Drawer" : "Open Drawer with Long Content")));
+    },
+};
+const CustomStyledDrawer = styled(Drawer, {
+    "&&": {
+        background: "linear-gradient(to bottom, #c5f7fa, #63cfe2)",
+    },
+});
+const CustomStyled = {
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const handleToggleOpen = useCallback(() => {
+            setIsOpen(prev => !prev);
+        }, []);
+        const handleClose = useCallback(() => {
+            setIsOpen(false);
+        }, []);
+        return (React.createElement("div", { style: { padding: "20px" } },
+            React.createElement(CustomStyledDrawer, { isOpen: isOpen, onClose: handleClose },
+                React.createElement("div", { style: { padding: "20px" } },
+                    React.createElement("h2", null, "Custom Styled Drawer"),
+                    React.createElement("p", null, "This drawer has custom styling with a gradient background"),
+                    React.createElement(Button, { onClick: handleClose }, "Close Drawer"))),
+            React.createElement(Button, { onClick: handleToggleOpen }, isOpen ? "Close Custom Drawer" : "Open Custom Drawer")));
+    },
+};
+export { Default, NoEscClose, WithLongContent, CustomStyled };
+export default meta;
+//# sourceMappingURL=Drawer.stories.js.map

package/esm/components/ui/drawer/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAIrD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,IAAI,GAAwB;IAC9B,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACR,MAAM,EAAE,YAAY;KACvB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;CACrB,CAAC;AAOF,MAAM,OAAO,GAAU;IACnB,MAAM,EAAE,GAAG,EAAE;QACT,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAE5C,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;YACtC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;YACjC,SAAS,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC3B,oBAAC,MAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW;gBACxC,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;oBAC3B,iDAAuB;oBACvB,wEAA6C;oBAC7C,qDAA0B,CACxB,CACD;YACT,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,IAC5B,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,CACnC,CACP,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAKF,MAAM,UAAU,GAAU;IACtB,MAAM,EAAE,GAAG,EAAE;QAET,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAExC,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;YACtC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;YACjC,OAAO,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC3B,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,KAAK;gBACzD,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;oBAC3B,2DAAiC;oBACjC,gFAAqD;oBACrD,mEAAwC;oBACxC,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,mBAAuB,CACjD,CACD;YACT,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,IAC5B,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,4BAA4B,CAChD,CACP,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAKF,MAAM,eAAe,GAAU;IAC3B,MAAM,EAAE,GAAG,EAAE;QACT,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAE5C,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;YACtC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;YACjC,SAAS,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC3B,oBAAC,MAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW;gBACxC,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;oBAC3B,2DAAiC;oBACjC,mGAAwE;oBACvE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAC7B,oBAAC,OAAO,IAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI;wBAC1D;;4BAAa,CAAC,GAAG,CAAC,CAAM;wBACxB;;4BAA4B,CAAC,GAAG,CAAC;yDAA+B,CAC1D,CACb,CAAC,CACA,CACD;YACT,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,IAC5B,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,+BAA+B,CACrD,CACP,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAKF,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,EAAE;IACtC,IAAI,EAAE;QACF,UAAU,EAAE,8CAA8C;KAC7D;CACJ,CAAC,CAAC;AAKH,MAAM,YAAY,GAAU;IACxB,MAAM,EAAE,GAAG,EAAE;QACT,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAE5C,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;YACtC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;YACjC,SAAS,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO,CACH,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YAC3B,oBAAC,kBAAkB,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW;gBACpD,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;oBAC3B,uDAA6B;oBAC7B,2FAAgE;oBAChE,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,mBAAuB,CACjD,CACW;YACrB,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,IAC5B,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,oBAAoB,CACjD,CACP,CACT,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC;AAC9D,eAAe,IAAI,CAAC"}

package/esm/components/ui/drawer/Drawer.styled.d.ts

@@ -0,0 +1,168 @@
+declare const StyledDrawer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: "white";
+        mainColor: "#008ad2";
+        mainColorAlt: "#006AA9";
+        activeBg: "#e7e7e7";
+        inactiveBg: "#d3d3de";
+        inactiveDarkBg: "#999";
+        toggleHandleBg: "#e0e0e0";
+        toggleHandleBorder: "#cdcdcd";
+        toggleBgDisabled: "#f0f0f0";
+        toggleHandleBorderDisabled: "#c29f7d";
+        toggleHandleBgDisabled: "#deae84";
+        icon: "#636363";
+        border: "#d5d5d5";
+        buttonBorder: "#bababa";
+        headerBorder: "#c8c8c9";
+        headerBg: "#efeff0";
+        headerText: "#484848";
+        text: "#323232";
+        sub: "#959595";
+        popText: "#666";
+        toolbarBorder: "#ababab";
+        toolbarBg: "#f8f8f8";
+        modalBg: "#f7f7f7";
+        modalButtonBg: "#f8f8f8";
+        modalButtonBorder: "#c2c2c2";
+        inputDisabledBg: "#f3f3f3";
+        inputDisabledText: "#959595";
+        choiceBg: "#ffffff";
+        choiceText: "#999999";
+        choiceActiveBg: "#f3f3f3";
+        choiceActiveText: "#313131";
+        choiceBorder: "#cfcfcf";
+        selectorText: "#606060";
+        selectorActive: "#008ad2";
+        blue1: "#038bf4";
+        blue2: "#b7d6f5";
+        blue3: "#dbe6ff";
+        blue4: "#33b4ff";
+        blue5: "#30a2e6";
+        orange1: "#ff7200";
+        orange1Darker: "#cc5b00";
+        purple1: "#7357e8";
+        green1: "#3ec234";
+        green1Darker: "#38af2f";
+        pink1: "#ff388f";
+        red1: "#ea2700";
+        yellow1: "#ffde9d";
+        yellow2: "#e4a429";
+        yellow3: "#fff5db";
+        pinky1: "#f5c0b7";
+        pinky2: "#e07b67";
+        pinky3: "#ffe1db";
+        grey1: "#737373";
+        focusColor: "#dcaf00";
+        scrollbarsThumb: "#737373";
+        scrollbarsBg: "transparent";
+        tableStripedBg: "#fafafa";
+        toolButtonText: "#666e80";
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+declare const Content: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {}, import("@stitches/react/types/css-util").CSS<{}, {
+    colors: {
+        background: "white";
+        mainColor: "#008ad2";
+        mainColorAlt: "#006AA9";
+        activeBg: "#e7e7e7";
+        inactiveBg: "#d3d3de";
+        inactiveDarkBg: "#999";
+        toggleHandleBg: "#e0e0e0";
+        toggleHandleBorder: "#cdcdcd";
+        toggleBgDisabled: "#f0f0f0";
+        toggleHandleBorderDisabled: "#c29f7d";
+        toggleHandleBgDisabled: "#deae84";
+        icon: "#636363";
+        border: "#d5d5d5";
+        buttonBorder: "#bababa";
+        headerBorder: "#c8c8c9";
+        headerBg: "#efeff0";
+        headerText: "#484848";
+        text: "#323232";
+        sub: "#959595";
+        popText: "#666";
+        toolbarBorder: "#ababab";
+        toolbarBg: "#f8f8f8";
+        modalBg: "#f7f7f7";
+        modalButtonBg: "#f8f8f8";
+        modalButtonBorder: "#c2c2c2";
+        inputDisabledBg: "#f3f3f3";
+        inputDisabledText: "#959595";
+        choiceBg: "#ffffff";
+        choiceText: "#999999";
+        choiceActiveBg: "#f3f3f3";
+        choiceActiveText: "#313131";
+        choiceBorder: "#cfcfcf";
+        selectorText: "#606060";
+        selectorActive: "#008ad2";
+        blue1: "#038bf4";
+        blue2: "#b7d6f5";
+        blue3: "#dbe6ff";
+        blue4: "#33b4ff";
+        blue5: "#30a2e6";
+        orange1: "#ff7200";
+        orange1Darker: "#cc5b00";
+        purple1: "#7357e8";
+        green1: "#3ec234";
+        green1Darker: "#38af2f";
+        pink1: "#ff388f";
+        red1: "#ea2700";
+        yellow1: "#ffde9d";
+        yellow2: "#e4a429";
+        yellow3: "#fff5db";
+        pinky1: "#f5c0b7";
+        pinky2: "#e07b67";
+        pinky3: "#ffe1db";
+        grey1: "#737373";
+        focusColor: "#dcaf00";
+        scrollbarsThumb: "#737373";
+        scrollbarsBg: "transparent";
+        tableStripedBg: "#fafafa";
+        toolButtonText: "#666e80";
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    mx: (value: string | number) => {
+        marginLeft: string | number;
+        marginRight: string | number;
+    };
+    my: (value: string | number) => {
+        marginTop: string | number;
+        marginBottom: string | number;
+    };
+    px: (value: string | number) => {
+        paddingLeft: string | number;
+        paddingRight: string | number;
+    };
+    py: (value: string | number) => {
+        paddingTop: string | number;
+        paddingBottom: string | number;
+    };
+    size: (value: string | number) => {
+        width: string | number;
+        height: string | number;
+    };
+}>>;
+export { StyledDrawer, Content, };
+//# sourceMappingURL=Drawer.styled.d.ts.map

package/esm/components/ui/drawer/Drawer.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAUhB,CAAC;AAEH,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEX,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,OAAO,GACV,CAAC"}

package/esm/components/ui/drawer/Drawer.styled.js

@@ -0,0 +1,17 @@
+import { styled } from "../../../theme.js";
+const StyledDrawer = styled("div", {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: "white",
+    zIndex: 1,
+    transition: "transform 300ms",
+    overflow: "auto",
+});
+const Content = styled("div", {
+    height: "100%",
+});
+export { StyledDrawer, Content, };
+//# sourceMappingURL=Drawer.styled.js.map

package/esm/components/ui/drawer/Drawer.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/drawer/Drawer.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/B,QAAQ,EAAE,OAAO;IACjB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,iBAAiB;IAC7B,QAAQ,EAAE,MAAM;CACnB,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,EAAE;IAC1B,MAAM,EAAE,MAAM;CACjB,CAAC,CAAC;AAEH,OAAO,EACH,YAAY,EACZ,OAAO,GACV,CAAC"}

package/esm/components/ui/keyValue/KeyValue.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-interface Props {
+type KeyValueProps = {
     items: {
         key?: React.ReactNode;
         value?: React.ReactNode;
@@ -9,7 +9,13 @@ interface Props {
     cols?: number;
     valueFirst?: boolean;
     className?: string;
-}
-declare const KeyValue: React.FC<Props>;
-export { KeyValue };
+};
+declare const KeyValue: React.ForwardRefExoticComponent<KeyValueProps & React.RefAttributes<HTMLDivElement>>;
+declare const KeyValueItemSelector: string;
+declare const KeyValuePairSelector: string;
+declare const KeyValueKeySelector: string;
+declare const KeyValueValueSelector: string;
+declare const KeyValueIconSelector: string;
+export { KeyValue, KeyValueItemSelector, KeyValuePairSelector, KeyValueKeySelector, KeyValueValueSelector, KeyValueIconSelector, };
+export type { KeyValueProps };
 //# sourceMappingURL=KeyValue.d.ts.map

package/esm/components/ui/keyValue/KeyValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/keyValue/KeyValue.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,KAAK;IACX,KAAK,EAAE;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,EAAE,CAAC;IAC1G,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAID,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkD7B,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"KeyValue.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/keyValue/KeyValue.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAW1C,KAAK,aAAa,GAAG;IACjB,KAAK,EAAE;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;KAAE,EAAE,CAAC;IAC1G,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAIF,QAAA,MAAM,QAAQ,sFAqDZ,CAAC;AAKH,QAAA,MAAM,oBAAoB,QAAkB,CAAC;AAC7C,QAAA,MAAM,oBAAoB,QAA0B,CAAC;AACrD,QAAA,MAAM,mBAAmB,QAAiB,CAAC;AAC3C,QAAA,MAAM,qBAAqB,QAAmB,CAAC;AAC/C,QAAA,MAAM,oBAAoB,QAAkB,CAAC;AAE7C,OAAO,EACH,QAAQ,EACR,oBAAoB,EACpB,oBAAoB,EACpB,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,GACvB,CAAC;AACF,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/esm/components/ui/keyValue/KeyValue.js

@@ -1,8 +1,7 @@
-import React from "react";
-import classnames from "classnames";
-import styles from "./KeyValue.module.scss";
+import React, { forwardRef } from "react";
+import { Container, Item, Key, KeyValuePair, Value, Icon, } from "./KeyValue.styled.js";
 const DEFAULT_COLS = 2;
-const KeyValue = (props) => {
+const KeyValue = forwardRef((props, ref) => {
     var _a;
     const cols = (_a = props.cols) !== null && _a !== void 0 ? _a : DEFAULT_COLS;
     const items = props.items.map((value, key) => {
@@ -10,19 +9,19 @@ const KeyValue = (props) => {
         const style = { width };
         const isFirstRow = key < cols;
         const isFirstCol = (key % cols) === 0;
-        const className = classnames(styles.item, {
-            [styles.itemNotFirstRow]: !isFirstRow,
-            [styles.itemNotFirstCol]: !isFirstCol,
-        });
-        const kvKey = value.key != null ? React.createElement("div", { className: styles.key }, value.key) : null;
-        const kvValue = value.value != null ? React.createElement("div", { className: styles.value }, value.value) : null;
-        const keyValue = (React.createElement("div", { className: styles.kv },
+        const kvKey = value.key != null ? React.createElement(Key, null, value.key) : null;
+        const kvValue = value.value != null ? React.createElement(Value, null, value.value) : null;
+        const keyValue = (React.createElement(KeyValuePair, null,
             props.valueFirst ? kvValue : kvKey,
             !props.valueFirst ? kvValue : kvKey));
-        const icon = value.icon != null ? React.createElement("div", { className: styles.icon }, value.icon) : null;
+        const icon = value.icon != null ? React.createElement(Icon, null, value.icon) : null;
         const component = value.onClick ? "button" : "div";
-        return React.createElement(component, {
-            key, style, className,
+        return React.createElement(Item, {
+            key: key,
+            style: style,
+            as: component,
+            notFirstRow: !isFirstRow,
+            notFirstCol: !isFirstCol,
         }, React.createElement(React.Fragment, null,
             icon,
             keyValue));
@@ -32,10 +31,18 @@ const KeyValue = (props) => {
     if (missingItems) {
         const width = `${(100 / cols) * (missingItems)}%`;
         const style = { width };
-        const cls = classnames(styles.item, styles.missingItem);
-        items.push(React.createElement("div", { key: "extra", style: style, className: cls }));
+        const firstRow = items.length < cols;
+        const firstCol = (items.length % cols) === 0;
+        items.push(React.createElement(Item, { key: "extra", css: style, notFirstCol: !firstCol, notFirstRow: !firstRow }));
     }
-    return (React.createElement("div", { className: classnames(styles.container, props.className) }, items));
-};
-export { KeyValue };
+    return (React.createElement(Container, { className: props.className, ref: ref }, items));
+});
+KeyValue.displayName = "KeyValue";
+KeyValue.toString = () => Container.toString();
+const KeyValueItemSelector = Item.toString();
+const KeyValuePairSelector = KeyValuePair.toString();
+const KeyValueKeySelector = Key.toString();
+const KeyValueValueSelector = Value.toString();
+const KeyValueIconSelector = Icon.toString();
+export { KeyValue, KeyValueItemSelector, KeyValuePairSelector, KeyValueKeySelector, KeyValueValueSelector, KeyValueIconSelector, };
 //# sourceMappingURL=KeyValue.js.map

package/esm/components/ui/keyValue/KeyValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValue.js","sourceRoot":"","sources":["../../../../src/components/ui/keyValue/KeyValue.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"KeyValue.js","sourceRoot":"","sources":["../../../../src/components/ui/keyValue/KeyValue.tsx"],"names":[],"mappings":"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"}

package/esm/components/ui/keyValue/KeyValue.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { KeyValue } from "./KeyValue";
+declare const meta: Meta<typeof KeyValue>;
+type Story = StoryObj<typeof KeyValue>;
+declare const Default: Story;
+declare const TwoColumn: Story;
+declare const SingleColumn: Story;
+declare const CustomStyled: Story;
+export { Default, TwoColumn, SingleColumn, CustomStyled };
+export default meta;
+//# sourceMappingURL=KeyValue.stories.d.ts.map

package/esm/components/ui/keyValue/KeyValue.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValue.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/keyValue/KeyValue.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAK5D,OAAO,EAAE,QAAQ,EAAoE,MAAM,YAAY,CAAC;AAExG,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAO/B,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAwEvC,QAAA,MAAM,OAAO,EAAE,KAMd,CAAC;AAKF,QAAA,MAAM,SAAS,EAAE,KAMhB,CAAC;AAKF,QAAA,MAAM,YAAY,EAAE,KAMnB,CAAC;AAUF,QAAA,MAAM,YAAY,EAAE,KASnB,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AAC1D,eAAe,IAAI,CAAC"}

package/esm/components/ui/keyValue/KeyValue.stories.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { omit } from "@ezez/utils";
+import { styled } from "../../../theme.js";
+import { Icon, ICON } from "../../icons/Icon.js";
+import { KeyValue, KeyValueKeySelector, KeyValueValueSelector, KeyValueIconSelector } from "./KeyValue.js";
+const meta = {
+    title: "UI/KeyValue",
+    component: KeyValue,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+};
+const StyledKeyValue = styled(KeyValue, {
+    "--kv-background-color": "#f5f5f5",
+    "--kv-border-color": "#ddd",
+    "--kv-hover-background-color": "#e8e8e8",
+    "borderRadius": "8px",
+    "boxShadow": "0 2px 4px rgba(0,0,0,0.05)",
+    [`& ${KeyValueKeySelector}`]: {
+        fontFamily: "serif",
+        fontStyle: "italic",
+        color: "$blue1",
+    },
+    [`& ${KeyValueValueSelector}`]: {
+        fontWeight: "bold",
+        color: "$green1",
+    },
+    [`& ${KeyValueIconSelector}`]: {
+        color: "$orange1",
+    },
+});
+const items = [
+    {
+        key: "Turbo",
+        value: "100x",
+    },
+    {
+        key: "Turbo",
+        value: "100x",
+        icon: React.createElement(Icon, { name: ICON.heart }),
+        onClick: () => { alert("Clicked item with heart icon"); },
+    },
+    {
+        value: "99%",
+        icon: React.createElement(Icon, { name: ICON.battery }),
+    },
+    {
+        key: "4,25 V",
+        value: "99%",
+        icon: React.createElement(Icon, { name: ICON.battery }),
+    },
+    {
+        key: "Just key",
+    },
+    {
+        value: "Just value",
+    },
+    {
+        key: React.createElement(React.Fragment, null,
+            "Multi line",
+            React.createElement("br", null),
+            "key"),
+    },
+    {
+        value: React.createElement(React.Fragment, null,
+            "Multi line",
+            React.createElement("br", null),
+            "value"),
+    },
+];
+const Default = {
+    args: {
+        items: items,
+        valueFirst: true,
+        cols: 3,
+    },
+};
+const TwoColumn = {
+    args: {
+        items: items,
+        valueFirst: false,
+        cols: 2,
+    },
+};
+const SingleColumn = {
+    args: {
+        items: items,
+        valueFirst: false,
+        cols: 1,
+    },
+};
+const CustomStyled = {
+    render: (args) => (React.createElement(StyledKeyValue, { items: items, valueFirst: true, cols: 2, ...omit(args, ["ref", "items"]) })),
+};
+export { Default, TwoColumn, SingleColumn, CustomStyled };
+export default meta;
+//# sourceMappingURL=KeyValue.stories.js.map

package/esm/components/ui/keyValue/KeyValue.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValue.stories.js","sourceRoot":"","sources":["../../../../src/components/ui/keyValue/KeyValue.stories.tsx"],"names":[],"mappings":"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"}