@choice-ui/react 1.9.2 → 1.9.4

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

@@ -246,6 +246,13 @@ const buttonTv = tcv({
       variant: "secondary",
       active: false,
       class: { button: "hover:bg-secondary-background" }
+    },
+    {
+      disabled: false,
+      loading: false,
+      variant: "secondary-destruct",
+      active: false,
+      class: { button: "hover:bg-danger-background/10" }
     }
   ],
   defaultVariants: {

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

@@ -43,6 +43,10 @@ interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
     keywords?: string[];
     onSelect?: (value: string) => void;
     prefixElement?: ReactNode;
+    /**
+     * When true, this item will be set as the selected item and scrolled into view.
+     */
+    selected?: boolean;
     shortcut?: {
         keys?: ReactNode;
         modifier?: KbdKey | KbdKey[] | undefined;
@@ -106,6 +110,11 @@ interface CommandProps extends Omit<react__default.HTMLAttributes<HTMLDivElement
      * Event handler called when the selected item of the menu changes.
      */
     onChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to enable selection mode.
+     * When enabled, items with `selected` prop will be scrolled into view on mount.
+     */
+    selection?: boolean;
     /**
      * Optionally set to `false` to turn off the automatic filtering and sorting.
      * If `false`, you must conditionally render valid items based on the search query yourself.
@@ -140,6 +149,7 @@ type Context = {
     labelId: string;
     listId: string;
     listInnerRef: react__default.MutableRefObject<HTMLDivElement | null>;
+    selection?: boolean;
     size?: "default" | "large";
     store: Store;
     value: (id: string, value?: string, keywords?: string[]) => void;

package/dist/components/command/src/command.js

@@ -42,6 +42,7 @@ const Command = forwardRef((props, forwardedRef) => {
     onChange: onValueChange,
     filter,
     shouldFilter,
+    selection,
     loop,
     size = "default",
     variant = "default",
@@ -253,6 +254,7 @@ const Command = forwardRef((props, forwardedRef) => {
       propsRef,
       schedule,
       selectFirstItem,
+      selection,
       size,
       sort,
       state,

package/dist/components/command/src/components/command-item.d.ts

@@ -6,6 +6,10 @@ export interface CommandItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSel
     keywords?: string[];
     onSelect?: (value: string) => void;
     prefixElement?: ReactNode;
+    /**
+     * When true, this item will be set as the selected item and scrolled into view.
+     */
+    selected?: boolean;
     shortcut?: {
         keys?: ReactNode;
         modifier?: KbdKey | KbdKey[] | undefined;

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

@@ -16,6 +16,7 @@ const CommandItem = memo(
       forceMount,
       keywords,
       onSelect,
+      selected: selectedProp,
       value,
       children,
       prefixElement,
@@ -50,6 +51,11 @@ const CommandItem = memo(
     const stableKeywords = useMemo(() => keywords || [], [keywords]);
     const valueRef = useValue(id, ref, valueDeps, stableKeywords);
     const store = context.store;
+    useEffect(() => {
+      if (context.selection && selectedProp && valueRef.current) {
+        store.setState("value", valueRef.current);
+      }
+    }, [selectedProp]);
     const selected = useCommandState(
       (state) => Boolean(state.value && state.value === (valueRef == null ? void 0 : valueRef.current))
     );

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

@@ -58,6 +58,7 @@ const CommandList = forwardRef((props, forwardedRef) => {
           },
           ...rest,
           className: tcx(tv.root({ className })),
+          style: context.selection ? { scrollPaddingBlock: 8 } : void 0,
           role: "listbox",
           tabIndex: -1,
           "aria-activedescendant": selectedItemId,

package/dist/components/command/src/context/create-command-context.d.ts

@@ -16,6 +16,7 @@ interface CreateCommandContextOptions {
     propsRef: React.MutableRefObject<CommandProps>;
     schedule: (id: string | number, cb: () => void) => void;
     selectFirstItem: () => void;
+    selection?: boolean;
     size?: "default" | "large";
     sort: () => void;
     state: React.MutableRefObject<State>;

package/dist/components/command/src/context/create-command-context.js

@@ -13,6 +13,7 @@ function createCommandContext(options) {
     propsRef,
     schedule,
     selectFirstItem,
+    selection,
     size,
     sort,
     state,
@@ -93,6 +94,7 @@ function createCommandContext(options) {
     inputId,
     labelId,
     listInnerRef,
+    selection,
     store,
     size,
     variant

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

@@ -7,7 +7,7 @@ const commandTv = tcv({
   variants: {
     variant: {
       default: {
-        root: "bg-default-background text-default-foreground",
+        root: "text-default-foreground",
         divider: "bg-default-boundary"
       },
       dark: {

package/dist/components/command/src/types.d.ts

@@ -27,6 +27,11 @@ export interface CommandProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Event handler called when the selected item of the menu changes.
      */
     onChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to enable selection mode.
+     * When enabled, items with `selected` prop will be scrolled into view on mount.
+     */
+    selection?: boolean;
     /**
      * Optionally set to `false` to turn off the automatic filtering and sorting.
      * If `false`, you must conditionally render valid items based on the search query yourself.
@@ -61,6 +66,7 @@ export type Context = {
     labelId: string;
     listId: string;
     listInnerRef: React.MutableRefObject<HTMLDivElement | null>;
+    selection?: boolean;
     size?: "default" | "large";
     store: Store;
     value: (id: string, value?: string, keywords?: string[]) => void;

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

@@ -2,6 +2,11 @@ import { MenuButton, MenuContextContent, MenuContextItem, MenuContextLabel, Menu
 import { FloatingFocusManagerProps, Placement } from '@floating-ui/react';
 import { default as React } from 'react';
 export interface DropdownProps {
+    /**
+     * Active index for keyboard navigation (controlled).
+     * When provided, the component becomes controlled for activeIndex.
+     */
+    activeIndex?: number | null;
     /**
      * Whether to automatically select the first item in coordinate mode.
      * @default true
@@ -14,10 +19,21 @@ export interface DropdownProps {
      */
     avoidCollisions?: boolean;
     children?: React.ReactNode;
+    /**
+     * Disable internal keyboard navigation.
+     * Useful when implementing custom keyboard handling externally.
+     * @default false
+     */
+    disableKeyboardNavigation?: boolean;
     disabledNested?: boolean;
     focusManagerProps?: Partial<FloatingFocusManagerProps>;
     matchTriggerWidth?: boolean;
     offset?: number;
+    /**
+     * Callback when active index changes.
+     * Use with activeIndex prop for controlled keyboard navigation.
+     */
+    onActiveIndexChange?: (index: number | null) => void;
     onOpenChange?: (open: boolean) => void;
     open?: boolean;
     placement?: Placement;

package/dist/components/dropdown/src/dropdown.js

@@ -12,8 +12,10 @@ const DEFAULT_OFFSET = 4;
 const DropdownComponent = memo(function DropdownComponent2(props) {
   const {
     children,
+    activeIndex: controlledActiveIndex,
     autoSelectFirstItem = true,
     avoidCollisions = true,
+    disableKeyboardNavigation = false,
     disabledNested = false,
     offset: offsetDistance = DEFAULT_OFFSET,
     placement = "bottom-start",
@@ -23,6 +25,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     selection = false,
     matchTriggerWidth = false,
     open: controlledOpen,
+    onActiveIndexChange,
     onOpenChange,
     triggerRef,
     triggerSelector,
@@ -39,10 +42,12 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
   const { scrollRef, elementsRef, labelsRef, selectTimeoutRef } = useMenuBaseRefs();
   const [isOpen, setIsOpen] = useState(false);
   const [hasFocusInside, setHasFocusInside] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(null);
+  const [internalActiveIndex, setInternalActiveIndex] = useState(null);
   const [scrollTop, setScrollTop] = useState(0);
   const [touch, setTouch] = useState(false);
   const [isMouseOverMenu, setIsMouseOverMenu] = useState(false);
+  const isControlledActiveIndex = controlledActiveIndex !== void 0;
+  const activeIndex = isControlledActiveIndex ? controlledActiveIndex : internalActiveIndex;
   const isCoordinateMode = position !== null && position !== void 0;
   const isControlledOpen = isCoordinateMode ? controlledOpen || false : controlledOpen === void 0 ? isOpen : controlledOpen;
   const baseId = useId();
@@ -119,6 +124,12 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     middleware,
     whileElementsMounted: autoUpdate
   });
+  const handleSetActiveIndex = useEventCallback((index) => {
+    if (!isControlledActiveIndex) {
+      setInternalActiveIndex(index);
+    }
+    onActiveIndexChange == null ? void 0 : onActiveIndexChange(index);
+  });
   useIsomorphicLayoutEffect(() => {
     if (position && isCoordinateMode && isControlledOpen && (!lastPositionRef.current || lastPositionRef.current.x !== position.x || lastPositionRef.current.y !== position.y)) {
       setVirtualPosition(position);
@@ -127,14 +138,14 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
   }, [position, isCoordinateMode, isControlledOpen, setVirtualPosition]);
   useEffect(() => {
     if (isCoordinateMode && isControlledOpen && activeIndex === null && !isMouseOverMenu) {
-      setActiveIndex(autoSelectFirstItem ? 0 : null);
+      handleSetActiveIndex(autoSelectFirstItem ? 0 : null);
     }
-  }, [isCoordinateMode, isControlledOpen, activeIndex, isMouseOverMenu, autoSelectFirstItem]);
+  }, [isCoordinateMode, isControlledOpen, activeIndex, isMouseOverMenu, autoSelectFirstItem, handleSetActiveIndex]);
   useEffect(() => {
     if (isCoordinateMode && !isControlledOpen) {
-      setActiveIndex(null);
+      handleSetActiveIndex(null);
     }
-  }, [isCoordinateMode, isControlledOpen]);
+  }, [isCoordinateMode, isControlledOpen, handleSetActiveIndex]);
   const isOpenRef = useRef(isControlledOpen);
   isOpenRef.current = isControlledOpen;
   useEffect(() => {
@@ -170,7 +181,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     escapeKey: true
   });
   const handleNavigate = useEventCallback((index) => {
-    setActiveIndex(index);
+    handleSetActiveIndex(index);
     if (tree && index !== null) {
       tree.events.emit("navigate", { nodeId, index });
     }
@@ -180,12 +191,14 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     activeIndex,
     nested: isNested,
     onNavigate: handleNavigate,
-    loop: true
+    loop: true,
+    enabled: !disableKeyboardNavigation
   });
   const typeahead = useTypeahead(context, {
     listRef: labelsRef,
-    onMatch: isControlledOpen ? setActiveIndex : void 0,
-    activeIndex
+    onMatch: isControlledOpen ? handleSetActiveIndex : void 0,
+    activeIndex,
+    enabled: !disableKeyboardNavigation
   });
   const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
     hover,
@@ -278,7 +291,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
   const contextValue = useMemo(
     () => ({
       activeIndex,
-      setActiveIndex,
+      setActiveIndex: handleSetActiveIndex,
       getItemProps,
       setHasFocusInside,
       isOpen: isControlledOpen,
@@ -287,7 +300,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
       close: handleClose,
       variant
     }),
-    [activeIndex, getItemProps, handleClose, isControlledOpen, readOnly, selection, variant]
+    [activeIndex, getItemProps, handleClose, handleSetActiveIndex, isControlledOpen, readOnly, selection, variant]
   );
   const parentActiveIndex = parent == null ? void 0 : parent.activeIndex;
   const parentGetItemProps = parent == null ? void 0 : parent.getItemProps;

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

@@ -67,7 +67,7 @@ interface ListProps extends Omit<HTMLProps<HTMLDivElement>, "size" | "as"> {
     selection?: boolean;
     shouldShowReferenceLine?: boolean;
     size?: "default" | "large";
-    variant?: "default" | "primary";
+    variant?: "default" | "primary" | "dark" | "reset";
 }
 interface ListComponentProps extends React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof ListContent;

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

@@ -6,7 +6,7 @@ import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ListContent = forwardRef((props, ref) => {
   const { as: As = "div", children, className, parentId, ...rest } = props;
   const { isSubListExpanded } = useExpandContext();
-  const { itemsMap, shouldShowReferenceLine, size } = useStructureContext();
+  const { itemsMap, shouldShowReferenceLine, size, variant } = useStructureContext();
   const level = useMemo(() => {
     if (!parentId) return 0;
     let currentLevel = 1;
@@ -32,7 +32,8 @@ const ListContent = forwardRef((props, ref) => {
   const tv = ListContentTv({
     showReferenceLine: shouldShowReferenceLine,
     level: safeLevel,
-    size
+    size,
+    variant
   });
   return /* @__PURE__ */ jsx(LevelContext.Provider, { value: { level: safeLevel }, children: /* @__PURE__ */ jsx(
     As,

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

@@ -1,11 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { ListDividerTv } from "../tv.js";
+import { useStructureContext } from "../context/list-context.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 const ListDivider = forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
-    const tv = ListDividerTv();
+    const { variant = "default" } = useStructureContext();
+    const tv = ListDividerTv({ variant });
     return /* @__PURE__ */ jsx(
       "div",
       {

package/dist/components/list/src/context/list-context.d.ts

@@ -28,7 +28,7 @@ interface StructureContextValue {
     shouldShowReferenceLine?: boolean;
     size?: "default" | "large";
     unregisterItem: (id: string) => void;
-    variant?: "default" | "primary";
+    variant?: "default" | "primary" | "dark" | "reset";
 }
 export declare const StructureContext: import('react').Context<StructureContextValue | undefined>;
 export declare function useStructureContext(): StructureContextValue;

package/dist/components/list/src/context/list-provider.d.ts

@@ -5,7 +5,7 @@ interface ListProviderProps {
     selection?: boolean;
     shouldShowReferenceLine?: boolean;
     size?: "default" | "large";
-    variant?: "default" | "primary";
+    variant?: "default" | "primary" | "dark" | "reset";
 }
 export declare function ListProvider({ children, interactive, shouldShowReferenceLine, selection, variant, size, }: ListProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -12,7 +12,7 @@ export interface ListProps extends Omit<HTMLProps<HTMLDivElement>, "size" | "as"
     selection?: boolean;
     shouldShowReferenceLine?: boolean;
     size?: "default" | "large";
-    variant?: "default" | "primary";
+    variant?: "default" | "primary" | "dark" | "reset";
 }
 interface ListComponentProps extends React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>> {
     Content: typeof ListContent;

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

@@ -28,6 +28,8 @@ export declare const ListItemTv: import('tailwind-variants').TVReturnType<{
     variant: {
         default: {};
         primary: {};
+        dark: {};
+        reset: {};
     };
     size: {
         default: {
@@ -78,6 +80,8 @@ export declare const ListItemTv: import('tailwind-variants').TVReturnType<{
     variant: {
         default: {};
         primary: {};
+        dark: {};
+        reset: {};
     };
     size: {
         default: {
@@ -128,6 +132,8 @@ export declare const ListItemTv: import('tailwind-variants').TVReturnType<{
     variant: {
         default: {};
         primary: {};
+        dark: {};
+        reset: {};
     };
     size: {
         default: {
@@ -167,33 +173,51 @@ export declare const ListLabelTv: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, "flex h-6 w-full flex-none items-center gap-2 opacity-50", unknown, unknown, undefined>>;
 export declare const ListDividerTv: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            divider?: import('tailwind-merge').ClassNameValue;
+    variant: {
+        default: {
+            divider: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            divider?: import('tailwind-merge').ClassNameValue;
+        primary: {
+            divider: string;
+        };
+        dark: {
+            divider: string;
         };
+        reset: {};
     };
-} | {}, {
+}, {
     root: string;
     divider: string;
 }, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            root?: import('tailwind-merge').ClassNameValue;
-            divider?: import('tailwind-merge').ClassNameValue;
+    variant: {
+        default: {
+            divider: string;
+        };
+        primary: {
+            divider: string;
         };
+        dark: {
+            divider: string;
+        };
+        reset: {};
     };
-} | {}, {
+}, {
     root: string;
     divider: string;
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {
+            divider: string;
+        };
+        primary: {
+            divider: string;
+        };
+        dark: {
+            divider: string;
+        };
+        reset: {};
+    };
+}, {
     root: string;
     divider: string;
 }, undefined, unknown, unknown, undefined>>;
@@ -206,6 +230,12 @@ export declare const ListContentTv: import('tailwind-variants').TVReturnType<{
         default: {};
         large: {};
     };
+    variant: {
+        default: {};
+        primary: {};
+        dark: {};
+        reset: {};
+    };
     level: {
         0: string;
         1: string;
@@ -223,6 +253,12 @@ export declare const ListContentTv: import('tailwind-variants').TVReturnType<{
         default: {};
         large: {};
     };
+    variant: {
+        default: {};
+        primary: {};
+        dark: {};
+        reset: {};
+    };
     level: {
         0: string;
         1: string;
@@ -240,6 +276,12 @@ export declare const ListContentTv: import('tailwind-variants').TVReturnType<{
         default: {};
         large: {};
     };
+    variant: {
+        default: {};
+        primary: {};
+        dark: {};
+        reset: {};
+    };
     level: {
         0: string;
         1: string;

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

@@ -46,7 +46,9 @@ const ListItemTv = tcv({
     },
     variant: {
       default: {},
-      primary: {}
+      primary: {},
+      dark: {},
+      reset: {}
     },
     size: {
       default: {
@@ -91,6 +93,15 @@ const ListItemTv = tcv({
         shortcut: "text-default-foreground"
       }
     },
+    {
+      disabled: false,
+      active: true,
+      variant: "dark",
+      class: {
+        root: "bg-white/10",
+        shortcut: "text-white"
+      }
+    },
     {
       size: "default",
       hasPrefix: false,
@@ -208,9 +219,25 @@ const ListLabelTv = tcv({
 const ListDividerTv = tcv({
   slots: {
     root: "flex h-4 w-full flex-none items-center",
-    divider: "bg-default-boundary h-px flex-1"
+    divider: "h-px flex-1"
   },
-  defaultVariants: {}
+  variants: {
+    variant: {
+      default: {
+        divider: "bg-default-boundary"
+      },
+      primary: {
+        divider: "bg-default-boundary"
+      },
+      dark: {
+        divider: "bg-white/10"
+      },
+      reset: {}
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
 });
 const ListContentTv = tcv({
   base: "group/list flex flex-col gap-1",
@@ -223,6 +250,12 @@ const ListContentTv = tcv({
       default: {},
       large: {}
     },
+    variant: {
+      default: {},
+      primary: {},
+      dark: {},
+      reset: {}
+    },
     level: {
       0: "",
       1: "",
@@ -238,10 +271,17 @@ const ListContentTv = tcv({
       level: [1, 2, 3, 4, 5],
       class: [
         "relative",
-        "before:absolute before:inset-y-0 before:z-1 before:w-px before:content-['']",
-        "group-hover/list:before:bg-default-boundary"
+        "before:absolute before:inset-y-0 before:z-1 before:w-px before:content-['']"
       ]
     },
+    {
+      variant: ["default", "primary"],
+      class: "group-hover/list:before:bg-default-boundary"
+    },
+    {
+      variant: "dark",
+      class: "group-hover/list:before:bg-white/10"
+    },
     {
       size: "default",
       level: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.9.2",
+  "version": "1.9.4",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",