@mohasinac/appkit 2.1.3 → 2.2.0

package/dist/ui/components/Avatar.style.css

@@ -0,0 +1,73 @@
+/* Avatar — circular image or initials display with size variants */
+
+.appkit-avatar {
+  border-radius: 9999px;
+  object-fit: cover;
+  background: #f4f4f5;
+}
+
+.appkit-avatar--fallback {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: #e4e4e7;
+  font-weight: 500;
+  color: #3f3f46;
+}
+
+/* Sizes */
+.appkit-avatar--xs {
+  height: 1.5rem;
+  width: 1.5rem;
+  font-size: 10px;
+}
+.appkit-avatar--sm {
+  height: 2rem;
+  width: 2rem;
+  font-size: 0.75rem;
+}
+.appkit-avatar--md {
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 0.875rem;
+}
+.appkit-avatar--lg {
+  height: 3rem;
+  width: 3rem;
+  font-size: 1rem;
+}
+
+/* Group */
+.appkit-avatar-group {
+  display: flex;
+}
+.appkit-avatar-group > * + * {
+  margin-left: -0.5rem;
+}
+.appkit-avatar-group__overflow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  ring: 2px solid white;
+  background: #d4d4d8;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #3f3f46;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .appkit-avatar {
+    background: #1e293b;
+  }
+  .appkit-avatar--fallback {
+    background: #334155;
+    color: #e2e8f0;
+  }
+  .appkit-avatar-group__overflow {
+    background: #475569;
+    color: #e2e8f0;
+  }
+}

package/dist/ui/components/AvatarDisplay.d.ts

@@ -0,0 +1,10 @@
+import type { ImageCropData } from "../../features/media";
+export interface AvatarDisplayProps {
+    cropData: ImageCropData | null;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
+    className?: string;
+    alt?: string;
+    displayName?: string | null;
+    email?: string | null;
+}
+export declare function AvatarDisplay({ cropData, size, className, alt, displayName, email, }: AvatarDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/AvatarDisplay.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Span } from "./Typography";
+const UI_AVATAR_DISPLAY = {
+    base: "appkit-avatar-display",
+    sizes: {
+        sm: "appkit-avatar-display--sm",
+        md: "appkit-avatar-display--md",
+        lg: "appkit-avatar-display--lg",
+        xl: "appkit-avatar-display--xl",
+        "2xl": "appkit-avatar-display--2xl",
+    },
+    initials: "appkit-avatar-display--initials",
+    initialsText: "appkit-avatar-display__initials",
+    image: "appkit-avatar-display--image",
+    imageInner: "appkit-avatar-display__image",
+};
+export function AvatarDisplay({ cropData, size = "md", className = "", alt = "Profile avatar", displayName, email, }) {
+    const initials = (() => {
+        if (displayName?.trim()) {
+            const parts = displayName.trim().split(" ").filter(Boolean);
+            if (parts.length >= 2) {
+                return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+            }
+            return parts[0].slice(0, 2).toUpperCase();
+        }
+        if (email)
+            return email.slice(0, 2).toUpperCase();
+        return "U";
+    })();
+    if (!cropData?.url) {
+        return (_jsx("div", { role: "img", "aria-label": alt, className: [
+                UI_AVATAR_DISPLAY.base,
+                UI_AVATAR_DISPLAY.sizes[size],
+                UI_AVATAR_DISPLAY.initials,
+                className,
+            ]
+                .filter(Boolean)
+                .join(" "), children: _jsx(Span, { className: UI_AVATAR_DISPLAY.initialsText, children: initials }) }));
+    }
+    return (_jsx("div", { role: "img", "aria-label": alt, className: [
+            UI_AVATAR_DISPLAY.base,
+            UI_AVATAR_DISPLAY.sizes[size],
+            UI_AVATAR_DISPLAY.image,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: _jsx("div", { className: UI_AVATAR_DISPLAY.imageInner, style: {
+                backgroundImage: `url(${cropData.url})`,
+                backgroundSize: "cover",
+                width: `${(cropData.zoom || 1) * 100}%`,
+                height: `${(cropData.zoom || 1) * 100}%`,
+                left: `${cropData.position?.x || 50}%`,
+                top: `${cropData.position?.y || 50}%`,
+            } }) }));
+}

package/dist/ui/components/AvatarDisplay.style.css

@@ -0,0 +1,46 @@
+/* AvatarDisplay — avatar with crop/zoom or initials fallback */
+
+.appkit-avatar-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 9999px;
+}
+
+/* Sizes */
+.appkit-avatar-display--sm { height: 2rem; width: 2rem; }
+.appkit-avatar-display--md { height: 3rem; width: 3rem; }
+.appkit-avatar-display--lg { height: 4rem; width: 4rem; }
+.appkit-avatar-display--xl { height: 6rem; width: 6rem; }
+.appkit-avatar-display--2xl { height: 8rem; width: 8rem; }
+
+/* Initials fallback */
+.appkit-avatar-display--initials {
+  background: linear-gradient(to bottom right, #3b82f6, #4f46e5);
+}
+
+.appkit-avatar-display__initials {
+  user-select: none;
+  font-weight: 600;
+  color: white;
+}
+
+/* Image variant */
+.appkit-avatar-display--image {
+  position: relative;
+  background-color: #f4f4f5;
+}
+
+:is(.dark) .appkit-avatar-display--image {
+  background-color: #1e293b;
+}
+
+.appkit-avatar-display__image {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  transform: translate(-50%, -50%);
+  background-position: center;
+  background-repeat: no-repeat;
+}

package/dist/ui/components/BackgroundRenderer.d.ts

@@ -0,0 +1,15 @@
+export interface BackgroundConfig {
+    type: "color" | "gradient" | "image" | "video";
+    value: string;
+    overlay?: {
+        enabled: boolean;
+        color: string;
+        opacity: number;
+    };
+}
+export interface BackgroundRendererProps {
+    mode: "light" | "dark";
+    lightMode: BackgroundConfig;
+    darkMode: BackgroundConfig;
+}
+export declare function BackgroundRenderer({ mode, lightMode, darkMode, }: BackgroundRendererProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/BackgroundRenderer.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+export function BackgroundRenderer({ mode, lightMode, darkMode, }) {
+    const videoRef = useRef(null);
+    const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+    const config = mode === "dark" ? darkMode : lightMode;
+    useEffect(() => {
+        if (config.type !== "video")
+            return;
+        setIsVideoLoaded(false);
+        videoRef.current?.load();
+    }, [config.type, config.value]);
+    const getBackgroundStyle = () => {
+        switch (config.type) {
+            case "color":
+                return { backgroundColor: config.value };
+            case "gradient":
+                return { background: config.value };
+            case "image":
+                return {
+                    backgroundImage: `url('${config.value}')`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                    backgroundAttachment: "fixed",
+                };
+            case "video":
+            default:
+                return {};
+        }
+    };
+    const overlayStyle = config.overlay?.enabled
+        ? {
+            backgroundColor: config.overlay.color,
+            opacity: config.overlay.opacity,
+        }
+        : { display: "none" };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-bg-renderer", style: getBackgroundStyle(), children: config.type === "video" && (_jsxs("video", { ref: videoRef, autoPlay: true, loop: true, muted: true, playsInline: true, onLoadedData: () => setIsVideoLoaded(true), className: `appkit-bg-renderer__video ${isVideoLoaded
+                        ? "appkit-bg-renderer__video--loaded"
+                        : "appkit-bg-renderer__video--loading"}`, children: [_jsx("source", { src: config.value, type: "video/mp4" }), "Your browser does not support the video tag."] })) }), _jsx("div", { className: "appkit-bg-renderer__overlay", style: overlayStyle })] }));
+}

package/dist/ui/components/BackgroundRenderer.style.css

@@ -0,0 +1,31 @@
+/* BackgroundRenderer — fullscreen background layer with video/overlay support */
+
+.appkit-bg-renderer {
+  position: fixed;
+  inset: 0;
+  z-index: -10;
+  transition: all 0.5s ease;
+}
+
+.appkit-bg-renderer__video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.5s ease;
+}
+
+.appkit-bg-renderer__video--loading {
+  opacity: 0;
+}
+
+.appkit-bg-renderer__video--loaded {
+  opacity: 1;
+}
+
+.appkit-bg-renderer__overlay {
+  position: fixed;
+  inset: 0;
+  z-index: -5;
+  transition: all 0.5s ease;
+  pointer-events: none;
+}

package/dist/ui/components/Badge.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+/**
+ * Badge — compact label with ring border variants for status, roles, and categories.
+ *
+ * Extracted from src/components/ui/Badge.tsx for @mohasinac/ui.
+ * Theme values inlined from THEME_CONSTANTS.badge and THEME_CONSTANTS.colors.badge.
+ */
+declare const BADGE_CLASSES: {
+    readonly active: "appkit-badge appkit-badge--active";
+    readonly inactive: "appkit-badge appkit-badge--inactive";
+    readonly pending: "appkit-badge appkit-badge--pending";
+    readonly approved: "appkit-badge appkit-badge--approved";
+    readonly rejected: "appkit-badge appkit-badge--rejected";
+    readonly success: "appkit-badge appkit-badge--success";
+    readonly warning: "appkit-badge appkit-badge--warning";
+    readonly danger: "appkit-badge appkit-badge--danger";
+    readonly info: "appkit-badge appkit-badge--info";
+    readonly admin: "appkit-badge appkit-badge--admin";
+    readonly moderator: "appkit-badge appkit-badge--moderator";
+    readonly seller: "appkit-badge appkit-badge--seller";
+    readonly user: "appkit-badge appkit-badge--user";
+    readonly default: "appkit-badge appkit-badge--default";
+    readonly primary: "appkit-badge appkit-badge--primary";
+    readonly secondary: "appkit-badge appkit-badge--secondary";
+};
+export type BadgeVariant = keyof typeof BADGE_CLASSES;
+export interface BadgeProps {
+    children: React.ReactNode;
+    variant?: BadgeVariant;
+    className?: string;
+}
+export declare function Badge({ children, variant, className, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/components/Badge.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Span } from "./Typography";
+/**
+ * Badge — compact label with ring border variants for status, roles, and categories.
+ *
+ * Extracted from src/components/ui/Badge.tsx for @mohasinac/ui.
+ * Theme values inlined from THEME_CONSTANTS.badge and THEME_CONSTANTS.colors.badge.
+ */
+// Inlined from THEME_CONSTANTS.badge — full ring-border variants
+const BADGE_CLASSES = {
+    // Status badges
+    active: "appkit-badge appkit-badge--active",
+    inactive: "appkit-badge appkit-badge--inactive",
+    pending: "appkit-badge appkit-badge--pending",
+    approved: "appkit-badge appkit-badge--approved",
+    rejected: "appkit-badge appkit-badge--rejected",
+    // Semantic badges
+    success: "appkit-badge appkit-badge--success",
+    warning: "appkit-badge appkit-badge--warning",
+    danger: "appkit-badge appkit-badge--danger",
+    info: "appkit-badge appkit-badge--info",
+    // Role badges
+    admin: "appkit-badge appkit-badge--admin",
+    moderator: "appkit-badge appkit-badge--moderator",
+    seller: "appkit-badge appkit-badge--seller",
+    user: "appkit-badge appkit-badge--user",
+    // Legacy / generic variants
+    default: "appkit-badge appkit-badge--default",
+    primary: "appkit-badge appkit-badge--primary",
+    secondary: "appkit-badge appkit-badge--secondary",
+};
+export function Badge({ children, variant = "default", className = "", }) {
+    return (_jsx(Span, { className: `${BADGE_CLASSES[variant]} ${className}`, children: children }));
+}

package/dist/ui/components/Badge.style.css

@@ -0,0 +1,114 @@
+.appkit-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 1px solid transparent;
+}
+
+.appkit-badge--active,
+.appkit-badge--approved,
+.appkit-badge--success {
+  background: #ecfdf5;
+  color: #047857;
+  border-color: rgba(16, 185, 129, 0.25);
+}
+
+.appkit-badge--inactive,
+.appkit-badge--default,
+.appkit-badge--user {
+  background: #f4f4f5;
+  color: #52525b;
+  border-color: rgba(113, 113, 122, 0.2);
+}
+
+.appkit-badge--pending,
+.appkit-badge--warning {
+  background: #fffbeb;
+  color: #b45309;
+  border-color: rgba(245, 158, 11, 0.25);
+}
+
+.appkit-badge--danger,
+.appkit-badge--rejected {
+  background: #fff1f2;
+  color: #be123c;
+  border-color: rgba(244, 63, 94, 0.25);
+}
+
+.appkit-badge--info,
+.appkit-badge--moderator {
+  background: #f0f9ff;
+  color: #0369a1;
+  border-color: rgba(14, 165, 233, 0.25);
+}
+
+.appkit-badge--admin {
+  background: #faf5ff;
+  color: #7e22ce;
+  border-color: rgba(168, 85, 247, 0.25);
+}
+
+.appkit-badge--seller {
+  background: #f0fdfa;
+  color: #0f766e;
+  border-color: rgba(20, 184, 166, 0.25);
+}
+
+.appkit-badge--primary,
+.appkit-badge--secondary {
+  background: #f3ffe3;
+  color: #3e7708;
+  border-color: rgba(101, 196, 8, 0.25);
+}
+
+.dark .appkit-badge--active,
+.dark .appkit-badge--approved,
+.dark .appkit-badge--success {
+  background: rgba(6, 78, 59, 0.35);
+  color: #6ee7b7;
+}
+
+.dark .appkit-badge--inactive,
+.dark .appkit-badge--default,
+.dark .appkit-badge--user {
+  background: #1e293b;
+  color: #cbd5e1;
+}
+
+.dark .appkit-badge--pending,
+.dark .appkit-badge--warning {
+  background: rgba(120, 53, 15, 0.35);
+  color: #fcd34d;
+}
+
+.dark .appkit-badge--danger,
+.dark .appkit-badge--rejected {
+  background: rgba(136, 19, 55, 0.35);
+  color: #fda4af;
+}
+
+.dark .appkit-badge--info,
+.dark .appkit-badge--moderator {
+  background: rgba(12, 74, 110, 0.35);
+  color: #7dd3fc;
+}
+
+.dark .appkit-badge--admin {
+  background: rgba(88, 28, 135, 0.35);
+  color: #d8b4fe;
+}
+
+.dark .appkit-badge--seller {
+  background: rgba(19, 78, 74, 0.35);
+  color: #99f6e4;
+}
+
+.dark .appkit-badge--primary,
+.dark .appkit-badge--secondary {
+  background: rgba(112, 26, 117, 0.3);
+  color: #f9a8d4;
+}

package/dist/ui/components/BaseListingCard.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode, MouseEvent } from "react";
+export interface BaseListingCardRootProps {
+    className?: string;
+    isSelected?: boolean;
+    isDisabled?: boolean;
+    variant?: "grid" | "list";
+    onClick?: () => void;
+    children?: ReactNode;
+}
+export interface BaseListingCardHeroProps {
+    aspect?: string;
+    variant?: "grid" | "list";
+    className?: string;
+    children?: ReactNode;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+export interface BaseListingCardInfoProps {
+    variant?: "grid" | "list";
+    className?: string;
+    children?: ReactNode;
+}
+export interface BaseListingCardCheckboxProps {
+    selected?: boolean;
+    onSelect?: (e: MouseEvent<HTMLButtonElement>) => void;
+    label?: string;
+    position?: string;
+    className?: string;
+}
+declare function BaseListingCardRoot({ className, isSelected, isDisabled, onClick, children, }: BaseListingCardRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BaseListingCardHero({ aspect, className, children, onMouseEnter, onMouseLeave, }: BaseListingCardHeroProps): import("react/jsx-runtime").JSX.Element;
+declare function BaseListingCardInfo({ className, children, }: BaseListingCardInfoProps): import("react/jsx-runtime").JSX.Element;
+declare function BaseListingCardCheckbox({ selected, onSelect, label, position, className, }: BaseListingCardCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare const BaseListingCard: typeof BaseListingCardRoot & {
+    Hero: typeof BaseListingCardHero;
+    Info: typeof BaseListingCardInfo;
+    Checkbox: typeof BaseListingCardCheckbox;
+};
+export {};

package/dist/ui/components/BaseListingCard.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "./Button";
+import { Span } from "./Typography";
+const UI_LISTING_CARD = {
+    root: "appkit-listing-card",
+    selected: "appkit-listing-card--selected",
+    disabled: "appkit-listing-card--disabled",
+    clickable: "appkit-listing-card--clickable",
+    hero: "appkit-listing-card__hero",
+    heroSquare: "appkit-listing-card__hero--square",
+    heroLandscape: "appkit-listing-card__hero--landscape",
+    info: "appkit-listing-card__info",
+    checkbox: "appkit-listing-card__checkbox",
+    checkboxSelected: "appkit-listing-card__checkbox--selected",
+    checkboxIcon: "appkit-listing-card__checkbox-icon",
+};
+function BaseListingCardRoot({ className = "", isSelected, isDisabled, onClick, children, }) {
+    return (_jsx("div", { onClick: onClick, className: [
+            UI_LISTING_CARD.root,
+            isSelected ? UI_LISTING_CARD.selected : "",
+            isDisabled ? UI_LISTING_CARD.disabled : "",
+            onClick ? UI_LISTING_CARD.clickable : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: children }));
+}
+function BaseListingCardHero({ aspect, className = "", children, onMouseEnter, onMouseLeave, }) {
+    const aspectClass = aspect === "square"
+        ? UI_LISTING_CARD.heroSquare
+        : aspect === "4/3" || !aspect
+            ? UI_LISTING_CARD.heroLandscape
+            : `aspect-[${aspect}]`;
+    return (_jsx("div", { className: [UI_LISTING_CARD.hero, aspectClass, className]
+            .filter(Boolean)
+            .join(" "), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children }));
+}
+function BaseListingCardInfo({ className = "", children, }) {
+    return (_jsx("div", { className: [UI_LISTING_CARD.info, className].filter(Boolean).join(" "), children: children }));
+}
+function BaseListingCardCheckbox({ selected, onSelect, label, position = "top-2 left-2", className = "", }) {
+    return (_jsx(Button, { type: "button", "aria-label": label ?? (selected ? "Deselect" : "Select"), onClick: onSelect, className: [
+            UI_LISTING_CARD.checkbox,
+            selected ? UI_LISTING_CARD.checkboxSelected : "",
+            position,
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: selected && _jsx(Span, { className: UI_LISTING_CARD.checkboxIcon, children: "\u2713" }) }));
+}
+export const BaseListingCard = Object.assign(BaseListingCardRoot, {
+    Hero: BaseListingCardHero,
+    Info: BaseListingCardInfo,
+    Checkbox: BaseListingCardCheckbox,
+});

package/dist/ui/components/BaseListingCard.style.css

@@ -0,0 +1,84 @@
+/* BaseListingCard — compound card for product/event/auction listings */
+
+.appkit-listing-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  border-radius: 0.75rem;
+  border: 1px solid #e5e7eb;
+  overflow: hidden;
+  transition: box-shadow 0.2s ease;
+  min-width: clamp(150px, 18vw, 260px);
+  min-height: clamp(220px, 26vh, 360px);
+}
+
+:is(.dark) .appkit-listing-card {
+  border-color: #374151;
+}
+
+.appkit-listing-card--selected {
+  ring: 2px;
+  outline: 2px solid var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.appkit-listing-card--disabled {
+  opacity: 0.6;
+}
+
+.appkit-listing-card--clickable {
+  cursor: pointer;
+}
+.appkit-listing-card--clickable:hover {
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+
+/* Hero (image area) */
+.appkit-listing-card__hero {
+  position: relative;
+  overflow: hidden;
+  background-color: #f3f4f6;
+  min-height: clamp(120px, 14vh, 200px);
+  max-height: clamp(160px, 24vh, 280px);
+}
+
+:is(.dark) .appkit-listing-card__hero {
+  background-color: #1f2937;
+}
+
+.appkit-listing-card__hero--square { aspect-ratio: 1 / 1; }
+.appkit-listing-card__hero--landscape { aspect-ratio: 4 / 3; }
+
+/* Info (text area) */
+.appkit-listing-card__info {
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+/* Checkbox overlay */
+.appkit-listing-card__checkbox {
+  position: absolute;
+  z-index: 10;
+  height: 1.25rem;
+  width: 1.25rem;
+  border-radius: 0.25rem;
+  border: 2px solid #d1d5db;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.appkit-listing-card__checkbox--selected {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.appkit-listing-card__checkbox-icon {
+  color: white;
+  font-size: 0.75rem;
+  line-height: 1;
+}

package/dist/ui/components/Breadcrumb.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Breadcrumb — accessible navigation trail with ChevronRight separators.
+ *
+ * Standalone @mohasinac/ui primitive. No app-specific imports.
+ * Last item is displayed with `font-medium` (non-link, current page).
+ */
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    className?: string;
+}
+export declare function Breadcrumb({ items, className }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Breadcrumb.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "lucide-react";
+import { Nav, Ol, Li } from "./Semantic";
+import { Span } from "./Typography";
+export function Breadcrumb({ items, className = "" }) {
+    return (_jsx(Nav, { "aria-label": "Breadcrumb", className: `appkit-breadcrumb ${className}`, children: _jsx(Ol, { className: "appkit-breadcrumb__list", children: items.map((item, i) => {
+                const isLast = i === items.length - 1;
+                return (_jsxs(Li, { className: "appkit-breadcrumb__item", children: [i > 0 && (_jsx(ChevronRight, { className: "appkit-breadcrumb__separator", "aria-hidden": "true" })), isLast || !item.href ? (_jsx(Span, { className: isLast
+                                ? "appkit-breadcrumb__current"
+                                : "appkit-breadcrumb__text", "aria-current": isLast ? "page" : undefined, children: item.label })) : (_jsx("a", { href: item.href, className: "appkit-breadcrumb__link", children: item.label }))] }, i));
+            }) }) }));
+}