@choice-ui/react 1.6.4 → 1.6.6

package/dist/components/numeric-input/dist/index.d.ts

@@ -58,12 +58,13 @@ interface NumericInputContextValue {
     readOnly?: boolean;
     selected?: boolean;
     shiftStep?: number;
+    size?: "default" | "large";
     step?: number;
     value?: NumericInputValue;
     variant?: "default" | "light" | "dark" | "reset";
 }
 
-interface NumericInputProps extends NumericInputContextValue, Omit<HTMLProps<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "children" | "max" | "min" | "step" | "disabled" | "id"> {
+interface NumericInputProps extends NumericInputContextValue, Omit<HTMLProps<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "children" | "max" | "min" | "step" | "disabled" | "id" | "size"> {
     children?: ReactNode;
     className?: string;
     classNames?: {

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

@@ -22,9 +22,9 @@ function useNumericInputContext() {
 }
 var NumericInputTv = tcv({
   slots: {
-    container: ["group/input grid h-6 before:border-transparent", "input__number"],
-    input: ["peer", "h-6 w-full", "cursor-default appearance-none truncate"],
-    tooltip: "col-span-3 col-start-1 row-start-1 h-6"
+    container: ["group/input grid before:border-transparent", "input__number"],
+    input: ["peer", "w-full", "cursor-default appearance-none truncate"],
+    tooltip: "col-span-3 col-start-1 row-start-1"
   },
   variants: {
     variant: {
@@ -39,6 +39,18 @@ var NumericInputTv = tcv({
       },
       reset: {}
     },
+    size: {
+      default: {
+        container: ["h-6", "input__number--default"],
+        input: "h-6",
+        tooltip: "h-6"
+      },
+      large: {
+        container: ["h-8", "input__number--large"],
+        input: "h-8",
+        tooltip: "h-8"
+      }
+    },
     prefixElement: {
       true: {},
       false: {}
@@ -161,6 +173,7 @@ var NumericInputTv = tcv({
   ],
   defaultVariants: {
     variant: "default",
+    size: "default",
     selected: false,
     disabled: false,
     focused: false
@@ -172,6 +185,10 @@ var NumericInputMenuTriggerTv = tcv({
     disabled: {
       true: ""
     },
+    size: {
+      default: "",
+      large: ""
+    },
     type: {
       menu: "",
       action: ""
@@ -219,6 +236,7 @@ var NumericInputMenuTriggerTv = tcv({
   ],
   defaultVariants: {
     disabled: false,
+    size: "default",
     type: "menu",
     variant: "default"
   }
@@ -323,7 +341,7 @@ var NumericInputVariableTv = tcv({
   }
 });
 var NumericInputElementTv = tcv({
-  base: ["select-none", "z-2 h-6 w-6", "flex flex-none items-center justify-center"],
+  base: ["select-none", "z-2", "flex flex-none items-center justify-center"],
   variants: {
     type: {
       handler: "select-none",
@@ -334,6 +352,10 @@ var NumericInputElementTv = tcv({
       prefix: "rounded-l-md",
       suffix: "rounded-r-md"
     },
+    size: {
+      default: "h-6 w-6",
+      large: "h-8 w-8"
+    },
     disabled: {
       true: "text-disabled-foreground",
       false: "text-secondary-foreground"
@@ -394,25 +416,31 @@ var NumericInputElementTv = tcv({
   ],
   defaultVariants: {
     disabled: false,
-    variant: "default"
+    variant: "default",
+    size: "default"
   }
 });
 var NumericInputMenuActionPromptTv = tcv({
   base: [
     "[grid-area:action]",
-    "w-6 pr-2",
+    "pr-2",
     "flex items-center justify-center",
     "rounded-r-md",
     "pointer-events-none z-3"
   ],
   variants: {
+    size: {
+      default: "w-6",
+      large: "w-8"
+    },
     disabled: {
       true: "text-secondary-foreground bg-default-background",
       false: "bg-secondary-background group-focus-within/input:hidden group-hover/input:hidden"
     }
   },
   defaultVariants: {
-    disabled: false
+    disabled: false,
+    size: "default"
   }
 });
 var NumericInputElement = memo(
@@ -423,6 +451,7 @@ var NumericInputElement = memo(
     const tv = NumericInputElementTv({
       type,
       position,
+      size: context.size,
       disabled: context.disabled,
       variant: context.variant
     });
@@ -450,6 +479,7 @@ var NumericInputMenuTrigger = forwardRef(
     const context = useNumericInputContext();
     const tv = NumericInputMenuTriggerTv({
       type,
+      size: context.size,
       disabled: context.disabled,
       variant: context.variant
     });
@@ -457,6 +487,7 @@ var NumericInputMenuTrigger = forwardRef(
       IconButton,
       {
         ref,
+        size: context.size,
         variant: type === "menu" ? context.disabled ? "ghost" : "solid" : void 0,
         className: tcx(tv, className),
         disabled: context.disabled,
@@ -474,7 +505,7 @@ var NumericInputMenuActionPrompt = forwardRef((props, ref) => {
     "div",
     {
       ref,
-      className: tcx(NumericInputMenuActionPromptTv({ disabled: context.disabled }), className),
+      className: tcx(NumericInputMenuActionPromptTv({ size: context.size, disabled: context.disabled }), className),
       ...rest,
       children
     }
@@ -1042,6 +1073,7 @@ var NumericInputBase = forwardRef((props, ref) => {
     readOnly,
     required,
     shiftStep = 10,
+    size = "default",
     step = 1,
     value,
     variant = "default",
@@ -1094,6 +1126,7 @@ var NumericInputBase = forwardRef((props, ref) => {
   const contextValue = useMemo(
     () => ({
       variant,
+      size,
       // State
       value,
       defaultValue,
@@ -1120,6 +1153,7 @@ var NumericInputBase = forwardRef((props, ref) => {
     }),
     [
       variant,
+      size,
       value,
       defaultValue,
       disabled,
@@ -1175,6 +1209,7 @@ var NumericInputBase = forwardRef((props, ref) => {
   const actionPromptNode = actionPrompt[0] || null;
   const tv = NumericInputTv({
     variant,
+    size,
     selected: selected || handlerPressed,
     focused,
     disabled,

package/dist/components/numeric-input/src/components/numeric-input-element.js

@@ -11,6 +11,7 @@ const NumericInputElement = memo(
     const tv = NumericInputElementTv({
       type,
       position,
+      size: context.size,
       disabled: context.disabled,
       variant: context.variant
     });

package/dist/components/numeric-input/src/components/numeric-input-menu-trigger.js

@@ -11,6 +11,7 @@ const NumericInputMenuTrigger = forwardRef(
     const context = useNumericInputContext();
     const tv = NumericInputMenuTriggerTv({
       type,
+      size: context.size,
       disabled: context.disabled,
       variant: context.variant
     });
@@ -18,6 +19,7 @@ const NumericInputMenuTrigger = forwardRef(
       IconButton,
       {
         ref,
+        size: context.size,
         variant: type === "menu" ? context.disabled ? "ghost" : "solid" : void 0,
         className: tcx(tv, className),
         disabled: context.disabled,
@@ -35,7 +37,7 @@ const NumericInputMenuActionPrompt = forwardRef((props, ref) => {
     "div",
     {
       ref,
-      className: tcx(NumericInputMenuActionPromptTv({ disabled: context.disabled }), className),
+      className: tcx(NumericInputMenuActionPromptTv({ size: context.size, disabled: context.disabled }), className),
       ...rest,
       children
     }

package/dist/components/numeric-input/src/context/numeric-input-context.d.ts

@@ -18,6 +18,7 @@ export interface NumericInputContextValue {
     readOnly?: boolean;
     selected?: boolean;
     shiftStep?: number;
+    size?: "default" | "large";
     step?: number;
     value?: NumericInputValue;
     variant?: "default" | "light" | "dark" | "reset";

package/dist/components/numeric-input/src/numeric-input.d.ts

@@ -3,7 +3,7 @@ import { default as React, HTMLProps, ReactNode } from 'react';
 import { NumericInputElement, NumericInputMenuActionPrompt, NumericInputMenuTrigger, NumericInputVariable } from './components';
 import { NumericInputContextValue } from './context';
 import { NumericChangeDetail, NumericInputValue } from './types';
-export interface NumericInputProps extends NumericInputContextValue, Omit<HTMLProps<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "children" | "max" | "min" | "step" | "disabled" | "id"> {
+export interface NumericInputProps extends NumericInputContextValue, Omit<HTMLProps<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "children" | "max" | "min" | "step" | "disabled" | "id" | "size"> {
     children?: ReactNode;
     className?: string;
     classNames?: {

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

@@ -27,6 +27,7 @@ const NumericInputBase = forwardRef((props, ref) => {
     readOnly,
     required,
     shiftStep = 10,
+    size = "default",
     step = 1,
     value,
     variant = "default",
@@ -79,6 +80,7 @@ const NumericInputBase = forwardRef((props, ref) => {
   const contextValue = useMemo(
     () => ({
       variant,
+      size,
       // State
       value,
       defaultValue,
@@ -105,6 +107,7 @@ const NumericInputBase = forwardRef((props, ref) => {
     }),
     [
       variant,
+      size,
       value,
       defaultValue,
       disabled,
@@ -160,6 +163,7 @@ const NumericInputBase = forwardRef((props, ref) => {
   const actionPromptNode = actionPrompt[0] || null;
   const tv = NumericInputTv({
     variant,
+    size,
     selected: selected || handlerPressed,
     focused,
     disabled,

package/dist/components/numeric-input/src/tv.d.ts

@@ -11,6 +11,18 @@ export declare const NumericInputTv: import('tailwind-variants').TVReturnType<{
         };
         reset: {};
     };
+    size: {
+        default: {
+            container: string[];
+            input: string;
+            tooltip: string;
+        };
+        large: {
+            container: string[];
+            input: string;
+            tooltip: string;
+        };
+    };
     prefixElement: {
         true: {};
         false: {};
@@ -52,6 +64,18 @@ export declare const NumericInputTv: import('tailwind-variants').TVReturnType<{
         };
         reset: {};
     };
+    size: {
+        default: {
+            container: string[];
+            input: string;
+            tooltip: string;
+        };
+        large: {
+            container: string[];
+            input: string;
+            tooltip: string;
+        };
+    };
     prefixElement: {
         true: {};
         false: {};
@@ -93,6 +117,18 @@ export declare const NumericInputTv: import('tailwind-variants').TVReturnType<{
         };
         reset: {};
     };
+    size: {
+        default: {
+            container: string[];
+            input: string;
+            tooltip: string;
+        };
+        large: {
+            container: string[];
+            input: string;
+            tooltip: string;
+        };
+    };
     prefixElement: {
         true: {};
         false: {};
@@ -126,6 +162,10 @@ export declare const NumericInputMenuTriggerTv: import('tailwind-variants').TVRe
     disabled: {
         true: string;
     };
+    size: {
+        default: string;
+        large: string;
+    };
     type: {
         menu: string;
         action: string;
@@ -140,6 +180,10 @@ export declare const NumericInputMenuTriggerTv: import('tailwind-variants').TVRe
     disabled: {
         true: string;
     };
+    size: {
+        default: string;
+        large: string;
+    };
     type: {
         menu: string;
         action: string;
@@ -154,6 +198,10 @@ export declare const NumericInputMenuTriggerTv: import('tailwind-variants').TVRe
     disabled: {
         true: string;
     };
+    size: {
+        default: string;
+        large: string;
+    };
     type: {
         menu: string;
         action: string;
@@ -260,6 +308,10 @@ export declare const NumericInputElementTv: import('tailwind-variants').TVReturn
         prefix: string;
         suffix: string;
     };
+    size: {
+        default: string;
+        large: string;
+    };
     disabled: {
         true: string;
         false: string;
@@ -280,6 +332,10 @@ export declare const NumericInputElementTv: import('tailwind-variants').TVReturn
         prefix: string;
         suffix: string;
     };
+    size: {
+        default: string;
+        large: string;
+    };
     disabled: {
         true: string;
         false: string;
@@ -300,6 +356,10 @@ export declare const NumericInputElementTv: import('tailwind-variants').TVReturn
         prefix: string;
         suffix: string;
     };
+    size: {
+        default: string;
+        large: string;
+    };
     disabled: {
         true: string;
         false: string;
@@ -312,16 +372,28 @@ export declare const NumericInputElementTv: import('tailwind-variants').TVReturn
     };
 }, undefined, string[], unknown, unknown, undefined>>;
 export declare const NumericInputMenuActionPromptTv: import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
     disabled: {
         true: string;
         false: string;
     };
 }, undefined, string[], {
+    size: {
+        default: string;
+        large: string;
+    };
     disabled: {
         true: string;
         false: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
     disabled: {
         true: string;
         false: string;

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

@@ -1,9 +1,9 @@
 import { tcv } from "../../../shared/utils/tcx/tcx.js";
 const NumericInputTv = tcv({
   slots: {
-    container: ["group/input grid h-6 before:border-transparent", "input__number"],
-    input: ["peer", "h-6 w-full", "cursor-default appearance-none truncate"],
-    tooltip: "col-span-3 col-start-1 row-start-1 h-6"
+    container: ["group/input grid before:border-transparent", "input__number"],
+    input: ["peer", "w-full", "cursor-default appearance-none truncate"],
+    tooltip: "col-span-3 col-start-1 row-start-1"
   },
   variants: {
     variant: {
@@ -18,6 +18,18 @@ const NumericInputTv = tcv({
       },
       reset: {}
     },
+    size: {
+      default: {
+        container: ["h-6", "input__number--default"],
+        input: "h-6",
+        tooltip: "h-6"
+      },
+      large: {
+        container: ["h-8", "input__number--large"],
+        input: "h-8",
+        tooltip: "h-8"
+      }
+    },
     prefixElement: {
       true: {},
       false: {}
@@ -140,6 +152,7 @@ const NumericInputTv = tcv({
   ],
   defaultVariants: {
     variant: "default",
+    size: "default",
     selected: false,
     disabled: false,
     focused: false
@@ -151,6 +164,10 @@ const NumericInputMenuTriggerTv = tcv({
     disabled: {
       true: ""
     },
+    size: {
+      default: "",
+      large: ""
+    },
     type: {
       menu: "",
       action: ""
@@ -198,6 +215,7 @@ const NumericInputMenuTriggerTv = tcv({
   ],
   defaultVariants: {
     disabled: false,
+    size: "default",
     type: "menu",
     variant: "default"
   }
@@ -302,7 +320,7 @@ const NumericInputVariableTv = tcv({
   }
 });
 const NumericInputElementTv = tcv({
-  base: ["select-none", "z-2 h-6 w-6", "flex flex-none items-center justify-center"],
+  base: ["select-none", "z-2", "flex flex-none items-center justify-center"],
   variants: {
     type: {
       handler: "select-none",
@@ -313,6 +331,10 @@ const NumericInputElementTv = tcv({
       prefix: "rounded-l-md",
       suffix: "rounded-r-md"
     },
+    size: {
+      default: "h-6 w-6",
+      large: "h-8 w-8"
+    },
     disabled: {
       true: "text-disabled-foreground",
       false: "text-secondary-foreground"
@@ -373,25 +395,31 @@ const NumericInputElementTv = tcv({
   ],
   defaultVariants: {
     disabled: false,
-    variant: "default"
+    variant: "default",
+    size: "default"
   }
 });
 const NumericInputMenuActionPromptTv = tcv({
   base: [
     "[grid-area:action]",
-    "w-6 pr-2",
+    "pr-2",
     "flex items-center justify-center",
     "rounded-r-md",
     "pointer-events-none z-3"
   ],
   variants: {
+    size: {
+      default: "w-6",
+      large: "w-8"
+    },
     disabled: {
       true: "text-secondary-foreground bg-default-background",
       false: "bg-secondary-background group-focus-within/input:hidden group-hover/input:hidden"
     }
   },
   defaultVariants: {
-    disabled: false
+    disabled: false,
+    size: "default"
   }
 });
 export {

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

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { OTPInput as Lt } from "../../../node_modules/.pnpm/input-otp@1.4.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/input-otp/dist/index.js";
 import { useMemo, createContext, useContext } from "react";
 import { otpInputTv } from "./tv.js";
-import css from "./otp-input.module.css.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 const OTPInputCtx = createContext({
   styles: otpInputTv({}),
@@ -84,7 +83,7 @@ function OTPInputSlot({ className, index, ...props }) {
         hasFakeCaret && isActive ? /* @__PURE__ */ jsx(
           "div",
           {
-            className: tcx((_d = styles == null ? void 0 : styles.caret) == null ? void 0 : _d.call(styles), css.caret),
+            className: tcx((_d = styles == null ? void 0 : styles.caret) == null ? void 0 : _d.call(styles), "otp-input__caret"),
             "data-slot": "otp-input-caret"
           }
         ) : null

package/dist/components/virtual-select/dist/index.d.ts

@@ -0,0 +1,48 @@
+import { MenuContextContent, MenuDivider, MenuEmpty, MenuContextItem, MenuSearch, MenuTrigger, MenuValue } from '../../menus/src';
+import { FloatingFocusManagerProps } from '@floating-ui/react';
+import { default as React } from 'react';
+interface VirtualSelectOption<T = unknown> {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    data?: T;
+}
+interface VirtualSelectProps<T = unknown> {
+    className?: string;
+    closeOnEscape?: boolean;
+    disabled?: boolean;
+    emptyText?: string;
+    focusManagerProps?: Partial<FloatingFocusManagerProps>;
+    matchTriggerWidth?: boolean;
+    maxHeight?: number;
+    onChange?: (value: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
+    options: VirtualSelectOption<T>[];
+    overscan?: number;
+    placeholder?: string;
+    placement?: "bottom-start" | "bottom-end";
+    portalId?: string;
+    readOnly?: boolean;
+    renderOption?: (option: VirtualSelectOption<T>, isSelected: boolean) => React.ReactNode;
+    renderValue?: (option: VirtualSelectOption<T> | null) => React.ReactNode;
+    root?: HTMLElement | null;
+    searchPlaceholder?: string;
+    size?: "default" | "large";
+    value?: string | null;
+    variant?: "default" | "light" | "reset";
+}
+interface VirtualSelectComponentType {
+    <T = unknown>(props: VirtualSelectProps<T>): React.ReactElement | null;
+    displayName?: string;
+    Content: typeof MenuContextContent;
+    Divider: typeof MenuDivider;
+    Empty: typeof MenuEmpty;
+    Item: typeof MenuContextItem;
+    Search: typeof MenuSearch;
+    Trigger: typeof MenuTrigger;
+    Value: typeof MenuValue;
+}
+declare const VirtualSelect: VirtualSelectComponentType;
+
+export { VirtualSelect, type VirtualSelectOption, type VirtualSelectProps };

package/dist/styles/components.css

@@ -558,17 +558,30 @@
   }
 
   .input__number {
-    grid-template-rows: 1.5rem;
     grid-template-columns: auto auto 1fr auto auto;
     grid-template-areas: "prefix-handler variable input action suffix-handler";
     &::before {
-      @apply pointer-events-none z-3 h-6 rounded-md border;
+      @apply pointer-events-none z-3 rounded-md border;
       grid-row: 1 / 2;
       grid-column: 1 / 6;
       content: "";
     }
   }
 
+  .input__number--default {
+    grid-template-rows: 1.5rem;
+    &::before {
+      @apply h-6;
+    }
+  }
+
+  .input__number--large {
+    grid-template-rows: 2rem;
+    &::before {
+      @apply h-8;
+    }
+  }
+
   .input-search {
     @apply relative grid;
     grid-template-columns: 1.5rem 1fr auto;
@@ -593,3 +606,22 @@
     grid-template-columns: auto 1fr 2.5rem;
   }
 }
+
+/* OTP Input styles */
+@layer components {
+  .otp-input__caret {
+    animation: otp-caret-blink 1s ease-out infinite;
+  }
+
+  @keyframes otp-caret-blink {
+    0%,
+    70%,
+    100% {
+      opacity: 1;
+    }
+    20%,
+    50% {
+      opacity: 0;
+    }
+  }
+}

package/package.json

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

package/dist/components/otp-input/src/otp-input.module.css

@@ -1,15 +0,0 @@
-._caret_7qdip_1 {
-  animation: _caret-blink_7qdip_1 1s ease-out infinite;
-}
-
-@keyframes _caret-blink_7qdip_1 {
-  0%,
-  70%,
-  100% {
-    opacity: 1;
-  }
-  20%,
-  50% {
-    opacity: 0;
-  }
-}

package/dist/components/otp-input/src/otp-input.module.css.js

@@ -1,8 +0,0 @@
-import './otp-input.module.css';const caret = "_caret_7qdip_1";
-const css = {
-  caret
-};
-export {
-  caret,
-  css as default
-};