@uselets/ui 1.2.0 → 1.2.2

package/dist/index.js

@@ -1 +1 @@
-import{cn as e,randomId as t}from"./lib/utils.js";import{Accordion as n,AccordionContent as r,AccordionItem as i,AccordionTrigger as a}from"./components/accordion.js";import{Alert as o,AlertAction as s,AlertDescription as c,AlertTitle as l}from"./components/alert.js";import{buttonColorVariants as u}from"./lib/button.js";import{Spinner as d,spinnerVariants as f}from"./components/spinner.js";import{Button as p,buttonVariants as m}from"./components/button.js";import{AlertDialog as h,AlertDialogAction as g,AlertDialogCancel as _,AlertDialogContent as v,AlertDialogDescription as y,AlertDialogFooter as b,AlertDialogHeader as x,AlertDialogMedia as S,AlertDialogOverlay as C,AlertDialogPortal as w,AlertDialogTitle as T,AlertDialogTrigger as E}from"./components/alert-dialog.js";import{Anchor as D,anchorVariants as O}from"./components/anchor.js";import{Avatar as k,AvatarBadge as A,AvatarFallback as j,AvatarGroup as M,AvatarGroupCount as N,AvatarImage as P}from"./components/avatar.js";import{Badge as F,badgeVariants as I}from"./components/badge.js";import{Breadcrumb as L,BreadcrumbEllipsis as R,BreadcrumbItem as z,BreadcrumbLink as B,BreadcrumbList as V,BreadcrumbPage as H,BreadcrumbSeparator as U}from"./components/breadcrumb.js";import{Separator as W}from"./components/separator.js";import{ButtonGroup as G,ButtonGroupSeparator as K,ButtonGroupText as q,buttonGroupVariants as J}from"./components/button-group.js";import{Calendar as Y,CalendarDayButton as X,locale as Z}from"./components/calendar.js";import{Card as Q,CardAction as $,CardContent as ee,CardDescription as te,CardFooter as ne,CardHeader as re,CardTitle as ie}from"./components/card.js";import{Carousel as ae,CarouselContent as oe,CarouselItem as se,CarouselNext as ce,CarouselPrevious as le,useCarousel as ue}from"./components/carousel.js";import{Center as de,centerVariants as fe}from"./components/center.js";import{Bar as pe,BarChart as me,CartesianGrid as he,ChartContainer as ge,ChartLegend as _e,ChartLegendContent as ve,ChartStyle as ye,ChartTooltip as be,ChartTooltipContent as xe,XAxis as Se}from"./components/chart.js";import{selectionControlColorVariants as Ce,uiColors as we}from"./lib/color.js";import{Label as Te}from"./components/label.js";import{Checkbox as Ee}from"./components/checkbox.js";import{Code as De}from"./components/code.js";import{Collapsible as Oe,CollapsibleContent as ke,CollapsibleTrigger as Ae}from"./components/collapsible.js";import{Input as je}from"./components/input.js";import{Textarea as Me}from"./components/textarea.js";import{InputGroup as Ne,InputGroupAddon as Pe,InputGroupButton as Fe,InputGroupInput as Ie,InputGroupText as Le,InputGroupTextarea as Re}from"./components/input-group.js";import{Combobox as ze,ComboboxChip as Be,ComboboxChips as Ve,ComboboxChipsInput as He,ComboboxClear as Ue,ComboboxCollection as We,ComboboxContent as Ge,ComboboxEmpty as Ke,ComboboxGroup as qe,ComboboxInput as Je,ComboboxItem as Ye,ComboboxLabel as Xe,ComboboxList as Ze,ComboboxSeparator as Qe,ComboboxTrigger as $e,ComboboxValue as et,useComboboxAnchor as tt}from"./components/combobox.js";import{Dialog as nt,DialogClose as rt,DialogContent as it,DialogDescription as at,DialogFooter as ot,DialogHeader as st,DialogOverlay as ct,DialogPortal as lt,DialogTitle as ut,DialogTrigger as dt}from"./components/dialog.js";import{Command as ft,CommandDialog as pt,CommandEmpty as mt,CommandGroup as ht,CommandInput as gt,CommandItem as _t,CommandList as vt,CommandSeparator as yt,CommandShortcut as bt}from"./components/command.js";import{Container as xt,containerVariants as St}from"./components/container.js";import{Popover as Ct,PopoverAnchor as wt,PopoverContent as Tt,PopoverDescription as Et,PopoverHeader as Dt,PopoverTitle as Ot,PopoverTrigger as kt}from"./components/popover.js";import{DateRangePicker as At,DateRangePickerActions as jt,DateRangePickerApply as Mt,DateRangePickerCalendar as Nt,DateRangePickerContent as Pt,DateRangePickerDateFields as Ft,DateRangePickerPreset as It,DateRangePickerPresets as Lt,DateRangePickerReset as Rt,DateRangePickerTrigger as zt,DateRangePickerValue as Bt}from"./components/date-range-picker.js";import{Drawer as Vt,DrawerClose as Ht,DrawerContent as Ut,DrawerDescription as Wt,DrawerFooter as Gt,DrawerHeader as Kt,DrawerOverlay as qt,DrawerPortal as Jt,DrawerTitle as Yt,DrawerTrigger as Xt}from"./components/drawer.js";import{DropdownMenu as Zt,DropdownMenuCheckboxItem as Qt,DropdownMenuContent as $t,DropdownMenuGroup as en,DropdownMenuItem as tn,DropdownMenuLabel as nn,DropdownMenuPortal as rn,DropdownMenuRadioGroup as an,DropdownMenuRadioItem as on,DropdownMenuSeparator as sn,DropdownMenuShortcut as cn,DropdownMenuSub as ln,DropdownMenuSubContent as un,DropdownMenuSubTrigger as dn,DropdownMenuTrigger as fn}from"./components/dropdown-menu.js";import{Dropzone as pn,DropzoneArea as mn,DropzoneDescription as hn,DropzoneFileList as gn,DropzoneFileListItem as _n,DropzoneFileMessage as vn,DropzoneMessage as yn,DropzoneRemoveFile as bn,DropzoneRetryFile as xn,DropzoneTrigger as Sn,ErrorCode as Cn,InfiniteProgress as wn,useDropzone as Tn}from"./components/dropzone.js";import{Empty as En,EmptyContent as Dn,EmptyDescription as On,EmptyHeader as kn,EmptyMedia as An,EmptyTitle as jn}from"./components/empty.js";import{Field as Mn,FieldContent as Nn,FieldDescription as Pn,FieldError as Fn,FieldGroup as In,FieldLabel as Ln,FieldLegend as Rn,FieldSeparator as zn,FieldSet as Bn,FieldTitle as Vn}from"./components/field.js";import{Grid as Hn,GridItem as Un}from"./components/grid.js";import{Group as Wn,groupVariants as Gn}from"./components/group.js";import{Heading as Kn,headingVariants as qn}from"./components/heading.js";import{HoverCard as Jn,HoverCardContent as Yn,HoverCardTrigger as Xn}from"./components/hover-card.js";import{InputOTP as Zn,InputOTPGroup as Qn,InputOTPSeparator as $n,InputOTPSlot as er,REGEXP_ONLY_CHARS as tr,REGEXP_ONLY_DIGITS as nr,REGEXP_ONLY_DIGITS_AND_CHARS as rr}from"./components/input-otp.js";import{Kbd as ir,KbdGroup as ar}from"./components/kbd.js";import{List as or,ListIcon as sr,ListItem as cr,listVariants as lr}from"./components/list.js";import{NativeSelect as ur,NativeSelectOptGroup as dr,NativeSelectOption as fr}from"./components/native-select.js";import{NavigationMenu as pr,NavigationMenuContent as mr,NavigationMenuIndicator as hr,NavigationMenuItem as gr,NavigationMenuLink as _r,NavigationMenuList as vr,NavigationMenuTrigger as yr,NavigationMenuViewport as br,navigationMenuTriggerStyle as xr}from"./components/navigation-menu.js";import{Pagination as Sr,PaginationContent as Cr,PaginationEllipsis as wr,PaginationItem as Tr,PaginationLink as Er,PaginationNext as Dr,PaginationPrevious as Or}from"./components/pagination.js";import{Progress as kr}from"./components/progress.js";import{RadioGroup as Ar,RadioGroupItem as jr}from"./components/radio-group.js";import{ResizableHandle as Mr,ResizablePanel as Nr,ResizablePanelGroup as Pr}from"./components/resizable.js";import{ScrollArea as Fr,ScrollBar as Ir}from"./components/scroll-area.js";import{Select as Lr,SelectContent as Rr,SelectGroup as zr,SelectItem as Br,SelectLabel as Vr,SelectScrollDownButton as Hr,SelectScrollUpButton as Ur,SelectSeparator as Wr,SelectTrigger as Gr,SelectValue as Kr}from"./components/select.js";import{useIsMobile as qr}from"./hooks/use-mobile.js";import{Skeleton as Jr}from"./components/skeleton.js";import{Tooltip as Yr,TooltipContent as Xr,TooltipProvider as Zr,TooltipRoot as Qr,TooltipTrigger as $r}from"./components/tooltip.js";import{Sidebar as ei,SidebarContent as ti,SidebarFooter as ni,SidebarGroup as ri,SidebarGroupAction as ii,SidebarGroupContent as ai,SidebarGroupLabel as oi,SidebarHeader as si,SidebarInput as ci,SidebarInset as li,SidebarMenu as ui,SidebarMenuAction as di,SidebarMenuBadge as fi,SidebarMenuButton as pi,SidebarMenuItem as mi,SidebarMenuSkeleton as hi,SidebarMenuSub as gi,SidebarMenuSubButton as _i,SidebarMenuSubItem as vi,SidebarProvider as yi,SidebarRail as bi,SidebarSeparator as xi,SidebarTrigger as Si,useSidebar as Ci}from"./components/sidebar.js";import{SimpleGrid as wi}from"./components/simple-grid.js";import{Slider as Ti}from"./components/slider.js";import{Toaster as Ei,toast as Di}from"./components/sonner.js";import{Stack as Oi,stackVariants as ki}from"./components/stack.js";import{Switch as Ai}from"./components/switch.js";import{Table as ji,TableBody as Mi,TableCaption as Ni,TableCell as Pi,TableFooter as Fi,TableHead as Ii,TableHeader as Li,TableRow as Ri}from"./components/table.js";import{Tabs as zi,TabsContent as Bi,TabsList as Vi,TabsTrigger as Hi,tabsListVariants as Ui}from"./components/tabs.js";import{Text as Wi,textVariants as Gi}from"./components/text.js";import{ModeToggle as Ki,ThemeProvider as qi,useTheme as Ji}from"./components/theme.js";import{Timeline as Yi,TimelineConnector as Xi,TimelineContent as Zi,TimelineDescription as Qi,TimelineEmpty as $i,TimelineHeader as ea,TimelineIcon as ta,TimelineItem as na,TimelineTime as ra,TimelineTitle as ia,timelineVariants as aa}from"./components/timeline.js";import{Toggle as oa,toggleVariants as sa}from"./components/toggle.js";import{ToggleGroup as ca,ToggleGroupItem as la}from"./components/toggle-group.js";import{UnstyledButton as ua}from"./components/unstyled-button.js";import{breakpointValues as da,useBreakpoint as fa}from"./hooks/use-breakpoint.js";import{HiddenFrom as pa,VisibleFrom as ma}from"./components/visibility.js";import{useBreakpointValue as ha}from"./hooks/use-breakpoint-value.js";import{useDisclosure as ga}from"./hooks/use-disclosure.js";import{useDocumentVisibility as _a}from"./hooks/use-document-visibility.js";import{useIdle as va}from"./hooks/use-idle.js";import{useInterval as ya}from"./hooks/use-interval.js";import{useLocalStorage as ba}from"./hooks/use-local-storage.js";export{n as Accordion,r as AccordionContent,i as AccordionItem,a as AccordionTrigger,o as Alert,s as AlertAction,c as AlertDescription,h as AlertDialog,g as AlertDialogAction,_ as AlertDialogCancel,v as AlertDialogContent,y as AlertDialogDescription,b as AlertDialogFooter,x as AlertDialogHeader,S as AlertDialogMedia,C as AlertDialogOverlay,w as AlertDialogPortal,T as AlertDialogTitle,E as AlertDialogTrigger,l as AlertTitle,D as Anchor,k as Avatar,A as AvatarBadge,j as AvatarFallback,M as AvatarGroup,N as AvatarGroupCount,P as AvatarImage,F as Badge,pe as Bar,me as BarChart,L as Breadcrumb,R as BreadcrumbEllipsis,z as BreadcrumbItem,B as BreadcrumbLink,V as BreadcrumbList,H as BreadcrumbPage,U as BreadcrumbSeparator,p as Button,G as ButtonGroup,K as ButtonGroupSeparator,q as ButtonGroupText,Y as Calendar,X as CalendarDayButton,Q as Card,$ as CardAction,ee as CardContent,te as CardDescription,ne as CardFooter,re as CardHeader,ie as CardTitle,ae as Carousel,oe as CarouselContent,se as CarouselItem,ce as CarouselNext,le as CarouselPrevious,he as CartesianGrid,de as Center,ge as ChartContainer,_e as ChartLegend,ve as ChartLegendContent,ye as ChartStyle,be as ChartTooltip,xe as ChartTooltipContent,Ee as Checkbox,De as Code,Oe as Collapsible,ke as CollapsibleContent,Ae as CollapsibleTrigger,ze as Combobox,Be as ComboboxChip,Ve as ComboboxChips,He as ComboboxChipsInput,Ue as ComboboxClear,We as ComboboxCollection,Ge as ComboboxContent,Ke as ComboboxEmpty,qe as ComboboxGroup,Je as ComboboxInput,Ye as ComboboxItem,Xe as ComboboxLabel,Ze as ComboboxList,Qe as ComboboxSeparator,$e as ComboboxTrigger,et as ComboboxValue,ft as Command,pt as CommandDialog,mt as CommandEmpty,ht as CommandGroup,gt as CommandInput,_t as CommandItem,vt as CommandList,yt as CommandSeparator,bt as CommandShortcut,xt as Container,At as DateRangePicker,jt as DateRangePickerActions,Mt as DateRangePickerApply,Nt as DateRangePickerCalendar,Pt as DateRangePickerContent,Ft as DateRangePickerDateFields,It as DateRangePickerPreset,Lt as DateRangePickerPresets,Rt as DateRangePickerReset,zt as DateRangePickerTrigger,Bt as DateRangePickerValue,nt as Dialog,rt as DialogClose,it as DialogContent,at as DialogDescription,ot as DialogFooter,st as DialogHeader,ct as DialogOverlay,lt as DialogPortal,ut as DialogTitle,dt as DialogTrigger,Vt as Drawer,Ht as DrawerClose,Ut as DrawerContent,Wt as DrawerDescription,Gt as DrawerFooter,Kt as DrawerHeader,qt as DrawerOverlay,Jt as DrawerPortal,Yt as DrawerTitle,Xt as DrawerTrigger,Zt as DropdownMenu,Qt as DropdownMenuCheckboxItem,$t as DropdownMenuContent,en as DropdownMenuGroup,tn as DropdownMenuItem,nn as DropdownMenuLabel,rn as DropdownMenuPortal,an as DropdownMenuRadioGroup,on as DropdownMenuRadioItem,sn as DropdownMenuSeparator,cn as DropdownMenuShortcut,ln as DropdownMenuSub,un as DropdownMenuSubContent,dn as DropdownMenuSubTrigger,fn as DropdownMenuTrigger,pn as Dropzone,mn as DropzoneArea,hn as DropzoneDescription,gn as DropzoneFileList,_n as DropzoneFileListItem,vn as DropzoneFileMessage,yn as DropzoneMessage,bn as DropzoneRemoveFile,xn as DropzoneRetryFile,Sn as DropzoneTrigger,En as Empty,Dn as EmptyContent,On as EmptyDescription,kn as EmptyHeader,An as EmptyMedia,jn as EmptyTitle,Cn as ErrorCode,Mn as Field,Nn as FieldContent,Pn as FieldDescription,Fn as FieldError,In as FieldGroup,Ln as FieldLabel,Rn as FieldLegend,zn as FieldSeparator,Bn as FieldSet,Vn as FieldTitle,Hn as Grid,Un as GridItem,Wn as Group,Kn as Heading,pa as HiddenFrom,Jn as HoverCard,Yn as HoverCardContent,Xn as HoverCardTrigger,wn as InfiniteProgress,je as Input,Ne as InputGroup,Pe as InputGroupAddon,Fe as InputGroupButton,Ie as InputGroupInput,Le as InputGroupText,Re as InputGroupTextarea,Zn as InputOTP,Qn as InputOTPGroup,$n as InputOTPSeparator,er as InputOTPSlot,ir as Kbd,ar as KbdGroup,Te as Label,or as List,sr as ListIcon,cr as ListItem,Ki as ModeToggle,ur as NativeSelect,dr as NativeSelectOptGroup,fr as NativeSelectOption,pr as NavigationMenu,mr as NavigationMenuContent,hr as NavigationMenuIndicator,gr as NavigationMenuItem,_r as NavigationMenuLink,vr as NavigationMenuList,yr as NavigationMenuTrigger,br as NavigationMenuViewport,Sr as Pagination,Cr as PaginationContent,wr as PaginationEllipsis,Tr as PaginationItem,Er as PaginationLink,Dr as PaginationNext,Or as PaginationPrevious,Ct as Popover,wt as PopoverAnchor,Tt as PopoverContent,Et as PopoverDescription,Dt as PopoverHeader,Ot as PopoverTitle,kt as PopoverTrigger,kr as Progress,tr as REGEXP_ONLY_CHARS,nr as REGEXP_ONLY_DIGITS,rr as REGEXP_ONLY_DIGITS_AND_CHARS,Ar as RadioGroup,jr as RadioGroupItem,Mr as ResizableHandle,Nr as ResizablePanel,Pr as ResizablePanelGroup,Fr as ScrollArea,Ir as ScrollBar,Lr as Select,Rr as SelectContent,zr as SelectGroup,Br as SelectItem,Vr as SelectLabel,Hr as SelectScrollDownButton,Ur as SelectScrollUpButton,Wr as SelectSeparator,Gr as SelectTrigger,Kr as SelectValue,W as Separator,ei as Sidebar,ti as SidebarContent,ni as SidebarFooter,ri as SidebarGroup,ii as SidebarGroupAction,ai as SidebarGroupContent,oi as SidebarGroupLabel,si as SidebarHeader,ci as SidebarInput,li as SidebarInset,ui as SidebarMenu,di as SidebarMenuAction,fi as SidebarMenuBadge,pi as SidebarMenuButton,mi as SidebarMenuItem,hi as SidebarMenuSkeleton,gi as SidebarMenuSub,_i as SidebarMenuSubButton,vi as SidebarMenuSubItem,yi as SidebarProvider,bi as SidebarRail,xi as SidebarSeparator,Si as SidebarTrigger,wi as SimpleGrid,Jr as Skeleton,Ti as Slider,d as Spinner,Oi as Stack,Ai as Switch,ji as Table,Mi as TableBody,Ni as TableCaption,Pi as TableCell,Fi as TableFooter,Ii as TableHead,Li as TableHeader,Ri as TableRow,zi as Tabs,Bi as TabsContent,Vi as TabsList,Hi as TabsTrigger,Wi as Text,Me as Textarea,qi as ThemeProvider,Yi as Timeline,Xi as TimelineConnector,Zi as TimelineContent,Qi as TimelineDescription,$i as TimelineEmpty,ea as TimelineHeader,ta as TimelineIcon,na as TimelineItem,ra as TimelineTime,ia as TimelineTitle,Ei as Toaster,oa as Toggle,ca as ToggleGroup,la as ToggleGroupItem,Yr as Tooltip,Xr as TooltipContent,Zr as TooltipProvider,Qr as TooltipRoot,$r as TooltipTrigger,ua as UnstyledButton,ma as VisibleFrom,Se as XAxis,O as anchorVariants,I as badgeVariants,da as breakpointValues,u as buttonColorVariants,J as buttonGroupVariants,m as buttonVariants,fe as centerVariants,e as cn,St as containerVariants,Gn as groupVariants,qn as headingVariants,lr as listVariants,Z as locale,xr as navigationMenuTriggerStyle,t as randomId,Ce as selectionControlColorVariants,f as spinnerVariants,ki as stackVariants,Ui as tabsListVariants,Gi as textVariants,aa as timelineVariants,Di as toast,sa as toggleVariants,we as uiColors,fa as useBreakpoint,ha as useBreakpointValue,ue as useCarousel,tt as useComboboxAnchor,ga as useDisclosure,_a as useDocumentVisibility,Tn as useDropzone,va as useIdle,ya as useInterval,qr as useIsMobile,ba as useLocalStorage,Ci as useSidebar,Ji as useTheme};
+import{cn as e,randomId as t}from"./lib/utils.js";import{Accordion as n,AccordionContent as r,AccordionItem as i,AccordionTrigger as a}from"./components/accordion.js";import{Alert as o,AlertAction as s,AlertDescription as c,AlertTitle as l}from"./components/alert.js";import{buttonColorVariants as u}from"./lib/button.js";import{Spinner as d,spinnerVariants as f}from"./components/spinner.js";import{Button as p,buttonVariants as m}from"./components/button.js";import{AlertDialog as h,AlertDialogAction as g,AlertDialogCancel as _,AlertDialogContent as v,AlertDialogDescription as y,AlertDialogFooter as b,AlertDialogHeader as x,AlertDialogMedia as S,AlertDialogOverlay as C,AlertDialogPortal as w,AlertDialogTitle as T,AlertDialogTrigger as E}from"./components/alert-dialog.js";import{Anchor as D,anchorVariants as O}from"./components/anchor.js";import{Avatar as k,AvatarBadge as A,AvatarFallback as j,AvatarGroup as M,AvatarGroupCount as N,AvatarImage as P}from"./components/avatar.js";import{Badge as F,badgeVariants as I}from"./components/badge.js";import{Breadcrumb as L,BreadcrumbEllipsis as R,BreadcrumbItem as z,BreadcrumbLink as B,BreadcrumbList as V,BreadcrumbPage as H,BreadcrumbSeparator as U}from"./components/breadcrumb.js";import{Separator as W}from"./components/separator.js";import{ButtonGroup as G,ButtonGroupSeparator as K,ButtonGroupText as q,buttonGroupVariants as J}from"./components/button-group.js";import{Calendar as Y,CalendarDayButton as X,locale as Z}from"./components/calendar.js";import{Card as Q,CardAction as $,CardContent as ee,CardDescription as te,CardFooter as ne,CardHeader as re,CardTitle as ie}from"./components/card.js";import{Carousel as ae,CarouselContent as oe,CarouselItem as se,CarouselNext as ce,CarouselPrevious as le,useCarousel as ue}from"./components/carousel.js";import{Center as de,centerVariants as fe}from"./components/center.js";import{Bar as pe,BarChart as me,CartesianGrid as he,ChartContainer as ge,ChartLegend as _e,ChartLegendContent as ve,ChartStyle as ye,ChartTooltip as be,ChartTooltipContent as xe,XAxis as Se}from"./components/chart.js";import{selectionControlColorVariants as Ce,uiColors as we}from"./lib/color.js";import{Label as Te}from"./components/label.js";import{Field as Ee,FieldContent as De,FieldDescription as Oe,FieldError as ke,FieldGroup as Ae,FieldLabel as je,FieldLegend as Me,FieldSeparator as Ne,FieldSet as Pe,FieldTitle as Fe,useFieldControlId as Ie}from"./components/field.js";import{Checkbox as Le}from"./components/checkbox.js";import{Code as Re}from"./components/code.js";import{Collapsible as ze,CollapsibleContent as Be,CollapsibleTrigger as Ve}from"./components/collapsible.js";import{Input as He}from"./components/input.js";import{Textarea as Ue}from"./components/textarea.js";import{InputGroup as We,InputGroupAddon as Ge,InputGroupButton as Ke,InputGroupInput as qe,InputGroupText as Je,InputGroupTextarea as Ye}from"./components/input-group.js";import{Combobox as Xe,ComboboxChip as Ze,ComboboxChips as Qe,ComboboxChipsInput as $e,ComboboxClear as et,ComboboxCollection as tt,ComboboxContent as nt,ComboboxEmpty as rt,ComboboxGroup as it,ComboboxInput as at,ComboboxItem as ot,ComboboxLabel as st,ComboboxList as ct,ComboboxSeparator as lt,ComboboxTrigger as ut,ComboboxValue as dt,useComboboxAnchor as ft}from"./components/combobox.js";import{Dialog as pt,DialogClose as mt,DialogContent as ht,DialogDescription as gt,DialogFooter as _t,DialogHeader as vt,DialogOverlay as yt,DialogPortal as bt,DialogTitle as xt,DialogTrigger as St}from"./components/dialog.js";import{Command as Ct,CommandDialog as wt,CommandEmpty as Tt,CommandGroup as Et,CommandInput as Dt,CommandItem as Ot,CommandList as kt,CommandSeparator as At,CommandShortcut as jt}from"./components/command.js";import{Container as Mt,containerVariants as Nt}from"./components/container.js";import{Popover as Pt,PopoverAnchor as Ft,PopoverContent as It,PopoverDescription as Lt,PopoverHeader as Rt,PopoverTitle as zt,PopoverTrigger as Bt}from"./components/popover.js";import{DateRangePicker as Vt,DateRangePickerActions as Ht,DateRangePickerApply as Ut,DateRangePickerCalendar as Wt,DateRangePickerContent as Gt,DateRangePickerDateFields as Kt,DateRangePickerPreset as qt,DateRangePickerPresets as Jt,DateRangePickerReset as Yt,DateRangePickerTrigger as Xt,DateRangePickerValue as Zt}from"./components/date-range-picker.js";import{Drawer as Qt,DrawerBody as $t,DrawerClose as en,DrawerContent as tn,DrawerDescription as nn,DrawerFooter as rn,DrawerHeader as an,DrawerOverlay as on,DrawerPortal as sn,DrawerTitle as cn,DrawerTrigger as ln}from"./components/drawer.js";import{DropdownMenu as un,DropdownMenuCheckboxItem as dn,DropdownMenuContent as fn,DropdownMenuGroup as pn,DropdownMenuItem as mn,DropdownMenuLabel as hn,DropdownMenuPortal as gn,DropdownMenuRadioGroup as _n,DropdownMenuRadioItem as vn,DropdownMenuSeparator as yn,DropdownMenuShortcut as bn,DropdownMenuSub as xn,DropdownMenuSubContent as Sn,DropdownMenuSubTrigger as Cn,DropdownMenuTrigger as wn}from"./components/dropdown-menu.js";import{Dropzone as Tn,DropzoneArea as En,DropzoneDescription as Dn,DropzoneFileList as On,DropzoneFileListItem as kn,DropzoneFileMessage as An,DropzoneMessage as jn,DropzoneRemoveFile as Mn,DropzoneRetryFile as Nn,DropzoneTrigger as Pn,ErrorCode as Fn,InfiniteProgress as In,useDropzone as Ln}from"./components/dropzone.js";import{Empty as Rn,EmptyContent as zn,EmptyDescription as Bn,EmptyHeader as Vn,EmptyMedia as Hn,EmptyTitle as Un}from"./components/empty.js";import{Grid as Wn,GridItem as Gn}from"./components/grid.js";import{Group as Kn,groupVariants as qn}from"./components/group.js";import{Heading as Jn,headingVariants as Yn}from"./components/heading.js";import{HoverCard as Xn,HoverCardContent as Zn,HoverCardTrigger as Qn}from"./components/hover-card.js";import{InputOTP as $n,InputOTPGroup as er,InputOTPSeparator as tr,InputOTPSlot as nr,REGEXP_ONLY_CHARS as rr,REGEXP_ONLY_DIGITS as ir,REGEXP_ONLY_DIGITS_AND_CHARS as ar}from"./components/input-otp.js";import{Kbd as or,KbdGroup as sr}from"./components/kbd.js";import{List as cr,ListIcon as lr,ListItem as ur,listVariants as dr}from"./components/list.js";import{NativeSelect as fr,NativeSelectOptGroup as pr,NativeSelectOption as mr}from"./components/native-select.js";import{NavigationMenu as hr,NavigationMenuContent as gr,NavigationMenuIndicator as _r,NavigationMenuItem as vr,NavigationMenuLink as yr,NavigationMenuList as br,NavigationMenuTrigger as xr,NavigationMenuViewport as Sr,navigationMenuTriggerStyle as Cr}from"./components/navigation-menu.js";import{Pagination as wr,PaginationContent as Tr,PaginationEllipsis as Er,PaginationItem as Dr,PaginationLink as Or,PaginationNext as kr,PaginationPrevious as Ar}from"./components/pagination.js";import{Progress as jr}from"./components/progress.js";import{RadioGroup as Mr,RadioGroupItem as Nr}from"./components/radio-group.js";import{ResizableHandle as Pr,ResizablePanel as Fr,ResizablePanelGroup as Ir}from"./components/resizable.js";import{ScrollArea as Lr,ScrollBar as Rr}from"./components/scroll-area.js";import{Select as zr,SelectContent as Br,SelectGroup as Vr,SelectItem as Hr,SelectLabel as Ur,SelectScrollDownButton as Wr,SelectScrollUpButton as Gr,SelectSeparator as Kr,SelectTrigger as qr,SelectValue as Jr}from"./components/select.js";import{useIsMobile as Yr}from"./hooks/use-mobile.js";import{Skeleton as Xr}from"./components/skeleton.js";import{Tooltip as Zr,TooltipContent as Qr,TooltipProvider as $r,TooltipRoot as ei,TooltipTrigger as ti}from"./components/tooltip.js";import{Sidebar as ni,SidebarContent as ri,SidebarFooter as ii,SidebarGroup as ai,SidebarGroupAction as oi,SidebarGroupContent as si,SidebarGroupLabel as ci,SidebarHeader as li,SidebarInput as ui,SidebarInset as di,SidebarMenu as fi,SidebarMenuAction as pi,SidebarMenuBadge as mi,SidebarMenuButton as hi,SidebarMenuItem as gi,SidebarMenuSkeleton as _i,SidebarMenuSub as vi,SidebarMenuSubButton as yi,SidebarMenuSubItem as bi,SidebarProvider as xi,SidebarRail as Si,SidebarSeparator as Ci,SidebarTrigger as wi,useSidebar as Ti}from"./components/sidebar.js";import{SimpleGrid as Ei}from"./components/simple-grid.js";import{Slider as Di}from"./components/slider.js";import{Toaster as Oi,toast as ki}from"./components/sonner.js";import{Stack as Ai,stackVariants as ji}from"./components/stack.js";import{Switch as Mi}from"./components/switch.js";import{Table as Ni,TableBody as Pi,TableCaption as Fi,TableCell as Ii,TableFooter as Li,TableHead as Ri,TableHeader as zi,TableRow as Bi}from"./components/table.js";import{Tabs as Vi,TabsContent as Hi,TabsList as Ui,TabsTrigger as Wi,tabsListVariants as Gi}from"./components/tabs.js";import{Text as Ki,textVariants as qi}from"./components/text.js";import{ModeToggle as Ji,ThemeProvider as Yi,useTheme as Xi}from"./components/theme.js";import{Timeline as Zi,TimelineConnector as Qi,TimelineContent as $i,TimelineDescription as ea,TimelineEmpty as ta,TimelineHeader as na,TimelineIcon as ra,TimelineItem as ia,TimelineTime as aa,TimelineTitle as oa,timelineVariants as sa}from"./components/timeline.js";import{Toggle as ca,toggleVariants as la}from"./components/toggle.js";import{ToggleGroup as ua,ToggleGroupItem as da}from"./components/toggle-group.js";import{UnstyledButton as fa}from"./components/unstyled-button.js";import{breakpointValues as pa,useBreakpoint as ma}from"./hooks/use-breakpoint.js";import{HiddenFrom as ha,VisibleFrom as ga}from"./components/visibility.js";import{useBreakpointValue as _a}from"./hooks/use-breakpoint-value.js";import{useDisclosure as va}from"./hooks/use-disclosure.js";import{useDocumentVisibility as ya}from"./hooks/use-document-visibility.js";import{useIdle as ba}from"./hooks/use-idle.js";import{useInterval as xa}from"./hooks/use-interval.js";import{useLocalStorage as Sa}from"./hooks/use-local-storage.js";export{n as Accordion,r as AccordionContent,i as AccordionItem,a as AccordionTrigger,o as Alert,s as AlertAction,c as AlertDescription,h as AlertDialog,g as AlertDialogAction,_ as AlertDialogCancel,v as AlertDialogContent,y as AlertDialogDescription,b as AlertDialogFooter,x as AlertDialogHeader,S as AlertDialogMedia,C as AlertDialogOverlay,w as AlertDialogPortal,T as AlertDialogTitle,E as AlertDialogTrigger,l as AlertTitle,D as Anchor,k as Avatar,A as AvatarBadge,j as AvatarFallback,M as AvatarGroup,N as AvatarGroupCount,P as AvatarImage,F as Badge,pe as Bar,me as BarChart,L as Breadcrumb,R as BreadcrumbEllipsis,z as BreadcrumbItem,B as BreadcrumbLink,V as BreadcrumbList,H as BreadcrumbPage,U as BreadcrumbSeparator,p as Button,G as ButtonGroup,K as ButtonGroupSeparator,q as ButtonGroupText,Y as Calendar,X as CalendarDayButton,Q as Card,$ as CardAction,ee as CardContent,te as CardDescription,ne as CardFooter,re as CardHeader,ie as CardTitle,ae as Carousel,oe as CarouselContent,se as CarouselItem,ce as CarouselNext,le as CarouselPrevious,he as CartesianGrid,de as Center,ge as ChartContainer,_e as ChartLegend,ve as ChartLegendContent,ye as ChartStyle,be as ChartTooltip,xe as ChartTooltipContent,Le as Checkbox,Re as Code,ze as Collapsible,Be as CollapsibleContent,Ve as CollapsibleTrigger,Xe as Combobox,Ze as ComboboxChip,Qe as ComboboxChips,$e as ComboboxChipsInput,et as ComboboxClear,tt as ComboboxCollection,nt as ComboboxContent,rt as ComboboxEmpty,it as ComboboxGroup,at as ComboboxInput,ot as ComboboxItem,st as ComboboxLabel,ct as ComboboxList,lt as ComboboxSeparator,ut as ComboboxTrigger,dt as ComboboxValue,Ct as Command,wt as CommandDialog,Tt as CommandEmpty,Et as CommandGroup,Dt as CommandInput,Ot as CommandItem,kt as CommandList,At as CommandSeparator,jt as CommandShortcut,Mt as Container,Vt as DateRangePicker,Ht as DateRangePickerActions,Ut as DateRangePickerApply,Wt as DateRangePickerCalendar,Gt as DateRangePickerContent,Kt as DateRangePickerDateFields,qt as DateRangePickerPreset,Jt as DateRangePickerPresets,Yt as DateRangePickerReset,Xt as DateRangePickerTrigger,Zt as DateRangePickerValue,pt as Dialog,mt as DialogClose,ht as DialogContent,gt as DialogDescription,_t as DialogFooter,vt as DialogHeader,yt as DialogOverlay,bt as DialogPortal,xt as DialogTitle,St as DialogTrigger,Qt as Drawer,$t as DrawerBody,en as DrawerClose,tn as DrawerContent,nn as DrawerDescription,rn as DrawerFooter,an as DrawerHeader,on as DrawerOverlay,sn as DrawerPortal,cn as DrawerTitle,ln as DrawerTrigger,un as DropdownMenu,dn as DropdownMenuCheckboxItem,fn as DropdownMenuContent,pn as DropdownMenuGroup,mn as DropdownMenuItem,hn as DropdownMenuLabel,gn as DropdownMenuPortal,_n as DropdownMenuRadioGroup,vn as DropdownMenuRadioItem,yn as DropdownMenuSeparator,bn as DropdownMenuShortcut,xn as DropdownMenuSub,Sn as DropdownMenuSubContent,Cn as DropdownMenuSubTrigger,wn as DropdownMenuTrigger,Tn as Dropzone,En as DropzoneArea,Dn as DropzoneDescription,On as DropzoneFileList,kn as DropzoneFileListItem,An as DropzoneFileMessage,jn as DropzoneMessage,Mn as DropzoneRemoveFile,Nn as DropzoneRetryFile,Pn as DropzoneTrigger,Rn as Empty,zn as EmptyContent,Bn as EmptyDescription,Vn as EmptyHeader,Hn as EmptyMedia,Un as EmptyTitle,Fn as ErrorCode,Ee as Field,De as FieldContent,Oe as FieldDescription,ke as FieldError,Ae as FieldGroup,je as FieldLabel,Me as FieldLegend,Ne as FieldSeparator,Pe as FieldSet,Fe as FieldTitle,Wn as Grid,Gn as GridItem,Kn as Group,Jn as Heading,ha as HiddenFrom,Xn as HoverCard,Zn as HoverCardContent,Qn as HoverCardTrigger,In as InfiniteProgress,He as Input,We as InputGroup,Ge as InputGroupAddon,Ke as InputGroupButton,qe as InputGroupInput,Je as InputGroupText,Ye as InputGroupTextarea,$n as InputOTP,er as InputOTPGroup,tr as InputOTPSeparator,nr as InputOTPSlot,or as Kbd,sr as KbdGroup,Te as Label,cr as List,lr as ListIcon,ur as ListItem,Ji as ModeToggle,fr as NativeSelect,pr as NativeSelectOptGroup,mr as NativeSelectOption,hr as NavigationMenu,gr as NavigationMenuContent,_r as NavigationMenuIndicator,vr as NavigationMenuItem,yr as NavigationMenuLink,br as NavigationMenuList,xr as NavigationMenuTrigger,Sr as NavigationMenuViewport,wr as Pagination,Tr as PaginationContent,Er as PaginationEllipsis,Dr as PaginationItem,Or as PaginationLink,kr as PaginationNext,Ar as PaginationPrevious,Pt as Popover,Ft as PopoverAnchor,It as PopoverContent,Lt as PopoverDescription,Rt as PopoverHeader,zt as PopoverTitle,Bt as PopoverTrigger,jr as Progress,rr as REGEXP_ONLY_CHARS,ir as REGEXP_ONLY_DIGITS,ar as REGEXP_ONLY_DIGITS_AND_CHARS,Mr as RadioGroup,Nr as RadioGroupItem,Pr as ResizableHandle,Fr as ResizablePanel,Ir as ResizablePanelGroup,Lr as ScrollArea,Rr as ScrollBar,zr as Select,Br as SelectContent,Vr as SelectGroup,Hr as SelectItem,Ur as SelectLabel,Wr as SelectScrollDownButton,Gr as SelectScrollUpButton,Kr as SelectSeparator,qr as SelectTrigger,Jr as SelectValue,W as Separator,ni as Sidebar,ri as SidebarContent,ii as SidebarFooter,ai as SidebarGroup,oi as SidebarGroupAction,si as SidebarGroupContent,ci as SidebarGroupLabel,li as SidebarHeader,ui as SidebarInput,di as SidebarInset,fi as SidebarMenu,pi as SidebarMenuAction,mi as SidebarMenuBadge,hi as SidebarMenuButton,gi as SidebarMenuItem,_i as SidebarMenuSkeleton,vi as SidebarMenuSub,yi as SidebarMenuSubButton,bi as SidebarMenuSubItem,xi as SidebarProvider,Si as SidebarRail,Ci as SidebarSeparator,wi as SidebarTrigger,Ei as SimpleGrid,Xr as Skeleton,Di as Slider,d as Spinner,Ai as Stack,Mi as Switch,Ni as Table,Pi as TableBody,Fi as TableCaption,Ii as TableCell,Li as TableFooter,Ri as TableHead,zi as TableHeader,Bi as TableRow,Vi as Tabs,Hi as TabsContent,Ui as TabsList,Wi as TabsTrigger,Ki as Text,Ue as Textarea,Yi as ThemeProvider,Zi as Timeline,Qi as TimelineConnector,$i as TimelineContent,ea as TimelineDescription,ta as TimelineEmpty,na as TimelineHeader,ra as TimelineIcon,ia as TimelineItem,aa as TimelineTime,oa as TimelineTitle,Oi as Toaster,ca as Toggle,ua as ToggleGroup,da as ToggleGroupItem,Zr as Tooltip,Qr as TooltipContent,$r as TooltipProvider,ei as TooltipRoot,ti as TooltipTrigger,fa as UnstyledButton,ga as VisibleFrom,Se as XAxis,O as anchorVariants,I as badgeVariants,pa as breakpointValues,u as buttonColorVariants,J as buttonGroupVariants,m as buttonVariants,fe as centerVariants,e as cn,Nt as containerVariants,qn as groupVariants,Yn as headingVariants,dr as listVariants,Z as locale,Cr as navigationMenuTriggerStyle,t as randomId,Ce as selectionControlColorVariants,f as spinnerVariants,ji as stackVariants,Gi as tabsListVariants,qi as textVariants,sa as timelineVariants,ki as toast,la as toggleVariants,we as uiColors,ma as useBreakpoint,_a as useBreakpointValue,ue as useCarousel,ft as useComboboxAnchor,va as useDisclosure,ya as useDocumentVisibility,Ln as useDropzone,Ie as useFieldControlId,ba as useIdle,xa as useInterval,Yr as useIsMobile,Sa as useLocalStorage,Ti as useSidebar,Xi as useTheme};

