@kinetixui/ui 0.6.5 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/index.d.ts +47 -2
  2. package/dist/index.js +472 -380
  3. package/package.json +2 -2
  4. package/src/components/accordion.tsx +1 -1
  5. package/src/components/alert-dialog.tsx +2 -2
  6. package/src/components/app-bar.tsx +1 -1
  7. package/src/components/audio-player.tsx +3 -0
  8. package/src/components/badge.tsx +13 -4
  9. package/src/components/button.tsx +2 -2
  10. package/src/components/calendar.tsx +9 -5
  11. package/src/components/checkbox.tsx +1 -1
  12. package/src/components/circular-progress.tsx +1 -1
  13. package/src/components/command.tsx +4 -2
  14. package/src/components/context-menu.tsx +2 -2
  15. package/src/components/dialog.tsx +3 -3
  16. package/src/components/drawer.tsx +2 -2
  17. package/src/components/dropdown-menu.tsx +4 -2
  18. package/src/components/empty.tsx +76 -0
  19. package/src/components/fab.tsx +1 -1
  20. package/src/components/file-upload.tsx +1 -1
  21. package/src/components/hover-card.tsx +1 -1
  22. package/src/components/image.tsx +2 -2
  23. package/src/components/inform.tsx +1 -1
  24. package/src/components/input-group.tsx +2 -2
  25. package/src/components/input-otp.tsx +3 -3
  26. package/src/components/input.tsx +2 -2
  27. package/src/components/kbd.tsx +40 -0
  28. package/src/components/label.tsx +1 -1
  29. package/src/components/list.tsx +1 -1
  30. package/src/components/menubar.tsx +2 -2
  31. package/src/components/modal.tsx +2 -2
  32. package/src/components/navigation-menu.tsx +4 -4
  33. package/src/components/number-input.tsx +3 -3
  34. package/src/components/popover.tsx +1 -1
  35. package/src/components/radio-group.tsx +1 -1
  36. package/src/components/resizable.tsx +1 -1
  37. package/src/components/select.tsx +5 -3
  38. package/src/components/sheet.tsx +3 -3
  39. package/src/components/sidebar.tsx +5 -5
  40. package/src/components/slider.tsx +1 -1
  41. package/src/components/switch.tsx +1 -1
  42. package/src/components/tabs.tsx +1 -1
  43. package/src/components/tag.tsx +27 -15
  44. package/src/components/textarea.tsx +2 -2
  45. package/src/components/toggle.tsx +1 -1
  46. package/src/components/tooltip.tsx +1 -1
  47. package/src/components-behavior.test.tsx +37 -0
  48. package/src/index.ts +13 -0
  49. package/src/stories/Empty.stories.tsx +35 -0
  50. package/src/stories/Kbd.stories.tsx +27 -0
  51. package/tailwind.config.ts +29 -0
package/dist/index.d.ts CHANGED
@@ -162,8 +162,11 @@ declare const badgeVariants: (props?: ({
162
162
  variant?: "default" | "destructive" | "secondary" | "outline" | "subtle" | null | undefined;
163
163
  } & class_variance_authority_types.ClassProp) | undefined) => string;
164
164
  interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
165
+ /** render as the single child element (Radix Slot) instead of <div> —
166
+ * e.g. `<Badge asChild><a href="/new">New</a></Badge>` for a linked badge */
167
+ asChild?: boolean;
165
168
  }
166
- declare function Badge({ className, variant, ...props }: BadgeProps): React$1.JSX.Element;
169
+ declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
167
170
 
168
171
  declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
169
172
  declare const BreadcrumbList: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React$1.RefAttributes<HTMLOListElement>>;
