@rovula/ui 0.0.31 → 0.0.32

package/dist/stories/ColorPreview.js

@@ -1,7 +1,77 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function ColorPreview({ colorName, colorCode, isSmall, }) {
-    if (isSmall) {
-        return (_jsxs("div", { className: " flex-1 h-[120px] flex flex-col rounded-xl shadow-lg overflow-hidden", children: [_jsx("div", { className: "flex flex-1", style: { backgroundColor: colorCode } }), _jsx("div", { className: "bg-white p-3 px-3  flex flex-col justify-center items-start", children: _jsx("h3", { className: "text-black leading-3 p-0", children: colorName }) })] }));
-    }
-    return (_jsxs("div", { className: " flex-1 h-[160px] flex flex-col rounded-xl shadow-lg overflow-hidden", children: [_jsx("div", { className: "flex flex-1", style: { backgroundColor: colorCode } }), _jsxs("div", { className: "bg-white p-3 px-6  flex flex-col justify-center items-start", children: [_jsx("h3", { className: "text-black leading-3 p-0 text-error", children: colorName }), _jsx("div", { className: "text-gray-600 leading-1 p-0 m-0", style: { fontSize: "8px" }, children: colorCode })] })] }));
-}
+import { srgbToHex } from "@/utils/colors";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "..";
+export const ColorBox = ({ className }) => {
+    const boxRef = useRef(null);
+    const [hex, setHex] = useState("");
+    const [isOpen, setOpen] = useState(false);
+    useEffect(() => {
+        if (boxRef.current) {
+            const bgColor = window.getComputedStyle(boxRef.current).backgroundColor;
+            const hexColor = srgbToHex(bgColor);
+            setHex(hexColor);
+        }
+    }, []);
+    useEffect(() => {
+        let time;
+        if (isOpen) {
+            setTimeout(() => {
+                setOpen(false);
+            }, 1000);
+        }
+        return () => {
+            if (time) {
+                clearTimeout(time);
+            }
+        };
+    }, [isOpen]);
+    return (_jsxs("div", { className: "flex flex-1 flex-col gap-1", children: [_jsxs(Popover, { open: isOpen, children: [_jsx(PopoverTrigger, { onClick: () => {
+                            if (className) {
+                                navigator.clipboard
+                                    .writeText(className)
+                                    .then(() => {
+                                    console.log("ClassName copied to clipboard");
+                                })
+                                    .catch((err) => {
+                                    console.error("Failed to copy className: ", err);
+                                });
+                            }
+                            setOpen(true);
+                        }, children: _jsx("div", { ref: boxRef, className: `${className} h-12 rounded border shadow` }) }), _jsx(PopoverContent, { className: "p-3 w-fit min-w-fit", children: "Copied to clipboard" })] }), _jsxs("div", { className: "text-gray-500 flex flex-col justify-center items-center", children: [_jsx("div", { style: { fontSize: 12, whiteSpace: "pre" }, children: className }), _jsx("div", { style: {
+                            fontSize: 12,
+                            textTransform: "uppercase",
+                            whiteSpace: "pre",
+                        }, children: hex || "Loading..." })] })] }));
+};
+export const ColorItems = ({ title, subTitle, colors, col = -1, }) => {
+    const gridColumnsClass = useMemo(() => {
+        if (col !== undefined) {
+            switch (col) {
+                case 1:
+                    return "grid grid-cols-1";
+                case 2:
+                    return "grid grid-cols-2";
+                case 3:
+                    return "grid grid-cols-3";
+                case 4:
+                    return "grid grid-cols-4";
+                case 5:
+                    return "grid grid-cols-5";
+                case 6:
+                    return "grid grid-cols-6";
+                case 7:
+                    return "grid grid-cols-7";
+                case 8:
+                    return "grid grid-cols-8";
+                case 9:
+                    return "grid grid-cols-9";
+                case 10:
+                    return "grid grid-cols-10";
+                default:
+                    return colors.length >= 8 ? "grid grid-cols-4" : `flex `;
+            }
+        }
+    }, [col]);
+    return (_jsxs("div", { className: "flex flex-wrap flex-col", children: [title && _jsx("div", { style: { fontSize: 16, fontWeight: "600" }, children: title }), subTitle && (_jsx("div", { style: { fontSize: 14, fontWeight: "600" }, children: subTitle })), _jsx("div", { className: ` gap-2 mt-3 ${gridColumnsClass}`, style: { marginTop: 12 }, children: colors.map((color) => (_jsx(ColorBox, { className: color }, color))) })] }));
+};

package/dist/theme/main-preset.js

@@ -204,6 +204,14 @@ module.exports = {
             fontFamily: "var(--small8-family, 'Poppins')",
           },
         ],
+        small9: [
+          "var(--small9-size, 8px)",
+          {
+            lineHeight: "var(--small9-line-height, 10px)",
+            fontWeight: "var(--small9-weight, 400)",
+            fontFamily: "var(--small9-family, 'Poppins')",
+          },
+        ],
         label1: [
           "var(--label-label1-size, 12px)",
           {

package/dist/theme/plugins/utilities/typography.js

@@ -74,6 +74,9 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small8": {
       "@apply text-small8": {},
     },
+    ".typography-small9": {
+      "@apply text-small9": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },

package/dist/theme/presets/colors.js

@@ -76,9 +76,6 @@ module.exports = {
         "function-default-hover-bg": withColorMixin(
           "--function-default-hover-bg"
         ),
-        "function-default-hover-bg": withColorMixin(
-          "--function-default-hover-bg"
-        ),
         "function-default-stroke": withColorMixin("--function-default-stroke"),
         "function-default-icon": withColorMixin("--function-default-icon"),
         "function-default-outline": withColorMixin(

package/dist/utils/colors.js

@@ -0,0 +1,31 @@
+export const srgbToHex = (color) => {
+    if (color.startsWith("color(")) {
+        const rgbValues = color.match(/([\d.]+)/g);
+        if (rgbValues && rgbValues.length >= 3) {
+            const [r, g, b] = rgbValues
+                .slice(0, 3)
+                .map((x) => Math.round(parseFloat(x) * 255));
+            let hex = `#${[r, g, b]
+                .map((x) => ("0" + x.toString(16)).slice(-2))
+                .join("")}`;
+            if (rgbValues.length === 4) {
+                const alpha = Math.round(parseFloat(rgbValues[3]) * 255);
+                hex += ("0" + alpha.toString(16)).slice(-2);
+            }
+            return hex;
+        }
+    }
+    else if (color.startsWith("#")) {
+        return color;
+    }
+    else {
+        const rgbValues = color.match(/\d+/g);
+        if (rgbValues && rgbValues.length >= 3) {
+            return `#${rgbValues
+                .slice(0, 3)
+                .map((x) => ("0" + parseInt(x).toString(16)).slice(-2))
+                .join("")}`;
+        }
+    }
+    return color;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Text/Text.stories.tsx

@@ -14,7 +14,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full  bg-base-bg2">
         <Story />
       </div>
     ),
@@ -45,6 +45,10 @@ const variant: any = [
   "small3",
   "small4",
   "small5",
+  "small6",
+  "small7",
+  "small8",
+  "small9",
   "label1",
   "label2",
   "buttonL",