@webamoki/web-svelte 0.5.24 → 0.5.25

package/dist/components/form/FieldWrapper.svelte

@@ -4,6 +4,7 @@
 		name: U;
 		label?: string;
 		description?: string;
+		class?: string;
 	}
 
 	export interface FormAttrs extends ControlAttrs {
@@ -13,6 +14,7 @@
 </script>
 
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
+	import { cn } from '../../shadcn/utils.js';
 	import {
 		Control,
 		Description,
@@ -22,21 +24,21 @@
 		type FsSuperForm
 	} from 'formsnap';
 	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { FormPath } from 'sveltekit-superforms';
 	import Errors from './Errors.svelte';
-	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		formElem: Snippet<[ControlAttrs]>;
 	}
-	let { form, name, label, description, formElem }: Props = $props();
+	let { form, name, label, description, formElem, class: className }: Props = $props();
 </script>
 
 <Field {form} {name}>
-	<div class="space-y-1">
+	<div class={cn('space-y-1', className)}>
 		<Control>
 			{#snippet children({ props })}
-				<div class="space-y-1">
+				<div class="w-full space-y-1">
 					{#if label || description}
 						<div>
 							{#if label}

package/dist/components/form/FieldWrapper.svelte.d.ts

@@ -3,6 +3,7 @@ export interface FieldWrapperProps<T extends Record<string, unknown>, U extends
     name: U;
     label?: string;
     description?: string;
+    class?: string;
 }
 export interface FormAttrs extends ControlAttrs {
     disabled?: HTMLInputAttributes['disabled'];
@@ -10,8 +11,8 @@ export interface FormAttrs extends ControlAttrs {
 }
 import { type ControlAttrs, type FsSuperForm } from 'formsnap';
 import type { Snippet } from 'svelte';
-import type { FormPath } from 'sveltekit-superforms';
 import type { HTMLInputAttributes } from 'svelte/elements';
+import type { FormPath } from 'sveltekit-superforms';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
         formElem: Snippet<[ControlAttrs]>;

package/dist/components/form/fields/ChoiceField.svelte

@@ -6,7 +6,10 @@
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
-	type Props = FieldWrapperProps<T, U, M> & ChoiceProps<V, I, K>;
+	type Props = {
+		class?: string;
+	} & FieldWrapperProps<T, U, M> &
+		ChoiceProps<V, I, K>;
 
 	let {
 		items,
@@ -23,26 +26,26 @@
 		description,
 		disabled,
 		readonly,
-		buttonContent
+		buttonContent,
+		class: className
 	}: Props = $props();
 </script>
 
-<FieldWrapper {form} {name} {label} {description}>
+<FieldWrapper {form} {name} {label} {description} class={className}>
 	{#snippet formElem(props)}
-		<div class="flex w-full items-center gap-2">
-			<Choice
-				{items}
-				{getKey}
-				{getLabel}
-				{getValue}
-				{onChange}
-				{buttonContent}
-				{vertical}
-				{disabled}
-				{readonly}
-				bind:value
-				{...props}
-			/>
-		</div>
+		<Choice
+			{items}
+			{getKey}
+			{getLabel}
+			{getValue}
+			{onChange}
+			{buttonContent}
+			{vertical}
+			{disabled}
+			{readonly}
+			bind:value
+			{...props}
+			class="w-full"
+		/>
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/ChoiceField.svelte.d.ts

@@ -2,7 +2,9 @@ import { type ChoiceProps } from '../../ui/choice/Choice.svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
 declare function $$render<V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
-    props: FieldWrapperProps<T, U, M> & ChoiceProps<V, I, K>;
+    props: {
+        class?: string;
+    } & FieldWrapperProps<T, U, M> & ChoiceProps<V, I, K>;
     exports: {};
     bindings: "value";
     slots: {};

package/dist/components/form/fields/ChoiceMultiField.svelte

@@ -6,7 +6,7 @@
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
-	type Props = FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, I, K>;
+	type Props = { class?: string } & FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, I, K>;
 	let {
 		items,
 		getKey,
@@ -23,27 +23,27 @@
 		description,
 		disabled,
 		readonly,
-		buttonContent
+		buttonContent,
+		class: className
 	}: Props = $props();
 </script>
 
-<FieldWrapper {form} {name} {label} {description}>
+<FieldWrapper {form} {name} {label} {description} class={className}>
 	{#snippet formElem(props)}
-		<div class="flex w-full items-center gap-2">
-			<ChoiceMulti
-				{items}
-				{getKey}
-				{getLabel}
-				{getValue}
-				{onAdd}
-				{onRemove}
-				{buttonContent}
-				{disabled}
-				{readonly}
-				{vertical}
-				{...props}
-				bind:value
-			/>
-		</div>
+		<ChoiceMulti
+			{items}
+			{getKey}
+			{getLabel}
+			{getValue}
+			{onAdd}
+			{onRemove}
+			{buttonContent}
+			{disabled}
+			{readonly}
+			{vertical}
+			{...props}
+			bind:value
+			class="w-full"
+		/>
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/ChoiceMultiField.svelte.d.ts

@@ -2,7 +2,9 @@ import { type ChoiceMultiProps } from '../../ui/choice/ChoiceMulti.svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
 declare function $$render<V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
-    props: FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, I, K>;
+    props: {
+        class?: string;
+    } & FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, I, K>;
     exports: {};
     bindings: "value";
     slots: {};

package/dist/components/form/fields/WeekdayChoiceField.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 	import WeekdayChoice, {
 		type WeekdayChoiceProps
 	} from '../../ui/choice/WeekdayChoice.svelte';
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
-	type Props = FieldWrapperProps<T, U, M> & WeekdayChoiceProps;
+	type Props = { class?: string } & FieldWrapperProps<T, U, M> & WeekdayChoiceProps;
 
 	let {
 		onChange,
@@ -19,23 +19,23 @@
 		label,
 		description,
 		disabled,
-		readonly
+		readonly,
+		class: className
 	}: Props = $props();
 </script>
 
-<FieldWrapper {form} {name} {label} {description}>
+<FieldWrapper {form} {name} {label} {description} class={className}>
 	{#snippet formElem(props)}
-		<div class="flex w-full items-center gap-2">
-			<WeekdayChoice
-				{onChange}
-				{vertical}
-				{disabled}
-				{readonly}
-				{letterLabels}
-				{longLabels}
-				bind:value
-				{...props}
-			/>
-		</div>
+		<WeekdayChoice
+			{onChange}
+			{vertical}
+			{disabled}
+			{readonly}
+			{letterLabels}
+			{longLabels}
+			bind:value
+			{...props}
+			class="w-full"
+		/>
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/WeekdayChoiceField.svelte.d.ts

@@ -1,8 +1,10 @@
+import { type WeekdayChoiceProps } from '../../ui/choice/WeekdayChoice.svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
-import { type WeekdayChoiceProps } from '../../ui/choice/WeekdayChoice.svelte';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
-    props: FieldWrapperProps<T, U, M> & WeekdayChoiceProps;
+    props: {
+        class?: string;
+    } & FieldWrapperProps<T, U, M> & WeekdayChoiceProps;
     exports: {};
     bindings: "value";
     slots: {};

package/dist/components/form/fields/WeekdayChoiceMultiField.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 	import type { WeekdayChoiceMultiProps } from '../../ui/choice/WeekdayChoiceMulti.svelte';
 	import WeekdayChoiceMulti from '../../ui/choice/WeekdayChoiceMulti.svelte';
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
-	type Props = FieldWrapperProps<T, U, M> & WeekdayChoiceMultiProps;
+	type Props = { class?: string } & FieldWrapperProps<T, U, M> & WeekdayChoiceMultiProps;
 	let {
 		onAdd,
 		onRemove,
@@ -18,24 +18,23 @@
 		label,
 		description,
 		disabled,
-		readonly
+		readonly,
+		class: className
 	}: Props = $props();
 </script>
 
-<FieldWrapper {form} {name} {label} {description}>
+<FieldWrapper {form} {name} {label} {description} class={className}>
 	{#snippet formElem(props)}
-		<div class="flex w-full items-center gap-2">
-			<WeekdayChoiceMulti
-				{onAdd}
-				{onRemove}
-				{disabled}
-				{readonly}
-				{vertical}
-				{letterLabels}
-				{longLabels}
-				{...props}
-				bind:value
-			/>
-		</div>
+		<WeekdayChoiceMulti
+			{onAdd}
+			{onRemove}
+			{disabled}
+			{readonly}
+			{vertical}
+			{letterLabels}
+			{longLabels}
+			{...props}
+			bind:value
+		/>
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/WeekdayChoiceMultiField.svelte.d.ts

@@ -1,8 +1,10 @@
+import type { WeekdayChoiceMultiProps } from '../../ui/choice/WeekdayChoiceMulti.svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
-import type { WeekdayChoiceMultiProps } from '../../ui/choice/WeekdayChoiceMulti.svelte';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
-    props: FieldWrapperProps<T, U, M> & WeekdayChoiceMultiProps;
+    props: {
+        class?: string;
+    } & FieldWrapperProps<T, U, M> & WeekdayChoiceMultiProps;
     exports: {};
     bindings: "value";
     slots: {};

package/dist/components/ui/choice/ChoiceInternal.svelte

@@ -7,6 +7,7 @@
 		getValue: (item: I) => V;
 		vertical?: boolean;
 		buttonContent?: Snippet<[label: string, item: I]>;
+		class?: string;
 	}
 </script>
 
@@ -31,6 +32,7 @@
 		readonly,
 		'aria-invalid': ariaInvalid,
 		buttonContent,
+		class: className,
 		...control
 	}: Props = $props();
 </script>
@@ -43,7 +45,8 @@
 		vertical ? 'grid-flow-row auto-rows-fr' : 'auto-cols-fr grid-flow-col',
 		disabled || readonly ? 'pointer-events-none' : 'cursor-pointer',
 		disabled && 'opacity-50',
-		ariaInvalid && 'border-destructive'
+		ariaInvalid && 'border-destructive',
+		className
 	)}
 >
 	{#each items as item (getKey(item))}

package/dist/components/ui/choice/ChoiceInternal.svelte.d.ts

@@ -5,6 +5,7 @@ export interface ChoiceInternalProps<V, I, K extends string | number | symbol> e
     getValue: (item: I) => V;
     vertical?: boolean;
     buttonContent?: Snippet<[label: string, item: I]>;
+    class?: string;
 }
 import type { FormAttrs } from '../../form/FieldWrapper.svelte';
 import type { Snippet } from 'svelte';

package/dist/components/ui/choice/WeekdayChoice.svelte

@@ -7,6 +7,7 @@
 		letterLabels?: boolean;
 		disabled?: boolean | null;
 		readonly?: boolean | null;
+		class?: string;
 	}
 </script>
 

package/dist/components/ui/choice/WeekdayChoice.svelte.d.ts

@@ -6,6 +6,7 @@ export interface WeekdayChoiceProps {
     letterLabels?: boolean;
     disabled?: boolean | null;
     readonly?: boolean | null;
+    class?: string;
 }
 import { type Day } from '../../../utils/index.js';
 declare const WeekdayChoice: import("svelte").Component<WeekdayChoiceProps, {}, "value">;

package/dist/components/ui/choice/WeekdayChoiceMulti.svelte

@@ -10,6 +10,7 @@
 		letterLabels?: boolean;
 		disabled?: boolean | null;
 		readonly?: boolean | null;
+		class?: string;
 	}
 </script>
 

package/dist/components/ui/choice/WeekdayChoiceMulti.svelte.d.ts

@@ -7,6 +7,7 @@ export interface WeekdayChoiceMultiProps {
     letterLabels?: boolean;
     disabled?: boolean | null;
     readonly?: boolean | null;
+    class?: string;
 }
 import { type Day } from '../../../utils/index.js';
 declare const WeekdayChoiceMulti: import("svelte").Component<WeekdayChoiceMultiProps, {}, "value">;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.24",
+  "version": "0.5.25",
   "license": "MIT",
   "files": [
     "dist",