@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/Breadcrumbs/index.mjs

@@ -1,9 +1,812 @@
-export { BreadcrumbItemDataSchema, Breadcrumbs, BreadcrumbsPropsSchema, SeparatorTypeSchema, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbListVariants, breadcrumbsVariants, ellipsisButtonVariants, separatorVariants } from '../../chunk-5SMGRT3G.mjs';
-import '../../chunk-RFX7QKA7.mjs';
-import '../../chunk-BDXKKMBZ.mjs';
-import '../../chunk-FPKEAJRZ.mjs';
-import '../../chunk-HK46BT5U.mjs';
-import '../../chunk-E2KQFV3O.mjs';
-import '../../chunk-5SVLJN2C.mjs';
+"use client";
+import { z } from 'zod';
+import { forwardRef, Children, isValidElement, cloneElement, memo, createContext, useId, Fragment as Fragment$1, useContext } from 'react';
+import { cva } from 'class-variance-authority';
+import { ChevronRight, Loader2, Zap, MoreHorizontal } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { MenuTrigger, Button as Button$1, Popover, Menu, SubmenuTrigger, MenuItem, Separator, Header } from 'react-aria-components';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/elements/Breadcrumbs/Breadcrumbs.types.ts
+var BaseComponentPropsSchema = z.object({
+  // Styling
+  className: z.string().optional(),
+  // React
+  children: z.any().optional(),
+  // ReactNode not directly supported by Zod
+  id: z.string().optional(),
+  // Accessibility (WCAG 2.2 AA requirements)
+  "aria-label": z.string().optional(),
+  "aria-labelledby": z.string().optional(),
+  "aria-describedby": z.string().optional(),
+  "aria-live": z.enum(["off", "polite", "assertive"]).optional(),
+  "aria-hidden": z.boolean().optional(),
+  // Testing & Development
+  "data-testid": z.string().optional()
+});
+
+// src/elements/Breadcrumbs/Breadcrumbs.types.ts
+var BreadcrumbItemDataSchema = z.object({
+  /** Unique identifier for the breadcrumb item */
+  id: z.union([z.string(), z.number()]),
+  /** Display text for the breadcrumb (required - no icon-only items) */
+  label: z.string(),
+  /** Link URL - omit for non-navigable items */
+  href: z.string().optional(),
+  /** Optional leading icon (ReactNode) */
+  icon: z.custom().optional(),
+  /** Disable this specific breadcrumb link */
+  isDisabled: z.boolean().optional().default(false)
+});
+var SeparatorTypeSchema = z.union([
+  z.literal("chevron"),
+  z.literal("slash"),
+  z.custom()
+]);
+var BreadcrumbsPropsSchema = BaseComponentPropsSchema.extend({
+  /**
+   * Array of breadcrumb items to render
+   * @see FR-001 (Render Breadcrumbs from Items Array)
+   */
+  items: 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: z.number().int().positive().optional().default(4),
+  /**
+   * Number of items to show before ellipsis
+   * @default 1
+   * @see FR-004 (Ellipsis Collapse for Overflow)
+   */
+  itemsBeforeCollapse: z.number().int().nonnegative().optional().default(1),
+  /**
+   * Number of items to show after ellipsis
+   * @default 2
+   * @see FR-004 (Ellipsis Collapse for Overflow)
+   */
+  itemsAfterCollapse: 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: z.custom().optional(),
+  /**
+   * Disable all breadcrumb links
+   * @default false
+   * @see FR-006 (Disabled States)
+   */
+  isDisabled: z.boolean().optional().default(false)
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var menuVariants = cva(
+  // Base styles - semantic tokens with fallbacks
+  "z-50 min-w-[8rem] overflow-hidden rounded-md border border-[var(--menu-border)] bg-[var(--menu-background)] text-[var(--menu-foreground)] shadow-md data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 p-1",
+  {
+    variants: {
+      variant: {
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var menuItemVariants = cva(
+  // Base styles - FR-014: 44x44px minimum touch targets
+  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 min-h-[44px] data-[focused]:bg-[var(--menu-accent)] data-[focused]:text-[var(--menu-accent-foreground)] data-[pressed]:bg-[var(--menu-accent)] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var DropdownRoot = forwardRef(
+  ({ defaultOpen = false, isOpen, onOpenChange, children }, _ref) => {
+    const childArray = Children.toArray(children);
+    const hasTrigger = childArray.some(
+      (child) => isValidElement(child) && (child.type === DropdownTrigger || child.type.displayName === "DropdownTrigger")
+    );
+    const hasMenu = childArray.some(
+      (child) => isValidElement(child) && (child.type === DropdownMenu || child.type.displayName === "DropdownMenu")
+    );
+    if (!hasTrigger || !hasMenu) {
+      throw new Error(
+        "Dropdown requires exactly one Dropdown.Trigger and one Dropdown.Menu as children"
+      );
+    }
+    return /* @__PURE__ */ jsx(MenuTrigger, { defaultOpen, isOpen, onOpenChange, children });
+  }
+);
+DropdownRoot.displayName = "Dropdown";
+var DropdownTrigger = forwardRef(
+  ({ children, ...props }, ref) => {
+    if (isValidElement(children)) {
+      return cloneElement(children, {
+        ...props,
+        slot: "trigger"
+      });
+    }
+    return /* @__PURE__ */ jsx(Button$1, { ref, ...props, children });
+  }
+);
+DropdownTrigger.displayName = "DropdownTrigger";
+var DropdownMenu = forwardRef(
+  ({ align = "start", side = "bottom", className, children, ...props }, _ref) => {
+    const placement = `${side} ${align}`;
+    return /* @__PURE__ */ jsx(Popover, { placement, className: "entering:animate-in exiting:animate-out", children: /* @__PURE__ */ jsx(
+      Menu,
+      {
+        className: cn(menuVariants({ variant: "default" }), className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownItem = forwardRef(
+  ({
+    children,
+    onAction,
+    isDisabled = false,
+    shortcut,
+    icon,
+    iconRight,
+    className,
+    "aria-label": ariaLabel,
+    ...props
+  }, _ref) => {
+    const childArray = Children.toArray(children);
+    const hasSubmenu = childArray.some(
+      (child) => isValidElement(child) && (child.type === DropdownMenu || child.type.displayName === "DropdownMenu")
+    );
+    const contentChildren = childArray.filter(
+      (child) => !isValidElement(child) || child.type !== DropdownMenu && child.type.displayName !== "DropdownMenu"
+    );
+    const submenu = childArray.find(
+      (child) => isValidElement(child) && (child.type === DropdownMenu || child.type.displayName === "DropdownMenu")
+    );
+    if (hasSubmenu && submenu) {
+      return /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [
+        /* @__PURE__ */ jsxs(
+          MenuItem,
+          {
+            "aria-label": ariaLabel,
+            className: cn(menuItemVariants({ variant: "default" }), className),
+            ...props,
+            children: [
+              icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: icon }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: contentChildren }),
+              /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4", "aria-hidden": "true" })
+            ]
+          }
+        ),
+        submenu
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(
+      MenuItem,
+      {
+        onAction,
+        isDisabled,
+        "aria-label": ariaLabel,
+        className: cn(menuItemVariants({ variant: "default" }), className),
+        ...props,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children }),
+          iconRight && /* @__PURE__ */ jsx("span", { className: "ml-auto", children: iconRight }),
+          shortcut && /* @__PURE__ */ jsx("kbd", { className: "ml-auto pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-[var(--border)] bg-[var(--accent-background)] px-1.5 font-mono text-[10px] font-medium text-[var(--menu-muted)] opacity-100", children: shortcut })
+        ]
+      }
+    );
+  }
+);
+DropdownItem.displayName = "DropdownItem";
+var DropdownSeparator = memo(forwardRef(
+  ({ className, ...props }, _ref) => {
+    return /* @__PURE__ */ jsx(
+      Separator,
+      {
+        className: cn(
+          "-mx-1 my-1 h-px bg-[var(--accent-background)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+));
+DropdownSeparator.displayName = "DropdownSeparator";
+var DropdownLabel = memo(forwardRef(
+  ({ children, className, ...props }, _ref) => {
+    return /* @__PURE__ */ jsx(
+      Header,
+      {
+        className: cn(
+          "px-2 py-1.5 text-sm font-semibold text-[var(--menu-muted)]",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+));
+DropdownLabel.displayName = "DropdownLabel";
+var Dropdown = Object.assign(DropdownRoot, {
+  Trigger: DropdownTrigger,
+  Menu: DropdownMenu,
+  Item: DropdownItem,
+  Separator: DropdownSeparator,
+  Label: DropdownLabel
+});
+var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+var HOVER_STYLES = "data-[hovered]:shadow-md";
+var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
+var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
+var ButtonGroupContext = createContext(null);
+ButtonGroupContext.displayName = "ButtonGroupContext";
+function useButtonGroupContext() {
+  return useContext(ButtonGroupContext);
+}
+var ButtonGroupItemContext = createContext(null);
+ButtonGroupItemContext.displayName = "ButtonGroupItemContext";
+function useButtonGroupItemContext() {
+  return useContext(ButtonGroupItemContext);
+}
+cva("inline-flex items-center gap-0", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col w-full"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var buttonGroupItemVariants = cva("", {
+  variants: {
+    orientation: {
+      // min-w-[44px] ensures visual layer fills touch target width (for icon buttons)
+      horizontal: "min-w-[44px]",
+      // flex (overrides inline-flex) + min-h-[44px] makes visual layer fill touch target,
+      // eliminating gaps between stacked buttons in vertical orientation
+      vertical: "flex min-h-[44px]"
+    },
+    position: {
+      first: "",
+      middle: "",
+      last: "",
+      only: ""
+      // Single button - no modifications needed
+    }
+  },
+  compoundVariants: [
+    // ==========================================================================
+    // Horizontal Orientation
+    // ==========================================================================
+    {
+      orientation: "horizontal",
+      position: "first",
+      className: "rounded-r-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "middle",
+      className: "rounded-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "last",
+      className: "rounded-l-none"
+    },
+    // ==========================================================================
+    // Vertical Orientation
+    // Note: w-full is handled by Button's effectiveFullWidth for both layers
+    // ==========================================================================
+    {
+      orientation: "vertical",
+      position: "first",
+      className: "rounded-b-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "middle",
+      className: "rounded-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "last",
+      className: "rounded-t-none"
+    }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    position: "only"
+  }
+});
+cva("bg-[var(--border)]", {
+  variants: {
+    orientation: {
+      horizontal: "w-px h-6 mx-1",
+      vertical: "h-px w-full my-1"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var buttonOuterVariants = cva(
+  "inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      inVerticalGroup: {
+        true: "items-stretch",
+        false: "items-center"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false,
+      inVerticalGroup: false
+    }
+  }
+);
+var buttonVisualVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80",
+        destructive: "bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",
+        outline: "border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",
+        secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",
+        ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",
+        link: "text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      visualSize: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+        dot: "h-5 w-5 rounded-full p-0 min-h-0 min-w-0"
+      },
+      paywall: {
+        true: "!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      visualSize: "default",
+      paywall: false
+    }
+  }
+);
+var Button = memo(forwardRef(
+  ({
+    className,
+    buttonVisualClassName,
+    variant,
+    size,
+    visualSize,
+    fullWidth,
+    loading = false,
+    loadingText = "Loading...",
+    shortcut,
+    children,
+    isDisabled,
+    paywall = false,
+    paywallRedirect,
+    paywallDescription,
+    onPress,
+    ...props
+  }, ref) => {
+    const paywallDescriptionId = useId();
+    const groupContext = useButtonGroupContext();
+    const itemContext = useButtonGroupItemContext();
+    const effectiveVariant = variant ?? groupContext?.variant ?? "default";
+    const effectiveSize = size ?? groupContext?.size;
+    const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;
+    const isInVerticalGroup = groupContext?.orientation === "vertical";
+    const effectiveFullWidth = fullWidth || isInVerticalGroup;
+    const positionClassName = itemContext ? buttonGroupItemVariants({
+      orientation: groupContext?.orientation ?? "horizontal",
+      position: itemContext.position
+    }) : "";
+    const effectiveVisualSize = visualSize ?? effectiveSize ?? "default";
+    if (process.env.NODE_ENV !== "production") {
+      if ((effectiveVisualSize === "dot" || effectiveVisualSize === "icon") && !props["aria-label"] && !children) {
+        console.warn(
+          '[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'
+        );
+      }
+    }
+    const handlePress = (e) => {
+      if (paywall) {
+        if (paywallRedirect) {
+          window.open(paywallRedirect, "_blank", "noopener,noreferrer");
+        }
+        return;
+      }
+      onPress?.(e);
+    };
+    const computedIsDisabled = effectiveIsDisabled || loading || void 0;
+    return /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        ref,
+        isDisabled: computedIsDisabled,
+        "aria-disabled": paywall ? true : void 0,
+        "aria-describedby": paywall ? paywallDescriptionId : void 0,
+        onPress: handlePress,
+        className: cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
+        ...props,
+        children: (renderProps) => (
+          /* Layer 2: Visual Button */
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                buttonVisualVariants({
+                  variant: effectiveVariant,
+                  visualSize: effectiveVisualSize,
+                  paywall,
+                  fullWidth: effectiveFullWidth
+                }),
+                // Position styling from ButtonGroup context (border-radius adjustments)
+                positionClassName,
+                buttonVisualClassName,
+                // Layer 2 interaction styles (no focus - focus ring is on Layer 1)
+                PRESSED_STYLES,
+                HOVER_STYLES,
+                HIGH_CONTRAST_HOVER,
+                HIGH_CONTRAST_PRESSED
+              ),
+              "data-pressed": renderProps.isPressed || void 0,
+              children: [
+                loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: loadingText })
+                ] }),
+                !loading && children,
+                paywall && /* @__PURE__ */ jsx(
+                  Zap,
+                  {
+                    "data-testid": "zap-icon",
+                    "aria-hidden": "true",
+                    className: "ml-1"
+                  }
+                ),
+                paywall && /* @__PURE__ */ jsxs("span", { id: paywallDescriptionId, className: "sr-only", children: [
+                  "Premium feature: ",
+                  paywallDescription || "Upgrade required to access this feature"
+                ] }),
+                renderProps.isFocusVisible && shortcut && /* @__PURE__ */ jsx("kbd", { className: "ml-auto hidden text-xs opacity-60 lg:inline", children: shortcut }),
+                renderProps.isPressed && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          )
+        )
+      }
+    );
+  }
+));
+Button.displayName = "Button";
+var breadcrumbsVariants = cva("flex items-center flex-wrap", {
+  variants: {},
+  defaultVariants: {}
+});
+var breadcrumbListVariants = cva(
+  "flex flex-wrap items-center gap-1 break-words text-sm text-[var(--menu-muted)]",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var breadcrumbItemVariants = cva("inline-flex items-center gap-1", {
+  variants: {},
+  defaultVariants: {}
+});
+var breadcrumbLinkVariants = 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 = cva("text-[var(--menu-muted)]", {
+  variants: {
+    type: {
+      chevron: "[&>svg]:h-4 [&>svg]:w-4",
+      slash: "mx-2",
+      custom: ""
+    }
+  },
+  defaultVariants: {
+    type: "chevron"
+  }
+});
+var ellipsisButtonVariants = 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__ */ jsx(
+      "li",
+      {
+        role: "presentation",
+        "aria-hidden": "true",
+        className: separatorVariants({ type: "chevron" }),
+        children: /* @__PURE__ */ jsx(ChevronRight, {})
+      }
+    );
+  }
+  if (separator === "slash") {
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        role: "presentation",
+        "aria-hidden": "true",
+        className: separatorVariants({ type: "slash" }),
+        children: "/"
+      }
+    );
+  }
+  return /* @__PURE__ */ 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__ */ jsxs(
+      "span",
+      {
+        className: breadcrumbLinkVariants({ state: "current" }),
+        "aria-current": "page",
+        children: [
+          item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.icon }),
+          item.label
+        ]
+      }
+    );
+  }
+  if (!item.href) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: breadcrumbLinkVariants({ state: isDisabled ? "disabled" : "default" }),
+        "aria-disabled": isDisabled || void 0,
+        children: [
+          item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.icon }),
+          item.label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    LinkComponent,
+    {
+      href: item.href,
+      className: breadcrumbLinkVariants({ state }),
+      "aria-disabled": isDisabled || void 0,
+      children: [
+        item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.icon }),
+        item.label
+      ]
+    }
+  );
+}
+function BreadcrumbEllipsis({
+  items,
+  linkComponent: LinkComponent = "a",
+  isGroupDisabled
+}) {
+  return /* @__PURE__ */ jsxs(Dropdown, { defaultOpen: false, children: [
+    /* @__PURE__ */ jsx(Dropdown.Trigger, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: ellipsisButtonVariants(),
+        "aria-label": "More breadcrumbs",
+        children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Dropdown.Menu, { align: "start", side: "bottom", children: items.map((item) => /* @__PURE__ */ jsx(
+      Dropdown.Item,
+      {
+        isDisabled: isGroupDisabled || item.isDisabled,
+        children: /* @__PURE__ */ jsxs(
+          LinkComponent,
+          {
+            href: item.href,
+            className: "flex flex-1 items-center gap-2",
+            children: [
+              item.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.icon }),
+              item.label
+            ]
+          }
+        )
+      },
+      item.id
+    )) })
+  ] });
+}
+var Breadcrumbs = 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__ */ jsx(
+        "nav",
+        {
+          ref,
+          "aria-label": ariaLabel,
+          className: cn(breadcrumbsVariants(), className),
+          ...props,
+          children: /* @__PURE__ */ jsx("ol", { className: breadcrumbListVariants(), children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx("li", { className: breadcrumbItemVariants(), children: /* @__PURE__ */ jsx(
+              BreadcrumbLink,
+              {
+                item,
+                isCurrent: isCurrentPage(index, items.length),
+                linkComponent,
+                isGroupDisabled: isDisabled
+              }
+            ) }),
+            index < items.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, { separator })
+          ] }, item.id)) })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: cn(breadcrumbsVariants(), className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("ol", { className: breadcrumbListVariants(), children: [
+          collapsedData.before.map((item) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx("li", { className: breadcrumbItemVariants(), children: /* @__PURE__ */ jsx(
+              BreadcrumbLink,
+              {
+                item,
+                isCurrent: false,
+                linkComponent,
+                isGroupDisabled: isDisabled
+              }
+            ) }),
+            /* @__PURE__ */ jsx(BreadcrumbSeparator, { separator })
+          ] }, item.id)),
+          /* @__PURE__ */ jsx("li", { className: breadcrumbItemVariants(), children: /* @__PURE__ */ jsx(
+            BreadcrumbEllipsis,
+            {
+              items: collapsedData.collapsed,
+              linkComponent,
+              isGroupDisabled: isDisabled
+            }
+          ) }),
+          /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [
+              /* @__PURE__ */ jsx("li", { className: breadcrumbItemVariants(), children: /* @__PURE__ */ jsx(
+                BreadcrumbLink,
+                {
+                  item,
+                  isCurrent: isCurrentPage(globalIndex, items.length),
+                  linkComponent,
+                  isGroupDisabled: isDisabled
+                }
+              ) }),
+              !isLast && /* @__PURE__ */ jsx(BreadcrumbSeparator, { separator })
+            ] }, item.id);
+          })
+        ] })
+      }
+    );
+  }
+);
+Breadcrumbs.displayName = "Breadcrumbs";
+
+export { BreadcrumbItemDataSchema, Breadcrumbs, BreadcrumbsPropsSchema, SeparatorTypeSchema, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbListVariants, breadcrumbsVariants, ellipsisButtonVariants, separatorVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map