@zuzjs/ui 0.8.1 → 0.8.3

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

@@ -4,7 +4,7 @@ declare const Search: import("react").ForwardRefExoticComponent<import("../..").
     numeric?: boolean;
     size?: import("../..").Size;
     variant?: Variant;
-    with?: import("../..").FORMVALIDATION;
+    with?: import("../..").FORMVALIDATION | `${import("../..").FORMVALIDATION}${string}`;
 } & {
     onSubmit?: (value: string) => void;
     onChange?: (value: string) => void;

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

@@ -38,5 +38,5 @@ const Search = forwardRef((props, ref) => {
     useEffect(() => { }, []);
     return _jsxs(Box, { style: style, className: `--search ${reverse ? `--search-rev` : ``} --${props.variant || Variant.Small} flex aic ${props.as?.includes(`abs`) ? `` : `rel`} ${className}`.trim(), children: [reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search }), _jsx(Input, { ref: innerRef, onChange: handleChange, className: `--${props.variant || Variant.Small}`, ...pops }), props.shortcut && _jsx(KeyBoardKeys, { keys: props.shortcut, as: `abs` }), !reverse && _jsx(Button, { tabIndex: -1, onClick: e => handleSubmit(), className: `--send flex aic jcc`, variant: props.variant || Variant.Small, children: query !== `` ? SVGIcons.close : SVGIcons.search })] });
 });
-Search.displayName = `Search`;
+Search.displayName = `Zuz.Search`;
 export default Search;

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

@@ -59,5 +59,5 @@ const Segmented = forwardRef((props, ref) => {
                     index: i
                 } }, `segment-${item.label}-${i}`))] });
 });
-Segmented.displayName = `ZuzUI.SelectTabs`;
+Segmented.displayName = `Zuz.SelectTabs`;
 export default Segmented;

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

