react-miui 0.28.3 → 0.29.0

package/esm/components/ui/stats/Stats.stories.js

@@ -0,0 +1,104 @@
+import React from "react";
+import { styled } from "../../../theme.js";
+import { Div } from "../../native/index.js";
+import { Stats, StatsLabelSelector, StatsValueSelector, StatsItemSelector, StatsSeparatorSelector, } from "./Stats.js";
+const meta = {
+    title: "UI/Stats",
+    component: Stats,
+    parameters: {
+        layout: "padded",
+    },
+    tags: ["autodocs"],
+};
+const sampleStats = [
+    {
+        label: "Temperature",
+        value: "32°C",
+    },
+    {
+        label: "Used",
+        value: "320.3 mAh",
+    },
+    {
+        label: "Used for",
+        value: "14h 32m",
+    },
+];
+const Default = {
+    render: () => (React.createElement(Div, { css: {
+            background: "$green1Darker",
+            height: "200px",
+            display: "flex",
+            alignItems: "flex-end",
+        } },
+        React.createElement(Stats, { stats: sampleStats }))),
+};
+const DarkVariant = {
+    render: () => (React.createElement(Div, { css: {
+            background: "$activeBg",
+            height: "200px",
+            display: "flex",
+            alignItems: "flex-end",
+        } },
+        React.createElement(Stats, { stats: sampleStats, variant: "dark" }))),
+};
+const WithMoreItems = {
+    render: () => {
+        const moreStats = [
+            ...sampleStats,
+            {
+                label: "Voltage",
+                value: "4.2V",
+            },
+            {
+                label: "Capacity",
+                value: "5000 mAh",
+            },
+        ];
+        return (React.createElement(Div, { css: {
+                background: "$green1Darker",
+                height: "200px",
+                display: "flex",
+                alignItems: "flex-end",
+            } },
+            React.createElement(Stats, { stats: moreStats })));
+    },
+};
+const CustomStyledStats = styled(Stats, {
+    "--stats-border": "1px solid rgba(0, 0, 100, 0.2)",
+    "--stats-bg": "linear-gradient(to bottom, rgba(100, 149, 237, 0.1), rgba(100, 149, 237, 0.2))",
+    "--stats-value-color": "#1a237e",
+    "--stats-label-color": "#3949ab",
+    "borderRadius": "8px 8px 0 0",
+    "boxShadow": "0 -2px 10px rgba(0, 0, 0, 0.05)",
+    [`& ${StatsValueSelector}`]: {
+        fontSize: "1.5rem",
+        fontWeight: "bold",
+    },
+    [`& ${StatsLabelSelector}`]: {
+        textTransform: "uppercase",
+        letterSpacing: "0.05em",
+        fontSize: "0.8rem",
+    },
+    [`& ${StatsSeparatorSelector}`]: {
+        borderLeft: "2px dotted rgba(0, 0, 100, 0.2)",
+    },
+    [`& ${StatsItemSelector}`]: {
+        "transition": "transform 0.2s ease",
+        "&:hover": {
+            transform: "translateY(-5px)",
+        },
+    },
+});
+const CustomStyled = {
+    render: () => (React.createElement("div", { style: {
+            background: "#e8eaf6",
+            height: "200px",
+            display: "flex",
+            alignItems: "flex-end",
+        } },
+        React.createElement(CustomStyledStats, { stats: sampleStats }))),
+};
+export { Default, DarkVariant, WithMoreItems, CustomStyled };
+export default meta;
+//# sourceMappingURL=Stats.stories.js.map

package/esm/components/ui/stats/Stats.stories.js.map

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

package/esm/components/ui/stats/Stats.styled.d.ts

@@ -0,0 +1,419 @@
+declare const StyledStats: import("@stitches/react/types/styled-component").StyledComponent<"ul", {
+    variant?: "dark";
+}, {}, 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 Item: import("@stitches/react/types/styled-component").StyledComponent<"li", {}, {}, 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 Separator: import("@stitches/react/types/styled-component").StyledComponent<"li", {}, {}, 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 Label: import("@stitches/react/types/styled-component").StyledComponent<"span", {}, {}, 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 Value: import("@stitches/react/types/styled-component").StyledComponent<"span", {}, {}, 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 { StyledStats, Item, Separator, Label, Value, };
+//# sourceMappingURL=Stats.styled.d.ts.map

