@rovula/ui 0.0.47 → 0.0.49

package/src/components/Tree/type.ts

@@ -0,0 +1,90 @@
+import { CSSProperties, ReactNode } from "react";
+
+export type TreeData = {
+  id: string;
+  title: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  onClickItem?: (id: string) => void;
+  children?: TreeData[];
+  renderIcon?: (params: {
+    id: string;
+    expanded: boolean;
+    selected: boolean;
+  }) => ReactNode;
+};
+
+export interface TreeItemProps extends TreeData {
+  isFirstLevel?: boolean;
+  isLastItem: boolean;
+  disabled?: boolean;
+  showIcon?: boolean;
+  showExpandButton?: boolean;
+  enableSeparatorLine?: boolean;
+  checkIsExpanded: (id: string) => boolean;
+  checkIsChecked: (id: string) => boolean;
+  checkIsLoading?: (id: string) => void;
+  onExpandChange?: (id: string, expanded: boolean) => void;
+  onCheckedChange?: (id: string, checked: boolean) => void;
+  renderRightSection?: (params: {
+    id: string;
+    expanded: boolean;
+    selected: boolean;
+  }) => ReactNode;
+  renderElement?: (params: {
+    id: string;
+    expanded: boolean;
+    selected: boolean;
+    children: ReactNode;
+    styles: {
+      branch: CSSProperties;
+      horizontalLine: CSSProperties;
+      expandButton: CSSProperties;
+      childPadding: CSSProperties;
+    };
+    onClick?: TreeItemProps["onClickItem"];
+  }) => ReactNode;
+  renderTitle?: (params: {
+    id: string;
+    title: string;
+    expanded: boolean;
+    selected: boolean;
+  }) => ReactNode;
+  classes?: Partial<{
+    elementWrapper: string;
+    branch: string;
+    itemWrapper: string;
+    itemContainer: string;
+    horizontalLine: string;
+    expandButton: string;
+    separatorLine: string;
+    checkbox: string;
+    item: string;
+    title: string;
+    childrenWrapper: string;
+  }>;
+}
+
+export interface TreeProps
+  extends Pick<
+    TreeItemProps,
+    | "renderIcon"
+    | "renderRightSection"
+    | "renderElement"
+    | "renderTitle"
+    | "showIcon"
+    | "disabled"
+    | "enableSeparatorLine"
+    | "classes"
+  > {
+  data: TreeData[];
+  defaultExpandedId?: string[];
+  defaultCheckedId?: string[];
+  checkedId?: string[];
+  loadingId?: string[];
+  onExpandChange?: (id: string, expanded: boolean) => void;
+  onCheckedChange?: (checkedId: string[]) => void;
+  defaultExpandAll?: boolean;
+  defaultCheckAll?: boolean;
+  hierarchicalCheck?: boolean;
+}

package/src/index.ts

@@ -39,6 +39,7 @@ export * from "./components/Tooltip/TooltipSimple";
 export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
+export * from "./components/Tree";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";

package/src/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/src/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/src/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)
+}