@rovula/ui 0.0.21 → 0.0.22

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/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,7 @@ module.exports = {
         "base-popup-foreground": withColorMixin(
           "--base-color-popup-foreground"
         ),
+        "base-stroke": withColorMixin("--base-color-workspace-stroke"),
 
         "common-white": withColorMixin("--common-white"),
         "common-black": withColorMixin("--common-black"),

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.22",
   "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/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" />