@mohasinac/appkit 2.4.11 → 2.5.1

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

@@ -1,114 +1,114 @@
-.appkit-tooltip {
-  position: relative;
-  display: inline-flex;
-}
-
-.appkit-tooltip__bubble {
-  position: absolute;
-  z-index: 50;
-  pointer-events: none;
-  white-space: nowrap;
-  border-radius: 0.375rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  background: #18181b;
-  color: #ffffff;
-  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
-}
-
-.dark .appkit-tooltip__bubble {
-  background: #f4f4f5;
-  color: #18181b;
-}
-
-.appkit-tooltip__bubble--top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 0.5rem;
-}
-
-.appkit-tooltip__bubble--bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 0.5rem;
-}
-
-.appkit-tooltip__bubble--left {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-right: 0.5rem;
-}
-
-.appkit-tooltip__bubble--right {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 0.5rem;
-}
-
-.appkit-tooltip__mobile-sheet {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-}
-
-@media (min-width: 768px) {
-  .appkit-tooltip__mobile-sheet {
-    display: none;
-  }
-}
-
-.appkit-tooltip__mobile-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(4px);
-}
-
-.appkit-tooltip__mobile-panel {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  border-top: 1px solid #e4e4e7;
-  border-radius: 1rem 1rem 0 0;
-  background: #ffffff;
-  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
-  padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
-}
-
-.dark .appkit-tooltip__mobile-panel {
-  border-top-color: #27272a;
-  background: #18181b;
-}
-
-.appkit-tooltip__mobile-drag {
-  width: 2.5rem;
-  height: 0.25rem;
-  border-radius: 9999px;
-  background: #d4d4d8;
-  margin-bottom: 0.5rem;
-}
-
-.dark .appkit-tooltip__mobile-drag {
-  background: #52525b;
-}
-
-.appkit-tooltip__mobile-text {
-  text-align: center;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #27272a;
-}
-
-.dark .appkit-tooltip__mobile-text {
-  color: #f4f4f5;
-}
+.appkit-tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.appkit-tooltip__bubble {
+  position: absolute;
+  z-index: var(--appkit-z-tooltip);
+  pointer-events: none;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: var(--appkit-color-zinc-900);
+  color: var(--appkit-color-text-on-primary);
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+}
+
+.dark .appkit-tooltip__bubble {
+  background: var(--appkit-color-zinc-100);
+  color: var(--appkit-color-zinc-900);
+}
+
+.appkit-tooltip__bubble--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 0.5rem;
+}
+
+.appkit-tooltip__bubble--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 0.5rem;
+}
+
+.appkit-tooltip__bubble--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 0.5rem;
+}
+
+.appkit-tooltip__bubble--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 0.5rem;
+}
+
+.appkit-tooltip__mobile-sheet {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-tooltip);
+}
+
+@media (min-width: 768px) {
+  .appkit-tooltip__mobile-sheet {
+    display: none;
+  }
+}
+
+.appkit-tooltip__mobile-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+
+.appkit-tooltip__mobile-panel {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  border-top: 1px solid var(--appkit-color-border);
+  border-radius: 1rem 1rem 0 0;
+  background: var(--appkit-color-surface);
+  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
+  padding: 1.25rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
+}
+
+.dark .appkit-tooltip__mobile-panel {
+  border-top-color: var(--appkit-color-zinc-800);
+  background: var(--appkit-color-zinc-900);
+}
+
+.appkit-tooltip__mobile-drag {
+  width: 2.5rem;
+  height: 0.25rem;
+  border-radius: 9999px;
+  background: var(--appkit-color-zinc-300);
+  margin-bottom: 0.5rem;
+}
+
+.dark .appkit-tooltip__mobile-drag {
+  background: var(--appkit-color-zinc-600);
+}
+
+.appkit-tooltip__mobile-text {
+  text-align: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--appkit-color-zinc-800);
+}
+
+.dark .appkit-tooltip__mobile-text {
+  color: var(--appkit-color-zinc-100);
+}

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

