@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.
- package/dist/index.d.ts +47 -2
- package/dist/index.js +472 -380
- package/package.json +2 -2
- package/src/components/accordion.tsx +1 -1
- package/src/components/alert-dialog.tsx +2 -2
- package/src/components/app-bar.tsx +1 -1
- package/src/components/audio-player.tsx +3 -0
- package/src/components/badge.tsx +13 -4
- package/src/components/button.tsx +2 -2
- package/src/components/calendar.tsx +9 -5
- package/src/components/checkbox.tsx +1 -1
- package/src/components/circular-progress.tsx +1 -1
- package/src/components/command.tsx +4 -2
- package/src/components/context-menu.tsx +2 -2
- package/src/components/dialog.tsx +3 -3
- package/src/components/drawer.tsx +2 -2
- package/src/components/dropdown-menu.tsx +4 -2
- package/src/components/empty.tsx +76 -0
- package/src/components/fab.tsx +1 -1
- package/src/components/file-upload.tsx +1 -1
- package/src/components/hover-card.tsx +1 -1
- package/src/components/image.tsx +2 -2
- package/src/components/inform.tsx +1 -1
- package/src/components/input-group.tsx +2 -2
- package/src/components/input-otp.tsx +3 -3
- package/src/components/input.tsx +2 -2
- package/src/components/kbd.tsx +40 -0
- package/src/components/label.tsx +1 -1
- package/src/components/list.tsx +1 -1
- package/src/components/menubar.tsx +2 -2
- package/src/components/modal.tsx +2 -2
- package/src/components/navigation-menu.tsx +4 -4
- package/src/components/number-input.tsx +3 -3
- package/src/components/popover.tsx +1 -1
- package/src/components/radio-group.tsx +1 -1
- package/src/components/resizable.tsx +1 -1
- package/src/components/select.tsx +5 -3
- package/src/components/sheet.tsx +3 -3
- package/src/components/sidebar.tsx +5 -5
- package/src/components/slider.tsx +1 -1
- package/src/components/switch.tsx +1 -1
- package/src/components/tabs.tsx +1 -1
- package/src/components/tag.tsx +27 -15
- package/src/components/textarea.tsx +2 -2
- package/src/components/toggle.tsx +1 -1
- package/src/components/tooltip.tsx +1 -1
- package/src/components-behavior.test.tsx +37 -0
- package/src/index.ts +13 -0
- package/src/stories/Empty.stories.tsx +35 -0
- package/src/stories/Kbd.stories.tsx +27 -0
- 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
|
|
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 };
|