@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/banner.d.cts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const bannerVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "danger" | "default" | "primary" | null | undefined;
+    position?: "inline" | "bottom" | "top" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BannerVariant = "default" | "info" | "success" | "warning" | "danger" | "primary";
+type BannerPosition = "top" | "bottom" | "inline";
+interface BannerProps {
+    variant?: BannerVariant;
+    position?: BannerPosition;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    icon?: ReactNode;
+    action?: ReactNode;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    className?: string;
+    children?: ReactNode;
+    id?: string;
+    style?: React.CSSProperties;
+    role?: string;
+    "aria-label"?: string;
+    "aria-live"?: "off" | "assertive" | "polite";
+}
+declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Banner, type BannerPosition, type BannerProps, type BannerVariant, bannerVariants };

package/dist/components/banner.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+
+declare const bannerVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "danger" | "default" | "primary" | null | undefined;
+    position?: "inline" | "bottom" | "top" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BannerVariant = "default" | "info" | "success" | "warning" | "danger" | "primary";
+type BannerPosition = "top" | "bottom" | "inline";
+interface BannerProps {
+    variant?: BannerVariant;
+    position?: BannerPosition;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+    icon?: ReactNode;
+    action?: ReactNode;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    className?: string;
+    children?: ReactNode;
+    id?: string;
+    style?: React.CSSProperties;
+    role?: string;
+    "aria-label"?: string;
+    "aria-live"?: "off" | "assertive" | "polite";
+}
+declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Banner, type BannerPosition, type BannerProps, type BannerVariant, bannerVariants };

package/dist/components/banner.mjs

@@ -0,0 +1,122 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { slideDown, slideUp } from "../motion/index";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { forwardRef, useState } from "react";
+const bannerVariants = cva(
+  ["w-full flex items-center gap-3 px-4 py-3 text-sm font-medium"],
+  {
+    variants: {
+      variant: {
+        default: "bg-foreground text-background",
+        info: "bg-info text-info-foreground",
+        success: "bg-success text-success-foreground",
+        warning: "bg-warning text-warning-foreground",
+        danger: "bg-danger text-danger-foreground",
+        primary: "bg-primary text-primary-foreground"
+      },
+      position: {
+        top: "sticky top-0 left-0 right-0 z-banner",
+        bottom: "sticky bottom-0 left-0 right-0 z-banner",
+        inline: "rounded-md"
+      }
+    },
+    defaultVariants: { variant: "default", position: "inline" }
+  }
+);
+function XIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+      ]
+    }
+  );
+}
+const Banner = forwardRef(function Banner2({
+  variant = "default",
+  position = "inline",
+  dismissible = false,
+  onDismiss,
+  dismissLabel = "Dismiss",
+  icon,
+  action,
+  visible: controlledVisible,
+  defaultVisible = true,
+  className,
+  children,
+  id,
+  style,
+  role,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive
+}, ref) {
+  const shouldReduce = useReducedMotion();
+  const [internalVisible, setInternalVisible] = useState(defaultVisible);
+  const isVisible = controlledVisible !== void 0 ? controlledVisible : internalVisible;
+  const handleDismiss = () => {
+    if (controlledVisible === void 0) setInternalVisible(false);
+    onDismiss?.();
+  };
+  const slidePreset = position === "bottom" ? slideUp : slideDown;
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isVisible && /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref,
+      className: cn(bannerVariants({ variant, position }), className),
+      variants: shouldReduce ? void 0 : slidePreset.variants,
+      initial: shouldReduce ? { opacity: 0 } : "initial",
+      animate: shouldReduce ? { opacity: 1 } : "animate",
+      exit: shouldReduce ? { opacity: 0 } : "exit",
+      transition: shouldReduce ? { duration: 0.2 } : slidePreset.transition,
+      "data-ds": "",
+      "data-ds-component": "banner",
+      "data-ds-variant": variant,
+      "data-ds-position": position,
+      "data-ds-animated": "",
+      id,
+      style,
+      role,
+      "aria-label": ariaLabel,
+      "aria-live": ariaLive,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0", children }),
+        action && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: action }),
+        dismissible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleDismiss,
+            className: cn(
+              "shrink-0 inline-flex items-center justify-center size-6 rounded-sm",
+              "opacity-70 hover:opacity-100 transition-opacity duration-fast",
+              focusRingClasses
+            ),
+            "aria-label": dismissLabel,
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  ) });
+});
+Banner.displayName = "Banner";
+export {
+  Banner,
+  bannerVariants
+};

package/dist/components/breadcrumb.cjs

