@rovula/ui 0.0.46 → 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/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/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
@@ -2201,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);
@@ -4977,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;
@@ -5241,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;
@@ -5331,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);
@@ -5346,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;
@@ -5537,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){