@@ -1,5 +1,6 @@
 import { Option } from "./types";
 declare const Select: import("react").ForwardRefExoticComponent<Omit<import("..").BoxProps, "onChange"> & {
+    variant?: import("../..").Variant;
     required?: import("../..").FORMVALIDATION;
     options: Option[];
     label?: string;

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

@@ -9,7 +9,7 @@ import SVGIcons from "../svgicons";
 import Text from "../Text";
 import OptionItem from "./optionItem";
 const Select = forwardRef((props, ref) => {
-    const { selected, options, label, name, search: withSearch, searchPlaceholder, onChange, ...pops } = props;
+    const { selected, options, label, name, variant, search: withSearch, searchPlaceholder, onChange, ...pops } = props;
     const [value, setValue] = useState(selected ?
         typeof selected === `string` ? options.find(fo => fo.value === selected) : selected
         : options[0]);
@@ -40,7 +40,7 @@ const Select = forwardRef((props, ref) => {
             setQuery(null);
         }
     }, [choosing]);
-    return _jsxs(Box, { className: `--select ${name ? `--${name}` : ``} rel`.trim(), name: _id, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, style: {
+    return _jsxs(Box, { className: `--select ${variant ? `--${variant}` : ``} ${name ? `--${name}` : ``} rel`.trim(), name: _id, children: [_jsxs(Button, { "data-value": value ? `string` == typeof value ? value : value.value : value || `-1`, className: `--selected flex aic rel ${className}`.trim(), withLabel: false, style: style, onClick: (e) => setChoosing(prev => !prev), ...rest, children: [_jsx(Text, { className: `--label`, children: value ? `string` == typeof value ? value : value.label : label || `Choose` }), _jsx(Box, { className: `--svg-arrow rel flex aic jcc`, children: choosing ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), _jsxs(Box, { id: _id, className: `--options-list flex cols abs`, style: {
                     pointerEvents: choosing ? `auto` : `none`,
                 }, animate: {
                     from: { y: 5, opacity: 0 },
@@ -58,5 +58,5 @@ const Select = forwardRef((props, ref) => {
                     }))
                         .map((o) => _jsx(OptionItem, { updateValue: updateValue, value: value, o: o }, `option-${(`string` == typeof o ? o : o.label).replace(/\s+/g, `-`)}-${`string` == typeof o ? o : o.value}`))] })] });
 });
-Select.displayName = `Select`;
+Select.displayName = `Zuz.Select`;
 export default Select;

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

@@ -1,5 +1,5 @@
 import { FormEventHandler } from "react";
-import { FORMVALIDATION } from "../../types/enums";
+import { FORMVALIDATION, Variant } from "../../types/enums";
 import { BoxProps } from "../Box";
 /**
  * Represents an option which can be either a string or an OptionObject.
@@ -21,6 +21,11 @@ export interface OptionItemProps {
  * Props for the Select component.
  */
 export type SelectProps = Omit<BoxProps, "onChange"> & {
+    /**
+     * Size of the select field.
+     * @default "md"
+     */
+    variant?: Variant;
     /**
      * Indicates if the select field is required and its validation type.
      */

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

@@ -189,5 +189,5 @@ export const isSheetHandler = (src) => {
         && `success` in src
         && `error` in src;
 };
-Sheet.displayName = `Sheet`;
+Sheet.displayName = `Zuz.Sheet`;
 export default Sheet;

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

@@ -5,5 +5,5 @@ const Sidebar = forwardRef((props, ref) => {
     const { layout, logo } = props;
     return _jsxs(Box, { ref: ref, className: `--sidebar --${layout || `2-columns`} flex cols`, children: [_jsx(Box, { as: `--logo`, children: logo }), _jsx(Box, { as: `--nav flex cols` })] });
 });
-Sidebar.displayName = `Sidebar`;
+Sidebar.displayName = `Zuz.Sidebar`;
 export default Sidebar;

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

@@ -78,5 +78,5 @@ const Slider = forwardRef((props, ref) => {
     }, [isDragging]);
     return _jsx(Box, { ref: slider, "data-value": value || 0, className: `--slider --${type || SLIDER.Default} flex rel ${className}`.trim(), style: { ...style }, children: SLIDER.Text === type ? _jsx(_Fragment, { children: _jsx(Text, { ref: text, onMouseDown: handleMouseDown, className: `--slider-text`, children: value || 0 }) }) : _jsxs(_Fragment, { children: [_jsx(Box, { ref: track, className: `--slider-track abs fill` }), _jsx(Box, { ref: knob, className: `--slider-knob abs` }), _jsx(Input, { ref: input, onInput: handleInput, className: `abs fill`, tabIndex: 0, type: type || SLIDER.Default, defaultValue: value || 0, step: step, max: max, min: min })] }) });
 });
-Slider.displayName = `Slider`;
+Slider.displayName = `Zuz.Slider`;
 export default Slider;

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

@@ -7,5 +7,5 @@ const Span = forwardRef((props, ref) => {
     const { style: _style, className, rest } = useBase(pops);
     return _jsx("span", { ref: ref, style: style, className: className, ...rest });
 });
-Span.displayName = `Span`;
+Span.displayName = `Zuz.Span`;
 export default Span;

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

@@ -49,5 +49,5 @@ const Spinner = forwardRef((props, ref) => {
             ...build()
         }, ...rest, children: child() });
 });
-Spinner.displayName = `ZuzUI.Spinner`;
+Spinner.displayName = `Zuz.Spinner`;
 export default Spinner;

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

@@ -4,6 +4,7 @@ declare const Switch: import("react").ForwardRefExoticComponent<import("../..").
     type?: CHECKBOX;
     size?: import("../..").Size;
     variant?: import("../..").Variant;
+    checked?: boolean;
     onSwitch?: (checked: boolean, value: string | number | readonly string[]) => void;
 } & import("react").RefAttributes<CheckboxHandler>>;
 export default Switch;

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

@@ -5,5 +5,5 @@ import CheckBox from "../CheckBox";
 const Switch = forwardRef((props, ref) => {
     return _jsx(CheckBox, { type: CHECKBOX.Switch, ...props, ref: ref });
 });
-Switch.displayName = `Switch`;
+Switch.displayName = `Zuz.Switch`;
 export default Switch;

package/dist/cjs/comps/TabView/body.js

@@ -21,5 +21,5 @@ const TabBody = ({ size, index, active, render, content }) => {
             ...style
         }, className: `--content`, children: (render || active) && content });
 };
-TabBody.displayName = `TabBody`;
+TabBody.displayName = `Zuz.TabBody`;
 export default TabBody;

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

