@vertz/ui-primitives 0.1.1 → 0.2.0

package/README.md

@@ -89,12 +89,12 @@ function MyButton() {
   });
 
   root.textContent = 'Submit';
-  root.classList.add(styles.classNames.btn);
+  root.classList.add(styles.btn);
 
   // React to state changes
   effect(() => {
     if (state.disabled.value) {
-      root.classList.add(styles.classNames.disabled);
+      root.classList.add(styles.disabled);
     }
   });
 
@@ -449,7 +449,7 @@ Primitives provide **zero styles**. You can style them with:
 
 - **CSS classes** — `root.classList.add('my-button')`
 - **Inline styles** — `root.style.padding = '8px'`
-- **@vertz/ui/css** — `root.classList.add(css({ btn: [...] }).classNames.btn)`
+- **@vertz/ui/css** — `root.classList.add(css({ btn: [...] }).btn)`
 - **Tailwind/UnoCSS** — `root.className = 'px-4 py-2 bg-blue-500'`
 
 **Data attributes for styling:**

package/dist/index.d.ts

@@ -38,6 +38,71 @@ declare const Button: {
 	};
 };
 import { Signal as Signal3 } from "@vertz/ui";
+interface CalendarOptions {
+	mode?: "single" | "range" | "multiple";
+	defaultValue?: Date | Date[] | {
+		from: Date;
+		to: Date;
+	};
+	defaultMonth?: Date;
+	minDate?: Date;
+	maxDate?: Date;
+	disabled?: (date: Date) => boolean;
+	weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	onValueChange?: (value: Date | Date[] | {
+		from: Date;
+		to: Date;
+	} | null) => void;
+	onMonthChange?: (month: Date) => void;
+}
+interface CalendarState {
+	value: Signal3<Date | Date[] | {
+		from: Date;
+		to: Date;
+	} | null>;
+	focusedDate: Signal3<Date>;
+	displayMonth: Signal3<Date>;
+}
+interface CalendarElements {
+	root: HTMLDivElement;
+	header: HTMLDivElement;
+	title: HTMLDivElement;
+	prevButton: HTMLButtonElement;
+	nextButton: HTMLButtonElement;
+	grid: HTMLTableElement;
+}
+declare const Calendar: {
+	Root(options?: CalendarOptions): CalendarElements & {
+		state: CalendarState;
+	};
+};
+import { Signal as Signal4 } from "@vertz/ui";
+interface CarouselOptions {
+	orientation?: "horizontal" | "vertical";
+	loop?: boolean;
+	defaultIndex?: number;
+	onSlideChange?: (index: number) => void;
+}
+interface CarouselState {
+	currentIndex: Signal4<number>;
+	slideCount: Signal4<number>;
+}
+interface CarouselElements {
+	root: HTMLDivElement;
+	viewport: HTMLDivElement;
+	prevButton: HTMLButtonElement;
+	nextButton: HTMLButtonElement;
+}
+declare const Carousel: {
+	Root(options?: CarouselOptions): CarouselElements & {
+		state: CarouselState;
+		Slide: () => HTMLDivElement;
+		goTo: (index: number) => void;
+		goNext: () => void;
+		goPrev: () => void;
+	};
+};
+import { Signal as Signal5 } from "@vertz/ui";
 type CheckedState = boolean | "mixed";
 interface CheckboxOptions {
 	defaultChecked?: CheckedState;
@@ -45,8 +110,8 @@ interface CheckboxOptions {
 	onCheckedChange?: (checked: CheckedState) => void;
 }
 interface CheckboxState {
-	checked: Signal3<CheckedState>;
-	disabled: Signal3<boolean>;
+	checked: Signal5<CheckedState>;
+	disabled: Signal5<boolean>;
 }
 interface CheckboxElements {
 	root: HTMLButtonElement;
@@ -56,17 +121,37 @@ declare const Checkbox: {
 		state: CheckboxState;
 	};
 };
-import { Signal as Signal4 } from "@vertz/ui";
+import { Signal as Signal6 } from "@vertz/ui";
+interface CollapsibleOptions {
+	defaultOpen?: boolean;
+	disabled?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}
+interface CollapsibleState {
+	open: Signal6<boolean>;
+	disabled: Signal6<boolean>;
+}
+interface CollapsibleElements {
+	root: HTMLDivElement;
+	trigger: HTMLButtonElement;
+	content: HTMLDivElement;
+}
+declare const Collapsible: {
+	Root(options?: CollapsibleOptions): CollapsibleElements & {
+		state: CollapsibleState;
+	};
+};
+import { Signal as Signal7 } from "@vertz/ui";
 interface ComboboxOptions {
 	defaultValue?: string;
 	onValueChange?: (value: string) => void;
 	onInputChange?: (input: string) => void;
 }
 interface ComboboxState {
-	open: Signal4<boolean>;
-	value: Signal4<string>;
-	inputValue: Signal4<string>;
-	activeIndex: Signal4<number>;
+	open: Signal7<boolean>;
+	value: Signal7<string>;
+	inputValue: Signal7<string>;
+	activeIndex: Signal7<number>;
 }
 interface ComboboxElements {
 	input: HTMLInputElement;
@@ -78,14 +163,126 @@ declare const Combobox: {
 		Option: (value: string, label?: string) => HTMLDivElement;
 	};
 };
-import { Signal as Signal5 } from "@vertz/ui";
+import { Signal as Signal8 } from "@vertz/ui";
+interface CommandOptions {
+	filter?: (value: string, search: string) => boolean;
+	onSelect?: (value: string) => void;
+	onInputChange?: (value: string) => void;
+	placeholder?: string;
+}
+interface CommandState {
+	inputValue: Signal8<string>;
+	activeIndex: Signal8<number>;
+}
+interface CommandElements {
+	root: HTMLDivElement;
+	input: HTMLInputElement;
+	list: HTMLDivElement;
+	empty: HTMLDivElement;
+}
+declare const Command: {
+	Root(options?: CommandOptions): CommandElements & {
+		state: CommandState;
+		Item: (value: string, label?: string, keywords?: string[]) => HTMLDivElement;
+		Group: (label: string) => {
+			el: HTMLDivElement;
+			Item: (value: string, label?: string, keywords?: string[]) => HTMLDivElement;
+		};
+		Separator: () => HTMLHRElement;
+	};
+};
+import { Signal as Signal9 } from "@vertz/ui";
+import { Middleware, Placement, Strategy } from "@floating-ui/dom";
+interface FloatingOptions {
+	placement?: Placement;
+	strategy?: Strategy;
+	offset?: number;
+	flip?: boolean;
+	shift?: boolean;
+	middleware?: Middleware[];
+	matchReferenceWidth?: boolean;
+	portal?: boolean;
+	/** Override the reference element used for positioning (e.g., a custom trigger wrapping the primitive trigger). */
+	referenceElement?: HTMLElement;
+}
+interface ContextMenuOptions {
+	onSelect?: (value: string) => void;
+	positioning?: FloatingOptions;
+}
+interface ContextMenuState {
+	open: Signal9<boolean>;
+	activeIndex: Signal9<number>;
+}
+interface ContextMenuElements {
+	trigger: HTMLDivElement;
+	content: HTMLDivElement;
+}
+declare const ContextMenu: {
+	Root(options?: ContextMenuOptions): ContextMenuElements & {
+		state: ContextMenuState;
+		Item: (value: string, label?: string) => HTMLDivElement;
+		Group: (label: string) => {
+			el: HTMLDivElement;
+			Item: (value: string, label?: string) => HTMLDivElement;
+		};
+		Separator: () => HTMLHRElement;
+		Label: (text: string) => HTMLDivElement;
+	};
+};
+import { Signal as Signal10 } from "@vertz/ui";
+interface DatePickerOptions {
+	mode?: "single" | "range";
+	defaultValue?: Date | {
+		from: Date;
+		to: Date;
+	};
+	defaultMonth?: Date;
+	minDate?: Date;
+	maxDate?: Date;
+	disabled?: (date: Date) => boolean;
+	formatDate?: (date: Date) => string;
+	placeholder?: string;
+	onValueChange?: (value: Date | {
+		from: Date;
+		to: Date;
+	} | null) => void;
+	onOpenChange?: (open: boolean) => void;
+}
+interface DatePickerState {
+	open: Signal10<boolean>;
+	value: Signal10<Date | {
+		from: Date;
+		to: Date;
+	} | null>;
+	displayMonth: Signal10<Date>;
+}
+interface DatePickerElements {
+	trigger: HTMLButtonElement;
+	content: HTMLDivElement;
+	calendar: {
+		root: HTMLDivElement;
+		header: HTMLDivElement;
+		title: HTMLDivElement;
+		prevButton: HTMLButtonElement;
+		nextButton: HTMLButtonElement;
+		grid: HTMLTableElement;
+	};
+}
+declare const DatePicker: {
+	Root(options?: DatePickerOptions): DatePickerElements & {
+		state: DatePickerState;
+		show: () => void;
+		hide: () => void;
+	};
+};
+import { Signal as Signal11 } from "@vertz/ui";
 interface DialogOptions {
 	modal?: boolean;
 	defaultOpen?: boolean;
 	onOpenChange?: (open: boolean) => void;
 }
 interface DialogState {
-	open: Signal5<boolean>;
+	open: Signal11<boolean>;
 }
 interface DialogElements {
 	trigger: HTMLButtonElement;
@@ -93,37 +290,131 @@ interface DialogElements {
 	overlay: HTMLDivElement;
 	title: HTMLHeadingElement;
 	close: HTMLButtonElement;
+	show: () => void;
+	hide: () => void;
 }
 declare const Dialog: {
 	Root(options?: DialogOptions): DialogElements & {
 		state: DialogState;
 	};
 };
-import { Signal as Signal6 } from "@vertz/ui";
+import { Signal as Signal12 } from "@vertz/ui";
 interface MenuOptions {
 	onSelect?: (value: string) => void;
+	positioning?: FloatingOptions;
 }
 interface MenuState {
-	open: Signal6<boolean>;
-	activeIndex: Signal6<number>;
+	open: Signal12<boolean>;
+	activeIndex: Signal12<number>;
 }
 interface MenuElements {
 	trigger: HTMLButtonElement;
 	content: HTMLDivElement;
 }
-declare const Menu: {
+declare const Menu2: {
 	Root(options?: MenuOptions): MenuElements & {
 		state: MenuState;
 		Item: (value: string, label?: string) => HTMLDivElement;
+		Group: (label: string) => {
+			el: HTMLDivElement;
+			Item: (value: string, label?: string) => HTMLDivElement;
+		};
+		Separator: () => HTMLHRElement;
+		Label: (text: string) => HTMLDivElement;
 	};
 };
-import { Signal as Signal7 } from "@vertz/ui";
+interface DropdownMenuOptions extends MenuOptions {}
+interface DropdownMenuState extends MenuState {}
+interface DropdownMenuElements extends MenuElements {}
+declare const DropdownMenu: {
+	Root(options?: DropdownMenuOptions): DropdownMenuElements & {
+		state: DropdownMenuState;
+		Item: (value: string, label?: string) => HTMLDivElement;
+		Group: (label: string) => {
+			el: HTMLDivElement;
+			Item: (value: string, label?: string) => HTMLDivElement;
+		};
+		Separator: () => HTMLHRElement;
+		Label: (text: string) => HTMLDivElement;
+	};
+};
+import { Signal as Signal13 } from "@vertz/ui";
+interface HoverCardOptions {
+	openDelay?: number;
+	closeDelay?: number;
+	onOpenChange?: (open: boolean) => void;
+	positioning?: FloatingOptions;
+}
+interface HoverCardState {
+	open: Signal13<boolean>;
+}
+interface HoverCardElements {
+	trigger: HTMLElement;
+	content: HTMLDivElement;
+}
+declare const HoverCard: {
+	Root(options?: HoverCardOptions): HoverCardElements & {
+		state: HoverCardState;
+	};
+};
+import { Signal as Signal14 } from "@vertz/ui";
+interface MenubarOptions {
+	onSelect?: (value: string) => void;
+	positioning?: FloatingOptions;
+}
+interface MenubarState {
+	activeMenu: Signal14<string | null>;
+}
+interface MenubarElements {
+	root: HTMLDivElement;
+}
+declare const Menubar: {
+	Root(options?: MenubarOptions): MenubarElements & {
+		state: MenubarState;
+		Menu: (value: string, label?: string) => {
+			trigger: HTMLButtonElement;
+			content: HTMLDivElement;
+			Item: (value: string, label?: string) => HTMLDivElement;
+			Group: (label: string) => {
+				el: HTMLDivElement;
+				Item: (value: string, label?: string) => HTMLDivElement;
+			};
+			Separator: () => HTMLHRElement;
+		};
+	};
+};
+import { Signal as Signal15 } from "@vertz/ui";
+interface NavigationMenuOptions {
+	orientation?: "horizontal" | "vertical";
+	delayOpen?: number;
+	delayClose?: number;
+}
+interface NavigationMenuState {
+	activeItem: Signal15<string | null>;
+}
+interface NavigationMenuElements {
+	root: HTMLElement;
+	list: HTMLDivElement;
+	viewport: HTMLDivElement;
+}
+declare const NavigationMenu: {
+	Root(options?: NavigationMenuOptions): NavigationMenuElements & {
+		state: NavigationMenuState;
+		Item: (value: string, label?: string) => {
+			trigger: HTMLButtonElement;
+			content: HTMLDivElement;
+		};
+		Link: (href: string, label: string) => HTMLAnchorElement;
+	};
+};
+import { Signal as Signal16 } from "@vertz/ui";
 interface PopoverOptions {
 	defaultOpen?: boolean;
 	onOpenChange?: (open: boolean) => void;
+	positioning?: FloatingOptions;
 }
 interface PopoverState {
-	open: Signal7<boolean>;
+	open: Signal16<boolean>;
 }
 interface PopoverElements {
 	trigger: HTMLButtonElement;
@@ -134,14 +425,14 @@ declare const Popover: {
 		state: PopoverState;
 	};
 };
-import { Signal as Signal8 } from "@vertz/ui";
+import { Signal as Signal17 } from "@vertz/ui";
 interface ProgressOptions {
 	defaultValue?: number;
 	min?: number;
 	max?: number;
 }
 interface ProgressState {
-	value: Signal8<number>;
+	value: Signal17<number>;
 }
 interface ProgressElements {
 	root: HTMLDivElement;
@@ -153,13 +444,13 @@ declare const Progress: {
 		setValue: (value: number) => void;
 	};
 };
-import { Signal as Signal9 } from "@vertz/ui";
+import { Signal as Signal18 } from "@vertz/ui";
 interface RadioOptions {
 	defaultValue?: string;
 	onValueChange?: (value: string) => void;
 }
 interface RadioState {
-	value: Signal9<string>;
+	value: Signal18<string>;
 }
 interface RadioElements {
 	root: HTMLDivElement;
@@ -170,15 +461,64 @@ declare const Radio: {
 		Item: (value: string, label?: string) => HTMLDivElement;
 	};
 };
-import { Signal as Signal10 } from "@vertz/ui";
+import { Signal as Signal19 } from "@vertz/ui";
+interface ResizablePanelOptions {
+	orientation?: "horizontal" | "vertical";
+	onResize?: (sizes: number[]) => void;
+}
+interface PanelOptions {
+	defaultSize?: number;
+	minSize?: number;
+	maxSize?: number;
+}
+interface ResizablePanelState {
+	sizes: Signal19<number[]>;
+}
+interface ResizablePanelElements {
+	root: HTMLDivElement;
+}
+declare const ResizablePanel: {
+	Root(options?: ResizablePanelOptions): ResizablePanelElements & {
+		state: ResizablePanelState;
+		Panel: (panelOptions?: PanelOptions) => HTMLDivElement;
+		Handle: () => HTMLDivElement;
+	};
+};
+import { Signal as Signal20 } from "@vertz/ui";
+interface ScrollAreaOptions {
+	orientation?: "vertical" | "horizontal" | "both";
+	type?: "auto" | "always" | "hover" | "scroll";
+}
+interface ScrollAreaState {
+	scrollTop: Signal20<number>;
+	scrollLeft: Signal20<number>;
+}
+interface ScrollAreaElements {
+	root: HTMLDivElement;
+	viewport: HTMLDivElement;
+	content: HTMLDivElement;
+	scrollbarY: HTMLDivElement;
+	thumbY: HTMLDivElement;
+	scrollbarX: HTMLDivElement;
+	thumbX: HTMLDivElement;
+}
+declare const ScrollArea: {
+	Root(options?: ScrollAreaOptions): ScrollAreaElements & {
+		state: ScrollAreaState;
+		update: () => void;
+	};
+};
+import { Signal as Signal21 } from "@vertz/ui";
 interface SelectOptions {
 	defaultValue?: string;
+	placeholder?: string;
 	onValueChange?: (value: string) => void;
+	positioning?: FloatingOptions;
 }
 interface SelectState {
-	open: Signal10<boolean>;
-	value: Signal10<string>;
-	activeIndex: Signal10<number>;
+	open: Signal21<boolean>;
+	value: Signal21<string>;
+	activeIndex: Signal21<number>;
 }
 interface SelectElements {
 	trigger: HTMLButtonElement;
@@ -188,9 +528,14 @@ declare const Select: {
 	Root(options?: SelectOptions): SelectElements & {
 		state: SelectState;
 		Item: (value: string, label?: string) => HTMLDivElement;
+		Group: (label: string) => {
+			el: HTMLDivElement;
+			Item: (value: string, label?: string) => HTMLDivElement;
+		};
+		Separator: () => HTMLHRElement;
 	};
 };
-import { Signal as Signal11 } from "@vertz/ui";
+import { Signal as Signal22 } from "@vertz/ui";
 interface SliderOptions {
 	defaultValue?: number;
 	min?: number;
@@ -200,8 +545,8 @@ interface SliderOptions {
 	onValueChange?: (value: number) => void;
 }
 interface SliderState {
-	value: Signal11<number>;
-	disabled: Signal11<boolean>;
+	value: Signal22<number>;
+	disabled: Signal22<boolean>;
 }
 interface SliderElements {
 	root: HTMLDivElement;
@@ -213,15 +558,15 @@ declare const Slider: {
 		state: SliderState;
 	};
 };
-import { Signal as Signal12 } from "@vertz/ui";
+import { Signal as Signal23 } from "@vertz/ui";
 interface SwitchOptions {
 	defaultChecked?: boolean;
 	disabled?: boolean;
 	onCheckedChange?: (checked: boolean) => void;
 }
 interface SwitchState {
-	checked: Signal12<boolean>;
-	disabled: Signal12<boolean>;
+	checked: Signal23<boolean>;
+	disabled: Signal23<boolean>;
 }
 interface SwitchElements {
 	root: HTMLButtonElement;
@@ -231,13 +576,14 @@ declare const Switch: {
 		state: SwitchState;
 	};
 };
-import { Signal as Signal13 } from "@vertz/ui";
+import { Signal as Signal24 } from "@vertz/ui";
 interface TabsOptions {
 	defaultValue?: string;
+	orientation?: "horizontal" | "vertical";
 	onValueChange?: (value: string) => void;
 }
 interface TabsState {
-	value: Signal13<string>;
+	value: Signal24<string>;
 }
 interface TabsElements {
 	root: HTMLDivElement;
@@ -252,7 +598,7 @@ declare const Tabs: {
 		};
 	};
 };
-import { Signal as Signal14 } from "@vertz/ui";
+import { Signal as Signal25 } from "@vertz/ui";
 interface ToastOptions {
 	duration?: number;
 	politeness?: "polite" | "assertive";
@@ -263,7 +609,7 @@ interface ToastMessage {
 	el: HTMLDivElement;
 }
 interface ToastState {
-	messages: Signal14<ToastMessage[]>;
+	messages: Signal25<ToastMessage[]>;
 }
 interface ToastElements {
 	region: HTMLDivElement;
@@ -275,13 +621,53 @@ declare const Toast: {
 		dismiss: (id: string) => void;
 	};
 };
-import { Signal as Signal15 } from "@vertz/ui";
+import { Signal as Signal26 } from "@vertz/ui";
+interface ToggleOptions {
+	defaultPressed?: boolean;
+	disabled?: boolean;
+	onPressedChange?: (pressed: boolean) => void;
+}
+interface ToggleState {
+	pressed: Signal26<boolean>;
+	disabled: Signal26<boolean>;
+}
+interface ToggleElements {
+	root: HTMLButtonElement;
+}
+declare const Toggle: {
+	Root(options?: ToggleOptions): ToggleElements & {
+		state: ToggleState;
+	};
+};
+import { Signal as Signal27 } from "@vertz/ui";
+interface ToggleGroupOptions {
+	type?: "single" | "multiple";
+	defaultValue?: string[];
+	orientation?: "horizontal" | "vertical";
+	disabled?: boolean;
+	onValueChange?: (value: string[]) => void;
+}
+interface ToggleGroupState {
+	value: Signal27<string[]>;
+	disabled: Signal27<boolean>;
+}
+interface ToggleGroupElements {
+	root: HTMLDivElement;
+}
+declare const ToggleGroup: {
+	Root(options?: ToggleGroupOptions): ToggleGroupElements & {
+		state: ToggleGroupState;
+		Item: (value: string) => HTMLButtonElement;
+	};
+};
+import { Signal as Signal28 } from "@vertz/ui";
 interface TooltipOptions {
 	delay?: number;
 	onOpenChange?: (open: boolean) => void;
+	positioning?: FloatingOptions;
 }
 interface TooltipState {
-	open: Signal15<boolean>;
+	open: Signal28<boolean>;
 }
 interface TooltipElements {
 	trigger: HTMLElement;
@@ -292,4 +678,4 @@ declare const Tooltip: {
 		state: TooltipState;
 	};
 };
-export { TooltipState, TooltipOptions, TooltipElements, Tooltip, ToastState, ToastOptions, ToastMessage, ToastElements, Toast, TabsState, TabsOptions, TabsElements, Tabs, SwitchState, SwitchOptions, SwitchElements, Switch, SliderState, SliderOptions, SliderElements, Slider, SelectState, SelectOptions, SelectElements, Select, RadioState, RadioOptions, RadioElements, Radio, ProgressState, ProgressOptions, ProgressElements, Progress, PopoverState, PopoverOptions, PopoverElements, Popover, MenuState, MenuOptions, MenuElements, Menu, DialogState, DialogOptions, DialogElements, Dialog, ComboboxState, ComboboxOptions, ComboboxElements, Combobox, CheckedState, CheckboxState, CheckboxOptions, CheckboxElements, Checkbox, ButtonState, ButtonOptions, ButtonElements, Button, AccordionState, AccordionOptions, AccordionElements, Accordion };
+export { TooltipState, TooltipOptions, TooltipElements, Tooltip, ToggleState, ToggleOptions, ToggleGroupState, ToggleGroupOptions, ToggleGroupElements, ToggleGroup, ToggleElements, Toggle, ToastState, ToastOptions, ToastMessage, ToastElements, Toast, TabsState, TabsOptions, TabsElements, Tabs, SwitchState, SwitchOptions, SwitchElements, Switch, SliderState, SliderOptions, SliderElements, Slider, SelectState, SelectOptions, SelectElements, Select, ScrollAreaState, ScrollAreaOptions, ScrollAreaElements, ScrollArea, ResizablePanelState, ResizablePanelOptions, ResizablePanelElements, ResizablePanel, RadioState, RadioOptions, RadioElements, Radio, ProgressState, ProgressOptions, ProgressElements, Progress, PopoverState, PopoverOptions, PopoverElements, Popover, PanelOptions, NavigationMenuState, NavigationMenuOptions, NavigationMenuElements, NavigationMenu, MenubarState, MenubarOptions, MenubarElements, Menubar, MenuState, MenuOptions, MenuElements, Menu2 as Menu, HoverCardState, HoverCardOptions, HoverCardElements, HoverCard, FloatingOptions, DropdownMenuState, DropdownMenuOptions, DropdownMenuElements, DropdownMenu, DialogState, DialogOptions, DialogElements, Dialog, DatePickerState, DatePickerOptions, DatePickerElements, DatePicker, ContextMenuState, ContextMenuOptions, ContextMenuElements, ContextMenu, CommandState, CommandOptions, CommandElements, Command, ComboboxState, ComboboxOptions, ComboboxElements, Combobox, CollapsibleState, CollapsibleOptions, CollapsibleElements, Collapsible, CheckedState, CheckboxState, CheckboxOptions, CheckboxElements, Checkbox, CarouselState, CarouselOptions, CarouselElements, Carousel, CalendarState, CalendarOptions, CalendarElements, Calendar, ButtonState, ButtonOptions, ButtonElements, Button, AccordionState, AccordionOptions, AccordionElements, Accordion };