@mohasinac/appkit 4.30.18 → 4.31.0

package/dist/ui/forms/FormShell.style.css

@@ -1,311 +1,260 @@
-/* ─── FormShell ─────────────────────────────────────────────────────────────── */
-
-.appkit-formshell {
-  display: flex;
-  flex-direction: column;
-  gap: var(--appkit-spacing-6, 1.5rem);
-}
-
-/* Header */
-.appkit-formshell__header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--appkit-spacing-4, 1rem);
-}
-
-.appkit-formshell__title {
-  font-size: var(--appkit-font-size-lg, 1.125rem);
-  font-weight: 600;
-  color: var(--appkit-color-text-primary);
-}
-
-/* ─── Step Indicator ──────────────────────────────────────────────────────── */
-
-.appkit-formshell__step-indicator {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--appkit-spacing-1, 0.25rem);
-  border-bottom: 1px solid var(--appkit-color-border);
-  padding-bottom: var(--appkit-spacing-3, 0.75rem);
-}
-
-.appkit-formshell__step-btn {
-  display: flex;
-  align-items: center;
-  gap: var(--appkit-spacing-2, 0.5rem);
-  padding: var(--appkit-spacing-1-5, 0.375rem) var(--appkit-spacing-3, 0.75rem);
-  border-radius: var(--appkit-radius-md, 0.375rem);
-  background: transparent;
-  border: 1px solid transparent;
-  color: var(--appkit-color-text-secondary);
-  cursor: pointer;
-  font-size: var(--appkit-font-size-sm, 0.875rem);
-  transition: background 0.15s, border-color 0.15s, color 0.15s;
-}
-
-.appkit-formshell__step-btn:hover {
-  background: var(--appkit-color-surface-hover);
-  border-color: var(--appkit-color-border);
-}
-
-.appkit-formshell__step-btn--active {
-  background: var(--appkit-color-primary-subtle, rgb(from var(--appkit-color-primary) r g b / 0.1));
-  border-color: var(--appkit-color-primary);
-  color: var(--appkit-color-primary);
-  font-weight: 500;
-}
-
-.appkit-formshell__step-btn--error {
-  color: var(--appkit-color-error, #dc2626);
-  border-color: var(--appkit-color-error, #dc2626);
-}
-
-.appkit-formshell__step-dot {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 9999px;
-  background: var(--appkit-color-surface-secondary);
-  font-size: var(--appkit-font-size-xs, 0.75rem);
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.appkit-formshell__step-btn--active .appkit-formshell__step-dot {
-  background: var(--appkit-color-primary);
-  color: #fff;
-}
-
-.appkit-formshell__step-btn--error .appkit-formshell__step-dot {
-  background: var(--appkit-color-error, #dc2626);
-  color: #fff;
-}
-
-/* Red dot badge on step dot */
-.appkit-formshell__step-error-badge {
-  position: absolute;
-  top: -3px;
-  right: -3px;
-  width: 8px;
-  height: 8px;
-  border-radius: 9999px;
-  background: var(--appkit-color-error, #dc2626);
-  border: 2px solid var(--appkit-color-surface);
-}
-
-/* Inline error count badge (accordion header) */
-.appkit-formshell__step-error-badge--inline {
-  position: static;
-  width: auto;
-  height: auto;
-  border-radius: var(--appkit-radius-full, 9999px);
-  padding: 0 0.375rem;
-  font-size: var(--appkit-font-size-xs, 0.75rem);
-  font-weight: 600;
-  color: #fff;
-  line-height: 1.4;
-  border: none;
-}
-
-.appkit-formshell__step-label {
-  display: none;
-}
-
-@media (min-width: 640px) {
-  .appkit-formshell__step-label {
-    display: inline;
-  }
-}
-
-/* ─── Error Summary ───────────────────────────────────────────────────────── */
-
-.appkit-formshell__error-summary {
-  border: 1px solid var(--appkit-color-error, #dc2626);
-  border-radius: var(--appkit-radius-md, 0.375rem);
-  padding: var(--appkit-spacing-3, 0.75rem);
-  background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.05);
-}
-
-.appkit-formshell__error-summary__title {
-  font-weight: 600;
-  margin-bottom: var(--appkit-spacing-2, 0.5rem);
-}
-
-.appkit-formshell__error-summary__list {
-  list-style: disc;
-  padding-left: 1.25rem;
-  display: flex;
-  flex-direction: column;
-  gap: var(--appkit-spacing-1, 0.25rem);
-}
-
-.appkit-formshell__error-summary__step-link {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.appkit-formshell__error-summary__step-link:hover {
-  color: var(--appkit-color-error, #dc2626);
-}
-
-/* ─── Body + Steps ───────────────────────────────────────────────────────── */
-
-.appkit-formshell__body {
-  flex: 1;
-  /* Ensure body content is not hidden under the sticky footer. The footer is
-     ~56px tall; add generous padding so the last field is always reachable. */
-  padding-bottom: 5rem;
-}
-
-.appkit-formshell__steps {
-  display: flex;
-  flex-direction: column;
-  gap: var(--appkit-spacing-1, 0.25rem);
-}
-
-.appkit-formshell__step {
-  border: 1px solid var(--appkit-color-border);
-  border-radius: var(--appkit-radius-md, 0.375rem);
-  overflow: hidden;
-}
-
-.appkit-formshell__step--active {
-  border-color: var(--appkit-color-primary);
-}
-
-.appkit-formshell__step--error {
-  border-color: var(--appkit-color-error, #dc2626);
-}
-
-/* Mobile accordion button — hidden on lg+ (step indicator handles navigation) */
-.appkit-formshell__step-accordion-btn {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: var(--appkit-spacing-3, 0.75rem) var(--appkit-spacing-4, 1rem);
-  background: var(--appkit-color-surface-secondary);
-  border: none;
-  cursor: pointer;
-  font-size: var(--appkit-font-size-sm, 0.875rem);
-  font-weight: 500;
-  color: var(--appkit-color-text-primary);
-  text-align: left;
-}
-
-.appkit-formshell__step-accordion-label {
-  flex: 1;
-}
-
-/* On lg+ the accordion controls are purely decorative; the step indicator drives navigation */
-@media (min-width: 1024px) {
-  .appkit-formshell--accordion-mobile .appkit-formshell__step-accordion-btn {
-    display: none;
-  }
-
-  .appkit-formshell--accordion-mobile .appkit-formshell__step [hidden] {
-    display: block !important;
-  }
-
-  .appkit-formshell--accordion-mobile .appkit-formshell__step-content {
-    display: block !important;
-  }
-}
-
-.appkit-formshell__step-content {
-  padding: 0.75rem 1.25rem;
-}
-
-@media (max-width: 639px) {
-  .appkit-formshell__step-content,
-  .appkit-formshell__footer {
-    padding: 0.5rem 0.875rem;
-  }
-}
-
-/* ─── Footer ──────────────────────────────────────────────────────────────── */
-
-/*
- * Sticky footer — always visible regardless of scroll position.
- * Uses var(--appkit-z-dropdown, 30) so it stays above card content but below
- * the site header (which uses var(--appkit-z-modal, 50)).
- *
- * Bottom offset accounts for:
- *   - Mobile: bottom nav (--bottom-nav-height, 56px fallback) + iOS safe area
- *   - Desktop (lg+): no bottom nav, just standard padding
- */
-.appkit-formshell__footer {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: var(--appkit-z-dropdown, 30);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--appkit-spacing-3, 0.75rem);
-  padding: 0.75rem 1.25rem;
-  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
-  border-top: 1px solid var(--appkit-color-border);
-  background: var(--appkit-color-surface);
-  flex-wrap: wrap;
-  /* Offset for mobile bottom nav (--bottom-nav-height set by AppLayoutShell) */
-  margin-bottom: 0;
-}
-
-/* On mobile, lift the footer above the bottom nav bar */
-@media (max-width: 1023px) {
-  .appkit-formshell__footer {
-    bottom: var(--bottom-nav-height, 64px);
-    box-shadow: 0 -2px 8px 0 rgb(0 0 0 / 0.08);
-  }
-}
-
-/* On desktop the bottom nav is gone — reset to viewport bottom */
-@media (min-width: 1024px) {
-  .appkit-formshell__footer {
-    bottom: 0;
-    box-shadow: 0 -1px 0 0 var(--appkit-color-border);
-  }
-}
-
-.appkit-formshell__step-nav {
-  display: flex;
-  gap: var(--appkit-spacing-2, 0.5rem);
-}
-
-.appkit-formshell__actions {
-  display: flex;
-  gap: var(--appkit-spacing-2, 0.5rem);
-  margin-left: auto;
-}
-
-/* ─── Dark mode ──────────────────────────────────────────────────────────── */
-
-.dark .appkit-formshell__footer {
-  background: var(--appkit-color-surface-dark, var(--appkit-color-surface));
-}
-
-.dark .appkit-formshell__title {
-  color: var(--appkit-color-text-primary-dark, inherit);
-}
-
-.dark .appkit-formshell__step-accordion-btn {
-  background: var(--appkit-color-surface-secondary-dark, var(--appkit-color-surface-secondary));
-  color: var(--appkit-color-text-primary-dark, inherit);
-}
-
-.dark .appkit-formshell__error-summary {
-  background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.1);
-}
+/* ─── FormShell ─────────────────────────────────────────────────────────────── */
+
+.appkit-formshell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-spacing-6, 1.5rem);
+}
+
+/* Header */
+.appkit-formshell__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-spacing-4, 1rem);
+}
+
+.appkit-formshell__title {
+  font-size: var(--appkit-font-size-lg, 1.125rem);
+  font-weight: 600;
+  color: var(--appkit-color-text-primary);
+}
+
+/* ─── Step Indicator ──────────────────────────────────────────────────────── */
+
+.appkit-formshell__step-indicator {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--appkit-spacing-1, 0.25rem);
+  border-bottom: 1px solid var(--appkit-color-border);
+  padding-bottom: var(--appkit-spacing-3, 0.75rem);
+}
+
+.appkit-formshell__step-btn {
+  display: flex;
+  align-items: center;
+  gap: var(--appkit-spacing-2, 0.5rem);
+  padding: var(--appkit-spacing-1-5, 0.375rem) var(--appkit-spacing-3, 0.75rem);
+  border-radius: var(--appkit-radius-md, 0.375rem);
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--appkit-color-text-secondary);
+  cursor: pointer;
+  font-size: var(--appkit-font-size-sm, 0.875rem);
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.appkit-formshell__step-btn:hover {
+  background: var(--appkit-color-surface-hover);
+  border-color: var(--appkit-color-border);
+}
+
+.appkit-formshell__step-btn--active {
+  background: var(--appkit-color-primary-subtle, rgb(from var(--appkit-color-primary) r g b / 0.1));
+  border-color: var(--appkit-color-primary);
+  color: var(--appkit-color-primary);
+  font-weight: 500;
+}
+
+.appkit-formshell__step-btn--error {
+  color: var(--appkit-color-error, #dc2626);
+  border-color: var(--appkit-color-error, #dc2626);
+}
+
+.appkit-formshell__step-dot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  background: var(--appkit-color-surface-secondary);
+  font-size: var(--appkit-font-size-xs, 0.75rem);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.appkit-formshell__step-btn--active .appkit-formshell__step-dot {
+  background: var(--appkit-color-primary);
+  color: #fff;
+}
+
+.appkit-formshell__step-btn--error .appkit-formshell__step-dot {
+  background: var(--appkit-color-error, #dc2626);
+  color: #fff;
+}
+
+/* Red dot badge on step dot */
+.appkit-formshell__step-error-badge {
+  position: absolute;
+  top: -3px;
+  right: -3px;
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  background: var(--appkit-color-error, #dc2626);
+  border: 2px solid var(--appkit-color-surface);
+}
+
+/* Inline error count badge (accordion header) */
+.appkit-formshell__step-error-badge--inline {
+  position: static;
+  width: auto;
+  height: auto;
+  border-radius: var(--appkit-radius-full, 9999px);
+  padding: 0 0.375rem;
+  font-size: var(--appkit-font-size-xs, 0.75rem);
+  font-weight: 600;
+  color: #fff;
+  line-height: 1.4;
+  border: none;
+}
+
+.appkit-formshell__step-label {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .appkit-formshell__step-label {
+    display: inline;
+  }
+}
+
+/* ─── Error Summary ───────────────────────────────────────────────────────── */
+
+.appkit-formshell__error-summary {
+  border: 1px solid var(--appkit-color-error, #dc2626);
+  border-radius: var(--appkit-radius-md, 0.375rem);
+  padding: var(--appkit-spacing-3, 0.75rem);
+  background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.05);
+}
+
+.appkit-formshell__error-summary__title {
+  font-weight: 600;
+  margin-bottom: var(--appkit-spacing-2, 0.5rem);
+}
+
+.appkit-formshell__error-summary__list {
+  list-style: disc;
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-spacing-1, 0.25rem);
+}
+
+.appkit-formshell__error-summary__step-link {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.appkit-formshell__error-summary__step-link:hover {
+  color: var(--appkit-color-error, #dc2626);
+}
+
+/* ─── Body + Steps ───────────────────────────────────────────────────────── */
+
+.appkit-formshell__body {
+  flex: 1;
+  /* Ensure body content is not hidden under the sticky footer. The footer is
+     ~56px tall; add generous padding so the last field is always reachable. */
+  padding-bottom: 5rem;
+}
+
+.appkit-formshell__steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--appkit-spacing-1, 0.25rem);
+}
+
+.appkit-formshell__step {
+  border: 1px solid var(--appkit-color-border);
+  border-radius: var(--appkit-radius-md, 0.375rem);
+  overflow: hidden;
+}
+
+.appkit-formshell__step--active {
+  border-color: var(--appkit-color-primary);
+}
+
+.appkit-formshell__step--error {
+  border-color: var(--appkit-color-error, #dc2626);
+}
+
+/* Mobile accordion button — hidden on lg+ (step indicator handles navigation) */
+.appkit-formshell__step-accordion-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--appkit-spacing-3, 0.75rem) var(--appkit-spacing-4, 1rem);
+  background: var(--appkit-color-surface-secondary);
+  border: none;
+  cursor: pointer;
+  font-size: var(--appkit-font-size-sm, 0.875rem);
+  font-weight: 500;
+  color: var(--appkit-color-text-primary);
+  text-align: left;
+}
+
+.appkit-formshell__step-accordion-label {
+  flex: 1;
+}
+
+/* On lg+ the accordion controls are purely decorative; the step indicator drives navigation */
+@media (min-width: 1024px) {
+  .appkit-formshell--accordion-mobile .appkit-formshell__step-accordion-btn {
+    display: none;
+  }
+
+  .appkit-formshell--accordion-mobile .appkit-formshell__step [hidden] {
+    display: block !important;
+  }
+
+  .appkit-formshell--accordion-mobile .appkit-formshell__step-content {
+    display: block !important;
+  }
+}
+
+.appkit-formshell__step-content {
+  padding: 0.75rem 1.25rem;
+}
+
+@media (max-width: 639px) {
+  .appkit-formshell__step-content {
+    padding: 0.5rem 0.875rem;
+  }
+}
+/* --- Footer --------------------------------------------------------------- */
+
+/*
+ * `.appkit-formshell__footer`, `__step-nav` and `__actions` were deleted here:
+ * `ui/forms/FormShell.tsx` is context/state only and renders no footer JSX, so
+ * nothing had referenced them for a long time. The real form footer lives in
+ * `features/shell/FormShell.tsx` and is an ActionRow now.
+ *
+ * Worth recording: this dead block held the ONLY `flex-wrap: wrap` on any
+ * action row in the codebase. Every live footer had lost it.
+ */
+
+/* ─── Dark mode ──────────────────────────────────────────────────────────── */
+
+.dark .appkit-formshell__title {
+  color: var(--appkit-color-text-primary-dark, inherit);
+}
+
+.dark .appkit-formshell__step-accordion-btn {
+  background: var(--appkit-color-surface-secondary-dark, var(--appkit-color-surface-secondary));
+  color: var(--appkit-color-text-primary-dark, inherit);
+}
+
+.dark .appkit-formshell__error-summary {
+  background: rgb(from var(--appkit-color-error, #dc2626) r g b / 0.1);
+}

package/dist/ui/index.d.ts

@@ -43,6 +43,8 @@ export type { TextLinkProps } from "./components/TextLink";
 export { TextLink } from "./components/TextLink";
 export type { TooltipProps } from "./components/Tooltip";
 export { Tooltip } from "./components/Tooltip";
+export type { ActionRowProps, ActionRowAlign } from "./components/ActionRow";
+export { ActionRow } from "./components/ActionRow";
 export type { AccordionProps, AccordionItemProps, } from "./components/Accordion";
 export { Accordion, AccordionItem } from "./components/Accordion";
 export type { FormProps, GapToken, FormGroupProps, FormFieldSpanProps, FormActionsProps, } from "./components/Form";

package/dist/ui/index.js

@@ -24,6 +24,7 @@ export { Icon } from "./components/Icon";
 export { ICONS, ICON_SIZE, isIconKey, resolveIcon, } from "./icons/icon-registry";
 export { TextLink } from "./components/TextLink";
 export { Tooltip } from "./components/Tooltip";
+export { ActionRow } from "./components/ActionRow";
 export { Accordion, AccordionItem } from "./components/Accordion";
 export { Form, FormGroup, FormFieldSpan, FormActions } from "./components/Form";
 export { Badge } from "./components/Badge";

package/dist/utils/index.d.ts

@@ -8,7 +8,6 @@ export * from "./id-generators";
 export * from "./media-field";
 export * from "./array.helper";
 export * from "./object.helper";
-export * from "./pagination.helper";
 export * from "./sorting.helper";
 export * from "./animation.helper";
 export * from "./color.helper";

package/dist/utils/index.js

@@ -8,7 +8,6 @@ export * from "./id-generators";
 export * from "./media-field";
 export * from "./array.helper";
 export * from "./object.helper";
-export * from "./pagination.helper";
 export * from "./sorting.helper";
 export * from "./animation.helper";
 export * from "./color.helper";

package/dist/validation/index.d.ts

@@ -1,4 +1,4 @@
-export { paginationQuerySchema, objectIdSchema, urlSchema, mediaUrlSchema, dateStringSchema, passwordSchema, phoneSchema, emailSchema, addressSchema, resetPasswordSchema, sendVerificationSchema, addPhoneSchema, verifyPhoneSchema, deleteAccountSchema, changePasswordSchema, cropDataSchema, trimDataSchema, validateRequestBody, formatZodErrors, } from "./schemas";
+export { paginationQuerySchema, objectIdSchema, urlSchema, mediaUrlSchema, dateStringSchema, passwordSchema, phoneSchema, emailSchema, resetPasswordSchema, sendVerificationSchema, addPhoneSchema, verifyPhoneSchema, deleteAccountSchema, changePasswordSchema, cropDataSchema, trimDataSchema, validateRequestBody, formatZodErrors, } from "./schemas";
 export { zodErrorMap, setupZodErrorMap } from "./zod-error-map";
 export { ZodSetup } from "./ZodSetup";
 export type { ZodSetupProps } from "./ZodSetup";

package/dist/validation/index.js

@@ -1,4 +1,4 @@
-export { paginationQuerySchema, objectIdSchema, urlSchema, mediaUrlSchema, dateStringSchema, passwordSchema, phoneSchema, emailSchema, addressSchema, resetPasswordSchema, sendVerificationSchema, addPhoneSchema, verifyPhoneSchema, deleteAccountSchema, changePasswordSchema, cropDataSchema, trimDataSchema, validateRequestBody, formatZodErrors, } from "./schemas";
+export { paginationQuerySchema, objectIdSchema, urlSchema, mediaUrlSchema, dateStringSchema, passwordSchema, phoneSchema, emailSchema, resetPasswordSchema, sendVerificationSchema, addPhoneSchema, verifyPhoneSchema, deleteAccountSchema, changePasswordSchema, cropDataSchema, trimDataSchema, validateRequestBody, formatZodErrors, } from "./schemas";
 export { zodErrorMap, setupZodErrorMap } from "./zod-error-map";
 export { ZodSetup } from "./ZodSetup";
 export * from "./email.validator";

package/dist/validation/schemas.d.ts

@@ -63,25 +63,6 @@ export declare const richTextBodySchema: (max?: number) => z.ZodString;
 export declare const passwordSchema: z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>;
 export declare const phoneSchema: z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>;
 export declare const emailSchema: z.ZodString;
-export declare const addressSchema: z.ZodObject<{
-    street: z.ZodEffects<z.ZodString, string, string>;
-    city: z.ZodString;
-    state: z.ZodString;
-    pincode: z.ZodEffects<z.ZodString, string, string>;
-    country: z.ZodString;
-}, "strip", z.ZodTypeAny, {
-    country: string;
-    city: string;
-    state: string;
-    pincode: string;
-    street: string;
-}, {
-    country: string;
-    city: string;
-    state: string;
-    pincode: string;
-    street: string;
-}>;
 export declare const resetPasswordSchema: z.ZodObject<{
     token: z.ZodString;
     newPassword: z.ZodEffects<z.ZodEffects<z.ZodString, string, string>, string, string>;