package/dist/skills/uselets-ui/SKILL.md

@@ -55,6 +55,7 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
 - Use `UnstyledButton` when button semantics are needed without `Button` variants; it provides reset styles, pointer cursor, focus ring, default `type="button"`, and `asChild`.
 - For toast usage, mount `Toaster` near the app root before calling `toast(...)`.
 - For package theme helpers, use `ThemeProvider`, `useTheme`, and `ModeToggle` from `@uselets/ui/theme` or the root barrel.
+- For form fields, `Field` automatically shares a generated control id with `FieldLabel` and labelable controls when explicit ids are omitted; pass explicit matching `htmlFor` and `id` only when a stable custom id is required.
 
 ## Quick Routing
 

package/dist/skills/uselets-ui/references/component-catalog.md

@@ -115,8 +115,8 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 ## Forms and input composition
 
 - `field`
-  - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`
-  - Notes: form layout and validation helpers
+  - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`, `useFieldControlId`
+  - Notes: form layout and validation helpers; `Field` automatically provides a generated control id to `FieldLabel` and labelable descendants when explicit ids are omitted
 - `grid`
   - Exports: `Grid`, `GridItem`
   - Notes: 12-column CSS grid by default. `Grid` supports spacing props plus direct `templateRows` and `templateColumns`; `GridItem` defaults to `colSpan={12}` and supports numeric `colSpan` and `rowSpan`. Use `useBreakpointValue` when these values need to change by breakpoint.
@@ -175,7 +175,8 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `dialog`
   - Exports: `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`
 - `drawer`
-  - Exports: `Drawer`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
+  - Exports: `Drawer`, `DrawerBody`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
+  - Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg' | 'xl'` with default `md`; `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`
 - `popover`
   - Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
 - `hover-card`

package/dist/skills/uselets-ui/references/package-guide.md

@@ -193,6 +193,11 @@ Use these package-level helpers when relevant:
 - `ThemeProvider`
   - Provide package theme state for `useTheme` and `ModeToggle`.
 
+`Field` automatically shares one generated control id with `FieldLabel` and labelable descendants such as
+`Input`, `Textarea`, `SelectTrigger`, `NativeSelect`, `Checkbox`, `Switch`, `RadioGroupItem`, and related input
+wrappers when explicit ids are omitted. Pass matching `FieldLabel htmlFor` and control `id` only when a stable
+custom id is required.
+
 Examples:
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uselets/ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "private": false,
   "description": "React component library for the LET'S design system.",

package/skills/uselets-ui/SKILL.md

@@ -55,6 +55,7 @@ To set up a consumer project after installing `@uselets/ui`, run `bun uselets in
 - Use `UnstyledButton` when button semantics are needed without `Button` variants; it provides reset styles, pointer cursor, focus ring, default `type="button"`, and `asChild`.
 - For toast usage, mount `Toaster` near the app root before calling `toast(...)`.
 - For package theme helpers, use `ThemeProvider`, `useTheme`, and `ModeToggle` from `@uselets/ui/theme` or the root barrel.
+- For form fields, `Field` automatically shares a generated control id with `FieldLabel` and labelable controls when explicit ids are omitted; pass explicit matching `htmlFor` and `id` only when a stable custom id is required.
 
 ## Quick Routing
 

package/skills/uselets-ui/references/component-catalog.md

@@ -115,8 +115,8 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 ## Forms and input composition
 
 - `field`
-  - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`
-  - Notes: form layout and validation helpers
+  - Exports: `Field`, `FieldContent`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLabel`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldTitle`, `useFieldControlId`
+  - Notes: form layout and validation helpers; `Field` automatically provides a generated control id to `FieldLabel` and labelable descendants when explicit ids are omitted
 - `grid`
   - Exports: `Grid`, `GridItem`
   - Notes: 12-column CSS grid by default. `Grid` supports spacing props plus direct `templateRows` and `templateColumns`; `GridItem` defaults to `colSpan={12}` and supports numeric `colSpan` and `rowSpan`. Use `useBreakpointValue` when these values need to change by breakpoint.
