@mohasinac/appkit 2.2.0 → 2.3.0

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

@@ -1,114 +0,0 @@
-.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

@@ -1,39 +0,0 @@
-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

@@ -1,56 +0,0 @@
-"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

@@ -1,84 +0,0 @@
-/* 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

@@ -1,15 +0,0 @@
-/**
- * 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

@@ -1,12 +0,0 @@
-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));
-            }) }) }));
-}

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

@@ -1,60 +0,0 @@
-.appkit-breadcrumb__list {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-  color: #71717a;
-}
-
-.dark .appkit-breadcrumb__list {
-  color: #a1a1aa;
-}
-
-.appkit-breadcrumb__item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.appkit-breadcrumb__separator {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-  color: #a1a1aa;
-}
-
-.dark .appkit-breadcrumb__separator {
-  color: #52525b;
-}
-
-.appkit-breadcrumb__text {
-  color: #71717a;
-}
-
-.dark .appkit-breadcrumb__text {
-  color: #a1a1aa;
-}
-
-.appkit-breadcrumb__current {
-  font-weight: 500;
-  color: #18181b;
-}
-
-.dark .appkit-breadcrumb__current {
-  color: #fafafa;
-}
-
-.appkit-breadcrumb__link {
-  color: inherit;
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-.appkit-breadcrumb__link:hover {
-  color: #509c02;
-}
-
-.dark .appkit-breadcrumb__link:hover {
-  color: #f063b9;
-}

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

@@ -1,34 +0,0 @@
-import "client-only";
-/**
- * BulkActionBar
- *
- * Appears at the top of the content area whenever one or more list items are
- * selected. Shows a selection-count pill (tap ✕ to clear), a type-picker
- * dropdown, and an Apply button.
- *
- * Rendered by ListingLayout automatically when selectedCount > 0.
- */
-import React from "react";
-export interface BulkActionItem {
-    id: string;
-    label: string;
-    variant?: "primary" | "secondary" | "outline" | "danger" | "ghost" | "warning";
-    icon?: React.ReactNode;
-    onClick: () => void;
-    disabled?: boolean;
-    loading?: boolean;
-}
-export interface BulkActionBarLabels {
-    /** e.g. "${count} selected" — receives count as format arg */
-    selected?: string;
-    apply?: string;
-    clearSelection?: string;
-    bulkActions?: string;
-}
-export interface BulkActionBarProps {
-    selectedCount: number;
-    onClearSelection?: () => void;
-    actions?: BulkActionItem[];
-    labels?: BulkActionBarLabels;
-}
-export declare function BulkActionBar({ selectedCount, onClearSelection, actions, labels, }: BulkActionBarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/components/BulkActionBar.js

@@ -1,86 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
-/**
- * BulkActionBar
- *
- * Appears at the top of the content area whenever one or more list items are
- * selected. Shows a selection-count pill (tap ✕ to clear), a type-picker
- * dropdown, and an Apply button.
- *
- * Rendered by ListingLayout automatically when selectedCount > 0.
- */
-import { useState, useRef, useEffect } from "react";
-import { ChevronUp, ChevronDown, X } from "lucide-react";
-import { Button } from "./Button";
-import { Span } from "./Typography";
-const DEFAULT_LABELS = {
-    selected: "selected",
-    apply: "Apply",
-    clearSelection: "Clear selection",
-    bulkActions: "Bulk actions",
-};
-export function BulkActionBar({ selectedCount, onClearSelection, actions = [], labels, }) {
-    const l = { ...DEFAULT_LABELS, ...labels };
-    const [pickerOpen, setPickerOpen] = useState(false);
-    const [selectedActionId, setSelectedActionId] = useState(null);
-    const containerRef = useRef(null);
-    // Inline click-outside handler
-    useEffect(() => {
-        const handler = (e) => {
-            if (!containerRef.current?.contains(e.target)) {
-                setPickerOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handler);
-        return () => document.removeEventListener("mousedown", handler);
-    }, []);
-    // Keep selectedActionId in sync with available actions
-    useEffect(() => {
-        setSelectedActionId((prev) => {
-            const ids = actions.map((a) => a.id);
-            if (prev && ids.includes(prev))
-                return prev;
-            return ids[0] ?? null;
-        });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [actions.map((a) => a.id).join(",")]);
-    if (selectedCount === 0)
-        return null;
-    const selectedAction = actions.find((a) => a.id === selectedActionId);
-    const handleApply = () => {
-        if (!selectedActionId)
-            return;
-        selectedAction?.onClick();
-        setPickerOpen(false);
-    };
-    return (_jsxs("div", { ref: containerRef, className: "appkit-bulk-bar", role: "region", "aria-live": "polite", "aria-label": l.bulkActions, children: [_jsx("div", { className: "appkit-bulk-bar__stripe" }), _jsxs("div", { className: "appkit-bulk-bar__row", children: [_jsxs(Button, { type: "button", variant: "ghost", onClick: onClearSelection, className: "appkit-bulk-bar__count-pill", "aria-label": l.clearSelection, children: [_jsx(X, { className: "appkit-bulk-bar__count-icon", "aria-hidden": "true" }), _jsxs(Span, { className: "appkit-bulk-bar__count-label", children: [selectedCount, " ", l.selected] })] }), actions.length > 0 && (_jsxs(Button, { type: "button", variant: "ghost", onClick: () => setPickerOpen((o) => !o), "aria-haspopup": "listbox", "aria-expanded": pickerOpen, className: [
-                            "appkit-bulk-bar__picker-trigger",
-                            selectedAction?.variant === "danger"
-                                ? "appkit-bulk-bar__picker-trigger--danger"
-                                : "",
-                        ]
-                            .filter(Boolean)
-                            .join(" "), children: [selectedAction?.icon && (_jsx(Span, { className: "appkit-bulk-bar__picker-icon", "aria-hidden": "true", children: selectedAction.icon })), _jsx(Span, { className: "appkit-bulk-bar__picker-label", children: selectedAction?.label ?? l.bulkActions }), pickerOpen ? (_jsx(ChevronUp, { className: "appkit-bulk-bar__picker-chevron", "aria-hidden": "true" })) : (_jsx(ChevronDown, { className: "appkit-bulk-bar__picker-chevron", "aria-hidden": "true" }))] })), actions.length > 0 && (_jsx(Button, { type: "button", variant: selectedAction?.variant ?? "primary", size: "sm", isLoading: selectedAction?.loading, disabled: !selectedActionId ||
-                            selectedAction?.disabled ||
-                            selectedAction?.loading, onClick: handleApply, className: "appkit-bulk-bar__apply", children: _jsx(Span, { className: "leading-none", children: l.apply }) }))] }), actions.length > 0 && (_jsx("div", { role: "listbox", "aria-label": l.bulkActions, className: [
-                    "appkit-bulk-bar__dropdown",
-                    pickerOpen ? "appkit-bulk-bar__dropdown--open" : "",
-                ]
-                    .filter(Boolean)
-                    .join(" "), children: actions.map((action) => (_jsxs("button", { role: "option", "aria-selected": selectedActionId === action.id, disabled: action.disabled, onClick: () => {
-                        setSelectedActionId(action.id);
-                        setPickerOpen(false);
-                    }, className: [
-                        "appkit-bulk-bar__option",
-                        action.variant === "danger"
-                            ? "appkit-bulk-bar__option--danger"
-                            : "",
-                        selectedActionId === action.id
-                            ? "appkit-bulk-bar__option--selected"
-                            : "",
-                        action.disabled ? "appkit-bulk-bar__option--disabled" : "",
-                    ]
-                        .filter(Boolean)
-                        .join(" "), children: [action.icon && (_jsx(Span, { className: "appkit-bulk-bar__option-icon", "aria-hidden": "true", children: action.icon })), _jsx(Span, { className: "appkit-bulk-bar__option-label", children: action.label })] }, action.id))) }))] }));
-}