react-miui 0.27.7 → 0.27.8

package/CHANGELOG.md

@@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [EZEZ Changelog](https://ezez.dev/guidelines/changelog/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [0.27.8] - 2025-05-10
+### Fixed
+- `selected` Item prop arrow rendering incorrectly when used with Item.Label
+### Changed
+- `ratio` prop of List.Item has more strict type
+
 ## [0.27.7] - 2025-01-05
 ### Dev
 - Fixed DOM attribute warning on `Input`

package/dist/components/layout/list/Item.d.ts

@@ -1,108 +1,25 @@
 import React from "react";
 import { Value } from "./Value";
 import { Label } from "./Label";
+import { StyledItem } from "./Item.styled";
 interface LinkProps {
     href: string;
     children: React.ReactNode;
 }
+type Ratio = `${number}` | ``;
+type SlashSeparatedNumbers = Ratio | `${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}` | `${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}/${Ratio}`;
 interface Props {
     href?: string;
     to?: string;
     onClick?: () => void;
     Link?: React.ComponentClass<LinkProps> | React.FC<LinkProps>;
-    ratio?: string;
+    ratio?: SlashSeparatedNumbers;
 }
 interface SubComponents {
     Label: typeof Label;
     Value: typeof Value;
 }
 declare const ItemInnerContainerClassName: string;
-declare const StyledItem: import("@stitches/react/types/styled-component").StyledComponent<"li", {
-    inset?: boolean | "true";
-    selected?: boolean | "true";
-}, {}, import("@stitches/react/types/css-util").CSS<{}, {
-    colors: {
-        background: string;
-        mainColor: string;
-        mainColorAlt: string;
-        activeBg: string;
-        inactiveBg: string;
-        inactiveDarkBg: string;
-        toggleHandleBg: string;
-        toggleHandleBorder: string;
-        toggleBgDisabled: string;
-        toggleHandleBorderDisabled: string;
-        toggleHandleBgDisabled: string;
-        icon: string;
-        border: string;
-        buttonBorder: string;
-        headerBorder: string;
-        headerBg: string;
-        headerText: string;
-        text: string;
-        sub: string;
-        popText: string;
-        toolbarBorder: string;
-        toolbarBg: string;
-        modalBg: string;
-        modalButtonBg: string;
-        modalButtonBorder: string;
-        inputDisabledBg: string;
-        inputDisabledText: string;
-        choiceBg: string;
-        choiceText: string;
-        choiceActiveBg: string;
-        choiceActiveText: string;
-        choiceBorder: string;
-        selectorText: string;
-        selectorActive: string;
-        blue1: string;
-        blue2: string;
-        blue3: string;
-        blue4: string;
-        blue5: string;
-        orange1: string;
-        orange1Darker: string;
-        purple1: string;
-        green1: string;
-        green1Darker: string;
-        pink1: string;
-        red1: string;
-        yellow1: string;
-        yellow2: string;
-        yellow3: string;
-        pinky1: string;
-        pinky2: string;
-        pinky3: string;
-        grey1: string;
-        focusColor: string;
-        scrollbarsThumb: string;
-        scrollbarsBg: string;
-        tableStripedBg: string;
-        toolButtonText: string;
-    };
-}, 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;
-    };
-}>>;
 type StyledItemProps = React.ComponentProps<typeof StyledItem>;
 declare const Item: React.FC<StyledItemProps & Props> & SubComponents;
 export { Item, ItemInnerContainerClassName };

package/dist/components/layout/list/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AA+BD,QAAA,MAAM,2BAA2B,QAAkC,CAAC;AAEpE,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCd,CAAC;AAEH,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AAuB/D,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,GAAG,KAAK,CAAC,GAAG,aA+C/C,CAAC;AAKF,OAAO,EAAE,IAAI,EAAE,2BAA2B,EAAE,CAAC;AAE7C,YAAY,EACR,KAAK,IAAI,SAAS,EAClB,aAAa,IAAI,iBAAiB,GACrC,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAoC,UAAU,EAAgB,MAAM,eAAe,CAAC;AAE3F,UAAU,SAAS;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,KAAK,KAAK,GAAG,GAAG,MAAM,EAAE,GAAG,EAAE,CAAC;AAE9B,KAAK,qBAAqB,GACpB,KAAK,GACL,GAAG,KAAK,IAAI,KAAK,EAAE,GACnB,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC5B,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACrC,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAC9C,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACvD,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAChE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GACzE,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,GAClF,GAAG,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;AAElG,UAAU,KAAK;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;IAC7D,KAAK,CAAC,EAAE,qBAAqB,CAAC;CACjC;AAED,UAAU,aAAa;IACnB,KAAK,EAAE,OAAO,KAAK,CAAC;IACpB,KAAK,EAAE,OAAO,KAAK,CAAC;CACvB;AAKD,QAAA,MAAM,2BAA2B,QAAkC,CAAC;AACpE,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC;AA4B/D,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,GAAG,KAAK,CAAC,GAAG,aA+C/C,CAAC;AAKF,OAAO,EAAE,IAAI,EAAE,2BAA2B,EAAE,CAAC;AAE7C,YAAY,EACR,KAAK,IAAI,SAAS,EAClB,aAAa,IAAI,iBAAiB,GACrC,CAAC"}

