sveltacular 1.0.23 → 1.0.25

package/dist/forms/form-actions/form-actions.svelte

@@ -3,26 +3,57 @@
 	import Button from '../button/button.svelte';
 	import type { ButtonVariant } from '../../types';
 
-	export interface ButtonOpts {
-		type?: 'submit' | 'button';
+	export type AdditionalButton = {
+		type?: 'button' | 'submit' | 'reset';
 		variant?: ButtonVariant;
 		text: string;
-		onClick?: () => void;
-	}
+		onClick?: ((e?: Event) => void) | undefined;
+		disabled?: boolean;
+	};
 
 	let {
 		children,
-		buttons = [
-			{
-				type: 'submit',
-				variant: 'primary',
-				text: 'Save'
-			}
-		]
+		disabled = false,
+		onCancel = undefined,
+		onSubmit = undefined,
+		cancelText = 'Cancel',
+		cancelVariant = 'secondary',
+		submitText = 'Submit',
+		submitVariant = 'primary',
+		additionalButtons = []
 	}: {
 		children?: Snippet;
-		buttons?: ButtonOpts[];
+		disabled?: boolean;
+		onCancel?: (() => void) | undefined;
+		cancelText?: string;
+		cancelVariant?: ButtonVariant;
+		submitText?: string;
+		submitVariant?: ButtonVariant;
+		onSubmit?: (() => void) | undefined;
+		additionalButtons?: AdditionalButton[];
 	} = $props();
+
+	const buttons = $derived(
+		[
+			onCancel
+				? {
+						type: 'button' as const,
+						variant: cancelVariant,
+						text: cancelText,
+						onClick: onCancel,
+						disabled
+					}
+				: undefined,
+			...additionalButtons.map((btn) => ({ ...btn, disabled: btn.disabled || disabled })),
+			{
+				type: 'submit' as const,
+				variant: submitVariant,
+				text: submitText,
+				onClick: onSubmit,
+				disabled
+			}
+		].filter(Boolean) as AdditionalButton[]
+	);
 </script>
 
 <div class="form-actions">
@@ -34,9 +65,10 @@
 	<div class="buttons">
 		{#each buttons as button}
 			<Button
-				type={button.type ?? 'submit'}
+				type={button.type ?? 'button'}
 				variant={button.variant ?? 'secondary'}
-				onClick={button.onClick ?? undefined}
+				onClick={button.onClick}
+				disabled={button.disabled}
 			>
 				{button.text}
 			</Button>
@@ -50,9 +82,9 @@
 .form-actions {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-end; /* Align both sections to bottom */
   justify-content: space-between;
-  gap: var(--spacing-md);
+  gap: var(--spacing-xl);
   /* Vertical spacing - separate form from actions and actions from content below */
   margin-top: var(--spacing-xl);
   margin-bottom: var(--spacing-lg);
@@ -62,18 +94,18 @@
 }
 .form-actions .content {
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--spacing-sm);
-  flex: 0 1 auto; /* Don't grow, can shrink, auto basis */
+  flex-direction: column;
+  align-items: flex-start; /* Align content to left */
+  gap: var(--spacing-md);
+  flex: 1;
 }
 .form-actions .buttons {
   display: flex;
   flex-direction: row;
   align-items: center;
+  justify-content: flex-end; /* Align buttons to right */
   gap: var(--spacing-sm);
-  flex: 0 0 auto; /* Don't grow, don't shrink, auto basis */
-  margin-left: auto; /* Push to the right */
+  flex: 1;
 }
 .form-actions {
   /* Responsive: Stack on mobile */
@@ -81,16 +113,13 @@
 @media (max-width: 479.98px) {
   .form-actions {
     flex-direction: column;
-    align-items: stretch;
+    align-items: center;
     gap: var(--spacing-md);
   }
   .form-actions .content,
   .form-actions .buttons {
     width: 100%;
-    justify-content: flex-start;
-  }
-  .form-actions .buttons {
-    margin-left: 0;
-    justify-content: flex-end;
+    align-items: center;
+    justify-content: center;
   }
 }</style>

package/dist/forms/form-actions/form-actions.svelte.d.ts

@@ -1,14 +1,22 @@
 import type { Snippet } from 'svelte';
 import type { ButtonVariant } from '../../types';
-export interface ButtonOpts {
-    type?: 'submit' | 'button';
+export type AdditionalButton = {
+    type?: 'button' | 'submit' | 'reset';
     variant?: ButtonVariant;
     text: string;
-    onClick?: () => void;
-}
+    onClick?: ((e?: Event) => void) | undefined;
+    disabled?: boolean;
+};
 type $$ComponentProps = {
     children?: Snippet;
-    buttons?: ButtonOpts[];
+    disabled?: boolean;
+    onCancel?: (() => void) | undefined;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+    submitText?: string;
+    submitVariant?: ButtonVariant;
+    onSubmit?: (() => void) | undefined;
+    additionalButtons?: AdditionalButton[];
 };
 declare const FormActions: import("svelte").Component<$$ComponentProps, {}, "">;
 type FormActions = ReturnType<typeof FormActions>;

package/dist/forms/index.d.ts

@@ -21,10 +21,12 @@ export * from './list-box/index.js';
 export * from './phone-box/index.js';
 export * from './radio-group/index.js';
 export { default as Form } from './form.svelte';
+export { default as FormActions } from './form-actions/form-actions.svelte';
 export { default as FormField } from './form-field/form-field.svelte';
 export { default as FormFooter } from './form-footer.svelte';
 export { default as FormHeader } from './form-header.svelte';
 export { default as FormLabel } from './form-label/form-label.svelte';
 export { default as FormSection } from './form-section/form-section.svelte';
 export { default as FormRow } from './form-row/form-row.svelte';
+export type { AdditionalButton } from './form-actions/form-actions.svelte';
 export * from './validation.js';

package/dist/forms/index.js

@@ -24,6 +24,7 @@ export * from './phone-box/index.js';
 export * from './radio-group/index.js';
 // Form structure components
 export { default as Form } from './form.svelte';
+export { default as FormActions } from './form-actions/form-actions.svelte';
 export { default as FormField } from './form-field/form-field.svelte';
 export { default as FormFooter } from './form-footer.svelte';
 export { default as FormHeader } from './form-header.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "1.0.23",
+	"version": "1.0.25",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",