@@ -0,0 +1,266 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var breadcrumb_exports = {};
+__export(breadcrumb_exports, {
+  Breadcrumb: () => Breadcrumb,
+  BreadcrumbEllipsis: () => BreadcrumbEllipsis,
+  BreadcrumbItem: () => BreadcrumbItem,
+  BreadcrumbLink: () => BreadcrumbLink,
+  BreadcrumbList: () => BreadcrumbList,
+  BreadcrumbNav: () => BreadcrumbNav,
+  BreadcrumbPage: () => BreadcrumbPage,
+  BreadcrumbSeparator: () => BreadcrumbSeparator
+});
+module.exports = __toCommonJS(breadcrumb_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_focus_ring = require("../utils/focus-ring");
+var import_react = require("react");
+function ChevronRightIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function MoreHorizontalIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+      ]
+    }
+  );
+}
+const Breadcrumb = (0, import_react.forwardRef)(
+  function Breadcrumb2({ "aria-label": ariaLabel = "Breadcrumb", className, children, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "nav",
+      {
+        ref,
+        "aria-label": ariaLabel,
+        className: (0, import_cn.cn)("not-prose", className),
+        "data-ds": "",
+        "data-ds-component": "breadcrumb",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = (0, import_react.forwardRef)(
+  function BreadcrumbList2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ol",
+      {
+        ref,
+        className: (0, import_cn.cn)(
+          "flex flex-wrap items-center gap-1.5",
+          "text-xs leading-4 tracking-wide",
+          "text-muted-foreground",
+          className
+        ),
+        "data-ds": "",
+        "data-ds-component": "breadcrumb-list",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = (0, import_react.forwardRef)(
+  function BreadcrumbItem2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "li",
+      {
+        ref,
+        className: (0, import_cn.cn)("inline-flex items-center gap-1.5", className),
+        "data-ds": "",
+        "data-ds-component": "breadcrumb-item",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = (0, import_react.forwardRef)(function BreadcrumbLink2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      ref,
+      className: (0, import_cn.cn)(
+        "no-underline",
+        "text-muted-foreground",
+        "transition-colors duration-fast",
+        "hover:text-foreground",
+        import_focus_ring.focusRingCompactClasses,
+        "rounded-sm",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "breadcrumb-link",
+      ...rest,
+      children
+    }
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = (0, import_react.forwardRef)(
+  function BreadcrumbPage2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        ref,
+        "aria-current": "page",
+        className: (0, import_cn.cn)("font-medium", "text-foreground", className),
+        "data-ds": "",
+        "data-ds-component": "breadcrumb-page",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = (0, import_react.forwardRef)(function BreadcrumbSeparator2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "li",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: (0, import_cn.cn)(
+        "inline-flex items-center",
+        "text-muted-foreground/60",
+        "[&>svg]:size-3",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "breadcrumb-separator",
+      ...rest,
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRightIcon, {})
+    }
+  );
+});
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = (0, import_react.forwardRef)(function BreadcrumbEllipsis2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      ref,
+      role: "presentation",
+      "aria-hidden": "true",
+      className: (0, import_cn.cn)(
+        "inline-flex items-center justify-center size-5",
+        "text-muted-foreground",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "breadcrumb-ellipsis",
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+});
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+const BreadcrumbNav = (0, import_react.forwardRef)(
+  function BreadcrumbNav2({
+    items,
+    maxItems = Number.POSITIVE_INFINITY,
+    separator,
+    className,
+    ...rest
+  }, ref) {
+    const visibleItems = (0, import_react.useMemo)(() => {
+      if (items.length <= maxItems || maxItems < 2 || !Number.isFinite(maxItems)) {
+        return { items, truncated: false };
+      }
+      const tailCount = maxItems - 2;
+      const first = items[0];
+      const tail = items.slice(items.length - Math.max(tailCount, 1));
+      return {
+        items: [first, ...tail],
+        truncated: true
+      };
+    }, [items, maxItems]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Breadcrumb, { ref, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbList, { children: visibleItems.items.flatMap((item, index) => {
+      const itemKey = item.href ?? `page-${index}`;
+      const isLast = index === visibleItems.items.length - 1;
+      const isFirst = index === 0;
+      const showEllipsis = visibleItems.truncated && isFirst;
+      const elements = [];
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { children: isLast && !item.href ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbLink, { href: item.href, children: item.label }) }, `item-${itemKey}`)
+      );
+      if (showEllipsis) {
+        elements.push(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbSeparator, { children: separator }, "sep-ellipsis-before"),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbEllipsis, {}) }, "ellipsis")
+        );
+      }
+      if (!isLast) {
+        elements.push(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BreadcrumbSeparator, { children: separator }, `sep-${itemKey}`)
+        );
+      }
+      return elements;
+    }) }) });
+  }
+);
+BreadcrumbNav.displayName = "BreadcrumbNav";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbNav,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+});

package/dist/components/breadcrumb.d.cts

