@zuzjs/ui 0.4.0 → 0.4.2

package/dist/funs/index.d.ts

@@ -1,6 +1,13 @@
 import CSS from './css.js';
 import { dynamicObject } from "../types/index.js";
+export declare const __SALT: string;
+export declare const FIELNAME_KEY = "__FILENAME__";
+export declare const LINE_KEY = "__LINE__";
+export declare const toHash: (n: number, len?: number) => string;
+export declare const fromHash: (n: string) => number;
 export declare const css: () => CSS;
+export declare const uuid: (len?: number) => string;
+export declare const numberInRange: (min: number, max: number) => number;
 export declare const hexColorRegex: RegExp;
 export declare const rgbaColorRegex: RegExp;
 export declare const hslColorRegex: RegExp;
@@ -15,6 +22,8 @@ export declare const isNumber: (v: any) => boolean;
 export declare const hexToRgba: (hex: string, alpha?: number) => string;
 export declare const ucfirst: (str: string) => string;
 export declare const cleanProps: <T extends dynamicObject>(props: T, withProps?: string[]) => T;
-export declare const withZuz: (cx: string) => string;
+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 extendGlobals: () => void;
 export declare const withPost: (uri: string, data: dynamicObject, timeout?: number, fd?: dynamicObject) => Promise<unknown>;

package/dist/funs/index.js

@@ -2,19 +2,25 @@ import { cssProps } from "./stylesheet.js";
 import CSS from './css.js';
 import axios from "axios";
 import { colorNames } from "./colors.js";
+import Hashids from "hashids";
+import { nanoid } from "nanoid";
 let __css;
+export const __SALT = `zuzjs-ui`;
+export const FIELNAME_KEY = `__FILENAME__`;
+export const LINE_KEY = `__LINE__`;
+export const toHash = (n, len = 6) => new Hashids(__SALT, len).encode(n);
+export const fromHash = (n) => Number(new Hashids(__SALT).decode(n));
 export const css = () => __css ? __css : __css = new CSS();
-// Hex color regex (#RGB, #RRGGBB)
+export const uuid = (len) => nanoid(len);
+export const numberInRange = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+};
 export const hexColorRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
-// export const hexColorRegex3 = /^#([A-Fa-f0-9]{3}){1,2}$/;
-// RGBA color regex (rgba(255, 255, 255, 1))
 export const rgbaColorRegex = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*((0|1|0?\.\d+)\s*))?\)$/;
-// HSL color regex (hsl(360, 100%, 100%))
 export const hslColorRegex = /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/;
 export const isHexColor = (color) => hexColorRegex.test(color);
 export const isRgbaColor = (color) => rgbaColorRegex.test(color);
 export const isHslColor = (color) => hslColorRegex.test(color);
-// Function to validate a color string
 export const isColor = (color) => colorNames.includes(color) || isHexColor(color) || isRgbaColor(color) || isHslColor(color);
 export const isUrl = (u) => {
     let url;
@@ -31,15 +37,11 @@ export const isIPv4 = (ipaddress) => {
     return /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress);
 };
 export const isNumber = (v) => /\d+(\.\d+)?$/g.test(v);
