@choice-ui/react 1.4.3 → 1.4.5

package/dist/components/hint/src/hint.js

@@ -1,49 +1,44 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { InfoCircle } from "@choiceform/icons-react";
+import { Children, isValidElement, useMemo } from "react";
 import { HintContext } from "./context/hint-context.js";
 import { useHintState } from "./context/hint-context.js";
-import { useHint } from "./hooks/use-hint.js";
-import { HintTrigger } from "./components/info-trigger.js";
 import { HintContent } from "./components/info-content.js";
-const PORTAL_ROOT_ID = "floating-tooltip-root";
-function Hint({
+import { HintTrigger } from "./components/info-trigger.js";
+import { useHint } from "./hooks/use-hint.js";
+function HintRoot({
   children,
-  content,
+  delay = 0,
   disabled = false,
   onOpenChange,
   open,
-  placement = "right-start",
-  className,
-  icon = /* @__PURE__ */ jsx(InfoCircle, {}),
-  portalId = PORTAL_ROOT_ID,
-  variant = "default"
+  placement = "right-start"
 }) {
+  var _a;
   const hint = useHint({
+    delay,
     disabled,
     onOpenChange,
     open,
     placement
   });
-  return /* @__PURE__ */ jsxs(HintContext.Provider, { value: hint, children: [
-    /* @__PURE__ */ jsx(
-      HintTrigger,
-      {
-        className,
-        icon,
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      HintContent,
-      {
-        icon,
-        portalId,
-        variant,
-        children: content
-      }
-    )
+  const childrenArray = Children.toArray(children);
+  const triggerElement = childrenArray.find((child) => {
+    if (!isValidElement(child)) return false;
+    const type = child.type;
+    return type === HintTrigger || type.displayName === "HintTrigger";
+  });
+  const icon = ((_a = triggerElement == null ? void 0 : triggerElement.props) == null ? void 0 : _a.children) || /* @__PURE__ */ jsx(InfoCircle, {});
+  const contextValue = useMemo(() => ({ ...hint, icon }), [hint, icon]);
+  return /* @__PURE__ */ jsxs(HintContext.Provider, { value: contextValue, children: [
+    !triggerElement && /* @__PURE__ */ jsx(HintTrigger, {}),
+    children
   ] });
 }
+const Hint = Object.assign(HintRoot, {
+  Trigger: HintTrigger,
+  Content: HintContent
+});
 export {
   Hint,
   useHintState

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

@@ -1,11 +1,12 @@
 import { Placement, UseFloatingReturn } from '@floating-ui/react';
-type HintPlacement = "left-start" | "right-start";
+type HintPlacement = "left-start" | "right-start" | "left-end" | "right-end";
 interface HintOptions {
     disabled?: boolean;
     initialOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
     placement?: HintPlacement;
+    delay?: number;
 }
 interface UseHintReturn {
     arrowRef: React.RefObject<HTMLElement>;
@@ -24,6 +25,7 @@ interface UseHintReturn {
     update: UseFloatingReturn["update"];
     x: number | null;
     y: number | null;
+    delay: number;
 }
-export declare function useHint({ initialOpen, placement, open: controlledOpen, onOpenChange: setControlledOpen, disabled, }?: HintOptions): UseHintReturn;
+export declare function useHint({ initialOpen, placement, open: controlledOpen, onOpenChange: setControlledOpen, disabled, delay, }?: HintOptions): UseHintReturn;
 export {};

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

@@ -1,11 +1,12 @@
-import { offset, flip, shift, useFloating, autoUpdate, useHover, useDismiss, useRole, useInteractions } from "@floating-ui/react";
+import { offset, flip, shift, useFloating, autoUpdate, useHover, safePolygon, useDismiss, useRole, useInteractions } from "@floating-ui/react";
 import { useState, useRef, useMemo } from "react";
 function useHint({
   initialOpen = false,
   placement = "right-start",
   open: controlledOpen,
   onOpenChange: setControlledOpen,
-  disabled = false
+  disabled = false,
+  delay = 0
 } = {}) {
   const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
   const open = controlledOpen ?? uncontrolledOpen;
@@ -31,7 +32,13 @@ function useHint({
   const context = data.context;
   const hover = useHover(context, {
     move: false,
-    enabled: !disabled
+    enabled: !disabled,
+    delay: {
+      open: delay,
+      close: 0
+    },
+    // Allow hover to floating content to keep display
+    handleClose: safePolygon()
   });
   const dismiss = useDismiss(context, {
     enabled: !disabled
@@ -44,10 +51,11 @@ function useHint({
       setOpen,
       arrowRef,
       disabled,
+      delay,
       ...interactions,
       ...data
     }),
-    [open, setOpen, disabled, interactions, data]
+    [open, setOpen, disabled, interactions, data, delay]
   );
 }
 export {

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

@@ -1,3 +1,3 @@
-export * from './components';
-export * from './hooks';
-export * from './hint';
+export { Hint } from './hint';
+export type { HintProps } from './hint';
+export type { HintContentProps, HintTriggerProps } from './components';

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

@@ -6,6 +6,9 @@ export declare const hintVariants: import('tailwind-variants').TVReturnType<{
         dark: {
             content: string;
         };
+        accent: {
+            content: string;
+        };
     };
     placement: {
         "left-start": {
@@ -14,6 +17,14 @@ export declare const hintVariants: import('tailwind-variants').TVReturnType<{
         "right-start": {
             content: string;
         };
+        "left-end": {
+            content: string;
+            icon: string;
+        };
+        "right-end": {
+            content: string;
+            icon: string;
+        };
     };
     disabled: {
         true: {
@@ -33,6 +44,9 @@ export declare const hintVariants: import('tailwind-variants').TVReturnType<{
         dark: {
             content: string;
         };
+        accent: {
+            content: string;
+        };
     };
     placement: {
         "left-start": {
@@ -41,6 +55,14 @@ export declare const hintVariants: import('tailwind-variants').TVReturnType<{
         "right-start": {
             content: string;
         };
+        "left-end": {
+            content: string;
+            icon: string;
+        };
+        "right-end": {
+            content: string;
+            icon: string;
+        };
     };
     disabled: {
         true: {
@@ -60,6 +82,9 @@ export declare const hintVariants: import('tailwind-variants').TVReturnType<{
         dark: {
             content: string;
         };
+        accent: {
+            content: string;
+        };
     };
     placement: {
         "left-start": {
@@ -68,6 +93,14 @@ export declare const hintVariants: import('tailwind-variants').TVReturnType<{
         "right-start": {
             content: string;
         };
+        "left-end": {
+            content: string;
+            icon: string;
+        };
+        "right-end": {
+            content: string;
+            icon: string;
+        };
     };
     disabled: {
         true: {

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

@@ -18,6 +18,9 @@ const hintVariants = tcv({
       },
       dark: {
         content: "bg-menu-background text-white"
+      },
+      accent: {
+        content: "bg-accent-background text-on-accent-foreground"
       }
     },
     placement: {
@@ -26,6 +29,14 @@ const hintVariants = tcv({
       },
       "right-start": {
         content: "flex-row pr-2"
+      },
+      "left-end": {
+        content: "flex-row-reverse pl-2",
+        icon: "self-end"
+      },
+      "right-end": {
+        content: "flex-row pr-2",
+        icon: "self-end"
       }
     },
     disabled: {

package/dist/components/icon-button/dist/index.js

@@ -174,7 +174,7 @@ var IconButton = forwardRef(function IconButton2(props, ref) {
     ...rest
   } = props;
   const As = asChild ? Slot : as;
-  const style = iconButtonTv({
+  const tv = iconButtonTv({
     disabled,
     active,
     focused,
@@ -189,7 +189,7 @@ var IconButton = forwardRef(function IconButton2(props, ref) {
       ...rest,
       ref,
       type: rest.type || "button",
-      className: tcx(style.button(), className),
+      className: tcx(tv.button(), className),
       disabled: disabled || loading,
       onClick: handleClick,
       children: loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : children

package/dist/components/icon-button/src/icon-button.js

@@ -23,7 +23,7 @@ const IconButton = forwardRef(function IconButton2(props, ref) {
     ...rest
   } = props;
   const As = asChild ? Slot : as;
-  const style = iconButtonTv({
+  const tv = iconButtonTv({
     disabled,
     active,
     focused,
@@ -38,7 +38,7 @@ const IconButton = forwardRef(function IconButton2(props, ref) {
       ...rest,
       ref,
       type: rest.type || "button",
-      className: tcx(style.button(), className),
+      className: tcx(tv.button(), className),
       disabled: disabled || loading,
       onClick: handleClick,
       children: loading ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : children

package/dist/components/index.d.ts

@@ -30,6 +30,7 @@ export * from './list/src';
 export * from './loader/src';
 export * from './md-input/src';
 export * from './md-render/src';
+export * from './menubar/src';
 export * from './menus/src';
 export * from './modal/src';
 export * from './multi-select/src';
@@ -47,6 +48,7 @@ export * from './scroll-area/src';
 export * from './search-input/src';
 export * from './segmented/src';
 export * from './select/src';
+export * from './separator/src';
 export * from './skeleton/src';
 export * from './slot/src';
 export * from './spinner/src';
@@ -54,6 +56,7 @@ export * from './splitter/src';
 export * from './spring-visualizer/src';
 export * from './stackflow/src';
 export * from './switch/src';
+export * from './table/src';
 export * from './tabs/src';
 export * from './text-field/src';
 export * from './textarea/src';

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

@@ -8,7 +8,7 @@ var InputTv = tcv({
     variant: {
       default: ["bg-secondary-background", "placeholder:text-secondary-foreground"],
       light: ["bg-gray-100 text-gray-900", "placeholder:text-black/50"],
-      dark: ["bg-gray-700 text-white", "placeholder:text-white/40"],
+      dark: ["bg-gray-700 text-white", "placeholder:text-white/50"],
       reset: ""
     },
     selected: {
@@ -109,7 +109,7 @@ var Input = forwardRef(function Input2(props, ref) {
   useUnmount(() => {
     onIsEditingChange == null ? void 0 : onIsEditingChange(false);
   });
-  const styles = InputTv({ variant, selected, disabled, readOnly, size });
+  const tv = InputTv({ variant, selected, disabled, readOnly, size });
   const inputProps = useCallback(() => {
     return {
       ...rest,
@@ -121,7 +121,7 @@ var Input = forwardRef(function Input2(props, ref) {
       value,
       disabled,
       readOnly,
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       onChange: (e) => {
         onChange == null ? void 0 : onChange(e.target.value);
       },
@@ -149,7 +149,7 @@ var Input = forwardRef(function Input2(props, ref) {
     value,
     disabled,
     readOnly,
-    styles,
+    tv,
     className,
     focusSelection,
     onChange,

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

@@ -22,7 +22,7 @@ const Input = forwardRef(function Input2(props, ref) {
   useUnmount(() => {
     onIsEditingChange == null ? void 0 : onIsEditingChange(false);
   });
-  const styles = InputTv({ variant, selected, disabled, readOnly, size });
+  const tv = InputTv({ variant, selected, disabled, readOnly, size });
   const inputProps = useCallback(() => {
     return {
       ...rest,
@@ -34,7 +34,7 @@ const Input = forwardRef(function Input2(props, ref) {
       value,
       disabled,
       readOnly,
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       onChange: (e) => {
         onChange == null ? void 0 : onChange(e.target.value);
       },
@@ -62,7 +62,7 @@ const Input = forwardRef(function Input2(props, ref) {
     value,
     disabled,
     readOnly,
-    styles,
+    tv,
     className,
     focusSelection,
     onChange,

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

@@ -5,7 +5,7 @@ const InputTv = tcv({
     variant: {
       default: ["bg-secondary-background", "placeholder:text-secondary-foreground"],
       light: ["bg-gray-100 text-gray-900", "placeholder:text-black/50"],
-      dark: ["bg-gray-700 text-white", "placeholder:text-white/40"],
+      dark: ["bg-gray-700 text-white", "placeholder:text-white/50"],
       reset: ""
     },
     selected: {

package/dist/components/kbd/dist/index.js

@@ -57,24 +57,24 @@ var kbdKeysLabelMap = {
 };
 var Kbd = (props) => {
   const { className, keys, children, ...rest } = props;
-  const style = kbdTv();
+  const tv = kbdTv();
   const keysContent = useMemo(() => {
     const keysToRender = typeof keys === "string" ? [keys] : Array.isArray(keys) ? keys : [];
     return keysToRender.map((key) => /* @__PURE__ */ jsx(
       "abbr",
       {
-        className: style.abbr(),
+        className: tv.abbr(),
         title: kbdKeysLabelMap[key],
         children: kbdKeysMap[key]
       },
       key
     ));
-  }, [keys, style]);
+  }, [keys, tv]);
   return /* @__PURE__ */ jsxs(
     "kbd",
     {
       ...rest,
-      className: tcx(style.base(), className),
+      className: tcx(tv.base(), className),
       children: [
         keysContent,
         children && /* @__PURE__ */ jsx("span", { children })

package/dist/components/kbd/src/kbd.js

@@ -5,24 +5,24 @@ import { kbdKeysMap, kbdKeysLabelMap } from "./utils.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const Kbd = (props) => {
   const { className, keys, children, ...rest } = props;
-  const style = kbdTv();
+  const tv = kbdTv();
   const keysContent = useMemo(() => {
     const keysToRender = typeof keys === "string" ? [keys] : Array.isArray(keys) ? keys : [];
     return keysToRender.map((key) => /* @__PURE__ */ jsx(
       "abbr",
       {
-        className: style.abbr(),
+        className: tv.abbr(),
         title: kbdKeysLabelMap[key],
         children: kbdKeysMap[key]
       },
       key
     ));
-  }, [keys, style]);
+  }, [keys, tv]);
   return /* @__PURE__ */ jsxs(
     "kbd",
     {
       ...rest,
-      className: tcx(style.base(), className),
+      className: tcx(tv.base(), className),
       children: [
         keysContent,
         children && /* @__PURE__ */ jsx("span", { children })

package/dist/components/label/dist/index.js

@@ -4,10 +4,10 @@ import { tcv } from "../../../shared/utils/tcx/tcx.js";
 var labelTv = tcv({
   slots: {
     root: "text-body-medium cursor-default self-start px-0.5",
-    content: "font-strong",
+    content: "font-strong align-middle",
     required: "",
-    description: "ml-1",
-    action: "relative ml-1 inline-flex align-middle"
+    description: "ml-1 align-middle",
+    action: "relative ml-1 inline-flex align-middle h-4 items-center justify-center"
   },
   variants: {
     disabled: {

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

@@ -2,10 +2,10 @@ import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const labelTv = tcv({
   slots: {
     root: "text-body-medium cursor-default self-start px-0.5",
-    content: "font-strong",
+    content: "font-strong align-middle",
     required: "",
-    description: "ml-1",
-    action: "relative ml-1 inline-flex align-middle"
+    description: "ml-1 align-middle",
+    action: "relative ml-1 inline-flex align-middle h-4 items-center justify-center"
   },
   variants: {
     disabled: {

package/dist/components/link-button/dist/index.js

@@ -34,7 +34,7 @@ var LinkButton = forwardRef(
       onClick,
       ...rest
     } = props;
-    const styles = linkButtonTv({ variant, disabled });
+    const tv = linkButtonTv({ variant, disabled });
     if ("href" in props && props.href) {
       const { href, target, rel, ...anchorProps } = rest;
       const isExternal = href.startsWith("http") || href.startsWith("//");
@@ -48,7 +48,7 @@ var LinkButton = forwardRef(
           href: disabled || readOnly ? void 0 : href,
           target: safeTarget,
           rel: safeRel,
-          className: tcx(styles, className),
+          className: tcx(tv, className),
           "aria-disabled": disabled || readOnly,
           tabIndex: disabled || readOnly ? -1 : void 0,
           onClick: handleClick2,
@@ -65,7 +65,7 @@ var LinkButton = forwardRef(
         ref,
         type: "button",
         disabled: disabled || readOnly,
-        className: tcx(styles, className),
+        className: tcx(tv, className),
         onClick: handleClick,
         ...buttonProps,
         children

package/dist/components/link-button/src/link-button.js

@@ -34,7 +34,7 @@ const LinkButton = forwardRef(
       onClick,
       ...rest
     } = props;
-    const styles = linkButtonTv({ variant, disabled });
+    const tv = linkButtonTv({ variant, disabled });
     if ("href" in props && props.href) {
       const { href, target, rel, ...anchorProps } = rest;
       const isExternal = href.startsWith("http") || href.startsWith("//");
@@ -48,7 +48,7 @@ const LinkButton = forwardRef(
           href: disabled || readOnly ? void 0 : href,
           target: safeTarget,
           rel: safeRel,
-          className: tcx(styles, className),
+          className: tcx(tv, className),
           "aria-disabled": disabled || readOnly,
           tabIndex: disabled || readOnly ? -1 : void 0,
           onClick: handleClick2,
@@ -65,7 +65,7 @@ const LinkButton = forwardRef(
         ref,
         type: "button",
         disabled: disabled || readOnly,
-        className: tcx(styles, className),
+        className: tcx(tv, className),
         onClick: handleClick,
         ...buttonProps,
         children

package/dist/components/list/src/components/list-content.js

@@ -29,7 +29,7 @@ const ListContent = forwardRef((props, ref) => {
     return null;
   }
   const safeLevel = level > 5 ? 5 : level < 0 ? 0 : level;
-  const styles = ListContentTv({
+  const tv = ListContentTv({
     showReferenceLine: shouldShowReferenceLine,
     level: safeLevel,
     size
@@ -40,7 +40,7 @@ const ListContent = forwardRef((props, ref) => {
       ref,
       role: "group",
       "data-level": safeLevel,
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       ...rest,
       children
     }

package/dist/components/list/src/components/list-divider.js

@@ -5,15 +5,15 @@ import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ListDivider = forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
-    const styles = ListDividerTv();
+    const tv = ListDividerTv();
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         role: "separator",
         ...rest,
-        className: tcx(styles.root(), className),
-        children: /* @__PURE__ */ jsx("div", { className: styles.divider() })
+        className: tcx(tv.root(), className),
+        children: /* @__PURE__ */ jsx("div", { className: tv.divider() })
       }
     );
   }

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

@@ -50,7 +50,7 @@ const ListItem = memo(
       }
     }, [activeItem, id, interactive]);
     const safeLevel = level > 5 ? 5 : level < 0 ? 0 : level;
-    const styles = ListItemTv({
+    const tv = ListItemTv({
       active: active || activeItem === id,
       disabled,
       selected: selected || isSelected(id),
@@ -103,7 +103,7 @@ const ListItem = memo(
         ref: mergedRef,
         id,
         role: "listitem",
-        className: tcx(styles.root(), className),
+        className: tcx(tv.root(), className),
         tabIndex,
         disabled: interactive ? disabled : void 0,
         "aria-disabled": disabled,
@@ -118,17 +118,17 @@ const ListItem = memo(
         onKeyDown: handleKeyDown,
         onClick: handleClick,
         children: [
-          prefixElement && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: prefixElement }),
+          prefixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: prefixElement }),
           children,
           hasValidShortcut && /* @__PURE__ */ jsx(
             Kbd,
             {
-              className: styles.shortcut(),
+              className: tv.shortcut(),
               keys: shortcut.modifier,
               children: shortcut.keys
             }
           ),
-          suffixElement && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: suffixElement })
+          suffixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: suffixElement })
         ]
       }
     );

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

@@ -6,13 +6,13 @@ import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ListLabel = forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
   const { selection } = useSelectionContext();
-  const styles = ListLabelTv({ selection });
+  const tv = ListLabelTv({ selection });
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       ...rest,
-      className: tcx(styles, className),
+      className: tcx(tv, className),
       children
     }
   );

package/dist/components/list/src/components/list-sub-trigger.js

@@ -52,7 +52,7 @@ const ListSubTrigger = memo(
       }
     }, [defaultOpen, id, isOpen, toggleSubList]);
     const safeLevel = level > 5 ? 5 : level < 0 ? 0 : level;
-    const styles = ListItemTv({
+    const tv = ListItemTv({
       active: (active || activeItem === id) && !disableCollapse,
       disabled,
       hasPrefix: !!prefixElement,
@@ -88,7 +88,7 @@ const ListSubTrigger = memo(
         id,
         type: "button",
         role: "button",
-        className: tcx(styles.root(), className),
+        className: tcx(tv.root(), className),
         tabIndex: activeItem === id ? 0 : -1,
         disabled,
         "aria-disabled": disabled,
@@ -101,9 +101,9 @@ const ListSubTrigger = memo(
         onMouseLeave: handleMouseLeave,
         onClick: handleClick,
         children: [
-          prefixElement && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: typeof prefixElement === "function" ? prefixElement(isOpen) : prefixElement }),
+          prefixElement && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: typeof prefixElement === "function" ? prefixElement(isOpen) : prefixElement }),
           children,
-          !disableCollapse && /* @__PURE__ */ jsx("div", { className: styles.icon(), children: typeof suffixElement === "function" ? suffixElement(isOpen) : suffixElement || defaultSuffixElement })
+          !disableCollapse && /* @__PURE__ */ jsx("div", { className: tv.icon(), children: typeof suffixElement === "function" ? suffixElement(isOpen) : suffixElement || defaultSuffixElement })
         ]
       }
     );