@rovula/ui 0.0.47 → 0.0.48

package/dist/esm/types/components/Switch/Switch.stories.d.ts

@@ -293,13 +293,8 @@ declare const meta: {
 export default meta;
 export declare const Default: {
     args: {
-        defaultValue: number[];
-        max: number;
-        step: number;
-        name: string;
-        minStepsBetweenThumbs: number;
+        checked: boolean;
         disabled: boolean;
-        inverted: boolean;
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/esm/types/components/Tree/Tree.d.ts

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from "react";
+export type TreeData = {
+    id: string;
+    title: string;
+    icon?: ReactNode;
+    children?: TreeData[];
+};
+export interface TreeItemProps extends TreeData {
+    isFirstLevel?: boolean;
+    isLastItem: boolean;
+    checkIsExpanded: (id: string) => boolean;
+    checkIsChecked: (id: string) => boolean;
+    onExpandChange?: (id: string, expanded: boolean) => void;
+    onCheckedChange?: (id: string, checked: boolean) => void;
+}
+export type TreeProps = {
+    data: TreeData[];
+    defaultExpandedId?: string[];
+    defaultCheckedId?: string[];
+    checkedId?: string[];
+    onCheckedChange?: (checkedId: string[]) => void;
+    defaultExpandAll?: boolean;
+    defaultCheckAll?: boolean;
+    hierarchicalCheck?: boolean;
+};
+export declare const Tree: FC<TreeProps>;
+/**
+ * TODO
+ * -----
+ * - Custom style
+ * - Custom icon, elm and render props -> callback with selected*expanded
+ * - OnClick item
+ * - OnClick expandButton
+ * - disabled props
+ * - right section icon
+ * - props for show icon, line
+ * - props for render item
+ * - OnLoad mode
+ * -----
+ *  - props onLoad item
+ *  - props for hasChildren * for check to trigger on load
+ *  - animate expand
+ *  - check duplicate reversive on updateChildren
+ *  - write storybook
+ */

package/dist/esm/types/components/Tree/Tree.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tree } from "./Tree";
+declare const meta: Meta<typeof Tree>;
+export default meta;
+export declare const Default: StoryObj<typeof Tree>;

package/dist/src/theme/global.css

@@ -1576,6 +1576,30 @@
   /* Disabled State */
   --dropdown-menu-disabled-bg: transparent;
   --dropdown-menu-disabled-text: var(--grey-grey-140);
+  /* ------------------------------------------------------------------ */
+  /* Switch Component Tokens                                           */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[element]-[state]-[property]              */
+  /* Element: [progress, track]                                         */
+  /* ------------------------------------------------------------------ */
+  /* Default State */
+  --switch-default-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
+  --switch-thumb-default-color: var(--state-color-secondary-active);
+  /* Hover State */
+  --switch-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
+  --switch-thumb-hover-color: var(--switch-thumb-default-color);
+  --switch-thumb-hover-ring: var(--state-color-secondary-hover-bg);
+  /* Active State */
+  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
+  --switch-thumb-active-color: var(--state-color-primary-active);
+  /* Active Hover State */
+  --switch-active-hover-color: rgb(from var(--state-color-primary-active) r g b / 0.48);
+  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
+  --switch-thumb-active-hover-ring: var(--state-color-primary-hover-bg);
+  /* Disabled State */
+  --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
+  --switch-thumb-disabled-color: var(--state-color-disable-solid)
+;
 }
 
 :root[data-theme="SKL"]{
@@ -1820,16 +1844,16 @@
   /* #2d2e30; */
   --input-color-error: #ed2f15;
   /* Function button */
-  --function-default-solid: #1e3249;
-  --function-default-hover: #35475b;
-  --function-default-hover-bg: rgba(30 50 73 / 0.08);
-  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-solid: var(--state-color-primary-default);
+  --function-default-hover: var(--state-color-primary-hover);
+  --function-default-hover-bg: var(--state-color-primary-hover-bg);
+  --function-default-stroke: var(--state-color-primary-stroke);
   --function-default-icon: #ffffff;
-  --function-default-outline-icon: #1e3249;
-  --function-active-solid: #9b8f00;
-  --function-active-hover: #b1a400;
-  --function-active-hover-bg: rgba(221 205 0 / 0.08);
-  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-default-outline-icon: var(--state-color-primary-default);
+  --function-active-solid: var(--state-color-secondary-default);
+  --function-active-hover: var(--state-color-secondary-hover);
+  --function-active-hover-bg: var(--state-color-secondary-hover-bg);
+  --function-active-stroke:  var(--state-color-secondary-stroke);
   --function-active-icon: #ffffff;
   --text-black: #000000;
   --text-dark: #18283a;
@@ -1853,7 +1877,7 @@
   --background: var(--base-color-bg);
   --foreground: var(--common-black);
   --primary: var(--primary-ramps-primary-100);
-  --secondary: var(--secondary-ramps-secondary-100);
+  --primary: var(--secondary-ramps-secondary-100);
   --tertiary: var(--tertiary-ramps-tertiary-100);
   --info: var(--info-info-100);
   --success: var(--success-success-100);
@@ -3518,6 +3542,10 @@ input[type=number] {
   margin-right: 1rem;
 }
 
+.mr-\[2px\] {
+  margin-right: 2px;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -3619,6 +3647,11 @@ input[type=number] {
   height: 14px;
 }
 
+.size-\[16pt\] {
+  width: 16pt;
+  height: 16pt;
+}
+
 .size-\[30px\] {
   width: 30px;
   height: 30px;
@@ -3634,6 +3667,10 @@ input[type=number] {
   height: 100%;
 }
 
+.h-1\/2 {
+  height: 50%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -3727,6 +3764,10 @@ input[type=number] {
   max-height: 100vh;
 }
 
+.min-h-10 {
+  min-height: 2.5rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -4083,6 +4124,10 @@ input[type=number] {
   white-space: nowrap;
 }
 
+.text-ellipsis {
+  text-overflow: ellipsis;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -6083,6 +6128,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.fill-warning {
+  fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
+}
+
 .stroke-input-default-stroke {
   stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
 }
@@ -8921,8 +8970,8 @@ input[type=number] {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.group:disabled .group-disabled\:bg-\[--switch-thumb-disabled-color\] {
-  background-color: var(--switch-thumb-disabled-color);
+.group:disabled .group-disabled\:\!bg-\[--switch-thumb-disabled-color\] {
+  background-color: var(--switch-thumb-disabled-color) !important;
 }
 
 .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
@@ -9255,8 +9304,8 @@ input[type=number] {
   background-color: var(--dropdown-menu-disabled-bg) !important;
 }
 
-.data-\[disabled\]\:bg-\[var\(--switch-disabled-color\)\][data-disabled] {
-  background-color: var(--switch-disabled-color);
+.data-\[disabled\]\:\!bg-\[var\(--switch-disabled-color\)\][data-disabled] {
+  background-color: var(--switch-disabled-color) !important;
 }
 
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true] {

package/dist/theme/themes/SKL/color.css

@@ -12,16 +12,16 @@
   --input-color-error: #ed2f15;
 
   /* Function button */
-  --function-default-solid: #1e3249;
-  --function-default-hover: #35475b;
-  --function-default-hover-bg: rgba(30 50 73 / 0.08);
-  --function-default-stroke: rgba(30 50 73 / 0.48);
+  --function-default-solid: var(--state-color-primary-default);
+  --function-default-hover: var(--state-color-primary-hover);
+  --function-default-hover-bg: var(--state-color-primary-hover-bg);
+  --function-default-stroke: var(--state-color-primary-stroke);
   --function-default-icon: #ffffff;
-  --function-default-outline-icon: #1e3249;
-  --function-active-solid: #9b8f00;
-  --function-active-hover: #b1a400;
-  --function-active-hover-bg: rgba(221 205 0 / 0.08);
-  --function-active-stroke: rgba(177 164 0 / 0.48);
+  --function-default-outline-icon: var(--state-color-primary-default);
+  --function-active-solid: var(--state-color-secondary-default);
+  --function-active-hover: var(--state-color-secondary-hover);
+  --function-active-hover-bg: var(--state-color-secondary-hover-bg);
+  --function-active-stroke:  var(--state-color-secondary-stroke);
   --function-active-icon: #ffffff;
 
   --text-black: #000000;
@@ -49,7 +49,7 @@
   --foreground: var(--common-black);
 
   --primary: var(--primary-ramps-primary-100);
-  --secondary: var(--secondary-ramps-secondary-100);
+  --primary: var(--secondary-ramps-secondary-100);
   --tertiary: var(--tertiary-ramps-tertiary-100);
   --info: var(--info-info-100);
   --success: var(--success-success-100);

package/dist/theme/themes/xspector/baseline.css

@@ -6,3 +6,4 @@
 @import url(components/action-button.css);
 @import url(components/loading.css);
 @import url(components/dropdown-menu.css);
+@import url(components/switch.css);

package/dist/theme/themes/xspector/components/switch.css

@@ -0,0 +1,30 @@
+:root[data-theme="xspector"] {
+  /* ------------------------------------------------------------------ */
+  /* Switch Component Tokens                                           */
+  /* ------------------------------------------------------------------ */
+  /* Naming Convention: --[component]-[element]-[state]-[property]              */
+  /* Element: [progress, track]                                         */
+  /* ------------------------------------------------------------------ */
+
+  /* Default State */
+  --switch-default-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
+  --switch-thumb-default-color: var(--state-color-secondary-active);
+
+  /* Hover State */
+  --switch-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
+  --switch-thumb-hover-color: var(--switch-thumb-default-color);
+  --switch-thumb-hover-ring: var(--state-color-secondary-hover-bg);
+
+  /* Active State */
+  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
+  --switch-thumb-active-color: var(--state-color-primary-active);
+
+  /* Active Hover State */
+  --switch-active-hover-color: rgb(from var(--state-color-primary-active) r g b / 0.48);
+  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
+  --switch-thumb-active-hover-ring: var(--state-color-primary-hover-bg);
+
+  /* Disabled State */
+  --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
+  --switch-thumb-disabled-color: var(--state-color-disable-solid)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Switch/Switch.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),
@@ -24,13 +24,8 @@ export default meta;
 
 export const Default = {
   args: {
-    defaultValue: [50],
-    max: 100,
-    step: 1,
-    name: "test",
-    minStepsBetweenThumbs: 1,
+    checked: false,
     disabled: false,
-    inverted: false,
   },
   render: (args) => {
     console.log("args ", args);

package/src/components/Switch/Switch.tsx

@@ -13,7 +13,7 @@ const switchStateClasses = {
   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",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:!bg-[var(--switch-disabled-color)] data-[disabled]:pointer-events-none",
 };
 
 const thumbBaseClasses =
@@ -27,7 +27,7 @@ const thumbStateClasses = {
     "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]",
+  disabled: "group-disabled:!bg-[--switch-thumb-disabled-color]",
 };
 
 const Switch = React.forwardRef<

package/src/components/Tree/Tree.stories.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tree } from "./Tree";
+
+// Example data for testing the Tree component (as plain objects)
+const exampleData = [
+  {
+    id: "1",
+    title: "Parent Folder 1",
+    children: [
+      {
+        id: "1.1",
+        title: "Child Folder 1.1",
+        children: [
+          { id: "1.1.1", title: "Sub Folder 1.1.1" },
+          { id: "1.1.2", title: "Sub Folder 1.1.2" },
+        ],
+      },
+      { id: "1.2", title: "Child Folder 1.2" },
+    ],
+  },
+  {
+    id: "2",
+    title: "Parent Folder 2",
+    children: [{ id: "2.1", title: "Child Folder 2.1" }],
+  },
+  { id: "3", title: "Parent Folder 3" },
+];
+
+// Storybook metadata
+const meta: Meta<typeof Tree> = {
+  title: "Components/Tree",
+  component: Tree,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-5 flex w-full bg-base-bg">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+// Default story
+export const Default: StoryObj<typeof Tree> = {
+  args: {
+    data: exampleData,
+    defaultExpandedId: ["1", "1.1"],
+    defaultCheckedId: ["1.1"],
+    defaultExpandAll: true,
+    defaultCheckAll: true,
+    hierarchicalCheck: true,
+  },
+  render: (args) => {
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Tree {...args} />
+      </div>
+    );
+  },
+};