@zuzjs/ui 0.7.7 → 0.7.9

package/dist/cjs/comps/Text/index.js

@@ -1,12 +1,14 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
 import Span from '../Span';
 const Text = forwardRef((props, ref) => {
-    const { h, html, children, ...pops } = props;
+    const { h, html, children, lines, ...pops } = props;
     const { style, className, rest } = useBase(pops);
+    // const textRef = useTruncateText(lines || 2)
+    // const mergedRef = useMergedRefs(ref, textRef)
     const Tag = `h${props.h || 1}`;
     return _jsx(Tag, { ref: ref, style: style, className: className, ...rest, children: html ? _jsx(Span, { dangerouslySetInnerHTML: { __html: html } }) : children });
 });
+Text.displayName = `ZuzUI.Text`;
 export default Text;

package/dist/cjs/comps/TextArea/index.d.ts

@@ -2,10 +2,12 @@ import { Props } from '../../types';
 import { Variant } from '../../types/enums';
 export type TextAreaProps = Props<`textarea`> & {
     autoResize?: boolean;
+    resize?: `none` | `block` | `both` | `horizontal` | `vertical`;
     variant?: Variant;
 };
 declare const TextArea: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof import("../..").ZuzProps> & {
     autoResize?: boolean;
+    resize?: `none` | `block` | `both` | `horizontal` | `vertical`;
     variant?: Variant;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/dist/cjs/comps/TextArea/index.js

@@ -1,13 +1,13 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useBase } from '../../hooks';
 import { Variant } from '../../types/enums';
 const TextArea = forwardRef((props, ref) => {
-    const { autoResize, variant, ...pops } = props;
+    const { autoResize, variant, resize, ...pops } = props;
     const { style, className, rest } = useBase(pops);
     const handleInput = (event) => {
     };
-    return _jsx("textarea", { className: `--input --textarea --${variant || Variant.Small} flex ${className}`.trim(), style: style, onInput: handleInput, ref: ref, ...rest });
+    return _jsx("textarea", { className: `--input --textarea --${variant || Variant.Small} flex ${className}`.trim(), style: { ...style, resize: resize || `none` }, onInput: handleInput, ref: ref, ...rest });
 });
+TextArea.displayName = `ZuzUI.TextArea`;
 export default TextArea;

package/dist/cjs/comps/TextWheel/index.js

@@ -50,4 +50,5 @@ const TextWheel = forwardRef((props, ref) => {
                     background: `linear-gradient(0deg, ${color}, transparent, transparent, transparent, ${color})`,
                 } })] });
 });
+TextWheel.displayName = `TextWheel`;
 export default TextWheel;

package/dist/cjs/comps/Tooltip/index.d.ts

@@ -1,6 +1,5 @@
-import { BoxProps } from '../Box';
 import { Position } from '../../types/enums';
-declare const ToolTip: import("react").ForwardRefExoticComponent<BoxProps & {
+declare const ToolTip: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     position?: Position;
     margin?: number;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/comps/Tooltip/index.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { useBase, useDimensions } from '../../hooks';
+import { Position, TRANSITION_CURVES } from '../../types/enums';
 import Box from '../Box';
 import Text from '../Text';
-import { Position, TRANSITION_CURVES } from '../../types/enums';
 const ToolTip = forwardRef((props, ref) => {
     const { title, position, margin, children, ...pops } = props;
     const { style, className, rest } = useBase(pops);
@@ -53,4 +53,5 @@ const ToolTip = forwardRef((props, ref) => {
                     when: hovered
                 }, children: _jsx(Text, { className: `--text rel`, children: title }) })] });
 });
+ToolTip.displayName = `ToolTip`;
 export default ToolTip;

package/dist/cjs/comps/Treeview/index.d.ts

@@ -1,6 +1,5 @@
 import { TreeViewHandler } from "./types";