@@ -46,5 +46,5 @@ const TabView = forwardRef((props, ref) => {
                         transition: `all ${speed || 0.3}s ease-in-out 0s`, transform: `translate(-${activeTab * size.width}px, 0)`
                     }, children: tabs.map((tab, index) => _jsx(TabBody, { index: index, active: index === activeTab, size: size, render: render, content: tab.body }, `tab-body-${tab.key || index}-${tabViewID}`)) }) })] });
 });
-TabView.displayName = `TabView`;
+TabView.displayName = `Zuz.TabView`;
 export default TabView;

package/dist/cjs/comps/TabView/tab.js

@@ -6,5 +6,5 @@ const TabItem = ({ tab, index, activeTab, onClick }) => {
     const { icon, label } = tab;
     return _jsxs(Button, { onClick: e => onClick(index), className: `--tab jcc ${index === activeTab ? '--active' : ''}`.trim(), children: [icon && (typeof icon === 'string' ? _jsx(Icon, { className: `--icon`, name: icon }) : icon), _jsx(Text, { className: `--label rel`, children: label })] });
 };
-TabItem.displayName = `TabItem`;
+TabItem.displayName = `Zuz.TabItem`;
 export default TabItem;

package/dist/cjs/comps/Table/col.js

@@ -19,5 +19,5 @@ const TColumn = (props) => {
                 && sortBy == id
                 && _jsx(Box, { as: `--arrow flex aib`, children: _sort == 1 ? SVGIcons.arrowUp : SVGIcons.arrowDown })] });
 };
-TColumn.displayName = `Column`;
+TColumn.displayName = `Zuz.Column`;
 export default TColumn;

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

@@ -7,7 +7,61 @@ import Box from "../Box";
 import Pagination from "../Pagination";
 import { PaginationStyle } from "../Pagination/types";
 import TRow from "./row";
