@api7/ui-components 0.5.0 → 0.6.0

package/dist/components/pagination/pagination.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/pagination/pagination.d.ts
 /**
  * Page buttons to render: page indexes (0-based) and 'ellipsis' markers, mirroring
  * react-paginate with pageRangeDisplayed=2 and one page kept at each edge. The window is 3
@@ -20,5 +19,4 @@ export interface PaginationProps {
   className?: string;
 }
 /** Renders nothing when `rowCount` is 0, matching the legacy footer's `total > 0` guard. */
-export declare function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions, onPageIndexChange, onPageSizeChange, label, className }: PaginationProps): import("react").JSX.Element | null;
-//#endregion
+export declare function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions, onPageIndexChange, onPageSizeChange, label, className }: PaginationProps): import("react").JSX.Element | null;

package/dist/components/pagination/pagination.js

@@ -4,7 +4,7 @@ import { cn } from "../../lib/cn.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select/select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-//#region src/components/pagination/pagination.tsx
+// src/components/pagination/pagination.tsx
 const DEFAULT_PAGE_SIZE_OPTIONS = [
 	10,
 	20,
@@ -126,5 +126,4 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 function pageSizeItems(pageSizeOptions, messages, formatter) {
 	return Object.fromEntries(pageSizeOptions.map((size) => [String(size), messages.pagination.pageSize({ size: formatter.format(size) })]));
 }
-//#endregion
 export { DEFAULT_PAGE_SIZE_OPTIONS, Pagination, getPageItems };

package/dist/components/popover/popover.d.ts

@@ -1,5 +1,4 @@
 import { Popover } from "@base-ui/react/popover";
-//#region src/components/popover/popover.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -12,11 +11,12 @@ export type PopoverContentProps = WithClassName<Popover.Popup.Props> & {
   align?: Popover.Positioner.Props['align'];
 };
 declare function PopoverContent({ className, side, sideOffset, align, ...props }: PopoverContentProps): import("react").JSX.Element;
+export type PopoverArrowProps = WithClassName<Popover.Arrow.Props>;
+declare function PopoverArrow({ className, ...props }: PopoverArrowProps): import("react").JSX.Element;
 export type PopoverTitleProps = WithClassName<Popover.Title.Props>;
 declare function PopoverTitle({ className, ...props }: PopoverTitleProps): import("react").JSX.Element;
 export type PopoverDescriptionProps = WithClassName<Popover.Description.Props>;
 declare function PopoverDescription({ className, ...props }: PopoverDescriptionProps): import("react").JSX.Element;
 export type PopoverCloseProps = WithClassName<Popover.Close.Props>;
 declare function PopoverClose({ className, ...props }: PopoverCloseProps): import("react").JSX.Element;
-//#endregion
-export { Popover$1 as Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger };
+export { Popover$1 as Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger };

package/dist/components/popover/popover.js

@@ -3,7 +3,7 @@ import { cn } from "../../lib/cn.js";
 import { popupClassName, popupLayerClassName } from "../../lib/popup.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
-//#region src/components/popover/popover.tsx
+// src/components/popover/popover.tsx
 const Popover$1 = Popover.Root;
 function PopoverTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
@@ -25,6 +25,13 @@ function PopoverContent({ className, side = "bottom", sideOffset = 4, align = "s
 		})
 	}) });
 }
+function PopoverArrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Arrow, {
+		className: cn("size-3 rotate-45 bg-popover data-[side=bottom]:-top-1.5 data-[side=left]:-right-1.5 data-[side=right]:-left-1.5 data-[side=top]:-bottom-1.5 data-[side=inline-start]:-end-1.5 data-[side=inline-end]:-start-1.5", className),
+		...props,
+		"data-slot": "popover-arrow"
+	});
+}
 function PopoverTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Popover.Title, {
 		className: cn("text-sm font-medium", className),
@@ -46,5 +53,4 @@ function PopoverClose({ className, ...props }) {
 		"data-slot": "popover-close"
 	});
 }