package/dist/components/layout/list/Item.js

@@ -20,55 +20,14 @@ const Icon_1 = require("../../icons/Icon");
 const theme_1 = require("../../../theme");
 const Value_1 = require("./Value");
 const Label_1 = require("./Label");
-const iconStyles = {
-    width: (0, theme_1.pxToRem)(7),
-    marginRight: (0, theme_1.pxToRem)(10),
-    display: "inline-block",
-};
-const StyledIcon = (0, theme_1.styled)(Icon_1.Icon, iconStyles);
-const StyledNoIcon = (0, theme_1.styled)("span", iconStyles);
-const icon = react_1.default.createElement(StyledIcon, { name: Icon_1.ICON.forward });
-const noIcon = react_1.default.createElement(StyledNoIcon, null);
-const StyledInnerContainer = (0, theme_1.styled)("div", {
+const Item_styled_1 = require("./Item.styled");
+const icon = react_1.default.createElement(Item_styled_1.StyledIcon, { name: Icon_1.ICON.forward });
+const noIcon = react_1.default.createElement(Item_styled_1.StyledNoIcon, null);
+const ItemInnerContainerClassName = Item_styled_1.StyledInnerContainer.toString();
+exports.ItemInnerContainerClassName = ItemInnerContainerClassName;
+const ArrowHolder = (0, theme_1.styled)("div", {
     display: "flex",
-    minHeight: (0, theme_1.dimensionsPxToRem)(174),
     alignItems: "center",
-    gap: "1rem",
-    border: "none",
-    background: "none",
-    width: "100%",
-    textAlign: "left",
-    fontFamily: "inherit",
-    fontSize: "inherit",
-});
-const ItemInnerContainerClassName = StyledInnerContainer.toString();
-exports.ItemInnerContainerClassName = ItemInnerContainerClassName;
-const StyledItem = (0, theme_1.styled)("li", {
-    "listStyleType": "none",
-    "margin": 0,
-    "padding": 0,
-    "fontSize": (0, theme_1.fontPxToRem)(34),
-    "&:not(:first-child)": {
-        borderTop: "0.37px solid $headerBorder",
-    },
-    "> *": {
-        display: "block",
-        padding: 0,
-        textDecoration: "none",
-    },
-    "variants": {
-        inset: {
-            true: {
-                paddingLeft: (0, theme_1.dimensionsPxToRem)(37),
-                paddingRight: (0, theme_1.dimensionsPxToRem)(37),
-            },
-        },
-        selected: {
-            true: {
-                color: "$mainColor",
-            },
-        },
-    },
 });
 const Item = (_a) => {
     var { href, to, onClick, Link, ratio } = _a, props = __rest(_a, ["href", "to", "onClick", "Link", "ratio"]);
@@ -84,7 +43,7 @@ const Item = (_a) => {
         if (index in r) {
             flex = r[index];
         }
-        return react_1.default.createElement("div", { style: flex ? { flex } : undefined },
+        return react_1.default.createElement(ArrowHolder, { css: flex ? { flex } : {} },
             pre,
             child);
     });
@@ -92,20 +51,20 @@ const Item = (_a) => {
         if (!Link) {
             throw new TypeError("`to` prop given without `Link` component");
         }
-        return (react_1.default.createElement(StyledItem, Object.assign({}, props),
+        return (react_1.default.createElement(Item_styled_1.StyledItem, Object.assign({}, props),
             react_1.default.createElement(Link, { href: to },
-                react_1.default.createElement(StyledInnerContainer, { as: "a", href: to }, ren))));
+                react_1.default.createElement(Item_styled_1.StyledInnerContainer, { as: "a", href: to }, ren))));
     }
     if (href) {
-        return (react_1.default.createElement(StyledItem, Object.assign({}, props),
-            react_1.default.createElement(StyledInnerContainer, { as: "a", href: href, onClick: onClick }, ren)));
+        return (react_1.default.createElement(Item_styled_1.StyledItem, Object.assign({}, props),
+            react_1.default.createElement(Item_styled_1.StyledInnerContainer, { as: "a", href: href, onClick: onClick }, ren)));
     }
     if (onClick) {
-        return (react_1.default.createElement(StyledItem, Object.assign({}, props),
-            react_1.default.createElement(StyledInnerContainer, { as: "button", onClick: onClick }, ren)));
+        return (react_1.default.createElement(Item_styled_1.StyledItem, Object.assign({}, props),
+            react_1.default.createElement(Item_styled_1.StyledInnerContainer, { as: "button", onClick: onClick }, ren)));
     }
-    return react_1.default.createElement(StyledItem, Object.assign({}, props),
-        react_1.default.createElement(StyledInnerContainer, null, ren));
+    return react_1.default.createElement(Item_styled_1.StyledItem, Object.assign({}, props),
+        react_1.default.createElement(Item_styled_1.StyledInnerContainer, null, ren));
 };
 exports.Item = Item;
 Item.Label = Label_1.Label;

package/dist/components/layout/list/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,2CAA8C;AAC9C,0CAAiF;AAEjF,mCAAgC;AAChC,mCAAgC;AAoBhC,MAAM,UAAU,GAAG;IAEf,KAAK,EAAE,IAAA,eAAO,EAAC,CAAC,CAAC;IAEjB,WAAW,EAAE,IAAA,eAAO,EAAC,EAAE,CAAC;IACxB,OAAO,EAAE,cAAc;CAC1B,CAAC;AAEF,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,WAAI,EAAE,UAAU,CAAC,CAAC;AAC5C,MAAM,YAAY,GAAG,IAAA,cAAM,EAAC,MAAM,EAAE,UAAU,CAAC,CAAC;AAEhD,MAAM,IAAI,GAAG,8BAAC,UAAU,IAAC,IAAI,EAAE,WAAI,CAAC,OAAO,GAAI,CAAC;AAChD,MAAM,MAAM,GAAG,8BAAC,YAAY,OAAG,CAAC;AAEhC,MAAM,oBAAoB,GAAG,IAAA,cAAM,EAAC,KAAK,EAAE;IACvC,OAAO,EAAE,MAAM;IAEf,SAAS,EAAE,IAAA,yBAAiB,EAAC,GAAG,CAAC;IACjC,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,MAAM;IAEX,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,SAAS;IACrB,QAAQ,EAAE,SAAS;CACtB,CAAC,CAAC;AAEH,MAAM,2BAA2B,GAAG,oBAAoB,CAAC,QAAQ,EAAE,CAAC;AA+GrD,kEAA2B;AA7G1C,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,EAAE;IAC5B,eAAe,EAAE,MAAM;IACvB,QAAQ,EAAE,CAAC;IACX,SAAS,EAAE,CAAC;IAEZ,UAAU,EAAE,IAAA,mBAAW,EAAC,EAAE,CAAC;IAE3B,qBAAqB,EAAE;QACnB,SAAS,EAAE,4BAA4B;KAC1C;IAED,KAAK,EAAE;QACH,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,CAAC;QACV,cAAc,EAAE,MAAM;KACzB;IAED,UAAU,EAAE;QACR,KAAK,EAAE;YACH,IAAI,EAAE;gBAEF,WAAW,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;gBAElC,YAAY,EAAE,IAAA,yBAAiB,EAAC,EAAE,CAAC;aACtC;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE;gBACF,KAAK,EAAE,YAAY;aACtB;SACJ;KACJ;CACJ,CAAC,CAAC;AAyBH,MAAM,IAAI,GAAsD,CAAC,EAA4C,EAAE,EAAE;QAAhD,EAAE,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,OAAY,EAAP,KAAK,cAA1C,0CAA4C,CAAF;IACvG,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAExC,MAAM,GAAG,GAAG,OAAO,KAAK,CAAC,QAAQ,KAAK,SAAS;QAC3C,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;QAClC,CAAC,CAAC,IAAI,CAAC;IAEX,MAAM,GAAG,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC5D,IAAI,IAAI,GAAG,SAAS,CAAC;QACrB,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,MAAM,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,aAAK,EAAE,CAAC;YAC7F,OAAO,KAAK,CAAC;QACjB,CAAC;QACD,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;YACb,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;QACD,OAAO,uCAAK,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS;YAAG,GAAG;YAAE,KAAK,CAAO,CAAC;IACvE,CAAC,CAAC,CAAC;IAEH,IAAI,EAAE,EAAE,CAAC;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,MAAM,IAAI,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACpE,CAAC;QAED,OAAO,CACH,8BAAC,UAAU,oBAAK,KAAK;YACjB,8BAAC,IAAI,IAAC,IAAI,EAAE,EAAE;gBAAE,8BAAC,oBAAoB,IAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,IAAG,GAAG,CAAwB,CAAO,CACnF,CAChB,CAAC;IACN,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACP,OAAO,CACH,8BAAC,UAAU,oBAAK,KAAK;YACjB,8BAAC,oBAAoB,IAAC,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,IAAG,GAAG,CAAwB,CAChF,CAChB,CAAC;IACN,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,8BAAC,UAAU,oBAAK,KAAK;YACjB,8BAAC,oBAAoB,IAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,IAAG,GAAG,CAAwB,CACzE,CAChB,CAAC;IACN,CAAC;IAED,OAAO,8BAAC,UAAU,oBAAK,KAAK;QAAE,8BAAC,oBAAoB,QAAE,GAAG,CAAwB,CAAa,CAAC;AAClG,CAAC,CAAC;AAKO,oBAAI;AAHb,IAAI,CAAC,KAAK,GAAG,aAAK,CAAC;AACnB,IAAI,CAAC,KAAK,GAAG,aAAK,CAAC"}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.tsx"],"names":[],"mappings":"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"}

package/dist/components/layout/list/Item.stories.d.ts

@@ -5,6 +5,7 @@ type Story = StoryObj<typeof Item>;
 declare const Primary: Story;
 declare const Alignment: Story;
 declare const OnClick: Story;
-export { Primary, Alignment, OnClick, };
+declare const Complex: Story;
+export { Primary, Alignment, OnClick, Complex, };
 export default meta;
 //# sourceMappingURL=Item.stories.d.ts.map

package/dist/components/layout/list/Item.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,QAAA,MAAM,IAAI,EAAE,IAYX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,QAAA,MAAM,OAAO,EAAE,KASd,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,KAYhB,CAAC;AAEF,QAAA,MAAM,OAAO,EAAE,KAUd,CAAC;AAEF,OAAO,EACH,OAAO,EACP,SAAS,EACT,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Item.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAW9B,QAAA,MAAM,IAAI,EAAE,IAoBX,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,QAAA,MAAM,OAAO,EAAE,KA0Bd,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,KAkBhB,CAAC;AAEF,QAAA,MAAM,OAAO,EAAE,KAgBd,CAAC;AAEF,QAAA,MAAM,OAAO,EAAE,KAiBd,CAAC;AAEF,OAAO,EACH,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,GACV,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/layout/list/Item.stories.js