package/esm/components/ui/stats/Stats.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.styled.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyBf,CAAC;AAEH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAQR,CAAC;AAEH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAEb,CAAC;AAEH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIT,CAAC;AAEH,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAIT,CAAC;AAEH,OAAO,EACH,WAAW,EACX,IAAI,EACJ,SAAS,EACT,KAAK,EACL,KAAK,GACR,CAAC"}

package/esm/components/ui/stats/Stats.styled.js

@@ -0,0 +1,49 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+const StyledStats = styled("ul", {
+    "--stats-border": "1px solid rgba(255, 255, 255, .15)",
+    "--stats-bg": "rgba(255, 255, 255, .05)",
+    "--stats-value-color": "rgba(255, 255, 255, .9)",
+    "--stats-label-color": "rgba(255, 255, 255, .61)",
+    "display": "flex",
+    "width": "100%",
+    "padding": dimensionsPxToRem(60),
+    "margin": "0",
+    "borderTop": "var(--stats-border)",
+    "background": "var(--stats-bg)",
+    "backgroundClip": "padding-box",
+    "listStyleType": "none",
+    "variants": {
+        variant: {
+            dark: {
+                "--stats-border": "1px solid rgba(0, 0, 0, .15)",
+                "--stats-bg": "rgba(0, 0, 0, .05)",
+                "--stats-value-color": "rgba(0, 0, 0, .9)",
+                "--stats-label-color": "rgba(0, 0, 0, .61)",
+            },
+        },
+    },
+});
+const Item = styled("li", {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "column",
+    textAlign: "center",
+    gap: dimensionsPxToRem(20),
+});
+const Separator = styled("li", {
+    borderLeft: "var(--stats-border)",
+});
+const Label = styled("span", {
+    display: "block",
+    color: "var(--stats-label-color)",
+    fontSize: fontPxToRem(22),
+});
+const Value = styled("span", {
+    display: "block",
+    color: "var(--stats-value-color)",
+    fontSize: fontPxToRem(30),
+});
+export { StyledStats, Item, Separator, Label, Value, };
+//# sourceMappingURL=Stats.styled.js.map

package/esm/components/ui/stats/Stats.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/stats/Stats.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExE,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,EAAE;IAC7B,gBAAgB,EAAE,oCAAoC;IACtD,YAAY,EAAE,0BAA0B;IACxC,qBAAqB,EAAE,yBAAyB;IAChD,qBAAqB,EAAE,0BAA0B;IAEjD,SAAS,EAAE,MAAM;IACjB,OAAO,EAAE,MAAM;IACf,SAAS,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAChC,QAAQ,EAAE,GAAG;IACb,WAAW,EAAE,qBAAqB;IAClC,YAAY,EAAE,iBAAiB;IAC/B,gBAAgB,EAAE,aAAa;IAC/B,eAAe,EAAE,MAAM;IAEvB,UAAU,EAAE;QACR,OAAO,EAAE;YACL,IAAI,EAAE;gBACF,gBAAgB,EAAE,8BAA8B;gBAChD,YAAY,EAAE,oBAAoB;gBAClC,qBAAqB,EAAE,mBAAmB;gBAC1C,qBAAqB,EAAE,oBAAoB;aAC9C;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,EAAE;IACtB,IAAI,EAAE,CAAC;IACP,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,aAAa,EAAE,QAAQ;IACvB,SAAS,EAAE,QAAQ;IACnB,GAAG,EAAE,iBAAiB,CAAC,EAAE,CAAC;CAC7B,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,EAAE;IAC3B,UAAU,EAAE,qBAAqB;CACpC,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IACzB,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,0BAA0B;IACjC,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IACzB,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,0BAA0B;IACjC,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;CAC5B,CAAC,CAAC;AAEH,OAAO,EACH,WAAW,EACX,IAAI,EACJ,SAAS,EACT,KAAK,EACL,KAAK,GACR,CAAC"}

