@mohasinac/appkit 2.3.0 → 2.3.2

package/dist/ui/components/SlottedListingView.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * SlottedListingView
+ *
+ * Lightweight slot-assembly view shell for listing pages that need manual
+ * control over toolbar/filter/table composition (seller dashboards, admin
+ * categories, etc.) without the full ListingLayout chrome.
+ *
+ * Provides optional managed `search` and `selectedIds` state — pass
+ * `manageSearch` or `manageSelection` to opt in. Render-props receive
+ * the managed state; callers that manage their own state can ignore these.
+ *
+ * Usage:
+ *   <SlottedListingView
+ *     title="Products"
+ *     manageSearch
+ *     manageSelection
+ *     renderSearch={(search, setSearch) => <SearchInput value={search} onChange={setSearch} />}
+ *     renderTable={(selectedIds, setSelectedIds) => <DataTable ... />}
+ *     renderPagination={() => <Pagination ... />}
+ *     overlays={<ConfirmModal />}
+ *   />
+ */
+import { useState } from "react";
+import { Div } from "./Div";
+import { Heading } from "./Typography";
+export function SlottedListingView({ title, labels = {}, portal, renderHeader, renderTabs, renderSearch, renderSort, renderFilters, renderActiveFilters, renderBulkActions, renderTable, renderPagination, overlays, manageSearch, manageSelection, manageSort = false, inlineToolbar = false, total = 0, isLoading = false, className = "", }) {
+    const effectiveManageSearch = manageSearch ?? (portal === "admin" || portal === "seller" || portal === "user");
+    const effectiveManageSelection = manageSelection ?? (portal === "admin" || portal === "seller");
+    const [search, setSearch] = useState("");
+    const [selectedIds, setSelectedIds] = useState([]);
+    const [sort, setSort] = useState("");
+    const displayTitle = title ?? labels?.title;
+    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : displayTitle ? (_jsx(Heading, { level: 1, className: "text-2xl font-bold mb-6", children: displayTitle })) : null, renderTabs?.(), inlineToolbar && (renderSearch || renderSort) ? (_jsxs(Div, { className: "flex gap-2 mb-4", children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort)] })) : (_jsxs(_Fragment, { children: [renderSearch?.(search, setSearch), renderSort?.(sort, setSort)] })), renderFilters?.(), renderActiveFilters?.(), effectiveManageSelection && renderBulkActions
+                ? renderBulkActions(selectedIds, () => setSelectedIds([]))
+                : renderBulkActions?.(selectedIds, () => setSelectedIds([])), effectiveManageSelection
+                ? renderTable && renderTable(selectedIds, setSelectedIds, isLoading)
+                : renderTable && renderTable(), renderPagination ? renderPagination(total) : null, overlays] }));
+}

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

@@ -0,0 +1,15 @@
+import React from "react";
+export interface SortOption {
+    label: string;
+    value: string;
+}
+export interface SortDropdownProps {
+    value?: string;
+    onChange: (value: string) => void;
+    options: SortOption[];
+    label?: string;
+    className?: string;
+    /** Optional text shown before the sort selector (e.g. "Showing 12 of 45") */
+    countText?: React.ReactNode;
+}
+export declare function SortDropdown({ value, onChange, options, label, className, countText, }: SortDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/SortDropdown.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row } from "./Layout";
+import { Select } from "./Select";
+import { Span } from "./Typography";
+export function SortDropdown({ value, onChange, options, label, className = "", countText, }) {
+    return (_jsxs(Row, { gap: "sm", className: ["appkit-sort-dropdown", className].filter(Boolean).join(" "), children: [countText && (_jsx(Span, { variant: "secondary", size: "sm", className: "appkit-sort-dropdown__count", children: countText })), label && (_jsx(Span, { variant: "secondary", size: "sm", className: "appkit-sort-dropdown__label", children: label })), _jsx(Select, { value: value ?? "", onValueChange: onChange, options: options, className: "appkit-sort-dropdown__select", "aria-label": label ?? "Sort by" })] }));
+}

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