@@ -0,0 +1,159 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Custom separator to render between items.
+     * Defaults to a chevron-right icon.
+     */
+    separator?: ReactNode;
+    /**
+     * Accessible label for the breadcrumb navigation landmark.
+     * @default "Breadcrumb"
+     */
+    "aria-label"?: string;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Breadcrumb — the root `<nav>` container for breadcrumb navigation.
+ *
+ * Wraps children in a semantic navigation landmark. Use with
+ * `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, etc.
+ */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+interface BreadcrumbListProps extends React.HTMLAttributes<HTMLOListElement> {
+    /** Additional CSS classes. */
+    className?: string;
+    /** List children. */
+    children?: ReactNode;
+}
+/**
+ * BreadcrumbList — an ordered list containing breadcrumb items.
+ */
+declare const BreadcrumbList: react.ForwardRefExoticComponent<BreadcrumbListProps & react.RefAttributes<HTMLOListElement>>;
+interface BreadcrumbItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbItem — a single item in the breadcrumb trail.
+ */
+declare const BreadcrumbItem: react.ForwardRefExoticComponent<BreadcrumbItemProps & react.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbLink — a navigable link within a breadcrumb item.
+ *
+ * Renders as an `<a>` element. For framework-specific link components
+ * (e.g. Next.js `Link`), wrap the framework component or pass it via
+ * composition:
+ *
+ * ```tsx
+ * <BreadcrumbItem>
+ *   <Link href="/docs" className="...breadcrumb link styles...">Docs</Link>
+ * </BreadcrumbItem>
+ * ```
+ */
+declare const BreadcrumbLink: react.ForwardRefExoticComponent<BreadcrumbLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+interface BreadcrumbPageProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbPage — the current (non-linked) page in the breadcrumb trail.
+ *
+ * Rendered with `aria-current="page"` and a distinct foreground color
+ * to indicate the user's current location.
+ */
+declare const BreadcrumbPage: react.ForwardRefExoticComponent<BreadcrumbPageProps & react.RefAttributes<HTMLSpanElement>>;
+interface BreadcrumbSeparatorProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** Custom separator content. Defaults to a chevron-right icon. */
+    children?: ReactNode;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbSeparator — visual divider between breadcrumb items.
+ *
+ * Defaults to a chevron-right icon. Pass custom children (string or
+ * ReactNode) to use a different separator.
+ */
+declare const BreadcrumbSeparator: react.ForwardRefExoticComponent<BreadcrumbSeparatorProps & react.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * BreadcrumbEllipsis — a "…" placeholder indicating truncated items.
+ *
+ * Used by `BreadcrumbNav` when items exceed `maxItems`. Can also be
+ * used manually in the composable API.
+ */
+declare const BreadcrumbEllipsis: react.ForwardRefExoticComponent<BreadcrumbEllipsisProps & react.RefAttributes<HTMLSpanElement>>;
+interface BreadcrumbNavItem {
+    /** Display label for the breadcrumb segment. */
+    label: ReactNode;
+    /**
+     * URL to navigate to. When omitted, the item is rendered as the
+     * current page (non-linked, last item).
+     */
+    href?: string;
+}
+interface BreadcrumbNavProps extends Omit<BreadcrumbProps, "children"> {
+    /** Breadcrumb items in order from root to current page. */
+    items: BreadcrumbNavItem[];
+    /**
+     * Maximum number of items to show before collapsing middle items
+     * into an ellipsis. Set to 0 or Infinity to disable truncation.
+     *
+     * When truncating, the first item and the last `maxItems - 2` items
+     * are always visible, with an ellipsis in between.
+     *
+     * @default Infinity (no truncation)
+     */
+    maxItems?: number;
+    /**
+     * Custom separator to use between items.
+     * @default <ChevronRightIcon /> (via BreadcrumbSeparator)
+     */
+    separator?: ReactNode;
+    /** Additional CSS classes on the root nav. */
+    className?: string;
+}
+/**
+ * BreadcrumbNav — a composed breadcrumb component that renders a full
+ * breadcrumb trail from an array of items.
+ *
+ * Handles separator insertion, truncation with ellipsis, and
+ * current-page detection automatically.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbNav
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Products", href: "/products" },
+ *     { label: "Electronics", href: "/products/electronics" },
+ *     { label: "Laptops", href: "/products/electronics/laptops" },
+ *     { label: "MacBook Pro" },
+ *   ]}
+ *   maxItems={4}
+ * />
+ * // Renders: Home > … > Laptops > MacBook Pro
+ *
+ * <BreadcrumbNav
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Docs", href: "/docs" },
+ *     { label: "Getting Started" },
+ *   ]}
+ * />
+ * // Renders: Home > Docs > Getting Started
+ * ```
+ */
+declare const BreadcrumbNav: react.ForwardRefExoticComponent<BreadcrumbNavProps & react.RefAttributes<HTMLElement>>;
+
+export { Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbNav, type BreadcrumbNavItem, type BreadcrumbNavProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps };