haze-ui 1.29.0 → 1.30.0

package/dist/types/form/form-item-styles.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Shared FormItem skin — the layout classes the component wears, split
+ * per layout mode. Living in their own module keeps the component file
+ * free of style internals (react-refresh boundary) and lets tests (and
+ * consumers composing custom field chrome) reference the exact classes;
+ * split-css groups the emitted CSS into `haze-ui/css/form.css` with them.
+ */
+/** vertical (default): label stacked above the control. */
+export declare const item: import("@linaria/core").LinariaClassName;
+/** horizontal: label column left, control column right; the control
+ * column carries the error span so rows keep a shared left rail. */
+export declare const itemHorizontal: import("@linaria/core").LinariaClassName;
+/** inline: label + control + error flow on one row; the trailing
+ * margin-inline-end separates sibling inline items automatically. */
+export declare const itemInline: import("@linaria/core").LinariaClassName;
+/** horizontal only: the control + error column beside the label. */
+export declare const controlColumn: import("@linaria/core").LinariaClassName;
+export declare const labelText: import("@linaria/core").LinariaClassName;
+/** horizontal only: the label as a fixed column — the width itself is a
+ * runtime value (labelWidth) and rides an inline style instead. The
+ * block-start padding optically aligns the label's first line with the
+ * control's text (InputCore md's vertical padding). */
+export declare const labelColumn: import("@linaria/core").LinariaClassName;
+export declare const errorText: import("@linaria/core").LinariaClassName;

package/dist/types/index.d.ts

@@ -1,11 +1,17 @@
 export { lightTheme, darkTheme } from './tokens/colors';
 export { violetTheme, tealTheme, cyanTheme, orangeTheme, roseTheme } from './tokens/brands';
 export type { BrandTheme } from './tokens/brands';
+export { createBrandTheme, BRAND_FAMILIES, BRAND_SEEDS, buildBrandTheme } from './tokens/palette';
+export type { CreateBrandThemeOptions, BrandThemeCss, BrandSeedOverrides, ScaleSeed } from './tokens/palette';
 export { spacing } from './tokens/spacing';
 export { compact } from './tokens/density';
 export { typography } from './tokens/typography';
+export { motion, motionPresets } from './tokens/motion';
+export type { MotionPreset } from './tokens/motion';
 export { TOKEN_REGISTRY, COMPONENT_TOKENS } from './tokens/registry';
 export type { TokenDef } from './tokens/registry';
+export { gregoryAdapter, islamicUmalquraAdapter, getAdapter, formatInTimeZone, getZonedParts } from './dates';
+export type { HazeDateAdapter, CivilDateParts, HazeCalendarIdentifier, MonthNameStyle, ZonedParts, } from './dates';
 export { Button, ButtonLink, buttonVariants, buttonSizes } from './components/Button';
 export type { ButtonProps, ButtonLinkProps } from './components/Button';
 export { Input, InputCore } from './components/Input';
@@ -56,14 +62,14 @@ export { Breadcrumb, BreadcrumbItem } from './components/Breadcrumb';
 export type { BreadcrumbProps, BreadcrumbItemProps, } from './components/Breadcrumb';
 export { Disclosure } from './components/Disclosure';
 export type { DisclosureProps } from './components/Disclosure';
-export { Menu, MenuItem, MenuDivider, MenuSub, MenuSubTrigger, MenuSubContent } from './components/Menu';
-export type { MenuProps, MenuItemProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps } from './components/Menu';
+export { Menu, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuGroup, MenuDivider, MenuSub, MenuSubTrigger, MenuSubContent } from './components/Menu';
+export type { MenuProps, MenuDataItem, MenuItemProps, MenuCheckboxItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuGroupProps, MenuSubProps, MenuSubTriggerProps, MenuSubContentProps } from './components/Menu';
 export { NumberInput, NumberInputCore } from './components/NumberInput';
 export type { NumberInputProps, NumberInputCoreProps } from './components/NumberInput';
 export { FileInput } from './components/FileInput';
 export type { FileInputProps } from './components/FileInput';
 export { Toast, ToastContainer, useToast, toast } from './components/Toast';
-export type { ToastProps, ToastContainerProps, ToastOptions, ToastVariant, ToastClassNames } from './components/Toast';
+export type { ToastProps, ToastContainerProps, ToastOptions, ToastVariant, ToastAction, ToastClassNames } from './components/Toast';
 export { List, ListItem } from './components/List';
 export type { ListProps, ListItemProps } from './components/List';
 export { Combobox, ComboboxOption, ComboboxGroup } from './components/Combobox';
@@ -74,8 +80,8 @@ export { Carousel, CarouselSlide } from './components/Carousel';
 export type { CarouselProps, CarouselSlideProps } from './components/Carousel';
 export { Datepicker, DatepickerCore } from './components/Datepicker';
 export type { DatepickerProps, DatepickerCoreProps, DatepickerPreset } from './components/Datepicker';
-export { Tree } from './components/Tree';
-export type { TreeProps, TreeNodeData } from './components/Tree';
+export { Tree, SortableTree } from './components/Tree';
+export type { TreeProps, TreeNodeData, SortableTreeProps, SortableTreeMoveInfo } from './components/Tree';
 export { TreeSelect } from './components/TreeSelect';
 export type { TreeSelectProps } from './components/TreeSelect';
 export { Divider } from './components/Divider';
@@ -107,7 +113,7 @@ export type { CollapsibleProps, CollapsibleTriggerProps, CollapsibleContentProps
 export { Transfer, TransferCore } from './components/Transfer';
 export type { TransferProps, TransferItem, TransferCoreProps } from './components/Transfer';
 export { Upload, UploadCore } from './components/Upload';
-export type { UploadProps, UploadCoreProps, UploadHandle, UploadStatus, UploadFileStatus, UploadRequest, UploadRequestOptions, UploadListItemActions, UploadListItemRender } from './components/Upload';
+export type { UploadProps, UploadCoreProps, UploadHandle, UploadStatus, UploadFile, UploadValueItem, UploadFileStatus, UploadRequest, UploadRequestOptions, UploadListItemActions, UploadListItemRender } from './components/Upload';
 export { ColorPicker, ColorPickerCore } from './components/ColorPicker';
 export type { ColorPickerProps, ColorPickerCoreProps } from './components/ColorPicker';
 export { Rating, RatingCore } from './components/Rating';
@@ -129,7 +135,7 @@ export type { ChipProps } from './components/Chip';
 export { ScrollArea } from './components/ScrollArea';
 export type { ScrollAreaProps } from './components/ScrollArea';
 export { TimePicker, TimePickerCore } from './components/TimePicker';
-export type { TimePickerProps, TimePickerCoreProps } from './components/TimePicker';
+export type { TimePickerProps, TimePickerCoreProps, TimeParts, TimePickerFormat } from './components/TimePicker';
 export { DateRangePicker, DateRangePickerCore } from './components/DateRangePicker';
 export type { DateRangePickerProps, DateRangePickerCoreProps, DateRangePickerPreset, DateRangePickerPresets } from './components/DateRangePicker';
 export { OTPInput, OTPInputCore } from './components/OTPInput';
@@ -144,8 +150,8 @@ export { PromptInput } from './components/PromptInput';
 export type { PromptInputProps } from './components/PromptInput';
 export { InlineEdit } from './components/InlineEdit';
 export type { InlineEditProps } from './components/InlineEdit';
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from './components/DropdownMenu';
-export type { DropdownMenuProps, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuHandle } from './components/DropdownMenu';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuGroup, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent } from './components/DropdownMenu';
+export type { DropdownMenuProps, DropdownMenuDataItem, DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuGroupProps, DropdownMenuSeparatorProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuHandle } from './components/DropdownMenu';
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from './components/ContextMenu';
 export type { ContextMenuProps, ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuSeparatorProps } from './components/ContextMenu';
 export { NavigationBar, NavLink } from './components/NavigationBar';
@@ -165,7 +171,7 @@ export type { CodeBlockProps, Highlighter } from './components/CodeBlock';
 export { AspectRatio } from './components/AspectRatio';
 export type { AspectRatioProps } from './components/AspectRatio';
 export { VirtualList } from './components/VirtualList';
-export type { VirtualListProps, VirtualListHandle, VirtualListGroup, VirtualListAlign } from './components/VirtualList';
+export type { VirtualListProps, VirtualListHandle, VirtualListGroup, VirtualListAlign, VirtualListOrientation } from './components/VirtualList';
 export { TagGroup, TagGroupItem, SortableTagGroup } from './components/TagGroup';
 export type { TagGroupProps, TagGroupItemProps, SortableTagGroupProps } from './components/TagGroup';
 export { BottomSheet } from './components/BottomSheet';
@@ -176,6 +182,8 @@ export { default as LocaleProvider, useStrings } from './components/LocaleProvid
 export { defaultStrings, enUS, zhCN, jaJP, deDE, frFR, esES, itIT, ptBR, ruRU, koKR, arSA, createStrings } from './components/LocaleProvider';
 export type { LocaleProviderProps, HazeStrings } from './components/LocaleProvider';
 export type { DeepPartial } from './components/LocaleProvider';
+export { default as ConfigProvider, useConfigDefaults } from './components/ConfigProvider';
+export type { ConfigProviderProps, HazeConfig } from './components/ConfigProvider';
 export { useDirection, getDirection, localeDirection } from './utils/direction';
 export type { Direction } from './utils/direction';
 export { DataTable, dataTableSum, dataTableAvg, dataTableCount, dataTableToCsv } from './components/DataTable';
@@ -187,7 +195,7 @@ export type { KbdProps } from './components/Kbd';
 export { AvatarGroup } from './components/AvatarGroup';
 export type { AvatarGroupProps } from './components/AvatarGroup';
 export { Calendar } from './components/Calendar';
-export type { CalendarProps, CalendarPickerMode } from './components/Calendar';
+export type { CalendarProps, CalendarPickerMode, CalendarCellRender, } from './components/Calendar';
 export { HoverCard } from './components/HoverCard';
 export type { HoverCardProps } from './components/HoverCard';
 export { Toolbar, ToolbarButton, ToolbarSeparator, ToolbarToggle } from './components/Toolbar';

package/dist/types/tokens/index.d.ts

@@ -2,8 +2,10 @@ export { lightTheme, darkTheme } from './colors';
 export { spacing } from './spacing';
 export { compact } from './density';
 export { motion } from './motion';
+export { motionPresets } from './motion';
+export type { MotionPreset } from './motion';
 export { typography } from './typography';
-export { PRIMITIVES, SEMANTIC_COLOR_TOKENS } from './palette';
-export type { Family, Mode, PrimitiveScales, SemanticColorToken } from './palette';
+export { PRIMITIVES, SEMANTIC_COLOR_TOKENS, createBrandTheme } from './palette';
+export type { Family, Mode, PrimitiveScales, SemanticColorToken, ScaleSeed, BrandSeedOverrides, CreateBrandThemeOptions, BrandThemeCss } from './palette';
 export { deltaE, formatOklch, oklchToHex, parseHex, parseOklch, wcagContrast } from './oklch';
 export type { Oklch } from './oklch';

package/dist/types/tokens/motion.d.ts

@@ -1 +1,17 @@
 export declare const motion: import("@linaria/core").LinariaClassName;
+export declare const motionPresets: {
+    /** Opacity only — the safe default, also the one floating panels use. */
+    readonly fade: import("@linaria/core").LinariaClassName;
+    /** Fade plus a subtle settle from 97% scale — cards, dialogs, images. */
+    readonly fadeScale: import("@linaria/core").LinariaClassName;
+    /** Rises into place from just below; sinks back down on exit. */
+    readonly slideUp: import("@linaria/core").LinariaClassName;
+    /** Descends into place from just above; rises back up on exit. */
+    readonly slideDown: import("@linaria/core").LinariaClassName;
+    /** Slides in leftward, arriving from just right; exits back right. */
+    readonly slideLeft: import("@linaria/core").LinariaClassName;
+    /** Slides in rightward, arriving from just left; exits back left. */
+    readonly slideRight: import("@linaria/core").LinariaClassName;
+};
+/** Preset names accepted wherever a motion preset can be chosen. */
+export type MotionPreset = keyof typeof motionPresets;

package/dist/types/tokens/palette.d.ts

@@ -25,6 +25,18 @@ export type SemanticColorToken = {
     /** Concrete computed value per mode (formula math applied to the aliased base). */
     resolved: Record<Mode, Oklch>;
 };
+type ScaleSeed = Readonly<Record<number, string>>;
+/**
+ * Brand preset seeds. Anchors sit near Tailwind's 600/700 steps (light) and
+ * one step brighter (dark), mirroring how blue's dark anchors sit one step
+ * above their light counterparts. Where a floor could not be cleared at the
+ * nearest Tailwind step, the seed is darkened — the same policy as green-9
+ * (#16a34a → #15803d): teal/cyan/orange light anchors move a full step to
+ * 700 for white-on-primary 4.5:1, and rose-600 is nudged ΔE 0.011 darker so
+ * primary-on-primary-subtle clears the 4.0 ratchet. Anchored steps 9/10
+ * (light) and 8/9 (dark) match the primary/info STATUS_STEP slots.
+ */
+declare const BRAND_SEEDS: Record<BrandFamily, Record<Mode, ScaleSeed>>;
 declare const PRIMITIVES: PrimitiveScales;
 /**
  * Primitive scales for one theme: family name → 12 formatted steps, per
@@ -61,5 +73,50 @@ declare function buildBrandTheme(family: BrandFamily): BrandThemeDef;
 declare function themeDeclarations(mode: Mode, scales: ThemeScales, semanticTokens: readonly SemanticColorToken[]): string;
 /** Class-ready declarations for one brand preset theme — what brands.ts interpolates. */
 declare function brandDeclarations(family: BrandFamily, mode: Mode): string;
-export { PRIMITIVES, SEMANTIC_COLOR_TOKENS, BRAND_FAMILIES, buildBrandTheme, brandDeclarations, themeDeclarations };
-export type { ThemeScales };
+export type BrandSeedOverrides = {
+    /** Extra light-mode anchors merged over the derived ones, e.g. `{10: '#6d28d9'}`. */
+    light?: ScaleSeed;
+    /** Extra dark-mode anchors merged over the derived ones, e.g. `{8: '#9b76fa'}`. */
+    dark?: ScaleSeed;
+};
+export type CreateBrandThemeOptions = {
+    /**
+     * Brand family name — becomes the primitive scale's custom-property
+     * prefix (`--haze-{name}-1…12`). Lowercase kebab (`brand`, `acme-corp`).
+     * A preset name ('violet' … 'rose') reproduces that preset's slots;
+     * 'blue' re-seeds the default theme's own scale.
+     */
+    name: string;
+    /** Light-mode primary seed (hex) — anchors scale step 9. */
+    light: string;
+    /**
+     * Dark-mode primary seed (hex) — anchors dark step 9. Omit to derive it
+     * from `light` via the family lightness relationship (see
+     * DERIVED_SEED_OFFSETS).
+     */
+    dark?: string;
+    /** Explicit anchors merged over the derived seeds — same slots the presets pin. */
+    overrides?: BrandSeedOverrides;
+};
+/** Runtime-built brand theme: class-ready declaration blocks per mode (see brands.ts for the preset shape). */
+export type BrandThemeCss = {
+    name: string;
+    light: string;
+    dark: string;
+};
+/**
+ * Build a complete custom brand theme at runtime from one or two seed hexes
+ * — the same pipeline the build-time presets go through (primitive scales,
+ * semantic rerouting of primary/info to the brand family, relative-color
+ * interaction states), so the output is byte-compatible with
+ * `brandDeclarations()` given equivalent seeds.
+ *
+ * The returned blocks are bare custom-property declarations (no selector):
+ * hand them to a `<style>` tag or a Linaria `css` template as
+ * `.my-brand-light { … }` / `.my-brand-dark { … }` classes, exactly like the
+ * preset theme classes. As with the presets, the blocks are complete theme
+ * REPLACEMENTS for lightTheme/darkTheme — never stack them on top.
+ */
+declare function createBrandTheme({ name, light, dark, overrides }: CreateBrandThemeOptions): BrandThemeCss;
+export { PRIMITIVES, SEMANTIC_COLOR_TOKENS, BRAND_FAMILIES, BRAND_SEEDS, buildBrandTheme, brandDeclarations, themeDeclarations, createBrandTheme };
+export type { ThemeScales, ScaleSeed };