-// const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {
+/**
+ * `Table` is a highly flexible and customizable generic component for rendering data in a tabular format.
+ *
+ * This component supports features such as:
+ * - Dynamic column schema and row data.
+ * - Sortable and selectable rows.
+ * - Optional pagination with custom control.
+ * - Row-level animation and hover states.
+ * - Loading placeholders and spinners.
+ * - Context menu support for rows.
+ *
+ * @template T - The shape of the row data object.
+ *
+ * @param props - The props for configuring the table behavior and appearance.
+ * @param props.schema - Column definitions used to render the table header and body.
+ * @param props.rows - The array of row data to display.
+ * @param props.rowCount - Optional total row count for server-side pagination.
+ * @param props.rowsPerPage - Number of rows shown per page.
+ * @param props.currentPage - Current page index (for pagination control).
+ * @param props.pagination - Whether pagination is enabled.
+ * @param props.paginationHash - A value to force pagination re-render.
+ * @param props.showPaginationOnZeroPageCount - Show pagination controls even with 0 rows.
+ * @param props.animateRows - Whether to animate rows on render/update.
+ * @param props.header - Whether to show the header row.
+ * @param props.rowClassName - CSS class name to apply to each row.
+ * @param props.selectableRows - Whether rows are selectable.
+ * @param props.hoverable - Whether rows should show hover styles.
+ * @param props.sortBy - Default column key to sort rows.
+ * @param props.loading - Enables loading state with placeholder rows and spinner.
+ * @param props.loadingRowCount - Number of placeholder rows to render during loading.
+ * @param props.loadingMessage - Optional loading text to show next to spinner.
+ * @param props.spinner - Spinner type to use when loading.
+ * @param props.onSort - Callback when a column header triggers sorting.
+ * @param props.onRowSelectToggle - Callback when a row’s selected state changes.
+ * @param props.onPageChange - Callback when pagination state changes.
+ * @param props.onRowContextMenu - Callback when a row is right-clicked.
+ * @param props.className - Additional class names to apply to the root table container.
+ * @param props.style - Inline styles to apply to the root table container.
+ *
+ * @returns The rendered table component.
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   schema={[
+ *     { id: 'name', value: 'Name', sortable: true },
+ *     { id: 'email', value: 'Email' },
+ *   ]}
+ *   rows={[{ name: 'Kamran', email: 'kamran@example.com' }]}
+ *   selectableRows
+ *   pagination
+ *   loading={false}
+ * />
+ * ```
+ */
 const Table = (props, ref) => {
     const { schema, rows, rowCount, rowsPerPage, currentPage, pagination, paginationHash, showPaginationOnZeroPageCount, animateRows, header, rowClassName, selectableRows, hoverable, sortBy, loading, loadingRowCount, loadingMessage, spinner, onSort, onRowSelectToggle, onPageChange, onRowContextMenu, ...pops } = props;
     const _pagination = useRef(null);
@@ -43,6 +97,6 @@ const Table = (props, ref) => {
     const _paginated = useMemo(() => _jsx(Pagination, { hash: paginationHash, ref: _pagination, renderOnZeroPageCount: showPaginationOnZeroPageCount, onPageChange: onPageChange, paginationStyle: PaginationStyle.Table, startPage: currentPage, itemCount: rowCount || (rows ? rows.length : 0), itemsPerPage: rowsPerPage || 10 }), []);
     return _jsxs(Box, { as: `--table ${(hoverable ?? true) ? `--hoverable` : ``} flex cols rel ${className}`, ref: _tableRef, children: [_header == true && _jsx(TRow, { sortBy: _sortBy, onSort: handleSort, tableRef: _tableRef, pubsub: pubsub, selectable: selectableRows, index: -1, schema: schema, loading: true, styles: _schemaParsed }), loading && _jsxs(Box, { as: `abs center-x flex aic --table-spinner`, children: [_jsx(Spinner, { type: spinner || SPINNER.Simple }), loadingMessage && _jsx(Text, { as: `--table-loading-message`, children: loadingMessage })] }), loading && Array(loadingRowCount || 5).fill({}).map((row, index) => _jsx(TRow, { tableRef: _tableRef, index: index, pubsub: pubsub, schema: schema, styles: _schemaParsed, loading: true, animate: animateRows }, `--trow-loading-${index}-${schema[0].id}`)), !loading && rows && rows.map((row, index) => _jsx(TRow, { tableRef: _tableRef, pubsub: pubsub, loading: false, index: index, schema: schema, ids: _cols, styles: _schemaParsed, animate: animateRows, data: row, rowClassName: rowClassName, selectable: selectableRows, onSelect: onRowSelectToggle, onContextMenu: onRowContextMenu }, `--trow-${rowKeys.current[index] || index}-${schema[0].id}`)), pagination && _pagination.current != null && _jsx(Box, { as: `--row flex aic --row-footer`, children: _paginated })] });
 };
-Table.displayName = `Table`;
+Table.displayName = `Zuz.Table`;
 const ForwardedTable = forwardRef(Table);
 export default ForwardedTable;

package/dist/cjs/comps/Table/row.js

@@ -83,5 +83,5 @@ const TRow = (props) => {
                 return _jsxs(Fragment, { children: [selectable && i == 0 && Selector(i, `--selector-${c.id}`, c.id.toString()), ids.includes(String(c.id)) ? _jsx(TColumn, { pubsub: pubsub, idx: i, id: String(c.id), style: styles[String(c.id)], value: c.render ? c.render(data, index) : data[String(c.id).includes(`.`) ? String(c.id).split(`.`).reverse()[0] : c.id] }) : null] }, `--${String(c.id)}-val-${i}`);
             })] });
 };
-TRow.displayName = `Row`;
+TRow.displayName = `Zuz.Row`;
 export default TRow;

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

@@ -10,5 +10,5 @@ const Text = forwardRef((props, ref) => {
     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`;
+Text.displayName = `Zuz.Text`;
 export default Text;

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

@@ -9,5 +9,5 @@ const TextArea = forwardRef((props, ref) => {
     };
     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`;
+TextArea.displayName = `Zuz.TextArea`;
 export default TextArea;

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

@@ -17,11 +17,11 @@ const TextWheel = forwardRef((props, ref) => {
             this.updateValue(v);
             if (divRef.current) {
                 const chars = v.toString().split('');
-                divRef.current.querySelectorAll('.wheel-char').forEach((charElement, index) => {
+                divRef.current.querySelectorAll('.--wheel-char').forEach((charElement, index) => {
                     const char = chars[index];
                     if (charElement instanceof HTMLElement) {
                         charElement.setAttribute('data-value', char);
-                        const track = charElement.querySelector('.wheel-char-track');
+                        const track = charElement.querySelector('.--wheel-char-track');
                         if (track instanceof HTMLElement) {
                             track.style.setProperty('--v', char);
                         }
@@ -50,5 +50,5 @@ const TextWheel = forwardRef((props, ref) => {
                     background: `linear-gradient(0deg, ${color}, transparent, transparent, transparent, ${color})`,
                 } })] });
 });
-TextWheel.displayName = `TextWheel`;
+TextWheel.displayName = `Zuz.TextWheel`;
 export default TextWheel;

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

@@ -53,5 +53,5 @@ const ToolTip = forwardRef((props, ref) => {
                     when: hovered
                 }, children: _jsx(Text, { className: `--text rel`, children: title }) })] });
 });
