7onic 0.1.20 → 0.1.22

package/dist/index.js

@@ -10192,6 +10192,9 @@ import { cn } from '@/lib/utils'
 type BreadcrumbContextValue = {
   size?: 'sm' | 'default' | 'lg'
   separator?: React.ReactNode
+  maxItems?: number
+  itemsBeforeCollapse?: number
+  itemsAfterCollapse?: number
 }
 
 const BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})
@@ -10242,17 +10245,17 @@ export interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {
   separator?: React.ReactNode
   /** Size of the breadcrumb */
   size?: 'sm' | 'default' | 'lg'
-  /** Max items before collapsing (undefined = no collapse) */
+  /** Collapse the middle items into an ellipsis when there are more items than this (undefined = no collapse) */
   maxItems?: number
-  /** Items visible before the ellipsis when collapsed */
+  /** Items kept before the ellipsis when collapsed */
   itemsBeforeCollapse?: number
-  /** Items visible after the ellipsis when collapsed */
+  /** Items kept after the ellipsis when collapsed */
   itemsAfterCollapse?: number
 }
 
 const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ className, separator, size = 'default', ...props }, ref) => (
-    <BreadcrumbContext.Provider value={{ size, separator }}>
+  ({ className, separator, size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, ...props }, ref) => (
+    <BreadcrumbContext.Provider value={{ size, separator, maxItems, itemsBeforeCollapse, itemsAfterCollapse }}>
       <nav
         ref={ref}
         aria-label="breadcrumb"
@@ -10267,8 +10270,8 @@ Breadcrumb.displayName = 'Breadcrumb'
 // \u2500\u2500\u2500 BreadcrumbList \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
-  ({ className, ...props }, ref) => {
-    const { size = 'default' } = useBreadcrumbContext()
+  ({ className, children, ...props }, ref) => {
+    const { size = 'default', maxItems, itemsBeforeCollapse = 1, itemsAfterCollapse = 1 } = useBreadcrumbContext()
     const sizeClass = breadcrumbSizeMap[size]
     return (
       <ol
@@ -10281,7 +10284,9 @@ const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWi
           className
         )}
         {...props}
-      />
+      >
+        {collapseItems(children, maxItems, itemsBeforeCollapse, itemsAfterCollapse)}
+      </ol>
     )
   }
 )
@@ -10385,6 +10390,73 @@ const BreadcrumbEllipsis = React.forwardRef<HTMLSpanElement, BreadcrumbEllipsisP
 )
 BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
 
+// \u2500\u2500\u2500 Collapse \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+
+// Items are often rendered from a list as <Fragment>{separator}{item}</Fragment>,
+// so fragments are unwrapped before counting.
+function flattenFragments(children: React.ReactNode): React.ReactNode[] {
+  return React.Children.toArray(children).flatMap((node) =>
+    React.isValidElement<{ children?: React.ReactNode }>(node) && node.type === React.Fragment
+      ? flattenFragments(node.props.children).map((child) =>
+          // Prefix keys so children of different fragments stay unique
+          React.isValidElement(child) ? React.cloneElement(child, { key: \`\${node.key}\${child.key}\` }) : child
+        )
+      : [node]
+  )
+}
+
+// Children passed from a Server Component arrive with lazy element types, so
+// \`node.type === BreadcrumbItem\` cannot tell them apart. When no child can be
+// identified, the list is read as the alternating item / separator order every
+// breadcrumb uses. Unidentified children next to identified separators (items
+// wrapped in the caller's own component) count as items.
+function classifyNodes(nodes: React.ReactNode[]): ('item' | 'separator')[] {
+  const known = nodes.map((node) => {
+    const type = React.isValidElement(node) ? node.type : null
+    return type === BreadcrumbSeparator ? 'separator' : type === BreadcrumbItem ? 'item' : null
+  })
+  if (known.every((kind) => kind === null)) {
+    return nodes.map((_, i) => (i % 2 === 0 ? 'item' : 'separator'))
+  }
+  return known.map((kind) => kind ?? 'item')
+}
+
+// Groups children into segments (the separator before an item + the item),
+// then keeps the first \`before\` and last \`after\` segments around one ellipsis
+// item. The user's own separators are reused, so custom separators survive.
+function collapseItems(children: React.ReactNode, maxItems: number | undefined, before: number, after: number) {
+  if (maxItems === undefined) return children
+
+  const nodes = flattenFragments(children)
+  const kinds = classifyNodes(nodes)
+  const segments: { separator: React.ReactNode; nodes: React.ReactNode[] }[] = []
+  let pendingSeparator: React.ReactNode = null
+  nodes.forEach((node, i) => {
+    if (kinds[i] === 'separator') {
+      pendingSeparator = node
+    } else {
+      segments.push({ separator: pendingSeparator, nodes: [node] })
+      pendingSeparator = null
+    }
+  })
+
+  if (segments.length <= maxItems || before + after >= segments.length) return children
+
+  const head = segments.slice(0, before)
+  const tail = segments.slice(segments.length - after)
+  const render = (list: typeof segments) => list.flatMap((seg) => (seg.separator ? [seg.separator, ...seg.nodes] : seg.nodes))
+  const ellipsisSeparator = segments[before].separator
+
+  return [
+    ...render(head),
+    ...(ellipsisSeparator ? [ellipsisSeparator] : []),
+    <BreadcrumbItem key="breadcrumb-collapsed">
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>,
+    ...render(tail),
+  ]
+}
+
 // \u2500\u2500\u2500 Exports \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
 export {
@@ -13586,9 +13658,9 @@ import { cn } from '@/lib/utils'
 type DropdownMenuRadius = 'md' | 'lg' | 'xl'
 
 const contentRadiusMap: Record<DropdownMenuRadius, string> = {
-  md: 'rounded-md',     // 6px
+  md: 'rounded-md',     // 6px (default)
   lg: 'rounded-lg',     // 8px
-  xl: 'rounded-xl',     // 12px (default)
+  xl: 'rounded-xl',     // 12px
 }
 
 const itemRadiusMap: Record<DropdownMenuRadius, string> = {
@@ -13647,7 +13719,7 @@ const DropdownMenuStyleContext = React.createContext<{
   radius: DropdownMenuRadius
   flush: boolean
   size: DropdownMenuSize
-}>({ radius: 'lg', flush: false, size: 'md' })
+}>({ radius: 'md', flush: false, size: 'md' })
 
 // Root \u2014 state management (controlled / uncontrolled)
 const DropdownMenu = DropdownMenuPrimitive.Root
@@ -21837,7 +21909,7 @@ function showCompanionHints(names) {
 
 // cli/src/index.ts
 var import_picocolors4 = __toESM(require_picocolors());
-var VERSION = "0.1.20";
+var VERSION = "0.1.22";
 var HELP = `
 ${import_picocolors4.default.bold("7onic")} \u2014 Add 7onic design system components to your project
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "7onic",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "CLI for adding 7onic design system components to your project",
   "bin": {
     "7onic": "./dist/index.js"