-//#endregion
-export { Popover$1 as Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger };
+export { Popover$1 as Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger };

package/dist/components/progress/progress.d.ts

@@ -1,6 +1,5 @@
 import { VariantProps } from "class-variance-authority";
 import { Progress } from "@base-ui/react/progress";
-//#region src/components/progress/progress.d.ts
 declare const trackVariants: (props?: ({
   size?: "sm" | "md" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -15,5 +14,4 @@ export interface ProgressProps extends Omit<Progress.Root.Props, 'className' | '
   className?: string;
 }
 declare function Progress$1({ className, size, variant, ...props }: ProgressProps): import("react").JSX.Element;
-//#endregion
 export { Progress$1 as Progress };

package/dist/components/progress/progress.js

@@ -3,7 +3,7 @@ import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Progress } from "@base-ui/react/progress";
-//#region src/components/progress/progress.tsx
+// src/components/progress/progress.tsx
 const trackVariants = cva("block w-full overflow-hidden rounded-full bg-accent-selected", {
 	variants: { size: {
 		xs: "h-1",
@@ -32,5 +32,4 @@ function Progress$1({ className, size, variant, ...props }) {
 		})
 	});
 }
-//#endregion
 export { Progress$1 as Progress };

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

@@ -1,6 +1,5 @@
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";
-//#region src/components/radio-group/radio-group.d.ts
 export type RadioGroupProps = Omit<RadioGroup.Props, 'className'> & {
   className?: string;
 };
@@ -9,5 +8,4 @@ export type RadioGroupItemProps = Omit<Radio.Root.Props, 'className'> & {
 };
 declare function RadioGroup$1({ className, ...props }: RadioGroupProps): import("react").JSX.Element;
 declare function RadioGroupItem({ className, ...props }: RadioGroupItemProps): import("react").JSX.Element;
-//#endregion
 export { RadioGroup$1 as RadioGroup, RadioGroupItem };

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

@@ -3,7 +3,7 @@ import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";
-//#region src/components/radio-group/radio-group.tsx
+// src/components/radio-group/radio-group.tsx
 function RadioGroup$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		className: cn("flex flex-col gap-2", className),
@@ -23,5 +23,4 @@ function RadioGroupItem({ className, ...props }) {
 		})
 	});
 }
-//#endregion
 export { RadioGroup$1 as RadioGroup, RadioGroupItem };

package/dist/components/select/select.d.ts

@@ -1,5 +1,4 @@
 import { Select } from "@base-ui/react/select";
-//#region src/components/select/select.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -51,5 +50,4 @@ export type SelectGroupLabelProps = WithClassName<Select.GroupLabel.Props>;
 declare function SelectGroupLabel({ className, ...props }: SelectGroupLabelProps): import("react").JSX.Element;
 export type SelectSeparatorProps = WithClassName<Select.Separator.Props>;
 declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react").JSX.Element;
