@passui/react 0.1.46 → 0.2.0

package/{src/hooks/use-visual-viewport.ts → dist/hooks/use-visual-viewport.js}

@@ -1,51 +1,35 @@
+import { viewportMetrics } from "./viewport/viewport-metrics.js";
 import { useLayoutEffect, useState } from "react";
-import { viewportMetrics } from "./viewport/viewport-metrics";
-import type { ViewportMetrics } from "./viewport/types";
-export type { ViewportMetrics } from "./viewport/types";
-
+// src/hooks/use-visual-viewport.ts
 /** Measures once per frame, including Android resize and Safari viewport panning. */
-export function useVisualViewport(): ViewportMetrics | null {
-	const [metrics, setMetrics] = useState<ViewportMetrics | null>(null);
+function useVisualViewport() {
+	const [metrics, setMetrics] = useState(null);
 	useLayoutEffect(() => {
 		const viewport = window.visualViewport;
 		let baseline = {
 			width: window.innerWidth,
-			height: window.innerHeight,
+			height: window.innerHeight
 		};
 		let frame = 0;
 		const measure = () => {
 			cancelAnimationFrame(frame);
 			frame = requestAnimationFrame(() => {
-				const active = document.activeElement;
-				const editing = !!active?.matches(
-					"input:not([type=button]):not([type=checkbox]):not([type=radio]), textarea, [contenteditable=true]",
-				);
+				const editing = !!document.activeElement?.matches("input:not([type=button]):not([type=checkbox]):not([type=radio]), textarea, [contenteditable=true]");
 				const width = viewport?.width ?? window.innerWidth;
 				const height = viewport?.height ?? window.innerHeight;
-				if (Math.abs(baseline.width - width) > 80 || !editing)
-					baseline = {
-						width,
-						height: window.innerHeight,
-					};
-				const next = viewportMetrics(
-					{
-						width,
-						height,
-						layoutHeight: window.innerHeight,
-						top: viewport?.offsetTop ?? 0,
-						left: viewport?.offsetLeft ?? 0,
-						editing,
-					},
-					baseline,
-				);
-				setMetrics((previous) =>
-					previous &&
-					Object.entries(next).every(
-						([key, value]) => previous[key as keyof ViewportMetrics] === value,
-					)
-						? previous
-						: next,
-				);
+				if (Math.abs(baseline.width - width) > 80 || !editing) baseline = {
+					width,
+					height: window.innerHeight
+				};
+				const next = viewportMetrics({
+					width,
+					height,
+					layoutHeight: window.innerHeight,
+					top: viewport?.offsetTop ?? 0,
+					left: viewport?.offsetLeft ?? 0,
+					editing
+				}, baseline);
+				setMetrics((previous) => previous && Object.entries(next).every(([key, value]) => previous[key] === value) ? previous : next);
 			});
 		};
 		measure();
@@ -65,3 +49,4 @@ export function useVisualViewport(): ViewportMetrics | null {
 	}, []);
 	return metrics;
 }
+export { useVisualViewport };

package/dist/hooks/viewport/types.d.ts

@@ -0,0 +1,7 @@
+export type ViewportMetrics = {
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+  keyboardOpen: boolean;
+};

package/dist/hooks/viewport/viewport-metrics.js

@@ -0,0 +1,13 @@
+// src/hooks/viewport/viewport-metrics.ts
+/** A resized WebView and Safari's overlaid keyboard share one visible rectangle. */
+function viewportMetrics(input, baseline) {
+	const visibleHeight = Math.min(input.height, Math.max(0, input.layoutHeight - input.top));
+	return {
+		width: input.width,
+		height: visibleHeight,
+		top: input.top,
+		left: input.left,
+		keyboardOpen: input.editing && baseline.height - visibleHeight > 120
+	};
+}
+export { viewportMetrics };

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+import { PlatformOS, PlatformProvider, PlatformScript, detectPlatform, resolvePlatform, usePlatform } from "./appearance/platform.js";
+import { Attribute, SystemTheme, ThemeProvider, ThemeProviderProps, UseThemeProps, script, useTheme } from "./appearance/theme.js";
+import "./appearance.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionProps, AccordionTrigger } from "./accordion.js";
+import { Alert, AlertDescription, AlertProps, AlertTitle, AlertVariant } from "./alert.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogProps, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog.js";
+import { AspectRatio, AspectRatioProps } from "./aspect-ratio.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { Badge, BadgeProps, BadgeVariant } from "./badge.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
+import { Button, ButtonProps, ButtonSize, ButtonStyleProps, ButtonVariant, buttonVariants } from "./button.js";
+import { ButtonGroup } from "./button-group.js";
+import { Calendar, CalendarProps, DateRange } from "./calendar.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+import { Chart, ChartProps, ChartSeries, ChartType } from "./chart.js";
+import { Checkbox, CheckboxProps } from "./checkbox.js";
+import { CodeBlock, CodeBlockProps, CodeBlockSize } from "./code-block.js";
+import { Collapsible, CollapsibleContent, CollapsibleProps, CollapsibleTrigger } from "./collapsible.js";
+import { Combobox, ComboboxItem, ComboboxProps } from "./combobox.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandItemProps, CommandList, CommandShortcut } from "./command.js";
+import "./context-menu.js";
+import { Conversation, ConversationMessage, ConversationSize } from "./conversation.js";
+import { DateTimePicker, DateTimePickerProps } from "./date-time-picker.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger } from "./dialog.js";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerProps, DrawerTitle, DrawerTrigger } from "./drawer.js";
+import { ContextMenu, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldProps } from "./field.js";
+import { Input, inputStyles } from "./input.js";
+import { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
+import { InputOTP, InputOTPProps } from "./input-otp.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemGroupProps, ItemMedia, ItemMediaProps, ItemProps, ItemSize, ItemTitle } from "./item.js";
+import { Kbd, KbdGroup } from "./kbd.js";
+import { Label } from "./label.js";
+import { LabeledContent, LabeledContentProps, LabeledContentSize } from "./labeled-content.js";
+import { List, ListItem, ListItemProps, ListSection, ListSectionProps } from "./list.js";
+import { Marker, MarkerProps, MarkerVariant } from "./marker.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationLinkProps, PaginationNext, PaginationPrevious, PaginationSize, PaginationTone, pageRange } from "./pagination.js";
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverProps, PopoverTitle, PopoverTrigger } from "./popover.js";
+import { Progress, ProgressProps } from "./progress.js";
+import { Answers, Question, QuestionOption, Questionnaire, QuestionnaireProps } from "./questionnaire.js";
+import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./radio-group.js";
+import { SearchField, SearchFieldProps, SearchFieldSize } from "./search-field.js";
+import { SegmentedControl, SegmentedControlProps, SegmentedOption } from "./segmented-control.js";
+import { Select, SelectItem, SelectProps } from "./select.js";
+import { Separator, SeparatorProps } from "./separator.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetProps, SheetSide, SheetTitle, SheetTrigger } from "./sheet.js";
+import { Sidebar, SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarSize } from "./sidebar.js";
+import { Skeleton } from "./skeleton.js";
+import { Slider, SliderProps } from "./slider.js";
+import { SloshSlider, SloshSliderProps, SloshSliderSize } from "./slosh-slider.js";
+import { Spinner } from "./spinner.js";
+import { StatTileTone } from "./stat-tile.js";
+import { Stepper, StepperProps, StepperSize } from "./stepper.js";
+import { SwatchPicker, SwatchPickerOption, SwatchPickerProps, SwatchPickerSize } from "./swatch-picker.js";
+import { Switch, SwitchProps } from "./switch.js";
+import { TabBar, TabBarItem, TabBarItemProps, TabBarProps } from "./tab-bar.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSize } from "./table.js";
+import { Tabs, TabsContent, TabsList, TabsProps, TabsTone, TabsTrigger, TabsVariant } from "./tabs.js";
+import { Text, TextElement, TextProps, TextSize, TextTone, TextWeight } from "./text.js";
+import { Textarea } from "./textarea.js";
+import { Toast, ToastAction, ToastInput, ToastOptions, ToastSize, ToastTone, toast } from "./components/toast/toast-store.js";
+import { Toaster } from "./components/toast/toaster.js";
+import { Toggle, ToggleProps, ToggleSize, ToggleVariant, toggleVariants } from "./toggle.js";
+import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps } from "./toggle-group.js";
+import { Tooltip, TooltipContent, TooltipProps, TooltipTrigger } from "./tooltip.js";
+import { Trace, TraceItem, TraceItemProps, TraceStatus } from "./trace.js";
+import { WakeSlider, WakeSliderProps, WakeSliderSize } from "./wake-slider.js";
+import { useAnchoredPlacement } from "./hooks/use-anchored-placement.js";
+import { useDismiss } from "./use-dismiss.js";
+import { Breakpoint, BreakpointQuery, MediaQueryInput, PointerPrecision, useIsMobile, useMediaQuery } from "./use-media-query.js";
+import { useMinimizeOnScroll } from "./hooks/use-minimize-on-scroll.js";
+import { useOS } from "./use-os.js";
+import { useVisualViewport } from "./hooks/use-visual-viewport.js";
+import { ViewportMetrics } from "./hooks/viewport/types.js";
+import { AnchoredPlacement, PlacementFrame, placeAnchored, placeInViewport } from "./lib/anchored-placement.js";
+import { cn } from "./cn.js";
+import { copyText } from "./clipboard.js";
+import { FLOATING_LAYER, registerFloatingLayer } from "./lib/floating-layers.js";
+import { HapticKind, haptic, setHapticPlayer } from "./lib/haptics.js";
+import { ScreenEdges, screenEdges } from "./lib/screen-edges.js";
+import { FloatingPanelSide, contentCrossfade, floatingPanelMotion, fluidCollapse, fluidOvershoot, popoverMotion, riseMotion, spring, zoomReveal } from "./motion/transitions.js";
+import { AnimatePresence, motion } from "motion/react";
+export { Accordion, AccordionContent, AccordionItem, AccordionProps, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, AlertProps, AlertTitle, AlertVariant, AnchoredPlacement, AnimatePresence, Answers, AspectRatio, AspectRatioProps, Attribute, Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, BadgeVariant, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breakpoint, BreakpointQuery, Button, ButtonGroup, ButtonProps, ButtonSize, ButtonStyleProps, ButtonVariant, Calendar, CalendarProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chart, ChartProps, ChartSeries, ChartType, Checkbox, CheckboxProps, CodeBlock, CodeBlockProps, CodeBlockSize, Collapsible, CollapsibleContent, CollapsibleProps, CollapsibleTrigger, Combobox, ComboboxItem, ComboboxProps, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandItemProps, CommandList, CommandShortcut, ContextMenu, DropdownMenuCheckboxItem as ContextMenuCheckboxItem, DropdownMenuContent as ContextMenuContent, DropdownMenuGroup as ContextMenuGroup, DropdownMenuItem as ContextMenuItem, DropdownMenuLabel as ContextMenuLabel, DropdownMenuRadioGroup as ContextMenuRadioGroup, DropdownMenuRadioItem as ContextMenuRadioItem, DropdownMenuSeparator as ContextMenuSeparator, DropdownMenuShortcut as ContextMenuShortcut, DropdownMenuSub as ContextMenuSub, DropdownMenuSubContent as ContextMenuSubContent, DropdownMenuSubTrigger as ContextMenuSubTrigger, ContextMenuTrigger, Conversation, ConversationMessage, ConversationSize, DateRange, DateTimePicker, DateTimePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerProps, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FLOATING_LAYER, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldProps, FloatingPanelSide, HapticKind, Input, InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPProps, Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemGroupProps, ItemMedia, ItemMediaProps, ItemProps, ItemSize, ItemTitle, Kbd, KbdGroup, Label, LabeledContent, LabeledContentProps, LabeledContentSize, List, ListItem, ListItemProps, ListSection, ListSectionProps, Marker, MarkerProps, MarkerVariant, MediaQueryInput, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationLinkProps, PaginationNext, PaginationPrevious, PaginationSize, PaginationTone, PlacementFrame, PlatformOS, PlatformProvider, PlatformScript, PointerPrecision, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverProps, PopoverTitle, PopoverTrigger, Progress, ProgressProps, Question, QuestionOption, Questionnaire, QuestionnaireProps, RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps, ScreenEdges, SearchField, SearchFieldProps, SearchFieldSize, SegmentedControl, SegmentedControlProps, SegmentedOption, Select, SelectItem, SelectProps, Separator, SeparatorProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetProps, SheetSide, SheetTitle, SheetTrigger, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarGroupLabelProps, SidebarMenu, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarSize, Skeleton, Slider, SliderProps, SloshSlider, SloshSliderProps, SloshSliderSize, Spinner, type StatTileTone, Stepper, StepperProps, StepperSize, SwatchPicker, SwatchPickerOption, SwatchPickerProps, SwatchPickerSize, Switch, SwitchProps, SystemTheme, TabBar, TabBarItem, TabBarItemProps, TabBarProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableSize, Tabs, TabsContent, TabsList, TabsProps, TabsTone, TabsTrigger, TabsVariant, Text, TextElement, TextProps, TextSize, TextTone, TextWeight, Textarea, ThemeProvider, ThemeProviderProps, type Toast, type ToastAction, type ToastInput, type ToastOptions, type ToastSize, type ToastTone, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, ToggleProps, ToggleSize, ToggleVariant, Tooltip, TooltipContent, TooltipProps, TooltipTrigger, Trace, TraceItem, TraceItemProps, TraceStatus, UseThemeProps, type ViewportMetrics, WakeSlider, WakeSliderProps, WakeSliderSize, buttonVariants, cn, contentCrossfade, copyText, detectPlatform, floatingPanelMotion, fluidCollapse, fluidOvershoot, haptic, inputStyles, motion, pageRange, placeAnchored, placeInViewport, popoverMotion, registerFloatingLayer, resolvePlatform, riseMotion, screenEdges, script, setHapticPlayer, spring, toast, toggleVariants, useAnchoredPlacement, useDismiss, useIsMobile, useMediaQuery, useMinimizeOnScroll, useOS, usePlatform, useTheme, useVisualViewport, zoomReveal };

package/dist/index.js

@@ -0,0 +1,80 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion.js";
+import { Alert, AlertDescription, AlertTitle } from "./alert.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./alert-dialog.js";
+import { PlatformProvider, PlatformScript, detectPlatform, resolvePlatform, usePlatform } from "./appearance/platform.js";
+import { ThemeProvider, script, useTheme } from "./appearance/theme.js";
+import { AspectRatio } from "./aspect-ratio.js";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { Badge } from "./badge.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
+import { Button, buttonVariants } from "./button.js";
+import { ButtonGroup } from "./button-group.js";
+import { Calendar } from "./calendar.js";
+import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
+import { Chart } from "./chart.js";
+import { Checkbox } from "./checkbox.js";
+import { CodeBlock } from "./code-block.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+import { Combobox } from "./combobox.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "./command.js";
+import { Conversation } from "./conversation.js";
+import { DateTimePicker } from "./date-time-picker.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
+import { ContextMenu, ContextMenuTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "./empty.js";
+import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "./field.js";
+import { Input, inputStyles } from "./input.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./input-group.js";
+import { InputOTP } from "./input-otp.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle } from "./item.js";
+import { Kbd, KbdGroup } from "./kbd.js";
+import { Label } from "./label.js";
+import { LabeledContent } from "./labeled-content.js";
+import { List, ListItem, ListSection } from "./list.js";
+import { Marker } from "./marker.js";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, pageRange } from "./pagination.js";
+import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "./popover.js";
+import { Progress } from "./progress.js";
+import { Questionnaire } from "./questionnaire.js";
+import { RadioGroup, RadioGroupItem } from "./radio-group.js";
+import { SearchField } from "./search-field.js";
+import { SegmentedControl } from "./segmented-control.js";
+import { Select } from "./select.js";
+import { Separator } from "./separator.js";
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./sheet.js";
+import { Sidebar, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "./sidebar.js";
+import { Skeleton } from "./skeleton.js";
+import { Slider } from "./slider.js";
+import { SloshSlider } from "./slosh-slider.js";
+import { Spinner } from "./spinner.js";
+import { Stepper } from "./stepper.js";
+import { SwatchPicker } from "./swatch-picker.js";
+import { Switch } from "./switch.js";
+import { TabBar, TabBarItem } from "./tab-bar.js";
+import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
+import { Text } from "./text.js";
+import { Textarea } from "./textarea.js";
+import { Toggle, toggleVariants } from "./toggle.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+import { Trace, TraceItem } from "./trace.js";
+import { WakeSlider } from "./wake-slider.js";
+import { useAnchoredPlacement } from "./hooks/use-anchored-placement.js";
+import { toast } from "./components/toast/toast-store.js";
+import { useDismiss } from "./use-dismiss.js";
+import { Toaster } from "./components/toast/toaster.js";
+import { useIsMobile, useMediaQuery } from "./use-media-query.js";
+import { useMinimizeOnScroll } from "./hooks/use-minimize-on-scroll.js";
+import { useOS } from "./use-os.js";
+import { useVisualViewport } from "./hooks/use-visual-viewport.js";
+import { placeAnchored, placeInViewport } from "./lib/anchored-placement.js";
+import { cn } from "./cn.js";
+import { copyText } from "./clipboard.js";
+import { FLOATING_LAYER, registerFloatingLayer } from "./lib/floating-layers.js";
+import { haptic, setHapticPlayer } from "./lib/haptics.js";
+import { screenEdges } from "./lib/screen-edges.js";
+import { contentCrossfade, floatingPanelMotion, fluidCollapse, fluidOvershoot, popoverMotion, riseMotion, spring, zoomReveal } from "./motion/transitions.js";
+import { AnimatePresence, motion } from "motion/react";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatePresence, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Chart, Checkbox, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut, ContextMenu, DropdownMenuCheckboxItem as ContextMenuCheckboxItem, DropdownMenuContent as ContextMenuContent, DropdownMenuGroup as ContextMenuGroup, DropdownMenuItem as ContextMenuItem, DropdownMenuLabel as ContextMenuLabel, DropdownMenuRadioGroup as ContextMenuRadioGroup, DropdownMenuRadioItem as ContextMenuRadioItem, DropdownMenuSeparator as ContextMenuSeparator, DropdownMenuShortcut as ContextMenuShortcut, DropdownMenuSub as ContextMenuSub, DropdownMenuSubContent as ContextMenuSubContent, DropdownMenuSubTrigger as ContextMenuSubTrigger, ContextMenuTrigger, Conversation, DateTimePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHandle, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, FLOATING_LAYER, Field, FieldDescription, FieldError, FieldGroup, FieldLabel, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, Kbd, KbdGroup, Label, LabeledContent, List, ListItem, ListSection, Marker, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PlatformProvider, PlatformScript, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Progress, Questionnaire, RadioGroup, RadioGroupItem, SearchField, SegmentedControl, Select, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, Skeleton, Slider, SloshSlider, Spinner, Stepper, SwatchPicker, Switch, TabBar, TabBarItem, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Text, Textarea, ThemeProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger, Trace, TraceItem, WakeSlider, buttonVariants, cn, contentCrossfade, copyText, detectPlatform, floatingPanelMotion, fluidCollapse, fluidOvershoot, haptic, inputStyles, motion, pageRange, placeAnchored, placeInViewport, popoverMotion, registerFloatingLayer, resolvePlatform, riseMotion, screenEdges, script, setHapticPlayer, spring, toast, toggleVariants, useAnchoredPlacement, useDismiss, useIsMobile, useMediaQuery, useMinimizeOnScroll, useOS, usePlatform, useTheme, useVisualViewport, zoomReveal };

package/dist/input-group.d.ts

@@ -0,0 +1,17 @@
+import { ButtonProps } from "./button.js";
+import { ComponentProps } from "react";
+/** Wraps an input with leading or trailing addons. The group draws the surface and focus ring. */
+export declare function InputGroup({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** The input inside a group: no surface of its own. */
+export declare function InputGroupInput({ className, ...props }: ComponentProps<"input">): import("react").JSX.Element;
+export type InputGroupAddonProps = ComponentProps<"div"> & {
+  /** `block-start` and `block-end` span the full width above or below the field. @default "start" */
+  align?: "start" | "end" | "block-start" | "block-end";
+};
+export declare function InputGroupAddon({ align, className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
+/** Plain text beside the field, such as a protocol, a unit or a count. */
+export declare function InputGroupText({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;
+/** A compact button inside the group, ghost by default. */
+export declare function InputGroupButton({ variant, size, ...props }: ButtonProps): import("react").JSX.Element;
+/** A growing textarea inside the group, with no surface of its own. */
+export declare function InputGroupTextarea({ className, ...props }: ComponentProps<"textarea">): import("react").JSX.Element;

package/dist/input-group.js

@@ -0,0 +1,55 @@
+import { cx } from "./lib/cx.js";
+import { Button } from "./button.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/input-group.tsx
+/** Wraps an input with leading or trailing addons. The group draws the surface and focus ring. */
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group",
+		className: cx("control-field flex h-8.5 w-full min-w-0 items-center gap-2 rounded-xl px-2.5 text-footnote has-[[data-align^=block]]:h-auto has-[[data-align^=block]]:flex-col has-[[data-align^=block]]:items-stretch has-[textarea]:h-auto has-[textarea]:flex-wrap has-[:disabled]:opacity-40 has-[[aria-invalid=true]]:shadow-[inset_0_0_0_1.5px_var(--color-danger)]", className),
+		...props
+	});
+}
+/** The input inside a group: no surface of its own. */
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		"data-slot": "input-group-input",
+		className: cx("h-full min-w-0 flex-1 bg-transparent text-label outline-none placeholder:text-label-tertiary", className),
+		...props
+	});
+}
+function InputGroupAddon({ align = "start", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cx("flex shrink-0 items-center gap-1 text-label-secondary data-[align=end]:order-last data-[align=block-start]:order-first data-[align=block-start]:w-full data-[align=block-start]:justify-between data-[align=block-start]:pt-2 data-[align=block-end]:order-last data-[align=block-end]:w-full data-[align=block-end]:justify-between data-[align=block-end]:pb-2 [&_svg:not([class*='size-'])]:size-3.5", className),
+		...props
+	});
+}
+/** Plain text beside the field, such as a protocol, a unit or a count. */
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "input-group-text",
+		className: cx("text-footnote text-label-secondary whitespace-nowrap", className),
+		...props
+	});
+}
+/** A compact button inside the group, ghost by default. */
+function InputGroupButton({ variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		size,
+		"data-slot": "input-group-button",
+		...props
+	});
+}
+/** A growing textarea inside the group, with no surface of its own. */
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "input-group-textarea",
+		className: cx("field-sizing-content min-h-16 w-full flex-1 resize-none bg-transparent py-2 text-label outline-none placeholder:text-label-tertiary", className),
+		...props
+	});
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/input-otp.d.ts