package/dist/types/utils/menuItems.d.ts

@@ -0,0 +1,126 @@
+import type { ComponentType, Key, ReactNode } from 'react';
+import type { ControlOrValue } from 'react-use-control';
+/**
+ * Data-driven menu description shared by the Menu and DropdownMenu
+ * families: an `items` array replaces composed children on the root.
+ * The renderer is family-agnostic — each root passes its own component
+ * record, so the two families keep their independent skins.
+ */
+export type MenuDataItem = {
+    type: 'item';
+    label: ReactNode;
+    onSelect?: () => void;
+    disabled?: boolean;
+    danger?: boolean;
+    icon?: ReactNode;
+    kbdLabel?: ReactNode;
+    /** Stable React key; the array index is used when omitted. */
+    key?: Key;
+} | {
+    type: 'checkbox';
+    label: ReactNode;
+    checked?: ControlOrValue<boolean>;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    danger?: boolean;
+    icon?: ReactNode;
+    kbdLabel?: ReactNode;
+    key?: Key;
+} | {
+    type: 'radio';
+    /** Value this option selects in its group. */
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    danger?: boolean;
+    icon?: ReactNode;
+    kbdLabel?: ReactNode;
+    key?: Key;
+} | {
+    type: 'group';
+    /** Non-interactive heading above the group's items. */
+    label?: ReactNode;
+    /**
+     * When set, the group is a radio group bound to this value —
+     * its `radio` children become one single-select cluster.
+     */
+    value?: ControlOrValue<string>;
+    onValueChange?: (value: string) => void;
+    children: MenuDataItem[];
+    key?: Key;
+} | {
+    type: 'divider';
+    key?: Key;
+} | {
+    type: 'sub';
+    label: ReactNode;
+    children: MenuDataItem[];
+    disabled?: boolean;
+    key?: Key;
+};
+/** The family's components the renderer composes `items` from. */
+type MenuDataFamily = {
+    Item: ComponentType<{
+        children: ReactNode;
+        onSelect?: () => void;
+        disabled?: boolean;
+        danger?: boolean;
+        icon?: ReactNode;
+        kbdLabel?: ReactNode;
+        className?: string;
+    }>;
+    CheckboxItem: ComponentType<{
+        children: ReactNode;
+        checked?: ControlOrValue<boolean>;
+        onCheckedChange?: (checked: boolean) => void;
+        disabled?: boolean;
+        danger?: boolean;
+        icon?: ReactNode;
+        kbdLabel?: ReactNode;
+        className?: string;
+    }>;
+    RadioGroup: ComponentType<{
+        children: ReactNode;
+        value?: ControlOrValue<string>;
+        onValueChange?: (value: string) => void;
+        label?: ReactNode;
+        className?: string;
+    }>;
+    RadioItem: ComponentType<{
+        children: ReactNode;
+        value: string;
+        disabled?: boolean;
+        danger?: boolean;
+        icon?: ReactNode;
+        kbdLabel?: ReactNode;
+        className?: string;
+    }>;
+    Group: ComponentType<{
+        label: ReactNode;
+        children: ReactNode;
+        className?: string;
+    }>;
+    Divider: ComponentType<{
+        className?: string;
+    }>;
+    Sub: ComponentType<{
+        children: ReactNode;
+        className?: string;
+    }>;
+    SubTrigger: ComponentType<{
+        children: ReactNode;
+        disabled?: boolean;
+        className?: string;
+    }>;
+    SubContent: ComponentType<{
+        children: ReactNode;
+        className?: string;
+    }>;
+};
+/**
+ * Renders a `MenuDataItem[]` through a family's components. Recursion:
+ * `group` and `sub` render their `children` through the same walk, so
+ * nested submenus compose to any depth.
+ */
+export declare function renderMenuDataItems(items: MenuDataItem[], family: MenuDataFamily): ReactNode;
+export {};

package/dist/types/utils/menuRadio.d.ts

@@ -0,0 +1,21 @@
+import type { ControlOrValue } from 'react-use-control';
+/**
+ * Radio-group state shared by the Menu and DropdownMenu families
+ * (the same seam as utils/submenu): the group owns the single selected
+ * value through `useControl`, the items read it and request changes.
+ */
+type MenuRadioGroupState = {
+    /** Currently selected value ('' = nothing selected). */
+    value: string;
+    /** Selects `next`; a no-op (no event) when already selected. */
+    select: (next: string) => void;
+};
+export declare const MenuRadioGroupProvider: import("react").Provider<MenuRadioGroupState | undefined>;
+/** Group-side state: controllable `value` + change notification. */
+export declare function useMenuRadioGroup(value: ControlOrValue<string> | undefined, onValueChange?: (value: string) => void): MenuRadioGroupState;
+/** Item-side state: whether this item is the selected one, plus select. */
+export declare function useMenuRadioItem(itemValue: string): {
+    checked: boolean;
+    select: () => void;
+};
+export {};

package/dist/utils/floating.js

@@ -5,8 +5,8 @@ import { getDirection as t } from "./direction.js";
 import { computeFloatingPosition as n, mirrorPlacement as r, resolvePadding as i } from "./collision.js";
 import { whenExitSettles as a } from "./presence.js";
 /* empty css                   */
-import { jsx as o } from "react/jsx-runtime";
-import { useCallback as s, useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { useCallback as o, useEffect as s, useId as c, useRef as l, useState as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
 //#region src/lib/utils/floating.tsx
 var f = 500;
 function p() {
@@ -52,47 +52,47 @@ var F = "haze-floating__fallbackBottom", I = F, L = "haze-floating__fallbackBott
 	left: W,
 	right: G
 };
-function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: o, collision: v }) {
-	let y = `--haze-floating-${l().replace(/[^a-zA-Z0-9]/g, "")}`, b = p(), x = m(), [S, C] = d(!e), [w, T] = d(e);
+function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: d, collision: v }) {
+	let y = `--haze-floating-${c().replace(/[^a-zA-Z0-9]/g, "")}`, b = p(), x = m(), [S, C] = u(!e), [w, T] = u(e);
 	e !== w && (T(e), e && C(!1));
-	let E = u(!1), [D, O] = d(!1), k = u(null), A = u(-Infinity), j = u(-Infinity), M = u(null);
-	c(() => {
+	let E = l(!1), [D, O] = u(!1), k = l(null), A = l(-Infinity), j = l(-Infinity), M = l(null);
+	s(() => {
 		let t = i.current;
 		if (!t || !b) return;
 		t !== k.current && (k.current = t, E.current = !1, O(!1));
-		let r = !0, s = () => {
+		let r = !0, o = () => {
 			M.current = { el: t }, t.hidePopover();
-		}, c = () => {
+		}, s = () => {
 			if (E.current && t === i.current) {
-				if (o) {
+				if (d) {
 					let e = () => {
-						r && E.current && t === i.current && s();
+						r && E.current && t === i.current && o();
 					}, n = a(t);
 					n ? n.then(e) : e();
-				} else s();
+				} else o();
 			}
-		}, l = (r) => {
+		}, c = (r) => {
 			let i = r.newState;
 			if (E.current = i === "open", O(E.current), i === "closed") {
-				o && C(!0);
+				d && C(!0);
 				let r = M.current?.el === t;
 				if (M.current = null, r) {
 					e && t.showPopover();
 					return;
 				}
 				e && (performance.now() - A.current < f && (j.current = performance.now()), A.current = -Infinity, n(!1));
-			} else e || c();
+			} else e || s();
 		};
-		return t.addEventListener("toggle", l), e ? E.current || t.showPopover() : c(), () => {
-			r = !1, t.removeEventListener("toggle", l);
+		return t.addEventListener("toggle", c), e ? E.current || t.showPopover() : s(), () => {
+			r = !1, t.removeEventListener("toggle", c);
 		};
 	}, [
 		b,
 		e,
 		n,
 		i,
-		o
-	]), c(() => {
+		d
+	]), s(() => {
 		if (b || !e) return;
 		let t = (e) => e instanceof Node && !!(r.current?.contains(e) || i.current?.contains(e)), a = (e) => {
 			t(e.target) || n(!1);
@@ -108,31 +108,31 @@ function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: o, coll
 		n,
 		r,
 		i
-	]), c(() => {
-		if (b || !o || e || S) return;
-		let t = !0, n = i.current, r = n ? a(n) : null, s = () => {
+	]), s(() => {
+		if (b || !d || e || S) return;
+		let t = !0, n = i.current, r = n ? a(n) : null, o = () => {
 			t && C(!0);
 		};
-		return r ? r.then(s) : s(), () => {
+		return r ? r.then(o) : o(), () => {
 			t = !1;
 		};
 	}, [
 		b,
-		o,
+		d,
 		e,
 		S,
 		i
 	]);
-	let N = s(() => {
+	let N = o(() => {
 		e && (A.current = performance.now());
-	}, [e]), P = s(() => {
+	}, [e]), P = o(() => {
 		if (performance.now() - j.current < f) {
 			j.current = -Infinity;
 			return;
 		}
 		n((e) => !e);
-	}, [n]), [F, I] = d("ltr");
-	return c(() => {
+	}, [n]), [F, I] = u("ltr");
+	return s(() => {
 		let e = t(r.current);
 		I((t) => t === e ? t : e);
 	}, [r, e]), {
@@ -140,8 +140,8 @@ function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: o, coll
 		native: b,
 		anchored: x,
 		shown: b ? D : e,
-		dataState: o ? e ? "open" : "closed" : void 0,
-		exited: o ? S : !e,
+		dataState: d ? e ? "open" : "closed" : void 0,
+		exited: d ? S : !e,
 		collision: v,
 		direction: F,
 		anchorName: y,
@@ -156,8 +156,8 @@ function te({ open: e, setOpen: n, triggerRef: r, panelRef: i, animated: o, coll
 			b && h,
 			b && x && g,
 			b && !x && _,
-			!b && !e && (!o || S) && "haze-floating__floatingHidden",
-			!!o && "haze-floating__floatingAnimated"
+			!b && !e && (!d || S) && "haze-floating__floatingHidden",
+			!!d && "haze-floating__floatingAnimated"
 		],
 		triggerRef: r,
 		panelRef: i
@@ -205,8 +205,8 @@ function Q(e, r, a, o) {
 	e.style.top = `${d}px`, e.style.left = `${f}px`;
 }
 function $({ behavior: e, placement: t, collision: n }) {
-	let { native: r, anchored: a, shown: o, triggerRef: s, panelRef: l } = e;
-	c(() => {
+	let { native: r, anchored: a, shown: o, triggerRef: c, panelRef: l } = e;
+	s(() => {
 		if (!r || t === "point" || !o) return;
 		let e = l.current;
 		if (!e) return;
@@ -223,9 +223,9 @@ function $({ behavior: e, placement: t, collision: n }) {
 				window.removeEventListener("scroll", s, !0), window.removeEventListener("resize", s), e.style.translate = "";
 			};
 		}
-		let c = s.current;
-		if (!c) return;
-		let u = () => Q(e, c, t, n);
+		let s = c.current;
+		if (!s) return;
+		let u = () => Q(e, s, t, n);
 		return u(), window.addEventListener("scroll", u, !0), window.addEventListener("resize", u), () => {
 			window.removeEventListener("scroll", u, !0), window.removeEventListener("resize", u);
 		};
@@ -235,32 +235,33 @@ function $({ behavior: e, placement: t, collision: n }) {
 		o,
 		t,
 		n,
-		s,
+		c,
 		l
 	]);
 }
-function ne({ behavior: t, placement: n, collision: r, visualClass: i, className: a, style: s, children: c, ...l }) {
+function ne({ behavior: t, placement: n, collision: r, visualClass: i, className: a, style: o, children: s, ...c }) {
 	$({
 		behavior: t,
 		placement: n ?? "point",
 		collision: r ?? t.collision
 	});
-	let u = t.panelAttrs.style || s ? {
+	let l = t.panelAttrs.style || o ? {
 		...t.panelAttrs.style,
-		...s
+		...o
 	} : void 0;
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ d("div", {
+		"data-slot": "content",
 		...t.dataState !== void 0 && { "data-state": t.dataState },
-		...l,
+		...c,
 		...t.panelAttrs,
-		style: u,
+		style: l,
 		className: e([
 			i,
 			...t.panelClasses,
 			...n ? Y(t, n, t.direction) : [],
 			a
 		]),
-		children: c
+		children: s
 	});
 }
 //#endregion

package/dist/utils/menuItems.js

@@ -0,0 +1,55 @@
+"use client";
+import { Fragment as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/lib/utils/menuItems.tsx
+function r(i, a) {
+	return i.map((i, o) => {
+		let s = i.key ?? o;
+		switch (i.type) {
+			case "divider": return /* @__PURE__ */ t(a.Divider, {}, s);
+			case "item": return /* @__PURE__ */ t(a.Item, {
+				onSelect: i.onSelect,
+				disabled: i.disabled,
+				danger: i.danger,
+				icon: i.icon,
+				kbdLabel: i.kbdLabel,
+				children: i.label
+			}, s);
+			case "checkbox": return /* @__PURE__ */ t(a.CheckboxItem, {
+				checked: i.checked,
+				onCheckedChange: i.onCheckedChange,
+				disabled: i.disabled,
+				danger: i.danger,
+				icon: i.icon,
+				kbdLabel: i.kbdLabel,
+				children: i.label
+			}, s);
+			case "radio": return /* @__PURE__ */ t(a.RadioItem, {
+				value: i.value,
+				disabled: i.disabled,
+				danger: i.danger,
+				icon: i.icon,
+				kbdLabel: i.kbdLabel,
+				children: i.label
+			}, s);
+			case "group": {
+				let n = i.value === void 0 ? i.label === void 0 ? r(i.children, a) : /* @__PURE__ */ t(a.Group, {
+					label: i.label,
+					children: r(i.children, a)
+				}) : /* @__PURE__ */ t(a.RadioGroup, {
+					value: i.value,
+					onValueChange: i.onValueChange,
+					label: i.label,
+					children: r(i.children, a)
+				});
+				return /* @__PURE__ */ t(e, { children: n }, s);
+			}
+			case "sub": return /* @__PURE__ */ n(a.Sub, { children: [/* @__PURE__ */ t(a.SubTrigger, {
+				disabled: i.disabled,
+				children: i.label
+			}), /* @__PURE__ */ t(a.SubContent, { children: r(i.children, a) })] }, s);
+		}
+	});
+}
+//#endregion
+export { r as renderMenuDataItems };