@zuzjs/ui 0.10.5 → 0.10.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuzjs/ui",
-  "version": "0.10.5",
+  "version": "0.10.7",
   "description": "ZuzJS UI Library",
   "keywords": [
     "react",
@@ -9,46 +9,50 @@
     "zuz ui",
     "zuzui"
   ],
-  "author": "Zuz.js Team <support@zuz.com.pk>",
+  "homepage": "https://ui.zuz.com.pk",
+  "bugs": {
+    "url": "https://github.com/zuzpk/zuzjs-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zuzpk/zuzjs-ui.git"
+  },
   "license": "MIT",
+  "author": "Zuz.js Team <support@zuz.com.pk>",
   "type": "module",
-  "main": "dist/index.js",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "bin": {
-    "zuzjs": "dist/cjs/bin.js"
+    "zuzjs": "./dist/bin.cjs"
   },
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
-    "./styles": {
-      "import": "./dist/css/styles.css",
-      "require": "./dist/css/styles.css"
-    }
+    "./styles": "./dist/css/styles.css"
   },
-  "types": "./dist/esm/index.d.ts",
   "files": [
     "dist"
   ],
-  "engines": {
-    "node": ">=18.17.0"
-  },
   "dependencies": {
-    "@types/md5": "^2.3.5",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@zuzjs/core": "^0.2.9",
-    "chokidar": "^3.6.0",
-    "commander": "^13.1.0",
+    "@zuzjs/core": "^0.3.2",
+    "@zuzjs/hooks": "^0.3.2",
+    "chokidar": "^5.0.0",
+    "commander": "^14.0.2",
     "date-fns": "^4.1.0",
     "hashids": "^2.3.0",
     "js-cookie": "^3.0.5",
     "md5": "^2.3.0",
     "moment": "^2.30.1",
-    "nanoid": "^5.0.9",
+    "nanoid": "^5.1.6",
     "picocolors": "^1.1.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "sass": "^1.84.0"
+    "ts-morph": "^27.0.2"
+  },
+  "peerDependencies": {
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   }
 }

package/dist/cjs/bin.js

@@ -1,173 +0,0 @@
-#!/usr/bin/env node
-import fs, { readdirSync, statSync } from "fs";
-import { program } from "commander";
-import chokidar from 'chokidar';
-import path from "path";
-import CSS from "./funs/css.js";
-import pc from "picocolors";
-import { FIELNAME_KEY } from "./funs/index.js";
-program
-    .option(`-d, --debug`)
-    .option(`-v, --version`)
-    .option(`-r, --root <char>`)
-    .option(`-f, --file <char>`)
-    .option(`-l, --lexer`)
-    .option(`-c, --classes`)
-    .option(`-h, --cache`)
-    .option(`-e, --cleaned`)
-    .option(`-t, --sheet`)
-    .option(`-m, --media`)
-    .option(`-s, --dark`);
-program.parse();
-const options = program.opts();
-// extendGlobals()
-const getAllFiles = (dir, extn, files, result, regex) => {
-    files = files || readdirSync(dir);
-    result = result || [];
-    regex = regex || new RegExp(`^(?!.*[/\\\\]node_modules[/\\\\]).*\\${extn}$`);
-    for (let i = 0; i < files.length; i++) {
-        let file = path.join(dir, files[i]);
-        if (statSync(file).isDirectory()) {
-            try {
-                result = getAllFiles(file, extn, readdirSync(file), result, regex);
-            }
-            catch (error) {
-                continue;
-            }
-        }
-        else {
-            if (regex.test(file)) {
-                result.push(file);
-            }
-        }
-    }
-    return result;
-};
-const rebuild = (f) => {
-    const raw = fs.readFileSync(f, `utf8`);
-    let _filePath = path.relative(process.cwd(), f);
-    if (!_filePath.startsWith(`/`))
-        _filePath = `/${_filePath}`;
-    const list = [`${FIELNAME_KEY}:${_filePath}`];
-    const processMatch = (matches, type) => {
-        const makeV2 = (v1) => {
-            let v2 = v1
-                .trim()
-                .slice(1, -1);
-            if (v2.includes(`\n`)) {
-                v2 = v2.split(`\n`).reduce((arr, v) => {
-                    if (v.trim() != ``) {
-                        v = v.trim().endsWith(`,`) ? v.slice(0, -1) : v;
-                        arr.push(v.trim());
-                    }
-                    return arr;
-                }, []).join(` `);
-                // 
-            }
-            if (v2.startsWith(`[`) && v2.endsWith(`]`))
-                v2 = v2.slice(1, -1);
-            return v2.trim();
-        };
-        if (matches && matches.length > 0) {
-            matches.map((m) => {
-                let v2;
-                // m = m.replace(/\s+|\n/gm, ` `)
-                if (type == `as`) {
-                    const [x, v1] = m.split(/as\s*=/);
-                    v2 = makeV2(v1);
-                }
-                else if (type == `css`) {
-                    const v1 = m.split(/css\s*\(/)[1].slice(0, -1);
-                    // console.log(v1)
-                    v2 = makeV2(v1.trim());
-                }
-                // console.log(`v2 ->`, `"${v2}"`)
-                list.push(v2);
-            });
-        }
-    };
-    /**
-     * match as={?}
-     */
-    // processMatch(raw.match(/as\s*=\s*\{([^{}]|{([^{}]|{[^{}]*})*})*\}/g), `as`)
-    processMatch(raw.match(/as\s*=\s*(?:\{([^{}]|{([^{}]|{[^{}]*})*})*\}|'([^']*)'|"([^"]*)")/g), `as`);
-    /**
-     * match css()
-     */
-    processMatch(raw.match(/css\(\s*(?:\[\s*([\s\S]*?)\s*\]|\s*`([\s\S]*?)`)\s*\)/g), `css`);
-    return list;
-};
-const rebuildAll = () => {
-    console.log(pc.gray(`○ Building Zuz CSS`));
-    const cssBuilder = new CSS({}, options);
-    const files = getAllFiles(process.cwd(), `.(jsx|tsx)`);
-    if (files.length > 0) {
-        const as = [];
-        if (options.file) {
-            const r = rebuild(files.filter(f => f.endsWith(options.file.replace(path.resolve(`./`), ``)))[0]);
-            if (r && r.length > 0) {
-                // console.log(r)
-                as.push(cssBuilder.Build([r], true, options.file).sheet);
-                // as.push(r)
-            }
-        }
-        else {
-            const mediaQueries = {};
-            let darkQueries = {};
-            files.map(f => {
-                // if ( f.endsWith(`header.jsx`) ){
-                const r = rebuild(f);
-                if (r && r.length > 0) {
-                    // as.push(cssBuilder.Build([r], true).sheet)
-                    // as.push( f.endsWith(`header.jsx`) ?
-                    //  `.header{${cssBuilder.Build([r], true).sheet}}`
-                    //  : cssBuilder.Build([r], true).sheet)
-                    const _built = cssBuilder.Build([r], true, f.replace(path.resolve(`./`), ``));
-                    as.push(_built.sheet);
-                    darkQueries = { ...darkQueries, ..._built.darkQueries };
-                    Object.keys(_built.mediaQuery).map(mq => {
-                        if (!mediaQueries[mq])
-                            mediaQueries[mq] = [];
-                        mediaQueries[mq] = [
-                            ...mediaQueries[mq],
-                            ..._built.mediaQuery[mq]
-                        ];
-                    });
-                    // as.push(new CSS().Build([[r]], true).sheet)
-                }
-                // }
-                // as.push(r)
-            });
-            as.push(cssBuilder.buildMediaQueries(mediaQueries));
-            as.push(cssBuilder.buildDarkModeQueries(darkQueries));
-        }
-        // console.log(as)
-        // const { sheet } = new CSS().Build(as, true)
-        // console.log(cache)
-        const sheet = as.join(`\n`);
-        if (!fs.existsSync(path.join(process.cwd(), `src`, `app`, `css`))) {
-            fs.mkdirSync(path.join(process.cwd(), `src`, `app`, `css`));
-        }
-        // console.log(sheet)
-        fs.writeFileSync(path.join(process.cwd(), `src`, `app`, `css`, `zuz.scss`), sheet, {
-            encoding: `utf8`,
-            flag: `w+`
-        });
-        console.log(pc.green(`✓ Zuz CSS Generated`));
-    }
-    else {
-        console.log(pc.red(`⨯ No tsx | jsx file found`));
-    }
-};
-const watchPaths = [
-    `${path.resolve(`./`)}/**/*.jsx`,
-    `${path.resolve(`./`)}/**/*.tsx`,
-];
-const watcher = chokidar.watch(watchPaths, {
-    ignored: (p) => p.includes(`/dist`) || p.includes('node_modules'),
-    persistent: true,
-    usePolling: true
-});
-if (options.file)
-    console.log(pc.gray(`○ Watching ${options.file}`));
-watcher.on(`change`, rebuildAll);

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

@@ -1,6 +0,0 @@
-import { AccordionHandler } from "./types";
-declare const Accordion: import("react").ForwardRefExoticComponent<import("..").BoxProps & {
-    message?: string | import("react").ReactNode;
-    title: string | import("react").ReactNode | import("react").ReactNode[];
-} & import("react").RefAttributes<AccordionHandler>>;
-export default Accordion;

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

@@ -1,14 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from "react";
-import Box from "../Box";
-import Button from "../Button";
-import Text from "../Text";
-import SVGIcons from "../svgicons";
-const Accordion = forwardRef((props, ref) => {
-    const { title, message, ...rest } = props;
-    const [visible, setVisible] = useState(false);
-    return _jsxs(Box, { className: `--accordion flex cols`, ...rest, children: [_jsxs(Button, { onClick: (e) => setVisible(!visible), className: `--toggle flex aic ${visible ? `--open` : ``}`.trim(), children: [_jsx(Text, { className: `--label flex`, children: title }), _jsx(Box, { className: `--arrow flex`, children: visible ? SVGIcons.arrowUp : SVGIcons.arrowDown })] }), visible && _jsx(Box, { className: `--detail`, children: message })] });
-});
-Accordion.displayName = `Zuz.Accordion`;
-export default Accordion;

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

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-import { BoxProps } from "../Box";
-export type AccordionProps = BoxProps & {
-    message?: string | ReactNode;
-    title: string | ReactNode | ReactNode[];
-};
-export interface AccordionHandler {
-    open: () => void;
-    close: () => void;
-}

package/dist/cjs/comps/Accordion/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,23 +0,0 @@
-import { Position } from "../../types/enums";
-import { BoxProps } from "../Box";
-import { ActionBarHandler } from "./types";
-/**
- * ActionBar renders a list of buttons with tooltips.
- *
- * @example
- * ```tsx
- * const items = [
- *   { label: 'Edit', icon: <EditIcon />, onClick: () => console.log('Edit clicked') },
- *   { label: 'Delete', icon: <DeleteIcon />, onClick: () => console.log('Delete clicked') }
- * ];
- *
- * <ActionBar items={items} />
- * ```
- */
-declare const ActionBar: import("react").ForwardRefExoticComponent<BoxProps & {
-    selected?: number | string;
-    onSwitch?: (tag: string) => void;
-    items: import("./types").ActionBarItem[];
-    position?: Position;
-} & import("react").RefAttributes<ActionBarHandler>>;
-export default ActionBar;

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

@@ -1,63 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
-import { useBase } from "../../hooks";
-import { Position } from "../../types/enums";
-import Box from "../Box";
-import ActionItem from "./item";
-/**
- * ActionBar renders a list of buttons with tooltips.
- *
- * @example
- * ```tsx
- * const items = [
- *   { label: 'Edit', icon: <EditIcon />, onClick: () => console.log('Edit clicked') },
- *   { label: 'Delete', icon: <DeleteIcon />, onClick: () => console.log('Delete clicked') }
- * ];
- *
- * <ActionBar items={items} />
- * ```
- */
-const ActionBar = forwardRef((props, ref) => {
-    const { items, name, selected, position, ...pops } = props;
-    const self = useRef(null);
-    const [_selected, setSelected] = useState(selected || items[0].tag || 0);
-    const track = useCallback(({ x, y }) => {
-        if (self.current) {
-            const bounds = self.current.getBoundingClientRect();
-            document.documentElement.style.setProperty(`--tip-x`, `${x - bounds.left}`);
-            document.documentElement.style.setProperty(`--tip-y`, `${y - bounds.top}`);
-            document.documentElement.style.setProperty(`--tip-s`, `1`);
-        }
-    }, []);
-    const tear = useCallback(() => {
-        if (self.current) {
-            self.current.removeEventListener(`pointerleave`, tear);
-            self.current.removeEventListener(`pointermove`, track);
-            document.documentElement.style.setProperty(`--tip-s`, `0`);
-        }
-    }, []);
-    const initTrack = useCallback(() => {
-        if (self.current) {
-            self.current.addEventListener(`pointerleave`, tear);
-            self.current.addEventListener(`pointermove`, track);
-        }
-    }, []);
-    useEffect(() => {
-        if (self.current) {
-            document.documentElement.style.setProperty(`--tip-w`, items.reduce((longest, item) => {
-                return item.label.length > longest.length ? item.label : longest;
-            }, '').length.toString());
-            document.documentElement.style.setProperty(`--tip-s`, `0`);
-            document.documentElement.style.setProperty(`--tip-l`, `${items.length}`);
-            self.current?.addEventListener(`pointerenter`, initTrack);
-        }
-    }, []);
-    const { className, style, rest } = useBase(pops);
-    return _jsxs(Box, { ref: self, style: style, className: [
-            `--actionbar flex aic ${className}`,
-            `${!position || position == Position.Auto ? `rel` : `--${position}`}`
-        ].join(` `).trim(), ...rest, children: [items.map((item, index) => _jsx(ActionItem, { selected: _selected === item.tag || selected == index, ...item, idx: index }, `actionbar-action-${item.label.toLowerCase().replace(/\s+/g, `-`)}`)), _jsx(Box, { className: `--tip abs`, children: _jsx(Box, { className: `--track flex aic`, children: items.map(({ label }) => _jsx(Box, { className: `--lb`, children: label }, `tool-tip-${label.toLowerCase().replace(/\s+/g, `-`)}`)) }) })] });
-});
-ActionBar.displayName = `Zuz.ActionBar`;
-export default ActionBar;

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

@@ -1,6 +0,0 @@
-import { ActionBarItem } from './types';
-declare const ActionItem: ({ label, icon, onClick, idx, selected }: ActionBarItem & {
-    idx: number;
-    selected?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ActionItem;

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

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Button from '../Button';
-import Icon from '../Icon';
-const ActionItem = ({ label, icon, onClick, idx, selected }) => {
-    return _jsx(Button, { onClick: onClick, onMouseMove: e => document.documentElement.style.setProperty(`--tip-m`, `${idx}`), className: `--action ${selected ? `--selected` : ``} aic jcc rel`.trim(), children: typeof icon == `string` ? _jsx(Icon, { name: icon }) : icon });
-};
-export default ActionItem;

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

@@ -1,32 +0,0 @@
-import { ReactNode } from "react";
-import { BoxProps } from "../Box";
-import { Position } from "../../types/enums";
-export interface ActionBarHandler {
-    show: () => void;
-}
-/**
- * Represents an item in the ActionBar.
- */
-export interface ActionBarItem {
-    /** Specific tag for action item */
-    tag?: string;
-    /** The label of the action item */
-    label: string;
-    /** The icon to display for the action item */
-    icon: ReactNode;
-    /** The callback function to execute when the action item is clicked */
-    onClick: () => void;
-}
-/**
- * Props for the ActionBar component.
- */
-export type ActionBarProps = BoxProps & {
-    /** The index of the initially selected action item */
-    selected?: number | string;
-    /** Callback function to execute when an action item is clicked */
-    onSwitch?: (tag: string) => void;
-    /** Array of action items to display in the ActionBar */
-    items: ActionBarItem[];
-    /** Position of ActionBar */
-    position?: Position;
-};

package/dist/cjs/comps/Actionbar/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,11 +0,0 @@
-import { ALERT } from "../../types/enums";
-import { BoxProps } from "../Box";
-import { AlertHandler } from "./types";
-declare const Alert: import("react").ForwardRefExoticComponent<BoxProps & {
-    type?: ALERT;
-    icon?: string;
-    iconSize?: number;
-    message?: string | import("react").ReactNode;
-    title: string | import("react").ReactNode;
-} & import("react").RefAttributes<AlertHandler>>;
-export default Alert;

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

@@ -1,15 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useBase } from "../../hooks";
-import { ALERT } from "../../types/enums";
-import Box from "../Box";
-import SVGIcons from "../svgicons";
-import Text from "../Text";
-const Alert = forwardRef((props, ref) => {
-    const { type, icon, title, message, iconSize, ...pops } = props;
-    const { className, style, rest } = useBase(pops);
-    return _jsxs(Box, { className: `--alert --${(type || ALERT.Info)} flex aic ${className}`.trim(), style: style, ...rest, children: [_jsx(Box, { className: `--icon icon-${icon || `auto-matic`}`, style: iconSize ? { fontSize: iconSize, width: iconSize, height: iconSize } : {}, children: !icon && SVGIcons[type || ALERT.Info] }), _jsxs(Box, { className: `--meta flex cols`, children: [_jsx(Text, { className: `--title ${message ? `--tm` : ``}`, children: title || `Lorem ipsum dolor sit amet, consectetur adipiscing elit.` }), message && _jsx(Text, { className: `--message`, h: 2, children: message })] })] });
-});
-Alert.displayName = `Zuz.Alert`;
-export default Alert;

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

@@ -1,14 +0,0 @@
-import { ReactNode } from "react";
-import { ALERT } from "../../types/enums";
-import { BoxProps } from "../Box";
-export type AlertProps = BoxProps & {
-    type?: ALERT;
-    icon?: string;
-    iconSize?: number;
-    message?: string | ReactNode;
-    title: string | ReactNode;
-};
-export interface AlertHandler {
-    open: () => void;
-    close: () => void;
-}

package/dist/cjs/comps/Alert/types.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,13 +0,0 @@
-import { Size } from "../../types/enums";
-declare const AutoComplete: import("react").ForwardRefExoticComponent<import("../..").ZuzProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, keyof import("../..").ZuzProps> & {
-    numeric?: boolean;
-    size?: Size;
-    variant?: import("../..").Variant;
-    with?: import("../..").FORMVALIDATION | `${import("../..").FORMVALIDATION}${string}`;
-    onConfirm?: (value: string) => void;
-} & {
-    action?: string;
-    data?: string[];
-    withStyle?: string;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export default AutoComplete;