@zuzjs/ui 0.4.7 → 0.4.8

package/README.md

@@ -1 +1,44 @@
-# zuzjs-ui
+# @zuzjs/ui
+
+The `@zuzjs/ui` library provides a collection of reusable components and blocks designed to streamline your development process. It also includes an automatic CSS generator to help you maintain consistent styling across your application.
+
+## Features
+
+- **Components**: A variety of pre-built UI components to speed up your development.
+- **Blocks**: Modular blocks that can be easily integrated into your projects.
+- **Auto CSS Generator**: Automatically generates CSS to ensure consistent and maintainable styles.
+
+## Installation
+
+To install the `@zuzjs/ui` library, use the following command:
+
+```bash
+npm install @zuzjs/ui
+```
+
+## Usage
+
+Import the components and blocks you need and start building your UI:
+
+```javascript
+import { Box, Button, Text } from '@zuzjs/ui';
+
+function App() {
+    return (
+        <Box as={`w:100 h:100 bg:red`}>
+            <Button as={`s:18 bold tac`}>Click Me</Button>
+            <Text as={`s:18 tac`}>Hello World!</Text>
+        </Box>
+    );
+}
+```
+
+The auto CSS generator will handle the styling for you, ensuring a cohesive look and feel.
+
+## Documentation
+
+Documention in progress.
+
+## License
+
+This project is licensed under the MIT License.

package/dist/comps/drawer.d.ts

@@ -5,6 +5,7 @@ export interface DrawerProps {
     speed?: number;
     from?: DRAWER_SIDE;
     children: string | ReactNode | ReactNode[];
+    prerender?: boolean;
 }
 export interface DrawerHandler {
     open: () => void;

package/dist/comps/drawer.js

@@ -3,9 +3,10 @@ import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from "reac
 import With from "./base";
 import { DRAWER_SIDE, TRANSITION_CURVES, TRANSITIONS } from "../types/enums";
 const Drawer = forwardRef((props, ref) => {
-    const { as, from, speed, children, ...rest } = props;
+    const { as, from, speed, children, prerender, ...rest } = props;
     const [visible, setVisible] = useState(false);
     const divRef = useRef(null);
+    const render = useMemo(() => prerender || true, []);
     const style = useMemo(() => {
         switch (from) {
             case DRAWER_SIDE.Left:
@@ -41,6 +42,6 @@ const Drawer = forwardRef((props, ref) => {
                     when: visible,
                     curve: TRANSITION_CURVES.EaseInOut,
                     duration: speed || .5,
-                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(With, { className: "drawer-handle" }) : null, children] })] });
+                }, ...rest, children: [from == DRAWER_SIDE.Top || from == DRAWER_SIDE.Bottom ? _jsx(With, { className: "drawer-handle" }) : null, (render || visible) && children] })] });
 });
 export default Drawer;

package/dist/comps/textwheel.d.ts

@@ -1,10 +1,15 @@
 import React from 'react';
 import { animationProps } from "./base";
-declare const TextWheel: React.ForwardRefExoticComponent<{
+export interface WheelProps {
     as?: string;
     direction?: `up` | `down`;
-    value: number | string;
+    value?: number | string;
     color?: string;
     animate?: animationProps;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}
+export interface WheelHandler {
+    setValue: (v: number | string) => void;
+    updateValue: (v: number | string) => void;
+}
+declare const TextWheel: React.ForwardRefExoticComponent<WheelProps & React.RefAttributes<WheelHandler>>;
 export default TextWheel;

package/dist/comps/textwheel.js

@@ -1,9 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useRef, useState } from 'react';
 import { forwardRef } from 'react';
 import With from "./base";
 const TextWheel = forwardRef((props, ref) => {
     const { as, value, color, direction, ...rest } = props;
-    return _jsxs(With, { className: `text-wheel flex aic rel`, "aria-hidden": true, as: as, ref: ref, ...rest, children: [value.toString().split('').map((char, index) => {
+    const divRef = useRef(null);
+    const [_value, _setValue] = useState(value || 0);
+    useImperativeHandle(ref, () => ({
+        updateValue(v) {
+            if (_value != v || _value.toString().length != v.toString().length) {
+                _setValue(v);
+            }
+        },
+        setValue(v) {
+            this.updateValue(v);
+            if (divRef.current) {
+                const chars = v.toString().split('');
+                divRef.current.querySelectorAll('.wheel-char').forEach((charElement, index) => {
+                    const char = chars[index];
+                    if (charElement instanceof HTMLElement) {
+                        charElement.setAttribute('data-value', char);
+                        const track = charElement.querySelector('.wheel-char-track');
+                        if (track instanceof HTMLElement) {
+                            track.style.setProperty('--v', char);
+                        }
+                    }
+                });
+            }
+        }
+    }));
+    return _jsxs(With, { className: `text-wheel flex aic rel`, "aria-hidden": true, as: as, ref: divRef, ...rest, children: [(_value || 0).toString().split('').map((char, index) => {
                 if (isNaN(parseInt(char, 10))) {
                     return _jsx(With, { tag: `span`, className: "wheel-char wheel-char-symbol grid", children: char }, `wheel-char-${index}`);
                 }

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
 export { default as useMounted } from './useMounted';
+export { default as useWindowFocus } from './useWindowFocus';
 export * from './usePubSub';

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
 export { default as useDevice } from './useDevice';
 export { default as useDimensions } from './useDimensions';
 export { default as useMounted } from './useMounted';
+export { default as useWindowFocus } from './useWindowFocus';
 export * from './usePubSub';

package/dist/hooks/useWindowFocus.d.ts

@@ -0,0 +1,2 @@
+declare const useWindowFocus: (delay?: number) => boolean;
+export default useWindowFocus;

package/dist/hooks/useWindowFocus.js

@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react';
+const useWindowFocus = (delay = 100) => {
+    const [focused, setFocus] = useState(true);
+    useEffect(() => {
+        window.addEventListener(`focusin`, () => setFocus(true));
+        window.addEventListener(`focusout`, () => setFocus(false));
+        return () => setFocus(false);
+    }, [delay]);
+    return focused;
+};
+export default useWindowFocus;

package/package.json

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