@rovula/ui 0.0.51 → 0.0.52

package/dist/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/package.json

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

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

@@ -6,7 +6,8 @@ import { ActionButton, Icon } from "@/index";
 const exampleData = [
   {
     id: "1",
-    title: "Parent Folder 1",
+    title:
+      "Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1 Parent Folder 1",
     children: [
       {
         id: "1.1",

package/src/components/Tree/Tree.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
 import TreeItem from "./TreeItem";
 import { TreeData, TreeProps } from "./type";
+import { cn } from "@/utils/cn";
 
 const Tree: FC<TreeProps> = ({
   classes,
@@ -170,7 +171,7 @@ const Tree: FC<TreeProps> = ({
   );
 
   return (
-    <div className="w-full">
+    <div className={cn("w-full", classes?.container)}>
       {data.map((item, idx) => (
         <TreeItem
           key={item.id}

package/src/components/Tree/type.ts

@@ -55,6 +55,7 @@ export interface TreeItemProps extends TreeData {
     selected: boolean;
   }) => ReactNode;
   classes?: Partial<{
+    container?: string;
     elementWrapper?: string;
     branch?: string;
     itemWrapper?: string;

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);
-}