@tribepad/themis 1.0.0

package/dist/chunk-HQVRMR6N.js

@@ -0,0 +1,365 @@
+'use strict';
+
+var chunkGD5GHTMA_js = require('./chunk-GD5GHTMA.js');
+var chunk3YOY2VJ6_js = require('./chunk-3YOY2VJ6.js');
+var chunkVIREG536_js = require('./chunk-VIREG536.js');
+var chunkT4COXKQ3_js = require('./chunk-T4COXKQ3.js');
+var zod = require('zod');
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var BreadcrumbItemDataSchema = zod.z.object({
+  /** Unique identifier for the breadcrumb item */
+  id: zod.z.union([zod.z.string(), zod.z.number()]),
+  /** Display text for the breadcrumb (required - no icon-only items) */
+  label: zod.z.string(),
+  /** Link URL - omit for non-navigable items */
+  href: zod.z.string().optional(),
+  /** Optional leading icon (ReactNode) */
+  icon: zod.z.custom().optional(),
+  /** Disable this specific breadcrumb link */
+  isDisabled: zod.z.boolean().optional().default(false)
+});
+var SeparatorTypeSchema = zod.z.union([
+  zod.z.literal("chevron"),
+  zod.z.literal("slash"),
+  zod.z.custom()
+]);
+var BreadcrumbsPropsSchema = chunkT4COXKQ3_js.BaseComponentPropsSchema.extend({
+  /**
+   * Array of breadcrumb items to render
+   * @see FR-001 (Render Breadcrumbs from Items Array)
+   */
+  items: zod.z.array(BreadcrumbItemDataSchema),
+  /**
+   * Separator style between items
+   * @default 'chevron'
+   * @see FR-003 (Configurable Separators)
+   */
+  separator: SeparatorTypeSchema.optional().default("chevron"),
+  /**
+   * Maximum items to show before collapsing
+   * @default 4
+   * @see FR-004 (Ellipsis Collapse for Overflow)
+   */
+  maxItems: zod.z.number().int().positive().optional().default(4),
+  /**
+   * Number of items to show before ellipsis
+   * @default 1
+   * @see FR-004 (Ellipsis Collapse for Overflow)
+   */
+  itemsBeforeCollapse: zod.z.number().int().nonnegative().optional().default(1),
+  /**
+   * Number of items to show after ellipsis
+   * @default 2
+   * @see FR-004 (Ellipsis Collapse for Overflow)
+   */
+  itemsAfterCollapse: zod.z.number().int().positive().optional().default(2),
+  /**
+   * Custom link component for framework integration (Next.js Link, React Router Link, etc.)
+   * @default 'a'
+   * @see FR-005 (Polymorphic Link Component)
+   */
+  linkComponent: zod.z.custom().optional(),
+  /**
+   * Disable all breadcrumb links
+   * @default false
+   * @see FR-006 (Disabled States)
+   */
+  isDisabled: zod.z.boolean().optional().default(false)
+});
+var breadcrumbsVariants = classVarianceAuthority.cva("flex items-center flex-wrap", {
+  variants: {},
+  defaultVariants: {}
+});
+var breadcrumbListVariants = classVarianceAuthority.cva(
+  "flex flex-wrap items-center gap-1 break-words text-sm text-[var(--menu-muted)]",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var breadcrumbItemVariants = classVarianceAuthority.cva("inline-flex items-center gap-1", {
+  variants: {},
+  defaultVariants: {}
+});
+var breadcrumbLinkVariants = classVarianceAuthority.cva(
+  "inline-flex items-center gap-2 min-h-[44px] px-2 rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2",
+  {
+    variants: {
+      state: {
+        default: [
+          "text-[var(--menu-muted)]",
+          "hover:text-[var(--content-foreground)]",
+          "hover:underline underline-offset-4"
+        ].join(" "),
+        current: "text-[var(--content-foreground)] font-medium pointer-events-none",
+        disabled: "text-[var(--menu-muted)] opacity-50 cursor-not-allowed pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var separatorVariants = classVarianceAuthority.cva("text-[var(--menu-muted)]", {
+  variants: {
+    type: {
+      chevron: "[&>svg]:h-4 [&>svg]:w-4",
+      slash: "mx-2",
+      custom: ""
+    }
+  },
+  defaultVariants: {
+    type: "chevron"
+  }
+});
+var ellipsisButtonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center min-h-[44px] min-w-[44px] rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 hover:bg-[var(--accent)]",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+function isCurrentPage(index, total) {
+  return index === total - 1;
+}
+function getCollapsedItems(items, maxItems, itemsBeforeCollapse, itemsAfterCollapse) {
+  if (items.length <= maxItems) {
+    return null;
+  }
+  if (itemsBeforeCollapse + itemsAfterCollapse >= items.length) {
+    return null;
+  }
+  const before = items.slice(0, itemsBeforeCollapse);
+  const after = items.slice(-itemsAfterCollapse);
+  const collapsed = items.slice(itemsBeforeCollapse, items.length - itemsAfterCollapse);
+  return { before, collapsed, after };
+}
+function BreadcrumbSeparator({ separator }) {
+  if (separator === "chevron") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        role: "presentation",
+        "aria-hidden": "true",
+        className: separatorVariants({ type: "chevron" }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, {})
+      }
+    );
+  }
+  if (separator === "slash") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        role: "presentation",
+        "aria-hidden": "true",
+        className: separatorVariants({ type: "slash" }),
+        children: "/"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: separatorVariants({ type: "custom" }),
+      children: separator
+    }
+  );
+}
+function BreadcrumbLink({
+  item,
+  isCurrent,
+  linkComponent: LinkComponent = "a",
+  isGroupDisabled
+}) {
+  const isDisabled = isGroupDisabled || item.isDisabled;
+  const state = isCurrent ? "current" : isDisabled ? "disabled" : "default";
+  if (isCurrent) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: breadcrumbLinkVariants({ state: "current" }),
+        "aria-current": "page",
+        children: [
+          item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: item.icon }),
+          item.label
+        ]
+      }
+    );
+  }
+  if (!item.href) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: breadcrumbLinkVariants({ state: isDisabled ? "disabled" : "default" }),
+        "aria-disabled": isDisabled || void 0,
+        children: [
+          item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: item.icon }),
+          item.label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    LinkComponent,
+    {
+      href: item.href,
+      className: breadcrumbLinkVariants({ state }),
+      "aria-disabled": isDisabled || void 0,
+      children: [
+        item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: item.icon }),
+        item.label
+      ]
+    }
+  );
+}
+function BreadcrumbEllipsis({
+  items,
+  linkComponent: LinkComponent = "a",
+  isGroupDisabled
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkGD5GHTMA_js.Dropdown, { defaultOpen: false, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkGD5GHTMA_js.Dropdown.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      chunk3YOY2VJ6_js.Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: ellipsisButtonVariants(),
+        "aria-label": "More breadcrumbs",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkGD5GHTMA_js.Dropdown.Menu, { align: "start", side: "bottom", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      chunkGD5GHTMA_js.Dropdown.Item,
+      {
+        isDisabled: isGroupDisabled || item.isDisabled,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          LinkComponent,
+          {
+            href: item.href,
+            className: "flex flex-1 items-center gap-2",
+            children: [
+              item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: item.icon }),
+              item.label
+            ]
+          }
+        )
+      },
+      item.id
+    )) })
+  ] });
+}
+var Breadcrumbs = react.forwardRef(
+  ({
+    items,
+    separator = "chevron",
+    maxItems = 4,
+    itemsBeforeCollapse = 1,
+    itemsAfterCollapse = 2,
+    linkComponent,
+    isDisabled,
+    className,
+    "aria-label": ariaLabel = "Breadcrumb",
+    ...props
+  }, ref) => {
+    if (!items || items.length === 0) {
+      return null;
+    }
+    const collapsedData = getCollapsedItems(
+      items,
+      maxItems,
+      itemsBeforeCollapse,
+      itemsAfterCollapse
+    );
+    if (!collapsedData) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "nav",
+        {
+          ref,
+          "aria-label": ariaLabel,
+          className: chunkVIREG536_js.cn(breadcrumbsVariants(), className),
+          ...props,
+          children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: breadcrumbListVariants(), children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("li", { className: breadcrumbItemVariants(), children: /* @__PURE__ */ jsxRuntime.jsx(
+              BreadcrumbLink,
+              {
+                item,
+                isCurrent: isCurrentPage(index, items.length),
+                linkComponent,
+                isGroupDisabled: isDisabled
+              }
+            ) }),
+            index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, { separator })
+          ] }, item.id)) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: chunkVIREG536_js.cn(breadcrumbsVariants(), className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: breadcrumbListVariants(), children: [
+          collapsedData.before.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("li", { className: breadcrumbItemVariants(), children: /* @__PURE__ */ jsxRuntime.jsx(
+              BreadcrumbLink,
+              {
+                item,
+                isCurrent: false,
+                linkComponent,
+                isGroupDisabled: isDisabled
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, { separator })
+          ] }, item.id)),
+          /* @__PURE__ */ jsxRuntime.jsx("li", { className: breadcrumbItemVariants(), children: /* @__PURE__ */ jsxRuntime.jsx(
+            BreadcrumbEllipsis,
+            {
+              items: collapsedData.collapsed,
+              linkComponent,
+              isGroupDisabled: isDisabled
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, { separator }),
+          collapsedData.after.map((item, index) => {
+            const isLast = index === collapsedData.after.length - 1;
+            const globalIndex = items.length - collapsedData.after.length + index;
+            return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("li", { className: breadcrumbItemVariants(), children: /* @__PURE__ */ jsxRuntime.jsx(
+                BreadcrumbLink,
+                {
+                  item,
+                  isCurrent: isCurrentPage(globalIndex, items.length),
+                  linkComponent,
+                  isGroupDisabled: isDisabled
+                }
+              ) }),
+              !isLast && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, { separator })
+            ] }, item.id);
+          })
+        ] })
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+exports.BreadcrumbItemDataSchema = BreadcrumbItemDataSchema;
+exports.Breadcrumbs = Breadcrumbs;
+exports.BreadcrumbsPropsSchema = BreadcrumbsPropsSchema;
+exports.SeparatorTypeSchema = SeparatorTypeSchema;
+exports.breadcrumbItemVariants = breadcrumbItemVariants;
+exports.breadcrumbLinkVariants = breadcrumbLinkVariants;
+exports.breadcrumbListVariants = breadcrumbListVariants;
+exports.breadcrumbsVariants = breadcrumbsVariants;
+exports.ellipsisButtonVariants = ellipsisButtonVariants;
+exports.separatorVariants = separatorVariants;
+//# sourceMappingURL=chunk-HQVRMR6N.js.map
+//# sourceMappingURL=chunk-HQVRMR6N.js.map

