@choice-ui/react 1.5.4 → 1.5.5

package/dist/components/otp-input/dist/index.d.ts

@@ -0,0 +1,30 @@
+import { OTPInput } from 'input-otp';
+import { ComponentProps, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type OTPInputVariant = "default" | "light" | "dark";
+interface OTPInputRootProps extends Omit<ComponentProps<typeof OTPInput>, "disabled" | "containerClassName" | "render"> {
+    variant?: OTPInputVariant;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    inputClassName?: string;
+    children: ReactNode;
+}
+declare function OTPInputRoot({ className, inputClassName, variant, disabled, isInvalid, children, ...props }: OTPInputRootProps): react_jsx_runtime.JSX.Element;
+interface OTPInputGroupProps extends ComponentProps<"div"> {
+}
+declare function OTPInputGroup({ className, ...props }: OTPInputGroupProps): react_jsx_runtime.JSX.Element;
+interface OTPInputSlotProps extends ComponentProps<"div"> {
+    index: number;
+}
+declare function OTPInputSlot({ className, index, ...props }: OTPInputSlotProps): react_jsx_runtime.JSX.Element;
+interface OTPInputSeparatorProps extends ComponentProps<"div"> {
+}
+declare function OTPInputSeparator({ className, children, ...props }: OTPInputSeparatorProps): react_jsx_runtime.JSX.Element;
+declare const OtpInput: typeof OTPInputRoot & {
+    Group: typeof OTPInputGroup;
+    Slot: typeof OTPInputSlot;
+    Separator: typeof OTPInputSeparator;
+};
+
+export { type OTPInputGroupProps, type OTPInputRootProps, type OTPInputSeparatorProps, type OTPInputSlotProps, OtpInput };

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

@@ -0,0 +1,2 @@
+export { OtpInput } from './otp-input';
+export type { OTPInputRootProps, OTPInputGroupProps, OTPInputSlotProps, OTPInputSeparatorProps, } from './otp-input';

package/dist/components/otp-input/src/otp-input.d.ts

@@ -0,0 +1,27 @@
+import { OTPInput } from 'input-otp';
+import { ComponentProps, ReactNode } from 'react';
+type OTPInputVariant = "default" | "light" | "dark";
+export interface OTPInputRootProps extends Omit<ComponentProps<typeof OTPInput>, "disabled" | "containerClassName" | "render"> {
+    variant?: OTPInputVariant;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    inputClassName?: string;
+    children: ReactNode;
+}
+declare function OTPInputRoot({ className, inputClassName, variant, disabled, isInvalid, children, ...props }: OTPInputRootProps): import("react/jsx-runtime").JSX.Element;
+export interface OTPInputGroupProps extends ComponentProps<"div"> {
+}
+declare function OTPInputGroup({ className, ...props }: OTPInputGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface OTPInputSlotProps extends ComponentProps<"div"> {
+    index: number;
+}
+declare function OTPInputSlot({ className, index, ...props }: OTPInputSlotProps): import("react/jsx-runtime").JSX.Element;
+export interface OTPInputSeparatorProps extends ComponentProps<"div"> {
+}
+declare function OTPInputSeparator({ className, children, ...props }: OTPInputSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare const OtpInput: typeof OTPInputRoot & {
+    Group: typeof OTPInputGroup;
+    Slot: typeof OTPInputSlot;
+    Separator: typeof OTPInputSeparator;
+};
+export {};

package/dist/components/otp-input/src/otp-input.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPInput as Lt } from "../../../node_modules/.pnpm/input-otp@1.4.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/input-otp/dist/index.js";
+import { useMemo, createContext, useContext } from "react";
+import { otpInputTv } from "./tv.js";
+import css from "./otp-input.module.css.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const OTPInputCtx = createContext({
+  styles: otpInputTv({}),
+  slotProps: [],
+  variant: "default",
+  disabled: false,
+  isInvalid: false
+});
+function OTPInputRoot({
+  className,
+  inputClassName,
+  variant = "default",
+  disabled = false,
+  isInvalid = false,
+  children,
+  ...props
+}) {
+  const tv = useMemo(
+    () => otpInputTv({ variant, disabled, isInvalid }),
+    [variant, disabled, isInvalid]
+  );
+  return /* @__PURE__ */ jsx(
+    Lt,
+    {
+      className: tv.input({ className: inputClassName }),
+      containerClassName: tv.base({ className }),
+      spellCheck: false,
+      autoComplete: "off",
+      "data-disabled": disabled || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-slot": "otp-input",
+      disabled,
+      render: ({ slots: slotProps }) => /* @__PURE__ */ jsx(OTPInputCtx.Provider, { value: { styles: tv, slotProps, variant, disabled, isInvalid }, children }),
+      ...props
+    }
+  );
+}
+function OTPInputGroup({ className, ...props }) {
+  var _a;
+  const { styles } = useContext(OTPInputCtx);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: (_a = styles == null ? void 0 : styles.group) == null ? void 0 : _a.call(styles, { className }),
+      "data-slot": "otp-input-group",
+      ...props
+    }
+  );
+}
+function OTPInputSlot({ className, index, ...props }) {
+  var _a, _b, _c, _d;
+  const { styles, slotProps, variant, disabled, isInvalid } = useContext(OTPInputCtx);
+  const { char, hasFakeCaret, isActive } = (slotProps == null ? void 0 : slotProps[index]) ?? {};
+  const slotStyles = otpInputTv({
+    variant,
+    selected: isActive,
+    disabled,
+    isInvalid
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: tcx((_a = styles == null ? void 0 : styles.slot) == null ? void 0 : _a.call(styles, { className }), (_b = slotStyles == null ? void 0 : slotStyles.slot) == null ? void 0 : _b.call(slotStyles)),
+      "data-active": isActive || void 0,
+      "data-disabled": disabled || void 0,
+      "data-filled": !!char || void 0,
+      "data-invalid": isInvalid || void 0,
+      "data-slot": "otp-input-slot",
+      children: [
+        char ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: (_c = styles == null ? void 0 : styles.slotValue) == null ? void 0 : _c.call(styles),
+            "data-slot": "otp-input-slot-value",
+            children: char
+          }
+        ) : null,
+        hasFakeCaret && isActive ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: tcx((_d = styles == null ? void 0 : styles.caret) == null ? void 0 : _d.call(styles), css.caret),
+            "data-slot": "otp-input-caret"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function OTPInputSeparator({ className, children, ...props }) {
+  var _a;
+  const { styles } = useContext(OTPInputCtx);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: (_a = styles == null ? void 0 : styles.separator) == null ? void 0 : _a.call(styles, { className }),
+      "data-slot": "otp-input-separator",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx("span", { children: "-" })
+    }
+  );
+}
+const OtpInput = Object.assign(OTPInputRoot, {
+  Group: OTPInputGroup,
+  Slot: OTPInputSlot,
+  Separator: OTPInputSeparator
+});
+export {
+  OtpInput
+};

package/dist/components/otp-input/src/otp-input.module.css

@@ -0,0 +1,15 @@
+._caret_7qdip_1 {
+  animation: _caret-blink_7qdip_1 1s ease-out infinite;
+}
+
+@keyframes _caret-blink_7qdip_1 {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+  20%,
+  50% {
+    opacity: 0;
+  }
+}

package/dist/components/otp-input/src/otp-input.module.css.js

@@ -0,0 +1,8 @@
+import './otp-input.module.css';const caret = "_caret_7qdip_1";
+const css = {
+  caret
+};
+export {
+  caret,
+  css as default
+};

package/dist/components/otp-input/src/tv.d.ts

@@ -0,0 +1,121 @@
+export declare const otpInputTv: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        light: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        dark: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            slot: string;
+        };
+        false: {};
+    };
+    isInvalid: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    input: string;
+    group: string;
+    slot: string[];
+    slotValue: string;
+    caret: string;
+    separator: string;
+}, undefined, {
+    variant: {
+        default: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        light: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        dark: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            slot: string;
+        };
+        false: {};
+    };
+    isInvalid: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    input: string;
+    group: string;
+    slot: string[];
+    slotValue: string;
+    caret: string;
+    separator: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        light: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+        dark: {
+            slot: string;
+            slotValue: string;
+            caret: string;
+        };
+    };
+    selected: {
+        true: {};
+        false: {};
+    };
+    disabled: {
+        true: {
+            slot: string;
+        };
+        false: {};
+    };
+    isInvalid: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    input: string;
+    group: string;
+    slot: string[];
+    slotValue: string;
+    caret: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/otp-input/src/tv.js

@@ -0,0 +1,150 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const otpInputTv = tcv({
+  slots: {
+    base: "relative flex items-center gap-2",
+    input: "!absolute inset-0 w-full h-full opacity-0 cursor-text",
+    group: "flex items-center gap-1.5",
+    slot: [
+      "relative flex items-center justify-center",
+      "h-8 w-8",
+      "rounded-md",
+      "text-body-large",
+      "border border-solid border-transparent"
+    ],
+    slotValue: "",
+    caret: "absolute inset-y-2 left-1/2 w-px -translate-x-1/2",
+    separator: "text-secondary-foreground mx-1"
+  },
+  variants: {
+    variant: {
+      default: {
+        slot: "bg-secondary-background",
+        slotValue: "text-default-foreground",
+        caret: "bg-default-foreground"
+      },
+      light: {
+        slot: "bg-gray-100",
+        slotValue: "text-gray-900",
+        caret: "bg-gray-900"
+      },
+      dark: {
+        slot: "bg-gray-700",
+        slotValue: "text-white",
+        caret: "bg-white"
+      }
+    },
+    selected: {
+      true: {},
+      false: {}
+    },
+    disabled: {
+      true: {
+        slot: "cursor-not-allowed"
+      },
+      false: {}
+    },
+    isInvalid: {
+      true: {},
+      false: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      selected: true,
+      disabled: false,
+      class: {
+        slot: "bg-default-background border-selected-boundary"
+      }
+    },
+    {
+      variant: "default",
+      selected: false,
+      disabled: false,
+      class: {
+        slot: "hover:border-default-boundary"
+      }
+    },
+    {
+      variant: "light",
+      selected: false,
+      disabled: false,
+      class: {
+        slot: "hover:border-gray-200"
+      }
+    },
+    {
+      variant: "dark",
+      selected: false,
+      disabled: false,
+      class: {
+        slot: "hover:border-gray-600"
+      }
+    },
+    {
+      variant: ["default", "light", "dark"],
+      selected: true,
+      disabled: false,
+      class: {
+        slot: "border-selected-boundary"
+      }
+    },
+    {
+      variant: "default",
+      disabled: true,
+      class: {
+        slot: "bg-secondary-background",
+        slotValue: "text-disabled-foreground"
+      }
+    },
+    {
+      variant: "light",
+      disabled: true,
+      class: {
+        slot: "bg-gray-100",
+        slotValue: "text-black/30"
+      }
+    },
+    {
+      variant: "dark",
+      disabled: true,
+      class: {
+        slot: "bg-gray-700",
+        slotValue: "text-white/40"
+      }
+    },
+    {
+      variant: "default",
+      isInvalid: true,
+      disabled: false,
+      class: {
+        slot: "border-danger-boundary"
+      }
+    },
+    {
+      variant: "light",
+      isInvalid: true,
+      disabled: false,
+      class: {
+        slot: "border-danger-boundary"
+      }
+    },
+    {
+      variant: "dark",
+      isInvalid: true,
+      disabled: false,
+      class: {
+        slot: "border-danger-boundary"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    selected: false,
+    disabled: false,
+    isInvalid: false
+  }
+});
+export {
+  otpInputTv
+};

package/dist/components/otp-input/tsup.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('tsup').Options | import('tsup').Options[] | ((overrideOptions: import('tsup').Options) => import('tsup').Options | import('tsup').Options[] | Promise<import('tsup').Options | import('tsup').Options[]>);
+export default _default;

package/dist/components/panel/src/components/panel-sortable.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { forwardRef, useRef, useCallback, useEffect, useMemo, memo } from "react";
+import React__default, { forwardRef, useRef, useCallback, useEffect, useMemo, memo } from "react";
 import { usePanelDragDrop } from "../hooks/use-panel-drag-drop.js";
 import { SortablePaneContext, SortableRowDataContext, useSortableRowItem, useSortablePane } from "../context/sortable-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
@@ -93,8 +93,8 @@ const PanelSortable = forwardRef(function PanelSortable2(props, ref) {
         SortableRowDataContext.Provider,
         {
           value: { item },
-          children: /* @__PURE__ */ jsx(RowContainer, { children: React.Children.map(props.children, (child) => {
-            if (React.isValidElement(child)) {
+          children: /* @__PURE__ */ jsx(RowContainer, { children: React__default.Children.map(props.children, (child) => {
+            if (React__default.isValidElement(child)) {
               return child;
             }
             return null;

package/dist/components/rich-input/src/hooks/use-editor-config.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from "react";
+import React__default, { useMemo, useCallback } from "react";
 import { createEditor } from "slate";
 import { withHistory } from "slate-history";
 import { withReact } from "slate-react";
@@ -16,10 +16,10 @@ const useEditorConfig = (props) => {
     disableTabFocus
   });
   const renderElement = useCallback((props2) => {
-    return React.createElement(ElementRender, props2);
+    return React__default.createElement(ElementRender, props2);
   }, []);
   const renderLeaf = useCallback((props2) => {
-    return React.createElement(LeafRender, props2);
+    return React__default.createElement(LeafRender, props2);
   }, []);
   return {
     editor,

package/dist/components/rich-input/src/utils/custom-options.js

@@ -1,63 +1,63 @@
 import { ParagraphPilcrow, ParagraphQuote, ParagraphCode, ParagraphHeading1, ParagraphHeading2, ParagraphHeading3, ParagraphListOrdered, ParagraphList, ParagraphListTodo, ParagraphBold, ParagraphItalic, ParagraphUnderline, ParagraphStrikethrough } from "@choiceform/icons-react";
-import React from "react";
+import React__default from "react";
 const charactersOptions = [
   {
     format: "bold",
-    icon: React.createElement(ParagraphBold)
+    icon: React__default.createElement(ParagraphBold)
   },
   {
     format: "italic",
-    icon: React.createElement(ParagraphItalic)
+    icon: React__default.createElement(ParagraphItalic)
   },
   {
     format: "underlined",
-    icon: React.createElement(ParagraphUnderline)
+    icon: React__default.createElement(ParagraphUnderline)
   },
   {
     format: "strikethrough",
-    icon: React.createElement(ParagraphStrikethrough)
+    icon: React__default.createElement(ParagraphStrikethrough)
   },
   {
     format: "code",
-    icon: React.createElement(ParagraphCode)
+    icon: React__default.createElement(ParagraphCode)
   }
 ];
 const paragraphOptions = [
   {
     format: "paragraph",
-    icon: React.createElement(ParagraphPilcrow)
+    icon: React__default.createElement(ParagraphPilcrow)
   },
   {
     format: "block_quote",
-    icon: React.createElement(ParagraphQuote)
+    icon: React__default.createElement(ParagraphQuote)
   },
   {
     format: "code",
-    icon: React.createElement(ParagraphCode)
+    icon: React__default.createElement(ParagraphCode)
   },
   {
     format: "h1",
-    icon: React.createElement(ParagraphHeading1)
+    icon: React__default.createElement(ParagraphHeading1)
   },
   {
     format: "h2",
-    icon: React.createElement(ParagraphHeading2)
+    icon: React__default.createElement(ParagraphHeading2)
   },
   {
     format: "h3",
-    icon: React.createElement(ParagraphHeading3)
+    icon: React__default.createElement(ParagraphHeading3)
   },
   {
     format: "numbered_list",
-    icon: React.createElement(ParagraphListOrdered)
+    icon: React__default.createElement(ParagraphListOrdered)
   },
   {
     format: "bulleted_list",
-    icon: React.createElement(ParagraphList)
+    icon: React__default.createElement(ParagraphList)
   },
   {
     format: "check_list",
-    icon: React.createElement(ParagraphListTodo)
+    icon: React__default.createElement(ParagraphListTodo)
   }
 ];
 export {

package/dist/components/select/dist/index.js

@@ -1,7 +1,7 @@
 import { Slot } from "../../slot/dist/index.js";
 import { MenuValue, MenuTrigger, MenuContextLabel, MenuContextItem, MenuEmpty, MenuDivider, MenuContextContent, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, useFloating, offset, shift, flip, size, inner, autoUpdate, useClick, useDismiss, useRole, useInnerOffset, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList } from "@floating-ui/react";
-import React, { memo, useMemo, Children, isValidElement, useRef, useState, useId, useEffect, cloneElement } from "react";
+import React__default, { memo, useMemo, Children, isValidElement, useRef, useState, useId, useEffect, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -47,7 +47,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
         if (!isValidElement(child)) return;
         if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel || child.type === MenuEmpty) {
           result.push(child);
-        } else if (child.type === React.Fragment && child.props.children) {
+        } else if (child.type === React__default.Fragment && child.props.children) {
           const fragmentChildren = Children.toArray(child.props.children);
           result.push(...extractSelectItems(fragmentChildren));
         }

package/dist/components/select/src/select.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "../../slot/dist/index.js";
 import { MenuValue, MenuTrigger, MenuContextLabel, MenuContextItem, MenuEmpty, MenuDivider, MenuContextContent, useMenuScroll, MenuContext, MenuScrollArrow } from "../../menus/dist/index.js";
 import { useFloatingParentNodeId, FloatingTree, useFloatingNodeId, useFloating, offset, shift, flip, size, inner, autoUpdate, useClick, useDismiss, useRole, useInnerOffset, useListNavigation, useTypeahead, useInteractions, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList } from "@floating-ui/react";
-import React, { memo, useMemo, Children, isValidElement, useRef, useState, useId, useEffect, cloneElement } from "react";
+import React__default, { memo, useMemo, Children, isValidElement, useRef, useState, useId, useEffect, cloneElement } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const PORTAL_ROOT_ID = "floating-menu-root";
@@ -47,7 +47,7 @@ const SelectComponent = memo(function SelectComponent2(props) {
         if (!isValidElement(child)) return;
         if (child.type === MenuContextItem || child.type === MenuDivider || child.type === MenuContextLabel || child.type === MenuEmpty) {
           result.push(child);
-        } else if (child.type === React.Fragment && child.props.children) {
+        } else if (child.type === React__default.Fragment && child.props.children) {
           const fragmentChildren = Children.toArray(child.props.children);
           result.push(...extractSelectItems(fragmentChildren));
         }

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

@@ -3,23 +3,23 @@ interface SlotProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }
 /**
- * Optimized Slot component implementation
+ * 优化的 Slot 组件实现
  *
- * Compared to performance optimization of @radix-ui/react-slot:
- * 1. Use useMemo to cache children processing results
- * 2. Simplify props merging logic
- * 3. Avoid unnecessary deep traversal
- * 4. Better type safety
+ * 相比 @radix-ui/react-slot 的性能优化：
+ * 1. 使用 useMemo 缓存 children 处理结果
+ * 2. 简化 props 合并逻辑
+ * 3. 避免不必要的深度遍历
+ * 4. 更好的类型安全
  */
 declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
 /**
- * Hook version of Slot logic
- * Used for scenarios that require more granular control
+ * Hook 版本的 Slot 逻辑
+ * 用于需要更细粒度控制的场景
  */
 declare function useSlot(children: React.ReactNode, slotProps: Record<string, unknown>, forwardedRef?: React.Ref<unknown>): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined;
 /**
- * Performance optimized asChild mode Hook
- * Used to replace `const Component = asChild ? Slot : "button"` mode
+ * 性能优化的 asChild 模式 Hook
+ * 用于替代 `const Component = asChild ? Slot : "button"` 模式
  */
 declare function useAsChild<T extends React.ElementType = "button">(asChild: boolean | undefined, defaultElement: T): T | typeof Slot;