@rovula/ui 0.0.19 → 0.0.21

package/dist/components/ActionButton/ActionButton.styles copy.js

@@ -0,0 +1,90 @@
+import { cva } from "class-variance-authority";
+export var actionButtonVariants = cva(["rounded box-border flex items-center justify-center"], {
+    variants: {
+        variant: {
+            solid: [
+                "bg-secondary-default border-secondary-default text-secondary-foreground fill-secondary-foreground",
+                "hover:bg-secondary-hover hover:border-secondary-hover",
+                "active:bg-secondary-pressed active:border-secondary-pressed",
+            ],
+            outline: [
+                "border bg-transparent disabled:bg-transparent disabled:border-disable-outline",
+                "text-secondary-default fill-secondary-default border-secondary-stroke",
+                "hover:bg-secondary-hover-bg hover:border-secondary-hover hover:text-secondary-hover hover:fill-secondary-hover",
+                "active:bg-secondary-hover-bg active:border-secondary-pressed active:text-secondary-pressed active:fill-secondary-pressed",
+            ],
+            icon: [
+                "bg-transparent disabled:bg-transparent rounded-full",
+                "text-secondary-default fill-secondary-default",
+                "hover:bg-secondary-hover-bg hover:text-secondary-hover hover:fill-secondary-hover",
+                "active:text-secondary-pressed active:fill-secondary-pressed",
+            ],
+        },
+        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]",
+        },
+        disabled: {
+            false: "",
+        },
+        active: {
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "solid",
+            active: true,
+            className: [
+                "bg-primary-default border-primary-default text-primary-foreground fill-primary-foreground",
+                "hover:bg-primary-hover hover:border-primary-hover",
+                "active:bg-primary-pressed active:border-primary-pressed",
+            ],
+        },
+        {
+            variant: "outline",
+            active: true,
+            className: [
+                "text-primary-default fill-primary-default border-primary-stroke",
+                "hover:bg-primary-hover-bg hover:border-primary-hover hover:text-primary-hover hover:fill-primary-hover",
+                "active:bg-primary-hover-bg active:border-primary-pressed active:text-primary-pressed active:fill-primary-pressed",
+            ],
+        },
+        {
+            variant: "icon",
+            active: true,
+            className: [
+                "text-primary-default fill-primary-default",
+                "hover:bg-primary-hover-bg hover:text-primary-hover hover:fill-primary-hover",
+                "active:text-primary-pressed active:fill-primary-pressed",
+            ],
+        },
+        {
+            size: "lg",
+            variant: "icon",
+            className: "w-[56px] h-[56px]",
+        },
+        {
+            size: "md",
+            variant: "icon",
+            className: "w-[38px] h-[38px]",
+        },
+        {
+            size: "sm",
+            variant: "icon",
+            className: "w-[30px] h-[30px]",
+        },
+        {
+            disabled: true,
+            className: "pointer-events-none border-transparent bg-disable-solid text-disable-outline fill-disable-outline",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        variant: "solid",
+        disabled: false,
+        active: false,
+    },
+});

package/dist/components/ActionButton/ActionButton.styles.js

@@ -1,15 +1,23 @@
 import { cva } from "class-variance-authority";
-export var actionButtonVariants = cva(["bg-primary rounded box-border flex items-center justify-center"], {
+export var actionButtonVariants = cva(["rounded-md box-border flex items-center justify-center"], {
     variants: {
         variant: {
-            solid: " bg-secondary-20 hover:bg-secondary-5 fill-secondary-foreground text-secondary-foreground",
+            solid: [
+                "bg-action-button-solid-default border-action-button-solid-default text-action-button-solid-default fill-action-button-solid-default",
+                "hover:bg-action-button-solid-hover hover:border-action-button-solid-hover hover:text-action-button-solid-hover hover:fill-action-button-solid-hover",
+                "active:bg-action-button-solid-pressed active:border-action-button-solid-pressed active:text-action-button-solid-pressed active:fill-action-button-solid-pressed",
+            ],
             outline: [
-                "bg-transparent border border-main-transparent-secondary-32 fill-secondary-70 text-secondary-70",
-                "hover:bg-main-transparent-secondary-8 hover:border-main-secondary-48 hover:fill-secondary-5 hover:text-secondary-5",
+                "border",
+                "bg-action-button-outline-default border-action-button-outline-default text-action-button-outline-default fill-action-button-outline-default",
+                "hover:bg-action-button-outline-hover hover:border-action-button-outline-hover hover:text-action-button-outline-hover hover:fill-action-button-outline-hover",
+                "active:bg-action-button-outline-pressed active:border-action-button-outline-pressed active:text-action-button-outline-pressed active:fill-action-button-outline-pressed",
             ],
             icon: [
-                "rounded-full bg-transparent fill-secondary-70 text-secondary-70",
-                "hover:bg-main-transparent-secondary-8 hover:fill-secondary-5 hover:text-secondary-5",
+                "rounded-full",
+                "bg-action-button-icon-default border-action-button-icon-default text-action-button-icon-default fill-action-button-icon-default",
+                "hover:bg-action-button-icon-hover hover:border-action-button-icon-hover hover:text-action-button-icon-hover hover:fill-action-button-icon-hover",
+                "active:bg-action-button-icon-pressed active:border-action-button-icon-pressed active:text-action-button-icon-pressed active:fill-action-button-icon-pressed",
             ],
         },
         size: {
@@ -19,32 +27,39 @@ export var actionButtonVariants = cva(["bg-primary rounded box-border flex items
             lg: "px-4 py-3 w-[64px] h-[56px]",
         },
         disabled: {
-            true: "pointer-events-none border-grey2-500/[.32] text-grey2-500/[.32] fill-red-500",
+            false: "",
         },
         active: {
             false: "",
         },
     },
     compoundVariants: [
-        {
-            variant: "solid",
-            disabled: true,
-            className: "bg-grey2-500 text-textcolor-medium fill-textcolor-medium",
-        },
         {
             variant: "solid",
             active: true,
-            className: "bg-primary-120 hover:bg-primary-100 text-primary-foreground",
+            className: [
+                "bg-action-button-solid-active border-action-button-solid-active text-action-button-solid-active fill-action-button-solid-active",
+                "hover:bg-action-button-solid-active-hover hover:border-action-button-solid-active-hover hover:text-action-button-solid-active-hover hover:fill-action-button-solid-active-hover",
+                "active:bg-action-button-solid-active-pressed active:border-action-button-solid-active-pressed active:text-action-button-solid-active-pressed active:fill-action-button-solid-active-pressed",
+            ],
         },
         {
             variant: "outline",
             active: true,
-            className: "border-main-transparent-primary-48 hover:bg-main-transparent-primary-8 hover:text-primary text-primary",
+            className: [
+                "bg-action-button-outline-active border-action-button-outline-active text-action-button-outline-active fill-action-button-outline-active",
+                "hover:bg-action-button-outline-active-hover hover:border-action-button-outline-active-hover hover:text-action-button-outline-active-hover hover:fill-action-button-outline-active-hover",
+                "active:bg-action-button-outline-active-pressed active:border-action-button-outline-active-pressed active:text-action-button-outline-active-pressed active:fill-action-button-outline-active-pressed",
+            ],
         },
         {
             variant: "icon",
             active: true,
-            className: "border-main-transparent-primary-48 hover:bg-main-transparent-primary-8 hover:text-primary text-primary",
+            className: [
+                "bg-action-button-icon-active border-action-button-icon-active text-action-button-icon-active fill-action-button-icon-active",
+                "hover:bg-action-button-icon-active-hover hover:border-action-button-icon-active-hover hover:text-action-button-icon-active-hover hover:fill-action-button-icon-active-hover",
+                "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",
@@ -61,6 +76,30 @@ export var actionButtonVariants = cva(["bg-primary rounded box-border flex items
             variant: "icon",
             className: "w-[30px] h-[30px]",
         },
+        {
+            variant: "solid",
+            disabled: true,
+            className: [
+                "pointer-events-none",
+                "bg-action-button-solid-disabled border-action-button-solid-disabled text-action-button-solid-disabled fill-action-button-solid-disabled",
+            ],
+        },
+        {
+            variant: "outline",
+            disabled: true,
+            className: [
+                "pointer-events-none",
+                "bg-action-button-outline-disabled border-action-button-outline-disabled text-action-button-outline-disabled fill-action-button-outline-disabled",
+            ],
+        },
+        {
+            variant: "icon",
+            disabled: true,
+            className: [
+                "pointer-events-none",
+                "bg-action-button-icon-disabled border-action-button-icon-disabled text-action-button-icon-disabled fill-action-button-icon-disabled",
+            ],
+        },
     ],
     defaultVariants: {
         size: "md",

package/dist/components/AlertDialog/AlertDialog.js

@@ -31,12 +31,12 @@ var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
 var AlertDialogOverlay = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Overlay, __assign({ className: cn("fixed inset-0 bg-popup-overlay z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
+    return (_jsx(AlertDialogPrimitive.Overlay, __assign({ className: cn("fixed inset-0 bg-base-popup-curtain z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 var AlertDialogContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed text-textcolor-grey-dark left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border bg-popup-background p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-[var(--popup-rounded)]", className) }, props))] }));
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border border-base-popup bg-base-popup p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md", className) }, props))] }));
 });
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 var AlertDialogHeader = function (_a) {

package/dist/components/Avatar/Avatar.styles.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 export var avatarVariants = cva([
-    "flex items-center justify-center bg-grey2-700 text-white typography-subtitile2 truncate",
+    "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitile2 truncate",
 ], {
     variants: {
         size: {

package/dist/components/Button/Button.js

@@ -20,13 +20,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { buttonVariants } from "./Button.styles";
 import { cn } from "@/utils/cn";
+import Loading from "../Loading/Loading";
 var Button = forwardRef(function (_a, ref) {
     var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.color, color = _c === void 0 ? "primary" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, title = _a.title, children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fullwidth, fullwidth = _f === void 0 ? false : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, className = _a.className, props = __rest(_a, ["size", "color", "variant", "title", "children", "startIcon", "endIcon", "disabled", "fullwidth", "isLoading", "className"]);
     var isDisabled = disabled || isLoading;
-    return (_jsx("button", __assign({ type: "button" }, props, { ref: ref, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : 0, className: cn(buttonVariants({ size: size, color: color, variant: variant, disabled: disabled, fullwidth: fullwidth }), className), disabled: isDisabled, children: _jsxs(_Fragment, { children: [startIcon, children || title, endIcon] }) })));
+    return (_jsx("button", __assign({ type: "button" }, props, { ref: ref, "aria-disabled": isDisabled || undefined, "data-loading": isLoading || undefined, tabIndex: isDisabled ? -1 : 0, className: cn(buttonVariants({ size: size, color: color, variant: variant, disabled: disabled, fullwidth: fullwidth }), className), disabled: isDisabled, children: _jsxs(_Fragment, { children: [isLoading && _jsx(Loading, {}), startIcon, children || title, endIcon] }) })));
 });
 export default Button;

package/dist/components/Button/Button.styles copy.js

@@ -0,0 +1,210 @@
+import { cva } from "class-variance-authority";
+export var buttonVariants = cva([
+    // "inline-flex items-center justify-center align-middle no-underline transition-colors ease-in-out duration-300",
+    // "font-sans appearance-none select-none rounded-sm border font-medium tracking-[.02857em]",
+    // "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
+    // "gap-2 font-bold text-white hover:bg-opacity-90 active:scale-[98%]",
+    "gap-2 font-bold text-white outline-none",
+    "transition ease-in-out duration-45",
+], {
+    variants: {
+        color: {
+            primary: [
+                "bg-primary-default border-primary-default text-primary-foreground fill-primary-foreground",
+                "hover:bg-primary-hover hover:border-primary-hover",
+                "active:bg-primary-pressed active:border-primary-pressed",
+            ],
+            secondary: [
+                "bg-secondary-default border-secondary-default text-secondary-foreground fill-secondary-foreground",
+                "hover:bg-secondary-hover hover:border-secondary-hover",
+                "active:bg-secondary-pressed active:border-secondary-pressed",
+            ],
+            tertiary: [
+                "bg-tertiary-default border-tertiary-default text-tertiary-foreground fill-tertiary-foreground",
+                "hover:bg-tertiary-hover hover:border-tertiary-hover",
+                "active:bg-tertiary-pressed active:border-tertiary-pressed",
+            ],
+            success: [
+                "bg-success-default border-success-default text-success-foreground fill-success-foreground",
+                "hover:bg-success-hover hover:border-success-hover",
+                "active:bg-success-pressed active:border-success-pressed",
+            ],
+            info: [
+                "bg-info-default border-info-default text-info-foreground fill-info-foreground",
+                "hover:bg-info-hover hover:border-info-hover",
+                "active:bg-info-pressed active:border-info-pressed",
+            ],
+            warning: [
+                "bg-warning-default border-warning-default text-warning-foreground fill-warning-foreground",
+                "hover:bg-warning-hover hover:border-warning-hover",
+                "active:bg-warning-pressed active:border-warning-pressed",
+            ],
+            error: [
+                "bg-error-default border-error-default text-error-foreground fill-error-foreground",
+                "hover:bg-error-hover hover:border-error-hover",
+                "active:bg-error-pressed active:border-error-pressed",
+            ],
+        },
+        size: {
+            sm: "px-3 py-1 text-sm rounded-sm",
+            md: "px-4 py-2 text-sm rounded-md",
+            lg: "px-6 py-4 text-base rounded-lg",
+        },
+        variant: {
+            solid: "border",
+            outline: "border bg-transparent disabled:border-disable-outline",
+            flat: "bg-transparent",
+            link: "bg-transparent underline underline-offset-4",
+        },
+        disabled: {
+            true: "pointer-events-none border-transparent bg-disable-solid text-disable-outline fill-disable-outline",
+        },
+        fullwidth: {
+            true: "w-full",
+        },
+    },
+    compoundVariants: [
+        // --- Outline ---
+        {
+            variant: "outline",
+            color: "primary",
+            className: [
+                "text-primary-default fill-primary-default border-primary-stroke",
+                "hover:bg-primary-hover-bg hover:border-primary-hover hover:text-primary-hover hover:fill-primary-hover",
+                "active:bg-primary-hover-bg active:border-primary-pressed active:text-primary-pressed active:fill-primary-pressed",
+            ],
+        },
+        {
+            variant: "outline",
+            color: "secondary",
+            className: [
+                "text-secondary-default fill-secondary-default border-secondary-stroke",
+                "hover:bg-secondary-hover-bg hover:border-secondary-hover hover:text-secondary-hover hover:fill-secondary-hover",
+                "active:bg-secondary-hover-bg active:border-secondary-pressed active:text-secondary-pressed active:fill-secondary-pressed",
+            ],
+        },
+        {
+            variant: "outline",
+            color: "tertiary",
+            className: [
+                "text-tertiary-default fill-tertiary-default border-tertiary-stroke",
+                "hover:bg-tertiary-hover-bg hover:border-tertiary-hover hover:text-tertiary-hover hover:fill-tertiary-hover",
+                "active:bg-tertiary-hover-bg active:border-tertiary-pressed active:text-tertiary-pressed active:fill-tertiary-pressed",
+            ],
+        },
+        {
+            variant: "outline",
+            color: "success",
+            className: [
+                "text-success-default fill-success-default border-success-stroke",
+                "hover:bg-success-hover-bg hover:border-success-hover hover:text-success-hover hover:fill-success-hover",
+                "active:bg-success-hover-bg active:border-success-pressed active:text-success-pressed active:fill-success-pressed",
+            ],
+        },
+        {
+            variant: "outline",
+            color: "info",
+            className: [
+                "text-info-default fill-info-default border-info-stroke",
+                "hover:bg-info-hover-bg hover:border-info-hover hover:text-info-hover hover:fill-info-hover",
+                "active:bg-info-hover-bg active:border-info-pressed active:text-info-pressed active:fill-info-pressed",
+            ],
+        },
+        {
+            variant: "outline",
+            color: "warning",
+            className: [
+                "text-warning-default fill-warning-default border-warning-stroke",
+                "hover:bg-warning-hover-bg hover:border-warning-hover hover:text-warning-hover hover:fill-warning-hover",
+                "active:bg-warning-hover-bg active:border-warning-pressed active:text-warning-pressed active:fill-warning-pressed",
+            ],
+        },
+        {
+            variant: "outline",
+            color: "error",
+            className: [
+                "text-error-default fill-error-default border-error-stroke",
+                "hover:bg-error-hover-bg hover:border-error-hover hover:text-error-hover hover:fill-error-hover",
+                "active:bg-error-hover-bg active:border-error-pressed active:text-error-pressed active:fill-error-pressed",
+            ],
+        },
+        // --- Flat, link ---
+        {
+            variant: ["flat", "link"],
+            color: "primary",
+            className: [
+                "text-primary-default fill-primary-default",
+                "hover:bg-primary-hover-bg hover:text-primary-hover hover:fill-primary-hover",
+                "active:bg-transparent active:text-primary-pressed active:fill-primary-pressed",
+            ],
+        },
+        {
+            variant: ["flat", "link"],
+            color: "secondary",
+            className: [
+                "text-secondary-default fill-secondary-default",
+                "hover:bg-secondary-hover-bg hover:text-secondary-hover hover:fill-secondary-hover",
+                "active:bg-transparent active:text-secondary-pressed active:fill-secondary-pressed",
+            ],
+        },
+        {
+            variant: ["flat", "link"],
+            color: "tertiary",
+            className: [
+                "text-tertiary-default fill-tertiary-default",
+                "hover:bg-tertiary-hover-bg hover:text-tertiary-hover hover:fill-tertiary-hover",
+                "active:bg-transparent active:text-tertiary-pressed active:fill-tertiary-pressed",
+            ],
+        },
+        {
+            variant: ["flat", "link"],
+            color: "success",
+            className: [
+                "text-success-default fill-success-default",
+                "hover:bg-success-hover-bg hover:text-success-hover hover:fill-success-hover",
+                "active:bg-transparent active:text-success-pressed active:fill-success-pressed",
+            ],
+        },
+        {
+            variant: ["flat", "link"],
+            color: "info",
+            className: [
+                "text-info-default fill-info-default",
+                "hover:bg-info-hover-bg hover:text-info-hover hover:fill-info-hover",
+                "active:bg-transparent active:text-info-pressed active:fill-info-pressed",
+            ],
+        },
+        {
+            variant: ["flat", "link"],
+            color: "warning",
+            className: [
+                "text-warning-default fill-warning-default",
+                "hover:bg-warning-hover-bg hover:text-warning-hover hover:fill-warning-hover",
+                "active:bg-transparent active:text-warning-pressed active:fill-warning-pressed",
+            ],
+        },
+        {
+            variant: ["flat", "link"],
+            color: "error",
+            className: [
+                "text-error-default fill-error-default",
+                "hover:bg-error-hover-bg hover:text-error-hover hover:fill-error-hover",
+                "active:bg-transparent active:text-error-pressed active:fill-error-pressed",
+            ],
+        },
+        // --- Disabled --
+        {
+            variant: ["outline", "flat", "link"],
+            disabled: true,
+            className: [
+                "bg-transtarent border-disabled-outline text-disable-outline fill-disable-outline",
+            ],
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        color: "primary",
+        variant: "solid",
+        fullwidth: true,
+    },
+});