@@ -0,0 +1,13 @@
+import * as pin from "@zag-js/pin-input";
+export interface InputOTPProps extends Omit<pin.Props, "id" | "ids" | "value" | "defaultValue" | "onValueChange" | "onValueComplete"> {
+  /** Number of slots. @default 6 */
+  length?: number;
+  /** The code so far, as a string. */
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  className?: string;
+}
+/** A one time code field with one box per character. Paste and autofill fill every box. */
+export declare function InputOTP({ length, value, defaultValue, onValueChange, onComplete, className, ...props }: InputOTPProps): import("react").JSX.Element;

package/dist/input-otp.js

@@ -0,0 +1,36 @@
+"use client";
+import { cx } from "./lib/cx.js";
+import { normalizeProps, useMachine } from "@zag-js/react";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as pin from "@zag-js/pin-input";
+// src/components/input-otp.tsx
+const split = (v, length) => v === void 0 ? void 0 : Array.from({ length }, (_, i) => v[i] ?? "");
+/** A one time code field with one box per character. Paste and autofill fill every box. */
+function InputOTP({ length = 6, value, defaultValue, onValueChange, onComplete, className, ...props }) {
+	const id = useId();
+	const service = useMachine(pin.machine, {
+		id,
+		otp: true,
+		value: split(value, length),
+		defaultValue: split(defaultValue, length) ?? Array.from({ length }, () => ""),
+		onValueChange: ({ valueAsString }) => onValueChange?.(valueAsString),
+		onValueComplete: ({ valueAsString }) => onComplete?.(valueAsString),
+		...props
+	});
+	const api = pin.connect(service, normalizeProps);
+	return /* @__PURE__ */ jsxs("div", {
+		...api.getRootProps(),
+		"data-slot": "input-otp",
+		className: cx("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx("input", { ...api.getHiddenInputProps() }), /* @__PURE__ */ jsx("div", {
+			...api.getControlProps(),
+			className: "flex gap-2",
+			children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx("input", {
+				...api.getInputProps({ index }),
+				className: "bg-fill/60 text-headline text-label focus:ring-accent/70 aria-invalid:ring-danger/70 size-9.5 rounded-xl text-center font-semibold transition outline-none focus:ring-2 disabled:opacity-40 aria-invalid:ring-2"
+			}, index))
+		})]
+	});
+}
+export { InputOTP };

