@choice-ui/react 1.9.3 → 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/package.json

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