package/esm/components/ui/tabs/Item.d.ts

@@ -1,10 +1,14 @@
 import React from "react";
 import type { ObjectValue } from "../../../types/form";
-interface Props {
+type ItemProps = {
     value: ObjectValue;
     onClick: (value: string) => void;
     active: boolean;
-}
-declare const Item: React.FC<Props>;
-export { Item };
+};
+declare const Item: {
+    (props: ItemProps): React.ReactElement;
+    displayName: string;
+    toString(): string;
+};
+export { Item, type ItemProps };
 //# sourceMappingURL=Item.d.ts.map

package/esm/components/ui/tabs/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAI3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,UAAU,KAAK;IACX,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAUzB,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,KAAK,SAAS,GAAG;IACb,KAAK,EAAE,WAAW,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,MAAM,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,QAAA,MAAM,IAAI;YAAW,SAAS,GAAG,KAAK,CAAC,YAAY;;;CAUlD,CAAC;AAKF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC"}

package/esm/components/ui/tabs/Item.js

@@ -1,14 +1,12 @@
 import React, { useCallback } from "react";
-import classnames from "classnames";
-import styles from "./Item.module.scss";
+import { StyledItem } from "./Item.styled.js";
 const Item = (props) => {
     const handleClick = useCallback(() => {
         props.onClick(props.value.value);
-    }, [props.onClick, props.value.value, props.value.label]);
-    const cls = classnames(styles.button, {
-        [styles.active]: props.active,
-    });
-    return React.createElement("button", { onClick: handleClick, className: cls, type: "button" }, props.value.label);
+    }, [props.onClick, props.value.value]);
+    return (React.createElement(StyledItem, { onClick: handleClick, active: props.active, type: "button", "data-active": props.active }, props.value.label));
 };
+Item.displayName = "Item";
+Item.toString = () => StyledItem.toString();
 export { Item };
 //# sourceMappingURL=Item.js.map

package/esm/components/ui/tabs/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,UAAU,MAAM,YAAY,CAAC;AAIpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAQxC,MAAM,IAAI,GAAoB,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAE1D,MAAM,GAAG,GAAG,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE;QAClC,CAAC,MAAM,CAAC,MAAgB,CAAC,EAAE,KAAK,CAAC,MAAM;KAC1C,CAAC,CAAC;IAEH,OAAO,gCAAQ,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,IAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAU,CAAC;AACtG,CAAC,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Item.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAI3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAQ3C,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAsB,EAAE;IAClD,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAEvC,OAAO,CACH,oBAAC,UAAU,IAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,iBAAe,KAAK,CAAC,MAAM,IAC5F,KAAK,CAAC,KAAK,CAAC,KAAK,CACT,CAChB,CAAC;AACN,CAAC,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAC1B,IAAI,CAAC,QAAQ,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAkB,CAAC"}

package/esm/components/ui/tabs/Item.styled.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledItem: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+    active?: boolean | "true";
+}, {}, import("@stitches/react/types/css-util").CSS<{}, {}, {}, {}>>;
+//# sourceMappingURL=Item.styled.d.ts.map

package/esm/components/ui/tabs/Item.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Item.styled.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU;;oEAcrB,CAAC"}

package/esm/components/ui/tabs/Item.styled.js

@@ -0,0 +1,17 @@
+import { styled } from "@stitches/react";
+import { fontPxToRem } from "../../../theme.js";
+export const StyledItem = styled("button", {
+    border: "none",
+    padding: 0,
+    fontSize: fontPxToRem(29),
+    color: "var(--selector-text)",
+    background: "none",
+    variants: {
+        active: {
+            true: {
+                color: "var(--selector-active)",
+            },
+        },
+    },
+});
+//# sourceMappingURL=Item.styled.js.map

package/esm/components/ui/tabs/Item.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/tabs/Item.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,EAAE;IACvC,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,CAAC;IACV,QAAQ,EAAE,WAAW,CAAC,EAAE,CAAC;IACzB,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE,MAAM;IAElB,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,wBAAwB;aAClC;SACJ;KACJ;CACJ,CAAC,CAAC"}