@choice-ui/react 1.4.3 → 1.4.6

package/dist/components/calendar/src/utils/quarter.d.ts

@@ -1,32 +1,32 @@
 import { Locale, Quarter as Quarters } from 'date-fns';
 import { Quarter } from '../types';
 export declare const quarterUtils: {
-    /** 安全地从各种输入中提取年份数字 */
+    /** Safely extract year number from various inputs */
     extractYear(input: Date | number | undefined): number | undefined;
-    /** 获取当前年份 */
+    /** Get current year */
     getCurrentYear(): number;
-    /** 获取当前季度数字 (1-4) */
+    /** Get current quarter number (1-4) */
     getCurrentQuarterNumber(): Quarters;
-    /** 验证年份是否在有效范围内 */
+    /** Validate if year is in valid range */
     isYearInRange(year: number, minYear?: number, maxYear?: number): boolean;
-    /** 创建季度的开始日期 */
+    /** Create quarter start date */
     createQuarterStartDate(quarter: number, year: number): Date;
-    /** 创建季度的结束日期 */
+    /** Create quarter end date */
     createQuarterEndDate(quarter: number, year: number): Date;
 };
-/** 获取季度的月份名称 */
+/** Get quarter month names */
 export declare function getQuarterMonths(quarter: number, locale?: Locale | string): string[];
-/** 创建季度对象 */
+/** Create quarter object */
 export declare function createQuarter(quarter: Quarters, year: number, locale?: Locale | string): Quarter;
-/** 获取当前季度 */
+/** Get current quarter */
 export declare function getCurrentQuarter(year?: number, locale?: Locale | string): Quarter;
-/** 获取年份的所有季度 */
+/** Get all quarters of a year */
 export declare function getYearQuarters(year: number, locale?: Locale | string): Quarter[];
-/** 检查两个季度是否相等 */
+/** Check if two quarters are equal */
 export declare function isQuarterEqual(quarter1: Quarter, quarter2: Quarter): boolean;
-/** 格式化季度显示 */
+/** Format quarter display */
 export declare function formatQuarter(quarter: Quarter): string;
-/** 获取季度的日期范围 */
+/** Get quarter date range */
 export declare function getQuarterDateRange(quarter: Quarter): {
     end: Date;
     start: Date;

package/dist/components/calendar/src/utils/quarter.js

@@ -2,7 +2,7 @@ import { isDate, isValid, format } from "date-fns";
 import { zhCN } from "date-fns/locale";
 import { resolveLocale, isChineseLocale } from "./locale.js";
 const quarterUtils = {
-  /** 安全地从各种输入中提取年份数字 */
+  /** Safely extract year number from various inputs */
   extractYear(input) {
     if (isDate(input) && isValid(input)) {
       return input.getFullYear();
@@ -12,27 +12,27 @@ const quarterUtils = {
     }
     return void 0;
   },
-  /** 获取当前年份 */
+  /** Get current year */
   getCurrentYear() {
     return (/* @__PURE__ */ new Date()).getFullYear();
   },
-  /** 获取当前季度数字 (1-4) */
+  /** Get current quarter number (1-4) */
   getCurrentQuarterNumber() {
     const currentMonth = (/* @__PURE__ */ new Date()).getMonth() + 1;
     return Math.ceil(currentMonth / 3);
   },
-  /** 验证年份是否在有效范围内 */
+  /** Validate if year is in valid range */
   isYearInRange(year, minYear, maxYear) {
     const minValid = minYear === void 0 || year >= minYear;
     const maxValid = maxYear === void 0 || year <= maxYear;
     return minValid && maxValid;
   },
-  /** 创建季度的开始日期 */
+  /** Create quarter start date */
   createQuarterStartDate(quarter, year) {
     const startMonth = (quarter - 1) * 3;
     return new Date(year, startMonth, 1);
   },
-  /** 创建季度的结束日期 */
+  /** Create quarter end date */
   createQuarterEndDate(quarter, year) {
     const endMonth = (quarter - 1) * 3 + 2;
     return new Date(year, endMonth + 1, 0);

package/dist/components/calendar/src/utils/time.d.ts

@@ -1,21 +1,21 @@
 import { Locale } from 'date-fns';
 import { Time, TimeDataFormat, TimeInputValue, TimeParserOptions } from '../types';
 /**
- * 将 Date 对象转换为时间字符串 (HH:mm)
+ * Convert Date object to time string (HH:mm)
  * @param date - Date 对象
- * @returns 时间字符串，格式为 "HH:mm"，如果 date 为 null 则返回 null
+ * @returns Time string, format is "HH:mm", if date is null then return null
  */
 export declare function dateToTimeString(date: Date | null): string | null;
 /**
- * 将时间字符串转换为 Date 对象（今天的日期 + 指定时间）
- * @param timeStr - 时间字符串，格式为 "HH:mm"
- * @returns Date 对象，包含今天的日期和指定的时间
+ * Convert time string to Date object (today's date + specified time)
+ * @param timeStr - Time string, format is "HH:mm"
+ * @returns Date object, contains today's date and specified time
  */
 export declare function timeStringToDate(timeStr: string): Date;
 /**
- * 将任意 Date 值标准化为时间字符串格式
- * @param value - Date 对象或 null
- * @returns 标准化的时间字符串 (HH:mm) 或 null
+ * Normalize any Date value to time string format
+ * @param value - Date object or null
+ * @returns Normalized time string (HH:mm) or null
  */
 export declare function normalizeTimeValue(value: Date | null | undefined): string | null;
 export declare function smartParseTimeValue(input: string, options: TimeParserOptions): TimeInputValue;

package/dist/components/calendar/src/utils/year.d.ts

@@ -1,9 +1,9 @@
 export declare const yearUtils: {
     extractYear(input: Date | number | undefined): number | undefined;
-    /** 创建年份的开始日期 */
+    /** Create year start date */
     createYearDate(year: number): Date;
-    /** 获取当前年份 */
+    /** Get current year */
     getCurrentYear(): number;
-    /** 验证年份是否在有效范围内 */
+    /** Validate if year is in valid range */
     isYearInRange(year: number, minYear?: number, maxYear?: number): boolean;
 };

package/dist/components/calendar/src/utils/year.js

@@ -9,15 +9,15 @@ const yearUtils = {
     }
     return void 0;
   },
-  /** 创建年份的开始日期 */
+  /** Create year start date */
   createYearDate(year) {
     return new Date(year, 0, 1);
   },
-  /** 获取当前年份 */
+  /** Get current year */
   getCurrentYear() {
     return (/* @__PURE__ */ new Date()).getFullYear();
   },
-  /** 验证年份是否在有效范围内 */
+  /** Validate if year is in valid range */
   isYearInRange(year, minYear, maxYear) {
     const minValid = minYear === void 0 || year >= minYear;
     const maxValid = maxYear === void 0 || year <= maxYear;

package/dist/components/checkbox/dist/index.d.ts

@@ -25,15 +25,4 @@ interface CheckboxType {
 }
 declare const Checkbox: CheckboxType;
 
-interface CheckboxContextValue {
-    descriptionId?: string;
-    disabled?: boolean;
-    id: string;
-    mixed?: boolean;
-    onChange: (value: boolean) => void;
-    value?: boolean;
-    variant?: "default" | "accent" | "outline";
-}
-declare function useCheckboxContext(): CheckboxContextValue;
-
-export { Checkbox, type CheckboxContextValue, type CheckboxLabelProps, type CheckboxProps, useCheckboxContext };
+export { Checkbox, type CheckboxProps };

package/dist/components/checkbox/dist/index.js

@@ -141,14 +141,14 @@ var CheckboxLabel = memo(
   forwardRef(function CheckboxLabel2(props, ref) {
     const { children, className, ...rest } = props;
     const { id, descriptionId, disabled } = useCheckboxContext();
-    const styles = checkboxTv({ disabled });
+    const tv = checkboxTv({ disabled });
     return /* @__PURE__ */ jsx(
       "label",
       {
         ref,
         id: descriptionId,
         htmlFor: id,
-        className: tcx(styles.label(), className),
+        className: tcx(tv.label(), className),
         ...rest,
         children
       }
@@ -175,11 +175,12 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
   } = props;
   const internalId = useId();
   const descriptionId = useId();
-  const styles = checkboxTv({
+  const tv = checkboxTv({
     type: "checkbox",
     variant,
     disabled,
-    checked: value,
+    checked: value || mixed,
+    // mixed state should have same style as checked
     focused
   });
   const handleChange = useEventCallback((e) => {
@@ -212,13 +213,13 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
         variant,
         mixed
       },
-      children: /* @__PURE__ */ jsxs("div", { className: tcx(styles.root(), className), children: [
+      children: /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
         /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
               ref,
-              className: styles.input(),
+              className: tv.input(),
               type: "checkbox",
               id: id || internalId,
               checked: value,
@@ -233,7 +234,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: styles.box(), children: value && (mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : /* @__PURE__ */ jsx(Check, {})) })
+          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
         ] }),
         renderChildren()
       ] })
@@ -245,6 +246,5 @@ var Checkbox2 = MemoizedCheckbox;
 Checkbox2.Label = CheckboxLabel;
 Checkbox2.displayName = "Checkbox";
 export {
-  Checkbox2 as Checkbox,
-  useCheckboxContext
+  Checkbox2 as Checkbox
 };

package/dist/components/checkbox/src/checkbox-label.js

@@ -7,14 +7,14 @@ const CheckboxLabel = memo(
   forwardRef(function CheckboxLabel2(props, ref) {
     const { children, className, ...rest } = props;
     const { id, descriptionId, disabled } = useCheckboxContext();
-    const styles = checkboxTv({ disabled });
+    const tv = checkboxTv({ disabled });
     return /* @__PURE__ */ jsx(
       "label",
       {
         ref,
         id: descriptionId,
         htmlFor: id,
-        className: tcx(styles.label(), className),
+        className: tcx(tv.label(), className),
         ...rest,
         children
       }

package/dist/components/checkbox/src/checkbox.js

@@ -25,11 +25,12 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
   } = props;
   const internalId = useId();
   const descriptionId = useId();
-  const styles = checkboxTv({
+  const tv = checkboxTv({
     type: "checkbox",
     variant,
     disabled,
-    checked: value,
+    checked: value || mixed,
+    // mixed state should have same style as checked
     focused
   });
   const handleChange = useEventCallback((e) => {
@@ -62,13 +63,13 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
         variant,
         mixed
       },
-      children: /* @__PURE__ */ jsxs("div", { className: tcx(styles.root(), className), children: [
+      children: /* @__PURE__ */ jsxs("div", { className: tcx(tv.root(), className), children: [
         /* @__PURE__ */ jsxs("div", { className: "pointer-events-none relative", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
               ref,
-              className: styles.input(),
+              className: tv.input(),
               type: "checkbox",
               id: id || internalId,
               checked: value,
@@ -83,7 +84,7 @@ const CheckboxBase = forwardRef(function Checkbox2(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: styles.box(), children: value && (mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : /* @__PURE__ */ jsx(Check, {})) })
+          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
         ] }),
         renderChildren()
       ] })

package/dist/components/checkbox/src/context.js

@@ -1,4 +1,4 @@
-import { useContext, createContext } from "react";
+import { createContext, useContext } from "react";
 const CheckboxContext = createContext(null);
 function useCheckboxContext() {
   const context = useContext(CheckboxContext);

package/dist/components/checkbox/src/index.d.ts

@@ -1,5 +1,2 @@
 export { Checkbox } from './checkbox';
 export type { CheckboxProps } from './checkbox';
-export type { CheckboxLabelProps } from './checkbox-label';
-export { useCheckboxContext } from './context';
-export type { CheckboxContextValue } from './context';

package/dist/components/chip/dist/index.js

@@ -189,7 +189,7 @@ var Chip = memo(
       },
       ...rest
     } = props;
-    const style = chipTv({
+    const tv = chipTv({
       size,
       variant,
       prefix: !!prefixElement,
@@ -203,19 +203,19 @@ var Chip = memo(
       {
         ...rest,
         ref,
-        className: tcx(style.root(), classNames == null ? void 0 : classNames.root, className),
+        className: tcx(tv.root(), classNames == null ? void 0 : classNames.root, className),
         onClick: (e) => {
           e.stopPropagation();
           onClick == null ? void 0 : onClick(e);
         },
         children: [
-          prefixElement && /* @__PURE__ */ jsx("span", { className: tcx(style.prefix(), classNames == null ? void 0 : classNames.prefix), children: prefixElement }),
-          /* @__PURE__ */ jsx("span", { className: tcx(style.text(), classNames == null ? void 0 : classNames.text), children }),
-          suffixElement && /* @__PURE__ */ jsx("span", { className: tcx(style.suffix(), classNames == null ? void 0 : classNames.suffix), children: suffixElement }),
+          prefixElement && /* @__PURE__ */ jsx("span", { className: tcx(tv.prefix(), classNames == null ? void 0 : classNames.prefix), children: prefixElement }),
+          /* @__PURE__ */ jsx("span", { className: tcx(tv.text(), classNames == null ? void 0 : classNames.text), children }),
+          suffixElement && /* @__PURE__ */ jsx("span", { className: tcx(tv.suffix(), classNames == null ? void 0 : classNames.suffix), children: suffixElement }),
           !disabled && onRemove && /* @__PURE__ */ jsx(
             IconButton,
             {
-              className: tcx(style.closeButton(), classNames == null ? void 0 : classNames.closeButton),
+              className: tcx(tv.closeButton(), classNames == null ? void 0 : classNames.closeButton),
               "aria-label": i18n.remove + (typeof children === "string" ? children : i18n.chip),
               disabled,
               size: "reset",

package/dist/components/chip/src/chip.js

@@ -25,7 +25,7 @@ const Chip = memo(
       },
       ...rest
     } = props;
-    const style = chipTv({
+    const tv = chipTv({
       size,
       variant,
       prefix: !!prefixElement,
@@ -39,19 +39,19 @@ const Chip = memo(
       {
         ...rest,
         ref,
-        className: tcx(style.root(), classNames == null ? void 0 : classNames.root, className),
+        className: tcx(tv.root(), classNames == null ? void 0 : classNames.root, className),
         onClick: (e) => {
           e.stopPropagation();
           onClick == null ? void 0 : onClick(e);
         },
         children: [
-          prefixElement && /* @__PURE__ */ jsx("span", { className: tcx(style.prefix(), classNames == null ? void 0 : classNames.prefix), children: prefixElement }),
-          /* @__PURE__ */ jsx("span", { className: tcx(style.text(), classNames == null ? void 0 : classNames.text), children }),
-          suffixElement && /* @__PURE__ */ jsx("span", { className: tcx(style.suffix(), classNames == null ? void 0 : classNames.suffix), children: suffixElement }),
+          prefixElement && /* @__PURE__ */ jsx("span", { className: tcx(tv.prefix(), classNames == null ? void 0 : classNames.prefix), children: prefixElement }),
+          /* @__PURE__ */ jsx("span", { className: tcx(tv.text(), classNames == null ? void 0 : classNames.text), children }),
+          suffixElement && /* @__PURE__ */ jsx("span", { className: tcx(tv.suffix(), classNames == null ? void 0 : classNames.suffix), children: suffixElement }),
           !disabled && onRemove && /* @__PURE__ */ jsx(
             IconButton,
             {
-              className: tcx(style.closeButton(), classNames == null ? void 0 : classNames.closeButton),
+              className: tcx(tv.closeButton(), classNames == null ? void 0 : classNames.closeButton),
               "aria-label": i18n.remove + (typeof children === "string" ? children : i18n.chip),
               disabled,
               size: "reset",

package/dist/components/chip/src/index.d.ts

@@ -1 +1,2 @@
-export * from './chip';
+export { Chip } from './chip';
+export type { ChipProps } from './chip';

package/dist/components/chips-input/dist/index.js

@@ -0,0 +1,270 @@
+import { Chip } from "../../chip/dist/index.js";
+import { Slot } from "../../slot/dist/index.js";
+import { useControllableValue } from "ahooks";
+import { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { useEventCallback } from "usehooks-ts";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
+import { mergeRefs } from "../../../shared/utils/merge-refs/merge-refs.js";
+var chipsInputTv = tcv({
+  slots: {
+    root: [
+      "flex max-w-full min-w-0 flex-wrap",
+      "bg-secondary-background rounded-md",
+      "border border-solid border-transparent"
+    ],
+    input: [
+      "max-w-full flex-1",
+      "cursor-default appearance-none",
+      "placeholder:text-secondary-foreground"
+    ],
+    nesting: ["flex flex-none items-center gap-2 px-1"],
+    chip: "shadow-xxs border-none",
+    closeButton: "",
+    text: ""
+  },
+  variants: {
+    size: {
+      default: {
+        root: "min-h-4 gap-1 p-1",
+        closeButton: "h-4 w-4"
+      },
+      large: {
+        root: "min-h-6",
+        closeButton: "h-6 w-6"
+      }
+    },
+    disabled: {
+      true: {
+        root: "text-disabled-foreground border-default-boundary bg-transparent",
+        input: "text-disabled-foreground"
+      },
+      false: {
+        root: "focus-within:border-selected-boundary hover:not-focus-within:border-default-boundary"
+      }
+    },
+    hasValue: {
+      true: {},
+      false: {
+        input: "pl-1"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    disabled: false,
+    hasValue: false
+  }
+});
+tcv({
+  slots: {
+    root: "max-w-full pr-0",
+    closeButton: "",
+    text: "max-w-full truncate"
+  }
+});
+var ChipsInput = forwardRef((props, ref) => {
+  const {
+    id,
+    className,
+    value: valueProp,
+    onChange,
+    onAdd,
+    onRemove,
+    placeholder,
+    disabled,
+    readOnly = false,
+    size,
+    onKeyDown,
+    onClick,
+    children,
+    allowDuplicates = false,
+    renderChip,
+    ...rest
+  } = props;
+  const [chips, setChips] = useControllableValue(props, {
+    defaultValue: [],
+    valuePropName: "value",
+    trigger: "onChange"
+  });
+  const [inputValue, setInputValue] = useState("");
+  const [selectedChipIndex, setSelectedChipIndex] = useState(null);
+  const [isComposing, setIsComposing] = useState(false);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const tv = chipsInputTv({ size, disabled, hasValue: chips.length > 0 });
+  const addChip = useCallback(
+    (chipToAdd) => {
+      if (readOnly) return;
+      const trimmedChip = chipToAdd.trim();
+      if (trimmedChip && (allowDuplicates || !chips.includes(trimmedChip))) {
+        const newChips = [...chips, trimmedChip];
+        setChips(newChips);
+        onAdd == null ? void 0 : onAdd(trimmedChip);
+        setInputValue("");
+      }
+    },
+    [chips, setChips, onAdd, allowDuplicates, readOnly]
+  );
+  const removeChip = useCallback(
+    (indexToRemove) => {
+      if (readOnly) return;
+      const chipToRemove = chips[indexToRemove];
+      const newChips = chips.filter((_chip, index) => index !== indexToRemove);
+      setChips(newChips);
+      if (chipToRemove !== void 0) {
+        onRemove == null ? void 0 : onRemove(chipToRemove);
+      }
+    },
+    [chips, setChips, onRemove, readOnly]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      var _a;
+      onKeyDown == null ? void 0 : onKeyDown(e);
+      if (readOnly) return;
+      if (selectedChipIndex !== null && (e.key === "Backspace" || e.key === "Delete")) {
+        e.preventDefault();
+        removeChip(selectedChipIndex);
+        setSelectedChipIndex(null);
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+        return;
+      }
+      if (e.target === inputRef.current) {
+        const currentInput = e.target;
+        if (e.key === "Enter" && !isComposing && currentInput.value) {
+          e.preventDefault();
+          addChip(currentInput.value);
+          setInputValue("");
+        } else if (e.key === "Backspace" && !currentInput.value && chips.length > 0) {
+          if (selectedChipIndex === null) {
+            removeChip(chips.length - 1);
+          }
+        }
+      }
+    },
+    [onKeyDown, selectedChipIndex, chips, removeChip, addChip, isComposing, readOnly]
+  );
+  const handleContainerClick = useEventCallback((e) => {
+    var _a;
+    onClick == null ? void 0 : onClick(e);
+    if (e.target === e.currentTarget) {
+      setSelectedChipIndex(null);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  });
+  const handleInputFocus = useEventCallback((e) => {
+    var _a;
+    setSelectedChipIndex(null);
+    (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+  });
+  const handleInputBlur = useEventCallback((e) => {
+    var _a;
+    if (!readOnly) {
+      const trimmedValue = inputValue.trim();
+      if (trimmedValue) {
+        if (!allowDuplicates && chips.includes(trimmedValue)) {
+          setInputValue("");
+        } else {
+          addChip(inputValue);
+        }
+      }
+    }
+    (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+  });
+  const handleChipClick = useEventCallback((index) => {
+    var _a, _b;
+    if (selectedChipIndex === index) {
+      setSelectedChipIndex(null);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    } else {
+      setSelectedChipIndex(index);
+      (_b = containerRef.current) == null ? void 0 : _b.focus();
+    }
+  });
+  const handleChipRemoveClick = useEventCallback((index) => {
+    if (readOnly) return;
+    removeChip(index);
+  });
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (selectedChipIndex !== null && containerRef.current && !containerRef.current.contains(event.target)) {
+        setSelectedChipIndex(null);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [selectedChipIndex]);
+  const inputWidth = useMemo(() => {
+    return `${Math.max(inputValue.length, (chips.length === 0 ? placeholder == null ? void 0 : placeholder.length : 0) || 1) + 2}ch`;
+  }, [inputValue, chips, placeholder]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: mergeRefs(ref, containerRef),
+      tabIndex: -1,
+      onKeyDown: handleKeyDown,
+      className: tcx(tv.root(), className),
+      onClick: handleContainerClick,
+      "aria-disabled": disabled,
+      ...rest,
+      children: [
+        chips.map((chip, index) => {
+          const isSelected = selectedChipIndex === index;
+          const chipProps = {
+            chip,
+            index,
+            isSelected,
+            disabled,
+            handleChipClick,
+            handleChipRemoveClick
+          };
+          return renderChip ? /* @__PURE__ */ jsx(Slot, { children: renderChip(chipProps) }, `${chip}-${index}`) : /* @__PURE__ */ jsx(
+            Chip,
+            {
+              selected: isSelected,
+              onClick: () => handleChipClick(index),
+              onRemove: readOnly ? void 0 : () => handleChipRemoveClick(index),
+              size: size === "large" ? "medium" : "default",
+              disabled,
+              className: tcx(tv.chip()),
+              children: chip
+            },
+            `${chip}-${index}`
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            ref: inputRef,
+            className: tcx(tv.input()),
+            disabled: disabled || readOnly,
+            onChange: (e) => {
+              if (!readOnly) {
+                setInputValue(e.target.value);
+              }
+            },
+            onCompositionEnd: () => setIsComposing(false),
+            onCompositionStart: () => setIsComposing(true),
+            onFocus: handleInputFocus,
+            onBlur: handleInputBlur,
+            placeholder: chips.length === 0 ? placeholder : "",
+            value: inputValue,
+            readOnly,
+            style: {
+              width: inputWidth
+            }
+          }
+        ),
+        children && /* @__PURE__ */ jsx("div", { className: tcx(tv.nesting()), children })
+      ]
+    }
+  );
+});
+ChipsInput.displayName = "ChipsInput";
+export {
+  ChipsInput
+};

package/dist/components/chips-input/src/index.d.ts

@@ -1 +1,2 @@
-export * from './chips-input';
+export { ChipsInput } from './chips-input';
+export type { ChipsInputProps, RenderChipProps } from './chips-input';