-ToolTip.displayName = `ToolTip`;
+ToolTip.displayName = `Zuz.ToolTip`;
 export default ToolTip;

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

@@ -22,5 +22,5 @@ const TreeView = forwardRef((props, ref) => {
             .filter(node => roots.includes(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`;
+TreeView.displayName = `Zuz.TreeView`;
 export default TreeView;

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

@@ -27,7 +27,7 @@ const TreeItem = forwardRef((props, ref) => {
                             : _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}`)) })] });
+                                        : isRoot ? icons?.rootClose || icons?.nodeClose : icons?.nodeClose) }), _jsx(Text, { ...{ className: `--node-label ${isRoot ? `--node-label-root` : ``}`.trim() }, 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/VideoPlayer/index.js

@@ -4,4 +4,5 @@ import Box from "../Box";
 const VideoPlayer = forwardRef((props, ref) => {
     return _jsx(Box, { children: _jsx("video", {}) });
 });
+VideoPlayer.displayName = `Zuz.VideoPlayer`;
 export default VideoPlayer;

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

@@ -20,6 +20,8 @@ export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
 export { default as Cover, type CoverProps } from './Cover';
+export { default as Cropper } from './Cropper';
+export * from './Cropper/types';
 export { default as Crumb } from './Crumb';
 export * from './Crumb/types';
 export { default as Drawer } from './Drawer';

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 Cropper } from './Cropper';
+export * from './Cropper/types';
 export { default as Crumb } from './Crumb';
 export * from './Crumb/types';
 export { default as Drawer } from './Drawer';

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

@@ -1,17 +1,41 @@
+export interface EventListener {
+    fun: (...args: any[]) => void;
+    context?: any;
+    id: symbol;
+}
 export interface Event {
     event: String | Symbol;
-    listeners: Array<{
-        fun: (...args: any[]) => void;
-        context?: any;
-    }>;
+    listeners: Array<EventListener>;
 }
 declare class Events {
     _events: Event[];
     constructor();
-    addEvent(event: String | Symbol, fun: (...args: any[]) => void, context?: any): number | undefined;
-    removeEvent(event: String | Symbol, fun: (...args: any[]) => void): void;
-    on(event: String | Symbol, fun: (...args: any[]) => void, context?: any): number | undefined;
+    /**
+     * Registers an event listener.
+     * @param event The name of the event.
+     * @param fun The callback function.
+     * @param context Optional context (this) for the callback.
+     * @returns A function to unsubscribe this specific listener.
+     */
+    on(event: String | Symbol, fun: (...args: any[]) => void, context?: any): () => void;
+    /**
+     * Removes event listeners matching a specific event and function.
+     * Note: This removes *all* listeners for the event that use the exact same function reference.
+     * It's often more reliable to use the unsubscribe function returned by 'on'.
+     * @param event The name of the event.
+     * @param fun The callback function to remove.
+     */
     off(event: String | Symbol, fun: (...args: any[]) => void): void;
+    /**
+     * Emits an event, calling all registered listeners.
+     * @param event The name of the event.
+     * @param args Arguments to pass to the listeners.
+     */
     emit(event: String | Symbol, ...args: any[]): void;
+    /**
+     * Removes all listeners for a specific event.
+     * @param event The name of the event.
+     */
+    removeAllListeners(event: String | Symbol): void;
 }
 export default Events;

package/dist/cjs/funs/events.js

@@ -3,42 +3,80 @@ class Events {
     constructor() {
         this._events = [];
     }
-    addEvent(event, fun, context) {
-        const evt = this._events.find(x => x.event == event);
-        const listener = { fun: context ? fun.bind(context) : fun, context };
+    /**
+     * Registers an event listener.
+     * @param event The name of the event.
+     * @param fun The callback function.
+     * @param context Optional context (this) for the callback.
+     * @returns A function to unsubscribe this specific listener.
+     */
+    on(event, fun, context) {
+        const evt = this._events.find(x => x.event === event);
+        const id = Symbol('listener_id'); // Give each listener a unique ID
+        const listener = {
+            fun: fun, // Store original function
+            context: context,
+            id: id,
+        };
         if (!evt) {
-            return this._events.push({ event: event, listeners: [listener] });
+            this._events.push({ event: event, listeners: [listener] });
         }
-        if (!evt.listeners.find(x => x.fun == fun)) {
+        else {
             evt.listeners.push(listener);
         }
+        // Return an unsubscribe function
+        return () => {
+            const currentEvt = this._events.find(x => x.event === event);
+            if (currentEvt) {
+                currentEvt.listeners = currentEvt.listeners.filter(l => l.id !== id);
+                if (currentEvt.listeners.length === 0) {
+                    this._events = this._events.filter(e => e.event !== event);
+                }
+            }
+        };
     }
-    removeEvent(event, fun) {
-        const evt = this._events.find(x => x.event == event);
+    /**
+     * Removes event listeners matching a specific event and function.
+     * Note: This removes *all* listeners for the event that use the exact same function reference.
+     * It's often more reliable to use the unsubscribe function returned by 'on'.
+     * @param event The name of the event.
+     * @param fun The callback function to remove.
+     */
+    off(event, fun) {
+        const evt = this._events.find(x => x.event === event);
         if (evt) {
-            evt.listeners = evt.listeners.filter(x => x.fun != fun);
+            // Filter out listeners where the 'fun' property matches the provided function.
+            evt.listeners = evt.listeners.filter(listener => listener.fun !== fun);
+            // Optional: If no listeners remain for this event, remove the event entry.
+            if (evt.listeners.length === 0) {
+                this._events = this._events.filter(e => e.event !== event);
+            }
         }
     }
-    on(event, fun, context) {
-        return this.addEvent(event, fun, context);
-    }
-    off(event, fun) {
-        this.removeEvent(event, fun);
-    }
+    /**
+     * Emits an event, calling all registered listeners.
+     * @param event The name of the event.
+     * @param args Arguments to pass to the listeners.
+     */
     emit(event, ...args) {
-        const evt = this._events.find(x => x.event == event);
+        const evt = this._events.find(x => x.event === event);
         if (evt) {
-            // console.log(evt)
-            evt.listeners.forEach(({ fun, context }) => {
+            [...evt.listeners].forEach(({ fun, context }) => {
                 try {
-                    // f(args)
                     fun.apply(context, args);
                 }
                 catch (e) {
-                    console.error(e);
+                    console.error(`Error during event '${String(event)}' emission:`, e);
                 }
             });
         }
     }
+    /**
+     * Removes all listeners for a specific event.
+     * @param event The name of the event.
+     */
+    removeAllListeners(event) {
+        this._events = this._events.filter(e => e.event !== event);
+    }
 }
 export default Events;

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

@@ -1,4 +1,3 @@
-import { AxiosProgressEvent } from "axios";
 import { ReactElement, ReactNode, Ref } from "react";
 import { KeyCode } from "../types/enums.js";
 import { dynamicObject, FormatNumberParams, sortOptions } from "../types/index.js";
@@ -49,8 +48,6 @@ export declare const cleanProps: <T extends dynamicObject>(props: T, withProps?:
 export declare const withZuz: (cx: string | string[]) => string;
 export declare const setDeep: (object: dynamicObject, path: string, value: any, seperator?: string) => dynamicObject;
 export declare const removeDuplicatesFromArray: <T>(array: T[]) => T[];
-export declare const withPost: <T>(uri: string, data: dynamicObject | FormData, timeout?: number, onProgress?: (ev: AxiosProgressEvent) => void) => Promise<T>;
-export declare const withGet: <T>(uri: string, timeout?: number, ignoreKind?: boolean) => Promise<T>;
 export declare const withTime: (fun: (...args: any[]) => any) => {
     result: any;
     executionTime: number;
@@ -75,3 +72,8 @@ 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;
+export declare const checkPasswordStrength: (password: string) => {
+    score: number;
+    result: string;
+    suggestion: string[];
+};