@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/cjs/src/components/forms-and-input/number-input/NumberInput.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberInput = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _hooks = require("../../../hooks");
+var _button = require("../../action/button");
+var _InputBase = require("../input-base/InputBase");
+const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    size = 'xs',
+    minValue,
+    maxValue,
+    step = 1,
+    stepperPosition,
+    disabled,
+    ...props
+  } = _ref;
+  const inputRef = (0, _react.useRef)(null);
+  const mergedRef = (0, _hooks.useMergeRefs)([ref, inputRef]);
+  const getCurrentValue = (0, _react.useCallback)(() => {
+    const value = inputRef.current?.value;
+    return value ? Number.parseFloat(value) : 0;
+  }, []);
+  const updateValue = (0, _react.useCallback)(newValue => {
+    if (!inputRef.current) return;
+    // min/max 범위 체크
+    let clampedValue = newValue;
+    if (minValue !== undefined && clampedValue < minValue) {
+      clampedValue = minValue;
+    }
+    if (maxValue !== undefined && clampedValue > maxValue) {
+      clampedValue = maxValue;
+    }
+    inputRef.current.value = clampedValue.toString();
+    // onChange 이벤트 트리거
+    const event = new Event('input', {
+      bubbles: true
+    });
+    inputRef.current.dispatchEvent(event);
+  }, [minValue, maxValue]);
+  const handleIncrement = (0, _react.useCallback)(() => {
+    const currentValue = getCurrentValue();
+    const newValue = currentValue + step;
+    if (maxValue === undefined || newValue <= maxValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, maxValue, updateValue]);
+  const handleDecrement = (0, _react.useCallback)(() => {
+    const currentValue = getCurrentValue();
+    const newValue = currentValue - step;
+    if (minValue === undefined || newValue >= minValue) {
+      updateValue(newValue);
+    }
+  }, [getCurrentValue, step, minValue, updateValue]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    if (disabled) return;
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      handleIncrement();
+    } else if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      handleDecrement();
+    }
+    // 기존 onKeyDown prop이 있으면 호출
+    props.onKeyDown?.(event);
+  }, [disabled, handleIncrement, handleDecrement, props]);
+  const renderStepperButtonGroup = position => {
+    if (position !== stepperPosition) {
+      return null;
+    }
+    return (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-input__stepper-button-group",
+      children: [(0, _jsxRuntime.jsx)(_button.ButtonStepper, {
+        size: size,
+        direction: "up",
+        onClick: handleIncrement,
+        disabled: disabled
+      }), (0, _jsxRuntime.jsx)(_button.ButtonStepper, {
+        size: size,
+        direction: "down",
+        onClick: handleDecrement,
+        disabled: disabled
+      })]
+    });
+  };
+  return (0, _jsxRuntime.jsx)(_InputBase.InputBase, {
+    type: "number",
+    leadingElement: renderStepperButtonGroup('leading') ? {
+      type: 'custom',
+      children: renderStepperButtonGroup('leading'),
+      placement: 'inside'
+    } : props.leadingElement,
+    trailingElement: renderStepperButtonGroup('trailing') ? {
+      type: 'custom',
+      children: renderStepperButtonGroup('trailing'),
+      placement: 'inside'
+    } : props.trailingElement,
+    ref: mergedRef,
+    size: size,
+    disabled: disabled,
+    min: minValue,
+    max: maxValue,
+    step: step,
+    onKeyDown: handleKeyDown,
+    className: "ncua-input__number",
+    ...props
+  });
+});

