@waveso/ui 0.14.0 → 0.15.0

package/dist/autocomplete.d.ts

@@ -1,10 +1,12 @@
+import { inputVariants } from "./input.js";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import { VariantProps } from "class-variance-authority";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
 
 //#region src/autocomplete.d.ts
 type AutocompleteProps = React.ComponentProps<typeof Autocomplete$1.Root>;
-type AutocompleteInputProps = React.ComponentProps<typeof Autocomplete$1.Input>;
+type AutocompleteInputProps = Omit<React.ComponentProps<typeof Autocomplete$1.Input>, "size"> & VariantProps<typeof inputVariants>;
 type AutocompleteTriggerProps = React.ComponentProps<typeof Autocomplete$1.Trigger>;
 type AutocompleteIconProps = React.ComponentProps<typeof Autocomplete$1.Icon>;
 type AutocompleteClearProps = React.ComponentProps<typeof Autocomplete$1.Clear>;
@@ -29,6 +31,7 @@ declare function Autocomplete({
 }: AutocompleteProps): _$react_jsx_runtime0.JSX.Element;
 declare function AutocompleteInput({
   className,
+  size,
   ...props
 }: AutocompleteInputProps): _$react_jsx_runtime0.JSX.Element;
 declare function AutocompleteTrigger({

package/dist/autocomplete.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "./lib/utils.js";
+import { inputVariants } from "./input.js";
 import { jsx } from "react/jsx-runtime";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
 //#region src/autocomplete.tsx
@@ -9,10 +10,11 @@ function Autocomplete({ ...props }) {
 		...props
 	});
 }
-function AutocompleteInput({ className, ...props }) {
+function AutocompleteInput({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Autocomplete$1.Input, {
 		"data-slot": "autocomplete-input",
-		className: cn("dark:bg-edge/30 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive disabled:bg-edge/50 dark:disabled:bg-edge/80 placeholder:text-soft h-8 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base transition-colors outline-hidden focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		"data-size": size,
+		className: cn(inputVariants({ size }), className),
 		...props
 	});
 }

package/dist/badge.d.ts

@@ -5,7 +5,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "link" | "outline" | "success" | "warning" | "secondary" | "ghost" | "destructive" | null | undefined;
+  variant?: "default" | "link" | "outline" | "success" | "warning" | "destructive" | "secondary" | "ghost" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>;
 declare function Badge({

package/dist/button.d.ts

@@ -6,8 +6,8 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "link" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
-  size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "link" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = React.ComponentProps<typeof Button$1> & VariantProps<typeof buttonVariants>;
 declare function Button({

package/dist/button.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { cva } from "class-variance-authority";
 //#region src/button.tsx
-const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap motion-color disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-hidden group/button select-none active:not-aria-[haspopup]:scale-[0.97]", {
+const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive rounded-md border border-transparent bg-clip-padding font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap motion-color disabled:pointer-events-none disabled:opacity-30 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-hidden group/button select-none active:not-aria-[haspopup]:scale-[0.97]", {
 	variants: {
 		variant: {
 			default: "bg-primary text-white hover:bg-primary/80",
@@ -15,14 +15,14 @@ const buttonVariants = cva("cursor-clickable focus-visible:border-focus focus-vi
 			link: "text-primary underline-offset-4 hover:underline"
 		},
 		size: {
-			default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
-			xs: "h-6 gap-1 rounded-sm px-2.5 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3",
-			sm: "h-8 gap-1 px-3 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
-			lg: "h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3",
+			default: "h-9 gap-1.5 px-3 text-base has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5",
+			xs: "h-6 gap-1 rounded-sm px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-8 gap-1 px-3 text-sm has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2",
+			lg: "h-11 gap-1.5 px-4 text-lg has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3",
 			icon: "size-9",
 			"icon-xs": "size-6 rounded-sm in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
 			"icon-sm": "size-8",
-			"icon-lg": "size-10"
+			"icon-lg": "size-11"
 		}
 	},
 	defaultVariants: {

package/dist/combobox.d.ts

@@ -1,6 +1,8 @@
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import { VariantProps } from "class-variance-authority";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/combobox.d.ts
 type ComboboxProps = React.ComponentProps<typeof Combobox$1.Root>;
@@ -18,12 +20,13 @@ type ComboboxLabelProps = React.ComponentProps<typeof Combobox$1.GroupLabel>;
 type ComboboxCollectionProps = React.ComponentProps<typeof Combobox$1.Collection>;
 type ComboboxEmptyProps = React.ComponentProps<typeof Combobox$1.Empty>;
 type ComboboxSeparatorProps = React.ComponentProps<typeof Combobox$1.Separator>;
-type ComboboxChipsProps = React.ComponentProps<typeof Combobox$1.Chips>;
+type ComboboxChipsProps = React.ComponentProps<typeof Combobox$1.Chips> & VariantProps<typeof comboboxChipsVariants>;
 type ComboboxChipBaseProps = React.ComponentProps<typeof Combobox$1.Chip>;
 type ComboboxChipsInputProps = React.ComponentProps<typeof Combobox$1.Input>;
-type ComboboxInputProps = ComboboxInputBaseProps & {
+type ComboboxInputProps = Omit<ComboboxInputBaseProps, "size"> & {
   showTrigger?: boolean;
   showClear?: boolean;
+  size?: "xs" | "sm" | "default" | "lg";
 };
 type ComboboxChipProps = ComboboxChipBaseProps & {
   showRemove?: boolean;
@@ -50,6 +53,7 @@ declare function ComboboxInput({
   disabled,
   showTrigger,
   showClear,
+  size,
   ...props
 }: ComboboxInputProps): _$react_jsx_runtime0.JSX.Element;
 declare function ComboboxContent({
@@ -89,8 +93,12 @@ declare function ComboboxSeparator({
   className,
   ...props
 }: ComboboxSeparatorProps): _$react_jsx_runtime0.JSX.Element;
+declare const comboboxChipsVariants: (props?: ({
+  size?: "default" | "sm" | "xs" | "lg" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function ComboboxChips({
   className,
+  size,
   ...props
 }: ComboboxChipsProps): _$react_jsx_runtime0.JSX.Element;
 declare function ComboboxChip({
@@ -105,4 +113,4 @@ declare function ComboboxChipsInput({
 }: ComboboxChipsInputProps): _$react_jsx_runtime0.JSX.Element;
 declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
 //#endregion
-export { Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputProps, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxList, type ComboboxListProps, type ComboboxPortalProps, type ComboboxPositionerProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, ComboboxTrigger, type ComboboxTriggerProps, ComboboxValue, type ComboboxValueProps, useComboboxAnchor };
+export { Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputProps, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxList, type ComboboxListProps, type ComboboxPortalProps, type ComboboxPositionerProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, ComboboxTrigger, type ComboboxTriggerProps, ComboboxValue, type ComboboxValueProps, comboboxChipsVariants, useComboboxAnchor };

package/dist/combobox.js

@@ -5,6 +5,7 @@ import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { cva } from "class-variance-authority";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/combobox.tsx
 function Combobox({ ...props }) {
@@ -33,16 +34,19 @@ function ComboboxClear({ className, ...props }) {
 		"aria-label": "Clear",
 		render: /* @__PURE__ */ jsx(InputGroupButton, {
 			variant: "ghost",
-			size: "icon-xs"
+			size: "icon"
 		}),
 		className: cn("motion-scale-sm", className),
 		...props,
 		children: /* @__PURE__ */ jsx(CloseIcon, { className: "pointer-events-none" })
 	});
 }
-function ComboboxInput({ className, children, disabled, showTrigger = true, showClear = false, ...props }) {
+function ComboboxInput({ className, children, disabled, showTrigger = true, showClear = false, size = "default", ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox$1.InputGroup, {
-		render: /* @__PURE__ */ jsx(InputGroup, { className: cn(className) }),
+		render: /* @__PURE__ */ jsx(InputGroup, {
+			size,
+			className: cn(className)
+		}),
 		children: [
 			/* @__PURE__ */ jsx(Combobox$1.Input, {
 				render: /* @__PURE__ */ jsx(InputGroupInput, { disabled }),
@@ -53,7 +57,7 @@ function ComboboxInput({ className, children, disabled, showTrigger = true, show
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "relative grid size-6 *:[grid-area:1/1]",
 					children: [showTrigger ? /* @__PURE__ */ jsx(InputGroupButton, {
-						size: "icon-xs",
+						size: "icon",
 						variant: "ghost",
 						nativeButton: true,
 						render: /* @__PURE__ */ jsx(ComboboxTrigger, {}),
@@ -150,10 +154,20 @@ function ComboboxSeparator({ className, ...props }) {
 		...props
 	});
 }
-function ComboboxChips({ className, ...props }) {
+const comboboxChipsVariants = cva("bg-edge hover:border-focus focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-destructive/30 has-aria-invalid:border-destructive flex flex-wrap items-center gap-1 rounded-md border border-transparent motion-color focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", {
+	variants: { size: {
+		xs: "min-h-6 rounded-sm px-2 py-0.5 text-xs",
+		sm: "min-h-8 px-3 py-1 text-sm",
+		default: "min-h-9 px-3 py-1 text-base",
+		lg: "min-h-11 px-4 py-1.5 text-lg"
+	} },
+	defaultVariants: { size: "default" }
+});
+function ComboboxChips({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Combobox$1.Chips, {
 		"data-slot": "combobox-chips",
-		className: cn("dark:bg-edge/30 border-edge focus-within:border-focus focus-within:ring-focus/50 has-aria-invalid:ring-destructive/30 has-aria-invalid:border-destructive flex min-h-8 flex-wrap items-center gap-1 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", className),
+		"data-size": size,
+		className: cn(comboboxChipsVariants({ size }), className),
 		...props
 	});
 }
@@ -185,4 +199,4 @@ function useComboboxAnchor() {
 	return React.useRef(null);
 }
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, comboboxChipsVariants, useComboboxAnchor };

package/dist/input-group.d.ts

@@ -6,7 +6,10 @@ import { VariantProps } from "class-variance-authority";
 import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/input-group.d.ts
-type InputGroupProps = React.ComponentProps<"div">;
+declare const inputGroupVariants: (props?: ({
+  size?: "default" | "sm" | "xs" | "lg" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+type InputGroupProps = React.ComponentProps<"div"> & VariantProps<typeof inputGroupVariants>;
 type InputGroupAddonProps = React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>;
 type InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
   type?: "button" | "submit" | "reset";
@@ -16,10 +19,11 @@ type InputGroupInputProps = React.ComponentProps<typeof Input>;
 type InputGroupTextareaProps = React.ComponentProps<"textarea">;
 declare function InputGroup({
   className,
+  size,
   ...props
 }: InputGroupProps): _$react_jsx_runtime0.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function InputGroupAddon({
   className,
@@ -27,7 +31,7 @@ declare function InputGroupAddon({
   ...props
 }: InputGroupAddonProps): _$react_jsx_runtime0.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-  size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
+  size?: "default" | "icon" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function InputGroupButton({
   className,
@@ -49,4 +53,4 @@ declare function InputGroupTextarea({
   ...props
 }: InputGroupTextareaProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, inputGroupAddonVariants, inputGroupButtonVariants };
+export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

package/dist/input-group.js

@@ -6,20 +6,30 @@ import { Textarea } from "./textarea.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/input-group.tsx
-function InputGroup({ className, ...props }) {
+const inputGroupVariants = cva("bg-edge hover:border-focus has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/30 has-[[data-slot][aria-invalid=true]]:border-destructive group/input-group relative flex w-full min-w-0 items-center rounded-md border border-transparent motion-color outline-hidden in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:opacity-30 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3", {
+	variants: { size: {
+		xs: "h-6 rounded-sm",
+		sm: "h-8",
+		default: "h-9",
+		lg: "h-11"
+	} },
+	defaultVariants: { size: "default" }
+});
+function InputGroup({ className, size = "default", ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
+		"data-size": size,
 		role: "group",
-		className: cn("border-edge dark:bg-edge/30 has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-disabled:bg-edge/50 dark:has-disabled:bg-edge/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border transition-colors outline-hidden in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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 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),
+		className: cn(inputGroupVariants({ size }), className),
 		...props
 	});
 }
-const inputGroupAddonVariants = cva("text-muted h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-sm [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+const inputGroupAddonVariants = cva("text-muted h-auto gap-2 has-[>button]:gap-[3px] py-2 not-has-[>button]:group-data-[size=xs]/input-group:py-1 not-has-[>button]:group-data-[size=sm]/input-group:py-1.5 not-has-[>button]:group-data-[size=lg]/input-group:py-2.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
 	variants: { align: {
-		"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
-		"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
-		"block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
-		"block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start"
+		"inline-start": "order-first ps-3 not-has-[>button]:group-data-[size=xs]/input-group:ps-2 not-has-[>button]:group-data-[size=sm]/input-group:ps-3 not-has-[>button]:group-data-[size=lg]/input-group:ps-4 has-[>kbd]:-ms-1 has-[>button]:self-stretch has-[>button]:py-[3px] has-[>button]:ps-[3px] [&>button]:h-full",
+		"inline-end": "order-last pe-3 not-has-[>button]:group-data-[size=xs]/input-group:pe-2 not-has-[>button]:group-data-[size=sm]/input-group:pe-3 not-has-[>button]:group-data-[size=lg]/input-group:pe-4 has-[>kbd]:-me-1 has-[>button]:self-stretch has-[>button]:py-[3px] has-[>button]:pe-[3px] [&>button]:h-full",
+		"block-start": "order-first w-full justify-start px-3 group-data-[size=xs]/input-group:px-2 group-data-[size=sm]/input-group:px-3 group-data-[size=lg]/input-group:px-4 pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5",
+		"block-end": "order-last w-full justify-start px-3 group-data-[size=xs]/input-group:px-2 group-data-[size=sm]/input-group:px-3 group-data-[size=lg]/input-group:px-4 pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5"
 	} },
 	defaultVariants: { align: "inline-start" }
 });
@@ -36,16 +46,14 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 		...props
 	});
 }
-const inputGroupButtonVariants = cva("gap-2 text-sm shadow-none flex items-center", {
+const inputGroupButtonVariants = cva("shadow-none flex items-center gap-1.5 rounded-md text-sm [&>svg:not([class*='size-'])]:size-4 group-data-[size=xs]/input-group:gap-1 group-data-[size=xs]/input-group:rounded-sm group-data-[size=xs]/input-group:text-xs group-data-[size=xs]/input-group:[&>svg:not([class*='size-'])]:size-3.5", {
 	variants: { size: {
-		xs: "h-6 gap-1 rounded-sm px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-		sm: "h-7 gap-1.5 rounded-sm px-2 [&>svg:not([class*='size-'])]:size-4",
-		"icon-xs": "size-6 rounded-sm p-0",
-		"icon-sm": "size-8 p-0"
+		default: "h-7 px-2 group-data-[size=xs]/input-group:px-1.5 group-data-[size=lg]/input-group:px-2.5",
+		icon: "h-6 aspect-square p-0"
 	} },
-	defaultVariants: { size: "xs" }
+	defaultVariants: { size: "default" }
 });
-function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+function InputGroupButton({ className, type = "button", variant = "default", size = "default", ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		type,
 		"data-size": size,
@@ -64,16 +72,16 @@ function InputGroupText({ className, ...props }) {
 function InputGroupInput({ className, ...props }) {
 	return /* @__PURE__ */ 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),
+		className: cn("h-full flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 group-data-[size=xs]/input-group:px-2 group-data-[size=xs]/input-group:text-xs group-data-[size=sm]/input-group:px-3 group-data-[size=sm]/input-group:text-sm group-data-[size=lg]/input-group:px-4 group-data-[size=lg]/input-group:text-lg", className),
 		...props
 	});
 }
 function InputGroupTextarea({ className, ...props }) {
 	return /* @__PURE__ */ 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),
+		className: cn("flex-1 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0", className),
 		...props
 	});
 }
 //#endregion
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants };
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

package/dist/input.d.ts

@@ -6,7 +6,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/input.d.ts
 declare const inputVariants: (props?: ({
-  size?: "default" | "sm" | "lg" | "xs" | null | undefined;
+  size?: "default" | "sm" | "xs" | "lg" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type InputProps = Omit<React.ComponentProps<typeof Input$1>, "size"> & VariantProps<typeof inputVariants>;
 declare function Input({

package/dist/input.js

@@ -3,12 +3,12 @@ import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Input as Input$1 } from "@base-ui/react/input";
 //#region src/input.tsx
-const inputVariants = cva("dark:bg-edge/30 hover:bg-edge/50 dark:hover:bg-edge/50 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive disabled:bg-edge/50 dark:disabled:bg-edge/80 placeholder:text-soft flex w-full min-w-0 items-center overflow-hidden rounded-md border bg-transparent motion-color outline-hidden file:inline-flex file:my-[3px] file:items-center file:me-3 file:cursor-clickable file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:leading-none file:font-medium file:text-white file:motion-color file:hover:bg-primary/80 focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3", {
+const inputVariants = cva("bg-edge hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive placeholder:text-soft flex w-full min-w-0 items-center overflow-hidden rounded-md border border-transparent motion-color outline-hidden file:inline-flex file:my-[3px] file:items-center file:me-3 file:cursor-clickable file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:leading-none file:font-medium file:text-white file:motion-color file:hover:bg-primary/80 focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-30 aria-invalid:ring-3", {
 	variants: { size: {
 		xs: "h-6 rounded-sm px-2 text-xs file:-ms-[5px] file:h-4",
-		sm: "h-8 px-2.5 text-base file:-ms-[7px] file:h-6 md:text-sm",
-		default: "h-9 px-3 text-base file:-ms-[9px] file:h-7 md:text-sm",
-		lg: "h-10 px-3.5 text-base file:-ms-[11px] file:h-8"
+		sm: "h-8 px-3 text-sm file:-ms-[9px] file:h-6",
+		default: "h-9 px-3 text-base file:-ms-[9px] file:h-7",
+		lg: "h-11 px-4 text-lg file:-ms-[13px] file:h-9"
 	} },
 	defaultVariants: { size: "default" }
 });

package/dist/select.d.ts

@@ -1,6 +1,8 @@
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import { VariantProps } from "class-variance-authority";
 import { Select as Select$1 } from "@base-ui/react/select";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/select.d.ts
 type SelectProps<Value, Multiple extends boolean | undefined = false> = Select$1.Root.Props<Value, Multiple>;
@@ -16,9 +18,10 @@ type SelectItemProps = React.ComponentProps<typeof Select$1.Item>;
 type SelectSeparatorProps = React.ComponentProps<typeof Select$1.Separator>;
 type SelectScrollUpButtonProps = React.ComponentProps<typeof Select$1.ScrollUpArrow>;
 type SelectScrollDownButtonProps = React.ComponentProps<typeof Select$1.ScrollDownArrow>;
-type SelectTriggerProps = SelectTriggerBaseProps & {
-  size?: "sm" | "default";
-};
+declare const selectTriggerVariants: (props?: ({
+  size?: "default" | "sm" | "xs" | "lg" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+type SelectTriggerProps = SelectTriggerBaseProps & VariantProps<typeof selectTriggerVariants>;
 type SelectContentProps = SelectPopupProps & Pick<SelectPositionerProps, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">;
 declare function Select<Value, Multiple extends boolean | undefined = false>({
   ...props
@@ -80,4 +83,4 @@ declare function SelectScrollDownButton({
   ...props
 }: SelectScrollDownButtonProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectList, type SelectListProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };
+export { Select, SelectContent, type SelectContentProps, SelectGroup, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectList, type SelectListProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectScrollDownButton, type SelectScrollDownButtonProps, SelectScrollUpButton, type SelectScrollUpButtonProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, selectTriggerVariants };

package/dist/select.js

@@ -2,8 +2,18 @@
 import { cn } from "./lib/utils.js";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "./lib/internal-icons.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/select.tsx
+const selectTriggerVariants = cva("data-placeholder:text-soft bg-edge hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive flex w-fit items-center justify-between gap-1.5 rounded-md border border-transparent whitespace-nowrap motion-color outline-hidden select-none focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-30 aria-invalid:ring-3 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: { size: {
+		xs: "h-6 rounded-sm px-2 text-xs",
+		sm: "h-8 px-3 text-sm",
+		default: "h-9 px-3 text-base",
+		lg: "h-11 px-4 text-lg"
+	} },
+	defaultVariants: { size: "default" }
+});
 function Select({ ...props }) {
 	return /* @__PURE__ */ jsx(Select$1.Root, {
 		"data-slot": "select",
@@ -48,7 +58,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select$1.Trigger, {
 		"data-slot": "select-trigger",
 		"data-size": size,
-		className: cn("border-edge data-placeholder:text-soft dark:bg-edge/30 dark:hover:bg-edge/50 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap motion-color outline-hidden select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn(selectTriggerVariants({ size }), className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, {
 			"data-slot": "select-icon",
@@ -125,4 +135,4 @@ function SelectScrollDownButton({ className, ...props }) {
 	});
 }
 //#endregion
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectList, SelectPortal, SelectPositioner, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectList, SelectPortal, SelectPositioner, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };

package/dist/sidebar.d.ts

@@ -1,6 +1,6 @@
 import { Button } from "./button.js";
-import { Separator } from "./separator.js";
 import { Input } from "./input.js";
+import { Separator } from "./separator.js";
 import { TooltipContent } from "./tooltip.js";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";

package/dist/sidebar.js

@@ -2,8 +2,8 @@
 import { cn } from "./lib/utils.js";
 import { SidebarPanelIcon } from "./lib/internal-icons.js";
 import { Button } from "./button.js";
-import { Separator } from "./separator.js";
 import { Input } from "./input.js";
+import { Separator } from "./separator.js";
 import { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle } from "./drawer.js";
 import { Skeleton } from "./skeleton.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip.js";

package/dist/styles.css

@@ -457,6 +457,24 @@
   cursor: var(--cursor-clickable);
 }
 
+/* `resize-handle` — a subtle corner grip for a resizable field, shown on hover.
+ * Painted as a `background-image` (a <textarea> is a replaced element, so no
+ * `::after`) inset into the bottom-right corner, while the native
+ * `::-webkit-resizer` is kept transparent so the corner still drags. A neutral
+ * gray reads on every theme, like a native scrollbar grip. WebKit/Chromium
+ * paint it; Firefox keeps its own native grip. Pair with a `resize-*` utility. */
+@utility resize-handle {
+  &::-webkit-resizer {
+    background: transparent;
+  }
+  &:hover {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M12 0C12 5.4 11.5 8.5 10 10C8.5 11.5 5.4 12 0 12' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 5px bottom 5px;
+    background-size: 12px 12px;
+  }
+}
+
 /* `motion-color` — interaction-state transition for controls: smoothly
  * animates color / background / border / ring (box-shadow) on hover, focus,
  * pressed, checked, etc. Runs at the `sm` tier (controls are small + fast). A

package/dist/textarea.d.ts

@@ -1,16 +1,22 @@
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/textarea.d.ts
+declare const textareaVariants: (props?: ({
+  size?: "default" | "sm" | "xs" | "lg" | null | undefined;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 type TextareaProps = Omit<React.ComponentProps<"textarea">, "onChange"> & {
   onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
   onValueChange?: (value: string) => void;
-};
+} & VariantProps<typeof textareaVariants>;
 declare function Textarea({
   className,
+  size,
   onChange,
   onValueChange,
   ...props
 }: TextareaProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Textarea, type TextareaProps };
+export { Textarea, type TextareaProps, textareaVariants };

package/dist/textarea.js

@@ -1,18 +1,29 @@
 "use client";
 import { cn } from "./lib/utils.js";
 import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 //#region src/textarea.tsx
-function Textarea({ className, onChange, onValueChange, ...props }) {
+const textareaVariants = cva("bg-edge hover:border-focus focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive resize-y resize-handle disabled:pointer-events-none placeholder:text-soft flex field-sizing-content w-full rounded-md border border-transparent motion-color outline-hidden focus-visible:ring-3 disabled:opacity-30 aria-invalid:ring-3", {
+	variants: { size: {
+		xs: "min-h-12 rounded-sm px-2 py-1 text-xs",
+		sm: "min-h-14 px-3 py-1.5 text-sm",
+		default: "min-h-16 px-3 py-2 text-base",
+		lg: "min-h-20 px-4 py-2.5 text-lg"
+	} },
+	defaultVariants: { size: "default" }
+});
+function Textarea({ className, size = "default", onChange, onValueChange, ...props }) {
 	function handleChange(e) {
 		onChange?.(e);
 		onValueChange?.(e.target.value);
 	}
 	return /* @__PURE__ */ jsx("textarea", {
 		"data-slot": "textarea",
-		className: cn("border-edge dark:bg-edge/30 focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/30 aria-invalid:border-destructive resize-none disabled:bg-edge/50 disabled:cursor-not-allowed dark:disabled:bg-edge/80 placeholder:text-soft flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base transition-colors outline-hidden focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		"data-size": size,
+		className: cn(textareaVariants({ size }), className),
 		onChange: handleChange,
 		...props
 	});
 }
 //#endregion
-export { Textarea };
+export { Textarea, textareaVariants };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveso/ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [