@mohasinac/appkit 2.4.10 → 2.5.0

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

@@ -1,103 +1,103 @@
-.appkit-icon-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: 1px solid transparent;
-  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
-  cursor: pointer;
-}
-
-.appkit-icon-button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
-}
-
-.appkit-icon-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.appkit-icon-button--sm {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 0.5rem;
-}
-
-.appkit-icon-button--md {
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 0.75rem;
-}
-
-.appkit-icon-button--lg {
-  width: 3rem;
-  height: 3rem;
-  border-radius: 0.75rem;
-}
-
-.appkit-icon-button--ghost {
-  background: transparent;
-  color: #52525b;
-}
-
-.appkit-icon-button--ghost:hover:not(:disabled) {
-  background: #f4f4f5;
-}
-
-.dark .appkit-icon-button--ghost {
-  color: #a1a1aa;
-}
-
-.dark .appkit-icon-button--ghost:hover:not(:disabled) {
-  background: #27272a;
-}
-
-.appkit-icon-button--outline {
-  border-color: #e4e4e7;
-  background: #ffffff;
-  color: #3f3f46;
-}
-
-.appkit-icon-button--outline:hover:not(:disabled) {
-  background: #fafafa;
-}
-
-.dark .appkit-icon-button--outline {
-  border-color: #334155;
-  background: transparent;
-  color: #d4d4d8;
-}
-
-.dark .appkit-icon-button--outline:hover:not(:disabled) {
-  background: #1e293b;
-}
-
-.appkit-icon-button--primary {
-  background: #509c02;
-  color: #ffffff;
-}
-
-.appkit-icon-button--primary:hover:not(:disabled) {
-  background: #3e7708;
-}
-
-.dark .appkit-icon-button--primary {
-  background: #e91e8c;
-}
-
-.dark .appkit-icon-button--primary:hover:not(:disabled) {
-  background: #d4107a;
-}
-
-.appkit-icon-button--danger {
-  color: #dc2626;
-}
-
-.appkit-icon-button--danger:hover:not(:disabled) {
-  background: #fef2f2;
-}
-
-.dark .appkit-icon-button--danger:hover:not(:disabled) {
-  background: rgba(127, 29, 29, 0.35);
-}
+.appkit-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 1px solid transparent;
+  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+  cursor: pointer;
+}
+
+.appkit-icon-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
+}
+
+.appkit-icon-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.appkit-icon-button--sm {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.5rem;
+}
+
+.appkit-icon-button--md {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.75rem;
+}
+
+.appkit-icon-button--lg {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.75rem;
+}
+
+.appkit-icon-button--ghost {
+  background: transparent;
+  color: var(--appkit-color-zinc-600);
+}
+
+.appkit-icon-button--ghost:hover:not(:disabled) {
+  background: var(--appkit-color-zinc-100);
+}
+
+.dark .appkit-icon-button--ghost {
+  color: var(--appkit-color-text-faint);
+}
+
+.dark .appkit-icon-button--ghost:hover:not(:disabled) {
+  background: var(--appkit-color-zinc-800);
+}
+
+.appkit-icon-button--outline {
+  border-color: var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-zinc-700);
+}
+
+.appkit-icon-button--outline:hover:not(:disabled) {
+  background: var(--appkit-color-zinc-50);
+}
+
+.dark .appkit-icon-button--outline {
+  border-color: var(--appkit-color-border);
+  background: transparent;
+  color: var(--appkit-color-zinc-300);
+}
+
+.dark .appkit-icon-button--outline:hover:not(:disabled) {
+  background: var(--appkit-color-slate-800);
+}
+
+.appkit-icon-button--primary {
+  background: var(--appkit-color-secondary-600);
+  color: var(--appkit-color-text-on-primary);
+}
+
+.appkit-icon-button--primary:hover:not(:disabled) {
+  background: var(--appkit-color-secondary-700);
+}
+
+.dark .appkit-icon-button--primary {
+  background: var(--appkit-color-primary);
+}
+
+.dark .appkit-icon-button--primary:hover:not(:disabled) {
+  background: var(--appkit-color-primary-600);
+}
+
+.appkit-icon-button--danger {
+  color: var(--appkit-color-error);
+}
+
+.appkit-icon-button--danger:hover:not(:disabled) {
+  background: var(--appkit-color-error-surface);
+}
+
+.dark .appkit-icon-button--danger:hover:not(:disabled) {
+  background: rgba(127, 29, 29, 0.35);
+}

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

