@wheelhouse/ui 0.2.10 → 0.2.11

package/dist/components/combobox/combobox.js

@@ -25,7 +25,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
     return (_jsxs(InputGroup, { className: cn('w-auto', className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
 }
 function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = 'start', alignOffset = 0, anchor, ...props }) {
-    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn('group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props }) }) }));
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn('group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props }) }) }));
 }
 function ComboboxList({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn('no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0', className), ...props }));

package/dist/components/command/command.js

@@ -13,7 +13,7 @@ function CommandDialog({ title = 'Command Palette', description = 'Search for a
     return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn('top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0', className), showCloseButton: showCloseButton, children: children })] }));
 }
 function CommandInput({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className), ...props }), _jsx(InputGroupAddon, { children: _jsx(Search, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
+    return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className), ...props }), _jsx(InputGroupAddon, { children: _jsx(Search, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
 }
 function CommandList({ className, ...props }) {
     return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none', className), ...props }));

package/dist/components/filters/filters.js

@@ -117,7 +117,7 @@ function FilterInput({ field, onBlur, onKeyDown, className, ...props }) {
         // Call the original onKeyDown if provided
         onKeyDown?.(e);
     };
-    return (_jsxs(InputGroup, { className: cn('w-36', context.size == 'sm' && 'h-7!', context.size == 'default' && 'h-8!', context.size == 'lg' && 'h-9!', className), children: [field?.prefix && (_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: field.prefix }) })), _jsx(InputGroupInput, { ref: inputRef, size: context.size, "aria-invalid": !isValid, "aria-describedby": !isValid && validationMessage ? `${field?.key || 'input'}-error` : undefined, onBlur: handleBlur, onKeyDown: handleKeyDown, ...props }), !isValid && validationMessage && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(InputGroupButton, { size: "icon-xs" }), children: _jsx(AlertCircle, { className: "size-3.5 text-destructive" }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "text-sm", children: validationMessage }) })] }) })), field?.suffix && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: field.suffix }) }))] }));
+    return (_jsxs(InputGroup, { size: context.size, className: cn('w-36', className), children: [field?.prefix && (_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: field.prefix }) })), _jsx(InputGroupInput, { ref: inputRef, size: context.size, "aria-invalid": !isValid, "aria-describedby": !isValid && validationMessage ? `${field?.key || 'input'}-error` : undefined, onBlur: handleBlur, onKeyDown: handleKeyDown, ...props }), !isValid && validationMessage && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(InputGroupButton, { size: "icon-xs" }), children: _jsx(AlertCircle, { className: "size-3.5 text-destructive" }) }), _jsx(TooltipContent, { children: _jsx("p", { className: "text-sm", children: validationMessage }) })] }) })), field?.suffix && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupText, { children: field.suffix }) }))] }));
 }
 function FilterRemoveButton({ className, icon = _jsx(X, {}), ...props }) {
     const context = useFilterContext();

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

@@ -1,3 +1,3 @@
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupAddonAlignKeys, inputGroupButtonSizeKeys, } from './input-group';
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupAddonAlignKeys, inputGroupButtonSizeKeys, inputGroupSizeKeys, inputGroupVariants, } from './input-group';
 export type { InputGroupProps, InputGroupAddonProps, InputGroupButtonProps, InputGroupTextProps, InputGroupInputProps, InputGroupTextareaProps, } from './input-group';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/input-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,GAC3B,MAAM,eAAe,CAAC;AACvB,YAAY,EACR,eAAe,EACf,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,GAC1B,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,EACxB,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,EAClB,kBAAkB,GACrB,MAAM,eAAe,CAAC;AACvB,YAAY,EACR,eAAe,EACf,oBAAoB,EACpB,qBAAqB,EACrB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,GAC1B,MAAM,eAAe,CAAC"}

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

@@ -1 +1 @@
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupAddonAlignKeys, inputGroupButtonSizeKeys, } from './input-group';
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupAddonAlignKeys, inputGroupButtonSizeKeys, inputGroupSizeKeys, inputGroupVariants, } from './input-group';

package/dist/components/input-group/input-group.d.ts

@@ -3,8 +3,12 @@ import { type VariantProps } from 'class-variance-authority';
 import { Button } from '../button';
 import type { InputProps } from '../input';
 import type { TextareaProps } from '../textarea';
+export declare const inputGroupSizeKeys: readonly ["sm", "default", "lg"];
+declare const inputGroupVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Props for `InputGroup`. */
-export type InputGroupProps = React.ComponentProps<'div'>;
+export type InputGroupProps = React.ComponentProps<'div'> & VariantProps<typeof inputGroupVariants>;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -27,8 +31,9 @@ export type InputGroupInputProps = InputProps;
 export type InputGroupTextareaProps = TextareaProps;
 /**
  * Wraps a control and addons in a single bordered, focus-styled shell. Set `data-disabled` on the root when the field is disabled.
+ * `size` sets shell height (`sm` = 28px, `default` = 32px, `lg` = 36px) and is inherited by `InputGroupInput` unless overridden there.
  */
