@rovula/ui 0.0.51 → 0.0.53

package/src/components/Tree/type.ts

@@ -1,20 +1,22 @@
 import { CSSProperties, ReactNode } from "react";
 
-export type TreeData = {
+export type TreeData<T = {}> = {
   id: string;
   title: string;
   icon?: ReactNode;
   disabled?: boolean;
+  isLeaf?: boolean;
   onClickItem?: (id: string) => void;
-  children?: TreeData[];
+  children?: TreeData<T>[]; // Recursively include additional data
   renderIcon?: (params: {
     id: string;
     expanded: boolean;
     selected: boolean;
   }) => ReactNode;
-};
+} & T; // Merge additional data
 
 export interface TreeItemProps extends TreeData {
+  checkable?: boolean;
   isFirstLevel?: boolean;
   isLastItem: boolean;
   disabled?: boolean;
@@ -25,11 +27,14 @@ export interface TreeItemProps extends TreeData {
   horizontalLineWidth?: number;
   expandButtonSize?: number;
   spacing?: number;
+  currentLevel: number;
+  maxLevel?: number;
   checkIsExpanded: (id: string) => boolean;
   checkIsChecked: (id: string) => boolean;
   checkIsLoading?: (id: string) => void;
   onExpandChange?: (id: string, expanded: boolean) => void;
   onCheckedChange?: (id: string, checked: boolean) => void;
+  notifyClickItem?: (id: string) => void;
   renderRightSection?: (params: {
     id: string;
     expanded: boolean;
@@ -55,6 +60,7 @@ export interface TreeItemProps extends TreeData {
     selected: boolean;
   }) => ReactNode;
   classes?: Partial<{
+    container?: string;
     elementWrapper?: string;
     branch?: string;
     itemWrapper?: string;
@@ -94,8 +100,16 @@ export interface TreeProps
   checkedId?: string[];
   loadingId?: string[];
   onExpandChange?: (id: string, expanded: boolean) => void;
-  onCheckedChange?: (checkedId: string[]) => void;
+  onCheckedChange?: (
+    checkedId: string[],
+    uncheckedId: string[],
+    checkedState: Record<string, boolean>
+  ) => void;
+  onClickItem?: (id: string) => void;
+  onCheckedItem?: (id: string, checked: boolean) => void;
   defaultExpandAll?: boolean;
   defaultCheckAll?: boolean;
   hierarchicalCheck?: boolean;
+  checkable?: boolean;
+  maxLevel?: number;
 }

package/src/theme/global.css

@@ -1,7 +1,6 @@
 
 @import "./tokens/baseline.css";
 @import "./themes/xspector/baseline.css";
-@import "./themes/SKL/baseline.css";
 
 @tailwind base;
 @tailwind components;

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

@@ -1,12 +0,0 @@
-@import url(palette.css);
-@import url(state.css);
-@import url(color.css);
-@import url(transparent.css);
-@import url(variables.css);
-@import url(typography.css);
-@import url(components/button.css);
-@import url(components/action-button.css);
-@import url(components/loading.css);
-@import url(components/navbar.css);
-@import url(components/dropdown-menu.css);
-@import url(components/switch.css);

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

@@ -1,78 +0,0 @@
-
-:root[data-theme="SKL"] {
-  /* Base from design */
-  --input-color-default-text: #9e9e9e;
-  --input-color-default-stroke: #cfcfcf;
-  --input-color-filled-text: #4f4f4f;
-  --input-color-active-stroke: #9e9e9e;
-  --input-color-disable-text: #919eab;
-  --input-color-disable-stroke: #e7ebed;
-  --input-color-disable-bg: #f2f5f5;
-  --input-color-label-bg: #ffffff;/* #2d2e30; */
-  --input-color-error: #ed2f15;
-
-  /* Function button */
-  --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: 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;
-  --text-medium: #4b5b6d;
-  --text-light: #8e98a4;
-  --text-grey-dark: #4f4f4f;
-  --text-grey-medium: #7e7e7e;
-  --text-grey-light: #9e9e9e;
-  --text-white: #ffffff;
-
-  --base-color-bg: #f5f5f5;
-  --base-color-bg2: #f5f5f5;
-  --base-color-bg3: #d8d8d8;
-  --base-color-workspace-stroke: #e2e2e2;
-  --base-color-guideline-stroke: #c5c5c5;
-  --base-color-popup: #ffffff;
-  --base-color-popup-hightlight: #343638;
-  --base-color-popup-curtain: rgba(0 0 0 / 0.6);
-  --common-white: #ffffff;
-  --common-black: #000000;
-
-  /* ------- Addon base ---------- */
-  --background: var(--base-color-bg);
-  --foreground: var(--common-black);
-
-  --primary: var(--primary-ramps-primary-100);
-  --primary: var(--secondary-ramps-secondary-100);
-  --tertiary: var(--tertiary-ramps-tertiary-100);
-  --info: var(--info-info-100);
-  --success: var(--success-success-100);
-  --warning: var(--warning-warning-100);
-  --error: var(--error-error-100);
-  --grey: var(--grey-grey-100);
-  --grey2: var(--grey2-grey2-100);
-
-  --primary-foreground: var(--state-color-primary-text-solid);
-  --secondary-foreground:  var(--state-color-secondary-text-solid);
-  --tertiary-foreground: var(--state-color-tertiary-text-solid);
-  --info-foreground: var(--state-color-info-text-solid);
-  --success-foreground:  var(--state-color-success-text-solid);
-  --warning-foreground:  var(--state-color-warning-text-solid);
-  --error-foreground:  var(--state-color-error-text-solid);
-  --grey-foreground: var(--common-black);
-  --grey2-foreground: var(--common-black);
-
-  --surface: var(--base-color-bg);
-  --surface-foreground: var(--common-black);
-
-  --primary-foreground: var(--common-white);
-  --secondary-foreground: var(--common-white);
-  
-  --base-color-popup-foreground: var(--text-dark);
-}

package/dist/theme/themes/SKL/components/action-button.css

@@ -1,127 +0,0 @@
-:root[data-theme="SKL"] {
-  /* --------------------------------------------------------------------------------- */
-  /* Action Button Component Tokens                                                    */
-  /* --------------------------------------------------------------------------------- */
-  /* Naming Convention: --[component]-[mode]-[state]-[property]                        */
-  /* Mone:   [solid, outline, icon]                                                    */
-  /* States: [default, hover, pressed, active, active-pressed active-hover disabled]   */
-  /* --------------------------------------------------------------------------------- */
-
-  /* ------------------------------------------------------------------ */
-  /* Solid Mode Tokens                                                  */
-  /* ------------------------------------------------------------------ */
-
-  /* Default State */
-  --action-button-solid-default-bg: var(--function-default-solid);
-  --action-button-solid-default-border: var(--function-default-solid);
-  --action-button-solid-default-text: var(--function-default-icon);
-
-  /* Hover State */
-  --action-button-solid-hover-bg: var(--function-default-hover);
-  --action-button-solid-hover-border: var(--function-default-hover);
-  --action-button-solid-hover-text: var(--function-default-icon);
-
-  /* Pressed State */
-  --action-button-solid-pressed-bg: var(--function-default-solid);
-  --action-button-solid-pressed-border: var(--function-default-solid);
-  --action-button-solid-pressed-text: var(--function-default-icon);
-
-  /* Active State */
-  --action-button-solid-active-bg: var(--function-active-solid);
-  --action-button-solid-active-border: var(--function-active-solid);
-  --action-button-solid-active-text: var(--function-active-icon);
-
-  /* Active Hover State */
-  --action-button-solid-active-hover-bg: var(--function-active-hover);
-  --action-button-solid-active-hover-border: var(--function-active-hover);
-  --action-button-solid-active-hover-text: var(--function-active-icon);
-
-  /* Active Pressed State */
-  --action-button-solid-active-pressed-bg: var(--function-active-solid);
-  --action-button-solid-active-pressed-border: var(--function-active-solid);
-  --action-button-solid-active-pressed-text: var(--function-active-icon);
-
-  /* Disabled State */
-  --action-button-solid-disabled-bg: var(--state-color-disable-solid);
-  --action-button-solid-disabled-border: var(--state-color-disable-solid);
-  --action-button-solid-disabled-text: var(--state-color-disable-outline);
-
-
-  /* ------------------------------------------------------------------ */
-  /* Outline Mode Tokens                                                */
-  /* ------------------------------------------------------------------ */
-
-  /* Default State */
-  --action-button-outline-default-bg: transparent;
-  --action-button-outline-default-border: var(--function-default-stroke);
-  --action-button-outline-default-text: var(--function-default-outline-icon);
-
-  /* Hover State */
-  --action-button-outline-hover-bg: var(--function-default-hover-bg);
-  --action-button-outline-hover-border: var(--function-default-hover);
-  --action-button-outline-hover-text: var(--function-default-hover);
-
-  /* Pressed State */
-  --action-button-outline-pressed-bg: var(--function-default-hover-bg);
-  --action-button-outline-pressed-border: var(--function-default-stroke);
-  --action-button-outline-pressed-text: var(--function-default-outline-icon);
-
-  /* Active State */
-  --action-button-outline-active-bg: transparent;
-  --action-button-outline-active-border: var(--function-active-stroke);
-  --action-button-outline-active-text: var(--function-active-solid);
-
-  /* Active Hover State */
-  --action-button-outline-active-hover-bg:  var(--function-active-hover-bg);;
-  --action-button-outline-active-hover-border: var(--function-active-hover);
-  --action-button-outline-active-hover-text: var(--function-active-hover);
-
-  /* Active Pressed State */
-  --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
-  --action-button-outline-active-pressed-border: var(--function-active-stroke);
-  --action-button-outline-active-pressed-text: var(--function-active-solid);
-
-  /* Disabled State */
-  --action-button-outline-disabled-bg: transparent;
-  --action-button-outline-disabled-border: var(--state-color-disable-outline);
-  --action-button-outline-disabled-text: var(--state-color-disable-outline);
-
-  /* ------------------------------------------------------------------ */
-  /* Icon Mode Tokens                                                  */
-  /* ------------------------------------------------------------------ */
-
-  /* Default State */
-  --action-button-icon-default-bg: transparent;
-  --action-button-icon-default-border: transparent;
-  --action-button-icon-default-text: var(--function-default-outline-icon);
-
-  /* Hover State */
-  --action-button-icon-hover-bg: var(--function-default-hover-bg);
-  --action-button-icon-hover-border: transparent;
-  --action-button-icon-hover-text: var(--function-default-hover);
-
-  /* Pressed State */
-  --action-button-icon-pressed-bg: transparent;
-  --action-button-icon-pressed-border: transparent;
-  --action-button-icon-pressed-text: var(--function-default-outline-icon);
-
-  /* Active State */
-  --action-button-icon-active-bg: transparent;
-  --action-button-icon-active-border: transparent;
-  --action-button-icon-active-text: var(--function-active-solid);
-
-  /* Active Hover State */
-  --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
-  --action-button-icon-active-hover-border: transparent;
-  --action-button-icon-active-hover-text: var(--function-active-hover);
-
-  /* Active Pressed State */
-  --action-button-icon-active-pressed-bg: transparent;
-  --action-button-icon-active-pressed-border: transparent;
-  --action-button-icon-active-pressed-text: var(--function-active-solid);
-
-  /* Disabled State */
-  --action-button-icon-disabled-bg: transparent;
-  --action-button-icon-disabled-border: transparent;
-  --action-button-icon-disabled-text: var(--state-color-disable-outline);
-}