@@ -47,7 +47,7 @@
 
 .appkit-image-gallery__nav-btn:focus {
   outline: none;
-  box-shadow: 0 0 0 2px var(--color-primary, #6366f1);
+  box-shadow: 0 0 0 2px var(--appkit-color-secondary);
 }
 
 .appkit-image-gallery__nav-btn:disabled {
@@ -142,12 +142,12 @@
 }
 
 .appkit-image-gallery__thumbnail--active {
-  border-color: var(--color-primary, #6366f1);
-  box-shadow: 0 0 0 2px var(--color-primary-200, #c7d2fe);
+  border-color: var(--appkit-color-secondary-600);
+  box-shadow: 0 0 0 2px var(--appkit-color-secondary-200);
 }
 
 :is(.dark) .appkit-image-gallery__thumbnail--active {
-  box-shadow: 0 0 0 2px var(--color-primary-800, #3730a3);
+  box-shadow: 0 0 0 2px var(--appkit-color-secondary-800);
 }
 
 .appkit-image-gallery__help {

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

@@ -1,19 +1,29 @@
 import { ReactNode } from "react";
 import type { DynamicSelectOption, DynamicSelectProps } from "./DynamicSelect";
+import type { QuickFieldDef } from "../../features/shell/QuickFormDrawer";
 export interface InlineCreateSelectProps<V = string> extends DynamicSelectProps<V> {
     /** Label for the "+ Create new …" button shown at the bottom of the dropdown. */
     createLabel?: string;
-    /** Title shown in the SideDrawer header. Defaults to `createLabel`. */
+    /** Title shown in the create-form drawer header. Defaults to `createLabel`. */
     drawerTitle?: string;
     /**
-     * Render prop for the create form inside the SideDrawer.
+     * Render prop for the create form inside a SideDrawer.
      * Call `onCreated` with the new option to close the drawer and auto-select it.
      * Call `onCancel` to discard and close.
+     * Mutually exclusive with `createFields` — if both are provided, `renderCreateForm` wins.
      */
     renderCreateForm?: (props: {
         onCreated: (option: DynamicSelectOption<V>) => void;
         onCancel: () => void;
     }) => ReactNode;
+    /**
+     * Auto-generates a QuickFormDrawer from FieldDef[].
+     * Used when the create form is simple (≤ 5 fields with no custom logic).
+     * `onCreateSubmit` is called on submit — must return the newly created option.
+     */
+    createFields?: QuickFieldDef[];
+    onCreateSubmit?: (values: Record<string, unknown>) => Promise<DynamicSelectOption<V>>;
+    createSubmitLabel?: string;
 }
 /**
  * InlineCreateSelect — extends DynamicSelect with a "+ Create new" button
@@ -35,4 +45,4 @@ export interface InlineCreateSelectProps<V = string> extends DynamicSelectProps<
  * />
  * ```
  */
-export declare function InlineCreateSelect<V = string>({ createLabel, drawerTitle, renderCreateForm, onChange, options, loadOptions, ...selectProps }: InlineCreateSelectProps<V>): import("react/jsx-runtime").JSX.Element;
+export declare function InlineCreateSelect<V = string>({ createLabel, drawerTitle, renderCreateForm, createFields, onCreateSubmit, createSubmitLabel, onChange, options, loadOptions, ...selectProps }: InlineCreateSelectProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/InlineCreateSelect.js

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { DynamicSelect } from "./DynamicSelect";
 import { SideDrawer } from "./SideDrawer";
 import { Button } from "./Button";
+import { QuickFormDrawer } from "../../features/shell/QuickFormDrawer";
 /**
  * InlineCreateSelect — extends DynamicSelect with a "+ Create new" button
  * that opens a SideDrawer containing an inline create form.
@@ -24,8 +25,9 @@ import { Button } from "./Button";
  * />
  * ```
  */
-export function InlineCreateSelect({ createLabel = "item", drawerTitle, renderCreateForm, onChange, options, loadOptions, ...selectProps }) {
+export function InlineCreateSelect({ createLabel = "item", drawerTitle, renderCreateForm, createFields, onCreateSubmit, createSubmitLabel, onChange, options, loadOptions, ...selectProps }) {
     const [drawerOpen, setDrawerOpen] = useState(false);
+    const hasCreate = Boolean(renderCreateForm ?? (createFields && onCreateSubmit));
     function handleCreated(option) {
         setDrawerOpen(false);
         onChange?.(option.value, option);
@@ -36,7 +38,7 @@ export function InlineCreateSelect({ createLabel = "item", drawerTitle, renderCr
     // Inject a synthetic "+ Create new" sentinel option at the end of the static list.
     // For async (loadOptions) mode we append the action after the list via a wrapper.
     const CREATE_SENTINEL = "__inline_create__";
-    const augmentedOptions = renderCreateForm
+    const augmentedOptions = hasCreate
         ? [
             ...(options ?? []),
             {
@@ -46,7 +48,7 @@ export function InlineCreateSelect({ createLabel = "item", drawerTitle, renderCr
         ]
         : options;
     // For async mode, wrap loadOptions to append the sentinel after each page.
-    const augmentedLoadOptions = renderCreateForm && loadOptions
+    const augmentedLoadOptions = hasCreate && loadOptions
         ? async (query, page) => {
             const result = await loadOptions(query, page);
             const sentinel = {
@@ -66,5 +68,8 @@ export function InlineCreateSelect({ createLabel = "item", drawerTitle, renderCr
         }
         onChange?.(value, option);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(DynamicSelect, { ...selectProps, options: augmentedOptions, loadOptions: augmentedLoadOptions, onChange: handleChange }), renderCreateForm ? (_jsx(SideDrawer, { isOpen: drawerOpen, onClose: handleCancel, title: drawerTitle ?? `Create ${createLabel}`, mode: "create", footer: _jsx(Button, { variant: "ghost", onClick: handleCancel, children: "Cancel" }), children: renderCreateForm({ onCreated: handleCreated, onCancel: handleCancel }) })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DynamicSelect, { ...selectProps, options: augmentedOptions, loadOptions: augmentedLoadOptions, onChange: handleChange }), renderCreateForm ? (_jsx(SideDrawer, { isOpen: drawerOpen, onClose: handleCancel, title: drawerTitle ?? `Create ${createLabel}`, mode: "create", footer: _jsx(Button, { variant: "ghost", onClick: handleCancel, children: "Cancel" }), children: renderCreateForm({ onCreated: handleCreated, onCancel: handleCancel }) })) : createFields && onCreateSubmit ? (_jsx(QuickFormDrawer, { isOpen: drawerOpen, onClose: handleCancel, title: drawerTitle ?? `Create ${createLabel}`, fields: createFields, submitLabel: createSubmitLabel ?? `Create ${createLabel}`, onSubmit: async (values) => {
+                    const option = await onCreateSubmit(values);
+                    handleCreated(option);
+                } })) : null] }));
 }

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

@@ -1,28 +1,28 @@
-.appkit-input {
-  width: 100%;
-  border: 1px solid #e4e4e7;
-  border-radius: 0.375rem;
-  background: #ffffff;
-  color: #18181b;
-  padding: 0.375rem 0.625rem;
-  font-size: 0.875rem;
-  line-height: 1.4;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.appkit-input:focus-visible {
-  outline: none;
-  border-color: #65c408;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
-}
-
-.dark .appkit-input {
-  border-color: #334155;
-  background: rgba(30, 41, 59, 0.6);
-  color: #f8fafc;
-}
-
-.dark .appkit-input:focus-visible {
-  border-color: #e91e8c;
-  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
-}
+.appkit-input {
+  width: 100%;
+  border: 1px solid var(--appkit-color-border);
+  border-radius: 0.375rem;
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-text);
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.appkit-input:focus-visible {
+  outline: none;
+  border-color: var(--appkit-color-secondary);
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.2);
+}
+
+.dark .appkit-input {
+  border-color: var(--appkit-color-border);
+  background: rgba(30, 41, 59, 0.6);
+  color: var(--appkit-color-text);
+}
+
+.dark .appkit-input:focus-visible {
+  border-color: var(--appkit-color-primary);
+  box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
+}

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

@@ -129,6 +129,8 @@ export declare const GRID_MAP: {
     readonly sidebarWide: "appkit-grid appkit-grid--sidebar-wide";
     /** Product detail triplet: gallery | info | actions sidebar */
     readonly productDetailTriplet: "appkit-grid appkit-grid--product-detail-triplet";
+    /** 2-column split (media | content) — flex row on md+, custom CSS (no cascade conflict) */
+    readonly detailSplit: "appkit-grid appkit-grid--detail-split";
     /** CSS auto-fill, min 200px columns */
     readonly autoSm: "appkit-grid appkit-grid--auto-sm";
     /** CSS auto-fill, min 280px columns */

package/dist/ui/components/Layout.js

@@ -117,6 +117,8 @@ export const GRID_MAP = {
     sidebarWide: "appkit-grid appkit-grid--sidebar-wide",
     /** Product detail triplet: gallery | info | actions sidebar */
     productDetailTriplet: "appkit-grid appkit-grid--product-detail-triplet",
+    /** 2-column split (media | content) — flex row on md+, custom CSS (no cascade conflict) */
+    detailSplit: "appkit-grid appkit-grid--detail-split",
     /** CSS auto-fill, min 200px columns */
     autoSm: "appkit-grid appkit-grid--auto-sm",
     /** CSS auto-fill, min 280px columns */

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

@@ -88,13 +88,13 @@
 .appkit-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .appkit-grid--cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .appkit-grid--product-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
-.appkit-grid--product-cards-compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
-.appkit-grid--store-cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
-.appkit-grid--category-cards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }
+.appkit-grid--product-cards-compact { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card), 1fr)); gap: 1rem; }
+.appkit-grid--store-cards { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card), 1fr)); gap: 1.5rem; }
+.appkit-grid--category-cards { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card-xs), 1fr)); gap: 1rem; }
 .appkit-grid--coupon-cards { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 1.5rem; }
-.appkit-grid--address-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
+.appkit-grid--address-cards { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card-lg), 1fr)); gap: 1rem; }
 .appkit-grid--stat-tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
-.appkit-grid--nav-tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
+.appkit-grid--nav-tiles { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card-sm), 1fr)); gap: 1rem; }
 .appkit-grid--halves { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .appkit-grid--two-third { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .appkit-grid--one-third { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@@ -105,6 +105,23 @@
   grid-template-columns: repeat(1, minmax(0, 1fr));
   gap: 1.5rem;
 }
+.appkit-grid--detail-split {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+@media (min-width: 768px) {
+  .appkit-grid--detail-split {
+    flex-direction: row;
+  }
+  .appkit-grid--detail-split > *:first-child {
+    width: 50%;
+    flex-shrink: 0;
+  }
+  .appkit-grid--detail-split > *:nth-child(n+2) {
+    flex: 1;
+  }
+}
 .appkit-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
 .appkit-grid--auto-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
 .appkit-grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }