@zuzjs/ui 0.3.7 → 0.3.8

package/dist/styles.css

@@ -1,460 +1 @@
-*, *:before, *:after {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {
-  margin: 0;
-  padding: 0;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-fieldset, img {
-  border: 0;
-}
-
-address, caption, cite, code, dfn, em, strong, th, var {
-  font-style: normal;
-  font-weight: normal;
-}
-
-ol, ul, li {
-  list-style: none;
-}
-
-caption, th {
-  text-align: left;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: 100%;
-  font-weight: normal;
-}
-
-div, img, button, input, textarea, select {
-  outline: none;
-}
-
-strong {
-  font-weight: bold;
-}
-
-em {
-  font-style: italic;
-}
-
-a img {
-  border: none;
-}
-
-button {
-  cursor: pointer;
-}
-
-.grid {
-  display: grid;
-}
-
-.fixed {
-  position: fixed;
-}
-.fixed.fill {
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-}
-
-.rel {
-  position: relative;
-}
-
-.abs {
-  position: absolute;
-}
-.abs.abc {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.abs.fill {
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-}
-
-.sticky {
-  position: sticky;
-}
-
-.block {
-  display: block;
-}
-
-.iblock {
-  display: inline-block;
-}
-
-.tdnh, .tdn {
-  text-decoration: none;
-}
-
-.tdnh:hover, .tdh:hover {
-  text-decoration: underline;
-}
-
-.flex {
-  display: flex;
-}
-.flex.ass {
-  align-self: flex-start;
-}
-.flex.asc {
-  align-self: center;
-}
-.flex.ase {
-  align-self: flex-end;
-}
-.flex.ais {
-  align-items: flex-start;
-}
-.flex.aic {
-  align-items: center;
-}
-.flex.aie {
-  align-items: flex-end;
-}
-.flex.jcs {
-  justify-content: flex-start;
-}
-.flex.jcc {
-  justify-content: center;
-}
-.flex.jce {
-  justify-content: flex-end;
-}
-.flex.col {
-  flex-direction: column;
-}
-
-/*
-    COLORS
-    It will generate .cfff { color: #fff; } from 'fff'
-*/
-.cfff {
-  color: #fff;
-}
-
-.c111 {
-  color: #111;
-}
-
-.c222 {
-  color: #222;
-}
-
-.c333 {
-  color: #333;
-}
-
-.c444 {
-  color: #444;
-}
-
-.c555 {
-  color: #555;
-}
-
-.c666 {
-  color: #666;
-}
-
-.c777 {
-  color: #777;
-}
-
-.c888 {
-  color: #888;
-}
-
-.c999 {
-  color: #999;
-}
-
-/*
-    FONT SIZES
-    It will generate .s10 { font-size: 12px; } from '12'
-*/
-.s10 {
-  font-size: 10px;
-}
-
-.s12 {
-  font-size: 12px;
-}
-
-.s14 {
-  font-size: 14px;
-}
-
-.s16 {
-  font-size: 16px;
-}
-
-.s18 {
-  font-size: 18px;
-}
-
-.s20 {
-  font-size: 20px;
-}
-
-.s22 {
-  font-size: 22px;
-}
-
-.s24 {
-  font-size: 24px;
-}
-
-.s26 {
-  font-size: 26px;
-}
-
-.s28 {
-  font-size: 28px;
-}
-
-.s30 {
-  font-size: 30px;
-}
-
-.s32 {
-  font-size: 32px;
-}
-
-.s34 {
-  font-size: 34px;
-}
-
-.s36 {
-  font-size: 36px;
-}
-
-.s38 {
-  font-size: 38px;
-}
-
-.s40 {
-  font-size: 40px;
-}
-
-.s42 {
-  font-size: 42px;
-}
-
-.s44 {
-  font-size: 44px;
-}
-
-.s46 {
-  font-size: 46px;
-}
-
-.s48 {
-  font-size: 48px;
-}
-
-.s50 {
-  font-size: 50px;
-}
-
-.s52 {
-  font-size: 52px;
-}
-
-.s54 {
-  font-size: 54px;
-}
-
-.s56 {
-  font-size: 56px;
-}
-
-.s58 {
-  font-size: 58px;
-}
-
-.s60 {
-  font-size: 60px;
-}
-
-.s62 {
-  font-size: 62px;
-}
-
-.s64 {
-  font-size: 64px;
-}
-
-.s66 {
-  font-size: 66px;
-}
-
-.s68 {
-  font-size: 68px;
-}
-
-.s70 {
-  font-size: 70px;
-}
-
-.s72 {
-  font-size: 72px;
-}
-
-/*
-    BoldSize
-    It will generate .b400 { font-weight: 400; } from '400'
-*/
-.bold {
-  font-weight: bold;
-}
-
-.b100 {
-  font-weight: 100;
-}
-
-.b200 {
-  font-weight: 200;
-}
-
-.b300 {
-  font-weight: 300;
-}
-
-.b400 {
-  font-weight: 400;
-}
-
-.b500 {
-  font-weight: 500;
-}
-
-.b600 {
-  font-weight: 600;
-}
-
-.b700 {
-  font-weight: 700;
-}
-
-.b800 {
-  font-weight: 800;
-}
-
-.b900 {
-  font-weight: 900;
-}
-
-@keyframes rotate-loop {
-  from {
-    -ms-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  to {
-    -ms-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-.zuz-spinner .zuz-loader {
-  animation: rotate-loop 0.5s linear infinite;
-}
-
-.button {
-  border: 0px;
-}
-
-.zuz-checkbox {
-  opacity: 0;
-  position: absolute;
-}
-.zuz-checkbox + label {
-  position: relative;
-  display: inline-block;
-  user-select: none;
-  transition: 0.4s ease;
-  height: 26px;
-  width: 44px;
-  border-radius: 60px;
-  background: #eee;
-}
-.zuz-checkbox + label:before {
-  content: "";
-  position: absolute;
-  display: block;
-  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
-  height: 26px;
-  width: 44px;
-  top: 0;
-  left: 0;
-  border-radius: 30px;
-}
-.zuz-checkbox + label:after {
-  content: "";
-  position: absolute;
-  display: block;
-  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
-  background: #fff;
-  height: 22px;
-  width: 22px;
-  top: 2px;
-  left: 2px;
-  border-radius: 60px;
-}
-.zuz-checkbox:checked + label:before {
-  background: green;
-  transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
-}
-.zuz-checkbox:checked + label:after {
-  left: 20px;
-}
-
-.zuz-contextmenu {
-  width: 220px;
-  border-radius: 5px;
-  padding: 4px;
-  background: rgba(34, 34, 34, 0.5);
-  border: 1px rgba(255, 255, 255, 0.25) solid;
-  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(20px);
-}
-.zuz-contextmenu button {
-  border: 0px;
-  text-align: left;
-  padding: 4px 6px;
-  background: rgba(0, 0, 0, 0);
-  cursor: pointer;
-  color: #fff;
-  border-radius: 4px;
-}
-.zuz-contextmenu button:hover {
-  background: #5183ff;
-}
-.zuz-contextmenu .line {
-  height: 1px;
-  background: rgba(255, 255, 255, 0.25);
-  margin: 4px 6px;
-}
+:root{--checkbox-checked: rgb(46, 161, 42);--checkbox-unchecked: rgb(203, 203, 203);--checkbox-thumb: #fff;--checkbox-thumb-shadow: #000;--checkbox-thumb-shadow-size: 2px}.abs{position:absolute}.abs.fill{top:0px;left:0px;bottom:0px;right:0px;z-index:9}.rel{position:relative}.zuz-checkbox{height:25px;width:45px;cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px}.zuz-checkbox:before{content:"";position:absolute;width:45px;height:25px;background:var(--checkbox-unchecked);border-radius:50px;z-index:1;transition:all .3s linear 0s}.zuz-checkbox:after{content:"";position:absolute;width:21px;height:21px;background:var(--checkbox-thumb);border-radius:50px;z-index:2;top:2px;left:2px;box-shadow:0px 0px --checkbox-thumb-shadow-size --checkbox-thumb-shadow;transition:all .2s linear 0s}.zuz-checkbox.is-checked:before{box-shadow:inset 0px 0px 0px 15px var(--checkbox-checked)}.zuz-checkbox.is-checked:after{transform:translateX(20px)}.zuz-spinner{animation:spin infinite}@keyframes spin{to{-webkit-transform:rotate(360deg)}}.input-with-error{box-shadow:0px 0px 0px 2px red}

package/dist/types/enums.d.ts

@@ -0,0 +1,10 @@
+export declare enum SPINNER {
+    Simple = "SIMPLE",
+    Roller = "ROLLER"
+}
+export declare enum FORMVALIDATION {
+    Email = "EMAIL",
+    Uri = "URI",
+    Password = "PASSWORD",
+    MatchField = "MATCHFIELD"
+}

package/dist/types/enums.js

@@ -0,0 +1,12 @@
+export var SPINNER;
+(function (SPINNER) {
+    SPINNER["Simple"] = "SIMPLE";
+    SPINNER["Roller"] = "ROLLER";
+})(SPINNER || (SPINNER = {}));
+export var FORMVALIDATION;
+(function (FORMVALIDATION) {
+    FORMVALIDATION["Email"] = "EMAIL";
+    FORMVALIDATION["Uri"] = "URI";
+    FORMVALIDATION["Password"] = "PASSWORD";
+    FORMVALIDATION["MatchField"] = "MATCHFIELD";
+})(FORMVALIDATION || (FORMVALIDATION = {}));

package/dist/types/index.d.ts

@@ -0,0 +1,23 @@
+export type dynamicObject = {
+    [x: string]: any;
+};
+export type stringObject = {
+    [x: string]: string;
+};
+declare global {
+    interface Object {
+        is(v: any): boolean;
+        typeof(v: any): boolean;
+        equals(v: any): boolean;
+        isNull(): boolean;
+        isString(): boolean;
+        isNumber(): boolean;
+        isObject(): boolean;
+        isArray(): boolean;
+        isEmpty(): boolean;
+        isNotEmpty(v: any): boolean;
+        isEmail(v: any): boolean;
+        isUrl(v: any): boolean;
+    }
+}
+export type FormSubmitHandler = (formData: FormData) => void;

package/dist/types/index.js

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

package/dist/types/interfaces.d.ts

@@ -0,0 +1,4 @@
+import { DetailedHTMLProps, HTMLAttributes } from "react";
+export interface UIProps<T extends HTMLElement> extends DetailedHTMLProps<HTMLAttributes<T>, T> {
+    [key: string]: any;
+}

package/dist/types/interfaces.js

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

package/package.json

@@ -1,46 +1,50 @@
 {
-  "name": "@zuzjs/ui",
-  "version": "0.3.7",
-  "type": "module",
-  "main": "dist/index.js",
-  "exports": {
-    ".": "./dist/ui.js",
-    "./core": "./dist/index.js",
-    "./hooks": "./dist/hooks.js",
-    "./styles": "./dist/styles.css"
-  },
-  "scripts": {
-    "build": "rimraf dist && rollup --config",
-    "dev": "rimraf dist && rollup --config -w",
-    "test": "jest"
-  },
-  "dependencies": {
-    "@testing-library/react": "14.0.0",
-    "@types/jest": "^29.5.0",
-    "@types/react": "^18.0.31",
-    "axios": "^1.6.2",
-    "hashids": "^2.3.0",
-    "jest": "^29.7.0",
-    "js-cookie": "^3.0.5",
-    "nanoid": "^5.0.4",
-    "prop-types": "^15.8.1",
-    "react": "18.2.0",
-    "react-children-utilities": "^2.9.0",
-    "react-dom": "18.2.0",
-    "ts-jest": "^29.1.1",
-    "tslib": "^2.6.2",
-    "typescript": "^5.3.3"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "postcss": "^8.4.21",
-    "rimraf": "^5.0.5",
-    "rollup": "^4.8.0",
-    "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-scss": "^4.0.0",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "rollup-plugin-uglify": "^6.0.4",
-    "sass": "^1.69.5",
-    "next": "14.0.4"
-  }
+    "name": "@zuzjs/ui",
+    "version": "0.3.8",
+    "keywords": [
+        "react",
+        "zuz",
+        "zuz.js",
+        "zuz ui",
+        "zuzui"
+    ],
+    "description": "ZuzJS UI Library",
+    "author": "Zuz.js Team <support@zuz.com.pk>",
+    "license": "MIT",
+    "type": "module",
+    "main": "dist/index.js",
+    "bin": {
+        "zuzjs": "dist/bin.js"
+    },
+    "exports": {
+        ".": "./dist/index.js",
+        "./styles": "./dist/styles.css"
+    },
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "dev:css": "sass --watch --no-source-map src/scss:dist --style compressed",
+        "dev:dist": "tsc -d -w -p tsconfig.json",
+        "dev": "npm-run-all -p dev:*"
+    },
+    "engines": {
+        "node": ">=18.17.0"
+    },
+    "dependencies": {
+        "chokidar": "^3.6.0",
+        "commander": "^12.1.0",
+        "hashids": "^2.3.0",
+        "md5": "^2.3.0",
+        "nanoid": "^5.0.7",
+        "picocolors": "^1.0.1",
+        "react": "19.0.0-beta-26f2496093-20240514",
+        "react-dom": "19.0.0-beta-26f2496093-20240514",
+        "sass": "1.77.8"
+    },
+    "devDependencies": {
+        "node-loader": "^2.0.0",
+        "react": "19.0.0-beta-26f2496093-20240514",
+        "react-dom": "19.0.0-beta-26f2496093-20240514"
+    }
 }

package/README.md

@@ -1 +0,0 @@
-# zuzjs

package/dist/hooks.js

@@ -1,89 +0,0 @@
-import { createContext, useEffect, useMemo, useReducer, useCallback, useContext } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-const AppContext = createContext({});
-
-let isMounted = true;
-const STORE_KEY = `__zuzjs`;
-const STORE_FORM_KEY = `${STORE_KEY}forms`;
-const defaultState = {
-    [`${STORE_KEY}base`]: {
-        debug: true,
-        loading: false,
-        _tmp: Math.random()
-    },
-    [STORE_FORM_KEY]: {
-        forms: {}
-    }
-};
-const rootReducer = (state, action) => (Object.assign(Object.assign({}, state), action.payload));
-const AppProvider = ({ children, initialState = {} }) => {
-    useEffect(() => {
-        isMounted = true;
-        return () => {
-            isMounted = false;
-        };
-    }, []);
-    const rootState = useMemo(() => (Object.assign(Object.assign({}, defaultState), initialState)), [initialState]);
-    const [state, _dispatch] = useReducer(rootReducer, rootState);
-    const dispatch = useCallback((args) => {
-        if (isMounted) {
-            _dispatch(Object.assign({}, args));
-        }
-    }, [_dispatch]);
-    const providedValue = useMemo(() => (Object.assign(Object.assign({}, state), { dispatch })), [state]);
-    return jsx(AppContext.Provider, { value: providedValue, children: children });
-};
-
-const createSlice = ({ name, initialState, reducers }) => {
-    return {
-        name,
-        reducer: reducers,
-        actions: reducers,
-        state: initialState
-    };
-};
-
-const useStore = (callback, withFilter = true) => {
-    let _state = useContext(AppContext);
-    let state = withFilter ? {} : _state;
-    if (withFilter) {
-        const filters = ['defaultState', 'theme', 'dispatch', `${STORE_KEY}base`, `${STORE_KEY}forms`];
-        Object.keys(_state).map(k => {
-            if (filters.indexOf(k) == -1) {
-                state[k] = _state[k];
-            }
-        });
-    }
-    if ("function" == typeof callback) {
-        return callback(state);
-    }
-    return state;
-};
-
-const useDispatch = (key) => {
-    const state = useContext(AppContext);
-    const dispatch = state['dispatch'];
-    const prepareState = (prevState, nextState) => {
-        const nextKeys = Object.keys(nextState);
-        nextKeys.map(k => {
-            if (prevState[k] !== nextState[k]) {
-                prevState[k] = nextState[k];
-            }
-        });
-        return Object.assign(Object.assign({}, prevState), nextState);
-    };
-    if (key) {
-        return (payload = {}) => {
-            dispatch({
-                action: key,
-                payload: {
-                    [key]: prepareState(state[key], payload)
-                }
-            });
-        };
-    }
-    return dispatch;
-};
-
-export { AppProvider as Provider, createSlice, useDispatch, useStore };