package/dist/chunk-HQVRMR6N.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/Breadcrumbs/Breadcrumbs.types.ts","../src/elements/Breadcrumbs/Breadcrumbs.tsx"],"names":["z","BaseComponentPropsSchema","cva","jsx","ChevronRight","jsxs","Dropdown","Button","MoreHorizontal","forwardRef","cn","Fragment"],"mappings":"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","file":"chunk-HQVRMR6N.js","sourcesContent":["import { z } from 'zod';\nimport { BaseComponentPropsSchema } from '../../schemas/BaseComponentProps';\nimport type { ReactNode, ElementType } from 'react';\n\n/**\n * Breadcrumb Item Data Schema\n * Represents a single item in the breadcrumb trail\n *\n * @see breadcrumbs-prd.md FR-001 (Render Breadcrumbs from Items Array)\n * @see breadcrumbs-prd.md FR-007 (Icon Support)\n * @see plan.md Decision 1 (Array-Based API)\n */\nexport const BreadcrumbItemDataSchema = z.object({\n  /** Unique identifier for the breadcrumb item */\n  id: z.union([z.string(), z.number()]),\n\n  /** Display text for the breadcrumb (required - no icon-only items) */\n  label: z.string(),\n\n  /** Link URL - omit for non-navigable items */\n  href: z.string().optional(),\n\n  /** Optional leading icon (ReactNode) */\n  icon: z.custom<ReactNode>().optional(),\n\n  /** Disable this specific breadcrumb link */\n  isDisabled: z.boolean().optional().default(false),\n});\n\nexport type BreadcrumbItemData = z.infer<typeof BreadcrumbItemDataSchema>;\n\n/**\n * Separator Type Schema\n * Controls the visual separator between breadcrumb items\n *\n * @see breadcrumbs-prd.md FR-003 (Configurable Separators)\n * @see plan.md Decision 3 (Configurable Separators)\n */\nexport const SeparatorTypeSchema = z.union([\n  z.literal('chevron'),\n  z.literal('slash'),\n  z.custom<ReactNode>(),\n]);\n\nexport type SeparatorType = z.infer<typeof SeparatorTypeSchema>;\n\n/**\n * Breadcrumbs Props Schema\n * Main component props for the Breadcrumbs component\n *\n * @see breadcrumbs-prd.md FR-001 to FR-011 (All Functional Requirements)\n * @see plan.md (All Design Decisions)\n * @see constitution.md Principle IV (Accessibility First)\n */\nexport const BreadcrumbsPropsSchema = BaseComponentPropsSchema.extend({\n  /**\n   * Array of breadcrumb items to render\n   * @see FR-001 (Render Breadcrumbs from Items Array)\n   */\n  items: z.array(BreadcrumbItemDataSchema),\n\n  /**\n   * Separator style between items\n   * @default 'chevron'\n   * @see FR-003 (Configurable Separators)\n   */\n  separator: SeparatorTypeSchema.optional().default('chevron'),\n\n  /**\n   * Maximum items to show before collapsing\n   * @default 4\n   * @see FR-004 (Ellipsis Collapse for Overflow)\n   */\n  maxItems: z.number().int().positive().optional().default(4),\n\n  /**\n   * Number of items to show before ellipsis\n   * @default 1\n   * @see FR-004 (Ellipsis Collapse for Overflow)\n   */\n  itemsBeforeCollapse: z.number().int().nonnegative().optional().default(1),\n\n  /**\n   * Number of items to show after ellipsis\n   * @default 2\n   * @see FR-004 (Ellipsis Collapse for Overflow)\n   */\n  itemsAfterCollapse: z.number().int().positive().optional().default(2),\n\n  /**\n   * Custom link component for framework integration (Next.js Link, React Router Link, etc.)\n   * @default 'a'\n   * @see FR-005 (Polymorphic Link Component)\n   */\n  linkComponent: z.custom<ElementType>().optional(),\n\n  /**\n   * Disable all breadcrumb links\n   * @default false\n   * @see FR-006 (Disabled States)\n   */\n  isDisabled: z.boolean().optional().default(false),\n});\n\nexport type BreadcrumbsProps = z.infer<typeof BreadcrumbsPropsSchema>;\n\n/**\n * Internal collapsed items structure\n * Used by ellipsis collapse logic\n *\n * @see FR-004 (Ellipsis Collapse for Overflow)\n * @see plan.md Decision 4 (Ellipsis Collapse)\n */\nexport interface CollapsedItems {\n  /** Items shown before the ellipsis */\n  before: BreadcrumbItemData[];\n  /** Items hidden in the dropdown */\n  collapsed: BreadcrumbItemData[];\n  /** Items shown after the ellipsis */\n  after: BreadcrumbItemData[];\n}\n\n/**\n * Internal BreadcrumbLink component props\n * Used by the internal link rendering component\n */\nexport interface BreadcrumbLinkInternalProps {\n  item: BreadcrumbItemData;\n  isCurrent: boolean;\n  linkComponent?: ElementType;\n  isGroupDisabled?: boolean;\n}\n\n/**\n * Internal BreadcrumbEllipsis component props\n * Used by the ellipsis dropdown component\n */\nexport interface BreadcrumbEllipsisInternalProps {\n  items: BreadcrumbItemData[];\n  linkComponent?: ElementType;\n  isGroupDisabled?: boolean;\n}\n\n/**\n * Internal BreadcrumbSeparator component props\n * Used by the separator rendering component\n */\nexport interface BreadcrumbSeparatorInternalProps {\n  separator: SeparatorType;\n}\n\n/**\n * CVA state type for breadcrumb link variants\n */\nexport type BreadcrumbLinkState = 'default' | 'current' | 'disabled';\n\n/**\n * CVA separator type for separator variants\n */\nexport type SeparatorVariantType = 'chevron' | 'slash' | 'custom';\n","\"use client\";\n\n/**\n * Breadcrumbs Component\n * Accessible breadcrumb navigation with array-based API and ellipsis collapse\n *\n * @see breadcrumbs-prd.md FR-001 to FR-011 (Breadcrumbs Component Requirements)\n * @see breadcrumbs-prd.md FR-009 (WCAG 2.2 AAA - 7:1 contrast ratio)\n * @see breadcrumbs-prd.md FR-008 (44x44px minimum touch targets)\n * @see constitution.md Principle IV (Accessibility First)\n */\n\nimport { forwardRef, Fragment, type ElementType, type ReactNode } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { ChevronRight, MoreHorizontal } from 'lucide-react';\nimport { cn } from '../../utils/cn';\nimport { Dropdown } from '../Dropdown';\nimport { Button } from '../Button';\nimport type {\n  BreadcrumbsProps,\n  BreadcrumbItemData,\n  SeparatorType,\n  CollapsedItems,\n  BreadcrumbLinkState,\n} from './Breadcrumbs.types';\n\n// ============================================================================\n// CVA Variants (Task 3.1)\n// ============================================================================\n\n/**\n * Root container styling\n * @see plan.md CVA Variants Structure - breadcrumbsVariants\n */\nexport const breadcrumbsVariants = cva(\"flex items-center flex-wrap\", {\n  variants: {},\n  defaultVariants: {},\n});\n\n/**\n * Ordered list styling\n * @see plan.md CVA Variants Structure - breadcrumbListVariants\n */\nexport const breadcrumbListVariants = cva(\n  \"flex flex-wrap items-center gap-1 break-words text-sm text-[var(--menu-muted)]\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n);\n\n/**\n * Individual list item styling\n * @see plan.md CVA Variants Structure - breadcrumbItemVariants\n */\nexport const breadcrumbItemVariants = cva(\"inline-flex items-center gap-1\", {\n  variants: {},\n  defaultVariants: {},\n});\n\n/**\n * Link/span styling based on state\n * @see plan.md CVA Variants Structure - breadcrumbLinkVariants\n * @see FR-008 (44x44px minimum touch targets)\n */\nexport const breadcrumbLinkVariants = cva(\n  \"inline-flex items-center gap-2 min-h-[44px] px-2 rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2\",\n  {\n    variants: {\n      state: {\n        default: [\n          \"text-[var(--menu-muted)]\",\n          \"hover:text-[var(--content-foreground)]\",\n          \"hover:underline underline-offset-4\",\n        ].join(\" \"),\n        current: \"text-[var(--content-foreground)] font-medium pointer-events-none\",\n        disabled:\n          \"text-[var(--menu-muted)] opacity-50 cursor-not-allowed pointer-events-none\",\n      },\n    },\n    defaultVariants: {\n      state: \"default\",\n    },\n  }\n);\n\n/**\n * Separator styling\n * @see plan.md CVA Variants Structure - separatorVariants\n */\nexport const separatorVariants = cva(\"text-[var(--menu-muted)]\", {\n  variants: {\n    type: {\n      chevron: \"[&>svg]:h-4 [&>svg]:w-4\",\n      slash: \"mx-2\",\n      custom: \"\",\n    },\n  },\n  defaultVariants: {\n    type: \"chevron\",\n  },\n});\n\n/**\n * Ellipsis button styling\n * @see plan.md CVA Variants Structure - ellipsisButtonVariants\n * @see FR-008 (44x44px minimum touch targets)\n */\nexport const ellipsisButtonVariants = cva(\n  \"inline-flex items-center justify-center min-h-[44px] min-w-[44px] rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 hover:bg-[var(--accent)]\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n);\n\n// ============================================================================\n// Helper Functions (Task 3.4)\n// ============================================================================\n\n/**\n * Determine if an item is the current page\n * Only the last item is considered current page\n *\n * @see plan.md Clarification: Current Page Detection - Only last item\n */\nfunction isCurrentPage(index: number, total: number): boolean {\n  return index === total - 1;\n}\n\n/**\n * Calculate collapsed items for ellipsis dropdown\n *\n * @see FR-004 (Ellipsis Collapse for Overflow)\n * @see plan.md Clarification: Collapse Edge Case - No collapse if before + after >= total\n */\nfunction getCollapsedItems(\n  items: BreadcrumbItemData[],\n  maxItems: number,\n  itemsBeforeCollapse: number,\n  itemsAfterCollapse: number\n): CollapsedItems | null {\n  // No collapse if items fit within maxItems\n  if (items.length <= maxItems) {\n    return null;\n  }\n\n  // Edge case: no collapse if before + after covers all items\n  if (itemsBeforeCollapse + itemsAfterCollapse >= items.length) {\n    return null;\n  }\n\n  const before = items.slice(0, itemsBeforeCollapse);\n  const after = items.slice(-itemsAfterCollapse);\n  const collapsed = items.slice(itemsBeforeCollapse, items.length - itemsAfterCollapse);\n\n  return { before, collapsed, after };\n}\n\n// ============================================================================\n// Internal Components (Tasks 3.2, 3.3)\n// ============================================================================\n\n/**\n * BreadcrumbSeparator - Internal component for rendering separators\n *\n * @see FR-003 (Configurable Separators)\n * @see plan.md Task 3.2\n */\ninterface BreadcrumbSeparatorProps {\n  separator: SeparatorType;\n}\n\nfunction BreadcrumbSeparator({ separator }: BreadcrumbSeparatorProps): ReactNode {\n  if (separator === 'chevron') {\n    return (\n      <li\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={separatorVariants({ type: 'chevron' })}\n      >\n        <ChevronRight />\n      </li>\n    );\n  }\n\n  if (separator === 'slash') {\n    return (\n      <li\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={separatorVariants({ type: 'slash' })}\n      >\n        /\n      </li>\n    );\n  }\n\n  // Custom ReactNode separator\n  return (\n    <li\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={separatorVariants({ type: 'custom' })}\n    >\n      {separator}\n    </li>\n  );\n}\n\n/**\n * BreadcrumbLink - Internal component for rendering individual breadcrumb links\n *\n * @see FR-001 (Render Breadcrumbs from Items Array)\n * @see FR-002 (Auto-Detect Current Page)\n * @see FR-005 (Polymorphic Link Component)\n * @see plan.md Task 3.3\n */\ninterface BreadcrumbLinkProps {\n  item: BreadcrumbItemData;\n  isCurrent: boolean;\n  linkComponent?: ElementType;\n  isGroupDisabled?: boolean;\n}\n\nfunction BreadcrumbLink({\n  item,\n  isCurrent,\n  linkComponent: LinkComponent = 'a',\n  isGroupDisabled,\n}: BreadcrumbLinkProps): ReactNode {\n  const isDisabled = isGroupDisabled || item.isDisabled;\n  const state: BreadcrumbLinkState = isCurrent\n    ? 'current'\n    : isDisabled\n      ? 'disabled'\n      : 'default';\n\n  // Render current page as span with aria-current\n  if (isCurrent) {\n    return (\n      <span\n        className={breadcrumbLinkVariants({ state: 'current' })}\n        aria-current=\"page\"\n      >\n        {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n        {item.label}\n      </span>\n    );\n  }\n\n  // Render non-navigable item (no href) as span without aria-current\n  if (!item.href) {\n    return (\n      <span\n        className={breadcrumbLinkVariants({ state: isDisabled ? 'disabled' : 'default' })}\n        aria-disabled={isDisabled || undefined}\n      >\n        {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n        {item.label}\n      </span>\n    );\n  }\n\n  // Render link - navigation handled by linkComponent\n  return (\n    <LinkComponent\n      href={item.href}\n      className={breadcrumbLinkVariants({ state })}\n      aria-disabled={isDisabled || undefined}\n    >\n      {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n      {item.label}\n    </LinkComponent>\n  );\n}\n\n/**\n * BreadcrumbEllipsis - Internal component for collapsed items dropdown\n *\n * @see FR-004 (Ellipsis Collapse for Overflow)\n * @see plan.md Task 4.2 - Uses Themis Dropdown with nested LinkComponent\n */\ninterface BreadcrumbEllipsisProps {\n  items: BreadcrumbItemData[];\n  linkComponent?: ElementType;\n  isGroupDisabled?: boolean;\n}\n\nfunction BreadcrumbEllipsis({\n  items,\n  linkComponent: LinkComponent = 'a',\n  isGroupDisabled,\n}: BreadcrumbEllipsisProps): ReactNode {\n  return (\n    <Dropdown defaultOpen={false}>\n      <Dropdown.Trigger>\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          className={ellipsisButtonVariants()}\n          aria-label=\"More breadcrumbs\"\n        >\n          <MoreHorizontal className=\"h-4 w-4\" />\n        </Button>\n      </Dropdown.Trigger>\n      <Dropdown.Menu align=\"start\" side=\"bottom\">\n        {items.map((item) => (\n          <Dropdown.Item\n            key={item.id}\n            isDisabled={isGroupDisabled || item.isDisabled}\n          >\n            {/* Nest LinkComponent inside Item (ShadCN pattern) */}\n            <LinkComponent\n              href={item.href}\n              className=\"flex flex-1 items-center gap-2\"\n            >\n              {item.icon && <span aria-hidden=\"true\">{item.icon}</span>}\n              {item.label}\n            </LinkComponent>\n          </Dropdown.Item>\n        ))}\n      </Dropdown.Menu>\n    </Dropdown>\n  );\n}\n\n// ============================================================================\n// Main Component (Tasks 3.5, 3.6)\n// ============================================================================\n\n/**\n * Breadcrumbs Component\n *\n * Accessible breadcrumb navigation with array-based API and ellipsis collapse.\n * Supports polymorphic link components for framework integration.\n *\n * @example\n * ```tsx\n * <Breadcrumbs\n *   items={[\n *     { id: 'home', label: 'Home', href: '/' },\n *     { id: 'products', label: 'Products', href: '/products' },\n *     { id: 'current', label: 'Product Details' }\n *   ]}\n * />\n * ```\n *\n * @see breadcrumbs-prd.md FR-001 to FR-011 (All Functional Requirements)\n */\nconst Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(\n  (\n    {\n      items,\n      separator = 'chevron',\n      maxItems = 4,\n      itemsBeforeCollapse = 1,\n      itemsAfterCollapse = 2,\n      linkComponent,\n      isDisabled,\n      className,\n      'aria-label': ariaLabel = 'Breadcrumb',\n      ...props\n    },\n    ref\n  ) => {\n    // Handle empty items - render nothing\n    if (!items || items.length === 0) {\n      return null;\n    }\n\n    // Calculate if we need to collapse\n    const collapsedData = getCollapsedItems(\n      items,\n      maxItems,\n      itemsBeforeCollapse,\n      itemsAfterCollapse\n    );\n\n    // Render without collapse\n    if (!collapsedData) {\n      return (\n        <nav\n          ref={ref}\n          aria-label={ariaLabel}\n          className={cn(breadcrumbsVariants(), className)}\n          {...props}\n        >\n          <ol className={breadcrumbListVariants()}>\n            {items.map((item, index) => (\n              <Fragment key={item.id}>\n                <li className={breadcrumbItemVariants()}>\n                  <BreadcrumbLink\n                    item={item}\n                    isCurrent={isCurrentPage(index, items.length)}\n                    linkComponent={linkComponent}\n                    isGroupDisabled={isDisabled}\n                  />\n                </li>\n                {index < items.length - 1 && (\n                  <BreadcrumbSeparator separator={separator} />\n                )}\n              </Fragment>\n            ))}\n          </ol>\n        </nav>\n      );\n    }\n\n    // Render with collapse\n    return (\n      <nav\n        ref={ref}\n        aria-label={ariaLabel}\n        className={cn(breadcrumbsVariants(), className)}\n        {...props}\n      >\n        <ol className={breadcrumbListVariants()}>\n          {/* Items before ellipsis */}\n          {collapsedData.before.map((item) => (\n            <Fragment key={item.id}>\n              <li className={breadcrumbItemVariants()}>\n                <BreadcrumbLink\n                  item={item}\n                  isCurrent={false}\n                  linkComponent={linkComponent}\n                  isGroupDisabled={isDisabled}\n                />\n              </li>\n              <BreadcrumbSeparator separator={separator} />\n            </Fragment>\n          ))}\n\n          {/* Ellipsis dropdown */}\n          <li className={breadcrumbItemVariants()}>\n            <BreadcrumbEllipsis\n              items={collapsedData.collapsed}\n              linkComponent={linkComponent}\n              isGroupDisabled={isDisabled}\n            />\n          </li>\n          <BreadcrumbSeparator separator={separator} />\n\n          {/* Items after ellipsis */}\n          {collapsedData.after.map((item, index) => {\n            const isLast = index === collapsedData.after.length - 1;\n            const globalIndex =\n              items.length - collapsedData.after.length + index;\n            return (\n              <Fragment key={item.id}>\n                <li className={breadcrumbItemVariants()}>\n                  <BreadcrumbLink\n                    item={item}\n                    isCurrent={isCurrentPage(globalIndex, items.length)}\n                    linkComponent={linkComponent}\n                    isGroupDisabled={isDisabled}\n                  />\n                </li>\n                {!isLast && <BreadcrumbSeparator separator={separator} />}\n              </Fragment>\n            );\n          })}\n        </ol>\n      </nav>\n    );\n  }\n);\n\nBreadcrumbs.displayName = 'Breadcrumbs';\n\nexport { Breadcrumbs };\n"]}