react-miui 0.25.1 → 0.27.0

package/esm/components/ui/toolButton/ToolButton.styled.d.ts

@@ -0,0 +1,88 @@
+declare const ToolButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+    inline?: boolean | "true";
+    variant?: "secondary" | "secondaryOnLight";
+}, {}, 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;
+    };
+}>>;
+export { ToolButton, };
+//# sourceMappingURL=ToolButton.styled.d.ts.map

package/esm/components/ui/toolButton/ToolButton.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolButton.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8Cd,CAAC;AAEH,OAAO,EACH,UAAU,GACb,CAAC"}

package/esm/components/ui/toolButton/ToolButton.styled.js

@@ -0,0 +1,46 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme.js";
+const ToolButton = styled("button", {
+    "height": dimensionsPxToRem(79),
+    "borderRadius": dimensionsPxToRem(10),
+    "fontWeight": "bold",
+    "fontSize": fontPxToRem(23),
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "paddingInline": dimensionsPxToRem(16),
+    "background": "white",
+    "boxSizing": "border-box",
+    "border": `${dimensionsPxToRem(6)} solid transparent`,
+    "color": "$toolButtonText",
+    "&:hover": {
+        background: "#ffffffcc",
+    },
+    "variants": {
+        inline: {
+            true: {
+                width: "auto",
+                display: "inline-flex",
+            },
+        },
+        variant: {
+            secondary: {
+                "border": `${dimensionsPxToRem(6)} solid #ffffff42`,
+                "background": "none",
+                "&:hover": {
+                    background: "#ffffff22",
+                },
+                "color": "white",
+            },
+            secondaryOnLight: {
+                "border": `${dimensionsPxToRem(6)} solid $border`,
+                "background": "none",
+                "color": "$text",
+                "&:hover": {
+                    borderColor: "$buttonBorder",
+                },
+            },
+        },
+    },
+});
+export { ToolButton, };
+//# sourceMappingURL=ToolButton.styled.js.map

package/esm/components/ui/toolButton/ToolButton.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolButton.styled.js","sourceRoot":"","sources":["../../../../src/components/ui/toolButton/ToolButton.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAKxE,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,EAAE;IAChC,QAAQ,EAAE,iBAAiB,CAAC,EAAE,CAAC;IAC/B,cAAc,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,UAAU,EAAE,WAAW,CAAC,EAAE,CAAC;IAC3B,SAAS,EAAE,MAAM;IACjB,YAAY,EAAE,QAAQ;IACtB,gBAAgB,EAAE,QAAQ;IAC1B,eAAe,EAAE,iBAAiB,CAAC,EAAE,CAAC;IACtC,YAAY,EAAE,OAAO;IACrB,WAAW,EAAE,YAAY;IACzB,QAAQ,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,oBAAoB;IAErD,OAAO,EAAE,iBAAiB;IAC1B,SAAS,EAAE;QACP,UAAU,EAAE,WAAW;KAC1B;IAED,UAAU,EAAE;QACR,MAAM,EAAE;YACJ,IAAI,EAAE;gBACF,KAAK,EAAE,MAAM;gBACb,OAAO,EAAE,aAAa;aACzB;SACJ;QACD,OAAO,EAAE;YACL,SAAS,EAAE;gBACP,QAAQ,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;gBACnD,YAAY,EAAE,MAAM;gBAEpB,SAAS,EAAE;oBACP,UAAU,EAAE,WAAW;iBAC1B;gBACD,OAAO,EAAE,OAAO;aACnB;YACD,gBAAgB,EAAE;gBACd,QAAQ,EAAE,GAAG,iBAAiB,CAAC,CAAC,CAAC,gBAAgB;gBACjD,YAAY,EAAE,MAAM;gBACpB,OAAO,EAAE,OAAO;gBAEhB,SAAS,EAAE;oBACP,WAAW,EAAE,eAAe;iBAC/B;aACJ;SACJ;KACJ;CACJ,CAAC,CAAC;AAEH,OAAO,EACH,UAAU,GACb,CAAC"}

package/esm/index.d.ts

@@ -20,6 +20,7 @@ export * from "./components/ui/button/Button";
 export * from "./components/ui/directionPad/Pad";
 export * from "./components/ui/drawer/Drawer";
 export * from "./components/ui/keyValue/KeyValue";
+export * from "./components/ui/line/Line";
 export * from "./components/ui/loader/CoveringLoader";
 export * from "./components/ui/loader/FullLoader";
 export * from "./components/ui/loader/Loader";
@@ -34,6 +35,7 @@ export * from "./components/ui/pop/PopOption";
 export * from "./components/ui/stats/Stats";
 export * from "./components/ui/tabs/Selector";
 export * from "./components/ui/toaster/Toaster";
+export * from "./components/ui/toolButton/ToolButton";
 export * from "./components/utils/HandleEsc";
 export * from "./components/utils/If";
 export * from "./components/utils/Spacer";

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAEhD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAEjC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAEjC,YAAY,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAExC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/esm/index.js