@@ -3,11 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OnClick = exports.Alignment = exports.Primary = void 0;
+exports.Complex = exports.OnClick = exports.Alignment = exports.Primary = void 0;
 const react_1 = __importDefault(require("react"));
+const utils_1 = require("@ezez/utils");
 const NextLink_1 = require("../../../demo/NextLink");
 const Item_1 = require("./Item");
 const List_1 = require("./List");
+const Label_1 = require("./Label");
+const Value_1 = require("./Value");
+const demoControl = {
+    table: {
+        category: "Demo controls",
+    },
+};
 const meta = {
     title: "Components/Layout/List/Item",
     component: Item_1.Item,
@@ -16,20 +24,32 @@ const meta = {
         inset: {
             type: "boolean",
         },
+        selected: {
+            type: "boolean",
+        },
         Link: {
             controls: "none",
         },
+        renderList: Object.assign(Object.assign({}, demoControl), { type: "boolean", name: "Render <List> around" }),
     },
 };
 const Primary = {
     args: {
         children: "I am a list item",
-        inset: false,
         Link: NextLink_1.NextLink,
     },
-    render: (args) => {
-        return react_1.default.createElement(List_1.List, null,
-            react_1.default.createElement(Item_1.Item, Object.assign({}, args)));
+    render: (rawProps) => {
+        const renderList = rawProps.renderList;
+        const args = (0, utils_1.omit)(rawProps, ["renderList"]);
+        const items = [
+            react_1.default.createElement(Item_1.Item, Object.assign({ key: 1 }, args)),
+            react_1.default.createElement(Item_1.Item, { key: 2 }, "Other item"),
+            react_1.default.createElement(Item_1.Item, { key: 3 }, "Other item"),
+        ];
+        if (renderList) {
+            return (react_1.default.createElement(List_1.List, null, items));
+        }
+        return (react_1.default.createElement("div", null, items));
     },
 };
 exports.Primary = Primary;
@@ -43,8 +63,10 @@ const Alignment = {
         ratio: "1/2/1",
     },
     render: (args) => {
-        return react_1.default.createElement(List_1.List, null,
-            react_1.default.createElement(Item_1.Item, Object.assign({}, args)));
+        return (react_1.default.createElement(List_1.List, null,
+            react_1.default.createElement(Item_1.Item, Object.assign({}, args)),
+            react_1.default.createElement(Item_1.Item, null, "Other item"),
+            react_1.default.createElement(Item_1.Item, null, "Other item")));
     },
 };
 exports.Alignment = Alignment;
