@mohasinac/appkit 2.4.11 → 2.5.1

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

@@ -1,206 +1,206 @@
-/* SideDrawer — accessible slide-in panel with focus trap + unsaved-changes */
-
-.appkit-side-drawer__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  transition: opacity 0.2s ease;
-}
-
-.appkit-side-drawer {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 40;
-  background: white;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.3s ease-in-out;
-}
-
-:is(.dark) .appkit-side-drawer {
-  background: #0f172a;
-}
-
-/* Full-viewport width on all breakpoints — navbars (z-50) render over this */
-.appkit-side-drawer--left { left: 0; width: 100%; }
-.appkit-side-drawer--right { right: 0; width: 100%; }
-
-/* Header */
-.appkit-side-drawer__header {
-  padding: 1.5rem;
-  border-bottom-width: 1px;
-}
-
-.appkit-side-drawer__header--view {
-  background-color: #fafafa;
-  border-color: #e4e4e7;
-}
-:is(.dark) .appkit-side-drawer__header--view {
-  background-color: rgba(15, 23, 42, 0.8);
-  border-color: #334155;
-}
-
-.appkit-side-drawer__header--create {
-  background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.05), transparent, rgba(20, 184, 166, 0.03));
-  border-color: #e4e4e7;
-}
-:is(.dark) .appkit-side-drawer__header--create {
-  background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent, rgba(20, 184, 166, 0.025));
-  border-color: #334155;
-}
-
-.appkit-side-drawer__header--edit {
-  background: linear-gradient(to right, rgba(251, 191, 36, 0.04), transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.05));
-  border-color: #e4e4e7;
-}
-:is(.dark) .appkit-side-drawer__header--edit {
-  background: linear-gradient(to right, rgba(120, 53, 15, 0.15), transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1));
-  border-color: #334155;
-}
-
-.appkit-side-drawer__header--delete {
-  background-color: #fef2f2;
-  border-color: #fecaca;
-}
-:is(.dark) .appkit-side-drawer__header--delete {
-  background-color: rgba(69, 10, 10, 0.3);
-  border-color: #991b1b;
-}
-
-.appkit-side-drawer__close-btn {
-  flex-shrink: 0;
-  padding: 0.5rem;
-  color: #52525b;
-  border-radius: 0.5rem;
-  transition: all 0.15s ease;
-  box-shadow: 0 0 0 1px #e4e4e7;
-}
-.appkit-side-drawer__close-btn:hover {
-  background-color: #f4f4f5;
-  box-shadow: 0 0 0 1px #d4d4d8;
-}
-:is(.dark) .appkit-side-drawer__close-btn {
-  color: #d4d4d8;
-  box-shadow: 0 0 0 1px #334155;
-}
-:is(.dark) .appkit-side-drawer__close-btn:hover {
-  background-color: #1e293b;
-  box-shadow: 0 0 0 1px #475569;
-}
-
-.appkit-side-drawer__close-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.appkit-side-drawer__delete-badge {
-  flex-shrink: 0;
-  padding: 0.25rem 0.625rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: 0.25rem;
-  background-color: #fee2e2;
-  color: #b91c1c;
-}
-:is(.dark) .appkit-side-drawer__delete-badge {
-  background-color: #7f1d1d;
-  color: #fca5a5;
-}
-
-/* Content */
-.appkit-side-drawer__content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
-}
-@media (min-width: 640px) {
-  .appkit-side-drawer__content { padding: 1.5rem; }
-}
-
-/* Footer */
-.appkit-side-drawer__footer {
-  flex-shrink: 0;
-  padding: 1rem 1rem;
-  border-top: 1px solid #e4e4e7;
-  background-color: #fafafa;
-}
-:is(.dark) .appkit-side-drawer__footer {
-  border-color: #334155;
-  background-color: rgba(15, 23, 42, 0.8);
-}
-@media (min-width: 640px) {
-  .appkit-side-drawer__footer { padding: 1.25rem 1.5rem; }
-}
-
-/* Unsaved-changes warning overlay */
-.appkit-side-drawer__warn-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 60;
-  background: rgba(0, 0, 0, 0.6);
-}
-
-.appkit-side-drawer__warn-dialog {
-  position: fixed;
-  z-index: 60;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 90vw;
-  max-width: 28rem;
-  background: white;
-  border-radius: 0.75rem;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  padding: 1.5rem;
-}
-:is(.dark) .appkit-side-drawer__warn-dialog {
-  background: #0f172a;
-}
-
-.appkit-side-drawer__warn-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-.appkit-side-drawer__warn-icon {
-  flex-shrink: 0;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fef9c3;
-}
-:is(.dark) .appkit-side-drawer__warn-icon {
-  background-color: rgba(113, 63, 18, 0.3);
-}
-
-.appkit-side-drawer__warn-icon svg {
-  width: 1.25rem;
-  height: 1.25rem;
-  color: #ca8a04;
-}
-:is(.dark) .appkit-side-drawer__warn-icon svg {
-  color: #facc15;
-}
-
-.appkit-side-drawer__warn-text {
-  font-size: 0.875rem;
-  color: #52525b;
-}
-:is(.dark) .appkit-side-drawer__warn-text {
-  color: #a1a1aa;
-}
-
-.appkit-side-drawer__warn-actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-}
+/* SideDrawer — accessible slide-in panel with focus trap + unsaved-changes */
+
+.appkit-side-drawer__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-navbar);
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  transition: opacity 0.2s ease;
+}
+
+.appkit-side-drawer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: var(--appkit-z-navbar);
+  background: var(--appkit-color-surface);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease-in-out;
+}
+
+:is(.dark) .appkit-side-drawer {
+  background: var(--appkit-color-surface);
+}
+
+/* Full-viewport width on all breakpoints — navbars (z-50) render over this */
+.appkit-side-drawer--left { left: 0; width: 100%; }
+.appkit-side-drawer--right { right: 0; width: 100%; }
+
+/* Header */
+.appkit-side-drawer__header {
+  padding: 1.5rem;
+  border-bottom-width: 1px;
+}
+
+.appkit-side-drawer__header--view {
+  background-color: var(--appkit-color-bg);
+  border-color: var(--appkit-color-border);
+}
+:is(.dark) .appkit-side-drawer__header--view {
+  background-color: rgba(15, 23, 42, 0.8);
+  border-color: var(--appkit-color-border);
+}
+
+.appkit-side-drawer__header--create {
+  background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.05), transparent, rgba(20, 184, 166, 0.03));
+  border-color: var(--appkit-color-border);
+}
+:is(.dark) .appkit-side-drawer__header--create {
+  background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent, rgba(20, 184, 166, 0.025));
+  border-color: var(--appkit-color-border);
+}
+
+.appkit-side-drawer__header--edit {
+  background: linear-gradient(to right, rgba(251, 191, 36, 0.04), transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.05));
+  border-color: var(--appkit-color-border);
+}
+:is(.dark) .appkit-side-drawer__header--edit {
+  background: linear-gradient(to right, rgba(120, 53, 15, 0.15), transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1));
+  border-color: var(--appkit-color-border);
+}
+
+.appkit-side-drawer__header--delete {
+  background-color: var(--appkit-color-error-surface);
+  border-color: var(--appkit-color-rose-200);
+}
+:is(.dark) .appkit-side-drawer__header--delete {
+  background-color: rgba(69, 10, 10, 0.3);
+  border-color: var(--appkit-color-rose-800);
+}
+
+.appkit-side-drawer__close-btn {
+  flex-shrink: 0;
+  padding: 0.5rem;
+  color: var(--appkit-color-zinc-600);
+  border-radius: 0.5rem;
+  transition: all 0.15s ease;
+  box-shadow: 0 0 0 1px var(--appkit-color-border);
+}
+.appkit-side-drawer__close-btn:hover {
+  background-color: var(--appkit-color-zinc-100);
+  box-shadow: 0 0 0 1px var(--appkit-color-zinc-300);
+}
+:is(.dark) .appkit-side-drawer__close-btn {
+  color: var(--appkit-color-zinc-300);
+  box-shadow: 0 0 0 1px var(--appkit-color-border);
+}
+:is(.dark) .appkit-side-drawer__close-btn:hover {
+  background-color: var(--appkit-color-slate-800);
+  box-shadow: 0 0 0 1px var(--appkit-color-slate-600);
+}
+
+.appkit-side-drawer__close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.appkit-side-drawer__delete-badge {
+  flex-shrink: 0;
+  padding: 0.25rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border-radius: 0.25rem;
+  background-color: var(--appkit-color-rose-100);
+  color: var(--appkit-color-rose-700);
+}
+:is(.dark) .appkit-side-drawer__delete-badge {
+  background-color: var(--appkit-color-rose-900);
+  color: var(--appkit-color-error-text);
+}
+
+/* Content */
+.appkit-side-drawer__content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+}
+@media (min-width: 640px) {
+  .appkit-side-drawer__content { padding: 1.5rem; }
+}
+
+/* Footer */
+.appkit-side-drawer__footer {
+  flex-shrink: 0;
+  padding: 1rem 1rem;
+  border-top: 1px solid var(--appkit-color-border);
+  background-color: var(--appkit-color-bg);
+}
+:is(.dark) .appkit-side-drawer__footer {
+  border-color: var(--appkit-color-border);
+  background-color: rgba(15, 23, 42, 0.8);
+}
+@media (min-width: 640px) {
+  .appkit-side-drawer__footer { padding: 1.25rem 1.5rem; }
+}
+
+/* Unsaved-changes warning overlay */
+.appkit-side-drawer__warn-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-modal);
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.appkit-side-drawer__warn-dialog {
+  position: fixed;
+  z-index: var(--appkit-z-modal);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 28rem;
+  background: var(--appkit-color-surface);
+  border-radius: 0.75rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  padding: 1.5rem;
+}
+:is(.dark) .appkit-side-drawer__warn-dialog {
+  background: var(--appkit-color-surface);
+}
+
+.appkit-side-drawer__warn-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.appkit-side-drawer__warn-icon {
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--appkit-color-amber-100);
+}
+:is(.dark) .appkit-side-drawer__warn-icon {
+  background-color: rgba(113, 63, 18, 0.3);
+}
+
+.appkit-side-drawer__warn-icon svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: var(--appkit-color-warning);
+}
+:is(.dark) .appkit-side-drawer__warn-icon svg {
+  color: var(--appkit-color-amber-400);
+}
+
+.appkit-side-drawer__warn-text {
+  font-size: 0.875rem;
+  color: var(--appkit-color-zinc-600);
+}
+:is(.dark) .appkit-side-drawer__warn-text {
+  color: var(--appkit-color-zinc-400);
+}
+
+.appkit-side-drawer__warn-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}

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