-import { BoxProps } from "../Box";
-declare const TreeView: import("react").ForwardRefExoticComponent<Omit<BoxProps, "tag"> & {
+declare const TreeView: import("react").ForwardRefExoticComponent<Omit<import("..").BoxProps, "tag"> & {
     tag?: string;
     roots: string[];
     nodes: import("./types").TreeNode[];

package/dist/cjs/comps/Treeview/index.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import Box from "../Box";
@@ -19,6 +20,7 @@ const TreeView = forwardRef((props, ref) => {
     }, [_selected]);
     return _jsx(Box, { className: `--treeview flex cols`, children: nodes
             .filter(node => roots.includes(node.tag))
-            .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: e => handleSelect(e), icons: icons, meta: node, skeleton: rest.skeleton, nodes: nodes }, `--node-${node.tag}`)) });
+            .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: e => handleSelect(e), icons: icons, meta: node, roots: roots, expanded: node.expanded || false, skeleton: rest.skeleton, nodes: nodes }, `--node-${node.tag}`)) });
 });
+TreeView.displayName = `ZuzUI.TreeView`;
 export default TreeView;

package/dist/cjs/comps/Treeview/item.d.ts

@@ -1,9 +1,10 @@
 import { TreeItemHandler } from "./types";
-import { BoxProps } from "../Box";
-declare const TreeItem: import("react").ForwardRefExoticComponent<BoxProps & {
+declare const TreeItem: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
     treeTag: string;
     meta: import("./types").TreeNode;
     nodes: import("./types").TreeNode[];
+    expanded: boolean;
+    roots: string[];
     onSelect: (tag: string) => void;
     selected?: String;
     icons?: import("./types").TreeNodeIcons;

package/dist/cjs/comps/Treeview/item.js

@@ -1,28 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useMemo, useState } from "react";
 import Box from "../Box";
 import Button from "../Button";
 import Icon from "../Icon";
 import Text from "../Text";
 import SVGIcons from "../svgicons";
 const TreeItem = forwardRef((props, ref) => {
-    const { as, meta, nodes, icons, onSelect, treeTag, selected, ...rest } = props;
+    const { as, meta, nodes, icons, onSelect, treeTag, selected, roots, expanded, ...rest } = props;
     const { tag, label, icon, under, isHead } = meta;
-    const [isOpen, setIsOpen] = useState(tag == `root`);
+    const isRoot = useMemo(() => roots.includes(tag), [roots]);
+    const [isOpen, setIsOpen] = useState(expanded);
     const toggle = () => {
         localStorage.setItem(`--tn${treeTag}-${tag}`, isOpen ? `0` : `1`);
         setIsOpen(!isOpen);
     };
     useEffect(() => {
-        if (tag == `root` && !localStorage.getItem(`--tn${treeTag}-${tag}`)) {
+        if (expanded || (isRoot && !localStorage.getItem(`--tn${treeTag}-${tag}`))) {
             localStorage.setItem(`--tn${treeTag}-${tag}`, `1`);
             setIsOpen(true);
         }
         else
             setIsOpen(localStorage.getItem(`--tn${treeTag}-${tag}`) == `1`);
     }, []);
-    const _nodes = nodes.filter(x => x.under == tag);
-    return _jsxs(Box, { className: `--treenode --treenode-${tag} flex cols`, children: [_jsxs(Box, { className: `--node --node-${tag} flex aic${selected == tag ? ` --selected` : ``}`, children: [_jsx(Button, { skeleton: rest.skeleton, onClick: toggle, className: `--node-aro-btn`, disabled: _nodes.length == 0, children: icons ? _jsx(Icon, { skeleton: rest.skeleton, className: `--node-aro-icon`, name: _nodes.length == 0 ? icons?.arrowDisabled || icons?.arrowClose : isOpen ? icons?.arrowOpen : icons?.arrowClose })
-                            : _nodes.length == 0 ? SVGIcons.chevronBottom : isOpen ? SVGIcons.chevronBottom : SVGIcons.chevronRight }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [icons?.nodeOpen && icons?.nodeClose && _jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon`, name: icon || (isOpen ? icons?.nodeOpen : icons?.nodeClose) }), _jsx(Text, { ...{ className: `--node-label` }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
+    const _nodes = useMemo(() => nodes.filter(x => x.under == tag), [nodes, tag]);
+    return _jsxs(Box, { className: `--treenode ${isRoot ? `--is-root` : ``} --treenode-${tag} flex cols`, children: [_jsxs(Box, { className: `--node --node-${tag} flex aic ${selected == tag ? ` --selected` : ``}`, children: [_jsx(Button, { skeleton: rest.skeleton, onClick: toggle, className: `--node-aro-btn`, disabled: _nodes.length == 0, children: icons?.arrowClose && icons?.arrowOpen ? _jsx(Icon, { skeleton: rest.skeleton, className: `--node-aro-icon`, name: _nodes.length == 0 ? icons?.arrowDisabled || icons?.arrowClose : isOpen ? icons?.arrowOpen : icons?.arrowClose })
+                            : _nodes.length == 0 ? SVGIcons.chevronBottom : isOpen ? SVGIcons.chevronBottom : SVGIcons.chevronRight }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [((icons?.nodeOpen && icons?.nodeClose) || (isRoot && icons?.rootOpen && icons?.rootClose)) &&
+                                _jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon ${isRoot ? `--icon-root` : ``}`, name: icon || (isOpen ?
+                                        isRoot ? icons?.rootOpen || icons.nodeOpen : icons.nodeOpen
+                                        : isRoot ? icons?.rootClose || icons?.nodeClose : icons?.nodeClose) }), _jsx(Text, { ...{ className: `--node-label` }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, roots: roots, expanded: node.expanded || false, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
 });
+TreeItem.displayName = `TreeItem`;
 export default TreeItem;

package/dist/cjs/comps/Treeview/types.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode } from "react";
 import { BoxProps } from "../Box";
 export interface TreeNodeIcons {
+    rootOpen?: ReactNode;
+    rootClose?: ReactNode;
     nodeOpen?: ReactNode;
     nodeClose?: ReactNode;
-    arrowOpen: ReactNode;
-    arrowClose: ReactNode;
+    arrowOpen?: ReactNode;
+    arrowClose?: ReactNode;
     arrowDisabled?: ReactNode;
 }
 export type TreeViewProps = Omit<BoxProps, `tag`> & {
@@ -31,6 +33,8 @@ export type TreeItemProps = BoxProps & {
     treeTag: string;
     meta: TreeNode;
     nodes: TreeNode[];
+    expanded: boolean;
+    roots: string[];
     onSelect: (tag: string) => void;
     selected?: String;
     icons?: TreeNodeIcons;

package/dist/cjs/comps/VideoPlayer/index.d.ts

@@ -0,0 +1,2 @@
+declare const VideoPlayer: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export default VideoPlayer;

package/dist/cjs/comps/VideoPlayer/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Box from "../Box";
+const VideoPlayer = forwardRef((props, ref) => {
+    return _jsx(Box, {});
+});
+export default VideoPlayer;

package/dist/cjs/comps/index.d.ts

@@ -9,7 +9,7 @@ export { default as AutoComplete } from './AutoComplete';
 export * from './AutoComplete/types';
 export { default as Avatar } from './Avatar';
 export * from './Avatar/types';
-export { type BoxProps, default as Box } from './Box';
+export { default as Box, type BoxProps } from './Box';
 export { default as Button } from './Button';
 export * from './Button/types';
 export { default as CheckBox } from './CheckBox';
@@ -19,7 +19,9 @@ export { default as ContextMenu } from './ContextMenu';
 export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
-export { type CoverProps, default as Cover } from './Cover';
+export { default as Cover, type CoverProps } from './Cover';
+export { default as Crumb } from './Crumb';
+export * from './Crumb/types';
 export { default as Drawer } from './Drawer';
 export * from './Drawer/types';
 /**Editor */
@@ -29,43 +31,49 @@ export * from './Editor/types';
 export { default as withEditor } from './Editor/withEditor';
 export { default as Fab } from './Fab';
 export * from './Fab/types';
-export { type FilterProps, default as Filters } from './Filters';
-export { type FormProps, default as Form } from './Form';
-export { type IconProps, default as Icon } from './Icon';
-export { type ImageProps, default as Image } from './Image';
-export { type InputProps, default as Input } from './Input';
-export { type LabelProps, default as Label } from './Label';
+export { default as Filters, type FilterProps } from './Filters';
+export { default as Form } from './Form';
+export * from './Form/types';
+export { default as Icon, type IconProps } from './Icon';
+export { default as Image, type ImageProps } from './Image';
+export { default as Input, type InputProps } from './Input';
+export { default as KeyboardKeys } from './KeyboardKeys';
+export * from './KeyboardKeys/types';
+export { default as Label, type LabelProps } from './Label';
 export { default as List } from './List';
 export * from './List/types';
 export { default as NetworkStatus } from './Network';
 export * from './Network/types';
-export { type OverlayProps, default as Overlay } from './Overlay';
-export { type PasswordProps, default as Password } from './Password';
-export { type PinInputProps, default as PinInput } from './PinInput';
+export { default as Overlay, type OverlayProps } from './Overlay';
+export { default as Password, type PasswordProps } from './Password';
+export { default as PinInput, type PinInputProps } from './PinInput';
 export { default as Pagination } from './Pagination';
 export * from './Pagination/types';
 export { default as ProgressBar } from './ProgressBar';
 export * from './ProgressBar/types';
 export { default as Radio } from './Radio';
 export * from './Radio/types';
-export { type SearchProps, default as Search } from './Search';
+export { default as ScrollView } from './ScrollView';
+export * from './ScrollView/types';
+export { default as Search } from './Search';
+export * from './Search/types';
 export { default as SelectTabs } from './Segmented';
 export * from './Segmented/types';
 export { default as Select } from './Select';
 export * from './Select/types';
-export { type SheetProps, type SheetHandler, default as Sheet } from './Sheet';
+export { default as Sheet, type SheetHandler, type SheetProps } from './Sheet';
 export { default as SideBar } from './Sidebar';
 export * from './Sidebar/types';
-export { type SliderProps, default as Slider } from './Slider';
-export { type SpanProps, default as Span } from './Span';
-export { type SpinnerProps, default as Spinner } from './Spinner';
+export { default as Slider, type SliderProps } from './Slider';
+export { default as Span, type SpanProps } from './Span';
+export { default as Spinner, type SpinnerProps } from './Spinner';
 export { default as Switch } from './Switch';
 export { default as Table } from './Table';
 export * from './Table/types';
 export { default as TabView } from './TabView';
 export * from './TabView/types';
-export { type TextProps, default as Text } from './Text';
-export { type TextAreaProps, default as Textarea } from './TextArea';
+export { default as Text, type TextProps } from './Text';
+export { default as Textarea, type TextAreaProps } from './TextArea';
 export { default as TextWheel } from './TextWheel';
 export * from './TextWheel/types';
 export { default as ToolTip } from './Tooltip';

package/dist/cjs/comps/index.js

@@ -20,6 +20,8 @@ export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
 export { default as Cover } from './Cover';
+export { default as Crumb } from './Crumb';
+export * from './Crumb/types';
 export { default as Drawer } from './Drawer';
 export * from './Drawer/types';
 /**Editor */
@@ -31,9 +33,12 @@ export { default as Fab } from './Fab';
 export * from './Fab/types';
 export { default as Filters } from './Filters';
 export { default as Form } from './Form';
+export * from './Form/types';
 export { default as Icon } from './Icon';
 export { default as Image } from './Image';
 export { default as Input } from './Input';
+export { default as KeyboardKeys } from './KeyboardKeys';
+export * from './KeyboardKeys/types';
 export { default as Label } from './Label';
 export { default as List } from './List';
 export * from './List/types';
@@ -48,7 +53,10 @@ export { default as ProgressBar } from './ProgressBar';
 export * from './ProgressBar/types';
 export { default as Radio } from './Radio';
 export * from './Radio/types';
+export { default as ScrollView } from './ScrollView';
+export * from './ScrollView/types';
 export { default as Search } from './Search';
+export * from './Search/types';
 export { default as SelectTabs } from './Segmented';
 export * from './Segmented/types';
 export { default as Select } from './Select';

package/dist/cjs/funs/css.d.ts

@@ -1,7 +1,7 @@
-import { dynamicObject } from "../types";
+import { OptionValues } from "commander";
 import Hashids from "hashids";
+import { dynamicObject } from "../types";
 import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
-import { OptionValues } from "commander";
 declare class CSS {
     cache: dynamicObject;
     PROPS: dynamicObject;
@@ -52,7 +52,7 @@ declare class CSS {
 export default CSS;
 export declare const buildWithStyles: (source: dynamicObject) => dynamicObject;
 export declare const getAnimationCurve: (curve?: string | TRANSITION_CURVES) => string;
-export declare const animationTransition: (transition: TRANSITIONS) => {
+export declare const animationTransition: (transition: TRANSITIONS, offset?: number, dialog?: boolean) => {
     from: {};
     to: {};
 };

package/dist/cjs/funs/css.js

@@ -1,9 +1,9 @@
-import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
-import { cssAnimationCurves, cssDirect, cssFilterKeys, cssProps, cssPropsWithColor, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 import Hashids from "hashids";
-import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
 import md5 from "md5";
 import pc from "picocolors";
+import { TRANSITION_CURVES, TRANSITIONS } from "../types/enums.js";
+import { __SALT, FIELNAME_KEY, isColor, isHexColor, isNumber, LINE_KEY, setDeep } from "./index.js";
+import { cssAnimationCurves, cssDirect, cssFilterKeys, cssProps, cssPropsWithColor, cssTransformKeys, cssWithKeys } from "./stylesheet.js";
 class CSS {
     cache;
     PROPS;
@@ -935,39 +935,41 @@ export const getAnimationCurve = (curve) => {
     switch (curve.toUpperCase()) {
         case TRANSITION_CURVES.Bounce:
             return `var(--bounce)`;
-            // return `linear( 0, 0.0039, 0.0157, 0.0352, 0.0625 9.09%,
-            //     0.1407, 0.25, 0.3908, 0.5625, 0.7654,
-            //     1, 0.8907, 0.8125 45.45%, 0.7852, 0.7657,
-            //     0.7539, 0.75, 0.7539, 0.7657, 0.7852,
-            //     0.8125 63.64%, 0.8905, 1 72.73%, 0.9727, 0.9532,
-            //     0.9414, 0.9375, 0.9414, 0.9531, 0.9726,
-            //     1, 0.9883, 0.9844, 0.9883, 1 )`
-            break;
         case TRANSITION_CURVES.Spring:
             // return `cubic-bezier(0.2, -0.36, 0, 1.46)`
             return `var(--spring)`;
-            break;
         case TRANSITION_CURVES.EaseInOut:
             // return `cubic-bezier(0.42, 0, 0.58, 1)`
             return `ease-in-out`;
-            break;
         default:
             return `linear`;
     }
 };
-export const animationTransition = (transition) => {
+export const animationTransition = (transition, offset = 0, dialog = false) => {
     let _from = {};
     let _to = {};
     switch (transition) {
         case TRANSITIONS.SlideInLeft:
         case TRANSITIONS.SlideInRight:
-            _from = { x: transition == TRANSITIONS.SlideInLeft ? -20 : 20, opacity: 0 };
-            _to = { x: 0, opacity: 1 };
+            _from = { x: transition == TRANSITIONS.SlideInLeft ?
+                    dialog ? `-${50 + (offset || 10)}%` : -20 :
+                    dialog ? `-${50 - (offset || 10)}%` : 20,
+                y: dialog ? `-50%` : 0,
+                opacity: 0 };
+            _to = { x: dialog ? `-50%` : 0, y: dialog ? `-50%` : 0, opacity: 1 };
             break;
         case TRANSITIONS.SlideInTop:
         case TRANSITIONS.SlideInBottom:
-            _from = { y: transition == TRANSITIONS.SlideInTop ? -20 : 20, opacity: 0 };
-            _to = { y: 0, opacity: 1 };
+            _from = {
+                y: transition == TRANSITIONS.SlideInTop ?
+                    //Top
+                    dialog ? `-${50 + (offset || 10)}%` : -20
+                    //Bottom 
+                    : dialog ? `-${50 - (offset || 10)}%` : 20,
+                x: dialog ? `-50%` : 0,
+                opacity: 0
+            };
+            _to = { y: dialog ? `-50%` : 0, x: dialog ? `-50%` : 0, opacity: 1 };
             break;
         case TRANSITIONS.ScaleIn:
             _from = { scale: 0, opacity: 0 };

package/dist/cjs/funs/index.d.ts

@@ -63,7 +63,8 @@ export declare const formatSize: (bytes: number | string) => string;
 export declare const copyToClipboard: (text: string) => Promise<unknown>;
 export declare const natsort: (options?: sortOptions) => (a: string | number, b: string | number) => number;
 export declare const bindKey: (key: KeyCode, fun: () => void, element?: HTMLElement) => void;
-export declare const camelCase: (str: string) => string;
+export declare const camelCase: (str: string, ucf?: boolean) => string;
+export declare const camelCaseToDash: (str: string) => string;
 export declare const pluralize: (word: string, count: number) => string;
 export declare const addPropsToChildren: (children: ReactNode, conditions: (child: ReactElement<any>) => boolean, newProps: object) => ReactNode;
 export declare const getPositionAroundElement: (x: number, y: number, distance: number, childCount: number) => {
@@ -73,3 +74,4 @@ export declare const getPositionAroundElement: (x: number, y: number, distance:
 export declare const clamp: (value: number, min: number, max: number) => number;
 export declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;
 export declare const slugify: (text: string, separator?: string) => string;
+export declare const truncate: (selector: string, lines?: number) => void;

package/dist/cjs/funs/index.js

@@ -468,15 +468,16 @@ export const bindKey = (key, fun, element) => {
     };
     (element || document.documentElement).addEventListener('keydown', handleKeydown);
 };
-export const camelCase = (str) => {
+export const camelCase = (str, ucf = false) => {
     return str
         .toLowerCase()
         .split(/[^a-zA-Z0-9]+/) // Split by any non-alphanumeric character
         .map((word, index) => index === 0
-        ? word
-        : word.charAt(0).toUpperCase() + word.slice(1))
+        ? ucf ? ucfirst(word) : word
+        : ucfirst(word))
         .join('');
 };
+export const camelCaseToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 export const pluralize = (word, count) => `${word}${count !== 1 ? 's' : ''}`;
 export const addPropsToChildren = (children, conditions, newProps) => {
     return Children.map(children, (child) => {
@@ -535,3 +536,13 @@ export const slugify = (text, separator = "-") => {
         .replace(new RegExp(`\\${separator}{2,}`, "g"), separator) // Remove duplicate separators
         .replace(new RegExp(`^\\${separator}|\\${separator}$`, "g"), ""); // Trim separators from ends
 };
+export const truncate = (selector, lines = 2) => {
+    const elements = document.querySelectorAll(selector);
+    elements.forEach((el) => {
+        const lineHeight = parseFloat(window.getComputedStyle(el).lineHeight);
+        const maxHeight = lineHeight * lines;
+        while (el.scrollHeight > maxHeight) {
+            el.textContent = el.textContent?.trim().slice(0, -1) + '…';
+        }
+    });
+};

package/dist/cjs/funs/stylesheet.js

@@ -325,14 +325,19 @@ export const cssDirect = {
     "brightness": "filter: brightness(__VALUE__);",
     "ratio": "aspect-ratio: __VALUE__;",
     "center-h": "left: 50%;transform: translateX(-50%);",
+    "center-x": "left: 50%;transform: translateX(-50%);",
     "center-v": "top: 50%;transform: translateY(-50%);",
+    "center-y": "top: 50%;transform: translateY(-50%);",
     "no-overflow": "overflow: hidden;",
+    "no-overflow-x": "overflow-x: hidden;",
+    "no-overflow-y": "overflow-y: hidden;",
     "overflow-x": "overflow-x: auto;",
     "overflow-y": "overflow-x: auto;",
     "space-pre": "white-space: pre;",
     "white-space-pre": "white-space: pre;",
     "text-wrap": "width: 98%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;",
     "text-clip": "color: transparent;background-clip: text;-webkit-background-clip: text;",
+    "word-break": "wordc-break: break-word;",
 };
 export const cssPropsWithColor = [
     // Regular CSS keys

package/dist/cjs/hooks/index.d.ts

@@ -3,19 +3,25 @@ export { default as useBase } from './useBase';
 export { default as useCalendar } from './useCalendar';
 export { useColorScheme } from './useColorScheme';
 export { default as useContextMenu } from './useContextMenu';
-export { type IDBOptions, type IDBSchema, default as useDB } from './useDB';
+export { default as useDB, type IDBOptions, type IDBSchema } from './useDB';
 export { default as useDebounce } from './useDebounce';
+/**
+ * @deprecated use useDelayed hook instead
+ */
+export { default as useDelayed, default as useMounted } from './useDelayed';
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
-export { default as useDrag } from './useDrag';
-export { type DragOptions } from './useDrag';
+export { default as useMediaPlayer, type MediaPlayerProps, type MediaType } from './useMediaPlayer';
+export { default as useMergedRefs } from './useMergedRefs';
+export { default as useMutationObserver, type MutationCallback } from './useMutationObserver';
+export { default as useDrag, type DragOptions } from './useDrag';
+export { default as useFileManager } from './useFileManager';
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
-export { default as useKeyBind } from './useKeyBind';
-/**
- * @deprecated use useDelayed hook instead
- */
-export { default as useMounted } from './useMounted';
-export { default as useDelayed } from './useMounted';
+export { default as useScrollbar } from './useScrollbar';
+export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
+export { default as useSlider } from './useSlider';
+export { default as useTruncateText } from './useTruncateText';
+export { default as useViewTransition } from './useViewTransition';

package/dist/cjs/hooks/index.js

@@ -5,17 +5,24 @@ export { useColorScheme } from './useColorScheme';
 export { default as useContextMenu } from './useContextMenu';
 export { default as useDB } from './useDB';
 export { default as useDebounce } from './useDebounce';
+/**
+ * @deprecated use useDelayed hook instead
+ */
+export { default as useDelayed, default as useMounted } from './useDelayed';
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
+export { default as useMediaPlayer } from './useMediaPlayer';
+export { default as useMergedRefs } from './useMergedRefs';
+export { default as useMutationObserver } from './useMutationObserver';
 export { default as useDrag } from './useDrag';
+export { default as useFileManager } from './useFileManager';
+//useFilter
 export { default as useImage } from './useImage';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
-export { default as useKeyBind } from './useKeyBind';
-/**
- * @deprecated use useDelayed hook instead
- */
-export { default as useMounted } from './useMounted';
-export { default as useDelayed } from './useMounted';
+export { default as useScrollbar } from './useScrollbar';
+export { default as useShortcuts } from './useShortcuts';
 export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
-// export { default as useDomSelector } from './useDomSelector';
+export { default as useSlider } from './useSlider';
+export { default as useTruncateText } from './useTruncateText';
+export { default as useViewTransition } from './useViewTransition';

package/dist/cjs/hooks/useAnchorPosition.d.ts

@@ -1,4 +1,3 @@
-import { RefObject } from "react";
 export type AnchorOptions = {
     offsetX?: number;
     offsetY?: number;
@@ -9,6 +8,6 @@ declare const useAnchorPosition: (parent?: HTMLElement, event?: MouseEvent, opti
         top: number;
         left: number;
     };
-    targetRef: RefObject<HTMLDivElement | null>;
+    targetRef: import("react").RefObject<HTMLDivElement | null>;
 };
 export default useAnchorPosition;

package/dist/cjs/hooks/useAnchorPosition.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 const useAnchorPosition = (parent, event, options = {}) => {
     const [position, setPosition] = useState({ top: 0, left: 0 });