@mohasinac/appkit 2.2.0 → 2.3.0

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

@@ -1,527 +0,0 @@
-/* appkit/src/ui/components/ListingLayout.style.css */
-
-/* ── Root ──────────────────────────────────────────── */
-
-.appkit-listing-layout {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.appkit-listing-layout--page-offset {
-  padding-bottom: 3rem;
-}
-.appkit-listing-layout--bulk-offset {
-  padding-bottom: 7rem;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout--page-offset,
-  .appkit-listing-layout--bulk-offset {
-    padding-bottom: 0;
-  }
-}
-
-/* ── Status tabs ───────────────────────────────────── */
-
-.appkit-listing-layout__status-tabs {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  touch-action: pan-x;
-  margin-inline: -1rem;
-  padding-inline: 1rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-listing-layout__status-tabs {
-    margin-inline: -1.5rem;
-    padding-inline: 1.5rem;
-  }
-}
-
-/* ── Sticky toolbar ────────────────────────────────── */
-
-.appkit-listing-layout__toolbar {
-  position: sticky;
-  z-index: 20;
-  margin-inline: -1rem;
-  padding-inline: 1rem;
-  background: rgba(255, 255, 255, 0.8);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba(161, 161, 170, 0.35); /* zinc-400/35 */
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-  padding-block: 0.625rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-listing-layout__toolbar {
-    margin-inline: -1.5rem;
-    padding-inline: 1.5rem;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__toolbar {
-    background: rgba(2, 6, 23, 0.8); /* slate-950/80 */
-    border-bottom-color: rgba(30, 41, 59, 0.7); /* slate-800/70 */
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.appkit-listing-layout__toolbar--dashboard {
-  top: 0;
-}
-
-.appkit-listing-layout__toolbar--page {
-  top: 3.5rem; /* top-14 */
-}
-
-@media (min-width: 768px) {
-  .appkit-listing-layout__toolbar--page {
-    top: 7.5rem; /* top-[120px] */
-  }
-}
-
-/* ── Toolbar rows ──────────────────────────────────── */
-
-.appkit-listing-layout__toolbar-row--desktop {
-  display: none;
-  align-items: center;
-  gap: 0.5rem;
-  min-width: 0;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__toolbar-row--desktop {
-    display: flex;
-  }
-}
-
-.appkit-listing-layout__toolbar-row--mobile {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__toolbar-row--mobile {
-    display: none;
-  }
-}
-
-.appkit-listing-layout__search {
-  flex: 1;
-  min-width: 0;
-}
-
-.appkit-listing-layout__toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-}
-
-.appkit-listing-layout__view-toggle-wrap {
-  display: flex;
-  align-items: center;
-  gap: 0.125rem;
-  border-radius: 9999px;
-  border: 1px solid #e4e4e7; /* zinc-200 */
-  background: #ffffff;
-  padding: 0.125rem;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__view-toggle-wrap {
-    border-color: #1e293b; /* slate-700 */
-    background: #0f172a; /* slate-900 */
-  }
-}
-
-.appkit-listing-layout__toolbar-pagination {
-  margin-left: auto;
-  flex-shrink: 0;
-  padding-left: 0.75rem;
-  border-left: 1px solid rgba(161, 161, 170, 0.35);
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__toolbar-pagination {
-    border-left-color: rgba(30, 41, 59, 0.7);
-  }
-}
-
-/* ── Mobile toolbar rows ───────────────────────────── */
-
-.appkit-listing-layout__mobile-row-1 {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.appkit-listing-layout__mobile-row-2 {
-  display: flex;
-  align-items: stretch;
-  min-height: 2.75rem; /* 44px */
-  gap: 0.5rem;
-  overflow-x: auto;
-}
-
-.appkit-listing-layout__mobile-row-2__inner {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-  padding-bottom: 1px;
-}
-
-/* ── Filter button ─────────────────────────────────── */
-
-.appkit-listing-layout__filter-btn {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  border-radius: 9999px;
-  height: 2rem;
-  padding-inline: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border: 1px solid #e4e4e7; /* zinc-200 */
-  color: #52525b; /* zinc-600 */
-  transition: border-color 150ms, background 150ms;
-}
-
-.appkit-listing-layout__filter-btn:hover {
-  border-color: #d4d4d8; /* zinc-300 */
-  background: #fafafa; /* zinc-50 */
-}
-
-.appkit-listing-layout__filter-btn--active {
-  border-color: color-mix(in srgb, var(--color-primary, #6366f1) 40%, transparent);
-  background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, transparent);
-  color: var(--color-primary, #6366f1);
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__filter-btn {
-    border-color: #1e293b; /* slate-700 */
-    color: #cbd5e1; /* slate-300 */
-  }
-  .appkit-listing-layout__filter-btn:hover {
-    border-color: #334155; /* slate-600 */
-    background: rgba(30, 41, 59, 0.6);
-  }
-}
-
-/* ── Filter badge ──────────────────────────────────── */
-
-.appkit-listing-layout__filter-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  font-size: 0.625rem;
-  font-weight: 700;
-  border-radius: 9999px;
-  background: var(--color-primary, #6366f1);
-  color: #ffffff;
-}
-
-.appkit-listing-layout__filter-badge--lg {
-  width: 1.25rem;
-  height: 1.25rem;
-  font-size: 0.6875rem;
-  margin-left: 0.5rem;
-}
-
-/* ── Bulk action bar ───────────────────────────────── */
-
-.appkit-listing-layout__bulk-bar {
-  display: none;
-  padding-top: 0.5rem;
-  margin-top: 0.5rem;
-  border-top: 1px solid #f4f4f5; /* zinc-100 */
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__bulk-bar {
-    display: block;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__bulk-bar {
-    border-top-color: #1e293b; /* slate-800 */
-  }
-}
-
-/* ── Body (sidebar + content) ──────────────────────── */
-
-.appkit-listing-layout__body {
-  display: flex;
-  gap: 1rem;
-  align-items: flex-start;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__body {
-    gap: 1.5rem;
-  }
-}
-
-/* ── Desktop filter sidebar ────────────────────────── */
-
-.appkit-listing-layout__sidebar {
-  display: none;
-  flex-shrink: 0;
-  align-self: flex-start;
-  transition: width 200ms ease-in-out, opacity 200ms ease-in-out;
-  overflow: hidden;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__sidebar {
-    display: block;
-  }
-}
-
-.appkit-listing-layout__sidebar--page {
-  position: sticky;
-  top: 11rem; /* top-[176px] */
-}
-
-.appkit-listing-layout__sidebar--dashboard {
-  position: sticky;
-  top: 4rem; /* top-16 */
-}
-
-.appkit-listing-layout__sidebar--open {
-  width: 15rem; /* w-60 */
-  opacity: 1;
-}
-
-@media (min-width: 1280px) {
-  .appkit-listing-layout__sidebar--open { width: 16rem; } /* xl:w-64 */
-}
-@media (min-width: 1536px) {
-  .appkit-listing-layout__sidebar--open { width: 18rem; } /* 2xl:w-72 */
-}
-
-.appkit-listing-layout__sidebar--collapsed {
-  width: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-/* ── Sidebar panel card ────────────────────────────── */
-
-.appkit-listing-layout__sidebar-panel {
-  width: 15rem;
-  border-radius: 1rem;
-  overflow: hidden;
-  border: 1px solid rgba(228, 228, 231, 0.8); /* zinc-200/80 */
-  background: #ffffff;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-@media (min-width: 1280px) {
-  .appkit-listing-layout__sidebar-panel { width: 16rem; }
-}
-@media (min-width: 1536px) {
-  .appkit-listing-layout__sidebar-panel { width: 18rem; }
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__sidebar-panel {
-    border-color: rgba(51, 65, 85, 0.6); /* slate-700/60 */
-    background: #0f172a; /* slate-900 */
-  }
-}
-
-.appkit-listing-layout__sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid #f4f4f5; /* zinc-100 */
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__sidebar-header {
-    border-bottom-color: #1e293b; /* slate-800 */
-  }
-}
-
-.appkit-listing-layout__sidebar-facets {
-  padding: 1.25rem 0.75rem 0.75rem;
-  max-height: calc(100vh - 15rem);
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.appkit-listing-layout__sidebar-footer {
-  padding: 0.5rem 0.75rem 0.75rem;
-  border-top: 1px solid #f4f4f5;
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__sidebar-footer {
-    border-top-color: #1e293b;
-  }
-}
-
-/* ── Main content ──────────────────────────────────── */
-
-.appkit-listing-layout__content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.appkit-listing-layout__pagination {
-  padding-top: 0.5rem;
-}
-
-/* ── Mobile sticky pagination bar ─────────────────── */
-
-.appkit-listing-layout__mobile-pagination {
-  position: fixed;
-  left: 0;
-  right: 0;
-  z-index: 39;
-  background: rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(12px);
-  border-top: 1px solid rgba(228, 228, 231, 0.8);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-inline: 0.75rem;
-  overflow-x: auto;
-  padding-bottom: 1px;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__mobile-pagination {
-    display: none;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__mobile-pagination {
-    background: rgba(2, 6, 23, 0.9);
-    border-top-color: rgba(30, 41, 59, 0.8);
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.appkit-listing-layout__mobile-pagination--dashboard { bottom: 0; }
-.appkit-listing-layout__mobile-pagination--default   { bottom: 3.5rem; }
-.appkit-listing-layout__mobile-pagination--bulk      { bottom: 7rem; }
-
-/* ── Mobile filter overlay ─────────────────────────── */
-
-.appkit-listing-layout__mobile-overlay-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-  background: rgba(0, 0, 0, 0.4);
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__mobile-overlay-backdrop {
-    display: none;
-  }
-}
-
-.appkit-listing-layout__mobile-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  flex-direction: column;
-  background: #ffffff;
-}
-
-@media (min-width: 1024px) {
-  .appkit-listing-layout__mobile-overlay {
-    display: none;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__mobile-overlay {
-    background: #020617; /* slate-950 */
-  }
-}
-
-.appkit-listing-layout__mobile-overlay-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid #f4f4f5;
-  flex-shrink: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__mobile-overlay-header {
-    border-bottom-color: #1e293b;
-  }
-}
-
-.appkit-listing-layout__mobile-overlay-facets {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem 1rem 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.appkit-listing-layout__mobile-overlay-footer {
-  flex-shrink: 0;
-  display: flex;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-top: 1px solid #f4f4f5;
-  background: #ffffff;
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__mobile-overlay-footer {
-    border-top-color: #1e293b;
-    background: #020617;
-  }
-}
-
-/* ── Close button in mobile overlay ───────────────── */
-
-.appkit-listing-layout__close-btn {
-  border-radius: 9999px;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.appkit-listing-layout__close-btn:hover {
-  background: #f4f4f5; /* zinc-100 */
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__close-btn:hover {
-    background: #1e293b; /* slate-800 */
-  }
-}

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

@@ -1,38 +0,0 @@
-import "client-only";
-/**
- * ListingViewShell
- *
- * Thin wrapper around ListingLayout that adds overlay slots (drawer, modal)
- * and an optional detail-view short-circuit. Replaces the ~10 identical
- * Admin*View ListingLayout delegates and can be used by seller/account views
- * that need the full ListingLayout feature set.
- *
- * Usage:
- *   <ListingViewShell
- *     headerSlot={<PageHeader title="Products" />}
- *     searchSlot={<SearchInput />}
- *     overlays={<><ProductDrawer /><ConfirmDeleteModal /></>}
- *     isDashboard
- *   >
- *     <DataTable columns={cols} data={rows} />
- *   </ListingViewShell>
- */
-import { type ReactNode } from "react";
-import type { ViewPortal } from "./Layout";
-import type { ListingLayoutProps } from "./ListingLayout";
-export interface ListingViewShellProps extends Omit<ListingLayoutProps, "children"> {
-    /** Portal context — sets isDashboard default (admin/seller=true, user/public=false). */
-    portal?: ViewPortal;
-    /** Overlay elements rendered after the layout (drawers, modals, confirm dialogs). */
-    overlays?: ReactNode;
-    /** @deprecated Use `overlays` instead. Render-prop for a drawer overlay. */
-    renderDrawer?: () => ReactNode;
-    /** @deprecated Use `overlays` instead. Render-prop for a confirm modal overlay. */
-    renderConfirmModal?: () => ReactNode;
-    /** @deprecated Use `overlays` instead. Render-prop for a generic modal overlay. */
-    renderModal?: () => ReactNode;
-    /** When provided, the entire layout is replaced with this view (detail/edit mode). */
-    detailView?: ReactNode;
-    children: ReactNode;
-}
-export declare function ListingViewShell({ overlays, renderDrawer, renderConfirmModal, renderModal, detailView, children, portal, isDashboard, ...listingProps }: ListingViewShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ListingViewShell.js

@@ -1,11 +0,0 @@
-"use client";
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
-import { ListingLayout } from "./ListingLayout";
-export function ListingViewShell({ overlays, renderDrawer, renderConfirmModal, renderModal, detailView, children, portal, isDashboard, ...listingProps }) {
-    const effectiveIsDashboard = isDashboard ?? (portal === "admin" || portal === "seller" || portal === undefined ? true : false);
-    if (detailView) {
-        return _jsx(_Fragment, { children: detailView });
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(ListingLayout, { ...listingProps, isDashboard: effectiveIsDashboard, children: children }), overlays, renderDrawer?.(), renderConfirmModal?.(), renderModal?.()] }));
-}

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

@@ -1,29 +0,0 @@
-import React from "react";
-import { type DropdownMenuItem as MenuListItem } from "./Dropdown";
-export interface MenuProps {
-    trigger?: React.ReactNode;
-    items?: MenuListItem[];
-    align?: "left" | "right";
-    className?: string;
-    menuClassName?: string;
-    children?: React.ReactNode;
-}
-export declare function Menu(props: MenuProps): import("react/jsx-runtime").JSX.Element;
-export declare function MenuTrigger({ className, children, }: {
-    className?: string;
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function MenuContent({ className, children, }: {
-    className?: string;
-    children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function MenuItem(props: {
-    children: React.ReactNode;
-    onClick?: () => void;
-    disabled?: boolean;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function MenuSeparator({ className }: {
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export default Menu;

package/dist/ui/components/Menu.js

@@ -1,19 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, } from "./Dropdown";
-export function Menu(props) {
-    return _jsx(Dropdown, { ...props });
-}
-export function MenuTrigger({ className, children, }) {
-    return _jsx(DropdownTrigger, { className: className, children: children });
-}
-export function MenuContent({ className, children, }) {
-    return _jsx(DropdownMenu, { className: className, children: children });
-}
-export function MenuItem(props) {
-    return _jsx(DropdownItem, { ...props });
-}
-export function MenuSeparator({ className }) {
-    return _jsx(DropdownSeparator, { className: className });
-}
-export default Menu;

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

@@ -1,6 +0,0 @@
-/* Menu — delegates to Dropdown; no additional styles needed */
-/* Exists for style contract compliance. See Dropdown.style.css for actual styles. */
-
-.appkit-menu {
-  /* Inherits all styling from Dropdown */
-}

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

@@ -1,18 +0,0 @@
-import "client-only";
-import React from "react";
-export interface ModalProps {
-    isOpen?: boolean;
-    open?: boolean;
-    onClose: () => void;
-    title?: React.ReactNode;
-    children: React.ReactNode;
-    size?: "sm" | "md" | "lg" | "xl" | "full";
-    showCloseButton?: boolean;
-    actions?: React.ReactNode;
-    className?: string;
-}
-export declare function Modal({ isOpen, open, onClose, title, children, size, showCloseButton, actions, className, }: ModalProps): React.ReactPortal | null;
-export declare function ModalFooter({ children, className, }: {
-    children: React.ReactNode;
-    className?: string;
-}): import("react/jsx-runtime").JSX.Element;