@choice-ui/react 1.6.8 → 1.7.0

package/dist/components/picture-preview/src/tv.js

@@ -1,24 +1,30 @@
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const PicturePreviewTv = tcv({
   slots: {
-    root: ["relative flex flex-col overflow-hidden", "h-full w-full", "touch-none select-none"],
+    root: [
+      "group/picture-preview relative flex flex-col overflow-hidden",
+      "h-full w-full",
+      "touch-none select-none"
+    ],
     loading: [
       "text-secondary-foreground absolute inset-0 z-10 flex flex-col items-center justify-center gap-4"
     ],
     content: [
       "relative flex-1 overflow-hidden",
       "flex items-center justify-center",
-      "bg-gray-100 dark:bg-gray-900"
+      "bg-gray-100 dark:bg-gray-900",
+      "[contain:layout_paint]"
     ],
     canvas: [
-      "relative h-full w-full",
       "transform-gpu will-change-transform",
-      "cursor-grab active:cursor-grabbing"
+      "cursor-grab active:cursor-grabbing",
+      "origin-center",
+      "flex items-center justify-center"
     ],
-    image: ["pointer-events-none", "h-full w-full object-contain"],
+    image: ["pointer-events-none", "block w-auto h-auto"],
     controlGroup: [
       "overflow-hidden",
-      "absolute right-2 bottom-2 flex items-center",
+      "absolute flex items-center",
       "bg-default-background",
       "rounded-md",
       "shadow-md"
@@ -27,20 +33,52 @@ const PicturePreviewTv = tcv({
   variants: {
     isLoading: {
       true: {
-        image: "opacity-0 transition-opacity duration-300"
+        image: "opacity-0 scale-105 blur-sm transition-all duration-500 ease-out"
       },
-      false: {}
+      false: {
+        image: "opacity-100 scale-100 blur-0 transition-all duration-500 ease-out"
+      }
     },
     isError: {
       true: {
-        image: "opacity-0 transition-opacity duration-300"
+        image: "opacity-0"
+      },
+      false: {}
+    },
+    isMenuOpen: {
+      true: {
+        controlGroup: "opacity-100"
       },
       false: {}
+    },
+    controlPosition: {
+      "top-left": {
+        controlGroup: "top-2 left-2"
+      },
+      "top-right": {
+        controlGroup: "top-2 right-2"
+      },
+      "bottom-left": {
+        controlGroup: "bottom-2 left-2"
+      },
+      "bottom-right": {
+        controlGroup: "bottom-2 right-2"
+      }
+    },
+    controlShow: {
+      always: {
+        controlGroup: ""
+      },
+      hover: {
+        controlGroup: "group-hover/picture-preview:opacity-100 opacity-0 transition-opacity duration-200"
+      }
     }
   },
   defaultVariants: {
     isLoading: false,
-    isError: false
+    isError: false,
+    isMenuOpen: false,
+    controlPosition: "bottom-right"
   }
 });
 export {

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

@@ -2,17 +2,10 @@ 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";
+    children?: React.ReactNode;
 }
 /**
  * Separator - Separator component

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

@@ -1,16 +1,9 @@
 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";
+    children?: React.ReactNode;
 }
 /**
  * Separator - Separator component

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

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, forwardRef } from "react";
 import { SeparatorTV } from "./tv.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -9,20 +9,48 @@ const Separator = memo(
       orientation = "horizontal",
       decorative = false,
       variant = "default",
+      children,
       ...rest
     } = props;
-    const tv = SeparatorTV({ orientation, variant });
+    const tv = SeparatorTV({ orientation, variant, hasChildren: !!children });
     const semanticProps = decorative ? { role: "none" } : {
       role: "separator",
       "aria-orientation": orientation
     };
-    return /* @__PURE__ */ jsx(
+    if (!children) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          ...semanticProps,
+          ...rest,
+          className: tcx(tv.separator(), className)
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        ...semanticProps,
+        className: tcx(tv.root(), className),
         ...rest,
-        className: tcx(tv.root(), className)
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...semanticProps,
+              className: tv.separator()
+            }
+          ),
+          children,
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ...semanticProps,
+              className: tv.separator()
+            }
+          )
+        ]
       }
     );
   })

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

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

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