-// Convert hex to rgba
 export const hexToRgba = (hex, alpha = 1) => {
-    // Remove the hash symbol if present
     hex = hex.replace(/^#/, '');
-    // If shorthand hex (#RGB), expand it to full form (#RRGGBB)
     if (hex.length === 3) {
         hex = hex.split('').map(char => char + char).join('');
     }
-    // Convert to integer values for RGB
     const bigint = parseInt(hex, 16);
     const r = (bigint >> 16) & 255;
     const g = (bigint >> 8) & 255;
@@ -58,7 +60,30 @@ export const cleanProps = (props, withProps = []) => {
     _extras.map(x => x in _props && delete _props[x]);
     return _props;
 };
-export const withZuz = (cx) => new CSS().Build([[cx]]).cx.join(` `);
+export const withZuz = (cx) => css().Build([[`string` == typeof cx ? cx : cx.join(` `)]]).cx.join(` `);
+export const setDeep = (object, path, value, seperator = `.`) => {
+    const _path = path.split(seperator);
+    const base = _path[0];
+    if (base === undefined) {
+        return object;
+    }
+    if (!object.hasOwnProperty(base)) {
+        object[base] = {};
+    }
+    value = _path.length <= 1 ? value : setDeep(object[base], _path.slice(1).join(seperator), value, seperator);
+    return {
+        ...object,
+        [base]: value,
+    };
+};
+export const removeDuplicatesFromArray = (array) => {
+    return array.reduce((accumulator, currentValue) => {
+        if (!accumulator.includes(currentValue)) {
+            accumulator.push(currentValue);
+        }
+        return accumulator;
+    }, []);
+};
 export const extendGlobals = () => {
     Object.prototype.is = function (v) { return typeof this === v; };
     Object.prototype.typeof = function (v) { return typeof this === typeof v; };

package/dist/funs/stylesheet.d.ts

@@ -1,242 +1,7 @@
-export declare const cssProps: {
-    alignContent: string;
-    alignItems: string;
-    alignSelf: string;
-    animation: string;
-    animationDelay: string;
-    animationDirection: string;
-    animationDuration: string;
-    animationFillMode: string;
-    animationIterationCount: string;
-    animationName: string;
-    animationPlayState: string;
-    animationTimingFunction: string;
-    background: string;
-    bg: string;
-    backgroundColor: string;
-    backgroundImage: string;
-    backgroundOrigin: string;
-    backgroundPosition: string;
-    backgroundRepeat: string;
-    backgroundSize: string;
-    backfaceVisibility: string;
-    backgroundAttachment: string;
-    backgroundBlendMode: string;
-    backgroundClip: string;
-    border: string;
-    borderBottom: string;
-    borderBottomColor: string;
-    borderBottomStyle: string;
-    borderBottomWidth: string;
-    borderCollapse: string;
-    borderColor: string;
-    borderImage: string;
-    borderImageOutset: string;
-    borderImageRepeat: string;
-    borderImageSlice: string;
-    borderImageSource: string;
-    borderImageWidth: string;
-    borderLeft: string;
-    borderLeftColor: string;
-    borderLeftStyle: string;
-    borderLeftWidth: string;
-    borderRight: string;
-    borderRightColor: string;
-    borderRightStyle: string;
-    borderRightWidth: string;
-    borderSpacing: string;
-    borderStyle: string;
-    borderTop: string;
-    borderTopColor: string;
-    borderTopStyle: string;
-    borderTopWidth: string;
-    borderWidth: string;
-    borderRadius: string;
-    r: string;
-    borderTopLeftRadius: string;
-    rtl: string;
-    borderTopRightRadius: string;
-    rtr: string;
-    borderBottomLeftRadius: string;
-    rbl: string;
-    borderBottomRightRadius: string;
-    rbr: string;
-    bottom: string;
-    boxDecorationBreak: string;
-    boxShadow: string;
-    boxSizing: string;
-    captionSide: string;
-    caretColor: string;
-    "@charset": string;
-    clear: string;
-    clip: string;
-    clipPath: string;
-    color: string;
-    c: string;
-    columnCount: string;
-    columnFill: string;
-    columnGap: string;
-    colGap: string;
-    columnRule: string;
-    columnRuleColor: string;
-    columnRuleStyle: string;
-    columnRuleWidth: string;
-    columnSpan: string;
-    columnWidth: string;
-    columns: string;
-    content: string;
-    counterIncrement: string;
-    counterReset: string;
-    cursor: string;
-    pointer: string;
-    direction: string;
-    display: string;
-    emptyCells: string;
-    filter: string;
-    flex: string;
-    flexBasis: string;
-    flexDirection: string;
-    flexDir: string;
-    flexFlow: string;
-    flexGrow: string;
-    flexShrink: string;
-    flexWrap: string;
-    float: string;
-    font: string;
-    fontFamily: string;
-    fontKerning: string;
-    s: string;
-    fontSize: string;
-    fontSizeAdjust: string;
-    fontStretch: string;
-    fontStyle: string;
-    fontVariant: string;
-    bold: string;
-    fontWeight: string;
-    b: string;
-    gap: string;
-    grid: string;
-    gridArea: string;
-    gridAutoColumns: string;
-    gridAutoFlow: string;
-    gridAutoRows: string;
-    gridColumn: string;
-    gridColumnEnd: string;
-    gridColumnGap: string;
-    gridColumnStart: string;
-    gridGap: string;
-    gridRow: string;
-    gridRowEnd: string;
-    gridRowGap: string;
-    gridRowStart: string;
-    gridTemplate: string;
-    gridTemplateAreas: string;
-    gridTemplateColumns: string;
-    gridTemplateRows: string;
-    hangingPunctuation: string;
-    hyphens: string;
-    isolation: string;
-    justifyContent: string;
-    left: string;
-    letterSpacing: string;
-    lineHeight: string;
-    lh: string;
-    listStyle: string;
-    listStyleImage: string;
-    listStylePosition: string;
-    listStyleType: string;
-    aspectRatio: string;
-    margin: string;
-    m: string;
-    marginBottom: string;
-    mb: string;
-    marginLeft: string;
-    ml: string;
-    marginRight: string;
-    mr: string;
-    marginTop: string;
-    mt: string;
-    height: string;
-    h: string;
-    minHeight: string;
-    minH: string;
-    maxHeight: string;
-    maxH: string;
-    width: string;
-    w: string;
-    minWidth: string;
-    minW: string;
-    maxWidth: string;
-    maxW: string;
-    mixBlendMode: string;
-    objectFit: string;
-    objectPosition: string;
-    opacity: string;
-    order: string;
-    outline: string;
-    outlineColor: string;
-    outlineOffset: string;
-    outlineStyle: string;
-    outlineWidth: string;
-    overflow: string;
-    overflowX: string;
-    overflowY: string;
-    padding: string;
-    p: string;
-    paddingBottom: string;
-    pb: string;
-    paddingLeft: string;
-    pl: string;
-    paddingRight: string;
-    pr: string;
-    paddingTop: string;
-    pt: string;
-    pageBreakAfter: string;
-    pageBreakBefore: string;
-    pageBreakInside: string;
-    perspective: string;
-    perspectiveOrigin: string;
-    pointerEvents: string;
-    position: string;
-    quotes: string;
-    resize: string;
-    right: string;
-    scrollBehavior: string;
-    tabSize: string;
-    tableLayout: string;
-    align: string;
-    textAlign: string;
-    textAlignLast: string;
-    textDecoration: string;
-    td: string;
-    textDecorationColor: string;
-    textDecorationLine: string;
-    textDecorationStyle: string;
-    textIndent: string;
-    textJustify: string;
-    textOverflow: string;
-    textShadow: string;
-    textTransform: string;
-    top: string;
-    transform: string;
-    "transform(2D)": string;
-    "transformOrigin(twoValue syntax)": string;
-    transformStyle: string;
-    transition: string;
-    transitionDelay: string;
-    transitionDuration: string;
-    transitionProperty: string;
-    transitionTimingFunction: string;
-    unicodeBidi: string;
-    userSelect: string;
-    verticalAlign: string;
-    visibility: string;
-    whiteSpace: string;
-    wordBreak: string;
-    wordSpacing: string;
-    textWrap: string;
-    wordWrap: string;
-    writingMode: string;
-    zIndex: string;
-    backdropFilter: string;
-};
+import { dynamicObject } from "../types";
+export declare const cssProps: dynamicObject;
+export declare const cssDirect: dynamicObject;
+export declare const cssAnimationCurves: dynamicObject;
+export declare const cssAnimationFunctions: dynamicObject;
+export declare const cssTransformKeys: string[];
+export declare const cssWithKeys: dynamicObject;

package/dist/funs/stylesheet.js

@@ -2,7 +2,6 @@ export const cssProps = {
     "alignContent": "align-content",
     "alignItems": "align-items",
     "alignSelf": "align-self",
-    //Animations
     "animation": "animation",
     "animationDelay": "animation-delay",
     "animationDirection": "animation-direction",
@@ -12,7 +11,6 @@ export const cssProps = {
     "animationName": "animation-name",
     "animationPlayState": "animation-play-state",
     "animationTimingFunction": "animation-timing-function",
-    //Backgrounds
     "background": "background",
     "bg": "background",
     "backgroundColor": "background-color",
@@ -25,7 +23,6 @@ export const cssProps = {
     "backgroundAttachment": "background-attachment",
     "backgroundBlendMode": "background-blend-mode",
     "backgroundClip": "background-clip",
-    //Borders
     "border": "border",
     "borderBottom": "border-bottom",
     "borderBottomColor": "border-bottom-color",
@@ -54,7 +51,6 @@ export const cssProps = {
     "borderTopStyle": "border-top-style",
     "borderTopWidth": "border-top-width",
     "borderWidth": "border-width",
-    //Radius
     "borderRadius": "border-radius",
     "r": "border-radius",
     "borderTopLeftRadius": "border-top-left-radius",
@@ -68,6 +64,7 @@ export const cssProps = {
     "bottom": "bottom",
     "boxDecorationBreak": "box-decoration-break",
     "boxShadow": "box-shadow",
+    "shadow": "box-shadow",
     "boxSizing": "box-sizing",
     "captionSide": "caption-side",
     "caretColor": "caret-color",
@@ -150,7 +147,6 @@ export const cssProps = {
     "listStylePosition": "list-style-position",
     "listStyleType": "list-style-type",
     "aspectRatio": "aspect-ratio",
-    //Margin
     "margin": "margin",
     "m": "margin",
     "marginBottom": "margin-bottom",
@@ -161,14 +157,12 @@ export const cssProps = {
     "mr": "margin-right",
     "marginTop": "margin-top",
     "mt": "margin-top",
-    //Height
     "height": "height",
     "h": "height",
     "minHeight": "min-height",
     "minH": "min-height",
     "maxHeight": "max-height",
     "maxH": "max-height",
-    //Width
     "width": "width",
     "w": "width",
     "minWidth": "min-width",
@@ -247,3 +241,99 @@ export const cssProps = {
     "zIndex": "z-index",
     "backdropFilter": "backdrop-filter"
 };
+export const cssDirect = {
+    "extend": "@extend __VALUE__;",
+    "content": "content:'';",
+    "bold": "font-weight: bold;",
+    "grid": "display:grid;",
+    "flex": "display:flex;",
+    "wrap": "flex-wrap:wrap;",
+    "cols": "flex-direction:column;",
+    "ass": "align-self:flex-start;",
+    "ais": "align-items:flex-start;",
+    "aib": "align-items:baseline;",
+    "aic": "align-items:center;",
+    "aie": "align-items:flex-end;",
+    "jcs": "justify-content:flex-start;",
+    "jcc": "justify-content:center;",
+    "jce": "justify-content:flex-end;",
+    "jcb": "justify-content:space-between;",
+    "jca": "justify-content:space-around;",
+    "tal": "text-align: left;",
+    "tac": "text-align: center;",
+    "tar": "text-align: right;",
+    "tas": "text-align: justify;",
+    "fill": "top: 0px;left: 0px;right: 0px;bottom: 0px;",
+    "rel": "position:relative;",
+    "abs": "position:absolute;",
+    "fixed": "position:fixed;",
+    "sticky": "position:sticky;",
+    "abc": "top: 50%;left: 50%;transform: translate(-50%, -50%);",
+    "tdn": "text-decoration:none;",
+    "tdu": "text-decoration:underline;",
+    "nous": "user-select:none;",
+    "nope": "pointer-events:none;",
+    "ph": "padding-left:__VALUE__;padding-right:__VALUE__;",
+    "pv": "padding-top:__VALUE__;padding-bottom:__VALUE__;",
+    "mh": "margin-left:__VALUE__;margin-right:__VALUE__;",
+    "mv": "margin-top:__VALUE__;margin-bottom:__VALUE__;",
+    "translate": "transform:translate(__VALUE__);",
+    "translateX": "transform:translateX(__VALUE__);",
+    "translateY": "transform:translateY(__VALUE__);",
+    "rotate": "transform: rotate(__VALUE__);",
+    "scale": "transform: scale(__VALUE__);",
+    "anim": "transition: all __VALUE__ __CURVE__ __DELAY__;",
+    "hide": "display: none;",
+};
+export const cssAnimationCurves = {
+    ease: 'ease',
+    in: 'ease-in',
+    out: 'ease-out',
+    inout: 'ease-in-out',
+    linear: 'linear',
+    start: 'step-start',
+    end: 'step-end',
+    steps: 'steps',
+    cubic: 'cubic-bezier',
+    initial: 'initial',
+    inherit: 'inherit'
+};
+export const cssAnimationFunctions = {
+    animation: 'animation',
+    name: 'animation-name',
+    duration: 'animation-duration',
+    timing: 'animation-timing-function',
+    delay: 'animation-delay',
+    count: 'animation-iteration-count',
+    direction: 'animation-direction',
+    fill: 'animation-fill-mode',
+    state: 'animation-play-state',
+    frames: 'keyframes'
+};
+export const cssTransformKeys = [
+    'translate',
+    'translateX',
+    'translateY',
+    'translateZ',
+    'scale',
+    'scaleX',
+    'scaleY',
+    'scaleZ',
+    'rotate',
+    'rotateX',
+    'rotateY',
+    'rotateZ',
+    'skew',
+    'skewX',
+    'skewY',
+    'perspective',
+    'matrix',
+    'matrix3d'
+];
+export const cssWithKeys = {
+    w: `width`,
+    h: `height`,
+    x: `translateX`,
+    y: `translateY`,
+    z: `translateZ`,
+};

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export { default as Cover } from "./comps/cover";
 export { default as Form } from "./comps/form";
 export { default as Heading } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
+export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
+export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";

package/dist/index.js

@@ -7,6 +7,8 @@ export { default as Cover } from "./comps/cover";
 export { default as Form } from "./comps/form";
 export { default as Heading } from "./comps/heading";
 export { default as Icon } from "./comps/icon";
+export { default as Image } from "./comps/image";
 export { default as Input } from "./comps/input";
+export { default as Select } from "./comps/select";
 export { default as Sheet } from "./comps/sheet";
 export { default as Spinner } from "./comps/spinner";

package/dist/styles.css

@@ -1 +1 @@
-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}
+*,*::before,*::after{box-sizing:border-box}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}[popover]{margin:0;padding:0;border:0}: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;--select: #fff;--select-options: #fff;--select-option-font-size: 16px;--select-hover: #eee;--select-selected: #ddd;--select-padding: 6px 8px;--select-radius: 5px}.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-toast,.zuz-sheet.toast-warn,.zuz-sheet.toast-success,.zuz-sheet.toast-error{border-radius:6px;padding:6px 12px;font-size:14px;white-space:pre}.zuz-sheet{top:50%;left:50%;transform:translate(-50%, -50%);z-index:214748364;transform-origin:top left;transition:all .5s cubic-bezier(0.2, -0.36, 0, 1.46) 0s}.zuz-sheet.toast-default{background:#333;color:#fff}.zuz-sheet.toast-error{background:#ff4747;color:#fff;top:-20px}.zuz-sheet.toast-success{background:#23ac28;color:#fff}.zuz-sheet.toast-warn{background:#ffba00}.zuz-sheet-overlay{background:rgba(0,0,0,.7);z-index:111;backdrop-filter:blur(10px)}.zuz-context-menu{z-index:99;background:var(--context-background);border-radius:var(--context-radius);padding:10px;box-shadow:var(--context-shadow)}.zuz-context-menu .context-line{height:1px;background:var(--context-seperator);margin:3px 6px}.zuz-context-menu .context-menu-item{width:220px;padding:6px 10px;gap:10px;cursor:pointer;font-size:var(--context-label-size);border-radius:var(--context-radius)}.zuz-context-menu .context-menu-item .ico{font-size:var(--context-icon-size)}.zuz-context-menu .context-menu-item:hover{background:var(--context-hover)}.zuz-select{gap:5px;background:var(--select);border-radius:var(--select-radius)}.zuz-select .zuz-selected{flex:1}.zuz-select-options{max-height:400px;overflow-x:hidden;gap:2px;background:var(--select-options);border-radius:var(--select-radius);padding:4px 0px}.zuz-select-options button{background:rgba(0,0,0,0);border:0px;text-align:left;padding:var(--select-padding);border-radius:var(--select-radius);font-size:var(--select-option-font-size)}.zuz-select-options button:hover{background:var(--select-hover)}.zuz-select-options button.selected{background:var(--select-selected)}

package/dist/types/enums.d.ts

@@ -12,6 +12,7 @@ export declare enum FORMVALIDATION {
     MatchField = "MATCHFIELD"
 }
 export declare enum SHEET {
+    Dialog = "DIALOG",
     Default = "DEFAULT",
     Error = "ERROR",
     Success = "SUCCESS",

package/dist/types/enums.js

@@ -16,6 +16,7 @@ export var FORMVALIDATION;
 })(FORMVALIDATION || (FORMVALIDATION = {}));
 export var SHEET;
 (function (SHEET) {
+    SHEET["Dialog"] = "DIALOG";
     SHEET["Default"] = "DEFAULT";
     SHEET["Error"] = "ERROR";
     SHEET["Success"] = "SUCCESS";

package/dist/types/index.d.ts

@@ -22,3 +22,4 @@ declare global {
 }
 export type FormSubmitHandler = (formData: FormData) => void;
 export type FormInputs = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export type zuzProps = `as` | `css` | `hover` | `before` | `after`;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zuzjs/ui",
-    "version": "0.4.0",
+    "version": "0.4.2",
     "keywords": [
         "react",
         "zuz",