@askrjs/themes 0.0.11 → 0.0.13

package/dist/core.d.ts

@@ -1,36 +1,52 @@
 import { BlockAlign, BlockBackground, BlockDirection, BlockJustify, BlockMargin, BlockRadius, BlockRowFrom, BlockShadow, BlockSize, BlockSpace, BlockZIndex, ResponsiveValue } from "./components/_internal/block-layout.js";
 import { BlockAsChildProps, BlockDivProps, BlockElement, BlockElementProps, BlockNativeProps, BlockOwnProps, BlockProps, BlockSpanProps } from "./components/block/block.types.js";
 import { Block } from "./components/block/block.js";
+import "./components/block/index.js";
 import { BrandAsChildProps, BrandElement, BrandLabelProps, BrandMarkProps, BrandNativeProps, BrandProps } from "./components/brand/brand.types.js";
 import { Brand, BrandLabel, BrandMark } from "./components/brand/brand.js";
+import "./components/brand/index.js";
 import { ContainerProps } from "./components/container/container.types.js";
 import { Container } from "./components/container/container.js";
+import "./components/container/index.js";
 import { EmptyStateHeadingTag, EmptyStateProps } from "./components/empty-state/empty-state.types.js";
 import { EmptyState } from "./components/empty-state/empty-state.js";
+import "./components/empty-state/index.js";
 import { FooterContentProps, FooterDescriptionProps, FooterLinkProps, FooterLinksProps, FooterProps, FooterSectionProps, FooterTitleProps } from "./components/footer/footer.types.js";
 import { Footer, FooterContent, FooterDescription, FooterLink, FooterLinks, FooterSection, FooterTitle } from "./components/footer/footer.js";
+import "./components/footer/index.js";
 import { GridAlign, GridColumns, GridElement, GridProps } from "./components/grid/grid.types.js";
 import { Grid } from "./components/grid/grid.js";
+import "./components/grid/index.js";
 import { HeaderProps } from "./components/header/header.types.js";
 import { Header } from "./components/header/header.js";
+import "./components/header/index.js";
 import { MainProps } from "./components/main/main.types.js";
 import { Main } from "./components/main/main.js";
+import "./components/main/index.js";
 import { AsideProps } from "./components/aside/aside.types.js";
 import { Aside } from "./components/aside/aside.js";
+import "./components/aside/index.js";
 import { NavBrandProps, NavDropdownProps, NavGroupProps, NavbarCollapseBreakpoint, NavbarProps } from "./components/navbar/navbar.types.js";
 import { NavBrand, NavDropdown, NavGroup, Navbar } from "./components/navbar/navbar.js";
 import { NavItemAsChildProps, NavItemProps, NavLinkProps } from "./components/nav/nav.types.js";
 import { NavItem, NavLink } from "./components/nav/nav.js";
+import "./components/navbar/index.js";
 import { PageProps } from "./components/page/page.types.js";
 import { Page } from "./components/page/page.js";
+import "./components/page/index.js";
 import { PageHeaderProps } from "./components/page-header/page-header.types.js";
 import { PageHeader } from "./components/page-header/page-header.js";
+import "./components/page-header/index.js";
 import { SectionProps } from "./components/section/section.types.js";
 import { Section } from "./components/section/section.js";
+import "./components/section/index.js";
 import { SidebarButtonProps, SidebarCollapsible, SidebarPartProps, SidebarProps, SidebarSide, SidebarTooltipSide, SidebarVariant } from "./components/sidebar/sidebar.types.js";
-import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarRail, SidebarTrigger } from "./components/sidebar/sidebar.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarRail, SidebarScope, SidebarTrigger } from "./components/sidebar/sidebar.js";
+import "./components/sidebar/index.js";
 import { TextElement, TextFont, TextNumeric, TextProps, TextSize, TextTone, TextWeight, TextWrap } from "./components/text/text.types.js";
 import { Text } from "./components/text/text.js";
+import "./components/text/index.js";
 import { ToolbarProps } from "./components/toolbar/toolbar.types.js";
 import { Toolbar } from "./components/toolbar/toolbar.js";
-export { Aside, type AsideProps, Block, type BlockAlign, type BlockAsChildProps, type BlockBackground, type BlockDirection, type BlockDivProps, type BlockElement, type BlockElementProps, type BlockJustify, type BlockMargin, type BlockNativeProps, type BlockOwnProps, type BlockProps, type BlockRadius, type ResponsiveValue as BlockResponsiveValue, type BlockRowFrom, type BlockShadow, type BlockSize, type BlockSpace, type BlockSpanProps, type BlockZIndex, Brand, type BrandAsChildProps, type BrandElement, BrandLabel, type BrandLabelProps, BrandMark, type BrandMarkProps, type BrandNativeProps, type BrandProps, Container, type ContainerProps, EmptyState, type EmptyStateHeadingTag, type EmptyStateProps, Footer, FooterContent, type FooterContentProps, FooterDescription, type FooterDescriptionProps, FooterLink, type FooterLinkProps, FooterLinks, type FooterLinksProps, type FooterProps, FooterSection, type FooterSectionProps, FooterTitle, type FooterTitleProps, Grid, type GridAlign, type GridColumns, type GridElement, type GridProps, Header, type HeaderProps, Main, type MainProps, NavBrand, type NavBrandProps, NavDropdown, type NavDropdownProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, NavLink, type NavLinkProps, Navbar, type NavbarCollapseBreakpoint, type NavbarProps, Page, PageHeader, type PageHeaderProps, type PageProps, Section, type SectionProps, Sidebar, type SidebarButtonProps, type SidebarCollapsible, type SidebarContent, type SidebarFooter, type SidebarGroup, type SidebarGroupContent, type SidebarGroupLabel, type SidebarHeader, type SidebarInset, type SidebarMenu, type SidebarMenuAction, type SidebarMenuBadge, type SidebarMenuButton, type SidebarMenuItem, type SidebarPartProps, type SidebarProps, type SidebarProvider, type SidebarRail, type SidebarSide, type SidebarTooltipSide, type SidebarTrigger, type SidebarVariant, Text, type TextElement, type TextFont, type TextNumeric, type TextProps, type TextSize, type TextTone, type TextWeight, type TextWrap, Toolbar, type ToolbarProps };
+import "./components/toolbar/index.js";
+export { Aside, type AsideProps, Block, type BlockAlign, type BlockAsChildProps, type BlockBackground, type BlockDirection, type BlockDivProps, type BlockElement, type BlockElementProps, type BlockJustify, type BlockMargin, type BlockNativeProps, type BlockOwnProps, type BlockProps, type BlockRadius, type ResponsiveValue as BlockResponsiveValue, type BlockRowFrom, type BlockShadow, type BlockSize, type BlockSpace, type BlockSpanProps, type BlockZIndex, Brand, type BrandAsChildProps, type BrandElement, BrandLabel, type BrandLabelProps, BrandMark, type BrandMarkProps, type BrandNativeProps, type BrandProps, Container, type ContainerProps, EmptyState, type EmptyStateHeadingTag, type EmptyStateProps, Footer, FooterContent, type FooterContentProps, FooterDescription, type FooterDescriptionProps, FooterLink, type FooterLinkProps, FooterLinks, type FooterLinksProps, type FooterProps, FooterSection, type FooterSectionProps, FooterTitle, type FooterTitleProps, Grid, type GridAlign, type GridColumns, type GridElement, type GridProps, Header, type HeaderProps, Main, type MainProps, NavBrand, type NavBrandProps, NavDropdown, type NavDropdownProps, NavGroup, type NavGroupProps, NavItem, type NavItemAsChildProps, type NavItemProps, NavLink, type NavLinkProps, Navbar, type NavbarCollapseBreakpoint, type NavbarProps, Page, PageHeader, type PageHeaderProps, type PageProps, Section, type SectionProps, Sidebar, type SidebarButtonProps, type SidebarCollapsible, type SidebarContent, type SidebarFooter, type SidebarGroup, type SidebarGroupContent, type SidebarGroupLabel, type SidebarHeader, type SidebarInset, type SidebarMenu, type SidebarMenuAction, type SidebarMenuBadge, type SidebarMenuButton, type SidebarMenuItem, type SidebarPartProps, type SidebarProps, type SidebarRail, type SidebarScope, type SidebarSide, type SidebarTooltipSide, type SidebarTrigger, type SidebarVariant, Text, type TextElement, type TextFont, type TextNumeric, type TextProps, type TextSize, type TextTone, type TextWeight, type TextWrap, Toolbar, type ToolbarProps };

package/dist/navs.d.ts

@@ -1,3 +1,4 @@
 import { PillProps, PillsAsChildProps, PillsProps, TabProps, TabsAsChildProps, TabsProps } from "./components/nav/nav.types.js";
 import { Pill, Pills, Tab, Tabs } from "./components/nav/nav.js";
+import "./components/nav/index.js";
 export { Pill, type PillProps, Pills, type PillsAsChildProps, type PillsProps, Tab, type TabProps, Tabs, type TabsAsChildProps, type TabsProps };

package/dist/overlays.d.ts

@@ -1,3 +1,3 @@
 import { DropdownContent } from "./components/overlays/dropdown-content.js";