@@ -1,73 +1,73 @@
-/* appkit/src/ui/components/SideModal.style.css */
-
-.appkit-side-modal {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-}
-
-/* -- Backdrop ---------------------------------------- */
-
-.appkit-side-modal__backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  transition: opacity 300ms;
-}
-
-/* -- Panel ------------------------------------------- */
-
-.appkit-side-modal__panel {
-  position: absolute;
-  inset-block: 0; /* top + bottom */
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background: #ffffff;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  transition: transform 300ms ease-in-out;
-}
-
-@media (min-width: 640px) {
-  .appkit-side-modal__panel {
-    width: min(60vw, 672px);
-  }
-}
-
-.appkit-side-modal__panel--right {
-  right: 0;
-  transform: translateX(0);
-}
-
-.appkit-side-modal__panel--left {
-  left: 0;
-  transform: translateX(0);
-}
-
-.dark .appkit-side-modal__panel {
-  background: #18181b; /* zinc-900 */
-}
-
-/* -- Header ------------------------------------------ */
-
-.appkit-side-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e5e7eb; /* neutral-200 */
-  padding: 1rem 1.25rem;
-  flex-shrink: 0;
-}
-
-.dark .appkit-side-modal__header {
-  border-bottom-color: #3f3f46; /* zinc-700 */
-}
-
-/* -- Body -------------------------------------------- */
-
-.appkit-side-modal__body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.25rem;
-}
+/* appkit/src/ui/components/SideModal.style.css */
+
+.appkit-side-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-sidebar);
+  display: flex;
+}
+
+/* -- Backdrop ---------------------------------------- */
+
+.appkit-side-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  transition: opacity 300ms;
+}
+
+/* -- Panel ------------------------------------------- */
+
+.appkit-side-modal__panel {
+  position: absolute;
+  inset-block: 0; /* top + bottom */
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--appkit-color-surface);
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  transition: transform 300ms ease-in-out;
+}
+
+@media (min-width: 640px) {
+  .appkit-side-modal__panel {
+    width: min(60vw, 672px);
+  }
+}
+
+.appkit-side-modal__panel--right {
+  right: 0;
+  transform: translateX(0);
+}
+
+.appkit-side-modal__panel--left {
+  left: 0;
+  transform: translateX(0);
+}
+
+.dark .appkit-side-modal__panel {
+  background: var(--appkit-color-zinc-900);
+}
+
+/* -- Header ------------------------------------------ */
+
+.appkit-side-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--appkit-color-border);
+  padding: 1rem 1.25rem;
+  flex-shrink: 0;
+}
+
+.dark .appkit-side-modal__header {
+  border-bottom-color: var(--appkit-color-zinc-700);
+}
+
+/* -- Body -------------------------------------------- */
+
+.appkit-side-modal__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.25rem;
+}

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