-//#endregion
 export { Select$1 as Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/select/select.js

@@ -7,7 +7,7 @@ import { createContext, useCallback, useContext, useMemo, useRef, useState } fro
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 import { Select } from "@base-ui/react/select";
-//#region src/components/select/select.tsx
+// src/components/select/select.tsx
 const SelectClearContext = createContext(void 0);
 /**
 * Pass `items` (a value-to-label map, e.g. `{ http: 'HTTP' }`, or a `{ label, value }[]` list)
@@ -160,5 +160,4 @@ function SelectSeparator({ className, ...props }) {
 		"data-slot": "select-separator"
 	});
 }
-//#endregion
 export { Select$1 as Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/separator/separator.d.ts

@@ -1,8 +1,6 @@
 import { Separator } from "@base-ui/react/separator";
-//#region src/components/separator/separator.d.ts
 export type SeparatorProps = Omit<Separator.Props, 'className'> & {
   className?: string;
 };
 declare function Separator$1({ className, orientation, ...props }: SeparatorProps): import("react").JSX.Element;
-//#endregion
 export { Separator$1 as Separator };

package/dist/components/separator/separator.js

@@ -2,7 +2,7 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Separator } from "@base-ui/react/separator";
-//#region src/components/separator/separator.tsx
+// src/components/separator/separator.tsx
 function Separator$1({ className, orientation = "horizontal", ...props }) {
 	return /* @__PURE__ */ jsx(Separator, {
 		orientation,
@@ -11,5 +11,4 @@ function Separator$1({ className, orientation = "horizontal", ...props }) {
 		"data-slot": "separator"
 	});
 }
-//#endregion
 export { Separator$1 as Separator };

package/dist/components/sidebar/sidebar.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps, ReactElement, ReactNode } from "react";
-//#region src/components/sidebar/sidebar.d.ts
 export type SidebarProps = ComponentProps<'nav'>;
 declare function Sidebar({ className, ...props }: SidebarProps): import("react").JSX.Element;
 export type SidebarGroupProps = ComponentProps<'div'> & {
@@ -17,5 +16,4 @@ export type SidebarItemProps = Omit<ComponentProps<'a'>, 'className' | 'children
   children?: ReactNode;
 };
 declare function SidebarItem({ render, className, active, disabled, disabledReason, icon, children, onClick, href, tabIndex, ...props }: SidebarItemProps): import("react").JSX.Element;
-//#endregion
 export { Sidebar, SidebarGroup, SidebarItem };

package/dist/components/sidebar/sidebar.js

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../../lib/cn.js";
-import { Separator } from "../separator/separator.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { Separator } from "../separator/separator.js";
 import { cloneElement, useId } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/sidebar/sidebar.tsx
+// src/components/sidebar/sidebar.tsx
 function Sidebar({ className, ...props }) {
 	return /* @__PURE__ */ jsx("nav", {
 		className: cn("w-[226px] bg-background p-2 pt-5", className),
@@ -79,5 +79,4 @@ function SidebarItem({ render, className, active = false, disabled = false, disa
 	})] });
 	return element;
 }
-//#endregion
 export { Sidebar, SidebarGroup, SidebarItem };

package/dist/components/skeleton/skeleton.d.ts

@@ -1,6 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/skeleton/skeleton.d.ts
 export type SkeletonProps = ComponentProps<'div'>;
 declare function Skeleton({ className, ...props }: SkeletonProps): import("react").JSX.Element;
-//#endregion
 export { Skeleton };

package/dist/components/skeleton/skeleton.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/skeleton/skeleton.tsx
+// src/components/skeleton/skeleton.tsx
 function Skeleton({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("animate-pulse rounded-md bg-accent-selected motion-reduce:animate-none", className),
@@ -8,5 +8,4 @@ function Skeleton({ className, ...props }) {
 		"data-slot": "skeleton"
 	});
 }
-//#endregion
 export { Skeleton };

package/dist/components/spinner/spinner.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/spinner/spinner.d.ts
 declare const spinnerVariants: (props?: ({
   size?: "sm" | "md" | "lg" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -10,5 +9,4 @@ declare const spinnerVariants: (props?: ({
  */
 export type SpinnerProps = Omit<ComponentProps<'svg'>, 'ref'> & VariantProps<typeof spinnerVariants>;
 declare function Spinner({ className, size, ...props }: SpinnerProps): import("react").JSX.Element;
-//#endregion
 export { Spinner, spinnerVariants };

package/dist/components/spinner/spinner.js

@@ -4,7 +4,7 @@ import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { LoaderCircle } from "lucide-react";
-//#region src/components/spinner/spinner.tsx
+// src/components/spinner/spinner.tsx
 const spinnerVariants = cva("shrink-0 animate-spin motion-reduce:animate-none", {
 	variants: { size: {
 		xs: "size-3",
@@ -24,5 +24,4 @@ function Spinner({ className, size, ...props }) {
 		"data-slot": "spinner"
 	});
 }
-//#endregion
 export { Spinner, spinnerVariants };

package/dist/components/switch/switch.d.ts

@@ -1,9 +1,7 @@
 import { Switch } from "@base-ui/react/switch";
-//#region src/components/switch/switch.d.ts
 export type SwitchProps = Omit<Switch.Root.Props, 'className'> & {
   className?: string;
   size?: 'sm' | 'md';
 };
 declare function Switch$1({ className, size, ...props }: SwitchProps): import("react").JSX.Element;
-//#endregion
 export { Switch$1 as Switch };

package/dist/components/switch/switch.js

@@ -2,7 +2,7 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
-//#region src/components/switch/switch.tsx
+// src/components/switch/switch.tsx
 function Switch$1({ className, size = "md", ...props }) {
 	return /* @__PURE__ */ jsx(Switch.Root, {
 		"data-size": size,
@@ -16,5 +16,4 @@ function Switch$1({ className, size = "md", ...props }) {
 		})
 	});
 }
-//#endregion
 export { Switch$1 as Switch };

package/dist/components/table/table.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/table/table.d.ts
 export type TableProps = Omit<ComponentProps<'table'>, 'className'> & {
   className?: string;
   containerClassName?: string;
@@ -29,5 +28,4 @@ export type TableCaptionProps = Omit<ComponentProps<'caption'>, 'className'> & {
   className?: string;
 };
 declare function TableCaption({ className, ...props }: TableCaptionProps): import("react").JSX.Element;
-//#endregion
 export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow };

package/dist/components/table/table.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/table/table.tsx
+// src/components/table/table.tsx
 function Table({ className, containerClassName, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "table-container",
@@ -55,5 +55,4 @@ function TableCaption({ className, ...props }) {
 		"data-slot": "table-caption"
 	});
 }
-//#endregion
 export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow };

package/dist/components/tabs/tabs.d.ts

@@ -1,5 +1,4 @@
 import { Tabs } from "@base-ui/react/tabs";
-//#region src/components/tabs/tabs.d.ts
 export type TabsProps = Omit<Tabs.Root.Props, 'className'> & {
   className?: string;
 };
@@ -16,5 +15,4 @@ export type TabsContentProps = Omit<Tabs.Panel.Props, 'className'> & {
   className?: string;
 };
 declare function TabsContent({ className, ...props }: TabsContentProps): import("react").JSX.Element;
-//#endregion
 export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/components/tabs/tabs.js

@@ -2,7 +2,7 @@
 import { cn } from "../../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
-//#region src/components/tabs/tabs.tsx
+// src/components/tabs/tabs.tsx
 function Tabs$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Root, {
 		className: cn("flex flex-col data-[orientation=vertical]:flex-row", className),
@@ -32,5 +32,4 @@ function TabsContent({ className, ...props }) {
 		"data-slot": "tabs-content"
 	});
 }
-//#endregion
 export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/components/textarea/textarea.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { Input } from "@base-ui/react/input";
-//#region src/components/textarea/textarea.d.ts
 /**
  * Base UI's Field.Control (which Input wraps) derives `id`, `name`, `disabled`,
  * `autoFocus`, the controlled/uncontrolled `value`/`defaultValue` and the field's
@@ -23,5 +22,4 @@ export type TextareaProps = Omit<ComponentProps<'textarea'>, 'className' | 'valu
   onValueChange?: Input.Props['onValueChange'];
 };
 declare function Textarea({ className, id, name, disabled, autoFocus, value, defaultValue, onChange, onValueChange, ...rest }: TextareaProps): import("react").JSX.Element;
-//#endregion
 export { Textarea };

package/dist/components/textarea/textarea.js

@@ -3,7 +3,7 @@ import { cn } from "../../lib/cn.js";
 import { controlFocus, controlSurface } from "../../lib/control.js";
 import { jsx } from "react/jsx-runtime";
 import { Input } from "@base-ui/react/input";
-//#region src/components/textarea/textarea.tsx
+// src/components/textarea/textarea.tsx
 function Textarea({ className, id, name, disabled, autoFocus, value, defaultValue, onChange, onValueChange, ...rest }) {
 	return /* @__PURE__ */ jsx(Input, {
 		id,
@@ -21,5 +21,4 @@ function Textarea({ className, id, name, disabled, autoFocus, value, defaultValu
 		className: cn(controlSurface, controlFocus, "min-h-16 px-3 py-2 field-sizing-content", className)
 	});
 }
-//#endregion
 export { Textarea };

package/dist/components/toast/toast.d.ts

@@ -1,6 +1,5 @@
 import { ReactNode } from "react";
 import { CircleCheck } from "lucide-react";
-//#region src/components/toast/toast.d.ts
 export type ToastActionOptions = React.ComponentPropsWithoutRef<'button'>;
 export interface ToastOptions {
   description?: ReactNode;
@@ -43,5 +42,4 @@ export interface ToasterProps {
  * mounted, only the first one renders and the rest take over in order when it unmounts.
  */
 declare function Toaster({ limit }: ToasterProps): import("react").JSX.Element | null;
-//#endregion
 export { Toaster };

package/dist/components/toast/toast.js

@@ -6,7 +6,7 @@ import { useEffect, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CircleAlert, CircleCheck, Info, LoaderCircle, TriangleAlert, X } from "lucide-react";
 import { Toast } from "@base-ui/react/toast";
-//#region src/components/toast/toast.tsx
+// src/components/toast/toast.tsx
 const DEFAULT_TIMEOUT = {
 	success: 3e3,
 	info: 3e3,
@@ -161,5 +161,4 @@ function Toaster({ limit = 3 }) {
 		}) })
 	});
 }
-//#endregion
 export { DEFAULT_TIMEOUT, TOAST_BACKGROUND_CLASSNAME, TOAST_ICON, TOAST_ICON_CLASSNAME, Toaster, toast, toastManager };

package/dist/components/tooltip/tooltip.d.ts

@@ -1,5 +1,4 @@
 import { Tooltip } from "@base-ui/react/tooltip";
-//#region src/components/tooltip/tooltip.d.ts
 type WithClassName<P> = Omit<P, 'className'> & {
   className?: string;
 };
@@ -14,5 +13,4 @@ export type TooltipContentProps = WithClassName<Tooltip.Popup.Props> & {
   align?: Tooltip.Positioner.Props['align'];
 };
 declare function TooltipContent({ className, side, sideOffset, align, children, ...props }: TooltipContentProps): import("react").JSX.Element;
-//#endregion
 export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip/tooltip.js

@@ -4,7 +4,7 @@ import { popupLayerClassName } from "../../lib/popup.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
-//#region src/components/tooltip/tooltip.tsx
+// src/components/tooltip/tooltip.tsx
 const DEFAULT_TOOLTIP_DELAY = 300;
 const TooltipDelayContext = createContext(void 0);
 const Tooltip$1 = Tooltip.Root;
@@ -45,5 +45,4 @@ function TooltipContent({ className, side = "top", sideOffset = 6, align, childr
 		})
 	}) });
 }
-//#endregion
 export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/config/config-provider.d.ts

@@ -1,6 +1,5 @@
 import { Locale, Messages, MessagesOverride } from "./messages.js";
 import { ReactNode } from "react";
-//#region src/config/config-provider.d.ts
 export interface ConfigProviderProps {
   locale?: Locale;
   /** Memoize this object or define it at module scope; a new object on every render re-renders every useMessages() consumer. */
@@ -10,5 +9,4 @@ export interface ConfigProviderProps {
 /** Global configuration entry for the library; currently carries the locale and built-in message overrides used by components. */
 export declare function ConfigProvider({ locale, messages, children }: ConfigProviderProps): import("react").JSX.Element;
 export declare function useMessages(): Messages;
-export declare function useLocale(): Locale;
-//#endregion
+export declare function useLocale(): Locale;

package/dist/config/config-provider.js

@@ -2,7 +2,7 @@
 import { resolveMessages } from "./messages.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-//#region src/config/config-provider.tsx
+// src/config/config-provider.tsx
 const ConfigContext = createContext({
 	locale: "en-US",
 	messages: resolveMessages("en-US")
@@ -24,5 +24,4 @@ function useMessages() {
 function useLocale() {
 	return useContext(ConfigContext).locale;
 }
-//#endregion
 export { ConfigProvider, useLocale, useMessages };

package/dist/config/messages.d.ts

@@ -1,4 +1,3 @@
-//#region src/config/messages.d.ts
 export type Locale = 'en-US' | 'zh-CN';
 export interface Messages {
   readonly button: {
@@ -79,5 +78,4 @@ export interface Messages {
     readonly presetsLabel: string;
   };
 }
-export type MessagesOverride = { [K in keyof Messages]?: Partial<Messages[K]>; };
-//#endregion
+export type MessagesOverride = { [K in keyof Messages]?: Partial<Messages[K]>; };

package/dist/config/messages.js

@@ -1,4 +1,4 @@
-//#region src/config/messages.ts
+// src/config/messages.ts
 function deepFreeze(value) {
 	for (const nested of Object.values(value)) if (nested && typeof nested === "object") Object.freeze(nested);
 	return Object.freeze(value);
@@ -111,5 +111,4 @@ function resolveMessages(locale, override) {
 	const keys = Object.keys(base);
 	return Object.fromEntries(keys.map((key) => [key, mergeSection(base[key], override[key])]));
 }
-//#endregion
 export { enUS, resolveMessages, zhCN };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { LabeledField, LabeledFieldLayout, LabeledFieldProps } from "./components/field/labeled-field.js";
 import { NumberField, NumberFieldProps } from "./components/number-field/number-field.js";
 import { Select, SelectContent, SelectContentProps, SelectGroup, SelectGroupLabel, SelectGroupLabelProps, SelectGroupProps, SelectItem, SelectItemProps, SelectProps, SelectSeparator, SelectSeparatorProps, SelectTrigger, SelectTriggerProps, SelectValue, SelectValueProps } from "./components/select/select.js";
 import { Calendar, CalendarProps } from "./components/calendar/calendar.js";
@@ -21,7 +22,7 @@ import { Drawer, DrawerBody, DrawerBodyProps, DrawerClose, DrawerCloseProps, Dra
 import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupProps } from "./components/input-group/input-group.js";
 import { Menu, MenuCheckboxItem, MenuCheckboxItemProps, MenuContent, MenuContentProps, MenuGroup, MenuGroupLabel, MenuGroupLabelProps, MenuGroupProps, MenuItem, MenuItemProps, MenuRadioGroup, MenuRadioGroupProps, MenuRadioItem, MenuRadioItemProps, MenuSeparator, MenuSeparatorProps, MenuSub, MenuSubContent, MenuSubContentProps, MenuSubTrigger, MenuSubTriggerProps, MenuTrigger, MenuTriggerProps } from "./components/menu/menu.js";
 import { Pagination, PaginationProps, getPageItems } from "./components/pagination/pagination.js";
-import { Popover, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./components/popover/popover.js";
+import { Popover, PopoverArrow, PopoverArrowProps, PopoverClose, PopoverCloseProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./components/popover/popover.js";
 import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./components/radio-group/radio-group.js";
 import { Progress, ProgressProps } from "./components/progress/progress.js";
 import { Separator, SeparatorProps } from "./components/separator/separator.js";
@@ -32,4 +33,4 @@ import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, Tabl
 import { Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from "./components/tabs/tabs.js";
 import { ToastActionOptions, ToastOptions, ToastPromiseMessage, Toaster, ToasterProps, toast } from "./components/toast/toast.js";
 import { Tooltip, TooltipContent, TooltipContentProps, TooltipProvider, TooltipProviderProps, TooltipTrigger, TooltipTriggerProps } from "./components/tooltip/tooltip.js";
-export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeProps, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputProps, type ComboboxChipsProps, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, type ComboboxProps, ComboboxValue, type ComboboxValueProps, ConfigProvider, type ConfigProviderProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionList, DescriptionListItem, type DescriptionListItemProps, DescriptionListLabel, type DescriptionListLabelProps, type DescriptionListProps, DescriptionListValue, type DescriptionListValueProps, Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, Empty, EmptyContent, type EmptyContentProps, EmptyDescription, type EmptyDescriptionProps, EmptyHeader, type EmptyHeaderProps, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, type EmptyTitleProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type Locale, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuContent, type MenuContentProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, MenuItem, type MenuItemProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuSub, MenuSubContent, type MenuSubContentProps, MenuSubTrigger, type MenuSubTriggerProps, MenuTrigger, type MenuTriggerProps, type Messages, type MessagesOverride, NumberField, type NumberFieldProps, Pagination, type PaginationProps, Popover, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, Sidebar, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastActionOptions, type ToastOptions, type ToastPromiseMessage, Toaster, type ToasterProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, alertVariants, badgeVariants, buttonVariants, descriptionListVariants, emptyMediaVariants, getPageItems, spinnerVariants, toast, useLocale, useMessages };
+export { Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeProps, Button, type ButtonProps, Calendar, type CalendarProps, Checkbox, type CheckboxProps, Combobox, ComboboxChip, type ComboboxChipProps, ComboboxChips, ComboboxChipsInput, type ComboboxChipsInputProps, type ComboboxChipsProps, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, type ComboboxEmptyProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, type ComboboxProps, ComboboxValue, type ComboboxValueProps, ConfigProvider, type ConfigProviderProps, DatePicker, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionList, DescriptionListItem, type DescriptionListItemProps, DescriptionListLabel, type DescriptionListLabelProps, type DescriptionListProps, DescriptionListValue, type DescriptionListValueProps, Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, Empty, EmptyContent, type EmptyContentProps, EmptyDescription, type EmptyDescriptionProps, EmptyHeader, type EmptyHeaderProps, EmptyMedia, type EmptyMediaProps, type EmptyProps, EmptyTitle, type EmptyTitleProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, Fieldset, FieldsetLegend, type FieldsetLegendProps, type FieldsetProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, LabeledField, type LabeledFieldLayout, type LabeledFieldProps, type Locale, Menu, MenuCheckboxItem, type MenuCheckboxItemProps, MenuContent, type MenuContentProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, MenuItem, type MenuItemProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuSub, MenuSubContent, type MenuSubContentProps, MenuSubTrigger, type MenuSubTriggerProps, MenuTrigger, type MenuTriggerProps, type Messages, type MessagesOverride, NumberField, type NumberFieldProps, Pagination, type PaginationProps, Popover, PopoverArrow, type PopoverArrowProps, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, PopoverDescription, type PopoverDescriptionProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorProps, Sidebar, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, type SidebarProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastActionOptions, type ToastOptions, type ToastPromiseMessage, Toaster, type ToasterProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, alertVariants, badgeVariants, buttonVariants, descriptionListVariants, emptyMediaVariants, getPageItems, spinnerVariants, toast, useLocale, useMessages };

package/dist/index.js

@@ -5,12 +5,14 @@ import { Badge, badgeVariants } from "./components/badge/badge.js";
 import { Button, buttonVariants } from "./components/button/button.js";
 import { Calendar } from "./components/calendar/calendar.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
-import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
+import { Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./components/popover/popover.js";
 import { DatePicker, DateRangePicker } from "./components/date-picker/date-picker.js";
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue } from "./components/combobox/combobox.js";
 import { DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, descriptionListVariants } from "./components/description-list/description-list.js";
 import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants } from "./components/empty/empty.js";
 import { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from "./components/field/field.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
+import { LabeledField } from "./components/field/labeled-field.js";
 import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./components/dialog/dialog.js";
 import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./components/drawer/drawer.js";
 import { Input } from "./components/input/input.js";
@@ -22,7 +24,6 @@ import { Pagination, getPageItems } from "./components/pagination/pagination.js"
 import { RadioGroup, RadioGroupItem } from "./components/radio-group/radio-group.js";
 import { Progress } from "./components/progress/progress.js";
 import { Separator } from "./components/separator/separator.js";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip/tooltip.js";
 import { Sidebar, SidebarGroup, SidebarItem } from "./components/sidebar/sidebar.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { Spinner, spinnerVariants } from "./components/spinner/spinner.js";
@@ -31,4 +32,4 @@ import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, Tabl
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs/tabs.js";
 import { Textarea } from "./components/textarea/textarea.js";
 import { Toaster, toast } from "./components/toast/toast.js";
-export { Alert, AlertDescription, AlertTitle, Avatar, Badge, Button, Calendar, Checkbox, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue, ConfigProvider, DatePicker, DateRangePicker, DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend, Input, InputGroup, InputGroupAddon, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, NumberField, Pagination, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, SidebarGroup, SidebarItem, Skeleton, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, buttonVariants, descriptionListVariants, emptyMediaVariants, getPageItems, spinnerVariants, toast, useLocale, useMessages };
+export { Alert, AlertDescription, AlertTitle, Avatar, Badge, Button, Calendar, Checkbox, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxValue, ConfigProvider, DatePicker, DateRangePicker, DescriptionList, DescriptionListItem, DescriptionListLabel, DescriptionListValue, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend, Input, InputGroup, InputGroupAddon, LabeledField, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, NumberField, Pagination, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, SidebarGroup, SidebarItem, Skeleton, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, buttonVariants, descriptionListVariants, emptyMediaVariants, getPageItems, spinnerVariants, toast, useLocale, useMessages };

package/dist/lib/cn.js

@@ -1,6 +1,5 @@
 import { cn } from "cn";
-//#region src/lib/cn.ts
+// src/lib/cn.ts
 /** Merges class names; a later utility replaces an earlier one that sets the same property. */
 const cn$1 = cn;
-//#endregion
 export { cn$1 as cn };

package/dist/lib/control.js

@@ -1,6 +1,5 @@
-//#region src/lib/control.ts
+// src/lib/control.ts
 const controlSurface = "w-full min-w-0 rounded-sm border border-input bg-background text-sm text-foreground transition-colors outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:bg-muted data-disabled:opacity-50 aria-invalid:border-destructive data-invalid:border-destructive not-disabled:not-data-disabled:not-aria-invalid:not-data-invalid:hover:border-primary-hover";
 const controlFocus = "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 aria-invalid:focus-visible:ring-destructive/40 data-invalid:focus-visible:ring-destructive/40";
 const controlFocusWithin = "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/40 aria-invalid:focus-within:ring-destructive/40 data-invalid:focus-within:ring-destructive/40";
-//#endregion
 export { controlFocus, controlFocusWithin, controlSurface };

package/dist/lib/popup.js

@@ -1,7 +1,6 @@
-//#region src/lib/popup.ts
+// src/lib/popup.ts
 const popupLayerClassName = "z-50";
 const popupClassName = "rounded-md border border-border bg-popover text-popover-foreground shadow-md outline-none";
 const listboxClassName = "max-h-[300px] overflow-y-auto rounded-sm bg-muted text-sm shadow-md dark:ring-1 dark:ring-border";
 const listItemClassName = "flex cursor-default items-center gap-2 px-4 py-2.5 text-sm outline-none select-none data-highlighted:bg-accent-hover data-selected:bg-accent-selected data-disabled:pointer-events-none data-disabled:opacity-50";
-//#endregion
 export { listItemClassName, listboxClassName, popupClassName, popupLayerClassName };