@rovula/ui 0.0.45 → 0.0.47

package/dist/cjs/types/components/Table/Table.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 declare const Table: React.ForwardRefExoticComponent<{
+    rootClassName?: string | undefined;
     rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
 } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/cjs/types/components/Table/Table.stories.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<{
+        rootClassName?: string | undefined;
         rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
     } & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
     tags: string[];
@@ -9,6 +10,7 @@ declare const meta: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        rootClassName?: string | undefined;
         rootRef?: React.LegacyRef<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;

package/dist/cjs/types/components/Toast/Toast.stories.d.ts

@@ -356,3 +356,11 @@ export declare const WithAction: {
     args: {};
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Custom: {
+    args: {
+        onClose: import("@storybook/addon-actions").HandlerFunction;
+    };
+    render: (args: {
+        onClose?: (() => void) | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Toast/Toaster.d.ts

@@ -1,3 +1,4 @@
+import { ToastProviderProps } from "@radix-ui/react-toast";
 type ToasterProps = {
     viewportClassName?: string;
     titleClassName?: string;
@@ -6,5 +7,5 @@ type ToasterProps = {
     iconWrapperClassName?: string;
     actionWrapperClassName?: string;
 };
-export declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }: ToasterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, ...toastProviderProps }: ToasterProps & ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/types/components/Toast/useToast.d.ts

@@ -6,6 +6,7 @@ type ToasterToast = ToastProps & {
     description?: React.ReactNode;
     action?: ToastActionElement;
     contentMode?: "vertical" | "horizontal";
+    onClose?: () => void;
 };
 type ToasterPosition = "top-center" | "top-left" | "top-right" | "bottom-center" | "bottom-left" | "bottom-right" | undefined;
 declare const actionTypes: {

package/dist/components/Switch/Switch.js

@@ -14,9 +14,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "@/utils/cn";
+const switchBaseClasses = "group inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors";
+const switchStateClasses = {
+    unchecked: "data-[state=unchecked]:bg-[var(--switch-default-color)] hover:data-[state=unchecked]:bg-[var(--switch-hover-color)]",
+    checked: "data-[state=checked]:bg-[var(--switch-active-color)] hover:data-[state=checked]:bg-[var(--switch-active-hover-color)]",
+    disabled: "data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--switch-disabled-color)] data-[disabled]:pointer-events-none",
+};
+const thumbBaseClasses = "block size-4 rounded-full shadow-lg transition-transform";
+const thumbStateClasses = {
+    unchecked: "data-[state=unchecked]:bg-[var(--switch-thumb-default-color)] data-[state=unchecked]:-translate-x-[2px]",
+    checked: "data-[state=checked]:bg-[var(--switch-thumb-active-color)] data-[state=checked]:translate-x-4",
+    hover: "group-hover:ring group-hover:data-[state=checked]:ring-[var(--switch-thumb-active-hover-ring)] group-hover:data-[state=unchecked]:ring-[var(--switch-thumb-hover-ring)]",
+    hoverColor: "group-hover:data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)] group-hover:data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)]",
+    disabled: "group-disabled:bg-[--switch-thumb-disabled-color]",
+};
 const Switch = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn("group inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors", "data-[state=checked]:bg-secondary-active/[0.32] data-[state=unchecked]:bg-tertiary-active/[0.32]", "hover:data-[state=checked]:bg-secondary-active/[0.48] hover:data-[state=unchecked]:bg-tertiary-active/[0.48]", "data-[disabled]:cursor-not-allowed data-[disabled]:bg-state-disable-solid/[0.32] data-[disabled]:pointer-events-none ", className) }, props, { ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn(" block size-4 rounded-full bg-secondary-active shadow-lg transition-transform", "data-[state=checked]:translate-x-4 data-[state=unchecked]:-translate-x-[2px] data-[state=unchecked]:bg-tertiary-active", "group-hover:ring group-hover:data-[state=checked]:ring-secondary-hover-bg group-hover:data-[state=unchecked]:ring-tertiary-hover-bg", "group-disabled:bg-state-disable-solid") }) })));
+    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn(switchBaseClasses, switchStateClasses.unchecked, switchStateClasses.checked, switchStateClasses.disabled, className) }, props, { ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn(thumbBaseClasses, thumbStateClasses.unchecked, thumbStateClasses.checked, thumbStateClasses.hover, thumbStateClasses.hoverColor, thumbStateClasses.disabled) }) })));
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
 export { Switch };

