@rovula/ui 0.0.21 → 0.0.23

package/dist/stories/ColorGroupPreview.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ColorPreview from "./ColorPreview";
 export default function ColorGroupPreview() {
-    var style = getComputedStyle(document.body);
-    var colorGroups = {
+    const style = getComputedStyle(document.body);
+    const colorGroups = {
         "Main Colors": {
             prefix: "--main-color",
             variable: [
@@ -468,11 +468,8 @@ export default function ColorGroupPreview() {
             variable: ["--common-white", "--common-black"],
         },
     };
-    return (_jsx("div", { className: "flex flex-col gap-20", children: Object.entries(colorGroups).map(function (_a) {
-            var groupName = _a[0], colorVariables = _a[1];
-            return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h3", { className: "text-black m-0", children: groupName }), _jsx("div", { className: "flex flex-row flex-wrap gap-3", children: colorVariables.variable.map(function (colorVariable) {
-                            var _a;
-                            return (_jsx(ColorPreview, { colorName: (_a = colorVariable.split("-").reverse()) === null || _a === void 0 ? void 0 : _a[0], colorCode: style.getPropertyValue(colorVariable).trim(), isSmall: colorVariables.variable.length > 7 }, colorVariable));
-                        }) })] }, groupName));
-        }) }));
+    return (_jsx("div", { className: "flex flex-col gap-20", children: Object.entries(colorGroups).map(([groupName, colorVariables]) => (_jsxs("div", { className: "flex flex-col", children: [_jsx("h3", { className: "text-black m-0", children: groupName }), _jsx("div", { className: "flex flex-row flex-wrap gap-3", children: colorVariables.variable.map((colorVariable) => {
+                        var _a;
+                        return (_jsx(ColorPreview, { colorName: (_a = colorVariable.split("-").reverse()) === null || _a === void 0 ? void 0 : _a[0], colorCode: style.getPropertyValue(colorVariable).trim(), isSmall: colorVariables.variable.length > 7 }, colorVariable));
+                    }) })] }, groupName))) }));
 }

package/dist/stories/ColorPreview.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function ColorPreview(_a) {
-    var colorName = _a.colorName, colorCode = _a.colorCode, isSmall = _a.isSmall;
+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 }) })] }));
     }

package/dist/theme/main-preset.js

@@ -180,6 +180,30 @@ module.exports = {
             fontFamily: "var(--small5-family, 'Poppins')",
           },
         ],
