@rovula/ui 0.0.48 → 0.0.50

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

@@ -1,45 +1,4 @@
-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
- */
+import { FC } from "react";
+import { TreeProps } from "./type";
+declare const Tree: FC<TreeProps>;
+export default Tree;

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

@@ -1,5 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Tree } from "./Tree";
+import Tree from "./Tree";
 declare const meta: Meta<typeof Tree>;
 export default meta;
 export declare const Default: StoryObj<typeof Tree>;
+export declare const Controller: StoryObj<typeof Tree>;
+export declare const onClick: StoryObj<typeof Tree>;
+export declare const CustomIcon: StoryObj<typeof Tree>;
+export declare const renderRightSection: StoryObj<typeof Tree>;
+export declare const ControlShowExpandButton: StoryObj<typeof Tree>;
+export declare const Diabled: StoryObj<typeof Tree>;
+export declare const DiabledEachItem: StoryObj<typeof Tree>;
+export declare const ExpandLoadData: StoryObj<typeof Tree>;

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

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TreeItemProps } from "./type";
+declare const TreeItem: FC<TreeItemProps>;
+export default TreeItem;

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

@@ -0,0 +1,4 @@
+import Tree from "./Tree";
+import TreeItem from "./TreeItem";
+export * from "./type";
+export { Tree, TreeItem };

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

@@ -0,0 +1,76 @@
+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/dist/esm/types/index.d.ts

@@ -32,6 +32,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 type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef } from 'react';
+import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef, CSSProperties } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -601,6 +601,86 @@ declare function useToast(options?: ToastOptions): {
     position?: ToasterPosition;
 };
 
+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;
+};
+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;
+    }>;
+}
+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;
+}
+
+declare const Tree: FC<TreeProps>;
+
+declare const TreeItem: FC<TreeItemProps>;
+
 declare const resloveTimestamp: (timestamp: number) => number;
 declare const getStartDateOfDay: (date: Date) => Date;
 declare const getEndDateOfDay: (date: Date) => Date;
@@ -612,4 +692,4 @@ declare const getTimestampUTC: (date: Date) => number;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, useToast };
+export { ActionButton, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Calendar, Checkbox, Collapsible, DataTable, type DataTableProps, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownProps, Icon, Input, InputFilter, type InputFilterProps, type InputProps, Label, Loading, Navbar, type NavbarProps, type Options$1 as Options, Popover, PopoverContent, PopoverTrigger, ProgressBar, Search, type SearchProps, Slider, type SliderProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, Text, TextInput, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipProvider, TooltipSimple, TooltipTrigger, Tree, type TreeData, TreeItem, type TreeItemProps, type TreeProps, cn, getEndDateOfDay, getStartDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, reducer, resloveTimestamp, toast, useToast };

package/dist/index.js

@@ -34,6 +34,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";
 // UTILS
 export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./utils/datetime";
 export { cn } from "./utils/cn";

package/dist/src/theme/global.css

@@ -3667,10 +3667,6 @@ input[type=number] {
   height: 100%;
 }
 
-.h-1\/2 {
-  height: 50%;
-}
-
 .h-10 {
   height: 2.5rem;
 }
@@ -3711,6 +3707,10 @@ input[type=number] {
   height: 24px;
 }
 
+.h-\[2px\] {
+  height: 2px;
+}
+
 .h-\[32px\] {
   height: 32px;
 }
@@ -6104,6 +6104,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--state-color-error-default) calc(100% * 1), transparent);
 }
 
+.fill-info {
+  fill: color-mix(in srgb, var(--state-color-info-default) calc(100% * 1), transparent);
+}
+
 .fill-inherit {
   fill: inherit;
 }
@@ -6128,6 +6132,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.fill-secondary {
+  fill: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * 1), transparent);
+}
+
 .fill-warning {
   fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
 }

package/package.json

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