-import { AlertDialog, AlertDialogAction, AlertDialogActionAsChildProps, AlertDialogActionProps, AlertDialogCancel, AlertDialogCancelAsChildProps, AlertDialogCancelProps, AlertDialogContent, AlertDialogContentAsChildProps, AlertDialogContentOwnProps, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionAsChildProps, AlertDialogDescriptionProps, AlertDialogOverlay, AlertDialogOverlayAsChildProps, AlertDialogOverlayOwnProps, AlertDialogOverlayProps, AlertDialogOwnProps, AlertDialogPortal, AlertDialogPortalProps, AlertDialogProps, AlertDialogTitle, AlertDialogTitleAsChildProps, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerAsChildProps, AlertDialogTriggerProps, Dialog, DialogClose, DialogCloseAsChildProps, DialogCloseProps, DialogContent, DialogContentAsChildProps, DialogContentOwnProps, DialogContentProps, DialogDescription, DialogDescriptionAsChildProps, DialogDescriptionProps, DialogOverlay, DialogOverlayAsChildProps, DialogOverlayOwnProps, DialogOverlayProps, DialogOwnProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleAsChildProps, DialogTitleProps, DialogTrigger, DialogTriggerAsChildProps, DialogTriggerProps, Dropdown, DropdownContentAsChildProps, DropdownContentOwnProps, DropdownContentProps, DropdownGroup, DropdownGroupAsChildProps, DropdownGroupProps, DropdownItem, DropdownItemAsChildProps, DropdownItemOwnProps, DropdownItemProps, DropdownLabel, DropdownLabelAsChildProps, DropdownLabelProps, DropdownOwnProps, DropdownPortal, DropdownPortalProps, DropdownProps, DropdownSeparator, DropdownSeparatorAsChildProps, DropdownSeparatorProps, DropdownTrigger, DropdownTriggerAsChildProps, DropdownTriggerProps, Popover, PopoverClose, PopoverCloseAsChildProps, PopoverCloseProps, PopoverContent, PopoverContentAsChildProps, PopoverContentOwnProps, PopoverContentProps, PopoverOwnProps, PopoverPortal, PopoverPortalProps, PopoverProps, PopoverTrigger, PopoverTriggerAsChildProps, PopoverTriggerProps, Toast, ToastAction, ToastActionAsChildProps, ToastActionProps, ToastClose, ToastCloseAsChildProps, ToastCloseProps, ToastDescription, ToastDescriptionAsChildProps, ToastDescriptionProps, ToastOwnProps, ToastProps, ToastProvider, ToastProviderOwnProps, ToastProviderProps, ToastTitle, ToastTitleAsChildProps, ToastTitleProps, ToastViewport, ToastViewportAsChildProps, ToastViewportProps, Tooltip, TooltipContent, TooltipContentAsChildProps, TooltipContentOwnProps, TooltipContentProps, TooltipOwnProps, TooltipPortal, TooltipPortalProps, TooltipProps, TooltipTrigger, TooltipTriggerAsChildProps, TooltipTriggerProps } from "@askrjs/ui";
-export { AlertDialog, AlertDialogAction, type AlertDialogActionAsChildProps, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelAsChildProps, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentAsChildProps, type AlertDialogContentOwnProps, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionAsChildProps, type AlertDialogDescriptionProps, AlertDialogOverlay, type AlertDialogOverlayAsChildProps, type AlertDialogOverlayOwnProps, type AlertDialogOverlayProps, type AlertDialogOwnProps, AlertDialogPortal, type AlertDialogPortalProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleAsChildProps, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerAsChildProps, type AlertDialogTriggerProps, Dialog, DialogClose, type DialogCloseAsChildProps, type DialogCloseProps, DialogContent, type DialogContentAsChildProps, type DialogContentOwnProps, type DialogContentProps, DialogDescription, type DialogDescriptionAsChildProps, type DialogDescriptionProps, DialogOverlay, type DialogOverlayAsChildProps, type DialogOverlayOwnProps, type DialogOverlayProps, type DialogOwnProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleAsChildProps, type DialogTitleProps, DialogTrigger, type DialogTriggerAsChildProps, type DialogTriggerProps, Dropdown, DropdownContent, type DropdownContentAsChildProps, type DropdownContentOwnProps, type DropdownContentProps, DropdownGroup, type DropdownGroupAsChildProps, type DropdownGroupProps, DropdownItem, type DropdownItemAsChildProps, type DropdownItemOwnProps, type DropdownItemProps, DropdownLabel, type DropdownLabelAsChildProps, type DropdownLabelProps, type DropdownOwnProps, DropdownPortal, type DropdownPortalProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorAsChildProps, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerAsChildProps, type DropdownTriggerProps, Popover, PopoverClose, type PopoverCloseAsChildProps, type PopoverCloseProps, PopoverContent, type PopoverContentAsChildProps, type PopoverContentOwnProps, type PopoverContentProps, type PopoverOwnProps, PopoverPortal, type PopoverPortalProps, type PopoverProps, PopoverTrigger, type PopoverTriggerAsChildProps, type PopoverTriggerProps, Toast, ToastAction, type ToastActionAsChildProps, type ToastActionProps, ToastClose, type ToastCloseAsChildProps, type ToastCloseProps, ToastDescription, type ToastDescriptionAsChildProps, type ToastDescriptionProps, type ToastOwnProps, type ToastProps, ToastProvider, type ToastProviderOwnProps, type ToastProviderProps, ToastTitle, type ToastTitleAsChildProps, type ToastTitleProps, ToastViewport, type ToastViewportAsChildProps, type ToastViewportProps, Tooltip, TooltipContent, type TooltipContentAsChildProps, type TooltipContentOwnProps, type TooltipContentProps, type TooltipOwnProps, TooltipPortal, type TooltipPortalProps, type TooltipProps, TooltipTrigger, type TooltipTriggerAsChildProps, type TooltipTriggerProps };
+import { AlertDialog, AlertDialogAction, AlertDialogActionAsChildProps, AlertDialogActionProps, AlertDialogCancel, AlertDialogCancelAsChildProps, AlertDialogCancelProps, AlertDialogContent, AlertDialogContentAsChildProps, AlertDialogContentOwnProps, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionAsChildProps, AlertDialogDescriptionProps, AlertDialogOverlay, AlertDialogOverlayAsChildProps, AlertDialogOverlayOwnProps, AlertDialogOverlayProps, AlertDialogOwnProps, AlertDialogPortal, AlertDialogPortalProps, AlertDialogProps, AlertDialogTitle, AlertDialogTitleAsChildProps, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerAsChildProps, AlertDialogTriggerProps, Dialog, DialogClose, DialogCloseAsChildProps, DialogCloseProps, DialogContent, DialogContentAsChildProps, DialogContentOwnProps, DialogContentProps, DialogDescription, DialogDescriptionAsChildProps, DialogDescriptionProps, DialogOverlay, DialogOverlayAsChildProps, DialogOverlayOwnProps, DialogOverlayProps, DialogOwnProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleAsChildProps, DialogTitleProps, DialogTrigger, DialogTriggerAsChildProps, DialogTriggerProps, Dropdown, DropdownContentAsChildProps, DropdownContentOwnProps, DropdownContentProps, DropdownGroup, DropdownGroupAsChildProps, DropdownGroupProps, DropdownItem, DropdownItemAsChildProps, DropdownItemOwnProps, DropdownItemProps, DropdownLabel, DropdownLabelAsChildProps, DropdownLabelProps, DropdownOwnProps, DropdownPortal, DropdownPortalProps, DropdownProps, DropdownSeparator, DropdownSeparatorAsChildProps, DropdownSeparatorProps, DropdownTrigger, DropdownTriggerAsChildProps, DropdownTriggerProps, Popover, PopoverClose, PopoverCloseAsChildProps, PopoverCloseProps, PopoverContent, PopoverContentAsChildProps, PopoverContentOwnProps, PopoverContentProps, PopoverOwnProps, PopoverPortal, PopoverPortalProps, PopoverProps, PopoverTrigger, PopoverTriggerAsChildProps, PopoverTriggerProps, Toast, ToastAction, ToastActionAsChildProps, ToastActionProps, ToastClose, ToastCloseAsChildProps, ToastCloseProps, ToastDescription, ToastDescriptionAsChildProps, ToastDescriptionProps, ToastHost, ToastHostOwnProps, ToastHostProps, ToastOwnProps, ToastProps, ToastTitle, ToastTitleAsChildProps, ToastTitleProps, ToastViewport, ToastViewportAsChildProps, ToastViewportProps, Tooltip, TooltipContent, TooltipContentAsChildProps, TooltipContentOwnProps, TooltipContentProps, TooltipOwnProps, TooltipPortal, TooltipPortalProps, TooltipProps, TooltipTrigger, TooltipTriggerAsChildProps, TooltipTriggerProps } from "@askrjs/ui";
+export { AlertDialog, AlertDialogAction, type AlertDialogActionAsChildProps, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelAsChildProps, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentAsChildProps, type AlertDialogContentOwnProps, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionAsChildProps, type AlertDialogDescriptionProps, AlertDialogOverlay, type AlertDialogOverlayAsChildProps, type AlertDialogOverlayOwnProps, type AlertDialogOverlayProps, type AlertDialogOwnProps, AlertDialogPortal, type AlertDialogPortalProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleAsChildProps, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerAsChildProps, type AlertDialogTriggerProps, Dialog, DialogClose, type DialogCloseAsChildProps, type DialogCloseProps, DialogContent, type DialogContentAsChildProps, type DialogContentOwnProps, type DialogContentProps, DialogDescription, type DialogDescriptionAsChildProps, type DialogDescriptionProps, DialogOverlay, type DialogOverlayAsChildProps, type DialogOverlayOwnProps, type DialogOverlayProps, type DialogOwnProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleAsChildProps, type DialogTitleProps, DialogTrigger, type DialogTriggerAsChildProps, type DialogTriggerProps, Dropdown, DropdownContent, type DropdownContentAsChildProps, type DropdownContentOwnProps, type DropdownContentProps, DropdownGroup, type DropdownGroupAsChildProps, type DropdownGroupProps, DropdownItem, type DropdownItemAsChildProps, type DropdownItemOwnProps, type DropdownItemProps, DropdownLabel, type DropdownLabelAsChildProps, type DropdownLabelProps, type DropdownOwnProps, DropdownPortal, type DropdownPortalProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorAsChildProps, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerAsChildProps, type DropdownTriggerProps, Popover, PopoverClose, type PopoverCloseAsChildProps, type PopoverCloseProps, PopoverContent, type PopoverContentAsChildProps, type PopoverContentOwnProps, type PopoverContentProps, type PopoverOwnProps, PopoverPortal, type PopoverPortalProps, type PopoverProps, PopoverTrigger, type PopoverTriggerAsChildProps, type PopoverTriggerProps, Toast, ToastAction, type ToastActionAsChildProps, type ToastActionProps, ToastClose, type ToastCloseAsChildProps, type ToastCloseProps, ToastDescription, type ToastDescriptionAsChildProps, type ToastDescriptionProps, ToastHost, type ToastHostOwnProps, type ToastHostProps, type ToastOwnProps, type ToastProps, ToastTitle, type ToastTitleAsChildProps, type ToastTitleProps, ToastViewport, type ToastViewportAsChildProps, type ToastViewportProps, Tooltip, TooltipContent, type TooltipContentAsChildProps, type TooltipContentOwnProps, type TooltipContentProps, type TooltipOwnProps, TooltipPortal, type TooltipPortalProps, type TooltipProps, TooltipTrigger, type TooltipTriggerAsChildProps, type TooltipTriggerProps };

