boltdocs 2.4.1 → 2.5.0

package/src/client/components/primitives/breadcrumbs.tsx

@@ -8,7 +8,7 @@ import { ChevronRight } from 'lucide-react'
 import { cn } from '../../utils/cn'
 import type { ComponentBase } from './types'
 
-export const BreadcrumbsRoot = ({
+export const Breadcrumbs = ({
   children,
   className,
   ...props
@@ -26,7 +26,7 @@ export const BreadcrumbsRoot = ({
   )
 }
 
-export const BreadcrumbsItem = ({
+const BreadcrumbsItem = ({
   children,
   className,
   ...props
@@ -41,7 +41,7 @@ export const BreadcrumbsItem = ({
   )
 }
 
-export const BreadcrumbsLink = ({
+const BreadcrumbsLink = ({
   children,
   href,
   className,
@@ -62,7 +62,7 @@ export const BreadcrumbsLink = ({
   )
 }
 
-export const BreadcrumbsSeparator = ({ className }: ComponentBase) => {
+const BreadcrumbsSeparator = ({ className }: ComponentBase) => {
   return (
     <ChevronRight
       size={14}
@@ -71,9 +71,9 @@ export const BreadcrumbsSeparator = ({ className }: ComponentBase) => {
   )
 }
 
-export default {
-  BreadcrumbsRoot,
-  BreadcrumbsItem,
-  BreadcrumbsLink,
-  BreadcrumbsSeparator,
-}
+
+
+Breadcrumbs.Root = Breadcrumbs
+Breadcrumbs.Item = BreadcrumbsItem
+Breadcrumbs.Link = BreadcrumbsLink
+Breadcrumbs.Separator = BreadcrumbsSeparator

package/src/client/components/primitives/index.ts

@@ -1,18 +1,19 @@
-export * from './navbar'
-export * from './navigation-menu'
-export * from './search-dialog'
-export * from './on-this-page'
-export * from './page-nav'
-export * from './tabs'
-export * from './sidebar'
-export * from './breadcrumbs'
-export * from './button'
-export * from './button-group'
-export * from './menu'
-export * from './popover'
-export * from './tooltip'
-export * from './link'
-export * from './skeleton'
-export { Separator, ToggleButton } from 'react-aria-components'
+export * as Navbar from './navbar'
+export * as NavigationMenu from './navigation-menu'
+export * as SearchDialog from './search-dialog'
+export * as OnThisPage from './on-this-page'
+export * as PageNav from './page-nav'
+export * as Tabs from './tabs'
+export * as Sidebar from './sidebar'
+export * as Breadcrumbs from './breadcrumbs'
+export { Button } from './button'
+export { ButtonGroup } from './button-group'
+export { Menu } from './menu'
+export { Popover } from './popover'
+export { Tooltip } from './tooltip'
+export { Link } from './link'
+export { Skeleton } from './skeleton'
+export { Separator } from 'react-aria-components'
+export { ToggleButton } from 'react-aria-components'
 
 export { cn } from '../../utils/cn'

package/src/client/components/primitives/menu.tsx

@@ -13,7 +13,7 @@ export interface MenuTriggerProps extends RAC.MenuTriggerProps {
   placement?: PopoverProps['placement']
 }
 
-export function MenuTrigger(props: MenuTriggerProps) {
+function MenuTrigger(props: MenuTriggerProps) {
   const [trigger, menu] = (
     React.Children.toArray(props.children) as React.ReactElement[]
   ).slice(0, 2)
@@ -30,7 +30,7 @@ export function MenuTrigger(props: MenuTriggerProps) {
 /**
  * SubmenuTrigger for nested menus.
  */
-export function SubmenuTrigger(props: RAC.SubmenuTriggerProps) {
+function SubmenuTrigger(props: RAC.SubmenuTriggerProps) {
   const [trigger, menu] = (
     React.Children.toArray(props.children) as React.ReactElement[]
   ).slice(0, 2)
@@ -64,7 +64,7 @@ export function Menu<T extends object>(props: RAC.MenuProps<T>) {
 /**
  * MenuItem with support for selection states and submenus.
  */
-export function MenuItem(props: RAC.MenuItemProps) {
+function MenuItem(props: RAC.MenuItemProps) {
   const textValue =
     props.textValue ||
     (typeof props.children === 'string' ? props.children : undefined)
@@ -123,7 +123,7 @@ export interface MenuSectionProps<T> extends RAC.MenuSectionProps<T> {
   title?: string
 }
 
-export function MenuSection<T extends object>({
+function MenuSection<T extends object>({
   title,
   ...props
 }: MenuSectionProps<T>) {
@@ -145,7 +145,7 @@ export function MenuSection<T extends object>({
 /**
  * MenuSeparator for visual division.
  */
-export function MenuSeparator(props: RAC.SeparatorProps) {
+function MenuSeparator(props: RAC.SeparatorProps) {
   return (
     <RAC.Separator
       {...props}
@@ -154,12 +154,9 @@ export function MenuSeparator(props: RAC.SeparatorProps) {
   )
 }
 
-// Default export for convenience
-export default {
-  Root: Menu,
-  Item: MenuItem,
-  Trigger: MenuTrigger,
-  SubTrigger: SubmenuTrigger,
-  Section: MenuSection,
-  Separator: MenuSeparator,
-}
+Menu.Root = Menu
+Menu.Item = MenuItem
+Menu.Trigger = MenuTrigger
+Menu.SubTrigger = SubmenuTrigger
+Menu.Section = MenuSection
+Menu.Separator = MenuSeparator

package/src/client/components/primitives/navbar.tsx

@@ -35,7 +35,7 @@ export interface NavbarSocialsProps extends ComponentBase {
   link: string
 }
 
-export const NavbarRoot = ({
+export const Navbar = ({
   children,
   className,
   ...props
@@ -53,7 +53,7 @@ export const NavbarRoot = ({
   )
 }
 
-export const NavbarContent = ({ children, className }: ComponentBase) => {
+const NavbarContent = ({ children, className }: ComponentBase) => {
   return (
     <div
       className={cn(
@@ -66,7 +66,7 @@ export const NavbarContent = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const NavbarLeft = ({ children, className }: ComponentBase) => {
+const NavbarLeft = ({ children, className }: ComponentBase) => {
   return (
     <div
       className={cn(
@@ -79,7 +79,7 @@ export const NavbarLeft = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const NavbarRight = ({ children, className }: ComponentBase) => {
+const NavbarRight = ({ children, className }: ComponentBase) => {
   return (
     <div
       className={cn(
@@ -92,7 +92,7 @@ export const NavbarRight = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const NavbarCenter = ({ children, className }: ComponentBase) => {
+const NavbarCenter = ({ children, className }: ComponentBase) => {
   return (
     <div
       className={cn(
@@ -105,7 +105,7 @@ export const NavbarCenter = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const NavbarLogo = ({
+const NavbarLogo = ({
   src,
   alt,
   width = 24,
@@ -130,7 +130,7 @@ export const NavbarLogo = ({
   )
 }
 
-export const NavbarTitle = ({ children, className }: ComponentBase) => {
+const NavbarTitle = ({ children, className }: ComponentBase) => {
   return (
     <Link href="/">
       <span
@@ -145,7 +145,7 @@ export const NavbarTitle = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const NavbarLinks = ({ children, className }: ComponentBase) => {
+const NavbarLinks = ({ children, className }: ComponentBase) => {
   return (
     <nav
       className={cn(
@@ -158,7 +158,7 @@ export const NavbarLinks = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const NavbarLink = ({
+const NavbarLink = ({
   label,
   href,
   active,
@@ -188,7 +188,7 @@ export const NavbarLink = ({
   )
 }
 
-export const NavbarSearchTrigger = ({
+const NavbarSearchTrigger = ({
   className,
   onPress,
 }: NavbarSearchTriggerProps) => {
@@ -226,7 +226,7 @@ export const NavbarSearchTrigger = ({
   )
 }
 
-export const NavbarTheme = ({
+const NavbarTheme = ({
   className,
   theme,
   onThemeChange,
@@ -248,14 +248,14 @@ export const NavbarTheme = ({
   )
 }
 
-export const Icon = ({ name }: { name: BoltdocsSocialLink['icon'] }) => {
+const Icon = ({ name }: { name: BoltdocsSocialLink['icon'] }) => {
   if (name === 'github') return <IconsSocials.Github />
   if (name === 'discord') return <IconsSocials.Discord />
   if (name === 'x') return <IconsSocials.XSocial />
   if (name === 'bluesky') return <IconsSocials.Bluesky />
 }
 
-export const NavbarSocials = ({
+const NavbarSocials = ({
   icon,
   link,
   className,
@@ -277,7 +277,7 @@ export const NavbarSocials = ({
   )
 }
 
-export const NavbarSplit = ({ className }: ComponentBase) => {
+const NavbarSplit = ({ className }: ComponentBase) => {
   return (
     <Separator
       orientation="vertical"
@@ -286,18 +286,18 @@ export const NavbarSplit = ({ className }: ComponentBase) => {
   )
 }
 
-export default {
-  NavbarRoot,
-  NavbarLeft,
-  NavbarRight,
-  NavbarCenter,
-  NavbarLogo,
-  Title: NavbarTitle,
-  Links: NavbarLinks,
-  Link: NavbarLink,
-  SearchTrigger: NavbarSearchTrigger,
-  Theme: NavbarTheme,
-  Socials: NavbarSocials,
-  Split: NavbarSplit,
-  Content: NavbarContent,
-}
+Navbar.Root = Navbar
+Navbar.Left = NavbarLeft
+Navbar.Right = NavbarRight
+Navbar.Center = NavbarCenter
+Navbar.Logo = NavbarLogo
+Navbar.Title = NavbarTitle
+Navbar.Links = NavbarLinks
+Navbar.Link = NavbarLink
+Navbar.SearchTrigger = NavbarSearchTrigger
+Navbar.Theme = NavbarTheme
+Navbar.Socials = NavbarSocials
+Navbar.Split = NavbarSplit
+Navbar.Content = NavbarContent
+
+export default Navbar

package/src/client/components/primitives/navigation-menu.tsx

@@ -13,8 +13,8 @@ export interface NavigationMenuLinkProps
   label: string
   description?: string
   children?:
-    | React.ReactNode
-    | ((opts: RAC.MenuItemRenderProps) => React.ReactNode)
+  | React.ReactNode
+  | ((opts: RAC.MenuItemRenderProps) => React.ReactNode)
 }
 
 export type NavigationMenuComponent = CompoundComponent<
@@ -26,7 +26,7 @@ export type NavigationMenuComponent = CompoundComponent<
   }
 >
 
-const NavigationMenuRoot = ({
+export const NavigationMenu = ({
   children,
   className,
   ...props
@@ -108,9 +108,7 @@ const NavigationMenuLink = ({
   )
 }
 
-export default {
-  NavigationMenuRoot,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuLink,
-}
+NavigationMenu.Root = NavigationMenu
+NavigationMenu.List = NavigationMenuList
+NavigationMenu.Item = NavigationMenuItem
+NavigationMenu.Link = NavigationMenuLink

package/src/client/components/primitives/on-this-page.tsx

@@ -10,8 +10,8 @@ import React, {
   type RefObject,
 } from 'react'
 import scrollIntoView from 'scroll-into-view-if-needed'
-import { cn } from '../../utils/cn'
-import { useOnChange } from '../../utils/use-on-change'
+import { cn } from '@client/utils/cn'
+import { useOnChange } from '@client/utils/use-on-change'
 import type { ComponentBase } from './types'
 import { getItemId, Observer } from './helpers/observer'
 
@@ -150,7 +150,7 @@ export function AnchorProvider({
   return <ItemsContext.Provider value={items}>{children}</ItemsContext.Provider>
 }
 
-export const OnThisPageRoot = ({ children, className }: ComponentBase) => {
+export const OnThisPage = ({ children, className }: ComponentBase) => {
   return (
     <nav
       className={cn(
@@ -165,7 +165,7 @@ export const OnThisPageRoot = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const OnThisPageHeader = ({
+const OnThisPageHeader = ({
   children,
   className,
   ...props
@@ -183,7 +183,7 @@ export const OnThisPageHeader = ({
   )
 }
 
-export const OnThisPageContent = ({
+const OnThisPageContent = ({
   children,
   className,
   ref,
@@ -206,7 +206,7 @@ export const OnThisPageContent = ({
 
 OnThisPageContent.displayName = 'OnThisPageContent'
 
-export const OnThisPageList = ({ children, className }: ComponentBase) => {
+const OnThisPageList = ({ children, className }: ComponentBase) => {
   return (
     <ul
       className={cn(
@@ -219,7 +219,7 @@ export const OnThisPageList = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const OnThisPageItem = ({
+const OnThisPageItem = ({
   level,
   children,
   className,
@@ -227,7 +227,7 @@ export const OnThisPageItem = ({
   return <li className={cn(level === 3 && 'pl-3', className)}>{children}</li>
 }
 
-export const OnThisPageLink = ({
+const OnThisPageLink = ({
   children,
   href,
   active,
@@ -281,7 +281,7 @@ export const OnThisPageLink = ({
   )
 }
 
-export const OnThisPageIndicator = ({
+const OnThisPageIndicator = ({
   style,
   className,
 }: OnThisPageIndicatorProps) => {
@@ -296,12 +296,10 @@ export const OnThisPageIndicator = ({
   )
 }
 
-export default {
-  OnThisPageRoot,
-  OnThisPageHeader,
-  OnThisPageContent,
-  OnThisPageList,
-  OnThisPageItem,
-  OnThisPageLink,
-  OnThisPageIndicator,
-}
+OnThisPage.Root = OnThisPage
+OnThisPage.Header = OnThisPageHeader
+OnThisPage.Content = OnThisPageContent
+OnThisPage.List = OnThisPageList
+OnThisPage.Item = OnThisPageItem
+OnThisPage.Link = OnThisPageLink
+OnThisPage.Indicator = OnThisPageIndicator

package/src/client/components/primitives/page-nav.tsx

@@ -8,7 +8,7 @@ export interface PageNavProps extends ComponentBase {
   direction: 'prev' | 'next'
 }
 
-export const PageNavRoot = ({ children, className }: ComponentBase) => {
+export const PageNav = ({ children, className }: ComponentBase) => {
   return (
     <nav
       className={cn(
@@ -21,7 +21,7 @@ export const PageNavRoot = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const PageNavLink = ({
+const PageNavLink = ({
   children,
   to,
   direction,
@@ -50,7 +50,7 @@ export const PageNavLink = ({
   )
 }
 
-export const PageNavTitle = ({ children, className }: ComponentBase) => {
+const PageNavTitle = ({ children, className }: ComponentBase) => {
   return (
     <span
       className={cn(
@@ -63,7 +63,7 @@ export const PageNavTitle = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const PageNavDescription = ({ children, className }: ComponentBase) => {
+const PageNavDescription = ({ children, className }: ComponentBase) => {
   return (
     <span
       className={cn('text-base font-bold text-text-main truncate', className)}
@@ -73,15 +73,12 @@ export const PageNavDescription = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const PageNavIcon = ({ children }: ComponentBase) => {
+const PageNavIcon = ({ children }: ComponentBase) => {
   return <>{children}</>
 }
 
-export default {
-  PageNavRoot,
-  PageNavLink: Object.assign(PageNavLink, {
-    Title: PageNavTitle,
-    Description: PageNavDescription,
-    Icon: PageNavIcon,
-  }),
-}
+PageNav.Root = PageNav
+PageNav.Link = PageNavLink
+PageNav.Title = PageNavTitle
+PageNav.Description = PageNavDescription
+PageNav.Icon = PageNavIcon

package/src/client/components/primitives/search-dialog.tsx

@@ -19,7 +19,7 @@ export interface SearchDialogItemIconProps {
   className?: string
 }
 
-export const SearchDialogRoot = ({
+export const SearchDialog = ({
   children,
   isOpen,
   onOpenChange,
@@ -50,7 +50,7 @@ export const SearchDialogRoot = ({
   )
 }
 
-export const SearchDialogAutocomplete = <T extends object>({
+const SearchDialogAutocomplete = <T extends object>({
   children,
   className,
   onSelectionChange,
@@ -73,7 +73,7 @@ export const SearchDialogAutocomplete = <T extends object>({
   )
 }
 
-export const SearchDialogInput = ({
+const SearchDialogInput = ({
   className,
   ...props
 }: RAC.InputProps & { className?: string }) => {
@@ -98,7 +98,7 @@ export const SearchDialogInput = ({
   )
 }
 
-export const SearchDialogList = <T extends object>({
+const SearchDialogList = <T extends object>({
   children,
   className,
   ...props
@@ -113,7 +113,7 @@ export const SearchDialogList = <T extends object>({
   )
 }
 
-export const SearchDialogItemRoot = ({
+const SearchDialogItemRoot = ({
   children,
   className,
   ...props
@@ -142,7 +142,7 @@ export const SearchDialogItemRoot = ({
   )
 }
 
-export const SearchDialogItemIcon = ({
+const SearchDialogItemIcon = ({
   isHeading,
   className,
 }: SearchDialogItemIconProps) => {
@@ -153,7 +153,7 @@ export const SearchDialogItemIcon = ({
   )
 }
 
-export const SearchDialogItemTitle = ({
+const SearchDialogItemTitle = ({
   children,
   className,
 }: ComponentBase) => {
@@ -166,7 +166,7 @@ export const SearchDialogItemTitle = ({
   )
 }
 
-export const SearchDialogItemBio = ({ children, className }: ComponentBase) => {
+const SearchDialogItemBio = ({ children, className }: ComponentBase) => {
   return (
     <span
       className={cn(
@@ -179,14 +179,12 @@ export const SearchDialogItemBio = ({ children, className }: ComponentBase) => {
   )
 }
 
-export default {
-  Root: SearchDialogRoot,
-  Autocomplete: SearchDialogAutocomplete,
-  Input: SearchDialogInput,
-  List: SearchDialogList,
-  Item: Object.assign(SearchDialogItemRoot, {
-    Icon: SearchDialogItemIcon,
-    Title: SearchDialogItemTitle,
-    Bio: SearchDialogItemBio,
-  }),
-}
+SearchDialog.Root = SearchDialog
+SearchDialog.Autocomplete = SearchDialogAutocomplete
+SearchDialog.Input = SearchDialogInput
+SearchDialog.List = SearchDialogList
+SearchDialog.Item = Object.assign(SearchDialogItemRoot, {
+  Icon: SearchDialogItemIcon,
+  Title: SearchDialogItemTitle,
+  Bio: SearchDialogItemBio,
+})

package/src/client/components/primitives/sidebar.tsx

@@ -53,7 +53,7 @@ const Badge = ({ badge }: { badge: ComponentRoute['badge'] }) => {
   )
 }
 
-export const SidebarRoot = ({ children, className }: ComponentBase) => {
+export const Sidebar = ({ children, className }: ComponentBase) => {
   return (
     <aside
       className={cn(
@@ -69,7 +69,7 @@ export const SidebarRoot = ({ children, className }: ComponentBase) => {
   )
 }
 
-export const SidebarGroup = ({
+const SidebarGroup = ({
   children,
   title,
   icon: Icon,
@@ -106,11 +106,11 @@ export const SidebarGroup = ({
   )
 }
 
-export const SidebarGroupItem = ({ children, className }: ComponentBase) => {
+const SidebarGroupItem = ({ children, className }: ComponentBase) => {
   return <div className={cn(className)}>{children}</div>
 }
 
-export const SidebarLink = ({
+const SidebarLink = ({
   label,
   href,
   active,
@@ -147,9 +147,7 @@ export const SidebarLink = ({
   )
 }
 
-export default {
-  SidebarRoot,
-  SidebarGroup,
-  SidebarGroupItem,
-  SidebarLink,
-}
+Sidebar.Root = Sidebar
+Sidebar.Group = SidebarGroup
+Sidebar.GroupItem = SidebarGroupItem
+Sidebar.Link = SidebarLink

package/src/client/components/primitives/tabs.tsx

@@ -13,7 +13,7 @@ export interface TabsIndicatorProps extends ComponentBase {
   style?: React.CSSProperties
 }
 
-export const TabsRoot = ({
+export const Tabs = ({
   children,
   className = '',
   ...props
@@ -25,7 +25,7 @@ export const TabsRoot = ({
   )
 }
 
-export const TabsList = ({ children, className = '' }: ComponentBase) => {
+const TabsList = ({ children, className = '' }: ComponentBase) => {
   return (
     <div
       role="tablist"
@@ -39,7 +39,7 @@ export const TabsList = ({ children, className = '' }: ComponentBase) => {
   )
 }
 
-export const TabsItem = ({
+const TabsItem = ({
   children,
   id,
   selected,
@@ -62,11 +62,11 @@ export const TabsItem = ({
   )
 }
 
-export const TabsContent = ({ children, className = '' }: ComponentBase) => {
+const TabsContent = ({ children, className = '' }: ComponentBase) => {
   return <div className={cn('p-4 outline-none', className)}>{children}</div>
 }
 
-export const TabsIndicator = ({
+const TabsIndicator = ({
   className = '',
   style,
 }: TabsIndicatorProps) => {
@@ -81,10 +81,8 @@ export const TabsIndicator = ({
   )
 }
 
-export default {
-  TabsRoot,
-  TabsList,
-  TabsItem,
-  TabsContent,
-  TabsIndicator,
-}
+Tabs.Root = Tabs
+Tabs.List = TabsList
+Tabs.Item = TabsItem
+Tabs.Content = TabsContent
+Tabs.Indicator = TabsIndicator