@@ -20,6 +20,7 @@ export * from "./components/ui/button/Button.js";
 export * from "./components/ui/directionPad/Pad.js";
 export * from "./components/ui/drawer/Drawer.js";
 export * from "./components/ui/keyValue/KeyValue.js";
+export * from "./components/ui/line/Line.js";
 export * from "./components/ui/loader/CoveringLoader.js";
 export * from "./components/ui/loader/FullLoader.js";
 export * from "./components/ui/loader/Loader.js";
@@ -34,6 +35,7 @@ export * from "./components/ui/pop/PopOption.js";
 export * from "./components/ui/stats/Stats.js";
 export * from "./components/ui/tabs/Selector.js";
 export * from "./components/ui/toaster/Toaster.js";
+export * from "./components/ui/toolButton/ToolButton.js";
 export * from "./components/utils/HandleEsc.js";
 export * from "./components/utils/If.js";
 export * from "./components/utils/Spacer.js";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAE5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAEhD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAIjC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,iCAAiC,CAAC;AAChD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qCAAqC,CAAC;AACpD,cAAc,0BAA0B,CAAC;AAEzC,cAAc,yBAAyB,CAAC;AAExC,cAAc,yBAAyB,CAAC;AAExC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAEhD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uCAAuC,CAAC;AAEtD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,kBAAkB,CAAC;AAIjC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC"}

package/esm/theme.d.ts

@@ -66,6 +66,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
         scrollbarsThumb: string;
         scrollbarsBg: string;
         tableStripedBg: string;
+        toolButtonText: string;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     mx: (value: string | number) => {
@@ -158,6 +159,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
         scrollbarsThumb: string;
         scrollbarsBg: string;
         tableStripedBg: string;
+        toolButtonText: string;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     mx: (value: string | number) => {
@@ -241,6 +243,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
         scrollbarsThumb: string;
         scrollbarsBg: string;
         tableStripedBg: string;
+        toolButtonText: string;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     mx: (value: string | number) => {
@@ -339,6 +342,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
             scrollbarsThumb: string;
             scrollbarsBg: string;
             tableStripedBg: string;
+            toolButtonText: string;
         };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         mx: (value: string | number) => {
@@ -421,6 +425,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
         scrollbarsThumb: string;
         scrollbarsBg: string;
         tableStripedBg: string;
+        toolButtonText: string;
     };
 }, import("@stitches/react/types/config").DefaultThemeMap, {
     mx: (value: string | number) => {
@@ -503,6 +508,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
             scrollbarsThumb: string;
             scrollbarsBg: string;
             tableStripedBg: string;
+            toolButtonText: string;
         };
     }, import("@stitches/react/types/config").DefaultThemeMap, {
         mx: (value: string | number) => {
@@ -591,6 +597,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
         scrollbarsThumb: import("@stitches/react/types/theme").Token<"scrollbarsThumb", string, "colors", "">;
         scrollbarsBg: import("@stitches/react/types/theme").Token<"scrollbarsBg", string, "colors", "">;
         tableStripedBg: import("@stitches/react/types/theme").Token<"tableStripedBg", string, "colors", "">;
+        toolButtonText: import("@stitches/react/types/theme").Token<"toolButtonText", string, "colors", "">;
     };
 }, createTheme: <Argument0 extends string | ({
     colors?: {
@@ -651,6 +658,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
         scrollbarsThumb?: string | number | boolean;
         scrollbarsBg?: string | number | boolean;
         tableStripedBg?: string | number | boolean;
+        toolButtonText?: string | number | boolean;
     };
 } & {
     [x: string]: {
@@ -716,6 +724,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
         scrollbarsThumb?: string | number | boolean;
         scrollbarsBg?: string | number | boolean;
         tableStripedBg?: string | number | boolean;
+        toolButtonText?: string | number | boolean;
     };
 } & {
     [x: string]: {
@@ -787,6 +796,7 @@ declare const styled: <Type extends import("react").ComponentType<any> | keyof J
             scrollbarsThumb: string;
             scrollbarsBg: string;
             tableStripedBg: string;
+            toolButtonText: string;
         };
     };
     themeMap: import("@stitches/react/types/config").DefaultThemeMap;

package/esm/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/esm/theme.js

@@ -68,6 +68,7 @@ const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, confi
             scrollbarsThumb: "#737373",
             scrollbarsBg: "transparent",
             tableStripedBg: "#fafafa",
+            toolButtonText: "#666e80",
         },
     },
     utils: {

package/esm/theme.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.25.1",
+  "version": "0.27.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "scripts": {

package/src/components/ui/line/Line.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+import { omit } from "@ezez/utils";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Line } from "./Line";
+
+const meta: Meta = {
+    title: "Components/UI/Line",
+    component: Line,
+    tags: ["autodocs", "ui"],
+    argTypes: {
+        "--miui-line-size": {
+            description: "CSS property that defines length of the line",
+        },
+    },
+    args: {
+        "vertical": false,
+        "--miui-line-size": "100px",
+    },
+};
+
+type Story = StoryObj<typeof Line>;
+
+const Primary: Story = {
+    render: (args) => {
+        type LineSizeObject = { "--miui-line-size": string };
+        type ExtraArgs = LineSizeObject & typeof args;
+
+        const lineSize = (args as ExtraArgs)["--miui-line-size"];
+        const props = omit(args as ExtraArgs, ["--miui-line-size"]);
+        return <Line {...props} css={{ "--miui-line-size": lineSize }} />;
+    },
+};
+
+export default meta;
+export {
+    Primary,
+};