package/dist/overlays.js

@@ -1,4 +1,4 @@
 /* empty css                     */
 import { DropdownContent } from "./components/overlays/dropdown-content.js";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownSeparator, DropdownTrigger, Popover, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "@askrjs/ui";
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownSeparator, DropdownTrigger, Popover, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger };
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownSeparator, DropdownTrigger, Popover, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from "@askrjs/ui";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Dropdown, DropdownContent, DropdownGroup, DropdownItem, DropdownLabel, DropdownPortal, DropdownSeparator, DropdownTrigger, Popover, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Toast, ToastAction, ToastClose, ToastDescription, ToastHost, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipPortal, TooltipTrigger };

package/dist/surfaces.d.ts

@@ -1,18 +1,26 @@
 import { AlertHeadingTag, AlertProps, AlertVariant } from "./components/alert/alert.types.js";
 import { Alert } from "./components/alert/alert.js";
+import "./components/alert/index.js";
 import { AspectRatioAsChildProps, AspectRatioProps } from "./components/aspect-ratio/aspect-ratio.types.js";
 import { AspectRatio } from "./components/aspect-ratio/aspect-ratio.js";
+import "./components/aspect-ratio/index.js";
 import { BadgeAsChildProps, BadgeOwnProps, BadgeProps } from "./components/badge/badge.types.js";
 import { Badge } from "./components/badge/badge.js";
+import "./components/badge/index.js";
 import { CardActionProps, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardProps, CardTitleProps, CardVariant } from "./components/card/card.types.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/card/card.js";
+import "./components/card/index.js";
 import { SeparatorAsChildProps, SeparatorNativeProps, SeparatorOwnProps, SeparatorProps } from "./components/separator/separator.types.js";
 import { Separator } from "./components/separator/separator.js";
