@luxfi/ui 8.0.0 → 8.1.0

package/src/apple-cards-carousel.tsx

@@ -0,0 +1,349 @@
+"use client"
+
+import * as React from "react"
+import { Box, css, sx } from '@hanzo/ui'
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import {
+  AnimatePresence,
+  motion,
+  PanInfo,
+  useMotionValue,
+  useTransform,
+} from "motion/react"
+
+import { cn } from "./utils"
+
+import { Button } from "./button"
+import { Card } from "@hanzo/ui"
+
+export interface CarouselCard {
+  id: string
+  title: string
+  subtitle?: string
+  description?: string
+  image?: string
+  gradient?: string
+  content?: React.ReactNode
+}
+
+interface AppleCardsCarouselProps {
+  cards: CarouselCard[]
+  autoPlay?: boolean
+  autoPlayInterval?: number
+  className?: string
+  cardClassName?: string
+  showArrows?: boolean
+  showDots?: boolean
+  parallaxOffset?: number
+  stackOffset?: number
+  stackScale?: number
+  swipeThreshold?: number
+}
+
+export function AppleCardsCarousel({
+  cards,
+  autoPlay = false,
+  autoPlayInterval = 5000,
+  className,
+  cardClassName,
+  showArrows = true,
+  showDots = true,
+  parallaxOffset = 50,
+  stackOffset = 10,
+  stackScale = 0.95,
+  swipeThreshold = 50,
+}: AppleCardsCarouselProps) {
+  const [currentIndex, setCurrentIndex] = React.useState(0)
+  const [isAutoPlaying, setIsAutoPlaying] = React.useState(autoPlay)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const dragX = useMotionValue(0)
+
+  // Calculate card positions
+  const getCardStyle = (index: number) => {
+    const offset = index - currentIndex
+    const absOffset = Math.abs(offset)
+    const sign = Math.sign(offset)
+
+    // Only show 3 cards at a time for performance
+    if (absOffset > 2) {
+      return {
+        display: "none",
+        x: 0,
+        scale: 1,
+        opacity: 0,
+        zIndex: 0,
+      }
+    }
+
+    const baseX = offset * stackOffset
+    const scale = Math.pow(stackScale, absOffset)
+    const opacity = Math.max(0, 1 - absOffset * 0.3)
+    const zIndex = cards.length - absOffset
+
+    return {
+      display: "block",
+      x: baseX,
+      scale,
+      opacity,
+      zIndex,
+    }
+  }
+
+  // Navigate to next card
+  const goToNext = React.useCallback(() => {
+    setCurrentIndex((prev) => (prev + 1) % cards.length)
+  }, [cards.length])
+
+  // Navigate to previous card
+  const goToPrevious = React.useCallback(() => {
+    setCurrentIndex((prev) => (prev - 1 + cards.length) % cards.length)
+  }, [cards.length])
+
+  // Navigate to specific card
+  const goToCard = React.useCallback((index: number) => {
+    setCurrentIndex(index)
+  }, [])
+
+  // Handle drag end
+  const handleDragEnd = React.useCallback(
+    (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+      const { offset, velocity } = info
+
+      // Determine if we should navigate based on drag distance and velocity
+      if (Math.abs(offset.x) > swipeThreshold || Math.abs(velocity.x) > 500) {
+        if (offset.x > 0) {
+          goToPrevious()
+        } else {
+          goToNext()
+        }
+      }
+    },
+    [goToNext, goToPrevious, swipeThreshold]
+  )
+
+  // Auto-play functionality
+  React.useEffect(() => {
+    if (!isAutoPlaying) return
+
+    const interval = setInterval(goToNext, autoPlayInterval)
+
+    return () => clearInterval(interval)
+  }, [isAutoPlaying, goToNext, autoPlayInterval])
+
+  // Pause auto-play on hover
+  const handleMouseEnter = React.useCallback(() => {
+    if (autoPlay) {
+      setIsAutoPlaying(false)
+    }
+  }, [autoPlay])
+
+  const handleMouseLeave = React.useCallback(() => {
+    if (autoPlay) {
+      setIsAutoPlaying(true)
+    }
+  }, [autoPlay])
+
+  // Keyboard navigation
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft") {
+        goToPrevious()
+      } else if (e.key === "ArrowRight") {
+        goToNext()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [goToNext, goToPrevious])
+
+  return (
+    <Box
+      ref={containerRef}
+      className={cn("relative w-full max-w-6xl mx-auto px-4 py-8", className)}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Cards Container */}
+      <Box className="relative h-[400px] md:h-[500px] lg:h-[600px] flex items-center justify-center">
+        <AnimatePresence mode="popLayout">
+          {cards.map((card, index) => {
+            const style = getCardStyle(index)
+            const isActive = index === currentIndex
+
+            return (
+              <motion.div
+                key={card.id}
+                className={cn(
+                  "absolute inset-0 w-full h-full",
+                  !isActive && "pointer-events-none"
+                )}
+                initial={false}
+                animate={{
+                  x: style.x,
+                  scale: style.scale,
+                  opacity: style.opacity,
+                  zIndex: style.zIndex,
+                }}
+                transition={{
+                  type: "spring",
+                  stiffness: 300,
+                  damping: 30,
+                }}
+                drag={isActive ? "x" : false}
+                dragSnapToOrigin
+                dragElastic={0.2}
+                onDragEnd={handleDragEnd}
+                whileDrag={{ cursor: "grabbing" }}
+                style={{
+                  x: dragX,
+                  display: style.display,
+                }}
+              >
+                <Card
+                  className={cn(
+                    "relative w-full h-full overflow-hidden cursor-grab",
+                    "bg-gradient-to-br from-white to-[var(--color-border-divider)] dark:from-[var(--color-border-divider)] dark:to-[var(--color-border-divider)]",
+                    "shadow-2xl hover:shadow-3xl transition-shadow duration-300",
+                    cardClassName
+                  )}
+                  style={{
+                    background: card.gradient,
+                  }}
+                >
+                  {/* Parallax Background Image */}
+                  {card.image && (
+                    <motion.div
+                      className="absolute inset-0 w-full h-full"
+                      style={{
+                        x: useTransform(
+                          dragX,
+                          [-200, 0, 200],
+                          [parallaxOffset, 0, -parallaxOffset]
+                        ),
+                      }}
+                    >
+                      <Box tag="img"
+                        src={card.image}
+                        alt={card.title}
+                        className="w-full h-full object-cover"
+                      />
+                      <Box className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" />
+                    </motion.div>
+                  )}
+
+                  {/* Card Content */}
+                  <Box className="relative z-10 flex flex-col justify-end h-full p-8 md:p-12">
+                    {card.content ? (
+                      card.content
+                    ) : (
+                      <>
+                        <motion.h3
+                          className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-2"
+                          initial={{ opacity: 0, y: 20 }}
+                          animate={{ opacity: isActive ? 1 : 0.7, y: 0 }}
+                          transition={{ delay: 0.1 }}
+                        >
+                          {card.title}
+                        </motion.h3>
+
+                        {card.subtitle && (
+                          <motion.p
+                            className="text-xl md:text-2xl text-white/80 mb-4"
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: isActive ? 1 : 0.7, y: 0 }}
+                            transition={{ delay: 0.2 }}
+                          >
+                            {card.subtitle}
+                          </motion.p>
+                        )}
+
+                        {card.description && (
+                          <motion.p
+                            className="text-base md:text-lg text-white/70 max-w-2xl"
+                            initial={{ opacity: 0, y: 20 }}
+                            animate={{ opacity: isActive ? 1 : 0.7, y: 0 }}
+                            transition={{ delay: 0.3 }}
+                          >
+                            {card.description}
+                          </motion.p>
+                        )}
+                      </>
+                    )}
+                  </Box>
+                </Card>
+              </motion.div>
+            )
+          })}
+        </AnimatePresence>
+      </Box>
+
+      {/* Navigation Arrows */}
+      {showArrows && (
+        <>
+          <Button
+            variant="ghost"
+            size="icon"
+            {...sx(cn(
+              "absolute left-4 top-1/2 -translate-y-1/2 z-20",
+              "bg-white/10 backdrop-blur-md hover:bg-white/20",
+              "text-white border border-white/20",
+              "hidden md:flex"
+            ))}
+            onClick={goToPrevious}
+          >
+            <ChevronLeft style={css('h-6 w-6')} />
+            <Box tag="span" className="sr-only">Previous card</Box>
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            {...sx(cn(
+              "absolute right-4 top-1/2 -translate-y-1/2 z-20",
+              "bg-white/10 backdrop-blur-md hover:bg-white/20",
+              "text-white border border-white/20",
+              "hidden md:flex"
+            ))}
+            onClick={goToNext}
+          >
+            <ChevronRight style={css('h-6 w-6')} />
+            <Box tag="span" className="sr-only">Next card</Box>
+          </Button>
+        </>
+      )}
+
+      {/* Dot Indicators */}
+      {showDots && (
+        <Box className="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex gap-2">
+          {cards.map((_, index) => (
+            <Box tag="button"
+              key={index}
+              className={cn(
+                "w-2 h-2 rounded-full transition-all duration-300",
+                "bg-white/40 hover:bg-white/60",
+                index === currentIndex && "w-8 bg-white"
+              )}
+              onClick={() => goToCard(index)}
+            >
+              <Box tag="span" className="sr-only">Go to card {index + 1}</Box>
+            </Box>
+          ))}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+// Preset gradients for demo purposes
+export const gradientPresets = {
+  sunset: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+  ocean: "linear-gradient(135deg, #667eea 0%, #4ca1af 100%)",
+  fire: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+  forest: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
+  galaxy: "linear-gradient(135deg, #7303c0 0%, #ec38bc 50%, #fdeff9 100%)",
+  aurora: "linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)",
+  peach: "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)",
+  lavender: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
+}

package/src/apple-hello-effect.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+import { motion } from "motion/react"
+
+import { cn } from "./utils"
+
+interface AppleHelloEffectProps extends React.HTMLAttributes<HTMLDivElement> {
+  text?: string
+  duration?: number
+}
+
+const AppleHelloEffect = React.forwardRef<
+  HTMLDivElement,
+  AppleHelloEffectProps
+>(({ className, text = "Hello", duration = 2, ...props }, ref) => {
+  const letters = text.split("")
+
+  return (
+    <Box
+      ref={ref}
+      className={cn(
+        "relative flex items-center justify-center text-6xl font-bold",
+        className
+      )}
+      {...props}
+    >
+      {letters.map((letter, index) => (
+        <motion.span
+          key={index}
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{
+            duration: duration,
+            delay: index * 0.1,
+            ease: [0.215, 0.61, 0.355, 1],
+          }}
+          className="inline-block"
+        >
+          {letter}
+        </motion.span>
+      ))}
+    </Box>
+  )
+})
+
+AppleHelloEffect.displayName = "AppleHelloEffect"
+
+export { AppleHelloEffect }

package/src/auth.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { configureIam, handleCallback, logout, startLogin } from '@hanzo/iam/browser';
+import { Box } from '@hanzo/ui'
 import * as React from 'react';
 
 import { IdentityProvider, type IdentityAuth } from './identity';
@@ -181,18 +182,18 @@ export const AuthCallback = ({
   }, []);
 
   return (
-    <div className="flex min-h-[50vh] items-center justify-center px-4">
-      <div className="w-full max-w-sm text-center">
+    <Box className="flex min-h-[50vh] items-center justify-center px-4">
+      <Box className="w-full max-w-sm text-center">
         { error ? (
           <>
-            <p className="mb-2 text-lg font-semibold text-[var(--color-text-error)]">Sign-in failed</p>
-            <p className="mb-6 text-sm text-[var(--color-text-secondary)]">{ error }</p>
-            <a href={ retryPath } className="text-sm underline underline-offset-4">Try again</a>
+            <Box tag="p" className="mb-2 text-lg font-semibold text-[var(--color-text-error)]">Sign-in failed</Box>
+            <Box tag="p" className="mb-6 text-sm text-[var(--color-text-secondary)]">{ error }</Box>
+            <Box tag="a" href={ retryPath } className="text-sm underline underline-offset-4">Try again</Box>
           </>
         ) : (
-          <p className="text-sm text-[var(--color-text-secondary)]">Completing sign in…</p>
+          <Box tag="p" className="text-sm text-[var(--color-text-secondary)]">Completing sign in…</Box>
         ) }
-      </div>
-    </div>
+      </Box>
+    </Box>
   );
 };

package/src/avatar.tsx

@@ -23,7 +23,7 @@ const SIZE: Record<AvatarSize, { width: number; height: number; fontSize: number
 
 // The ring colour matches the page ground rather than staying a fixed white,
 // so a stack of overlapping avatars reads as cut out of the page in both
-// themes — the same job `ring-white dark:ring-gray-900` did.
+// themes — the same job `ring-white dark:ring-[var(--color-border-divider)]` did.
 const RING = 'var(--color-bg-body)' as never;
 
 const VARIANT: Record<AvatarVariant, Record<string, unknown>> = {

package/src/badge.tsx

@@ -61,6 +61,27 @@ const COLOR_PALETTE: Record<ColorPalette, { bg: string; fg: string }> = {
   bright_pink: { bg: 'var(--color-badge-bright-pink-bg)', fg: 'var(--color-badge-bright-pink-fg)' },
 };
 
+export type BadgeVariant = 'subtle' | 'solid' | 'outline';
+
+/**
+ * How much of the palette the chip shows.
+ *
+ * `subtle` tints the ground and keeps the palette's own foreground; `solid`
+ * inverts that, so the chip is the colour and the label reads on it; `outline`
+ * spends the colour on a border and leaves the ground alone, for a chip that has
+ * to sit on a surface it must not compete with.
+ */
+const TONE: Record<BadgeVariant, (p: { bg: string; fg: string }) => Record<string, unknown>> = {
+  subtle: (p) => ({ backgroundColor: p.bg, color: p.fg, borderWidth: 0 }),
+  solid: (p) => ({ backgroundColor: p.fg, color: p.bg, borderWidth: 0 }),
+  outline: (p) => ({
+    backgroundColor: 'transparent',
+    color: p.fg,
+    borderWidth: 1,
+    borderColor: p.fg,
+  }),
+};
+
 export interface BadgeProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
   readonly loading?: boolean;
@@ -68,17 +89,10 @@ export interface BadgeProps
   readonly endElement?: React.ReactNode;
   readonly truncated?: boolean;
   readonly colorPalette?: ColorPalette;
-  readonly variant?: 'subtle' | 'solid';
+  readonly variant?: BadgeVariant;
   readonly size?: 'sm' | 'md' | 'lg';
-  // Legacy Chakra style-prop shims
-  readonly flexShrink?: number;
-  readonly gap?: number | string;
-  readonly ml?: number | string | Record<string, number>;
-  readonly mr?: number | string;
 }
 
-const S = 4; // Chakra spacing scale
-
 export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
   function Badge(props, ref) {
     const {
@@ -87,33 +101,16 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
       children,
       truncated = false,
       endElement,
-      variant: _variant,
+      variant = 'subtle',
       size = 'md',
       colorPalette = 'gray',
       className,
-      flexShrink: _flexShrink,
-      gap: _gap,
-      ml: _ml,
-      mr: _mr,
-      style: styleProp,
+      style: badgeStyle,
       ...rest
     } = props;
 
-    const shimStyle: React.CSSProperties = { ...styleProp };
-    if (_flexShrink !== undefined) shimStyle.flexShrink = _flexShrink;
-    if (_gap !== undefined) shimStyle.gap = typeof _gap === 'number' ? `${ _gap * S }px` : _gap;
-    if (_ml !== undefined) {
-      if (typeof _ml === 'object') {
-        const obj = _ml as Record<string, number>;
-        shimStyle.marginLeft = `${ (obj.base ?? obj.lg ?? 0) * S }px`;
-      } else {
-        shimStyle.marginLeft = typeof _ml === 'number' ? `${ _ml * S }px` : _ml;
-      }
-    }
-    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * S }px` : _mr;
-    const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
-
     const palette = COLOR_PALETTE[colorPalette];
+    const tone = TONE[variant](palette);
 
     const child = children ? (
       // `ellipsis` is gui Text's own built-in variant for single-line
@@ -121,7 +118,7 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
       // white-space/max-width rule Tailwind's `text-ellipsis` did, but
       // through the component's own variants (guaranteed to compile),
       // rather than naming each longhand as a separate style prop.
-      <Text ellipsis { ...SIZE_TEXT[size] } color={ palette.fg as never }>
+      <Text ellipsis { ...SIZE_TEXT[size] } color={ tone.color as never }>
         { children }
       </Text>
     ) : null;
@@ -144,7 +141,7 @@ export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
         maxWidth="100%"
         userSelect="text"
         { ...SIZE[size] }
-        backgroundColor={ palette.bg as never }
+        { ...tone }
         className={ className }
         style={ badgeStyle }
         { ...(rest as object) }

package/src/banner.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import * as React from "react"
+import { Box, VariantProps, css, variants } from '@hanzo/ui'
+import { X } from "lucide-react"
+
+import { cn } from "./utils"
+
+const bannerVariants = variants(
+  "relative w-full border-b px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        info: "border-[var(--color-link-primary)]/50 bg-[var(--color-link-primary)] text-[var(--color-link-primary)] dark:bg-[var(--color-link-primary)] dark:text-[var(--color-link-primary)] [&>svg]:text-[var(--color-link-primary)] dark:[&>svg]:text-[var(--color-link-primary)]",
+        success:
+          "border-[var(--lux-state-success)]/50 bg-[var(--lux-state-success)] text-[var(--lux-state-success)] dark:bg-[var(--lux-state-success)] dark:text-[var(--lux-state-success)] [&>svg]:text-[var(--lux-state-success)] dark:[&>svg]:text-[var(--lux-state-success)]",
+        warning:
+          "border-[var(--lux-state-notice)]/50 bg-[var(--lux-state-notice)] text-[var(--lux-state-notice)] dark:bg-[var(--lux-state-notice)] dark:text-[var(--lux-state-notice)] [&>svg]:text-[var(--lux-state-notice)] dark:[&>svg]:text-[var(--lux-state-notice)]",
+        error:
+          "border-[var(--lux-state-error)]/50 bg-[var(--lux-state-error)] text-[var(--lux-state-error)] dark:bg-[var(--lux-state-error)] dark:text-[var(--lux-state-error)] [&>svg]:text-[var(--lux-state-error)] dark:[&>svg]:text-[var(--lux-state-error)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BannerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bannerVariants> {
+  onClose?: () => void
+}
+
+const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
+  ({ className, variant, onClose, children, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        role="alert"
+        className={cn(bannerVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+        {onClose && (
+          <Box tag="button"
+            type="button"
+            onClick={onClose}
+            className="absolute right-4 top-3 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/5"
+          >
+            <X style={css('h-4 w-4')} />
+            <Box tag="span" className="sr-only">Close</Box>
+          </Box>
+        )}
+      </Box>
+    )
+  }
+)
+Banner.displayName = "Banner"
+
+export { Banner, bannerVariants }

package/src/breadcrumb-and-filters-navigation-bar.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface BreadcrumbAndFiltersNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  items?: Array<{ label: string; href: string }>
+}
+
+const BreadcrumbAndFiltersNavigationBar = React.forwardRef<
+  HTMLElement,
+  BreadcrumbAndFiltersNavigationBarProps
+>(({ className, items = [], ...props }, ref) => {
+  return (
+    <Box tag="nav"
+      ref={ref}
+      className={cn("border-b bg-background", className)}
+      {...props}
+    >
+      <Box className="container flex h-16 items-center gap-6">
+        {items.map((item) => (
+          <Box tag="a"
+            key={item.href}
+            href={item.href}
+            className="text-sm font-medium transition-colors hover:text-primary"
+          >
+            {item.label}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+})
+BreadcrumbAndFiltersNavigationBar.displayName =
+  "BreadcrumbAndFiltersNavigationBar"
+
+export { BreadcrumbAndFiltersNavigationBar }

package/src/breadcrumb-navigation-bar.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { Box, css } from '@hanzo/ui'
+import { ChevronRight } from "lucide-react"
+
+import { cn } from "./utils"
+
+export interface BreadcrumbNavigationBarProps
+  extends React.HTMLAttributes<HTMLElement> {
+  items?: Array<{ label: string; href?: string }>
+}
+
+const BreadcrumbNavigationBar = React.forwardRef<
+  HTMLElement,
+  BreadcrumbNavigationBarProps
+>(({ className, items = [], ...props }, ref) => {
+  return (
+    <Box tag="nav" ref={ref} className={cn("border-b", className)} {...props}>
+      <Box className="container flex h-12 items-center">
+        <Box tag="ol" className="flex items-center gap-2 text-sm">
+          {items.map((item, index) => (
+            <Box tag="li" key={index} className="flex items-center gap-2">
+              {index > 0 && (
+                <ChevronRight style={css('h-4 w-4 text-muted-foreground')} />
+              )}
+              {item.href ? (
+                <Box tag="a" href={item.href} className="hover:text-primary">
+                  {item.label}
+                </Box>
+              ) : (
+                <Box tag="span" className="text-muted-foreground">{item.label}</Box>
+              )}
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </Box>
+  )
+})
+BreadcrumbNavigationBar.displayName = "BreadcrumbNavigationBar"
+
+export { BreadcrumbNavigationBar }