@@ -1,21 +1,51 @@
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const SeparatorTV = tcv({
   slots: {
-    root: "shrink-0"
+    root: "flex items-center gap-2",
+    separator: "shrink-0"
   },
   variants: {
+    hasChildren: {
+      true: {
+        separator: "flex-1"
+      },
+      false: {}
+    },
     orientation: {
-      horizontal: { root: "h-px w-full" },
-      vertical: { root: "h-full w-px" }
+      horizontal: { separator: "h-px" },
+      vertical: { separator: "w-px" }
     },
     variant: {
-      default: { root: "bg-default-boundary" },
-      light: { root: "bg-gray-200" },
-      dark: { root: "bg-gray-800" },
-      reset: { root: "" }
+      default: { separator: "bg-default-boundary" },
+      light: { separator: "bg-gray-200" },
+      dark: { separator: "bg-gray-800" },
+      reset: { separator: "" }
     }
   },
+  compoundVariants: [
+    {
+      hasChildren: true,
+      orientation: "horizontal",
+      class: { root: "flex-row" }
+    },
+    {
+      hasChildren: true,
+      orientation: "vertical",
+      class: { root: "flex-col" }
+    },
+    {
+      hasChildren: false,
+      orientation: "horizontal",
+      class: { separator: "w-full" }
+    },
+    {
+      hasChildren: false,
+      orientation: "vertical",
+      class: { separator: "h-full" }
+    }
+  ],
   defaultVariants: {
+    hasChildren: false,
     orientation: "horizontal",
     variant: "default"
   }

package/dist/components/text-field/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { Description } from '../../description/src';
 import { InputProps } from '../../input/src';
 import { Label } from '../../label/src';
 import { default as react__default, HTMLProps, ReactNode } from 'react';
@@ -10,13 +11,11 @@ interface FieldAddonProps extends HTMLProps<HTMLDivElement> {
 }
 declare const FieldAddon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<FieldAddonProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
 
-declare const FieldDescription: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<HTMLProps<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>>;
-
 interface TextFieldProps extends Omit<InputProps, "children"> {
     children?: ReactNode;
 }
 interface TextFieldComponent extends react__default.ForwardRefExoticComponent<TextFieldProps & react__default.RefAttributes<HTMLInputElement>> {
-    Description: typeof FieldDescription;
+    Description: typeof Description;
     Label: typeof Label;
     Prefix: typeof FieldAddon;
     Suffix: typeof FieldAddon;

package/dist/components/text-field/dist/index.js

@@ -1,6 +1,7 @@
+import { Description } from "../../description/dist/index.js";
 import { Input } from "../../input/dist/index.js";
 import { Label } from "../../label/dist/index.js";
-import { forwardRef, memo, Children, isValidElement, useId, cloneElement } from "react";
+import { forwardRef, Children, isValidElement, useId, cloneElement, memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
 var FieldAddon = memo(
@@ -17,17 +18,6 @@ var FieldAddon = memo(
   })
 );
 FieldAddon.displayName = "FieldAddon";
-var FieldDescription = memo(
-  forwardRef(function FieldDescription2(props, ref) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        ...props
-      }
-    );
-  })
-);
 var TextFieldTv = tcv({
   slots: {
     container: ["flex min-w-0 flex-col items-start gap-2"],
@@ -41,12 +31,7 @@ var TextFieldTv = tcv({
     input: "[grid-area:input]",
     prefix: "[grid-area:prefix]",
     suffix: "[grid-area:suffix]",
-    description: [
-      "text-body-medium mt-1",
-      "px-0.5",
-      "break-words whitespace-pre-wrap",
-      "text-secondary-foreground"
-    ]
+    description: ""
   },
   variants: {
     variant: {
@@ -257,7 +242,7 @@ var TextField = Object.assign(TextFieldBase, {
   Prefix: PrefixComponent,
   Suffix: SuffixComponent,
   Label,
-  Description: FieldDescription
+  Description
 });
 export {
   TextField

package/dist/components/text-field/src/components/index.d.ts

@@ -1,2 +1 @@
 export * from './field-addon';
-export * from './field-description';

package/dist/components/text-field/src/text-field.d.ts

@@ -1,12 +1,13 @@
+import { Description } from '../../description/src';
 import { InputProps } from '../../input/src';
 import { Label } from '../../label/src';
 import { default as React, ReactNode } from 'react';
-import { FieldAddon, FieldDescription } from './components';
+import { FieldAddon } from './components';
 export interface TextFieldProps extends Omit<InputProps, "children"> {
     children?: ReactNode;
 }
 interface TextFieldComponent extends React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>> {
-    Description: typeof FieldDescription;
+    Description: typeof Description;
     Label: typeof Label;
     Prefix: typeof FieldAddon;
     Suffix: typeof FieldAddon;

package/dist/components/text-field/src/text-field.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Description } from "../../description/dist/index.js";
 import { Input } from "../../input/dist/index.js";
 import { Label } from "../../label/dist/index.js";
 import { forwardRef, Children, isValidElement, useId, cloneElement } from "react";
 import { TextFieldTv } from "./tv.js";
-import { FieldDescription } from "./components/field-description.js";
 import { FieldAddon } from "./components/field-addon.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const TextFieldContent = ({
@@ -98,7 +98,7 @@ const TextField = Object.assign(TextFieldBase, {
   Prefix: PrefixComponent,
   Suffix: SuffixComponent,
   Label,
-  Description: FieldDescription
+  Description
 });
 export {
   TextField

package/dist/components/text-field/src/tv.d.ts

@@ -49,7 +49,7 @@ export declare const TextFieldTv: import('tailwind-variants').TVReturnType<{
     input: string;
     prefix: string;
     suffix: string;
-    description: string[];
+    description: string;
 }, undefined, {
     variant: {
         default: {};
@@ -101,7 +101,7 @@ export declare const TextFieldTv: import('tailwind-variants').TVReturnType<{
     input: string;
     prefix: string;
     suffix: string;
-    description: string[];
+    description: string;
 }, import('tailwind-variants').TVReturnType<{
     variant: {
         default: {};
@@ -153,5 +153,5 @@ export declare const TextFieldTv: import('tailwind-variants').TVReturnType<{
     input: string;
     prefix: string;
     suffix: string;
-    description: string[];
+    description: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/text-field/src/tv.js

@@ -12,12 +12,7 @@ const TextFieldTv = tcv({
     input: "[grid-area:input]",
     prefix: "[grid-area:prefix]",
     suffix: "[grid-area:suffix]",
-    description: [
-      "text-body-medium mt-1",
-      "px-0.5",
-      "break-words whitespace-pre-wrap",
-      "text-secondary-foreground"
-    ]
+    description: ""
   },
   variants: {
     variant: {