+import "./components/separator/index.js";
 import { SkeletonAsChildProps, SkeletonOwnProps, SkeletonProps } from "./components/skeleton/skeleton.types.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
+import "./components/skeleton/index.js";
 import { SpinnerOwnProps, SpinnerProps, SpinnerSize } from "./components/spinner/spinner.types.js";
 import { Spinner } from "./components/spinner/spinner.js";
+import "./components/spinner/index.js";
 import { StatDescriptionProps, StatLabelProps, StatProps, StatValueProps } from "./components/stat/stat.types.js";
 import { Stat, StatDescription, StatLabel, StatValue } from "./components/stat/stat.js";
+import "./components/stat/index.js";
 import { Avatar, AvatarAsChildProps, AvatarFallback, AvatarFallbackAsChildProps, AvatarFallbackOwnProps, AvatarFallbackProps, AvatarImage, AvatarImageOwnProps, AvatarImageProps, AvatarLoadingStatus, AvatarOwnProps, AvatarProps, Progress, ProgressCircle, ProgressCircleIndicator, ProgressCircleIndicatorAsChildProps, ProgressCircleIndicatorProps, ProgressCircleOwnProps, ProgressCircleProps, ProgressIndicator, ProgressIndicatorAsChildProps, ProgressIndicatorProps, ProgressOwnProps, ProgressProps, Table, TableAsChildProps, TableBody, TableBodyAsChildProps, TableBodyProps, TableCaption, TableCaptionAsChildProps, TableCaptionProps, TableCell, TableCellAsChildProps, TableCellProps, TableFoot, TableFootAsChildProps, TableFootProps, TableHead, TableHeadAsChildProps, TableHeadProps, TableHeaderCell, TableHeaderCellAsChildProps, TableHeaderCellProps, TableProps, TableRow, TableRowAsChildProps, TableRowProps } from "@askrjs/ui";
 export { Alert, type AlertHeadingTag, type AlertProps, type AlertVariant, AspectRatio, type AspectRatioAsChildProps, type AspectRatioProps, Avatar, type AvatarAsChildProps, AvatarFallback, type AvatarFallbackAsChildProps, type AvatarFallbackOwnProps, type AvatarFallbackProps, AvatarImage, type AvatarImageOwnProps, type AvatarImageProps, type AvatarLoadingStatus, type AvatarOwnProps, type AvatarProps, Badge, type BadgeAsChildProps, type BadgeOwnProps, type BadgeProps, Card, type CardAction, type CardActionProps, type CardContent, type CardContentProps, type CardDescription, type CardDescriptionProps, type CardFooter, type CardFooterProps, type CardHeader, type CardHeaderProps, type CardProps, type CardTitle, type CardTitleProps, type CardVariant, Progress, ProgressCircle, ProgressCircleIndicator, type ProgressCircleIndicatorAsChildProps, type ProgressCircleIndicatorProps, type ProgressCircleOwnProps, type ProgressCircleProps, ProgressIndicator, type ProgressIndicatorAsChildProps, type ProgressIndicatorProps, type ProgressOwnProps, type ProgressProps, Separator, type SeparatorAsChildProps, type SeparatorNativeProps, type SeparatorOwnProps, type SeparatorProps, Skeleton, type SkeletonAsChildProps, type SkeletonOwnProps, type SkeletonProps, Spinner, type SpinnerOwnProps, type SpinnerProps, type SpinnerSize, Stat, StatDescription, type StatDescriptionProps, StatLabel, type StatLabelProps, type StatProps, StatValue, type StatValueProps, Table, type TableAsChildProps, TableBody, type TableBodyAsChildProps, type TableBodyProps, TableCaption, type TableCaptionAsChildProps, type TableCaptionProps, TableCell, type TableCellAsChildProps, type TableCellProps, TableFoot, type TableFootAsChildProps, type TableFootProps, TableHead, type TableHeadAsChildProps, type TableHeadProps, TableHeaderCell, type TableHeaderCellAsChildProps, type TableHeaderCellProps, type TableProps, TableRow, type TableRowAsChildProps, type TableRowProps };

package/dist/theme.d.ts

@@ -1,2 +1,3 @@
-import { CAT_THEME_NAMES, CAT_THEME_OPTIONS, CatThemeName, DEFAULT_THEME_OPTIONS, ThemeContextValue, ThemeName, ThemeOption, ThemePicker, ThemePickerProps, ThemeProvider, ThemeProviderProps, ThemeToggle, ThemeToggleProps, ThemeToggleRenderContext, useTheme } from "./components/theme/theme.js";
-export { CAT_THEME_NAMES, CAT_THEME_OPTIONS, type CatThemeName, DEFAULT_THEME_OPTIONS, type ThemeContextValue, type ThemeName, type ThemeOption, ThemePicker, type ThemePickerProps, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, type ThemeToggleRenderContext, useTheme };
+import { CAT_THEME_NAMES, CAT_THEME_OPTIONS, CatThemeName, DEFAULT_THEME_OPTIONS, ThemeName, ThemeOption, ThemePicker, ThemePickerProps, ThemeScope, ThemeScopeProps, ThemeScopeValue, ThemeToggle, ThemeToggleProps, ThemeToggleRenderContext, theme } from "./components/theme/theme.js";
+import "./components/theme/index.js";
+export { CAT_THEME_NAMES, CAT_THEME_OPTIONS, type CatThemeName, DEFAULT_THEME_OPTIONS, type ThemeName, type ThemeOption, ThemePicker, type ThemePickerProps, ThemeScope, type ThemeScopeProps, type ThemeScopeValue, ThemeToggle, type ThemeToggleProps, type ThemeToggleRenderContext, theme };