@@ -390,6 +393,13 @@ declare const tagVariants: (props?: ({
390
393
  interface TagProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {
391
394
  /** show a dismiss button; called when it's clicked */
392
395
  onRemove?: () => void;
396
+ /** render as the single child element (Radix Slot) instead of <span> —
397
+ * e.g. `<Tag asChild><a href="/filter">Active</a></Tag>` for a linked tag.
398
+ * Combined with `onRemove`, the remove button nests inside the slotted
399
+ * element (Slot can only render one root node) — fine for a <div>/<span>,
400
+ * but avoid pairing asChild+onRemove with an <a>, since a nested <button>
401
+ * inside an anchor is invalid HTML. */
402
+ asChild?: boolean;
393
403
  }
394
404
  declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLSpanElement>>;
395
405
 
@@ -1207,7 +1217,42 @@ interface TableOfContentsProps extends React$1.HTMLAttributes<HTMLElement> {
1207
1217
  }
1208
1218
  declare const TableOfContents: React$1.ForwardRefExoticComponent<TableOfContentsProps & React$1.RefAttributes<HTMLElement>>;
1209
1219
 
1220
+ /**
1221
+ * Kbd — a single keyboard key glyph, e.g. `<Kbd>⌘</Kbd>`. Wrap several in
1222
+ * `KbdGroup` for a shortcut combo (`⌘` `K`). Gap-fill addition (not in the
1223
+ * original Figma source) — matches the shadcn/ui Kbd/KbdGroup API shape.
1224
+ */
1225
+ interface KbdProps extends React$1.HTMLAttributes<HTMLElement> {
1226
+ /** render as the single child element (Radix Slot) instead of <kbd> */
1227
+ asChild?: boolean;
1228
+ }
1229
+ declare const Kbd: React$1.ForwardRefExoticComponent<KbdProps & React$1.RefAttributes<HTMLElement>>;
1230
+ interface KbdGroupProps extends React$1.HTMLAttributes<HTMLElement> {
1231
+ }
1232
+ /** Lays out multiple `Kbd` for a shortcut combo — `<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>` */
1233
+ declare const KbdGroup: React$1.ForwardRefExoticComponent<KbdGroupProps & React$1.RefAttributes<HTMLElement>>;
1234
+
1235
+ /**
1236
+ * Empty — a placeholder for a zero-results state (an empty table, an empty
1237
+ * search, a fresh workspace with nothing in it yet). Composition-based, like
1238
+ * Card: `Empty` is an unstyled-beyond-layout root so it composes cleanly
1239
+ * inside whatever already has a border (a Table cell, a Card, a bare page
1240
+ * section) instead of forcing its own. Gap-fill addition (not in the
1241
+ * original Figma source) — matches the shadcn/ui Empty API shape.
1242
+ */
1243
+ declare const Empty: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
1244
+ declare const EmptyHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
1245
+ declare const emptyMediaVariants: (props?: ({
1246
+ variant?: "icon" | "default" | null | undefined;
1247
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1248
+ interface EmptyMediaProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyMediaVariants> {
1249
+ }
1250
+ declare const EmptyMedia: React$1.ForwardRefExoticComponent<EmptyMediaProps & React$1.RefAttributes<HTMLDivElement>>;
1251
+ declare const EmptyTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
1252
+ declare const EmptyDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
1253
+ declare const EmptyContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
1254
+
1210
1255
  /** Merges Tailwind class names, resolving conflicts (clsx + tailwind-merge). */
1211
1256
  declare function cn(...inputs: ClassValue[]): string;
1212
1257
 
1213
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, List, ListItem, type ListItemProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Metric, type MetricProps, Modal, type ModalProps, type ModalType, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, type NumberInputProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, badgeVariants, buttonVariants, cn, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };
1258
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppBar, AppBarActions, AppBarBrand, AppBarLink, type AppBarLinkProps, AppBarNav, AspectRatio, AudioPlayer, type AudioPlayerProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupProps, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CircularProgress, type CircularProgressProps, CodeBlock, type CodeBlockFile, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, EmptyTitle, Fab, type FabProps, Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadProps, Footer, FooterBottom, FooterColumn, type FooterColumnProps, FooterLink, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Image, type ImageProps, Inform, type InformProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, List, ListItem, type ListItemProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Metric, type MetricProps, Modal, type ModalProps, type ModalType, NavigationBar, type NavigationBarProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberInput, type NumberInputProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Quote, type QuoteProps, RadioGroup, RadioGroupItem, Rating, type RatingProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarProvider, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, type SpinnerProps, Stepper, type StepperProps, type StepperStep, Switch, TabBar, TabBarItem, type TabBarItemProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Textarea, type TextareaProps, Toaster, type TocItem, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, badgeVariants, buttonVariants, cn, emptyMediaVariants, fabVariants, formatBytes, informVariants, inputVariants, messageVariants, navigationMenuTriggerStyle, spinnerVariants, tagVariants, textareaVariants, toggleVariants, useAppBar, useFormField, useSidebar };