@zuzjs/ui 0.3.7 → 0.3.9

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;
-}
+button{user-select:none;cursor:pointer}input{user-select:none}input:-webkit-autofill{background-color:rgba(0,0,0,0) !important;-webkit-box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset;box-shadow:0 0 0px 1000px rgba(0,0,0,0) inset}: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}.flex{display:flex}.flex.cols{flex-direction:column}.flex.aic{align-items:center}.flex.jcc{justify-content:center}.abs{position:absolute}.fixed{position:fixed}.fill{top:0px;left:0px;bottom:0px;right:0px}.rel{position:relative}.input-with-error{box-shadow:inset 0px 0px 0px 1px #ff8b8b}.zuz-checkbox{height:25px;width:45px;cursor:pointer}.zuz-checkbox input[type=checkbox]{z-index:0;left:10px;top:10px;opacity:0}.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{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.zuz-cover{backdrop-filter:blur(4px);z-index:99999;gap:15px}.zuz-cover .label{font-size:14px;animation:breath 1s linear infinite}@keyframes breath{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}}.zuz-sheet{top:0px;left:50%;transform:translate(-50%, -10vh);z-index:2147483647;transition:all .5s cubic-bezier(0.68, -0.2, 0.27, 1.5) 0s}.zuz-sheet.toast-default{background:#333;color:#fff}.zuz-sheet.toast-error{background:#ff4747;color:#fff}.zuz-sheet.toast-success{background:#23ac28;color:#fff}.zuz-sheet.toast-warn{background:#ffba00}.zuz-sheet.is-visible{transform:translate(-50%, 0vh)}.zuz-sheet.is-visible.wobble{transform:translate(-50%, 10px);transition:all .5s cubic-bezier(0.68, -0.2, 0.27, 1.5) 0s}.zuz-sheet.zuz-toast{top:-20px;border-radius:0px 0px 5px 5px;padding:25px 15px 5px 15px;font-size:14px}

package/dist/types/enums.d.ts

@@ -0,0 +1,19 @@
+export declare enum SPINNER {
+    Simple = "SIMPLE",
+    Roller = "ROLLER"
+}
+export declare enum FORMVALIDATION_STYLE {
+    Dots = "DOTS"
+}
+export declare enum FORMVALIDATION {
+    Email = "EMAIL",
+    Uri = "URI",
+    Password = "PASSWORD",
+    MatchField = "MATCHFIELD"
+}
+export declare enum SHEET {
+    Default = "DEFAULT",
+    Error = "ERROR",
+    Success = "SUCCESS",
+    Warn = "WARN"
+}

package/dist/types/enums.js

@@ -0,0 +1,23 @@
+export var SPINNER;
+(function (SPINNER) {
+    SPINNER["Simple"] = "SIMPLE";
+    SPINNER["Roller"] = "ROLLER";
+})(SPINNER || (SPINNER = {}));
+export var FORMVALIDATION_STYLE;
+(function (FORMVALIDATION_STYLE) {
+    FORMVALIDATION_STYLE["Dots"] = "DOTS";
+})(FORMVALIDATION_STYLE || (FORMVALIDATION_STYLE = {}));
+export var FORMVALIDATION;
+(function (FORMVALIDATION) {
+    FORMVALIDATION["Email"] = "EMAIL";
+    FORMVALIDATION["Uri"] = "URI";
+    FORMVALIDATION["Password"] = "PASSWORD";
+    FORMVALIDATION["MatchField"] = "MATCHFIELD";
+})(FORMVALIDATION || (FORMVALIDATION = {}));
+export var SHEET;
+(function (SHEET) {
+    SHEET["Default"] = "DEFAULT";
+    SHEET["Error"] = "ERROR";
+    SHEET["Success"] = "SUCCESS";
+    SHEET["Warn"] = "WARN";
+})(SHEET || (SHEET = {}));

package/dist/types/index.d.ts

@@ -0,0 +1,24 @@
+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;
+export type FormInputs = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;

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,52 @@
 {
-  "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.9",
+    "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",
+        "./funs": "./dist/funs/index.js"
+    },
+    "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": {
+        "axios": "^1.7.6",
+        "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