@zuzjs/ui 0.7.4 → 0.7.6

package/dist/esm/src/types/enums.js

@@ -0,0 +1,276 @@
+export var FILTER;
+(function (FILTER) {
+    FILTER["Gooey"] = "gooey";
+})(FILTER || (FILTER = {}));
+export var SPINNER;
+(function (SPINNER) {
+    SPINNER["Simple"] = "SIMPLE";
+    SPINNER["Roller"] = "ROLLER";
+    SPINNER["Wave"] = "Wave";
+})(SPINNER || (SPINNER = {}));
+export var SLIDER;
+(function (SLIDER) {
+    SLIDER["Default"] = "range";
+    SLIDER["Text"] = "number";
+})(SLIDER || (SLIDER = {}));
+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["Pattern"] = "*";
+})(FORMVALIDATION || (FORMVALIDATION = {}));
+export var SHEET;
+(function (SHEET) {
+    SHEET["Dialog"] = "DIALOG";
+    SHEET["Default"] = "DEFAULT";
+    SHEET["Error"] = "ERROR";
+    SHEET["Success"] = "SUCCESS";
+    SHEET["Warn"] = "WARN";
+})(SHEET || (SHEET = {}));
+export var SHEET_ACTION_POSITION;
+(function (SHEET_ACTION_POSITION) {
+    SHEET_ACTION_POSITION["Left"] = "LEFT";
+    SHEET_ACTION_POSITION["Right"] = "RIGHT";
+    SHEET_ACTION_POSITION["Center"] = "CENTER";
+})(SHEET_ACTION_POSITION || (SHEET_ACTION_POSITION = {}));
+export var TRANSITION_CURVES;
+(function (TRANSITION_CURVES) {
+    TRANSITION_CURVES["Spring"] = "SPRING";
+    // Ease = "EASE",
+    // EaseIn = "EASEIN",
+    // EaseOut = "EASEOUT",
+    TRANSITION_CURVES["EaseInOut"] = "EASEINOUT";
+    TRANSITION_CURVES["Bounce"] = "BOUNCE";
+    // Linear = "LINEAR",
+    // StepStart = "STEPSTART",
+    // StepEnd = "STEPEND",
+    // Steps = "STEPS",
+    // CubicBezier = "CUBICBEZIER"
+})(TRANSITION_CURVES || (TRANSITION_CURVES = {}));
+export var TRANSITIONS;
+(function (TRANSITIONS) {
+    TRANSITIONS["FadeIn"] = "FADE_IN";
+    TRANSITIONS["ScaleIn"] = "SCALE_IN";
+    TRANSITIONS["SlideInTop"] = "SLIDE_FROM_TOP";
+    TRANSITIONS["SlideInRight"] = "SLIDE_FROM_RIGHT";
+    TRANSITIONS["SlideInBottom"] = "SLIDE_FROM_BOTTOM";
+    TRANSITIONS["SlideInLeft"] = "SLIDE_FROM_LEFT";
+    // Zoom = "ZOOM",
+    // Bounce = "BOUNCE",
+    // Flip = "FLIP",
+    // Rotate = "ROTATE",
+    // Pulse = "PULSE",
+    // Shake = "SHAKE"
+})(TRANSITIONS || (TRANSITIONS = {}));
+export var DRAWER_SIDE;
+(function (DRAWER_SIDE) {
+    DRAWER_SIDE["Left"] = "LEFT";
+    DRAWER_SIDE["Right"] = "RIGHT";
+    DRAWER_SIDE["Top"] = "TOP";
+    DRAWER_SIDE["Bottom"] = "BOTTOM";
+})(DRAWER_SIDE || (DRAWER_SIDE = {}));
+export var CHECKBOX;
+(function (CHECKBOX) {
+    CHECKBOX["Default"] = "DEFAULT";
+    CHECKBOX["Switch"] = "SWITCH";
+})(CHECKBOX || (CHECKBOX = {}));
+export var RADIO;
+(function (RADIO) {
+    RADIO["Default"] = "DEFAULT";
+    RADIO["Card"] = "CARD";
+})(RADIO || (RADIO = {}));
+export var EDIT_TYPE;
+(function (EDIT_TYPE) {
+    EDIT_TYPE["Slider"] = "SLIDER";
+    EDIT_TYPE["Checkbox"] = "CHECKBOX";
+})(EDIT_TYPE || (EDIT_TYPE = {}));
+export var DATATYPE;
+(function (DATATYPE) {
+    DATATYPE["String"] = "STRING";
+    DATATYPE["Number"] = "NUMBER";
+    DATATYPE["Boolean"] = "BOOLEAN";
+    DATATYPE["Array"] = "ARRAY";
+    DATATYPE["Object"] = "OBJECT";
+    DATATYPE["Date"] = "DATE";
+    DATATYPE["Time"] = "TIME";
+    DATATYPE["DateTime"] = "DATETIME";
+    DATATYPE["File"] = "FILE";
+})(DATATYPE || (DATATYPE = {}));
+export var SORT;
+(function (SORT) {
+    SORT["Asc"] = "ASC";
+    SORT["Desc"] = "DESC";
+})(SORT || (SORT = {}));
+export var PROGRESS;
+(function (PROGRESS) {
+    PROGRESS["Bar"] = "BAR";
+    PROGRESS["Ring"] = "RING";
+})(PROGRESS || (PROGRESS = {}));
+export var SKELETON;
+(function (SKELETON) {
+    SKELETON["Default"] = "DEFAULT";
+    SKELETON["Circle"] = "CIRCLE";
+})(SKELETON || (SKELETON = {}));
+export var ALERT;
+(function (ALERT) {
+    ALERT["Success"] = "success";
+    ALERT["Error"] = "error";
+    ALERT["Warning"] = "warning";
+    ALERT["Info"] = "info";
+})(ALERT || (ALERT = {}));
+export var AVATAR;
+(function (AVATAR) {
+    AVATAR["Circle"] = "CIRCLE";
+    AVATAR["Square"] = "SQUARE";
+})(AVATAR || (AVATAR = {}));
+export var KeyCode;
+(function (KeyCode) {
+    KeyCode[KeyCode["Backspace"] = 8] = "Backspace";
+    KeyCode[KeyCode["Tab"] = 9] = "Tab";
+    KeyCode[KeyCode["Enter"] = 13] = "Enter";
+    KeyCode[KeyCode["Shift"] = 16] = "Shift";
+    KeyCode[KeyCode["Ctrl"] = 17] = "Ctrl";
+    KeyCode[KeyCode["Alt"] = 18] = "Alt";
+    KeyCode[KeyCode["PauseBreak"] = 19] = "PauseBreak";
+    KeyCode[KeyCode["CapsLock"] = 20] = "CapsLock";
+    KeyCode[KeyCode["Escape"] = 27] = "Escape";
+    KeyCode[KeyCode["Space"] = 32] = "Space";
+    KeyCode[KeyCode["PageUp"] = 33] = "PageUp";
+    KeyCode[KeyCode["PageDown"] = 34] = "PageDown";
+    KeyCode[KeyCode["End"] = 35] = "End";
+    KeyCode[KeyCode["Home"] = 36] = "Home";
+    KeyCode[KeyCode["ArrowLeft"] = 37] = "ArrowLeft";
+    KeyCode[KeyCode["ArrowUp"] = 38] = "ArrowUp";
+    KeyCode[KeyCode["ArrowRight"] = 39] = "ArrowRight";
+    KeyCode[KeyCode["ArrowDown"] = 40] = "ArrowDown";
+    KeyCode[KeyCode["Insert"] = 45] = "Insert";
+    KeyCode[KeyCode["Delete"] = 46] = "Delete";
+    // Number keys
+    KeyCode[KeyCode["Digit0"] = 48] = "Digit0";
+    KeyCode[KeyCode["Digit1"] = 49] = "Digit1";
+    KeyCode[KeyCode["Digit2"] = 50] = "Digit2";
+    KeyCode[KeyCode["Digit3"] = 51] = "Digit3";
+    KeyCode[KeyCode["Digit4"] = 52] = "Digit4";
+    KeyCode[KeyCode["Digit5"] = 53] = "Digit5";
+    KeyCode[KeyCode["Digit6"] = 54] = "Digit6";
+    KeyCode[KeyCode["Digit7"] = 55] = "Digit7";
+    KeyCode[KeyCode["Digit8"] = 56] = "Digit8";
+    KeyCode[KeyCode["Digit9"] = 57] = "Digit9";
+    // Letter keys
+    KeyCode[KeyCode["KeyA"] = 65] = "KeyA";
+    KeyCode[KeyCode["KeyB"] = 66] = "KeyB";
+    KeyCode[KeyCode["KeyC"] = 67] = "KeyC";
+    KeyCode[KeyCode["KeyD"] = 68] = "KeyD";
+    KeyCode[KeyCode["KeyE"] = 69] = "KeyE";
+    KeyCode[KeyCode["KeyF"] = 70] = "KeyF";
+    KeyCode[KeyCode["KeyG"] = 71] = "KeyG";
+    KeyCode[KeyCode["KeyH"] = 72] = "KeyH";
+    KeyCode[KeyCode["KeyI"] = 73] = "KeyI";
+    KeyCode[KeyCode["KeyJ"] = 74] = "KeyJ";
+    KeyCode[KeyCode["KeyK"] = 75] = "KeyK";
+    KeyCode[KeyCode["KeyL"] = 76] = "KeyL";
+    KeyCode[KeyCode["KeyM"] = 77] = "KeyM";
+    KeyCode[KeyCode["KeyN"] = 78] = "KeyN";
+    KeyCode[KeyCode["KeyO"] = 79] = "KeyO";
+    KeyCode[KeyCode["KeyP"] = 80] = "KeyP";
+    KeyCode[KeyCode["KeyQ"] = 81] = "KeyQ";
+    KeyCode[KeyCode["KeyR"] = 82] = "KeyR";
+    KeyCode[KeyCode["KeyS"] = 83] = "KeyS";
+    KeyCode[KeyCode["KeyT"] = 84] = "KeyT";
+    KeyCode[KeyCode["KeyU"] = 85] = "KeyU";
+    KeyCode[KeyCode["KeyV"] = 86] = "KeyV";
+    KeyCode[KeyCode["KeyW"] = 87] = "KeyW";
+    KeyCode[KeyCode["KeyX"] = 88] = "KeyX";
+    KeyCode[KeyCode["KeyY"] = 89] = "KeyY";
+    KeyCode[KeyCode["KeyZ"] = 90] = "KeyZ";
+    // Numpad keys
+    KeyCode[KeyCode["Numpad0"] = 96] = "Numpad0";
+    KeyCode[KeyCode["Numpad1"] = 97] = "Numpad1";
+    KeyCode[KeyCode["Numpad2"] = 98] = "Numpad2";
+    KeyCode[KeyCode["Numpad3"] = 99] = "Numpad3";
+    KeyCode[KeyCode["Numpad4"] = 100] = "Numpad4";
+    KeyCode[KeyCode["Numpad5"] = 101] = "Numpad5";
+    KeyCode[KeyCode["Numpad6"] = 102] = "Numpad6";
+    KeyCode[KeyCode["Numpad7"] = 103] = "Numpad7";
+    KeyCode[KeyCode["Numpad8"] = 104] = "Numpad8";
+    KeyCode[KeyCode["Numpad9"] = 105] = "Numpad9";
+    KeyCode[KeyCode["NumpadMultiply"] = 106] = "NumpadMultiply";
+    KeyCode[KeyCode["NumpadAdd"] = 107] = "NumpadAdd";
+    KeyCode[KeyCode["NumpadSubtract"] = 109] = "NumpadSubtract";
+    KeyCode[KeyCode["NumpadDecimal"] = 110] = "NumpadDecimal";
+    KeyCode[KeyCode["NumpadDivide"] = 111] = "NumpadDivide";
+    // Function keys
+    KeyCode[KeyCode["F1"] = 112] = "F1";
+    KeyCode[KeyCode["F2"] = 113] = "F2";
+    KeyCode[KeyCode["F3"] = 114] = "F3";
+    KeyCode[KeyCode["F4"] = 115] = "F4";
+    KeyCode[KeyCode["F5"] = 116] = "F5";
+    KeyCode[KeyCode["F6"] = 117] = "F6";
+    KeyCode[KeyCode["F7"] = 118] = "F7";
+    KeyCode[KeyCode["F8"] = 119] = "F8";
+    KeyCode[KeyCode["F9"] = 120] = "F9";
+    KeyCode[KeyCode["F10"] = 121] = "F10";
+    KeyCode[KeyCode["F11"] = 122] = "F11";
+    KeyCode[KeyCode["F12"] = 123] = "F12";
+    // Other keys
+    KeyCode[KeyCode["NumLock"] = 144] = "NumLock";
+    KeyCode[KeyCode["ScrollLock"] = 145] = "ScrollLock";
+    KeyCode[KeyCode["Semicolon"] = 186] = "Semicolon";
+    KeyCode[KeyCode["Equal"] = 187] = "Equal";
+    KeyCode[KeyCode["Comma"] = 188] = "Comma";
+    KeyCode[KeyCode["Minus"] = 189] = "Minus";
+    KeyCode[KeyCode["Period"] = 190] = "Period";
+    KeyCode[KeyCode["Slash"] = 191] = "Slash";
+    KeyCode[KeyCode["Backquote"] = 192] = "Backquote";
+    KeyCode[KeyCode["BracketLeft"] = 219] = "BracketLeft";
+    KeyCode[KeyCode["Backslash"] = 220] = "Backslash";
+    KeyCode[KeyCode["BracketRight"] = 221] = "BracketRight";
+    KeyCode[KeyCode["Quote"] = 222] = "Quote";
+})(KeyCode || (KeyCode = {}));
+export var SHIMMER;
+(function (SHIMMER) {
+    SHIMMER["Classic"] = "CLASSIC";
+    SHIMMER["Aurora"] = "AURORA";
+    SHIMMER["Flame"] = "FLAME";
+})(SHIMMER || (SHIMMER = {}));
+export var DRAG_DIRECTION;
+(function (DRAG_DIRECTION) {
+    DRAG_DIRECTION["x"] = "x";
+    DRAG_DIRECTION["y"] = "y";
+    DRAG_DIRECTION["xy"] = "xy";
+})(DRAG_DIRECTION || (DRAG_DIRECTION = {}));
+export var Size;
+(function (Size) {
+    Size["Default"] = "def";
+    Size["Small"] = "sm";
+    Size["Medium"] = "md";
+    Size["Large"] = "lg";
+})(Size || (Size = {}));
+export var Variant;
+(function (Variant) {
+    Variant["Default"] = "def";
+    Variant["Small"] = "sm";
+    Variant["Medium"] = "md";
+    Variant["Large"] = "lg";
+    Variant["XLarge"] = "xl";
+})(Variant || (Variant = {}));
+export var Position;
+(function (Position) {
+    Position["Auto"] = "auto";
+    Position["Top"] = "top";
+    Position["Bottom"] = "bottom";
+    Position["Left"] = "left";
+    Position["Right"] = "right";
+})(Position || (Position = {}));
+export var ColorTheme;
+(function (ColorTheme) {
+    ColorTheme["Light"] = "light";
+    ColorTheme["Dark"] = "dark";
+    ColorTheme["System"] = "system";
+})(ColorTheme || (ColorTheme = {}));

package/dist/esm/src/types/index.d.ts

@@ -0,0 +1,77 @@
+import { ComponentPropsWithoutRef, ElementType } from "react";
+import { SHIMMER, SORT } from "./enums";
+import { animationProps, Skeleton } from "./interfaces";
+import { DragOptions } from "../hooks";
+export type Deprecated<T, M extends string> = T & {
+    __deprecatedMessage?: M;
+};
+export type dynamicObject = {
+    [x: string]: any;
+};
+export type stringObject = {
+    [x: string]: string;
+};
+export type sortOptions = {
+    direction?: SORT;
+    caseSensitive?: boolean;
+};
+export type KeyBindings = {
+    [key: string]: () => void;
+};
+export interface FormatNumberParams {
+    number: number | string;
+    locale: string;
+    style?: `decimal` | `currency` | `percent`;
+    decimal?: number;
+    currency?: {
+        code: string;
+        style: `symbol` | `code` | `name`;
+        symbol?: string;
+    };
+}
+export type CalendarWeekdayFormat = "long" | "short" | "narrow";
+export type CalendarMonthFormat = CalendarWeekdayFormat | "numeric" | "2-digit";
+export type zuzProps = `as` | `css` | `hover` | `before` | `after`;
+export interface ZuzProps {
+    /** When true, exposes itself to ZuzBuilder (Editor) */
+    withEditor?: boolean;
+    /** CSS Styles, such as "w:100" for "width: 100px"; */
+    as?: string | string[];
+    /**
+     * @deprecated
+     * Animation configuration using {@link animationProps}
+     * */
+    animate?: animationProps;
+    /** Animation configuration using {@link animationProps} */
+    fx?: animationProps;
+    /** Skeleton placeholder configuration using {@link Skeleton} */
+    skeleton?: Skeleton;
+    /** Additional class names for styling the component */
+    className?: string;
+    /** Shimmer effect for loading state, using predefined {@link SHIMMER} options */
+    shimmer?: SHIMMER;
+    /** Props to remove after processing so it won't appear in DOM */
+    propsToRemove?: string[];
+    /** Makes Component Draggable */
+    draggable?: boolean;
+    dragOptions?: DragOptions;
+}
+export type Attach<T, U> = Omit<T, keyof U> & U;
+export type Props<T extends ElementType> = ZuzProps & Omit<ComponentPropsWithoutRef<T>, keyof ZuzProps>;
+export type FormInputs = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export type cssShortKey = keyof cssShortKeys;
+export type cssShortKeys = {
+    w: string | number;
+    h: string | number;
+    x: string | number;
+    y: string | number;
+    z: string | number;
+    r: string | number;
+    rx: string | number;
+    ry: string | number;
+    rz: string | number;
+    s: string | number;
+    sx: string | number;
+    sy: string | number;
+    sz: string | number;
+};

package/dist/esm/src/types/index.js

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

package/dist/esm/src/types/interfaces.d.ts

@@ -0,0 +1,65 @@
+import { dynamicObject } from ".";
+import { SKELETON, TRANSITION_CURVES, TRANSITIONS } from "./enums";
+/**
+ * `animationProps` defines the properties to control animation effects
+ * applied to elements. Supports transitions with timing configurations.
+ */
+export interface animationProps {
+    /**
+     * Specifies the type of transition to apply, based on predefined
+     * {@link TRANSITIONS}
+     */
+    transition?: TRANSITIONS;
+    /** Starting style properties for the animation */
+    from?: dynamicObject;
+    /** Target style properties after the animation completes */
+    to?: dynamicObject;
+    /** Condition that determines when the animation should trigger */
+    when?: boolean;
+    /** Duration of the animation in milliseconds */
+    duration?: number;
+    /** Delay before the animation starts, in milliseconds */
+    delay?: number;
+    /** Easing curve applied to the animation, as a string or {@link TRANSITION_CURVES} */
+    curve?: string | TRANSITION_CURVES;
+}
+/**
+ * `Skeleton` defines properties for a skeleton loader, used to indicate
+ * loading states with placeholders.
+ */
+export interface Skeleton {
+    /**
+     * Determines if the skeleton is enabled or disabled.
+     * @example
+     * enabled: true
+     */
+    enabled: boolean;
+    /** Skeleton type, based on predefined {@link SKELETON} options
+     * @example
+     * type: SKELETON.CIRCLE
+    */
+    type?: SKELETON;
+    /** General size of the skeleton, or can specify width/height separately
+     * @example
+     * size: 100 | 100px | 100%
+    */
+    size?: number | string;
+    /** Default size of the skeleton if `size` is not specified
+     * @default 100%
+     * @example
+     * defaultSize: 100 | 100px | 100%
+    */
+    defaultSize?: number | string;
+    /** Width of the skeleton placeholder
+     * @example
+     * width: 100 | 100px | 100%
+    */
+    width?: number | string;
+    /** Height of the skeleton placeholder
+     * @example
+     * height: 100 | 100px | 100%
+    */
+    height?: number | string;
+    /** Border radius for the skeleton, allowing rounded corners */
+    radius?: number | string;
+}

package/dist/esm/src/types/interfaces.js

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