package/dist/input.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from "react";
+export declare const inputStyles = "control-field h-8.5 w-full min-w-0 rounded-xl px-3 text-footnote text-label placeholder:text-label-tertiary disabled:pointer-events-none disabled:opacity-40 aria-invalid:shadow-[inset_0_0_0_1.5px_var(--color-danger)] file:border-0 file:bg-transparent file:text-subheadline file:font-medium motion-reduce:transition-none";
+/** A native text input. */
+export declare function Input({ className, type, ...props }: ComponentProps<"input">): import("react").JSX.Element;

package/dist/input.js

@@ -0,0 +1,14 @@
+import { cx } from "./lib/cx.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/input.tsx
+const inputStyles = "control-field h-8.5 w-full min-w-0 rounded-xl px-3 text-footnote text-label placeholder:text-label-tertiary disabled:pointer-events-none disabled:opacity-40 aria-invalid:shadow-[inset_0_0_0_1.5px_var(--color-danger)] file:border-0 file:bg-transparent file:text-subheadline file:font-medium motion-reduce:transition-none";
+/** A native text input. */
+function Input({ className, type = "text", ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cx(inputStyles, className),
+		...props
+	});
+}
+export { Input, inputStyles };

package/dist/item.d.ts

@@ -0,0 +1,49 @@
+import { RenderProp } from "./lib/render.js";
+import { ComponentProps, ReactNode } from "react";
+/** Row height and text scale for a whole group: `sm` is dense, `lg` is roomy. */
+export type ItemSize = "sm" | "md" | "lg";
+export interface ItemGroupProps extends Omit<ComponentProps<"section">, "title"> {
+  /** Optional group heading, which also names the list for assistive technology. */
+  title?: ReactNode;
+  /** Supporting text below the grouped rows. */
+  footer?: ReactNode;
+  /** Row height, title and footer scale. @default "md" */
+  size?: ItemSize;
+}
+/**
+ * A titled, inset group of rows with a footer note, as in iOS Settings. Rows
+ * share one rounded plate with hairlines between them.
+ */
+export declare function ItemGroup({ title, footer, size, className, children, ...props }: ItemGroupProps): import("react").JSX.Element;
+export interface ItemProps extends Omit<ComponentProps<"div">, "children"> {
+  children?: ReactNode;
+  /** Shows the disclosure chevron, for rows that open something. */
+  chevron?: boolean;
+  /** Makes the whole row your own element, such as a router link or a button. */
+  render?: RenderProp;
+  /** Content revealed under the row, such as a form. The row becomes its toggle. */
+  panel?: ReactNode;
+  /** Whether the panel is open, when you control it. */
+  open?: boolean;
+  /** Whether the panel starts open. @default false */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+/**
+ * One row. Compose it from `ItemMedia`, `ItemContent` and `ItemActions`. With
+ * `render` the whole row presses like iOS; with `panel` it opens to reveal
+ * content, such as inputs, under the row.
+ */
+export declare function Item({ chevron, render, panel, open, defaultOpen, onOpenChange, className, children, ...props }: ItemProps): import("react").JSX.Element;
+export interface ItemMediaProps extends ComponentProps<"span"> {
+  /** `icon` is a small accent glyph; `image` is a rounded thumbnail. @default "icon" */
+  variant?: "icon" | "image";
+}
+/** The icon or image at the start of a row. The hairline insets past it. */
+export declare function ItemMedia({ variant, className, ...props }: ItemMediaProps): import("react").JSX.Element;
+/** Holds the title and description, taking the room the media and actions leave. */
+export declare function ItemContent({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ItemTitle({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function ItemDescription({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+/** A value, switch, badge or button at the end of a row. */
+export declare function ItemActions({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;

package/dist/item.js

@@ -0,0 +1,142 @@
+import { cx } from "./lib/cx.js";
+import { mergeProps, renderPart } from "./lib/render.js";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+// src/components/item.tsx
+/**
+* A titled, inset group of rows with a footer note, as in iOS Settings. Rows
+* share one rounded plate with hairlines between them.
+*/
+function ItemGroup({ title, footer, size = "md", className, children, ...props }) {
+	const id = useId();
+	return /* @__PURE__ */ jsxs("section", {
+		"data-slot": "item-group",
+		"data-size": size,
+		className: cx("group/item-group flex flex-col gap-1.5", className),
+		...props,
+		children: [
+			title ? /* @__PURE__ */ jsx("h3", {
+				id: `${id}-title`,
+				className: "text-footnote text-label-secondary group-data-[size=lg]/item-group:text-subheadline group-data-[size=sm]/item-group:text-caption m-0 px-4 font-normal",
+				children: title
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				role: "list",
+				"aria-labelledby": title ? `${id}-title` : void 0,
+				className: "inset-group squircle divide-separator/60 border-separator/60 divide-y border [--squircle-radius:1.25rem]",
+				children
+			}),
+			footer ? /* @__PURE__ */ jsx("p", {
+				className: "text-footnote text-label-secondary group-data-[size=lg]/item-group:text-subheadline group-data-[size=sm]/item-group:text-caption m-0 px-4",
+				children: footer
+			}) : null
+		]
+	});
+}
+const chevronClass = "text-label-tertiary size-4 shrink-0 transition-transform duration-(--duration-fast) motion-reduce:transition-none";
+function Chevron({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		"aria-hidden": "true",
+		className: cx(chevronClass, className),
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 3 5 5-5 5" })
+	});
+}
+const rowClass = "relative flex w-full items-center gap-3 px-4 text-left text-label outline-none min-h-11 py-2 group-data-[size=sm]/item-group:min-h-9 group-data-[size=sm]/item-group:py-1.5 group-data-[size=lg]/item-group:min-h-14 group-data-[size=lg]/item-group:py-3";
+const pressClass = "hover:bg-fill/70 active:bg-fill focus-visible:ring-accent/70 transition-colors duration-(--duration-instant) focus-visible:ring-2 focus-visible:ring-inset disabled:pointer-events-none disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:opacity-40 motion-reduce:transition-none";
+/**
+* One row. Compose it from `ItemMedia`, `ItemContent` and `ItemActions`. With
+* `render` the whole row presses like iOS; with `panel` it opens to reveal
+* content, such as inputs, under the row.
+*/
+function Item({ chevron, render, panel, open, defaultOpen = false, onOpenChange, className, children, ...props }) {
+	const id = useId();
+	const [inner, setInner] = useState(defaultOpen);
+	const expanded = open ?? inner;
+	const toggle = () => {
+		setInner(!expanded);
+		onOpenChange?.(!expanded);
+	};
+	const state = expanded ? "open" : "closed";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item",
+		role: "listitem",
+		className: cx("group/item relative", className),
+		...props,
+		children: panel !== void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			id: `${id}-trigger`,
+			"aria-expanded": expanded,
+			"aria-controls": `${id}-panel`,
+			"data-state": state,
+			onClick: toggle,
+			className: cx(rowClass, pressClass),
+			children: [children, /* @__PURE__ */ jsx(Chevron, { className: cx("group-hover/item:translate-x-0.5", expanded && "rotate-90 group-hover/item:translate-x-0") })]
+		}), /* @__PURE__ */ jsx("div", {
+			id: `${id}-panel`,
+			role: "region",
+			"aria-labelledby": `${id}-trigger`,
+			"data-state": state,
+			inert: !expanded,
+			className: cx("spring-smooth grid transition-[grid-template-rows] motion-reduce:transition-none", expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "min-h-0 overflow-hidden",
+				children: /* @__PURE__ */ jsx("div", {
+					className: cx("flex flex-col gap-3 px-4 pt-2 pb-4 transition-opacity duration-(--duration-fast) motion-reduce:transition-none", !expanded && "opacity-0"),
+					children: panel
+				})
+			})
+		})] }) : render ? renderPart("a", mergeProps({
+			className: cx(rowClass, pressClass),
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [children, chevron ? /* @__PURE__ */ jsx(Chevron, { className: "group-hover/item:translate-x-0.5" }) : null] })
+		}, {}), render) : /* @__PURE__ */ jsxs("div", {
+			className: rowClass,
+			children: [children, chevron ? /* @__PURE__ */ jsx(Chevron, {}) : null]
+		})
+	});
+}
+/** The icon or image at the start of a row. The hairline insets past it. */
+function ItemMedia({ variant = "icon", className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "item-media",
+		"data-variant": variant,
+		className: cx("flex shrink-0 items-center justify-center", variant === "icon" ? "text-accent-text size-8 [&_svg]:size-5" : "size-10 overflow-hidden rounded-xl [&_img]:size-full [&_img]:object-cover", className),
+		...props
+	});
+}
+/** Holds the title and description, taking the room the media and actions leave. */
+function ItemContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-content",
+		className: cx("flex min-w-0 flex-1 flex-col", className),
+		...props
+	});
+}
+function ItemTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-title",
+		className: cx("text-body truncate group-data-[size=sm]/item-group:text-subheadline", className),
+		...props
+	});
+}
+function ItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-description",
+		className: cx("text-footnote text-label-secondary -mt-0.5 line-clamp-2 group-data-[size=sm]/item-group:text-caption", className),
+		...props
+	});
+}
+/** A value, switch, badge or button at the end of a row. */
+function ItemActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "item-actions",
+		className: cx("text-body text-label-secondary flex shrink-0 items-center gap-2 group-data-[size=sm]/item-group:text-subheadline", className),
+		...props
+	});
+}
+export { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle };

package/dist/kbd.d.ts

@@ -0,0 +1,4 @@
+import { ComponentProps } from "react";
+/** A keyboard key cap. Pass `Mod`, `Alt`, `Shift` and friends and the platform's own symbol shows. */
+export declare function Kbd({ className, children, ...props }: ComponentProps<"kbd">): import("react").JSX.Element;
+export declare function KbdGroup({ className, ...props }: ComponentProps<"span">): import("react").JSX.Element;