package/dist/components/Table/Table.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "@/utils/cn";
 const Table = React.forwardRef((_a, ref) => {
-    var { className, rootRef } = _a, props = __rest(_a, ["className", "rootRef"]);
-    return (_jsx("div", { className: "relative h-full w-full overflow-auto", ref: rootRef, children: _jsx("table", Object.assign({ ref: ref, className: cn("w-full caption-bottom text-sm border-collapse", className) }, props)) }));
+    var { rootClassName, className, rootRef } = _a, props = __rest(_a, ["rootClassName", "className", "rootRef"]);
+    return (_jsx("div", { className: cn("relative h-full w-full overflow-auto", rootClassName), ref: rootRef, children: _jsx("table", Object.assign({ ref: ref, className: cn("w-full caption-bottom text-sm border-collapse", className) }, props)) }));
 });
 Table.displayName = "Table";
 const TableHeader = React.forwardRef((_a, ref) => {

package/dist/components/Toast/Toast.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
+import { action } from "@storybook/addon-actions";
 import { Toast, ToastAction } from "./Toast";
 import { Toaster } from "./Toaster";
 import { useToast } from "./useToast";
@@ -80,3 +81,21 @@ export const WithAction = {
                     }, children: "Show Toast" })] }));
     },
 };
+export const Custom = {
+    args: {
+        onClose: action("Close Naja (*0_0*) "),
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        const { toast } = useToast();
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(Toaster, { viewportClassName: "bg-red-100 -mt-[30px]", titleClassName: "text-red-500", descriptionClassName: "text-grey2-500", contentClassName: "bg-pink-100", iconWrapperClassName: "border-info border-2", actionWrapperClassName: "bg-green-500", duration: 3000 }), _jsx(Button, { onClick: () => {
+                        toast({
+                            title: "Uh oh! Something went wrong.",
+                            description: "There was a problem with your request.",
+                            action: (_jsx(ToastAction, { altText: "Try again", onClick: () => alert("My action"), children: "Try again" })),
+                            duration: 1000,
+                            onClose: props.onClose,
+                        });
+                    }, children: "Show Toast" })] }));
+    },
+};

package/dist/components/Toast/Toaster.js

@@ -16,10 +16,11 @@ import { useToast } from "./useToast";
 import Icon from "../Icon/Icon";
 import { toastContentVariants, toastIconVariants } from "./Toast.styles";
 import { cn } from "@/utils/cn";
-export function Toaster({ viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName, }) {
+export function Toaster(_a) {
+    var { viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName } = _a, toastProviderProps = __rest(_a, ["viewportClassName", "titleClassName", "descriptionClassName", "contentClassName", "iconWrapperClassName", "actionWrapperClassName"]);
     const { toasts, position } = useToast();
-    return (_jsxs(ToastProvider, { children: [toasts.map(function (_a) {
+    return (_jsxs(ToastProvider, Object.assign({}, toastProviderProps, { children: [toasts.map(function (_a) {
                 var { id, title, description, action, contentMode = "horizontal" } = _a, props = __rest(_a, ["id", "title", "description", "action", "contentMode"]);
                 return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: _jsx(Icon, { type: "heroicons", name: "check-circle", className: "size-6" }) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: titleClassName, children: title })), description && (_jsx(ToastDescription, { className: descriptionClassName, children: description }))] }), _jsx("div", { className: cn("self-center ml-[var(--spacing-spacing-xl)]", actionWrapperClassName), children: action }), _jsx(ToastClose, {})] }), id));
-            }), _jsx(ToastViewport, { position: position, className: viewportClassName })] }));
+            }), _jsx(ToastViewport, { position: position, className: viewportClassName })] })));
 }

package/dist/components/Toast/useToast.js

@@ -37,7 +37,7 @@ const addToRemoveQueue = (toastId) => {
             type: "REMOVE_TOAST",
             toastId: toastId,
         });
-    }, TOAST_REMOVE_DELAY); // TODO
+    }, TOAST_REMOVE_DELAY);
     toastTimeouts.set(toastId, timeout);
 };
 export const reducer = (state, action) => {
@@ -89,8 +89,11 @@ function toast(_a) {
     dispatch({
         type: "ADD_TOAST",
         toast: Object.assign(Object.assign({}, props), { id, open: true, onOpenChange: (open) => {
-                if (!open)
+                var _a;
+                if (!open) {
                     dismiss();
+                    (_a = props === null || props === void 0 ? void 0 : props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+                }
             } }),
     });
     return {

package/dist/esm/bundle.css

@@ -1,6 +1,7 @@
 
 @import "./tokens/baseline.css";
 @import "./themes/xspector/baseline.css";
+@import "./themes/SKL/baseline.css";
 
 /*
 ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
@@ -671,6 +672,9 @@ input[type=number] {
 .-mr-2{
   margin-right: -0.5rem;
 }
+.-mt-\[30px\]{
+  margin-top: -30px;
+}
 .ml-2{
   margin-left: 0.5rem;
 }
@@ -1333,6 +1337,10 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-border-opacity)), transparent);
 }
+.border-info{
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-border-opacity)), transparent);
+}
 .border-info-stroke{
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-color-info-stroke) calc(100% * var(--tw-border-opacity)), transparent);
@@ -1726,6 +1734,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
+.bg-green-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
 .bg-grey-10{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey-grey-10) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1986,6 +1998,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-pink-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
+}
 .bg-primary{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2114,6 +2130,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--main-transparency-primary-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-red-100{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
 .bg-secondary{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -2182,10 +2202,6 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--secondary-ramps-secondary-90) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-secondary-active{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * var(--tw-bg-opacity)), transparent);
-}
 .bg-secondary-default{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -3262,6 +3278,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
+.text-grey2-500{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--grey2-grey2-500) calc(100% * var(--tw-text-opacity)), transparent);
+}
 .text-info{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-info-default) calc(100% * var(--tw-text-opacity)), transparent);
@@ -3289,6 +3309,10 @@ input[type=number] {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.text-red-500{
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
 .text-secondary{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4950,9 +4974,8 @@ input[type=number] {
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.group:disabled .group-disabled\:bg-state-disable-solid{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
+.group:disabled .group-disabled\:bg-\[--switch-thumb-disabled-color\]{
+  background-color: var(--switch-thumb-disabled-color);
 }
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2{
   top: 0.5rem;
@@ -5214,8 +5237,8 @@ input[type=number] {
 .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
   background-color: var(--dropdown-menu-disabled-bg) !important;
 }
-.data-\[disabled\]\:bg-state-disable-solid\/\[0\.32\][data-disabled]{
-  background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 0.32), transparent);
+.data-\[disabled\]\:bg-\[var\(--switch-disabled-color\)\][data-disabled]{
+  background-color: var(--switch-disabled-color);
 }
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true]{
   --tw-bg-opacity: 1;
@@ -5304,13 +5327,16 @@ input[type=number] {
 .data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
   background-color: var(--dropdown-menu-selected-bg);
 }
+.data-\[state\=checked\]\:bg-\[var\(--switch-active-color\)\][data-state=checked]{
+  background-color: var(--switch-active-color);
+}
+.data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-color\)\][data-state=checked]{
+  background-color: var(--switch-thumb-active-color);
+}
 .data-\[state\=checked\]\:bg-function-active-solid[data-state=checked]{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.data-\[state\=checked\]\:bg-secondary-active\/\[0\.32\][data-state=checked]{
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.32), transparent);
-}
 .data-\[state\=open\]\:bg-primary[data-state=open]{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -5319,12 +5345,11 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.data-\[state\=unchecked\]\:bg-tertiary-active[data-state=unchecked]{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * var(--tw-bg-opacity)), transparent);
+.data-\[state\=unchecked\]\:bg-\[var\(--switch-default-color\)\][data-state=unchecked]{
+  background-color: var(--switch-default-color);
 }
-.data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.32\][data-state=unchecked]{
-  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.32), transparent);
+.data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state=unchecked]{
+  background-color: var(--switch-thumb-default-color);
 }
 .data-\[disabled\]\:\!fill-state-disable-solid[data-disabled]{
   fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
@@ -5510,27 +5535,31 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity)), transparent);
 }
+.hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state=checked]:hover{
+  background-color: var(--switch-active-hover-color);
+}
 .hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state=checked]:hover{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.hover\:data-\[state\=checked\]\:bg-secondary-active\/\[0\.48\][data-state=checked]:hover{
-  background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.48), transparent);
-}
-.hover\:data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.48\][data-state=unchecked]:hover{
-  background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.48), transparent);
+.hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state=unchecked]:hover{
+  background-color: var(--switch-hover-color);
 }
 .hover\:data-\[state\=checked\]\:text-function-active-hover[data-state=checked]:hover{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity)), transparent);
 }
-.group:hover .group-hover\:data-\[state\=checked\]\:ring-secondary-hover-bg[data-state=checked]{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
+.group:hover .group-hover\:data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state=checked]{
+  background-color: var(--switch-thumb-active-hover-color);
 }
-.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-tertiary-hover-bg[data-state=unchecked]{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
+.group:hover .group-hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state=unchecked]{
+  background-color: var(--switch-thumb-hover-color);
+}
+.group:hover .group-hover\:data-\[state\=checked\]\:ring-\[var\(--switch-thumb-active-hover-ring\)\][data-state=checked]{
+  --tw-ring-color: var(--switch-thumb-active-hover-ring);
+}
+.group:hover .group-hover\:data-\[state\=unchecked\]\:ring-\[var\(--switch-thumb-hover-ring\)\][data-state=unchecked]{
+  --tw-ring-color: var(--switch-thumb-hover-ring);
 }
 @media (min-width: 640px){