@@ -56,10 +78,28 @@ const OnClick = {
         },
     },
     render: (args) => {
-        return react_1.default.createElement(List_1.List, null,
-            react_1.default.createElement(Item_1.Item, Object.assign({}, args)));
+        return (react_1.default.createElement(List_1.List, null,
+            react_1.default.createElement(Item_1.Item, Object.assign({}, args)),
+            react_1.default.createElement(Item_1.Item, null, "Other item"),
+            react_1.default.createElement(Item_1.Item, null, "Other item")));
     },
 };
 exports.OnClick = OnClick;
+const Complex = {
+    args: {
+        children: [
+            react_1.default.createElement(Label_1.Label, { key: "l" }, "Hi"),
+            react_1.default.createElement(Value_1.Value, { key: "v" }, "Value"),
+        ],
+        selected: true,
+    },
+    render: (args) => {
+        return (react_1.default.createElement(List_1.List, null,
+            react_1.default.createElement(Item_1.Item, Object.assign({}, args)),
+            react_1.default.createElement(Item_1.Item, null, "Other item"),
+            react_1.default.createElement(Item_1.Item, null, "Other item")));
+    },
+};
+exports.Complex = Complex;
 exports.default = meta;
 //# sourceMappingURL=Item.stories.js.map

package/dist/components/layout/list/Item.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAI1B,qDAAkD;AAElD,iCAA8B;AAC9B,iCAA8B;AAE9B,MAAM,IAAI,GAAS;IACf,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,WAAI;IACf,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC;IAC5B,QAAQ,EAAE;QACN,KAAK,EAAE;YACH,IAAI,EAAE,SAAS;SAClB;QACD,IAAI,EAAE;YACF,QAAQ,EAAE,MAAM;SACnB;KACJ;CACJ,CAAC;AAIF,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE,kBAAkB;QAC5B,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,mBAAQ;KACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,8BAAC,WAAI;YAAC,8BAAC,WAAI,oBAAK,IAAI,EAAI,CAAO,CAAC;IAC3C,CAAC;CACJ,CAAC;AA6BE,0BAAO;AA3BX,MAAM,SAAS,GAAU;IACrB,IAAI,EAAE;QACF,QAAQ,EAAE;YACN,uCAAK,GAAG,EAAE,KAAK,YAAa;YAC5B,uCAAK,GAAG,EAAE,KAAK,UAAW;YAC1B,uCAAK,GAAG,EAAE,KAAK,WAAY;SAC9B;QACD,KAAK,EAAE,OAAO;KACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,8BAAC,WAAI;YAAC,8BAAC,WAAI,oBAAK,IAAI,EAAI,CAAO,CAAC;IAC3C,CAAC;CACJ,CAAC;AAgBE,8BAAS;AAdb,MAAM,OAAO,GAAU;IACnB,IAAI,EAAE;QACF,QAAQ,EAAE,wDAAwD;QAClE,OAAO,EAAE,GAAG,EAAE;YACV,KAAK,CAAC,UAAU,CAAC,CAAC;QACtB,CAAC;KACJ;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACb,OAAO,8BAAC,WAAI;YAAC,8BAAC,WAAI,oBAAK,IAAI,EAAI,CAAO,CAAC;IAC3C,CAAC;CACJ,CAAC;AAKE,0BAAO;AAGX,kBAAe,IAAI,CAAC"}
+{"version":3,"file":"Item.stories.js","sourceRoot":"","sources":["../../../../src/components/layout/list/Item.stories.tsx"],"names":[],"mappings":"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"}