package/dist/theme.js

@@ -1,3 +1,3 @@
 /* empty css                     */
-import { CAT_THEME_NAMES, CAT_THEME_OPTIONS, DEFAULT_THEME_OPTIONS, ThemePicker, ThemeProvider, ThemeToggle, useTheme } from "./components/theme/theme.js";
-export { CAT_THEME_NAMES, CAT_THEME_OPTIONS, DEFAULT_THEME_OPTIONS, ThemePicker, ThemeProvider, ThemeToggle, useTheme };
+import { CAT_THEME_NAMES, CAT_THEME_OPTIONS, DEFAULT_THEME_OPTIONS, ThemePicker, ThemeScope, ThemeToggle, theme } from "./components/theme/theme.js";
+export { CAT_THEME_NAMES, CAT_THEME_OPTIONS, DEFAULT_THEME_OPTIONS, ThemePicker, ThemeScope, ThemeToggle, theme };

package/dist/themes/default/index.css

@@ -1585,7 +1585,7 @@
   border-inline-end: 0;
 }
 
-:where([data-slot="sidebar-provider"]) {
+:where([data-slot="sidebar-scope"]) {
   background: var(--ak-color-bg);
   min-block-size: 100svh;
   inline-size: 100%;
@@ -4293,7 +4293,7 @@
   background: none;
 }
 
-:where([data-slot="theme-provider"]) {
+:where([data-slot="theme-scope"]) {
   min-block-size: 100vh;
   color: var(--ak-color-text);
   background: var(--ak-color-bg);
@@ -5013,7 +5013,7 @@
   }
 }
 
-:where([data-slot="toast-provider"]) {
+:where([data-slot="toast-host"]) {
   display: contents;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "Default theme tokens, styles, and component presets for Askr apps.",
   "keywords": [
     "askr",
@@ -19,7 +19,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/askrjs/askr-themes.git"
+    "url": "git+https://github.com/askrjs/askr-themes.git"
   },
   "files": [
     "dist",
@@ -34,9 +34,18 @@
     "**/*.css"
   ],
   "exports": {
-    ".": "./src/index.css",
-    "./default": "./src/themes/default/index.css",
-    "./presets": "./src/themes/presets/index.css",
+    ".": {
+      "types": "./src/css.d.ts",
+      "default": "./src/index.css"
+    },
+    "./default": {
+      "types": "./src/css.d.ts",
+      "default": "./src/themes/default/index.css"
+    },
+    "./presets": {
+      "types": "./src/css.d.ts",
+      "default": "./src/themes/presets/index.css"
+    },
     "./components": {
       "types": "./dist/components.d.ts",
       "import": "./dist/components.js"
@@ -281,8 +290,15 @@
       "types": "./dist/components.d.ts",
       "import": "./dist/components.js"
     },
-    "./default/tokens.css": "./src/themes/default/tokens.css",
-    "./templates/*": "./templates/*"
+    "./default/tokens.css": {
+      "types": "./src/css.d.ts",
+      "default": "./src/themes/default/tokens.css"
+    },
+    "./templates/*": {
+      "types": "./src/css.d.ts",
+      "default": "./templates/*"
+    },
+    "./package.json": "./package.json"
   },
   "publishConfig": {
     "access": "public"
@@ -299,28 +315,35 @@
     "test:unit": "vp test run -c vitest.test.unit.config.ts",
     "test:jsdom": "cross-env NODE_ENV=production vp test run -c vitest.test.jsdom.config.ts",
     "test:browser": "vp test run -c vitest.test.browser.config.ts --mode production",
+    "test:publint": "publint",
+    "test:installed": "node tests/installed-types.js",
     "fmt": "vp fmt .",
     "lint": "vp lint .",
+    "typecheck": "tsc -p tsconfig.pack.json --noEmit",
     "build": "vp pack",
-    "prepublishOnly": "npm run build",
+    "pack:check": "node tests/package-artifacts.js",
+    "check": "npm run lint && npm run typecheck && npm test && npm run build && npm run test:installed && npm run test:publint && npm run pack:check",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm run check",
     "test:checks": "vp test run -c vitest.test.checks.config.ts"
   },
   "devDependencies": {
-    "@askrjs/askr": ">=0.0.1 <0.1.0",
-    "@askrjs/ui": ">=0.0.1 <0.1.0",
-    "@askrjs/vite": ">=0.0.1 <0.1.0",
-    "@tsdown/css": "0.22.3",
+    "@askrjs/askr": ">=0.0.52 <0.1.0",
+    "@askrjs/ui": ">=0.0.12 <0.1.0",
+    "@askrjs/vite": ">=0.0.5 <0.1.0",
+    "@tsdown/css": "0.22.8",
     "@types/node": "^26.0.0",
-    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/browser-playwright": "4.1.10",
     "cross-env": "^10.1.0",
     "jsdom": "^29.1.1",
     "playwright": "^1.61.0",
+    "publint": "^0.3.21",
     "typescript": "^6.0.3",
-    "vite-plus": "^0.2.1"
+    "vite-plus": "^0.2.4"
   },
   "peerDependencies": {
-    "@askrjs/askr": ">=0.0.1 <0.1.0",
-    "@askrjs/ui": ">=0.0.10 <0.1.0"
+    "@askrjs/askr": ">=0.0.52 <0.1.0",
+    "@askrjs/ui": ">=0.0.12 <0.1.0"
   },
   "engines": {
     "node": ">=18"

package/src/components/_internal/jsx.ts

@@ -1,4 +1,15 @@
 import type { JSXElement } from "@askrjs/askr/foundations";
+import { jsx } from "@askrjs/askr/jsx-runtime";
+
+const renderIntrinsicElement = jsx as (type: string, props: Record<string, unknown>) => JSX.Element;
+
+export function intrinsicElement(
+  type: string,
+  props: Record<string, unknown>,
+  children: unknown,
+): JSX.Element {
+  return renderIntrinsicElement(type, { ...props, children });
+}
 
 export function isJsxElement(value: unknown): value is JSXElement {
   return typeof value === "object" && value !== null && "$$typeof" in value && "props" in value;

package/src/components/alert/alert.tsx

@@ -43,7 +43,7 @@ export function Alert(props: AlertProps): JSX.Element {
       data-dismissible={shouldRenderDismiss ? "true" : undefined}
       data-slot="alert"
       data-variant={hasVariant ? variant : undefined}
-      role={resolvedRole}
+      role={resolvedRole as string}
     >
       {icon !== undefined ? (
         <div aria-hidden="true" class="alert-icon" data-slot="alert-icon">

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -2,6 +2,7 @@ import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "../_internal/merge-props";
 import { mergeLayoutStyles } from "../_internal/block-layout";
 import { styleDeclarationsToClass } from "../_internal/style";
+import { intrinsicElement } from "../_internal/jsx";
 import type { AspectRatioAsChildProps, AspectRatioProps } from "./aspect-ratio.types";
 
 export function AspectRatio(props: AspectRatioProps): JSX.Element;
@@ -30,5 +31,5 @@ export function AspectRatio(props: AspectRatioProps | AspectRatioAsChildProps) {
     return <Slot asChild {...finalProps} children={children} />;
   }
 
-  return <div {...finalProps}>{children}</div>;
+  return intrinsicElement("div", finalProps, children);
 }

package/src/components/badge/badge.tsx

@@ -1,6 +1,7 @@
 import { Slot } from "@askrjs/askr/foundations";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import type { BadgeAsChildProps, BadgeProps } from "./badge.types";
 
 function normalizeBadgeVariant(variant: BadgeProps["variant"] | undefined) {
@@ -23,5 +24,5 @@ export function Badge(props: BadgeProps | BadgeAsChildProps) {
     return <Slot asChild {...finalProps} children={children} />;
   }
 
-  return <span {...finalProps}>{children}</span>;
+  return intrinsicElement("span", finalProps, children);
 }

package/src/components/block/block.tsx

@@ -6,6 +6,7 @@ import {
   splitBlockLayoutProps,
 } from "../_internal/block-layout";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import { styleDeclarationsToClass } from "../_internal/style";
 import type { BlockAsChildProps, BlockNativeProps } from "./block.types";
 
@@ -50,6 +51,5 @@ export function Block(props: BlockNativeProps | BlockAsChildProps) {
     return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   }
 
-  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
-  return <Element {...finalProps}>{children}</Element>;
+  return intrinsicElement(as ?? DEFAULT_ELEMENT, finalProps, children);
 }

package/src/components/brand/brand.tsx

@@ -1,6 +1,7 @@
 import { Slot } from "@askrjs/askr/foundations";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import type {
   BrandAsChildProps,
   BrandLabelProps,
@@ -15,7 +16,6 @@ export function Brand<TElement extends "div" | "a" | "span" = "div">(
   props: BrandProps<TElement>,
 ): JSX.Element {
   const {
-    as,
     asChild,
     children,
     class: classProp,
@@ -23,6 +23,7 @@ export function Brand<TElement extends "div" | "a" | "span" = "div">(
     ref,
     ...rest
   } = props as BrandNativeProps | BrandAsChildProps;
+  const as = "as" in props ? props.as : undefined;
 
   const finalProps = mergeProps(rest, {
     ref,
@@ -34,8 +35,7 @@ export function Brand<TElement extends "div" | "a" | "span" = "div">(
     return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   }
 
-  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
-  return <Element {...finalProps}>{children}</Element>;
+  return intrinsicElement(as ?? DEFAULT_ELEMENT, finalProps, children);
 }
 
 export function BrandMark(props: BrandMarkProps): JSX.Element {

package/src/components/button-group/button-group.tsx

@@ -24,7 +24,7 @@ export function ButtonGroup(props: ButtonGroupProps): JSX.Element {
       data-attached={attached ? "true" : "false"}
       data-orientation={orientation}
       data-slot="button-group"
-      role={role ?? "group"}
+      role={(role ?? "group") as string}
     >
       {children}
     </div>

package/src/components/catalog.tsx

@@ -5,6 +5,8 @@ import { Block } from "./block";
 import { classes } from "./_internal/classes";
 import { mergeProps } from "./_internal/merge-props";
 
+const CatalogDialogContent = DialogContent as (props: Record<string, unknown>) => JSX.Element;
+
 type CatalogElement = keyof JSX.IntrinsicElements;
 
 export type CatalogComponentProps = Record<string, unknown> & {
@@ -647,7 +649,7 @@ export function SheetContent(
   },
 ): JSX.Element {
   const { side = "right", ...rest } = props;
-  return <DialogContent {...rest} data-side={side} data-slot="sheet-content" />;
+  return <CatalogDialogContent {...rest} data-side={side} data-slot="sheet-content" />;
 }
 
 export function SheetHeader(props: CatalogComponentProps): JSX.Element {

package/src/components/grid/grid.tsx

@@ -1,6 +1,7 @@
 import { classes } from "../_internal/classes";
 import { mergeLayoutStyles } from "../_internal/block-layout";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import { styleDeclarationsToClass } from "../_internal/style";
 import type { BlockSpace, LayoutBreakpoint, ResponsiveValue } from "../_internal/block-layout";
 import type { GridAlign, GridColumns, GridElement, GridProps } from "./grid.types";
@@ -108,6 +109,5 @@ export function Grid<TElement extends GridElement = "div">(
     "data-slot": "grid",
   });
 
-  const Element = (as ?? DEFAULT_ELEMENT) as keyof JSX.IntrinsicElements;
-  return <Element {...finalProps}>{children}</Element>;
+  return intrinsicElement(as ?? DEFAULT_ELEMENT, finalProps, children);
 }

package/src/components/input-group/input-group.tsx

@@ -1,6 +1,7 @@
 import { Slot } from "@askrjs/askr/foundations";
 import { mergeProps } from "@askrjs/askr/foundations/utilities";
 import { classes } from "../_internal/classes";
+import { intrinsicElement } from "../_internal/jsx";
 import type {
   InputGroupProps,
   InputGroupTextAsChildProps,
@@ -30,7 +31,7 @@ export function InputGroup(props: InputGroupProps): JSX.Element {
       data-attached={attached ? "true" : "false"}
       data-orientation={orientation}
       data-slot="input-group"
-      role={role ?? "group"}
+      role={(role ?? "group") as string}
     >
       {children}
     </div>
@@ -53,5 +54,5 @@ export function InputGroupText(
     return <Slot asChild {...finalProps} children={children} />;
   }
 
-  return <span {...finalProps}>{children}</span>;
+  return intrinsicElement("span", finalProps, children);
 }

package/src/components/nav/nav.tsx

@@ -3,6 +3,7 @@ import { currentRoute, Link, navigate } from "@askrjs/askr/router";
 import { Block } from "../block";
 import { classes } from "../_internal/classes";
 import { mergeProps } from "../_internal/merge-props";
+import { intrinsicElement } from "../_internal/jsx";
 import { resolvePathname } from "../_internal/pathname";
 import type {
   NavItemAsChildProps,
@@ -16,6 +17,8 @@ import type {
   TabsProps,
 } from "./nav.types";
 
+const LayoutBlock = Block as (props: Record<string, unknown>) => JSX.Element;
+
 function normalizePathname(pathname: string): string {
   return pathname.endsWith("/") && pathname !== "/" ? pathname.slice(0, -1) : pathname;
 }
@@ -87,7 +90,7 @@ function renderNavSet(
     return <Slot asChild {...finalProps} children={children as JSX.Element} />;
   }
 
-  return <nav {...finalProps}>{children}</nav>;
+  return intrinsicElement("nav", finalProps, children);
 }
 
 function renderRoutedLink(
@@ -98,7 +101,8 @@ function renderRoutedLink(
   const {
     active,
     children,
-    href,
+    href: suppliedHref,
+    to,
     onClick,
     ref,
     class: className,
@@ -106,6 +110,10 @@ function renderRoutedLink(
     target,
     ...rest
   } = props as NavLinkProps & { onClick?: (event: MouseEvent) => void };
+  const href = to?.href ?? suppliedHref;
+  if (!href) {
+    throw new Error("Nav link requires href or to.");
+  }
   const inheritedSlot =
     options.inheritSlot && typeof (rest as Record<string, unknown>)["data-slot"] === "string"
       ? String((rest as Record<string, unknown>)["data-slot"])
@@ -130,12 +138,10 @@ function renderRoutedLink(
     : {
         "data-active": undefined,
       };
-  const useRouterLink = targetPathname !== null && !target && typeof onClick !== "function";
-  const childProps = {
-    ...childRest,
-    href,
-    target,
-  };
+  const rendersRouterLink = targetPathname !== null && !target && typeof onClick !== "function";
+  const childProps: NavLinkProps = to
+    ? ({ ...childRest, to, target } as NavLinkProps)
+    : ({ ...childRest, href, target } as NavLinkProps);
   const handleClick = (event: MouseEvent) => {
     onClick?.(event);
 
@@ -148,25 +154,25 @@ function renderRoutedLink(
   };
 
   return (
-    <Block
+    <LayoutBlock
       asChild
       paddingX="sm"
       paddingY="xs"
       radius={resolvedSlot === "pill" ? "round" : "md"}
       background={isActive && options.activeBackground ? "selected" : undefined}
       ref={ref}
-      class={classes(options.className, inheritedNavClass, className)}
+      className={classes(options.className, inheritedNavClass, className)}
       data-slot={resolvedSlot}
       {...activeProps}
     >
-      {useRouterLink ? (
+      {rendersRouterLink ? (
         <Link {...childProps}>{children}</Link>
       ) : (
-        <a {...childProps} onClick={handleClick}>
+        <a {...childRest} href={href} target={target} onClick={handleClick}>
           {children}
         </a>
       )}
-    </Block>
+    </LayoutBlock>
   );
 }
 
@@ -206,7 +212,7 @@ export function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element
 
   if (asChild) {
     return (
-      <Block
+      <LayoutBlock
         asChild
         paddingX="sm"
         paddingY="xs"
@@ -214,17 +220,17 @@ export function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element
         background={active ? "selected" : undefined}
         {...rest}
         ref={ref}
-        class={className}
+        className={className}
         data-active={active ? "true" : undefined}
         data-slot="nav-item"
       >
         {children}
-      </Block>
+      </LayoutBlock>
     );
   }
 
   return (
-    <Block
+    <LayoutBlock
       as="a"
       paddingX="sm"
       paddingY="xs"
@@ -232,12 +238,12 @@ export function NavItem(props: NavItemProps | NavItemAsChildProps): JSX.Element
       background={active ? "selected" : undefined}
       {...rest}
       ref={ref}
-      class={className}
+      className={className}
       data-active={active ? "true" : undefined}
       data-slot="nav-item"
     >
       {children}
-    </Block>
+    </LayoutBlock>
   );
 }