-declare function InputGroup({ className, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function InputGroup({ className, size, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Static prefix or suffix (text, `Kbd`, icon, or `InputGroupButton`). Clicking the addon focuses the nested input unless the click target is a button.
  */
@@ -37,8 +42,8 @@ declare function InputGroupButton({ className, type, variant, size, ...props }:
 /** Muted inline label text inside an addon. */
 declare function InputGroupText({ className, ...props }: InputGroupTextProps): import("react/jsx-runtime").JSX.Element;
 /** Single-line control that shares the group border and focus ring. */
-declare function InputGroupInput({ className, ...props }: InputGroupInputProps): import("react/jsx-runtime").JSX.Element;
+declare function InputGroupInput({ className, size: sizeProp, ...props }: InputGroupInputProps): import("react/jsx-runtime").JSX.Element;
 /** Multi-line control that shares the group border and focus ring. */
 declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): import("react/jsx-runtime").JSX.Element;
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, };
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants, };
 //# sourceMappingURL=input-group.d.ts.map

package/dist/components/input-group/input-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAE1D,QAAA,MAAM,uBAAuB;;8EAe5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAAsE,CAAC;AAE5G,mCAAmC;AACnC,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE9G,QAAA,MAAM,wBAAwB;;8EAY5B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6CAA8C,CAAC;AAEpF,gFAAgF;AAChF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC1F,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC,CAAC;AAEN,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAE/D,+EAA+E;AAC/E,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC;AAE9C,mEAAmE;AACnE,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC;AAEpD;;GAEG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAY3D;AAED;;GAEG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAsB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAkB7F;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,OAAiB,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAExH;AAED,+CAA+C;AAC/C,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAOnE;AAED,uEAAuE;AACvE,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAWrE;AAED,sEAAsE;AACtE,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAW3E;AAED,OAAO,EACH,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,GAC3B,CAAC"}
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAE3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,eAAO,MAAM,kBAAkB,kCAAgB,CAAC;AAMhD,QAAA,MAAM,kBAAkB;;8EAcvB,CAAC;AAEF,8BAA8B;AAC9B,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAEpG,QAAA,MAAM,uBAAuB;;8EAe5B,CAAC;AAEF,eAAO,MAAM,wBAAwB,qEAAsE,CAAC;AAE5G,mCAAmC;AACnC,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAE9G,QAAA,MAAM,wBAAwB;;8EAY5B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6CAA8C,CAAC;AAEpF,gFAAgF;AAChF,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC1F,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC5C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACxC,CAAC;AAEN,kCAAkC;AAClC,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAE/D,+EAA+E;AAC/E,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC;AAE9C,mEAAmE;AACnE,MAAM,MAAM,uBAAuB,GAAG,aAAa,CAAC;AAEpD;;;GAGG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,IAAgB,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAc7E;AAED;;GAEG;AACH,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAsB,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAkB7F;AAED,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,IAAe,EAAE,OAAiB,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAExH;AAED,+CAA+C;AAC/C,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAOnE;AAED,uEAAuE;AACvE,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CAerF;AAED,sEAAsE;AACtE,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAW3E;AAED,OAAO,EACH,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,EACxB,kBAAkB,GACrB,CAAC"}

package/dist/components/input-group/input-group.js

@@ -4,9 +4,23 @@ import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '../../lib/utils';
 import { Button } from '../button';
-import { Input } from '../input';
+import { Input, inputSizeKeys } from '../input';
 import { Textarea } from '../textarea';
-const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+export const inputGroupSizeKeys = inputSizeKeys;
+const InputGroupSizeContext = React.createContext(undefined);
+const inputGroupVariants = cva('group/input-group relative flex w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5', {
+    variants: {
+        size: {
+            sm: 'h-7 rounded-[min(var(--radius-md),12px)]',
+            default: 'h-8',
+            lg: 'h-9',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 group-data-[size=lg]/input-group:py-2 group-data-[size=sm]/input-group:py-1 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 group-data-[size=sm]/input-group:[&>svg:not([class*='size-'])]:size-3.5", {
     variants: {
         align: {
             'inline-start': 'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
@@ -36,9 +50,11 @@ const inputGroupButtonVariants = cva('flex items-center gap-2 text-sm shadow-non
 export const inputGroupButtonSizeKeys = ['xs', 'sm', 'icon-xs', 'icon-sm'];
 /**
  * Wraps a control and addons in a single bordered, focus-styled shell. Set `data-disabled` on the root when the field is disabled.
+ * `size` sets shell height (`sm` = 28px, `default` = 32px, `lg` = 36px) and is inherited by `InputGroupInput` unless overridden there.
  */
-function InputGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
+function InputGroup({ className, size = 'default', ...props }) {
+    const resolvedSize = size ?? 'default';
+    return (_jsx(InputGroupSizeContext.Provider, { value: resolvedSize, children: _jsx("div", { "data-slot": "input-group", "data-size": resolvedSize, role: "group", className: cn(inputGroupVariants({ size: resolvedSize }), className), ...props }) }));
 }
 /**
  * Static prefix or suffix (text, `Kbd`, icon, or `InputGroupButton`). Clicking the addon focuses the nested input unless the click target is a button.
@@ -62,11 +78,13 @@ function InputGroupText({ className, ...props }) {
     return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 /** Single-line control that shares the group border and focus ring. */
-function InputGroupInput({ className, ...props }) {
-    return (_jsx(Input, { "data-slot": "input-group-control", className: cn('flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent', className), ...props }));
+function InputGroupInput({ className, size: sizeProp, ...props }) {
+    const groupSize = React.useContext(InputGroupSizeContext);
+    const size = sizeProp ?? groupSize ?? 'default';
+    return (_jsx(Input, { "data-slot": "input-group-control", size: size, className: cn('h-full min-h-0 flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent', className), ...props }));
 }
 /** Multi-line control that shares the group border and focus ring. */
 function InputGroupTextarea({ className, ...props }) {
     return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent', className), ...props }));
 }
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, };
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants, };

package/dist/components/input-group/input-group.stories.d.ts

@@ -7,10 +7,23 @@ declare const meta: {
     parameters: {
         layout: string;
     };
+    args: {
+        size: "default";
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: readonly ["sm", "default", "lg"];
+        };
+        className: {
+            control: false;
+        };
+    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Sizes: Story;
 export declare const WithTrailingButton: Story;
 export declare const WithKbd: Story;
 export declare const Textarea: Story;

package/dist/components/input-group/input-group.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.stories.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,UAAU,EAA0F,MAAM,GAAG,CAAC;AAEvH,QAAA,MAAM,IAAI;;;;;;;CAOyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmCrB,CAAC"}
+{"version":3,"file":"input-group.stories.d.ts","sourceRoot":"","sources":["../../../src/components/input-group/input-group.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAIvD,OAAO,EAAE,UAAU,EAA8G,MAAM,GAAG,CAAC;AAE3I,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;CAcyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAuBnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAahC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAmCrB,CAAC"}

package/dist/components/input-group/input-group.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Search } from 'lucide-react';
 import { Kbd } from '../kbd';
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from '.';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, inputGroupSizeKeys, InputGroupText, InputGroupTextarea } from '.';
 const meta = {
     title: 'Components/InputGroup',
     component: InputGroup,
@@ -9,13 +9,23 @@ const meta = {
     parameters: {
         layout: 'centered',
     },
+    args: {
+        size: 'default',
+    },
+    argTypes: {
+        size: { control: 'select', options: inputGroupSizeKeys },
+        className: { control: false },
+    },
 };
 export default meta;
 export const Default = {
     render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "example.com" })] }) })),
 };
+export const Sizes = {
+    render: () => (_jsxs("div", { className: "flex w-80 flex-col gap-2", children: [_jsxs(InputGroup, { size: "sm", children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "Small (h-7)" })] }), _jsxs(InputGroup, { size: "default", children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "Default (h-8)" })] }), _jsxs(InputGroup, { size: "lg", children: [_jsx(InputGroupAddon, { children: _jsx(InputGroupText, { children: "https://" }) }), _jsx(InputGroupInput, { placeholder: "Large (h-9)" })] })] })),
+};
 export const WithTrailingButton = {
-    render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(Search, { className: "size-4" }) }) })] }) })),
+    render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Search it all\u2026" }), _jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { type: "button", "aria-label": "Search", children: _jsx(Search, { className: "size-4" }) }) })] }) })),
 };
 export const WithKbd = {
     render: () => (_jsx("div", { className: "w-80", children: _jsxs(InputGroup, { children: [_jsx(InputGroupInput, { placeholder: "Command\u2026" }), _jsxs(InputGroupAddon, { align: "inline-end", children: [_jsx(Kbd, { children: "\u2318" }), _jsx(Kbd, { children: "K" })] })] }) })),

package/dist/components/tooltip/tooltip.js

@@ -16,6 +16,6 @@ function TooltipTrigger({ ...props }) {
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({ className, side = 'top', sideOffset = 4, align = 'center', alignOffset = 0, showArrow = false, children, ...props }) {
-    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn('z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, children: [children, showArrow && (_jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" }))] }) }) }));
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn('z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-2 py-1 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95', className), ...props, children: [children, showArrow && (_jsx(TooltipPrimitive.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" }))] }) }) }));
 }
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };