@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -48,79 +48,79 @@
 }
 
 .appkit-button--primary {
-  background: #3e7708;
-  color: #ffffff;
+  background: var(--appkit-color-primary-700, #3e7708);
+  color: var(--appkit-color-text-on-primary, #ffffff);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
 .appkit-button--primary:hover:not(:disabled) {
-  background: #2f5a06;
+  background: var(--appkit-color-primary-800, #2f5a06);
 }
 
 .dark .appkit-button--primary {
-  background: #e91e8c;
+  background: var(--appkit-color-secondary, #e91e8c);
 }
 
 .dark .appkit-button--primary:hover:not(:disabled) {
-  background: #f063b9;
+  background: var(--appkit-color-secondary-400, #f063b9);
 }
 
 .appkit-button--secondary {
-  background: #3e7708;
-  color: #ffffff;
+  background: var(--appkit-color-primary-700, #3e7708);
+  color: var(--appkit-color-text-on-primary, #ffffff);
 }
 
 .appkit-button--secondary:hover:not(:disabled) {
-  background: #509c02;
+  background: var(--appkit-color-primary-600, #509c02);
 }
 
 .dark .appkit-button--secondary {
-  background: #b00d66;
+  background: var(--appkit-color-secondary-700, #b00d66);
 }
 
 .dark .appkit-button--secondary:hover:not(:disabled) {
-  background: #d4107a;
+  background: var(--appkit-color-secondary-600, #d4107a);
 }
 
 .appkit-button--outline {
-  background: #ffffff;
-  border-color: #e4e4e7;
-  color: #18181b;
+  background: var(--appkit-color-surface, #ffffff);
+  border-color: var(--appkit-color-border, #e4e4e7);
+  color: var(--appkit-color-text, #18181b);
 }
 
 .appkit-button--outline:hover:not(:disabled) {
-  background: #fafafa;
+  background: var(--appkit-color-bg, #fafafa);
 }
 
 .dark .appkit-button--outline {
   background: transparent;
-  border-color: #334155;
-  color: #f8fafc;
+  border-color: var(--appkit-color-border, #334155);
+  color: var(--appkit-color-text, #f8fafc);
 }
 
 .dark .appkit-button--outline:hover:not(:disabled) {
-  background: #1e293b;
+  background: rgba(30, 41, 59, 0.5);
 }
 
 .appkit-button--ghost {
   background: transparent;
-  color: #3f3f46;
+  color: var(--appkit-color-text, #3f3f46);
 }
 
 .appkit-button--ghost:hover:not(:disabled) {
-  background: #f4f4f5;
+  background: var(--appkit-color-border-subtle, #f4f4f5);
 }
 
 .dark .appkit-button--ghost {
-  color: #cbd5e1;
+  color: var(--appkit-color-text-muted, #cbd5e1);
 }
 
 .dark .appkit-button--ghost:hover:not(:disabled) {
-  background: #1e293b;
+  background: rgba(30, 41, 59, 0.5);
 }
 
 .appkit-button--danger {
-  background: #dc2626;
+  background: var(--appkit-color-error, #dc2626);
   color: #ffffff;
 }
 
@@ -129,7 +129,7 @@
 }
 
 .appkit-button--warning {
-  background: #f59e0b;
+  background: var(--appkit-color-warning, #f59e0b);
   color: #ffffff;
 }
 

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

@@ -7,29 +7,29 @@
 
 /* Variants */
 .appkit-card--flat {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
 }
 .appkit-card--default {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
 }
 .appkit-card--primary {
   background: var(--color-primary);
   color: var(--color-primary-foreground, white);
 }
 .appkit-card--outlined {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
   border: 1px solid #e4e4e7;
 }
 .appkit-card--bordered {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
   border: 2px solid #e4e4e7;
 }
 .appkit-card--elevated {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
   box-shadow: 0 4px 6px -1px rgba(228, 228, 231, 0.5);
 }
 .appkit-card--interactive {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
   border: 1px solid #e4e4e7;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
@@ -133,60 +133,58 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-card--flat,
-  .appkit-card--default {
-    background: #0f172a;
-  }
-  .appkit-card--outlined {
-    background: #0f172a;
-    border-color: #334155;
-  }
-  .appkit-card--bordered {
-    background: #0f172a;
-    border-color: #334155;
-  }
-  .appkit-card--elevated {
-    background: #0f172a;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
-  }
-  .appkit-card--interactive {
-    background: #0f172a;
-    border-color: #334155;
-  }
-  .appkit-card--glass {
-    border-color: rgba(51, 65, 85, 0.4);
-    background: rgba(15, 23, 42, 0.75);
-  }
-  .appkit-card--stat-indigo {
-    background: rgba(49, 46, 129, 0.4);
-    color: #c7d2fe;
-    border-color: rgba(99, 102, 241, 0.6);
-  }
-  .appkit-card--stat-teal {
-    background: rgba(19, 78, 74, 0.4);
-    color: #99f6e4;
-    border-color: rgba(20, 184, 166, 0.6);
-  }
-  .appkit-card--stat-amber {
-    background: rgba(120, 53, 15, 0.4);
-    color: #fde68a;
-    border-color: rgba(245, 158, 11, 0.6);
-  }
-  .appkit-card--stat-rose {
-    background: rgba(136, 19, 55, 0.4);
-    color: #fecdd3;
-    border-color: rgba(244, 63, 94, 0.6);
-  }
-  .appkit-card--stat-emerald {
-    background: rgba(6, 78, 59, 0.4);
-    color: #a7f3d0;
-    border-color: rgba(16, 185, 129, 0.6);
-  }
-  .appkit-card__header {
-    border-bottom-color: #334155;
-  }
-  .appkit-card__footer {
-    border-top-color: #334155;
-  }
+.dark .appkit-card--flat,
+.dark .appkit-card--default {
+  background: #0f172a;
+}
+.dark .appkit-card--outlined {
+  background: #0f172a;
+  border-color: #334155;
+}
+.dark .appkit-card--bordered {
+  background: #0f172a;
+  border-color: #334155;
+}
+.dark .appkit-card--elevated {
+  background: #0f172a;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+}
+.dark .appkit-card--interactive {
+  background: #0f172a;
+  border-color: #334155;
+}
+.dark .appkit-card--glass {
+  border-color: rgba(51, 65, 85, 0.4);
+  background: rgba(15, 23, 42, 0.75);
+}
+.dark .appkit-card--stat-indigo {
+  background: rgba(49, 46, 129, 0.4);
+  color: #c7d2fe;
+  border-color: rgba(99, 102, 241, 0.6);
+}
+.dark .appkit-card--stat-teal {
+  background: rgba(19, 78, 74, 0.4);
+  color: #99f6e4;
+  border-color: rgba(20, 184, 166, 0.6);
+}
+.dark .appkit-card--stat-amber {
+  background: rgba(120, 53, 15, 0.4);
+  color: #fde68a;
+  border-color: rgba(245, 158, 11, 0.6);
+}
+.dark .appkit-card--stat-rose {
+  background: rgba(136, 19, 55, 0.4);
+  color: #fecdd3;
+  border-color: rgba(244, 63, 94, 0.6);
+}
+.dark .appkit-card--stat-emerald {
+  background: rgba(6, 78, 59, 0.4);
+  color: #a7f3d0;
+  border-color: rgba(16, 185, 129, 0.6);
+}
+.dark .appkit-card__header {
+  border-bottom-color: #334155;
+}
+.dark .appkit-card__footer {
+  border-top-color: #334155;
 }

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

@@ -89,25 +89,23 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-checkbox__input {
-    border-color: #475569;
-    background: #0f172a;
-  }
-  .appkit-checkbox__input:focus-visible {
-    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
-  }
-  .appkit-checkbox__input:not(:disabled):hover {
-    border-color: #ec4899;
-  }
-  .appkit-checkbox__input:checked {
-    border-color: #ec4899;
-    background-color: #ec4899;
-  }
-  .appkit-checkbox__input--error {
-    border-color: #ef4444;
-  }
-  .appkit-checkbox__text {
-    color: #e4e4e7;
-  }
+.dark .appkit-checkbox__input {
+  border-color: #475569;
+  background: #0f172a;
+}
+.dark .appkit-checkbox__input:focus-visible {
+  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
+}
+.dark .appkit-checkbox__input:not(:disabled):hover {
+  border-color: #ec4899;
+}
+.dark .appkit-checkbox__input:checked {
+  border-color: #ec4899;
+  background-color: #ec4899;
+}
+.dark .appkit-checkbox__input--error {
+  border-color: #ef4444;
+}
+.dark .appkit-checkbox__text {
+  color: #e4e4e7;
 }

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

@@ -53,18 +53,16 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-stats-card {
-    border-color: #334155;
-    background: #0f172a;
-  }
-  .appkit-stats-card__label {
-    color: #a1a1aa;
-  }
-  .appkit-stats-card__trend--up {
-    color: #34d399;
-  }
-  .appkit-stats-card__trend--down {
-    color: #f87171;
-  }
+.dark .appkit-stats-card {
+  border-color: #334155;
+  background: #0f172a;
+}
+.dark .appkit-stats-card__label {
+  color: #a1a1aa;
+}
+.dark .appkit-stats-card__trend--up {
+  color: #34d399;
+}
+.dark .appkit-stats-card__trend--down {
+  color: #f87171;
 }

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

@@ -32,15 +32,15 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  background: #ffffff;
-  border: 1px solid #e4e4e7;
+  background: var(--appkit-color-surface, #ffffff);
+  border: 1px solid var(--appkit-color-border, #e4e4e7);
   box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.45);
   transition: transform 0.3s ease;
 }
 
 .dark .appkit-drawer__panel {
-  background: #0f172a;
-  border-color: #334155;
+  background: var(--appkit-color-surface, #0f172a);
+  border-color: var(--appkit-color-border, #334155);
 }
 
 .appkit-drawer__panel--left { left: 0; top: 0; bottom: 0; }
@@ -79,11 +79,11 @@
   width: 2.5rem;
   height: 0.25rem;
   border-radius: 9999px;
-  background: #d4d4d8;
+  background: var(--appkit-color-border, #d4d4d8);
 }
 
 .dark .appkit-drawer__drag {
-  background: #475569;
+  background: var(--appkit-color-border, #475569);
 }
 
 .appkit-drawer__header {
@@ -91,17 +91,18 @@
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.25rem;
-  border-bottom: 1px solid #f4f4f5;
+  border-bottom: 1px solid var(--appkit-color-border-subtle, #f4f4f5);
   flex-shrink: 0;
 }
 
 .dark .appkit-drawer__header {
-  border-bottom-color: #1e293b;
+  border-bottom-color: var(--appkit-color-border-subtle, #1e293b);
 }
 
 .appkit-drawer__title {
   font-size: 1rem;
   font-weight: 600;
+  color: var(--appkit-color-text, #18181b);
 }
 
 .appkit-drawer__close {
@@ -109,19 +110,22 @@
   min-height: 0;
   padding: 0.375rem;
   border-radius: 0.5rem;
-  color: #a1a1aa;
+  color: var(--appkit-color-text-faint, #a1a1aa);
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 .appkit-drawer__close:hover {
-  color: #3f3f46;
+  color: var(--appkit-color-text, #3f3f46);
+  background-color: var(--appkit-color-border-subtle, #f4f4f5);
 }
 
 .dark .appkit-drawer__close {
-  color: #71717a;
+  color: var(--appkit-color-text-faint, #71717a);
 }
 
 .dark .appkit-drawer__close:hover {
-  color: #cbd5e1;
+  color: var(--appkit-color-text-muted, #cbd5e1);
+  background-color: rgba(30, 41, 59, 0.5);
 }
 
 .appkit-drawer__close-icon {
@@ -137,10 +141,10 @@
 
 .appkit-drawer__footer {
   flex-shrink: 0;
-  border-top: 1px solid #f4f4f5;
+  border-top: 1px solid var(--appkit-color-border-subtle, #f4f4f5);
   padding: 1rem 1.25rem;
 }
 
 .dark .appkit-drawer__footer {
-  border-top-color: #1e293b;
+  border-top-color: var(--appkit-color-border-subtle, #1e293b);
 }

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

@@ -82,31 +82,29 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-dropdown__menu {
-    border-color: #334155;
-    background: #0f172a;
-  }
-  .appkit-dropdown__item {
-    color: #e2e8f0;
-  }
-  .appkit-dropdown__item--active {
-    background: #1e293b;
-  }
-  .appkit-dropdown__item--destructive {
-    color: #f87171;
-  }
-  .appkit-dropdown__composed-menu {
-    border-color: #334155;
-    background: #0f172a;
-  }
-  .appkit-dropdown__composed-item {
-    color: #e2e8f0;
-  }
-  .appkit-dropdown__composed-item:hover {
-    background: #1e293b;
-  }
-  .appkit-dropdown__separator {
-    border-color: #334155;
-  }
+.dark .appkit-dropdown__menu {
+  border-color: #334155;
+  background: #0f172a;
+}
+.dark .appkit-dropdown__item {
+  color: #e2e8f0;
+}
+.dark .appkit-dropdown__item--active {
+  background: #1e293b;
+}
+.dark .appkit-dropdown__item--destructive {
+  color: #f87171;
+}
+.dark .appkit-dropdown__composed-menu {
+  border-color: #334155;
+  background: #0f172a;
+}
+.dark .appkit-dropdown__composed-item {
+  color: #e2e8f0;
+}
+.dark .appkit-dropdown__composed-item:hover {
+  background: #1e293b;
+}
+.dark .appkit-dropdown__separator {
+  border-color: #334155;
 }

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

@@ -23,8 +23,6 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-empty-state__icon {
-    color: #64748b;
-  }
+.dark .appkit-empty-state__icon {
+  color: #64748b;
 }

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

@@ -29,5 +29,7 @@ export interface HorizontalScrollerProps<T = unknown> {
     minItemWidth?: number;
     pauseOnHover?: boolean;
     itemClassName?: string;
+    /** Infinite-loop mode: circular slot rendering with scroll teleport — no array cloning */
+    loop?: boolean;
 }
-export declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, itemClassName, }: HorizontalScrollerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, pauseOnHover, itemClassName, loop, }: HorizontalScrollerProps<T>): import("react/jsx-runtime").JSX.Element;