@@ -175,7 +175,8 @@ Unless noted otherwise, each module also exports its public `*Props` types from
 - `dialog`
   - Exports: `Dialog`, `DialogClose`, `DialogContent`, `DialogDescription`, `DialogFooter`, `DialogHeader`, `DialogOverlay`, `DialogPortal`, `DialogTitle`, `DialogTrigger`
 - `drawer`
-  - Exports: `Drawer`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
+  - Exports: `Drawer`, `DrawerBody`, `DrawerClose`, `DrawerContent`, `DrawerDescription`, `DrawerFooter`, `DrawerHeader`, `DrawerOverlay`, `DrawerPortal`, `DrawerTitle`, `DrawerTrigger`
+  - Notes: `Drawer` supports `size: 'sm' | 'md' | 'lg' | 'xl'` with default `md`; `DrawerBody` provides padded auto-scroll content; `DrawerFooter` stacks actions on mobile and aligns them to the end on larger breakpoints; `DrawerContent.showCloseButton` controls the automatic close button and defaults to `true`
 - `popover`
   - Exports: `Popover`, `PopoverAnchor`, `PopoverContent`, `PopoverDescription`, `PopoverHeader`, `PopoverTitle`, `PopoverTrigger`
 - `hover-card`

package/skills/uselets-ui/references/package-guide.md

@@ -193,6 +193,11 @@ Use these package-level helpers when relevant:
 - `ThemeProvider`
   - Provide package theme state for `useTheme` and `ModeToggle`.
 
+`Field` automatically shares one generated control id with `FieldLabel` and labelable descendants such as
+`Input`, `Textarea`, `SelectTrigger`, `NativeSelect`, `Checkbox`, `Switch`, `RadioGroupItem`, and related input
+wrappers when explicit ids are omitted. Pass matching `FieldLabel htmlFor` and control `id` only when a stable
+custom id is required.
+
 Examples:
 
 ```tsx