@@ -0,0 +1,26 @@
+export interface SiteLogoProps {
+    /** Tailwind height class. Logo width scales from viewBox. */
+    className?: string;
+    /** Accessible title; defaults to "LetItRip.in". */
+    title?: string;
+    /**
+     * Visual variant:
+     *  - "gradient" (default): brand-gradient wordmark on transparent background
+     *  - "solid": single-colour wordmark using currentColor (useful on coloured surfaces)
+     */
+    variant?: "gradient" | "solid";
+    /**
+     * Optional image URL — when provided, renders an <img> instead of the SVG
+     * wordmark. Used to honour admin-uploaded site logos. Falls back to the
+     * SVG wordmark automatically when empty/undefined.
+     */
+    src?: string;
+}
+/**
+ * LetItRip site logo — SVG wordmark "LetItRip" + small ".in" superscript.
+ *
+ * Single source of truth for the site brand mark. Used by the title bar
+ * and the welcome / hero section. Scales cleanly at any size via Tailwind
+ * height class on the parent (the SVG fills available width via viewBox).
+ */
+export declare function SiteLogo({ className, title, variant, src, }: SiteLogoProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/SiteLogo.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const GRADIENT_ID = "letitrip-logo-gradient";
+/**
+ * LetItRip site logo — SVG wordmark "LetItRip" + small ".in" superscript.
+ *
+ * Single source of truth for the site brand mark. Used by the title bar
+ * and the welcome / hero section. Scales cleanly at any size via Tailwind
+ * height class on the parent (the SVG fills available width via viewBox).
+ */
+export function SiteLogo({ className = "h-7", title = "LetItRip.in", variant = "gradient", src, }) {
+    if (src) {
+        return (
+        // eslint-disable-next-line @next/next/no-img-element
+        _jsx("img", { src: src, alt: title, className: `block w-auto object-contain ${className}` }));
+    }
+    const fill = variant === "gradient" ? `url(#${GRADIENT_ID})` : "currentColor";
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 260 64", role: "img", "aria-label": title, className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "46", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("text", { x: "218", y: "24", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "18", fill: fill, children: ".in" })] }));
+}