@@ -1,178 +1,178 @@
-.appkit-heading {
-  margin: 0;
-  line-height: 1.15;
-  letter-spacing: -0.02em;
-  font-family: var(--font-display), Poppins, ui-sans-serif, system-ui, sans-serif;
-}
-
-.appkit-heading--h1 {
-  font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem);
-  font-weight: 700;
-}
-
-.appkit-heading--h2 {
-  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
-  font-weight: 700;
-}
-
-.appkit-heading--h3 {
-  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);
-  font-weight: 700;
-}
-
-.appkit-heading--h4 {
-  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
-  font-weight: 700;
-}
-
-.appkit-heading--h5 {
-  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
-  font-weight: 500;
-}
-
-.appkit-heading--h6 {
-  font-size: clamp(0.875rem, 0.84rem + 0.3vw, 1.125rem);
-  font-weight: 500;
-}
-
-.appkit-text,
-.appkit-span,
-.appkit-label,
-.appkit-caption {
-  font-family: var(--font-body), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
-}
-
-.appkit-text {
-  margin: 0;
-  line-height: 1.65;
-}
-
-.appkit-text--xs {
-  font-size: 0.75rem;
-}
-
-.appkit-text--sm {
-  font-size: 0.875rem;
-}
-
-.appkit-text--base {
-  font-size: 1rem;
-}
-
-.appkit-text--lg {
-  font-size: 1.125rem;
-}
-
-.appkit-text--xl {
-  font-size: 1.25rem;
-}
-
-.appkit-font--normal {
-  font-weight: 400;
-}
-
-.appkit-font--medium {
-  font-weight: 500;
-}
-
-.appkit-font--semibold {
-  font-weight: 600;
-}
-
-.appkit-font--bold {
-  font-weight: 700;
-}
-
-.appkit-color--primary {
-  color: #18181b;
-}
-
-.appkit-color--secondary {
-  color: #71717a;
-}
-
-.appkit-color--muted {
-  color: #a1a1aa;
-}
-
-.appkit-color--error {
-  color: #dc2626;
-}
-
-.appkit-color--success {
-  color: #059669;
-}
-
-.appkit-color--accent {
-  color: #65c408;
-}
-
-.dark .appkit-color--primary {
-  color: #fafafa;
-}
-
-.dark .appkit-color--secondary {
-  color: #a3a3a3;
-}
-
-.dark .appkit-color--muted {
-  color: #737373;
-}
-
-.dark .appkit-color--error {
-  color: #f87171;
-}
-
-.dark .appkit-color--success {
-  color: #34d399;
-}
-
-.dark .appkit-color--accent {
-  color: #f063b9;
-}
-
-.appkit-label {
-  display: block;
-  margin-bottom: 0.375rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #71717a;
-}
-
-.dark .appkit-label {
-  color: #cbd5e1;
-}
-
-.appkit-label__required {
-  margin-left: 0.25rem;
-  color: #ef4444;
-}
-
-.appkit-caption {
-  font-size: 0.75rem;
-}
-
-.appkit-caption--default {
-  color: #a1a1aa;
-}
-
-.appkit-caption--accent {
-  color: #65c408;
-  font-weight: 600;
-}
-
-.appkit-caption--inverse {
-  color: rgba(101, 196, 8, 0.4);
-}
-
-.dark .appkit-caption--default {
-  color: #737373;
-}
-
-.dark .appkit-caption--accent {
-  color: #f063b9;
-}
-
-.dark .appkit-caption--inverse {
-  color: rgba(240, 99, 185, 0.5);
-}
+.appkit-heading {
+  margin: 0;
+  line-height: var(--appkit-leading-tight);
+  letter-spacing: var(--appkit-tracking-tighter);
+  font-family: var(--font-display), Poppins, ui-sans-serif, system-ui, sans-serif;
+}
+
+.appkit-heading--h1 {
+  font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem);
+  font-weight: 700;
+}
+
+.appkit-heading--h2 {
+  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
+  font-weight: 700;
+}
+
+.appkit-heading--h3 {
+  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);
+  font-weight: 700;
+}
+
+.appkit-heading--h4 {
+  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
+  font-weight: 700;
+}
+
+.appkit-heading--h5 {
+  font-size: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
+  font-weight: 500;
+}
+
+.appkit-heading--h6 {
+  font-size: clamp(0.875rem, 0.84rem + 0.3vw, 1.125rem);
+  font-weight: 500;
+}
+
+.appkit-text,
+.appkit-span,
+.appkit-label,
+.appkit-caption {
+  font-family: var(--font-body), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+}
+
+.appkit-text {
+  margin: 0;
+  line-height: 1.65;
+}
+
+.appkit-text--xs {
+  font-size: 0.75rem;
+}
+
+.appkit-text--sm {
+  font-size: 0.875rem;
+}
+
+.appkit-text--base {
+  font-size: 1rem;
+}
+
+.appkit-text--lg {
+  font-size: 1.125rem;
+}
+
+.appkit-text--xl {
+  font-size: 1.25rem;
+}
+
+.appkit-font--normal {
+  font-weight: 400;
+}
+
+.appkit-font--medium {
+  font-weight: 500;
+}
+
+.appkit-font--semibold {
+  font-weight: 600;
+}
+
+.appkit-font--bold {
+  font-weight: 700;
+}
+
+.appkit-color--primary {
+  color: var(--appkit-color-text);
+}
+
+.appkit-color--secondary {
+  color: var(--appkit-color-zinc-500);
+}
+
+.appkit-color--muted {
+  color: var(--appkit-color-text-faint);
+}
+
+.appkit-color--error {
+  color: var(--appkit-color-error);
+}
+
+.appkit-color--success {
+  color: var(--appkit-color-success);
+}
+
+.appkit-color--accent {
+  color: var(--appkit-color-secondary);
+}
+
+.dark .appkit-color--primary {
+  color: var(--appkit-color-text);
+}
+
+.dark .appkit-color--secondary {
+  color: var(--appkit-color-zinc-400);
+}
+
+.dark .appkit-color--muted {
+  color: var(--appkit-color-zinc-500);
+}
+
+.dark .appkit-color--error {
+  color: var(--appkit-color-rose-400);
+}
+
+.dark .appkit-color--success {
+  color: var(--appkit-color-success);
+}
+
+.dark .appkit-color--accent {
+  color: var(--appkit-color-primary-400);
+}
+
+.appkit-label {
+  display: block;
+  margin-bottom: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--appkit-color-zinc-500);
+}
+
+.dark .appkit-label {
+  color: var(--appkit-color-slate-300);
+}
+
+.appkit-label__required {
+  margin-left: 0.25rem;
+  color: var(--appkit-color-error);
+}
+
+.appkit-caption {
+  font-size: 0.75rem;
+}
+
+.appkit-caption--default {
+  color: var(--appkit-color-text-faint);
+}
+
+.appkit-caption--accent {
+  color: var(--appkit-color-secondary);
+  font-weight: 600;
+}
+
+.appkit-caption--inverse {
+  color: rgba(101, 196, 8, 0.4);
+}
+
+.dark .appkit-caption--default {
+  color: var(--appkit-color-zinc-500);
+}
+
+.dark .appkit-caption--accent {
+  color: var(--appkit-color-primary-400);
+}
+
+.dark .appkit-caption--inverse {
+  color: rgba(240, 99, 185, 0.5);
+}

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