package/dist/cjs/src/components/forms-and-input/range-date-picker-with-buttons/RangeDatePickerWithButtons.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RangeDatePickerWithButtons = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _datePicker = require("../../../constant/date-picker");
+var _datePicker2 = require("../../../utils/date-picker");
+var _buttonGroup = require("../../action/button-group");
+var _RangeDatePicker = require("../range-date-picker/RangeDatePicker");
+const RangeDatePickerWithButtons = _ref => {
+  let {
+    useYesterdayAsEndDate = false,
+    size = 'xs',
+    currentButtonId,
+    setCurrentButtonId,
+    startDateOptions,
+    endDateOptions,
+    validationOption,
+    periodKeys,
+    periodItems,
+    onDateValidation
+  } = _ref;
+  const items = periodItems ?? _datePicker.PERIOD_ITEM;
+  const setCalculatedDate = () => {
+    const currentPeriodItem = items[currentButtonId];
+    if (!currentPeriodItem) {
+      return;
+    }
+    if (currentButtonId === 'ENTIRE') {
+      startDateOptions.onChangeDate('');
+      endDateOptions.onChangeDate('');
+      return;
+    }
+    const startDate = (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
+      period: currentPeriodItem.period,
+      unit: currentPeriodItem.unit
+    }));
+    startDateOptions.onChangeDate(startDate);
+    const endDate = useYesterdayAsEndDate ? (0, _datePicker2.getDateFormat)((0, _datePicker2.getSubtractDate)({
+      period: 1,
+      unit: 'days'
+    })) : (0, _datePicker2.getDateFormat)();
+    endDateOptions.onChangeDate(endDate);
+  };
+  const handleOnChangeDate = (date, type) => {
+    type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+    currentButtonId && setCurrentButtonId('NONE');
+  };
+  (0, _react.useEffect)(() => {
+    if (currentButtonId !== 'NONE') {
+      setCalculatedDate();
+    }
+  }, [currentButtonId]);
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "ncua-range-date-picker-with-buttons",
+    children: [(0, _jsxRuntime.jsx)(_buttonGroup.ButtonGroup, {
+      size: size,
+      children: periodKeys.map(key => (0, _jsxRuntime.jsx)(_buttonGroup.ButtonGroup.Item, {
+        isCurrent: currentButtonId === key,
+        label: items[key].text,
+        onClick: () => setCurrentButtonId(key)
+      }, key))
+    }), (0, _jsxRuntime.jsx)(_RangeDatePicker.RangeDatePicker, {
+      startDateOptions: {
+        ...startDateOptions,
+        onChangeDate: date => handleOnChangeDate(date, 'START')
+      },
+      endDateOptions: {
+        ...endDateOptions,
+        onChangeDate: date => handleOnChangeDate(date, 'END')
+      },
+      validationOption: validationOption,
+      onDateValidation: onDateValidation,
+      size: size
+    })]
+  });
+};
+exports.RangeDatePickerWithButtons = RangeDatePickerWithButtons;

package/dist/cjs/src/components/forms-and-input/select/Select.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _HintText = require("../../shared/hintText/HintText");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    placeholder,
+    disabledPlaceholder = false,
+    id,
+    className,
+    hintText,
+    children,
+    size = 'xs',
+    type = 'default',
+    destructive = false,
+    value,
+    optionItems,
+    register,
+    disabled = false,
+    ...props
+  } = _ref;
+  return (0, _jsxRuntime.jsxs)("span", {
+    className: (0, _classnames.default)('ncua-select', {
+      destructive: destructive,
+      'ncua-select--simple': type === 'simple'
+    }, className, `ncua-select--${size}`),
+    children: [(0, _jsxRuntime.jsx)("span", {
+      className: "ncua-select__content",
+      children: (0, _jsxRuntime.jsxs)("select", {
+        value: value,
+        ref: ref,
+        id: id,
+        className: (0, _classnames.default)('ncua-select__tag', className),
+        disabled: disabled,
+        ...register,
+        ...props,
+        children: [placeholder && (0, _jsxRuntime.jsx)("option", {
+          value: "",
+          disabled: disabledPlaceholder,
+          children: placeholder
+        }), optionItems?.map(item => (0, _jsxRuntime.jsx)("option", {
+          value: item.id,
+          children: item.label
+        }, item.id)), children]
+      })
+    }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
+      destructive: destructive,
+      className: "ncua-hint-text",
+      children: hintText
+    })]
+  });
+});

package/dist/cjs/src/components/forms-and-input/select-box/SelectBox.js

@@ -0,0 +1,260 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectBox = exports.DEFAULT_MAX_HEIGHT = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _color = require("../../../../constant/color");
+var _dropdown = require("../../../hooks/dropdown");
+var _multiSelect = require("../../../utils/dropdown/multiSelect");
+var _tag = require("../../feedback-and-status/tag");
+var _selectDropdown = require("../../select-dropdown");
+var _HintText = require("../../shared/hintText/HintText");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ICON_SIZE_XS = 14;
+const ICON_SIZE_SM = 16;
+const DEFAULT_MAX_HEIGHT = exports.DEFAULT_MAX_HEIGHT = 275;
+function computeNewValue(option, value, multiple) {
+  if (multiple) {
+    const currentValues = Array.isArray(value) ? value : [];
+    if (currentValues.includes(option.id)) {
+      return currentValues.filter(v => v !== option.id);
+    }
+    return [...currentValues, option.id];
+  }
+  return option.id;
+}
+function notifyRegister(register, newValue, multiple) {
+  if (!register?.onChange) return;
+  register.onChange({
+    target: {
+      value: multiple ? JSON.stringify(newValue) : newValue,
+      name: register.name
+    }
+  });
+}
+function DisplayValue(_ref) {
+  let {
+    displayValue
+  } = _ref;
+  if (typeof displayValue === 'string') {
+    return (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-selectbox__value-text",
+      children: displayValue
+    });
+  }
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: "ncua-selectbox__value-container",
+    children: [displayValue.icon && (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-selectbox__value-icon",
+      children: (0, _jsxRuntime.jsx)(displayValue.icon, {
+        width: 16,
+        height: 16
+      })
+    }), (0, _jsxRuntime.jsx)("span", {
+      className: "ncua-selectbox__value-text",
+      children: displayValue.label
+    })]
+  });
+}
+const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    placeholder = '선택하세요',
+    disabledPlaceholder = false,
+    hintText,
+    size = 'xs',
+    type = 'default',
+    autoWidth = true,
+    destructive = false,
+    value,
+    optionItems = [],
+    disabled = false,
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    multiple = false,
+    align = 'left',
+    id,
+    className,
+    children,
+    register,
+    onChange,
+    onEdit,
+    ...props
+  } = _ref2;
+  const internalRef = (0, _react.useRef)(null);
+  const dropdownRef = (0, _react.useRef)(null);
+  const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
+  const selectedOption = (0, _react.useMemo)(() => {
+    if (multiple) return null;
+    return optionItems.find(option => option.id === value);
+  }, [optionItems, value, multiple]);
+  const displayValue = (0, _react.useMemo)(() => {
+    if (multiple) {
+      return placeholder;
+    }
+    return selectedOption ? selectedOption : placeholder;
+  }, [multiple, selectedOption, placeholder]);
+  const handleOptionSelect = option => {
+    if (disabled) return;
+    const newValue = computeNewValue(option, value, multiple);
+    onChange?.(newValue);
+    notifyRegister(register, newValue, multiple);
+  };
+  const {
+    isOpen,
+    direction: dropdownDirection,
+    focusedIndex,
+    toggleDropdown,
+    closeDropdown,
+    handleKeyDown,
+    handleOptionSelect: handleDropdownSelect,
+    handleMouseMove,
+    isKeyboardNavigation,
+    setFocusedIndex
+  } = (0, _dropdown.useDropdown)({
+    triggerRef: internalRef,
+    dropdownRef,
+    maxHeight,
+    itemCount: optionItems.length,
+    optionItems,
+    disabled,
+    multiple,
+    onSelect: handleOptionSelect
+  });
+  const activeDescendantId = (0, _react.useMemo)(() => {
+    if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
+      return undefined;
+    }
+    const focusedOption = optionItems[focusedIndex];
+    return `selectbox-options-${id || 'default'}-${focusedOption.id}`;
+  }, [isOpen, focusedIndex, optionItems, id]);
+  const handleOptionHover = (0, _react.useCallback)(index => {
+    handleMouseMove();
+    setFocusedIndex(index);
+  }, [handleMouseMove, setFocusedIndex]);
+  // Multiple select 관련 로직
+  const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+  const {
+    buttonText: selectAllButtonText,
+    toggleSelectAll,
+    getSelectedTagsData,
+    removeTag
+  } = (0, _multiSelect.useMultiSelect)(currentSelectedValues, optionItems);
+  const handleSelectAll = () => {
+    if (!multiple || !onChange) return;
+    const newSelectedValues = toggleSelectAll();
+    onChange(newSelectedValues);
+  };
+  const handleEdit = () => {
+    onEdit?.();
+  };
+  const handleComplete = () => {
+    if (multiple) {
+      const tags = getSelectedTagsData();
+      setSelectedTags(tags);
+    }
+    closeDropdown();
+  };
+  const handleRemoveTag = tagId => {
+    if (!onChange) return;
+    if (multiple) {
+      const newSelectedValues = removeTag(tagId);
+      onChange(newSelectedValues);
+      setSelectedTags(prev => prev.filter(tag => tag.id !== tagId));
+    }
+  };
+  (0, _dropdown.useScrollLock)(isOpen, dropdownRef);
+  (0, _react.useLayoutEffect)(() => {
+    if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
+      const dropdownWidth = dropdownRef.current.offsetWidth;
+      internalRef.current.style.width = `${dropdownWidth}px`;
+    }
+  }, [autoWidth, isOpen, optionItems]);
+  (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)("div", {
+      ref: internalRef,
+      className: (0, _classnames.default)('ncua-selectbox', `ncua-selectbox--${size}`, {
+        'ncua-selectbox--open': isOpen,
+        'ncua-selectbox--disabled': disabled,
+        'ncua-selectbox--simple': type === 'simple',
+        'ncua-selectbox--multiple': multiple,
+        destructive: destructive
+      }, className),
+      ...props,
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)('ncua-selectbox__content'),
+        onClick: toggleDropdown,
+        onKeyDown: handleKeyDown,
+        tabIndex: disabled ? -1 : 0,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": `selectbox-options-${id || 'default'}`,
+        "aria-disabled": disabled,
+        "aria-label": selectedOption ? selectedOption.label : placeholder,
+        "aria-activedescendant": activeDescendantId,
+        children: [(0, _jsxRuntime.jsxs)("div", {
+          className: "ncua-selectbox__content-inner",
+          children: [(0, _jsxRuntime.jsx)("div", {
+            className: "ncua-selectbox__value",
+            children: (0, _jsxRuntime.jsx)(DisplayValue, {
+              displayValue: displayValue
+            })
+          }), (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronDown, {
+            width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
+            height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
+            color: disabled ? _color.COLOR.gray300 : _color.COLOR.gray500,
+            className: (0, _classnames.default)('ncua-selectbox__arrow', {
+              'ncua-selectbox__arrow--up': isOpen
+            })
+          })]
+        }), (0, _jsxRuntime.jsx)(_selectDropdown.SelectDropdown, {
+          ref: dropdownRef,
+          isOpen: isOpen,
+          direction: dropdownDirection,
+          size: size,
+          options: optionItems,
+          value: value,
+          focusedIndex: focusedIndex,
+          maxHeight: maxHeight,
+          listboxId: `selectbox-options-${id || 'default'}`,
+          multiple: multiple,
+          showFooterButtons: multiple,
+          selectAllButtonText: selectAllButtonText,
+          componentType: "selectbox",
+          isKeyboardNavigation: isKeyboardNavigation,
+          activeDescendantId: activeDescendantId,
+          align: align,
+          onOptionSelect: handleDropdownSelect,
+          onMouseMove: handleMouseMove,
+          onOptionHover: handleOptionHover,
+          onSelectAll: handleSelectAll,
+          onEdit: handleEdit,
+          onComplete: handleComplete,
+          children: children
+        })]
+      }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
+        destructive: destructive,
+        className: "ncua-hint-text",
+        children: hintText
+      }), register && (0, _jsxRuntime.jsx)("input", {
+        type: "hidden",
+        ...register,
+        value: multiple ? JSON.stringify(value || []) : String(value || '')
+      })]
+    }), selectedTags.length > 0 && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-selectbox__tags",
+      children: selectedTags.map(tag => (0, _jsxRuntime.jsx)(_tag.Tag, {
+        text: tag.label,
+        size: "sm",
+        close: true,
+        onButtonClick: () => handleRemoveTag(tag.id)
+      }, tag.id))
+    })]
+  });
+});
+SelectBox.displayName = 'SelectBox';

package/dist/cjs/src/components/forms-and-input/slider/Slider.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Slider = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _slider = require("../../../../assets/scripts/slider");
+const Slider = _ref => {
+  let {
+    min = 0,
+    max = 100,
+    step = 1,
+    value = 0,
+    onChange,
+    labelPosition,
+    disabled = false,
+    className
+  } = _ref;
+  const containerRef = (0, _react.useRef)(null);
+  const sliderInstanceRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!containerRef.current) return;
+    sliderInstanceRef.current = new _slider.Slider(containerRef.current, {
+      min,
+      max,
+      step,
+      value,
+      onChange,
+      labelPosition,
+      disabled
+    });
+    return () => {
+      if (sliderInstanceRef.current) {
+        sliderInstanceRef.current.destroy();
+        sliderInstanceRef.current = null;
+      }
+    };
+  }, [typeof value, onChange, min, max, step, labelPosition]);
+  (0, _react.useEffect)(() => {
+    if (sliderInstanceRef.current) {
+      sliderInstanceRef.current.setValue(value);
+    }
+  }, [sliderInstanceRef, value]);
+  (0, _react.useEffect)(() => {
+    if (sliderInstanceRef.current) {
+      if (disabled) {
+        sliderInstanceRef.current.disable();
+      } else {
+        sliderInstanceRef.current.enable();
+      }
+    }
+  }, [disabled]);
+  return (0, _jsxRuntime.jsx)("div", {
+    ref: containerRef,
+    className: `ncua-slider ${className || ''}`
+  });
+};
+exports.Slider = Slider;
+var _default = exports.default = Slider;

package/dist/cjs/src/components/forms-and-input/switch/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Switch = require("./Switch");
+Object.keys(_Switch).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Switch[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Switch[key];
+    }
+  });
+});

package/dist/cjs/src/components/forms-and-input/textarea/Textarea.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Textarea = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _HintText = require("../../shared/hintText/HintText");
+var _Label = require("../../shared/label/Label");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    className,
+    size = 'xs',
+    label,
+    required,
+    disabled,
+    hintText,
+    characterCount,
+    destructive,
+    ...props
+  } = _ref;
+  const textareaRef = (0, _react.useRef)(null);
+  const [textCount, setTextCount] = (0, _react.useState)(0);
+  const shouldShowHintArea = hintText || characterCount;
+  (0, _react.useEffect)(() => {
+    if (textareaRef.current && characterCount) {
+      setTextCount(textareaRef.current.value.length);
+      const handleInput = () => {
+        setTextCount(textareaRef.current?.value.length ?? 0);
+      };
+      textareaRef.current.addEventListener('input', handleInput);
+      return () => {
+        textareaRef.current?.removeEventListener('input', handleInput);
+      };
+    }
+  }, [characterCount]);
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)('ncua-input', 'ncua-input--textarea', `ncua-input--textarea--${size}`, {
+      destructive: destructive,
+      'is-disabled': disabled
+    }, className),
+    children: [label && (0, _jsxRuntime.jsx)(_Label.Label, {
+      htmlFor: props.id,
+      isRequired: required,
+      children: label
+    }), (0, _jsxRuntime.jsx)("textarea", {
+      ref: node => {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        textareaRef.current = node;
+      },
+      className: "ncua-input__textarea",
+      disabled: disabled,
+      ...props
+    }), shouldShowHintArea && (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-input__text-count-wrap",
+      children: [hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
+        as: "div",
+        destructive: destructive,
+        children: hintText
+      }), characterCount && (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-input__text-count",
+        children: (0, _jsxRuntime.jsxs)("span", {
+          className: "ncua-input__text-count-text",
+          children: [(0, _jsxRuntime.jsx)("span", {
+            className: "ncua-input__text-count-text-count",
+            children: textCount
+          }), "/", props.maxLength ?? 0]
+        })
+      })]
+    })]
+  });
+});