@@ -0,0 +1,12 @@
+.appkit-sort-dropdown {
+  align-items: center;
+}
+
+.appkit-sort-dropdown__label {
+  white-space: nowrap;
+}
+
+.appkit-sort-dropdown__select {
+  min-height: 2.25rem;
+  height: 2.25rem;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Spinner — generic loading indicator.
+ *
+ * Extracted from src/components/ui/Spinner.tsx for @mohasinac/ui.
+ * No app-specific imports; pure Tailwind CSS.
+ */
+export interface SpinnerProps {
+    size?: "sm" | "md" | "lg" | "xl";
+    variant?: "primary" | "white" | "current" | "pokeball";
+    className?: string;
+    label?: string;
+}
+export declare function Spinner({ size, variant, className, label, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Spinner.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Spinner({ size = "md", variant = "primary", className = "", label = "Loading...", }) {
+    const sizeClasses = {
+        sm: "appkit-spinner__indicator--sm",
+        md: "appkit-spinner__indicator--md",
+        lg: "appkit-spinner__indicator--lg",
+        xl: "appkit-spinner__indicator--xl",
+    };
+    const variantClasses = {
+        primary: "appkit-spinner__indicator--primary",
+        white: "appkit-spinner__indicator--white",
+        current: "appkit-spinner__indicator--current",
+        pokeball: "appkit-spinner__indicator--pokeball",
+    };
+    return (_jsxs("div", { className: `appkit-spinner ${className}`, role: "status", "aria-label": label, "data-section": "spinner-div-611", children: [_jsx("div", { className: `appkit-spinner__indicator ${sizeClasses[size]} ${variantClasses[variant]}` }), label && _jsx("span", { className: "appkit-sr-only", children: label })] }));
+}

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

@@ -0,0 +1,84 @@
+.appkit-spinner {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.appkit-spinner__indicator {
+  border-radius: 9999px;
+  animation: appkit-spinner-spin 1s linear infinite;
+}
+
+.appkit-spinner__indicator--sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 2px;
+  border-style: solid;
+}
+
+.appkit-spinner__indicator--md {
+  width: 2rem;
+  height: 2rem;
+  border-width: 2px;
+  border-style: solid;
+}
+
+.appkit-spinner__indicator--lg {
+  width: 3rem;
+  height: 3rem;
+  border-width: 3px;
+  border-style: solid;
+}
+
+.appkit-spinner__indicator--xl {
+  width: 4rem;
+  height: 4rem;
+  border-width: 4px;
+  border-style: solid;
+}
+
+.appkit-spinner__indicator--primary {
+  border-color: #509c02;
+  border-top-color: transparent;
+}
+
+.dark .appkit-spinner__indicator--primary {
+  border-color: #e91e8c;
+  border-top-color: transparent;
+}
+
+.appkit-spinner__indicator--white {
+  border-color: #ffffff;
+  border-top-color: transparent;
+}
+
+.appkit-spinner__indicator--current {
+  border-color: currentColor;
+  border-top-color: transparent;
+}
+
+/* Pokéball-style: red top/right, white bottom/left */
+.appkit-spinner__indicator--pokeball {
+  border-top-color: #CC0000;
+  border-right-color: #CC0000;
+  border-bottom-color: #ffffff;
+  border-left-color: #ffffff;
+}
+
+.appkit-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes appkit-spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,49 @@
+/**
+ * StackedViewShell
+ *
+ * Minimal view shell for pages that stack named render-slots vertically
+ * with an optional title heading. Covers dashboards, form pages, settings,
+ * account hub pages, and any view whose layout is simply "heading + sections".
+ *
+ * Supports an `isEmpty` guard to swap the main content for an empty-state slot,
+ * and an `overlays` catch-all for modals/drawers rendered outside the flow.
+ *
+ * Usage:
+ *   <StackedViewShell
+ *     title="Seller Dashboard"
+ *     sections={[renderStats, renderCharts, renderActivity]}
+ *   />
+ *
+ *   <StackedViewShell
+ *     title="My Addresses"
+ *     isEmpty={addresses.length === 0}
+ *     renderEmpty={() => <EmptyState />}
+ *     sections={[renderToolbar, renderAddresses]}
+ *     overlays={<DeleteModal />}
+ *   />
+ */
+import { type ReactNode } from "react";
+import type { ViewPortal } from "./Layout";
+export interface StackedViewShellLabels {
+    title?: string;
+}
+export interface StackedViewShellProps {
+    /** Page title rendered as H1 unless `renderHeader` is provided. */
+    title?: string;
+    labels?: StackedViewShellLabels;
+    /** Portal context — controls styling defaults (admin / seller / user / public). */
+    portal?: ViewPortal;
+    /** Custom header replacing the default title heading. */
+    renderHeader?: () => ReactNode;
+    /** Sequential content sections. Functions are called; ReactNodes are rendered as-is. */
+    sections?: (ReactNode | (() => ReactNode))[];
+    /** When true, `renderEmpty` replaces `sections`. */
+    isEmpty?: boolean;
+    /** Empty state slot. */
+    renderEmpty?: () => ReactNode;
+    /** Overlay portal (modals, drawers, confirm dialogs). */
+    overlays?: ReactNode;
+    isLoading?: boolean;
+    className?: string;
+}
+export declare function StackedViewShell({ title, labels, portal, renderHeader, sections, isEmpty, renderEmpty, overlays, className, }: StackedViewShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/StackedViewShell.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StackedViewShell
+ *
+ * Minimal view shell for pages that stack named render-slots vertically
+ * with an optional title heading. Covers dashboards, form pages, settings,
+ * account hub pages, and any view whose layout is simply "heading + sections".
+ *
+ * Supports an `isEmpty` guard to swap the main content for an empty-state slot,
+ * and an `overlays` catch-all for modals/drawers rendered outside the flow.
+ *
+ * Usage:
+ *   <StackedViewShell
+ *     title="Seller Dashboard"
+ *     sections={[renderStats, renderCharts, renderActivity]}
+ *   />
+ *
+ *   <StackedViewShell
+ *     title="My Addresses"
+ *     isEmpty={addresses.length === 0}
+ *     renderEmpty={() => <EmptyState />}
+ *     sections={[renderToolbar, renderAddresses]}
+ *     overlays={<DeleteModal />}
+ *   />
+ */
+import React from "react";
+import { Div } from "./Div";
+import { Heading } from "./Typography";
+function resolveSlot(slot) {
+    return typeof slot === "function" ? slot() : slot;
+}
+export function StackedViewShell({ title, labels = {}, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+portal, renderHeader, sections = [], isEmpty = false, renderEmpty, overlays, className = "", }) {
+    const displayTitle = title ?? labels?.title;
+    return (_jsxs(Div, { className: className, children: [renderHeader ? (renderHeader()) : displayTitle ? (_jsx(Heading, { level: 1, className: "text-2xl font-bold mb-6", children: displayTitle })) : null, isEmpty && renderEmpty ? (renderEmpty()) : (_jsx(_Fragment, { children: sections.map((slot, i) => (_jsx(React.Fragment, { children: resolveSlot(slot) }, i))) })), overlays] }));
+}

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

@@ -0,0 +1,17 @@
+/**
+ * StarRating — 0–5 star display/interactive rating.
+ *
+ * Standalone @mohasinac/ui primitive. No app-specific imports.
+ * Use `readOnly` for display, omit it for interactive mode with hover preview.
+ */
+export interface StarRatingProps {
+    value?: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    readOnly?: boolean;
+    className?: string;
+    /** Accessible label describing what is being rated */
+    label?: string;
+}
+export declare function StarRating({ value, onChange, max, size, readOnly, className, label, }: StarRatingProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/StarRating.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Star } from "lucide-react";
+import { Span } from "./Typography";
+export function StarRating({ value = 0, onChange, max = 5, size = "md", readOnly = false, className = "", label, }) {
+    const [hovered, setHovered] = useState(null);
+    const displayed = hovered ?? value;
+    return (_jsxs(Span, { className: [
+            "appkit-star-rating",
+            `appkit-star-rating--${size}`,
+            readOnly
+                ? "appkit-star-rating--readonly"
+                : "appkit-star-rating--interactive",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), role: readOnly ? "img" : "group", "aria-label": label ?? `${value} out of ${max} stars`, children: [Array.from({ length: max }, (_, i) => {
+                const starValue = i + 1;
+                const filled = starValue <= displayed;
+                const half = !filled && starValue - 0.5 <= displayed;
+                return (_jsx(Span, { className: "appkit-star-rating__star", onClick: () => !readOnly && onChange?.(starValue), onMouseEnter: () => !readOnly && setHovered(starValue), onMouseLeave: () => !readOnly && setHovered(null), "aria-hidden": !readOnly ? "true" : undefined, children: _jsx(Star, { className: [
+                            "appkit-star-rating__icon",
+                            filled || half
+                                ? "appkit-star-rating__icon--filled"
+                                : "appkit-star-rating__icon--empty",
+                        ].join(" "), "aria-hidden": "true" }) }, starValue));
+            }), !readOnly && (_jsxs(Span, { className: "sr-only", children: [value, " out of ", max] }))] }));
+}

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

@@ -0,0 +1,44 @@
+.appkit-star-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.appkit-star-rating--interactive .appkit-star-rating__star {
+  cursor: pointer;
+}
+
+.appkit-star-rating__icon {
+  transition: fill 0.1s ease, color 0.1s ease;
+}
+
+/* sizes */
+.appkit-star-rating--sm .appkit-star-rating__icon { width: 1rem;    height: 1rem; }
+.appkit-star-rating--md .appkit-star-rating__icon { width: 1.25rem; height: 1.25rem; }
+.appkit-star-rating--lg .appkit-star-rating__icon { width: 1.5rem;  height: 1.5rem; }
+
+/* states */
+.appkit-star-rating__icon--filled {
+  fill: #fbbf24;
+  color: #fbbf24;
+}
+
+.appkit-star-rating__icon--empty {
+  fill: transparent;
+  color: #d4d4d8;
+}
+
+.appkit-star-rating--interactive .appkit-star-rating__star:hover .appkit-star-rating__icon--empty {
+  fill: #fde68a;
+  color: #fde68a;
+}
+
+/* dark */
+.dark .appkit-star-rating__icon--empty {
+  color: #475569;
+}
+
+.dark .appkit-star-rating--interactive .appkit-star-rating__star:hover .appkit-star-rating__icon--empty {
+  fill: rgba(251, 191, 36, 0.4);
+  color: rgba(251, 191, 36, 0.4);
+}

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

@@ -0,0 +1,18 @@
+import React from "react";
+export interface StatItem {
+    label: string;
+    value: number | string;
+    icon?: React.ReactNode;
+    colorClass?: string;
+}
+export interface StatsGridProps {
+    stats: StatItem[];
+    columns?: 2 | 3 | 4;
+    /**
+     * - `elevated` (default) — white card with border + shadow, for dashboards/homepages
+     * - `flat` — no shadow, subtle border only, for dense admin tables
+     */
+    variant?: "elevated" | "flat";
+    className?: string;
+}
+export declare function StatsGrid({ stats, columns, variant, className, }: StatsGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/StatsGrid.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div } from "./Div";
+import { Text } from "./Typography";
+import { classNames } from "../style.helper";
+const columnsClass = {
+    2: "appkit-stats-grid--2",
+    3: "appkit-stats-grid--3",
+    4: "appkit-stats-grid--4",
+};
+const variantClass = {
+    elevated: "",
+    flat: "appkit-stats-grid--flat",
+};
+export function StatsGrid({ stats, columns = 3, variant = "elevated", className, }) {
+    return (_jsx(Div, { className: classNames("appkit-stats-grid", columnsClass[columns], variantClass[variant], className), children: stats.map((stat, i) => (_jsx(Div, { className: "appkit-stats-grid__item", children: _jsxs(Div, { className: "appkit-stats-grid__item-inner", children: [_jsxs(Div, { children: [_jsx(Text, { className: "appkit-stats-grid__label", children: stat.label }), _jsx(Text, { className: "appkit-stats-grid__value", children: stat.value })] }), stat.icon && (_jsx(Div, { className: classNames("appkit-stats-grid__icon", stat.colorClass ?? "text-zinc-400 dark:text-zinc-500"), children: stat.icon }))] }) }, `${stat.label}-${i}`))) }));
+}

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

@@ -0,0 +1,96 @@
+.appkit-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.appkit-stats-grid--2 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.appkit-stats-grid--3 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+.appkit-stats-grid--4 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
+@media (min-width: 640px) {
+  .appkit-stats-grid--2,
+  .appkit-stats-grid--3,
+  .appkit-stats-grid--4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 768px) {
+  .appkit-stats-grid--3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .appkit-stats-grid--4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.appkit-stats-grid__item {
+  padding: 1rem;
+  border: 1px solid #e4e4e7;
+  border-radius: 0.75rem;
+  background: #ffffff;
+}
+
+.appkit-stats-grid__item-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.appkit-stats-grid__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #71717a;
+}
+
+.appkit-stats-grid__value {
+  margin-top: 0.25rem;
+  font-size: 1.875rem;
+  font-weight: 700;
+}
+
+.appkit-stats-grid__icon {
+  color: #a1a1aa;
+}
+
+/* flat variant — no shadow, minimal border, for dense admin tables */
+.appkit-stats-grid--flat .appkit-stats-grid__item {
+  background: transparent;
+  border-color: #e4e4e7;
+  box-shadow: none;
+  border-radius: 0.5rem;
+}
+
+.appkit-stats-grid--flat .appkit-stats-grid__value {
+  font-size: 1.5rem;
+}
+
+.dark .appkit-stats-grid__item {
+  border-color: #334155;
+  background: #0f172a;
+}
+
+.dark .appkit-stats-grid__label {
+  color: #94a3b8;
+}
+
+.dark .appkit-stats-grid__icon {
+  color: #64748b;
+}
+
+.dark .appkit-stats-grid--flat .appkit-stats-grid__item {
+  background: transparent;
+  border-color: #334155;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * StatusBadge — semantic color map for order/payment/review/ticket status strings.
+ *
+ * Wraps @mohasinac/ui Badge with a pre-defined status → variant mapping.
+ * No app-specific imports.
+ */
+export type BadgeOrderStatus = "pending" | "confirmed" | "processing" | "shipped" | "delivered" | "cancelled" | "refunded" | "failed";
+export type BadgePaymentStatus = "pending" | "paid" | "failed" | "refunded" | "partially_refunded";
+export type BadgeReviewStatus = "pending" | "approved" | "rejected";
+export type BadgeTicketStatus = "open" | "in_progress" | "resolved" | "closed";
+export type GenericStatus = "active" | "inactive" | "pending" | "approved" | "rejected" | "success" | "warning" | "danger" | "info";
+export type StatusBadgeStatus = BadgeOrderStatus | BadgePaymentStatus | BadgeReviewStatus | BadgeTicketStatus | GenericStatus;
+export interface StatusBadgeProps {
+    status: StatusBadgeStatus;
+    label?: string;
+    className?: string;
+}
+export declare function StatusBadge({ status, label, className }: StatusBadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/StatusBadge.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Badge } from "./Badge";
+const STATUS_TO_VARIANT = {
+    // Generic
+    active: "active",
+    inactive: "inactive",
+    pending: "pending",
+    approved: "approved",
+    rejected: "rejected",
+    success: "success",
+    warning: "warning",
+    danger: "danger",
+    info: "info",
+    // Order
+    confirmed: "success",
+    processing: "info",
+    shipped: "info",
+    delivered: "success",
+    cancelled: "danger",
+    refunded: "warning",
+    failed: "danger",
+    // Payment
+    paid: "success",
+    partially_refunded: "warning",
+    // Review (pending/approved/rejected already covered)
+    // Ticket
+    open: "warning",
+    in_progress: "info",
+    resolved: "success",
+    closed: "inactive",
+};
+const STATUS_LABELS = {
+    active: "Active",
+    inactive: "Inactive",
+    pending: "Pending",
+    approved: "Approved",
+    rejected: "Rejected",
+    success: "Success",
+    warning: "Warning",
+    danger: "Danger",
+    info: "Info",
+    confirmed: "Confirmed",
+    processing: "Processing",
+    shipped: "Shipped",
+    delivered: "Delivered",
+    cancelled: "Cancelled",
+    refunded: "Refunded",
+    failed: "Failed",
+    paid: "Paid",
+    partially_refunded: "Partially Refunded",
+    open: "Open",
+    in_progress: "In Progress",
+    resolved: "Resolved",
+    closed: "Closed",
+};
+export function StatusBadge({ status, label, className }) {
+    const badgeVariant = STATUS_TO_VARIANT[status] ?? "default";
+    const displayLabel = label ?? STATUS_LABELS[status] ?? status;
+    return (_jsx(Badge, { variant: badgeVariant, className: ["appkit-status-badge", className].filter(Boolean).join(" "), children: displayLabel }));
+}

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

@@ -0,0 +1,5 @@
+/* StatusBadge inherits all styles from Badge.
+   This base class is a stable hook for consumer overrides. */
+.appkit-status-badge {
+  text-transform: none;
+}

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

@@ -0,0 +1,10 @@
+export interface StepperNavStep {
+    number: number;
+    label: string;
+}
+export interface StepperNavProps {
+    steps: StepperNavStep[];
+    currentStep: number;
+    className?: string;
+}
+export declare function StepperNav({ steps, currentStep, className }: StepperNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/StepperNav.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Li, Nav, Ol } from "./Semantic";
+import { Span } from "./Typography";
+import { classNames } from "../style.helper";
+export function StepperNav({ steps, currentStep, className }) {
+    return (_jsx(Nav, { "aria-label": "Steps", className: classNames("appkit-stepper-nav", className), children: _jsx(Ol, { className: "appkit-stepper-nav__list", children: steps.map((step, i) => {
+                const isComplete = step.number < currentStep;
+                const isActive = step.number === currentStep;
+                const isLast = i === steps.length - 1;
+                return (_jsxs(Li, { className: "appkit-stepper-nav__item", children: [_jsxs("div", { className: "appkit-stepper-nav__step", "data-section": "steppernav-div-612", children: [_jsx("div", { className: classNames("appkit-stepper-nav__bubble", isComplete
+                                        ? "appkit-stepper-nav__bubble--complete"
+                                        : isActive
+                                            ? "appkit-stepper-nav__bubble--active"
+                                            : "appkit-stepper-nav__bubble--pending"), "data-section": "steppernav-div-613", children: isComplete ? (_jsx("svg", { className: "appkit-stepper-nav__check", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M5 13l4 4L19 7" }) })) : (step.number) }), _jsx(Span, { className: classNames("appkit-stepper-nav__label", isActive
+                                        ? "appkit-stepper-nav__label--active"
+                                        : isComplete
+                                            ? "appkit-stepper-nav__label--complete"
+                                            : "appkit-stepper-nav__label--pending"), children: step.label })] }), !isLast && (_jsx("div", { className: classNames("appkit-stepper-nav__connector", isComplete
+                                ? "appkit-stepper-nav__connector--complete"
+                                : "appkit-stepper-nav__connector--pending") }))] }, step.number));
+            }) }) }));
+}