podo-ui 0.9.0 → 0.9.3

package/dist/react/atom/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../react/atom/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAEjC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAElD;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmFjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../react/atom/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,WAAW;IAC1B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAEjC;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IAElD;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmFhC,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/dist/react/atom/avatar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useCallback } from 'react';
 import styles from './avatar.module.scss';
-const Avatar = ({ type = 'icon', src, icon = 'icon-user', text, size = 56, activityRing = false, className = '', alt = 'Avatar', onClick, }) => {
+const Avatar = memo(({ type = 'icon', src, icon = 'icon-user', text, size = 56, activityRing = false, className = '', alt = 'Avatar', onClick, }) => {
     const wrapperClasses = [
         styles.wrapper,
         activityRing && styles.activityRing,
@@ -20,7 +21,7 @@ const Avatar = ({ type = 'icon', src, icon = 'icon-user', text, size = 56, activ
     // Format text to show only first 2 characters
     const displayText = text ? text.slice(0, 2) : '';
     // Calculate font size based on avatar size and type
-    const getFontSize = (contentType) => {
+    const getFontSize = useCallback((contentType) => {
         if (contentType === 'icon') {
             // 아이콘: size={56}일 때 44px 기준 (약 78.5%)
             const iconRatio = 0.785;
@@ -31,7 +32,7 @@ const Avatar = ({ type = 'icon', src, icon = 'icon-user', text, size = 56, activ
             const textRatio = 0.43;
             return Math.round(size * textRatio);
         }
-    };
+    }, [size]);
     const renderContent = () => {
         if (type === 'image' && src) {
             return _jsx("img", { src: src, alt: alt, className: styles.image });
@@ -50,5 +51,6 @@ const Avatar = ({ type = 'icon', src, icon = 'icon-user', text, size = 56, activ
                 height: size,
                 fontSize: type === 'text' ? getFontSize('text') : getFontSize('icon')
             }, children: renderContent() }) }));
-};
+});
+Avatar.displayName = 'Avatar';
 export default Avatar;

package/dist/react/atom/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../react/atom/button.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,cAAc,GACd,MAAM,GACN,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;IACjE,kBAAkB;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW;IACX,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,wHA6CX,CAAC;AAIF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../react/atom/button.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,cAAc,GACd,MAAM,GACN,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;IACjE,kBAAkB;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW;IACX,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,wHA+CX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/react/atom/button.js

@@ -11,7 +11,7 @@ const Button = forwardRef(({ theme = 'default', variant = 'solid', size = 'sm',
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsxs("button", { ref: ref, className: buttonClass || undefined, disabled: disabled || loading, ...rest, children: [loading ? (_jsx("i", { className: "icon-loading" })) : (icon && _jsx("i", { className: icon })), children, rightIcon && !loading && _jsx("i", { className: rightIcon })] }));
+    return (_jsxs("button", { ref: ref, className: buttonClass || undefined, disabled: disabled || loading, "aria-busy": loading ? true : undefined, "aria-disabled": disabled ? true : undefined, ...rest, children: [loading ? (_jsx("i", { className: "icon-loading" })) : (icon && _jsx("i", { className: icon })), children, rightIcon && !loading && _jsx("i", { className: rightIcon })] }));
 });
 Button.displayName = 'Button';
 export default Button;

package/dist/react/atom/chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../react/atom/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnE,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4B7B,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../react/atom/chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnE,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IACrC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA4B5B,CAAC;AAIH,eAAe,IAAI,CAAC"}

package/dist/react/atom/chip.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Chip = ({ children, theme = 'default', type = 'default', size = 'md', round = false, icon, onDelete, className = '', }) => {
+import { memo } from 'react';
+const Chip = memo(({ children, theme = 'default', type = 'default', size = 'md', round = false, icon, onDelete, className = '', }) => {
     const chipClasses = [
         'chip',
         theme !== 'default' && theme,
@@ -11,5 +12,6 @@ const Chip = ({ children, theme = 'default', type = 'default', size = 'md', roun
         .filter(Boolean)
         .join(' ');
     return (_jsxs("div", { className: chipClasses, children: [icon && _jsx("i", { className: `icon ${icon}` }), children, onDelete && _jsx("button", { "aria-label": "\uC0AD\uC81C", onClick: onDelete })] }));
-};
+});
+Chip.displayName = 'Chip';
 export default Chip;

package/dist/react/atom/input.d.ts

@@ -6,6 +6,10 @@ export interface InputWrapperProps extends React.ComponentProps<'input'> {
     withIcon?: string;
     withRightIcon?: string;
     unit?: string;
+    /** Accessible label for screen readers */
+    'aria-label'?: string;
+    /** ID of element describing the input */
+    'aria-describedby'?: string;
 }
 declare const Input: React.FC<InputWrapperProps>;
 export default Input;

package/dist/react/atom/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../react/atom/input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqDtC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../react/atom/input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yCAAyC;IACzC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4CtC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/react/atom/input.js

@@ -1,29 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback } from 'react';
-import { z } from 'zod';
+import { useEffect } from 'react';
 import styles from './input.module.scss';
-const Input = ({ validator, value, className, withIcon, withRightIcon, unit, type = 'text', ...rest }) => {
-    const [message, setMessage] = useState('');
-    const [statusClass, setStatusClass] = useState('');
-    const validateHandler = useCallback(() => {
-        setMessage('');
-        setStatusClass('');
-        if (validator && value) {
-            try {
-                validator.parse(value);
-                setStatusClass('success');
-            }
-            catch (e) {
-                if (e instanceof z.ZodError) {
-                    setMessage(e.errors[0].message);
-                    setStatusClass('danger');
-                }
-            }
-        }
-    }, [validator, value]);
+import { useValidation } from '../hooks/useValidation';
+const Input = ({ validator, value, className, withIcon, withRightIcon, unit, type = 'text', id, ...rest }) => {
+    const inputId = id || `input-${Math.random().toString(36).slice(2, 9)}`;
+    const errorId = `${inputId}-error`;
+    const { message, statusClass, validate } = useValidation(validator);
     useEffect(() => {
-        validateHandler();
-    }, [validateHandler, value]);
-    return (_jsxs("div", { className: `${styles.style} ${className || ''}`, children: [_jsxs("div", { className: `${className || ''} ${withIcon ? 'with-icon' : ''} ${withRightIcon ? 'with-right-icon' : ''}`, children: [withIcon && _jsx("i", { className: withIcon }), _jsx("input", { type: type, ...rest, value: value ?? '', className: `${statusClass} ${className || ''}` }), withRightIcon && _jsx("i", { className: withRightIcon }), unit && _jsx("span", { className: "unit", children: unit })] }), validator && message !== '' && (_jsx("div", { className: "validator", children: message }))] }));
+        validate(value);
+    }, [validate, value]);
+    return (_jsxs("div", { className: `${styles.style} ${className || ''}`, children: [_jsxs("div", { className: `${className || ''} ${withIcon ? 'with-icon' : ''} ${withRightIcon ? 'with-right-icon' : ''}`, children: [withIcon && _jsx("i", { className: withIcon }), _jsx("input", { id: inputId, type: type, ...rest, value: value ?? '', className: `${statusClass} ${className || ''}`, "aria-invalid": statusClass === 'danger' ? true : undefined, "aria-describedby": message ? errorId : rest['aria-describedby'] }), withRightIcon && _jsx("i", { className: withRightIcon }), unit && _jsx("span", { className: "unit", children: unit })] }), validator && message !== '' && (_jsx("div", { id: errorId, className: "validator", role: "alert", children: message }))] }));
 };
 export default Input;

package/dist/react/atom/textarea.d.ts

@@ -3,6 +3,10 @@ export interface TextareaWrapperProps extends React.ComponentProps<'textarea'> {
     value: string;
     className?: string;
     validator?: z.ZodType<unknown>;
+    /** Accessible label for screen readers */
+    'aria-label'?: string;
+    /** ID of element describing the textarea */
+    'aria-describedby'?: string;
 }
 declare const Textarea: React.FC<TextareaWrapperProps>;
 export default Textarea;

package/dist/react/atom/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../react/atom/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;CAChC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsC5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../react/atom/textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6B5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/react/atom/textarea.js

@@ -1,26 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { z } from 'zod';
 import styles from './textarea.module.scss';
-const Textarea = ({ validator, value, className, ...rest }) => {
-    const [message, setMessage] = useState('');
-    const [statusClass, setStatusClass] = useState('');
-    const validateHandler = () => {
-        setMessage('');
-        setStatusClass('');
-        if (validator && value.length > 0) {
-            try {
-                validator.parse(value);
-                setStatusClass('success');
-            }
-            catch (e) {
-                if (e instanceof z.ZodError) {
-                    setMessage(e.errors[0].message);
-                    setStatusClass('danger');
-                }
-            }
-        }
-    };
-    return (_jsxs("div", { className: `${styles.style} ${className}`, children: [_jsx("textarea", { ...rest, value: value, className: `${statusClass} ${className}`, onKeyUp: validateHandler }), validator && message !== '' && (_jsx("div", { className: "validator", children: message }))] }));
+import { useValidation } from '../hooks/useValidation';
+const Textarea = ({ validator, value, className, id, ...rest }) => {
+    const textareaId = id || `textarea-${Math.random().toString(36).slice(2, 9)}`;
+    const errorId = `${textareaId}-error`;
+    const { message, statusClass, validate } = useValidation(validator);
+    return (_jsxs("div", { className: `${styles.style} ${className}`, children: [_jsx("textarea", { id: textareaId, ...rest, value: value, className: `${statusClass} ${className}`, onKeyUp: () => validate(value), "aria-invalid": statusClass === 'danger' ? true : undefined, "aria-describedby": message ? errorId : rest['aria-describedby'] }), validator && message !== '' && (_jsx("div", { id: errorId, className: "validator", role: "alert", children: message }))] }));
 };
 export default Textarea;

package/dist/react/hooks/useValidation.d.ts

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+export interface ValidationResult {
+    message: string;
+    statusClass: string;
+    validate: (value: string | number | undefined) => void;
+    reset: () => void;
+}
+/**
+ * Custom hook for Zod validation
+ * @param validator - Zod schema for validation
+ * @returns Validation state and handlers
+ */
+export declare const useValidation: (validator?: z.ZodType<unknown>) => ValidationResult;
+export default useValidation;
+//# sourceMappingURL=useValidation.d.ts.map

package/dist/react/hooks/useValidation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useValidation.d.ts","sourceRoot":"","sources":["../../../react/hooks/useValidation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACvD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,YAAY,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,KAC7B,gBA+BF,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/react/hooks/useValidation.js

@@ -0,0 +1,33 @@
+import { useState, useCallback } from 'react';
+import { z } from 'zod';
+/**
+ * Custom hook for Zod validation
+ * @param validator - Zod schema for validation
+ * @returns Validation state and handlers
+ */
+export const useValidation = (validator) => {
+    const [message, setMessage] = useState('');
+    const [statusClass, setStatusClass] = useState('');
+    const reset = useCallback(() => {
+        setMessage('');
+        setStatusClass('');
+    }, []);
+    const validate = useCallback((value) => {
+        reset();
+        if (!validator || !value) {
+            return;
+        }
+        try {
+            validator.parse(value);
+            setStatusClass('success');
+        }
+        catch (e) {
+            if (e instanceof z.ZodError) {
+                setMessage(e.errors[0].message);
+                setStatusClass('danger');
+            }
+        }
+    }, [validator, reset]);
+    return { message, statusClass, validate, reset };
+};
+export default useValidation;

package/dist/react/molecule/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../react/molecule/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,iBAAiB;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,kBAAkB;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,yBAAyB;IACzB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,kBAAkB;IAClB,UAAU,EAAE,CAAC,EAAE,CAAC;IAChB,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;IAC1C,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iBAAiB;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAChD,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,UAAU,CAAC,CAAC,CAAC,2CAgDf;kBAzDQ,KAAK;;;AA6Dd,eAAe,KAAK,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../react/molecule/table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,iBAAiB;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,kBAAkB;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC3D,yBAAyB;IACzB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,kBAAkB;IAClB,UAAU,EAAE,CAAC,EAAE,CAAC;IAChB,wBAAwB;IACxB,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;IAC1C,oCAAoC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,iBAAiB;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wBAAwB;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,KAAK,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAChD,OAAO,EACP,UAAU,EACV,MAAM,EACN,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,SAAS,GACV,EAAE,UAAU,CAAC,CAAC,CAAC,2CA+Df;kBAxEQ,KAAK;;;AA4Ed,eAAe,KAAK,CAAC"}

package/dist/react/molecule/table.js

@@ -1,18 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
 function Table({ columns, dataSource, rowKey, list, border, fill, onRowClick, className, }) {
-    const getRowKey = (record, index) => {
+    const getRowKey = useCallback((record, index) => {
         if (typeof rowKey === 'function') {
             return rowKey(record);
         }
         return String(record[rowKey] ?? index);
-    };
+    }, [rowKey]);
+    const handleRowClick = useCallback((record, index) => {
+        onRowClick?.(record, index);
+    }, [onRowClick]);
+    const handleKeyDown = useCallback((e, record, index) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onRowClick?.(record, index);
+        }
+    }, [onRowClick]);
     const tableClass = [list && 'list', border && 'border', fill && 'fill', className]
         .filter(Boolean)
         .join(' ');
-    return (_jsxs("table", { className: tableClass || undefined, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { style: {
+    return (_jsxs("table", { className: tableClass || undefined, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { scope: "col", style: {
                             width: col.width,
                             textAlign: col.align,
-                        }, children: col.title }, col.key))) }) }), _jsx("tbody", { children: dataSource.map((record, index) => (_jsx("tr", { onClick: () => onRowClick?.(record, index), style: onRowClick ? { cursor: 'pointer' } : undefined, children: columns.map((col) => (_jsx("td", { style: { textAlign: col.align }, children: col.render
+                        }, children: col.title }, col.key))) }) }), _jsx("tbody", { children: dataSource.map((record, index) => (_jsx("tr", { onClick: () => handleRowClick(record, index), style: onRowClick ? { cursor: 'pointer' } : undefined, role: onRowClick ? 'button' : undefined, tabIndex: onRowClick ? 0 : undefined, onKeyDown: onRowClick ? (e) => handleKeyDown(e, record, index) : undefined, children: columns.map((col) => (_jsx("td", { style: { textAlign: col.align }, children: col.render
                             ? col.render(record[col.key], record, index)
                             : record[col.key] }, col.key))) }, getRowKey(record, index)))) })] }));
 }

package/dist/react/molecule/toast-provider.js

@@ -40,9 +40,9 @@ export const ToastProvider = ({ children }) => {
     const hideToast = useCallback((id) => {
         setToasts((prev) => prev.filter((toast) => toast.id !== id));
     }, []);
-    const getToastsByPosition = (position) => {
+    const getToastsByPosition = useCallback((position) => {
         return toasts.filter((toast) => toast.position === position);
-    };
+    }, [toasts]);
     const positions = [
         'top-left',
         'top-center',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.9.0",
+  "version": "0.9.3",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",
@@ -13,6 +13,7 @@
   },
   "homepage": "https://podoui.com",
   "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
@@ -23,12 +24,14 @@
     "global.d.ts",
     "mixin.scss",
     "vite-fonts.scss",
-    "README.md"
+    "README.md",
+    "README.ko.md"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
+      "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./react/atom/*": {
@@ -79,7 +82,10 @@
     "prepublishOnly": "npm run build:all",
     "lint": "eslint .",
     "icon": "node ./cli/icon-scss.js",
-    "deploy": "vite build && wrangler pages deploy dist/client"
+    "deploy": "vite build && wrangler pages deploy dist/client",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -105,6 +111,9 @@
   "devDependencies": {
     "@eslint/js": "^9.8.0",
     "@playwright/test": "^1.56.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/node": "22.10.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -125,8 +134,10 @@
     "scss": "^0.2.4",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.0.0",
+    "jsdom": "^25.0.1",
     "vike": "^0.4.182",
     "vike-react": "^0.4.18",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vitest": "^2.1.8"
   }
 }

package/scss/color/theme.scss

@@ -87,101 +87,9 @@
 }
 
 /*
-  Auto mode: Follow system preference
+  Dark mode color variables (shared mixin)
 */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-color-mode='light']) {
-    --color-primary: #7c3aed;
-    --color-primary-hover: #8b5cf6;
-    --color-primary-pressed: #7c3aed;
-    --color-primary-focus: #8b5cf6;
-    --color-primary-fill: #111827;
-    --color-primary-reverse: #ffffff;
-    --color-primary-outline: rgba(158, 115, 254, 0.3);
-    --color-default: #34343a;
-    --color-default-hover: #3f3f46;
-    --color-default-pressed: #34343a;
-    --color-default-focus: #3f3f46;
-    --color-default-fill: #34343a;
-    --color-default-reverse: #ffffff;
-    --color-default-outline: rgba(63, 63, 70, 0.3);
-    --color-default-deep: #a1a1aa;
-    --color-default-deep-hover: #d1d1d7;
-    --color-default-deep-pressed: #a1a1aa;
-    --color-default-deep-focus: #d1d1d7;
-    --color-default-deep-fill: #52525b;
-    --color-default-deep-reverse: #2c2c31;
-    --color-default-deep-outline: rgba(209, 209, 215, 0.3);
-    --color-info: #0a73eb;
-    --color-info-hover: #1890ff;
-    --color-info-pressed: #0a73eb;
-    --color-info-focus: #1890ff;
-    --color-info-fill: #1c1c20;
-    --color-info-reverse: #ffffff;
-    --color-info-outline: rgba(24, 144, 255, 0.3);
-    --color-link: #0284c7;
-    --color-link-hover: #0ea5e9;
-    --color-link-pressed: #0284c7;
-    --color-link-focus: #0ea5e9;
-    --color-link-fill: #1c1c20;
-    --color-link-reverse: #ffffff;
-    --color-link-outline: rgba(14, 165, 233, 0.3);
-    --color-success: #0d9488;
-    --color-success-hover: #1bb0a2;
-    --color-success-pressed: #0d9488;
-    --color-success-focus: #1bb0a2;
-    --color-success-fill: #1c1c20;
-    --color-success-reverse: #ffffff;
-    --color-success-outline: rgba(27, 176, 162, 0.3);
-    --color-warning: #e8840f;
-    --color-warning-hover: #f19b0b;
-    --color-warning-pressed: #e8840f;
-    --color-warning-focus: #f19b0b;
-    --color-warning-fill: #1c1c20;
-    --color-warning-reverse: #ffffff;
-    --color-warning-outline: rgba(241, 155, 11, 0.3);
-    --color-danger: #f04646;
-    --color-danger-hover: #f25959;
-    --color-danger-pressed: #f04646;
-    --color-danger-focus: #f25959;
-    --color-danger-fill: #1c1c20;
-    --color-danger-reverse: #ffffff;
-    --color-danger-outline: rgba(242, 89, 89, 0.3);
-    --color-bg-modal: #2c2c31;
-    --color-bg-disabled: #2c2c31;
-    --color-bg-toggle: #52525b;
-    --color-bg-indicator: rgba(255, 255, 255, 0.36);
-    --color-bg-block: rgba(0, 0, 0, 0.09);
-    --color-bg-reverse-wb: #000000;
-    --color-bg-reverse-bw: #ffffff;
-    --color-bg-wt: #ffffff;
-    --color-bg-bk: #000000;
-    --color-bg-elevation: #09090b;
-    --color-bg-elevation-1: #18181b;
-    --color-bg-elevation-2: #242429;
-    --color-bg-elevation-3: #2c2c31;
-    --color-border: #52525b;
-    --color-border-hover: #71717a;
-    --color-border-pressed: #52525b;
-    --color-border-focus: #71717a;
-    --color-border-disabled: rgba(255, 255, 255, 0.09);
-    --color-border-alpha: rgba(255, 255, 255, 0.18);
-    --color-text-header: #f4f4f5;
-    --color-text-body: #e4e4e7;
-    --color-text-sub: #a1a1aa;
-    --color-text-action: #d1d1d7;
-    --color-text-action-hover: #f4f4f5;
-    --color-text-action-pressed: #d1d1d7;
-    --color-text-action-focus: #f4f4f5;
-    --color-text-action-disabled: #52525b;
-    --color-text-action-reverse: #ffffff;
-  }
-}
-
-html[data-color-mode='dark'] {
-  /*
-    Dark mode colors
-  */
+@mixin dark-mode-vars {
   --color-primary: #7c3aed;
   --color-primary-hover: #8b5cf6;
   --color-primary-pressed: #7c3aed;
@@ -267,3 +175,19 @@ html[data-color-mode='dark'] {
   --color-text-action-disabled: #52525b;
   --color-text-action-reverse: #ffffff;
 }
+
+/*
+  Auto mode: Follow system preference
+*/
+@media (prefers-color-scheme: dark) {
+  :root:not([data-color-mode='light']) {
+    @include dark-mode-vars;
+  }
+}
+
+/*
+  Manual dark mode
+*/
+html[data-color-mode='dark'] {
+  @include dark-mode-vars;
+}

package/scss/icon/icon-name.scss

@@ -145,4 +145,7 @@ $icon-name: (
   login: \e97a,
   margin-horizontal: \e97b,
   margin-vertical: \e97c,
+  button: \e97d,
+  desktop: \e9a0,
+  mobile: \e9a1,
 );