package/src/components/ui/line/Line.tsx

@@ -0,0 +1,28 @@
+import { styled } from "../../../theme";
+
+/**
+ * A visual separator
+ */
+const Line = styled("hr", {
+    "--miui-line-size": "100px",
+    "width": "var(--miui-line-size)",
+    "maxWidth": "100%",
+    "height": 1,
+    "backgroundColor": "$border",
+    "border": "none",
+    "margin": "auto",
+
+    "variants": {
+        vertical: {
+            true: {
+                width: 1,
+                height: "var(--miui-line-size)",
+                maxHeight: "100%",
+            },
+        },
+    },
+});
+
+export {
+    Line,
+};

package/src/components/ui/toolButton/ToolButton.stories.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Div } from "../../native";
+
+import { ToolButton } from "./ToolButton";
+
+const meta: Meta = {
+    title: "Components/UI/ToolButton",
+    component: ToolButton,
+    tags: ["autodocs", "ui"],
+    argTypes: {
+        variant: {
+            control: {
+                type: "select",
+            },
+            options: ["default", "secondary", "secondaryOnLight"],
+        },
+    },
+};
+
+type Story = StoryObj<typeof ToolButton>;
+
+const Primary: Story = {
+    args: {
+        children: "Click me",
+        onClick: () => { alert("Clicked"); },
+    },
+    render: args => {
+        return (
+            <Div css={{ background: args.variant === "secondaryOnLight" ? "white" : "$blue5", padding: 50 }}>
+                <ToolButton {...args} />
+            </Div>
+        );
+    },
+};
+export default meta;
+export {
+    Primary,
+};

package/src/components/ui/toolButton/ToolButton.styled.ts

@@ -0,0 +1,56 @@
+import { dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
+
+/**
+ * Small buttons for toolbars
+ */
+const ToolButton = styled("button", {
+    "height": dimensionsPxToRem(79),
+    "borderRadius": dimensionsPxToRem(10),
+    "fontWeight": "bold",
+    "fontSize": fontPxToRem(23),
+    "display": "flex",
+    "alignItems": "center",
+    "justifyContent": "center",
+    "paddingInline": dimensionsPxToRem(16),
+    "background": "white",
+    "boxSizing": "border-box",
+    "border": `${dimensionsPxToRem(6)} solid transparent`,
+
+    "color": "$toolButtonText",
+    "&:hover": {
+        background: "#ffffffcc",
+    },
+
+    "variants": {
+        inline: {
+            true: {
+                width: "auto",
+                display: "inline-flex",
+            },
+        },
+        variant: {
+            secondary: {
+                "border": `${dimensionsPxToRem(6)} solid #ffffff42`,
+                "background": "none",
+
+                "&:hover": {
+                    background: "#ffffff22",
+                },
+                "color": "white",
+            },
+            secondaryOnLight: {
+                "border": `${dimensionsPxToRem(6)} solid $border`,
+                "background": "none",
+                "color": "$text",
+
+                "&:hover": {
+                    borderColor: "$buttonBorder",
+                },
+            },
+        },
+    },
+});
+
+export {
+    ToolButton,
+};

package/src/components/ui/toolButton/ToolButton.ts

@@ -0,0 +1 @@
+export { ToolButton } from "./ToolButton.styled";

package/src/index.ts

@@ -25,6 +25,7 @@ export * from "./components/ui/button/Button";
 export * from "./components/ui/directionPad/Pad";
 export * from "./components/ui/drawer/Drawer";
 export * from "./components/ui/keyValue/KeyValue";
+export * from "./components/ui/line/Line";
 export * from "./components/ui/loader/CoveringLoader";
 export * from "./components/ui/loader/FullLoader";
 export * from "./components/ui/loader/Loader";
@@ -37,9 +38,9 @@ export * from "./components/ui/progress/Progress";
 export * from "./components/ui/pop/Pop";
 export * from "./components/ui/pop/PopOption";
 export * from "./components/ui/stats/Stats";
-
 export * from "./components/ui/tabs/Selector";
 export * from "./components/ui/toaster/Toaster";
+export * from "./components/ui/toolButton/ToolButton";
 
 export * from "./components/utils/HandleEsc";
 export * from "./components/utils/If";

package/src/theme.ts

@@ -97,6 +97,8 @@ const {
             scrollbarsThumb: "#737373",
             scrollbarsBg: "transparent",
             tableStripedBg: "#fafafa",
+
+            toolButtonText: "#666e80",
         },
     },
     utils: {

package/b.mjs

@@ -1,2 +0,0 @@
-const x = Buffer.from("xd");
-console.log(x.type)