@choice-ui/react 1.4.2 → 1.4.5

package/dist/components/scroll-area/src/tv.d.ts

@@ -24,12 +24,12 @@ export declare const ScrollTv: import('tailwind-variants').TVReturnType<{
         default: {
             scrollbar: string;
         };
-        "large-y": {};
-        "large-t": {};
-        "large-b": {};
-        "large-x": {};
-        "large-l": {};
-        "large-r": {};
+        "padding-y": {};
+        "padding-t": {};
+        "padding-b": {};
+        "padding-x": {};
+        "padding-l": {};
+        "padding-r": {};
     };
     hoverBoundary: {
         none: {};
@@ -66,12 +66,12 @@ export declare const ScrollTv: import('tailwind-variants').TVReturnType<{
         default: {
             scrollbar: string;
         };
-        "large-y": {};
-        "large-t": {};
-        "large-b": {};
-        "large-x": {};
-        "large-l": {};
-        "large-r": {};
+        "padding-y": {};
+        "padding-t": {};
+        "padding-b": {};
+        "padding-x": {};
+        "padding-l": {};
+        "padding-r": {};
     };
     hoverBoundary: {
         none: {};
@@ -108,12 +108,12 @@ export declare const ScrollTv: import('tailwind-variants').TVReturnType<{
         default: {
             scrollbar: string;
         };
-        "large-y": {};
-        "large-t": {};
-        "large-b": {};
-        "large-x": {};
-        "large-l": {};
-        "large-r": {};
+        "padding-y": {};
+        "padding-t": {};
+        "padding-b": {};
+        "padding-x": {};
+        "padding-l": {};
+        "padding-r": {};
     };
     hoverBoundary: {
         none: {};

package/dist/components/scroll-area/src/tv.js

@@ -37,12 +37,12 @@ const ScrollTv = tcv({
       default: {
         scrollbar: "p-0.5"
       },
-      "large-y": {},
-      "large-t": {},
-      "large-b": {},
-      "large-x": {},
-      "large-l": {},
-      "large-r": {}
+      "padding-y": {},
+      "padding-t": {},
+      "padding-b": {},
+      "padding-x": {},
+      "padding-l": {},
+      "padding-r": {}
     },
     hoverBoundary: {
       none: {},
@@ -101,42 +101,42 @@ const ScrollTv = tcv({
     },
     {
       orientation: "vertical",
-      scrollbarMode: "large-y",
+      scrollbarMode: "padding-y",
       class: {
         scrollbar: "px-0.5 py-2"
       }
     },
     {
       orientation: "vertical",
-      scrollbarMode: "large-t",
+      scrollbarMode: "padding-t",
       class: {
         scrollbar: "px-0.5 pt-2"
       }
     },
     {
       orientation: "vertical",
-      scrollbarMode: "large-b",
+      scrollbarMode: "padding-b",
       class: {
         scrollbar: "px-0.5 pb-2"
       }
     },
     {
       orientation: "horizontal",
-      scrollbarMode: "large-x",
+      scrollbarMode: "padding-x",
       class: {
         scrollbar: "px-2 py-0.5"
       }
     },
     {
       orientation: "horizontal",
-      scrollbarMode: "large-l",
+      scrollbarMode: "padding-l",
       class: {
         scrollbar: "py-0.5 pl-2"
       }
     },
     {
       orientation: "horizontal",
-      scrollbarMode: "large-r",
+      scrollbarMode: "padding-r",
       class: {
         scrollbar: "py-0.5 pr-2"
       }

package/dist/components/scroll-area/src/types.d.ts

@@ -1,5 +1,5 @@
 export type ScrollbarVisibilityType = "auto" | "always" | "scroll" | "hover";
-export type ScrollbarMode = "default" | "large-y" | "large-t" | "large-b" | "large-x" | "large-l" | "large-r";
+export type ScrollbarMode = "default" | "padding-y" | "padding-x" | "padding-b" | "padding-t" | "padding-l" | "padding-r";
 export type ScrollAreaVariant = "default" | "light" | "dark";
 export type ScrollOrientation = "vertical" | "horizontal" | "both";
 export type HoverBoundary = "none" | "hover";
@@ -12,16 +12,16 @@ export interface ScrollState {
     scrollWidth: number;
 }
 /**
- * 滚动位置信息 - 简化版本，只提供核心数据
+ * Scroll position information - simplified version, only providing core data
  */
 export interface ScrollPosition {
-    /** 水平滚动位置（0-1） */
+    /** Horizontal scroll position (0-1) */
     left: number;
-    /** 垂直滚动位置（0-1） */
+    /** Vertical scroll position (0-1) */
     top: number;
 }
 /**
- * Render prop函数类型
+ * Render prop function type
  */
 export type ScrollAreaRenderProp = (position: ScrollPosition) => React.ReactNode;
 export interface ScrollAreaContextType {
@@ -51,11 +51,11 @@ export interface ScrollAreaContextType {
     viewportId: string;
 }
 export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
-    /** 可访问名称 */
+    /** Accessible name */
     "aria-label"?: string;
-    /** 引用提供标签的元素ID */
+    /** Reference to the element ID providing the label */
     "aria-labelledby"?: string;
-    /** 标准children或render prop函数 */
+    /** Standard children or render prop function */
     children?: React.ReactNode | ScrollAreaRenderProp;
     hoverBoundary?: HoverBoundary;
     orientation?: ScrollOrientation;

package/dist/components/scroll-area/src/utils/index.d.ts

@@ -1,10 +1,10 @@
 import { ScrollState } from '../types';
 /**
- * 处理滚动条轨道点击事件
+ * Handle scrollbar track click event
  */
 export declare function handleScrollbarTrackClick(e: React.MouseEvent, viewport: HTMLDivElement, scrollState: ScrollState, orientation: "vertical" | "horizontal"): void;
 /**
- * 获取滚动条位置样式
+ * Get scrollbar position style
  */
 export declare function getScrollbarPositionStyle(orientation: "vertical" | "horizontal"): {
     position: "absolute";
@@ -24,6 +24,6 @@ export declare function getScrollbarPositionStyle(orientation: "vertical" | "hor
     height?: undefined;
 };
 /**
- * 判断是否应该显示角落组件
+ * Check if the corner component should be displayed
  */
 export declare function shouldShowCorner(scrollState: ScrollState): boolean;

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

@@ -105,7 +105,7 @@ var SearchInput = forwardRef((props, ref) => {
   const handleClear = useEventCallback(() => {
     onChange == null ? void 0 : onChange("");
   });
-  const style = searchInputTv({ variant, disabled });
+  const tv = searchInputTv({ variant, disabled });
   return /* @__PURE__ */ jsxs(
     TextField,
     {
@@ -117,11 +117,11 @@ var SearchInput = forwardRef((props, ref) => {
       disabled,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(TextField.Prefix, { className: style.icon(), children: /* @__PURE__ */ jsx(Search, {}) }),
+        /* @__PURE__ */ jsx(TextField.Prefix, { className: tv.icon(), children: /* @__PURE__ */ jsx(Search, {}) }),
         value && clearable && /* @__PURE__ */ jsx(TextField.Suffix, { children: /* @__PURE__ */ jsx(
           IconButton,
           {
-            className: style.action(),
+            className: tv.action(),
             variant: "ghost",
             tooltip: { content: i18n.clear },
             onClick: handleClear,

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

@@ -1 +1,2 @@
-export * from './search-input';
+export { SearchInput } from './search-input';
+export type { SearchInputProps } from './search-input';

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

@@ -21,7 +21,7 @@ const SearchInput = forwardRef((props, ref) => {
   const handleClear = useEventCallback(() => {
     onChange == null ? void 0 : onChange("");
   });
-  const style = searchInputTv({ variant, disabled });
+  const tv = searchInputTv({ variant, disabled });
   return /* @__PURE__ */ jsxs(
     TextField,
     {
@@ -33,11 +33,11 @@ const SearchInput = forwardRef((props, ref) => {
       disabled,
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(TextField.Prefix, { className: style.icon(), children: /* @__PURE__ */ jsx(Search, {}) }),
+        /* @__PURE__ */ jsx(TextField.Prefix, { className: tv.icon(), children: /* @__PURE__ */ jsx(Search, {}) }),
         value && clearable && /* @__PURE__ */ jsx(TextField.Suffix, { children: /* @__PURE__ */ jsx(
           IconButton,
           {
-            className: style.action(),
+            className: tv.action(),
             variant: "ghost",
             tooltip: { content: i18n.clear },
             onClick: handleClear,

package/dist/components/segmented/dist/index.js

@@ -208,7 +208,7 @@ var SegmentedItem = memo(
     } = useSegmentedContext();
     const isActive = value === selectedValue;
     const isDisabled = contextDisabled || disabled;
-    const styles = segmentedControlTv({
+    const tv = segmentedControlTv({
       active: isActive,
       disabled: isDisabled,
       variant
@@ -227,11 +227,11 @@ var SegmentedItem = memo(
     const handleMouseLeave = useEventCallback(() => {
       onHoverChange == null ? void 0 : onHoverChange(false);
     });
-    const optionClassName = tcx(styles.option(), className);
+    const optionClassName = tcx(tv.option(), className);
     const inputElement = /* @__PURE__ */ jsx(
       "input",
       {
-        className: styles.input(),
+        className: tv.input(),
         type: "radio",
         id: optionId,
         name: groupId,
@@ -304,7 +304,7 @@ var SegmentedBase = forwardRef(
       }),
       [style, itemCount]
     );
-    const styles = segmentedControlTv({
+    const tv = segmentedControlTv({
       variant
     });
     const ariaProps = {
@@ -326,7 +326,7 @@ var SegmentedBase = forwardRef(
           "div",
           {
             ref,
-            className: tcx(styles.root(), className),
+            className: tcx(tv.root(), className),
             style: gridStyles,
             role: "radiogroup",
             ...ariaProps,

package/dist/components/segmented/src/segmented-item.js

@@ -27,7 +27,7 @@ const SegmentedItem = memo(
     } = useSegmentedContext();
     const isActive = value === selectedValue;
     const isDisabled = contextDisabled || disabled;
-    const styles = segmentedControlTv({
+    const tv = segmentedControlTv({
       active: isActive,
       disabled: isDisabled,
       variant
@@ -46,11 +46,11 @@ const SegmentedItem = memo(
     const handleMouseLeave = useEventCallback(() => {
       onHoverChange == null ? void 0 : onHoverChange(false);
     });
-    const optionClassName = tcx(styles.option(), className);
+    const optionClassName = tcx(tv.option(), className);
     const inputElement = /* @__PURE__ */ jsx(
       "input",
       {
-        className: styles.input(),
+        className: tv.input(),
         type: "radio",
         id: optionId,
         name: groupId,

package/dist/components/segmented/src/segmented.js

@@ -34,7 +34,7 @@ const SegmentedBase = forwardRef(
       }),
       [style, itemCount]
     );
-    const styles = segmentedControlTv({
+    const tv = segmentedControlTv({
       variant
     });
     const ariaProps = {
@@ -56,7 +56,7 @@ const SegmentedBase = forwardRef(
           "div",
           {
             ref,
-            className: tcx(styles.root(), className),
+            className: tcx(tv.root(), className),
             style: gridStyles,
             role: "radiogroup",
             ...ariaProps,

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

@@ -102,7 +102,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
       scroll: scrollRef
     }),
     []
-    // refs 是稳定的引用，不需要依赖项
+    // refs are stable references, no dependencies needed
   );
   const [open, setOpen] = useState(false);
   const [fallback, setFallback] = useState(false);
@@ -141,9 +141,9 @@ var SelectComponent = memo(function SelectComponent2(props) {
       });
     },
     transform: false,
-    // 关键：两套 middleware 配置
+    // Key: two middleware configurations
     middleware: fallback ? [
-      // Fallback 模式：普通下拉菜单
+      // Fallback mode: standard dropdown menu
       offset(8),
       touch ? shift({ crossAxis: true, padding: 16 }) : flip({ padding: 16 }),
       size({
@@ -158,7 +158,7 @@ var SelectComponent = memo(function SelectComponent2(props) {
         padding: 4
       })
     ] : [
-      // 正常模式：macOS 风格 inner positioning
+      // Normal mode: macOS-style inner positioning
       inner({
         listRef: refs.list,
         overflowRef: refs.overflow,

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

@@ -102,7 +102,7 @@ const SelectComponent = memo(function SelectComponent2(props) {
       scroll: scrollRef
     }),
     []
-    // refs 是稳定的引用，不需要依赖项
+    // refs are stable references, no dependencies needed
   );
   const [open, setOpen] = useState(false);
   const [fallback, setFallback] = useState(false);
@@ -141,9 +141,9 @@ const SelectComponent = memo(function SelectComponent2(props) {
       });
     },
     transform: false,
-    // 关键：两套 middleware 配置
+    // Key: two middleware configurations
     middleware: fallback ? [
-      // Fallback 模式：普通下拉菜单
+      // Fallback mode: standard dropdown menu
       offset(8),
       touch ? shift({ crossAxis: true, padding: 16 }) : flip({ padding: 16 }),
       size({
@@ -158,7 +158,7 @@ const SelectComponent = memo(function SelectComponent2(props) {
         padding: 4
       })
     ] : [
-      // 正常模式：macOS 风格 inner positioning
+      // Normal mode: macOS-style inner positioning
       inner({
         listRef: refs.list,
         overflowRef: refs.overflow,

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

@@ -0,0 +1,26 @@
+import * as react from 'react';
+
+type SeparatorOrientation = "horizontal" | "vertical";
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Separator direction
+     * @default "horizontal"
+     */
+    orientation?: SeparatorOrientation;
+    /**
+     * Whether to use decorative separator (not read by screen readers)
+     * @default false
+     */
+    decorative?: boolean;
+    variant?: "default" | "light" | "dark" | "reset";
+}
+/**
+ * Separator - Separator component
+ *
+ * Used to create visual separation between content, supports horizontal and vertical directions.
+ * Screen reader friendly, uses correct ARIA attributes.
+ *
+ */
+declare const Separator: react.MemoExoticComponent<react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>>;
+
+export { Separator, type SeparatorOrientation, type SeparatorProps };

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

@@ -0,0 +1,2 @@
+export { Separator } from './separator';
+export type { SeparatorProps, SeparatorOrientation } from './separator';

package/dist/components/separator/src/separator.d.ts

@@ -0,0 +1,22 @@
+export type SeparatorOrientation = "horizontal" | "vertical";
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Separator direction
+     * @default "horizontal"
+     */
+    orientation?: SeparatorOrientation;
+    /**
+     * Whether to use decorative separator (not read by screen readers)
+     * @default false
+     */
+    decorative?: boolean;
+    variant?: "default" | "light" | "dark" | "reset";
+}
+/**
+ * Separator - Separator component
+ *
+ * Used to create visual separation between content, supports horizontal and vertical directions.
+ * Screen reader friendly, uses correct ARIA attributes.
+ *
+ */
+export declare const Separator: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<SeparatorProps & import('react').RefAttributes<HTMLDivElement>>>;

package/dist/components/separator/src/separator.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef } from "react";
+import { SeparatorTV } from "./tv.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+const Separator = memo(
+  forwardRef((props, ref) => {
+    const {
+      className,
+      orientation = "horizontal",
+      decorative = false,
+      variant = "default",
+      ...rest
+    } = props;
+    const tv = SeparatorTV({ orientation, variant });
+    const semanticProps = decorative ? { role: "none" } : {
+      role: "separator",
+      "aria-orientation": orientation
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...semanticProps,
+        ...rest,
+        className: tcx(tv.root(), className)
+      }
+    );
+  })
+);
+Separator.displayName = "Separator";
+export {
+  Separator
+};

package/dist/components/separator/src/tv.d.ts

@@ -0,0 +1,76 @@
+export declare const SeparatorTV: import('tailwind-variants').TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    variant: {
+        default: {
+            root: string;
+        };
+        light: {
+            root: string;
+        };
+        dark: {
+            root: string;
+        };
+        reset: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    variant: {
+        default: {
+            root: string;
+        };
+        light: {
+            root: string;
+        };
+        dark: {
+            root: string;
+        };
+        reset: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, import('tailwind-variants').TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+        };
+    };
+    variant: {
+        default: {
+            root: string;
+        };
+        light: {
+            root: string;
+        };
+        dark: {
+            root: string;
+        };
+        reset: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/separator/src/tv.js

@@ -0,0 +1,25 @@
+import { tcv } from "../../../shared/utils/tcx/tcx.js";
+const SeparatorTV = tcv({
+  slots: {
+    root: "shrink-0"
+  },
+  variants: {
+    orientation: {
+      horizontal: { root: "h-px w-full" },
+      vertical: { root: "h-full w-px" }
+    },
+    variant: {
+      default: { root: "bg-default-boundary" },
+      light: { root: "bg-gray-200" },
+      dark: { root: "bg-gray-800" },
+      reset: { root: "" }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "default"
+  }
+});
+export {
+  SeparatorTV
+};

package/dist/components/separator/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/skeleton/dist/index.d.ts

@@ -39,39 +39,12 @@ interface SkeletonProps extends ComponentPropsWithoutRef<"span"> {
     width?: number | string;
 }
 
-/**
- * Skeleton component for loading states
- *
- * @displayName Skeleton
- * @description A loading placeholder that mimics the content it will replace.
- * When children are provided, Skeleton acts as a Slot and passes skeleton styles down.
- * Use `loading` prop for simple cases, or SkeletonProvider for unified control.
- * @category Feedback
- * @status stable
- * @version 1.0.0
- * @since 1.0.0
- * @see {@link https://design-system.choiceform.io/components/skeleton Skeleton Documentation}
- */
 declare const Skeleton: react.MemoExoticComponent<react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLSpanElement>>>;
 
-interface UseSkeletonParams {
-    hasChildren: boolean;
-    height?: number | string;
-    width?: number | string;
-}
-interface UseSkeletonReturn {
-    styles: React.CSSProperties;
-}
-declare function useSkeleton({ hasChildren, width, height }: UseSkeletonParams): UseSkeletonReturn;
-
-interface SkeletonContextValue {
-    loading: boolean;
-}
-declare function useSkeletonContext(): SkeletonContextValue | undefined;
 interface SkeletonProviderProps {
     children: ReactNode;
     loading: boolean;
 }
 declare function SkeletonProvider({ children, loading }: SkeletonProviderProps): react_jsx_runtime.JSX.Element;
 
-export { Skeleton, type SkeletonContextValue, type SkeletonProps, SkeletonProvider, type SkeletonProviderProps, useSkeleton, useSkeletonContext };
+export { Skeleton, type SkeletonProps, SkeletonProvider };

package/dist/components/skeleton/src/context/skeleton-context.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useContext, createContext } from "react";
+import { createContext, useContext } from "react";
 const SkeletonContext = createContext(void 0);
 function useSkeletonContext() {
   return useContext(SkeletonContext);

package/dist/components/skeleton/src/hooks/use-skeleton.d.ts

@@ -1,9 +1,8 @@
 export interface UseSkeletonParams {
-    hasChildren: boolean;
     height?: number | string;
     width?: number | string;
 }
 export interface UseSkeletonReturn {
     styles: React.CSSProperties;
 }
-export declare function useSkeleton({ hasChildren, width, height }: UseSkeletonParams): UseSkeletonReturn;
+export declare function useSkeleton({ width, height }: UseSkeletonParams): UseSkeletonReturn;

package/dist/components/skeleton/src/hooks/use-skeleton.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-function useSkeleton({ hasChildren, width, height }) {
+function useSkeleton({ width, height }) {
   const styles = useMemo(() => {
     const result = {};
     if (width) {

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

@@ -1,5 +1,3 @@
 export { Skeleton } from './skeleton';
 export type { SkeletonProps } from './types';
-export { useSkeleton } from './hooks';
-export { useSkeletonContext, SkeletonProvider } from './context';
-export type { SkeletonContextValue, SkeletonProviderProps } from './context';
+export { SkeletonProvider } from './context';