+        small6: [
+          "var(--small5-size, 10px)",
+          {
+            lineHeight: "var(--small6-line-height, 12px)",
+            fontWeight: "var(--small6-weight, 600)",
+            fontFamily: "var(--small6-family, 'Poppins')",
+          },
+        ],
+        small7: [
+          "var(--small7-size, 8px)",
+          {
+            lineHeight: "var(--small7-line-height, 10px)",
+            fontWeight: "var(--small7-weight, 600)",
+            fontFamily: "var(--small7-family, 'Poppins')",
+          },
+        ],
+        small8: [
+          "var(--small8-size, 8px)",
+          {
+            lineHeight: "var(--small8-line-height, 10px)",
+            fontWeight: "var(--small8-weight, 700)",
+            fontFamily: "var(--small8-family, 'Poppins')",
+          },
+        ],
         label1: [
           "var(--label-label1-size, 12px)",
           {

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

@@ -65,6 +65,15 @@ module.exports = plugin(function ({ addUtilities }) {
     ".typography-small5": {
       "@apply text-small5": {},
     },
+    ".typography-small6": {
+      "@apply text-small6": {},
+    },
+    ".typography-small7": {
+      "@apply text-small7": {},
+    },
+    ".typography-small8": {
+      "@apply text-small8": {},
+    },
     ".typography-label1": {
       "@apply text-label1": {},
     },

package/dist/theme/presets/colors.js

@@ -36,7 +36,7 @@ module.exports = {
         ...generateColorConfig("primary", "primary-ramps-primary"),
         ...generateColorConfig("secondary", "secondary-ramps-secondary"),
         ...generateColorConfig("tertiary", "tertiary-ramps-tertiary"),
-        ...generateColorConfig("grey", "grey"),
+        ...generateColorConfig("grey", "grey-grey"),
 
         ...generateColorConfig("grey2", "grey2-grey2", secondaryRange),
         ...generateColorConfig("info", "info-info", secondaryRange),
@@ -80,6 +80,13 @@ module.exports = {
         "base-popup-foreground": withColorMixin(
           "--base-color-popup-foreground"
         ),
+        "base-stroke": withColorMixin("--base-color-workspace-stroke"),
+        "base-workspace-stroke": withColorMixin(
+          "--base-color-workspace-stroke"
+        ),
+        "base-guideline-stroke": withColorMixin(
+          "--base-color-guideline-stroke"
+        ),
 
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

package/dist/theme/tokens/color.css

@@ -23,6 +23,7 @@
   --base-color-bg2: #f5f5f5;
   --base-color-bg3: #d8d8d8;
   --base-color-workspace-stroke: #e2e2e2;
+  --base-color-guideline-stroke: #c5c5c5;
   --base-color-popup: #ffffff;
   --base-color-popup-hightlight: #343638;
   --base-color-popup-curtain: rgba(0 0 0 / 0.6);

package/dist/theme/tokens/typography.css

@@ -147,6 +147,27 @@
   --small5-style: normal;
   --small5-line-height: 12px;
   --small5-line-height-rem: 0.75rem;
+  --small6-family: "Montserrat";
+  --small6-size: 10px;
+  --small6-size-rem: 0.625rem;
+  --small6-weight: 600;
+  --small6-style: normal;
+  --small6-line-height: 12px;
+  --small6-line-height-rem: 0.75rem;
+  --small7-family: "Montserrat";
+  --small7-size: 8px;
+  --small7-size-rem: 0.5rem;
+  --small7-weight: 600;
+  --small7-style: normal;
+  --small7-line-height: 10px;
+  --small7-line-height-rem: 0.625rem;
+  --small8-family: "Montserrat";
+  --small8-size: 8px;
+  --small8-size-rem: 0.5rem;
+  --small8-weight: 700;
+  --small8-style: normal;
+  --small8-line-height: 10px;
+  --small8-line-height-rem: 0.625rem;
   --label-label1-family: "Montserrat";
   --label-label1-size: 12px;
   --label-label1-size-rem: 0.75rem;

package/dist/utils/cn.js

@@ -1,9 +1,5 @@
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-export function cn() {
-    var inputs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        inputs[_i] = arguments[_i];
-    }
+export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

package/dist/utils/datetime.js

@@ -1,30 +1,30 @@
-var resloveTimestamp = function (timestamp) {
+const resloveTimestamp = (timestamp) => {
     if (String(timestamp).length > 10)
         return timestamp / 1000;
     return timestamp;
 };
 // Set the time to the start of the day (00:00:00)
-var getStartDateOfDay = function (date) {
-    var startDate = new Date(date);
+const getStartDateOfDay = (date) => {
+    const startDate = new Date(date);
     startDate.setHours(0, 0, 0, 0);
     return startDate;
 };
 // Set the time to the end of the day (23:59:59.999)
-var getEndDateOfDay = function (date) {
-    var startDate = new Date(date);
+const getEndDateOfDay = (date) => {
+    const startDate = new Date(date);
     startDate.setHours(23, 59, 59, 999);
     return startDate;
 };
-var getStartEndTimestampOfDay = function () {
-    var startTime = getStartDateOfDay(new Date());
-    var endTime = getEndDateOfDay(startTime);
+const getStartEndTimestampOfDay = () => {
+    const startTime = getStartDateOfDay(new Date());
+    const endTime = getEndDateOfDay(startTime);
     return {
-        startTime: startTime,
-        endTime: endTime,
+        startTime,
+        endTime,
     };
 };
-var getTimestampUTC = function (date) {
-    var dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
+const getTimestampUTC = (date) => {
+    const dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
     return resloveTimestamp(dateUtc);
 };
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -75,7 +75,9 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
     "@tanstack/react-table": "^8.17.3",
     "@tanstack/react-virtual": "^3.5.0",
     "@types/react": "^18.3.2",

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import ActionButton from "./ActionButton";
 import { ArrowsUpDownIcon } from "@heroicons/react/16/solid";
+import Icon from "../Icon/Icon";
 
 const meta = {
   title: "Components/ActionButton",
@@ -25,7 +26,7 @@ export default meta;
 export const Default = {
   args: {
     variant: "solid",
-    size: "lg",
+    size: "md",
   },
   render: (args) => {
     console.log("args ", args);
@@ -33,9 +34,9 @@ export const Default = {
       ...args,
     };
     return (
-      <div className="flex flex-row justify-between">
+      <div className="flex flex-row gap-2 items-start">
         <ActionButton {...props}>
-          <ArrowsUpDownIcon />
+          <Icon type="heroicons" name="arrow-left" />
         </ActionButton>
       </div>
     );
@@ -53,9 +54,9 @@ export const Preview = {
       <div className="flex flex-col gap-2 w-full  p-20">
         <div className="flex flex-row justify-between items-center">
           <h6 className="w-[20px] text-white">Default:</h6>
-          <div className="flex flex-row gap-2 ">
+          <div className="flex flex-row gap-2 items-start ">
             <ActionButton variant="solid" size="lg">
-              <ArrowsUpDownIcon />
+              <Icon type="heroicons" name="arrows-up-down" />
             </ActionButton>
             <ActionButton variant="solid" size="md">
               <ArrowsUpDownIcon />
@@ -63,8 +64,11 @@ export const Preview = {
             <ActionButton variant="solid" size="sm">
               <ArrowsUpDownIcon />
             </ActionButton>
+            <ActionButton variant="solid" size="xs">
+              <ArrowsUpDownIcon />
+            </ActionButton>
           </div>
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row gap-2 items-start">
             <ActionButton variant="outline" size="lg">
               <ArrowsUpDownIcon />
             </ActionButton>
@@ -74,8 +78,11 @@ export const Preview = {
             <ActionButton variant="outline" size="sm">
               <ArrowsUpDownIcon />
             </ActionButton>
+            <ActionButton variant="outline" size="xs">
+              <ArrowsUpDownIcon />
+            </ActionButton>
           </div>
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row gap-2 items-start">
             <ActionButton variant="icon" size="lg">
               <ArrowsUpDownIcon />
             </ActionButton>
@@ -93,7 +100,7 @@ export const Preview = {
 
         <div className="flex flex-row justify-between">
           <h6 className="w-[20px] text-white">Active:</h6>
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row gap-2 items-start">
             <ActionButton variant="solid" size="lg" active>
               <ArrowsUpDownIcon />
             </ActionButton>
@@ -103,8 +110,11 @@ export const Preview = {
             <ActionButton variant="solid" size="sm" active>
               <ArrowsUpDownIcon />
             </ActionButton>
+            <ActionButton variant="solid" size="xs" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
           </div>
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row gap-2 items-start">
             <ActionButton variant="outline" size="lg" active>
               <ArrowsUpDownIcon />
             </ActionButton>
@@ -114,8 +124,11 @@ export const Preview = {
             <ActionButton variant="outline" size="sm" active>
               <ArrowsUpDownIcon />
             </ActionButton>
+            <ActionButton variant="outline" size="xs" active>
+              <ArrowsUpDownIcon />
+            </ActionButton>
           </div>
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row gap-2 items-start">
             <ActionButton variant="icon" size="lg" active>
               <ArrowsUpDownIcon />
             </ActionButton>
@@ -133,7 +146,7 @@ export const Preview = {
 
         <div className="flex flex-row justify-between">
           <h6 className="w-[20px] text-white">Disabled:</h6>
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row gap-2 items-start">
             <ActionButton variant="solid" size="lg" disabled>
               <ArrowsUpDownIcon />
             </ActionButton>
@@ -143,8 +156,11 @@ export const Preview = {
             <ActionButton variant="solid" size="sm" disabled>
               <ArrowsUpDownIcon />
             </ActionButton>
+            <ActionButton variant="solid" size="xs" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
           </div>
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row gap-2 items-start">
             <ActionButton variant="outline" size="lg" disabled>
               <ArrowsUpDownIcon />
             </ActionButton>
@@ -154,8 +170,11 @@ export const Preview = {
             <ActionButton variant="outline" size="sm" disabled>
               <ArrowsUpDownIcon />
             </ActionButton>
+            <ActionButton variant="outline" size="xs" disabled>
+              <ArrowsUpDownIcon />
+            </ActionButton>
           </div>
-          <div className="flex flex-row gap-2">
+          <div className="flex flex-row gap-2 items-start">
             <ActionButton variant="icon" size="lg" disabled>
               <ArrowsUpDownIcon />
             </ActionButton>

package/src/components/ActionButton/ActionButton.styles.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 
 export const actionButtonVariants = cva(
-  ["rounded-md box-border flex items-center justify-center"],
+  ["box-border flex items-center justify-center"],
   {
     variants: {
       variant: {
@@ -24,10 +24,10 @@ export const actionButtonVariants = cva(
         ],
       },
       size: {
-        xs: "p-[2px] w-[18px] h-[18px]",
-        sm: "px-2 py-1 w-[38px] h-[30px]",
-        md: "px-3 py-2 w-[46px] h-[38px]",
-        lg: "px-4 py-3 w-[64px] h-[56px]",
+        xs: "",
+        sm: "",
+        md: "",
+        lg: "",
       },
       disabled: {
         false: "",
@@ -64,20 +64,45 @@ export const actionButtonVariants = cva(
           "active:bg-action-button-icon-active-pressed active:border-action-button-icon-active-pressed active:text-action-button-icon-active-pressed active:fill-action-button-icon-active-pressed",
         ],
       },
+      {
+        size: "lg",
+        variant: ["solid", "outline"],
+        className: "px-lg py-md [&_svg]:size-[32px] rounded-md",
+      },
+      {
+        size: "md",
+        variant: ["solid", "outline"],
+        className: "px-md py-sm [&_svg]:size-[22px] rounded-md",
+      },
+      {
+        size: "sm",
+        variant: ["solid", "outline"],
+        className: "px-sm py-xs [&_svg]:size-[22px] rounded-sm",
+      },
+      {
+        size: "xs",
+        variant: ["solid", "outline"],
+        className: "px-xs py-xxs [&_svg]:size-[14px] rounded-xs",
+      },
       {
         size: "lg",
         variant: "icon",
-        className: "w-[56px] h-[56px]",
+        className: "px-lg py-lg [&_svg]:size-[32px] rounded-full",
       },
       {
         size: "md",
         variant: "icon",
-        className: "w-[38px] h-[38px]",
+        className: "px-md py-md [&_svg]:size-[22px] rounded-full",
       },
       {
         size: "sm",
         variant: "icon",
-        className: "w-[30px] h-[30px]",
+        className: "px-xs py-xs [&_svg]:size-[22px] rounded-full",
+      },
+      {
+        size: "xs",
+        variant: "icon",
+        className: "px-xxs py-xxs [&_svg]:size-[14px] rounded-full",
       },
       {
         variant: "solid",

package/src/components/Button/Button.tsx

@@ -1,10 +1,7 @@
-import React, { FC, ReactElement, forwardRef } from "react";
+import React, { ReactElement, forwardRef } from "react";
 import { buttonVariants } from "./Button.styles";
 import { cn } from "@/utils/cn";
-import { title } from "process";
-import { ref } from "yup";
 import Loading from "../Loading/Loading";
-import { EyeIcon } from "@heroicons/react/16/solid";
 
 export type ButtonProps = {
   title?: string;

package/src/components/Collapsible/Collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, Ref, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { CollapsibleProvider, useCollapsible } from "./CollapsibleContext";
 import { cn } from "@/utils/cn";

package/src/components/DataTable/DataTable.tsx

@@ -127,7 +127,7 @@ export function DataTable<TData, TValue>({
                         desc: <ArrowDownIcon className="ml-3 h-4 w-4" />,
                       }[header.column.getIsSorted() as string] ??
                         (header.column.getCanSort() ? (
-                          <ArrowsUpDownIcon className="ml-3 h-4 w-4 text-textcolor-grey-light" />
+                          <ArrowsUpDownIcon className="ml-3 h-4 w-4 text-text-grey-light" />
                         ) : null)}
                     </div>
                   </TableHead>
@@ -155,7 +155,7 @@ export function DataTable<TData, TValue>({
             <TableRow className="h-full self-stretch">
               <TableCell
                 colSpan={columns.length}
-                className="typography-body1 text-textcolor-grey-medium text-center h-full"
+                className="typography-body1 text-text-grey-medium text-center h-full"
               >
                 <div className="flex flex-1 h-full flex-col items-center justify-center gap-3">
                   <ClipboardDocumentListIcon className="w-8 text-secondary-120" />