@@ -3,7 +3,7 @@
 .appkit-unsaved-modal__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: var(--appkit-z-sidebar);
   display: flex;
   align-items: center;
   justify-content: center;

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

@@ -14,19 +14,19 @@
 }
 
 .appkit-view-toggle__button--active {
-  color: #509c02;
+  color: var(--appkit-color-secondary-600);
   background: rgba(80, 156, 2, 0.08);
   border-color: rgba(80, 156, 2, 0.3);
 }
 
 .appkit-view-toggle__button--inactive {
-  color: #71717a;
+  color: var(--appkit-color-zinc-500);
   background: transparent;
-  border-color: #e4e4e7;
+  border-color: var(--appkit-color-border);
 }
 
 .appkit-view-toggle__button--inactive:hover {
-  background: #f4f4f5;
+  background: var(--appkit-color-zinc-100);
 }
 
 .appkit-view-toggle__icon {
@@ -35,16 +35,16 @@
 }
 
 .dark .appkit-view-toggle__button--active {
-  color: #e91e8c;
+  color: var(--appkit-color-primary);
   background: rgba(233, 30, 140, 0.14);
   border-color: rgba(233, 30, 140, 0.35);
 }
 
 .dark .appkit-view-toggle__button--inactive {
-  color: #94a3b8;
-  border-color: #334155;
+  color: var(--appkit-color-slate-400);
+  border-color: var(--appkit-color-border);
 }
 
 .dark .appkit-view-toggle__button--inactive:hover {
-  background: #1e293b;
+  background: var(--appkit-color-slate-800);
 }

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

@@ -59,6 +59,7 @@
 @import "./ConfirmDeleteModal.style.css";
 @import "./DynamicSelect.style.css";
 @import "./SideDrawer.style.css";
+@import "./FormActionBar.style.css";
 @import "./BackgroundRenderer.style.css";
 @import "./FilterDrawer.style.css";
 @import "./FlowDiagram.style.css";

package/dist/ui/index.d.ts

@@ -9,6 +9,8 @@ export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 export type { SpinnerProps } from "./components/Spinner";
 export { Spinner } from "./components/Spinner";
 export { PageLoader } from "./components/PageLoader";
+export type { SiteLogoProps } from "./components/SiteLogo";
+export { SiteLogo } from "./components/SiteLogo";
 export type { SkeletonProps } from "./components/Skeleton";
 export { Skeleton } from "./components/Skeleton";
 export type { ButtonProps } from "./components/Button";
@@ -174,5 +176,7 @@ export type { GalleryImage, ImageGalleryProps, } from "./components/ImageGallery
 export { default as ImageGallery } from "./components/ImageGallery";
 export type { SideDrawerProps, DrawerMode } from "./components/SideDrawer";
 export { SideDrawer } from "./components/SideDrawer";
+export type { FormActionBarProps, FormActionBarBreadcrumb } from "./components/FormActionBar";
+export { FormActionBar } from "./components/FormActionBar";
 export type { ConfirmDeleteModalProps } from "./components/ConfirmDeleteModal";
 export { ConfirmDeleteModal } from "./components/ConfirmDeleteModal";

package/dist/ui/index.js

@@ -7,6 +7,7 @@ export { Div } from "./components/Div";
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 export { Spinner } from "./components/Spinner";
 export { PageLoader } from "./components/PageLoader";
+export { SiteLogo } from "./components/SiteLogo";
 export { Skeleton } from "./components/Skeleton";
 export { Button } from "./components/Button";
 export { IconButton } from "./components/IconButton";
@@ -91,4 +92,5 @@ export { FlowDiagram } from "./components/FlowDiagram";
 export { BaseListingCard } from "./components/BaseListingCard";
 export { default as ImageGallery } from "./components/ImageGallery";
 export { SideDrawer } from "./components/SideDrawer";
+export { FormActionBar } from "./components/FormActionBar";
 export { ConfirmDeleteModal } from "./components/ConfirmDeleteModal";