@designbasekorea/ui 0.1.18 → 0.1.19

package/dist/index.js

@@ -4876,6 +4876,20 @@ ModalHeader.displayName = 'ModalHeader';
 ModalBody.displayName = 'ModalBody';
 ModalFooter.displayName = 'ModalFooter';
 
+const Label = ({ children, htmlFor, required = false, size = 'm', disabled = false, error = false, className, onClick, }) => {
+    const classes = [
+        'designbase-label',
+        `designbase-label--${size}`,
+        disabled && 'designbase-label--disabled',
+        error && 'designbase-label--error',
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (jsxRuntimeExports.jsxs("label", { htmlFor: htmlFor, className: classes, onClick: onClick, children: [children, required && jsxRuntimeExports.jsx("span", { className: "designbase-label__required", children: "*" })] }));
+};
+Label.displayName = 'Label';
+
 const Input = React.forwardRef(({ type = 'text', label, placeholder, defaultValue, value, size = 'm', disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, startIcon: StartIcon, endIcon: EndIcon, fullWidth = false, className, inputClassName, onChange, onFocus, onBlur, ...props }, forwardedRef) => {
     const inputId = React.useId();
     const helperTextId = React.useId();
@@ -4898,7 +4912,7 @@ const Input = React.forwardRef(({ type = 'text', label, placeholder, defaultValu
         lg: 18,
     };
     const iconSize = iconSizeMap[size];
-    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [label && (jsxRuntimeExports.jsxs("label", { htmlFor: inputId, className: "designbase-input__label", children: [label, required && jsxRuntimeExports.jsx("span", { className: "designbase-input__required", children: "*" })] })), jsxRuntimeExports.jsxs("div", { className: "designbase-input__wrapper", children: [StartIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-input__start-icon", children: jsxRuntimeExports.jsx(StartIcon, { size: iconSize }) })), jsxRuntimeExports.jsx("input", { ...props, ref: forwardedRef, id: inputId, type: type, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, required: required, className: inputClasses, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, "aria-describedby": clsx(helperText && helperTextId, error && errorMessage && errorMessageId), "aria-invalid": error }), EndIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-input__end-icon", children: jsxRuntimeExports.jsx(EndIcon, { size: iconSize }) }))] }), helperText && !error && (jsxRuntimeExports.jsx("p", { id: helperTextId, className: "designbase-input__helper-text", children: helperText })), error && errorMessage && (jsxRuntimeExports.jsx("p", { id: errorMessageId, className: "designbase-input__error-message", children: errorMessage }))] }));
+    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [label && (jsxRuntimeExports.jsx(Label, { htmlFor: inputId, required: required, error: error, disabled: disabled, size: size === 's' ? 'xs' : size === 'm' ? 's' : 'm', children: label })), jsxRuntimeExports.jsxs("div", { className: "designbase-input__wrapper", children: [StartIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-input__start-icon", children: jsxRuntimeExports.jsx(StartIcon, { size: iconSize }) })), jsxRuntimeExports.jsx("input", { ...props, ref: forwardedRef, id: inputId, type: type, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, required: required, className: inputClasses, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, "aria-describedby": clsx(helperText && helperTextId, error && errorMessage && errorMessageId), "aria-invalid": error }), EndIcon && (jsxRuntimeExports.jsx("div", { className: "designbase-input__end-icon", children: jsxRuntimeExports.jsx(EndIcon, { size: iconSize }) }))] }), helperText && !error && (jsxRuntimeExports.jsx("p", { id: helperTextId, className: "designbase-input__helper-text", children: helperText })), error && errorMessage && (jsxRuntimeExports.jsx("p", { id: errorMessageId, className: "designbase-input__error-message", children: errorMessage }))] }));
 });
 Input.displayName = 'Input';
 
@@ -7312,7 +7326,7 @@ const Textarea = React.forwardRef(({ label, placeholder, defaultValue, value, si
     }, className);
     const textareaClasses = clsx('designbase-textarea__field', textareaClassName);
     const isOverLimit = maxLength && currentLength > maxLength;
-    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [label && (jsxRuntimeExports.jsxs("label", { htmlFor: textareaId, className: "designbase-textarea__label", children: [label, required && (jsxRuntimeExports.jsx("span", { className: "designbase-textarea__required", "aria-label": "\uD544\uC218", children: "*" }))] })), showCharacterCount && characterCountPosition === 'top' && (jsxRuntimeExports.jsx("div", { className: "designbase-textarea__character-count designbase-textarea__character-count--top", children: jsxRuntimeExports.jsxs("span", { className: clsx('designbase-textarea__character-count-text', {
+    return (jsxRuntimeExports.jsxs("div", { className: classes, children: [label && (jsxRuntimeExports.jsx(Label, { htmlFor: textareaId, required: required, error: error, disabled: disabled, size: size === 's' ? 'xs' : size === 'm' ? 's' : 'm', children: label })), showCharacterCount && characterCountPosition === 'top' && (jsxRuntimeExports.jsx("div", { className: "designbase-textarea__character-count designbase-textarea__character-count--top", children: jsxRuntimeExports.jsxs("span", { className: clsx('designbase-textarea__character-count-text', {
                         'designbase-textarea__character-count-text--error': isOverLimit
                     }), children: [currentLength, maxLength && ` / ${maxLength}`] }) })), jsxRuntimeExports.jsx("div", { className: "designbase-textarea__wrapper", children: jsxRuntimeExports.jsx("textarea", { ref: forwardedRef, id: textareaId, className: textareaClasses, placeholder: placeholder, defaultValue: defaultValue, value: value, rows: rows, maxLength: maxLength, disabled: disabled, readOnly: readOnly, required: required, "aria-describedby": clsx({
                         [helperTextId]: helperText,
@@ -8064,20 +8078,6 @@ const ImageList = ({ images, layout = 'grid', columns = 3, spacing = 'md', ratio
                 })), currentIndex: selectedImageIndex, isOpen: true, onOpenChange: handleLightboxClose, onImageChange: handleLightboxNavigate }))] }));
 };
 
-const Label = ({ children, htmlFor, required = false, size = 'm', disabled = false, error = false, className, onClick, }) => {
-    const classes = [
-        'designbase-label',
-        `designbase-label--${size}`,
-        disabled && 'designbase-label--disabled',
-        error && 'designbase-label--error',
-        className,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    return (jsxRuntimeExports.jsxs("label", { htmlFor: htmlFor, className: classes, onClick: onClick, children: [children, required && jsxRuntimeExports.jsx("span", { className: "designbase-label__required", children: "*" })] }));
-};
-Label.displayName = 'Label';
-
 const List = ({ items, size = 'm', variant = 'default', itemType = 'default', layout = 'vertical', selectable = false, multiple = false, selectedItems = [], draggable = false, spacing = 'm', alignment = 'start', onItemClick, onItemSelect, onItemDrag, emptyState, loading = false, loadingCount = 3, className, }) => {
     const [internalSelectedItems, setInternalSelectedItems] = React.useState(selectedItems);
     const [draggedItem, setDraggedItem] = React.useState(null);