@choice-ui/react 1.4.3 → 1.4.6

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';

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

@@ -1,15 +1,2 @@
 import { SkeletonProps } from './types';
-/**
- * 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}
- */
 export declare const Skeleton: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLSpanElement>>>;

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

@@ -21,28 +21,26 @@ const Skeleton = memo(
     const skeletonContext = useSkeletonContext();
     const loading = loadingProp ?? (skeletonContext == null ? void 0 : skeletonContext.loading) ?? false;
     const { styles: skeletonStyles } = useSkeleton({
-      hasChildren,
       width,
       height
     });
     const tv = useMemo(
       () => skeletonTv({
-        hasChildren,
-        loading
+        loading,
+        hasChildren
       }),
-      [hasChildren, loading]
+      [loading]
     );
     const mergedStyle = useMemo(() => {
       if (!skeletonStyles && !style) return void 0;
       return { ...skeletonStyles, ...style };
     }, [skeletonStyles, style]);
     if (hasChildren) {
-      const skeletonClassName = loading ? tv.root() : void 0;
       return /* @__PURE__ */ jsx(
         Slot,
         {
           ref,
-          className: tcx(skeletonClassName, className),
+          className: tcx(tv.root(), className),
           style,
           "aria-busy": loading ? "true" : void 0,
           role: loading ? "status" : void 0,

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

@@ -1,40 +1,46 @@
 export declare const skeletonTv: import('tailwind-variants').TVReturnType<{
-    hasChildren: {
-        true: {};
-        false: {};
-    };
     loading: {
         true: {
             root: string[];
         };
         false: {};
     };
-}, {
-    root: string[];
-}, undefined, {
     hasChildren: {
         true: {};
-        false: {};
+        false: {
+            root: string;
+        };
     };
+}, {
+    root: string[];
+}, undefined, {
     loading: {
         true: {
             root: string[];
         };
         false: {};
     };
-}, {
-    root: string[];
-}, import('tailwind-variants').TVReturnType<{
     hasChildren: {
         true: {};
-        false: {};
+        false: {
+            root: string;
+        };
     };
+}, {
+    root: string[];
+}, import('tailwind-variants').TVReturnType<{
     loading: {
         true: {
             root: string[];
         };
         false: {};
     };
+    hasChildren: {
+        true: {};
+        false: {
+            root: string;
+        };
+    };
 }, {
     root: string[];
 }, undefined, unknown, unknown, undefined>>;

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

@@ -1,19 +1,23 @@
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const skeletonTv = tcv({
   slots: {
-    root: ["will-change-opacity", "animate-pulse"]
+    // transition always exists, ensure there is a transition effect when loading state changes
+    root: ["transition-all", "duration-200", "ease-in-out"]
   },
   variants: {
-    hasChildren: {
-      true: {},
-      false: {}
-    },
     loading: {
       true: {
-        root: ["skeleton"]
+        root: ["skeleton", "animate-pulse"]
       },
       false: {}
+    },
+    hasChildren: {
+      true: {},
+      false: { root: "block" }
     }
+  },
+  defaultVariants: {
+    hasChildren: true
   }
 });
 export {

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

@@ -3,23 +3,23 @@ interface SlotProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
 }
 /**
- * 优化的 Slot 组件实现
+ * Optimized Slot component implementation
  *
- * 相比 @radix-ui/react-slot 的性能优化：
- * 1. 使用 useMemo 缓存 children 处理结果
- * 2. 简化 props 合并逻辑
- * 3. 避免不必要的深度遍历
- * 4. 更好的类型安全
+ * 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
  */
 declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
 /**
- * Hook 版本的 Slot 逻辑
- * 用于需要更细粒度控制的场景
+ * Hook version of Slot logic
+ * Used for scenarios that require more granular control
  */
 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;
 /**
- * 性能优化的 asChild 模式 Hook
- * 用于替代 `const Component = asChild ? Slot : "button"` 模式
+ * Performance optimized asChild mode Hook
+ * Used to replace `const Component = asChild ? Slot : "button"` mode
  */
 declare function useAsChild<T extends React.ElementType = "button">(asChild: boolean | undefined, defaultElement: T): T | typeof Slot;
 

package/dist/components/slot/dist/index.js

@@ -6,7 +6,8 @@ var Slot = forwardRef(
       if (!React.isValidElement(children)) {
         return children;
       }
-      const childRef = children.ref;
+      const childProps = children.props;
+      const childRef = childProps.ref;
       const mergedProps = mergeProps(slotProps, children.props);
       return React.cloneElement(children, {
         ...mergedProps,
@@ -23,7 +24,8 @@ var SlotClone = forwardRef(
       if (!React.isValidElement(children)) {
         return children;
       }
-      const childRef = children.ref;
+      const childProps = children.props;
+      const childRef = childProps.ref;
       const mergedProps = mergeProps(slotProps, children.props);
       return React.cloneElement(children, {
         ...mergedProps,

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

@@ -6,28 +6,28 @@ interface SlotCloneProps {
     children: React.ReactNode;
 }
 /**
- * 优化的 Slot 组件实现
+ * Optimized Slot component implementation
  *
- * 相比 @radix-ui/react-slot 的性能优化：
- * 1. 使用 useMemo 缓存 children 处理结果
- * 2. 简化 props 合并逻辑
- * 3. 避免不必要的深度遍历
- * 4. 更好的类型安全
+ * 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
  */
 export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
 /**
- * SlotClone 组件 - 用于深度克隆
- * 当需要处理嵌套结构时使用
+ * SlotClone component - used for deep cloning
+ * When nested structures need to be processed
  */
 export declare const SlotClone: React.ForwardRefExoticComponent<SlotCloneProps & React.RefAttributes<HTMLElement>>;
 /**
- * Hook 版本的 Slot 逻辑
- * 用于需要更细粒度控制的场景
+ * Hook version of Slot logic
+ * Used for scenarios that require more granular control
  */
 export 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;
 /**
- * 性能优化的 asChild 模式 Hook
- * 用于替代 `const Component = asChild ? Slot : "button"` 模式
+ * Performance optimized asChild mode Hook
+ * Used to replace `const Component = asChild ? Slot : "button"` mode
  */
 export declare function useAsChild<T extends React.ElementType = "button">(asChild: boolean | undefined, defaultElement: T): T | typeof Slot;
 export {};

package/dist/components/slot/src/slot.js

@@ -6,7 +6,8 @@ const Slot = forwardRef(
       if (!React.isValidElement(children)) {
         return children;
       }
-      const childRef = children.ref;
+      const childProps = children.props;
+      const childRef = childProps.ref;
       const mergedProps = mergeProps(slotProps, children.props);
       return React.cloneElement(children, {
         ...mergedProps,
@@ -23,7 +24,8 @@ const SlotClone = forwardRef(
       if (!React.isValidElement(children)) {
         return children;
       }
-      const childRef = children.ref;
+      const childProps = children.props;
+      const childRef = childProps.ref;
       const mergedProps = mergeProps(slotProps, children.props);
       return React.cloneElement(children, {
         ...mergedProps,
@@ -81,7 +83,8 @@ function useSlot(children, slotProps, forwardedRef) {
     if (!React.isValidElement(children)) {
       return children;
     }
-    const childRef = children.ref;
+    const childProps = children.props;
+    const childRef = childProps.ref;
     const mergedProps = mergeProps(slotProps, children.props);
     return React.cloneElement(children, {
       ...mergedProps,

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

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

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

@@ -1,2 +1,3 @@
-export * from './stackflow';
+export { Stackflow } from './stackflow';
+export type { StackflowProps } from './stackflow';
 export { useStackflowContext } from './context';

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

@@ -1,4 +1,4 @@
-import { ReactNode, HTMLProps } from 'react';
+import { HTMLProps, ReactNode } from 'react';
 import * as react from 'react';
 
 interface SwitchLabelProps {
@@ -26,4 +26,4 @@ interface SwitchType {
 }
 declare const Switch: SwitchType;
 
-export { Switch, SwitchLabel, type SwitchLabelProps, type SwitchProps };
+export { Switch, type SwitchProps };

package/dist/components/switch/dist/index.js

@@ -244,7 +244,7 @@ var SwitchBase = forwardRef(function Switch(props, ref) {
   } = props;
   const internalId = useId();
   const descriptionId = useId();
-  const styles = switchTv({ size, variant, disabled, checked: value, focused });
+  const tv = switchTv({ size, variant, disabled, checked: value, focused });
   const style = {
     "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - var(--thumb-margin) * 4 - 1px)",
     ...switch_sizes[size].style
@@ -266,7 +266,7 @@ var SwitchBase = forwardRef(function Switch(props, ref) {
   return /* @__PURE__ */ jsxs(
     "label",
     {
-      className: tcx(styles.root(), className),
+      className: tcx(tv.root(), className),
       htmlFor: props.id || internalId,
       children: [
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: value ? "Enabled" : "Disabled" }),
@@ -274,7 +274,7 @@ var SwitchBase = forwardRef(function Switch(props, ref) {
           "input",
           {
             ref,
-            className: styles.input(),
+            className: tv.input(),
             type: "checkbox",
             id: props.id || internalId,
             checked: value,
@@ -293,12 +293,12 @@ var SwitchBase = forwardRef(function Switch(props, ref) {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles.track(),
+            className: tv.track(),
             style,
             children: /* @__PURE__ */ jsx(
               motion.div,
               {
-                className: styles.thumb(),
+                className: tv.thumb(),
                 initial: false,
                 animate: { x: value ? "var(--thumb-translate)" : 0 },
                 transition: { duration: 0.1 },
@@ -317,6 +317,5 @@ var Switch2 = MemoizedSwitch;
 Switch2.Label = SwitchLabel;
 Switch2.displayName = "Switch";
 export {
-  Switch2 as Switch,
-  SwitchLabel
+  Switch2 as Switch
 };

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

@@ -1 +1,2 @@
-export * from './switch';
+export { Switch } from './switch';
+export type { SwitchProps } from './switch';

package/dist/components/switch/src/switch.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 import { memo, forwardRef, useId } from "react";
 import { switchTv } from "./tv.js";
@@ -45,7 +45,7 @@ const SwitchBase = forwardRef(function Switch2(props, ref) {
   } = props;
   const internalId = useId();
   const descriptionId = useId();
-  const styles = switchTv({ size, variant, disabled, checked: value, focused });
+  const tv = switchTv({ size, variant, disabled, checked: value, focused });
   const style = {
     "--thumb-translate": "calc(var(--switch-width) - var(--thumb-width) - var(--thumb-margin) * 4 - 1px)",
     ...switch_sizes[size].style
@@ -67,7 +67,7 @@ const SwitchBase = forwardRef(function Switch2(props, ref) {
   return /* @__PURE__ */ jsxs(
     "label",
     {
-      className: tcx(styles.root(), className),
+      className: tcx(tv.root(), className),
       htmlFor: props.id || internalId,
       children: [
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: value ? "Enabled" : "Disabled" }),
@@ -75,7 +75,7 @@ const SwitchBase = forwardRef(function Switch2(props, ref) {
           "input",
           {
             ref,
-            className: styles.input(),
+            className: tv.input(),
             type: "checkbox",
             id: props.id || internalId,
             checked: value,
@@ -94,12 +94,12 @@ const SwitchBase = forwardRef(function Switch2(props, ref) {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: styles.track(),
+            className: tv.track(),
             style,
             children: /* @__PURE__ */ jsx(
               motion.div,
               {
-                className: styles.thumb(),
+                className: tv.thumb(),
                 initial: false,
                 animate: { x: value ? "var(--thumb-translate)" : 0 },
                 transition: { duration: 0.1 },