@webamoki/web-svelte 0.5.27 → 0.5.29

package/dist/components/form/FieldWrapper.svelte

@@ -42,7 +42,12 @@
 					{#if label || description}
 						<div>
 							{#if label}
-								<Label class="text-sm font-medium">{label}</Label>
+								<Label class="text-sm font-medium">
+									{label}
+									{#if props['aria-required'] === 'true'}
+										<span class="text-red-500">*</span>
+									{/if}
+								</Label>
 							{/if}
 							{#if description}
 								<Description class="text-sm font-medium">{description}</Description>

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

@@ -63,7 +63,7 @@
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
 		<Select type="single" {...props} bind:value={getKeyFromValue, setValueFromKey}>
-			<SelectTrigger class={cn('w-[180px] cursor-pointer truncate', className)}>
+			<SelectTrigger class={cn('w-full cursor-pointer truncate', className)}>
 				<span class="block truncate">
 					{value ? getLabel(valueToItem.get(value)!) : placeholder}
 				</span>

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

@@ -12,10 +12,11 @@
 </script>
 
 <script lang="ts">
-	import { Days, formatDayLetter, formatDayShort, type Day } from '../../../utils/index.js';
+	import { Days, formatDayLetter, formatDayShort } from '../../../utils/datetime/index.js';
 	import { identity } from 'ramda';
 
 	import Choice from './Choice.svelte';
+	import type { Day } from '../../../utils/types/arktype.js';
 
 	let { value = $bindable(undefined), ...props }: WeekdayChoiceProps = $props();
 

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

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

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

@@ -15,8 +15,9 @@
 </script>
 
 <script lang="ts">
-	import { Days, formatDayLetter, formatDayShort, type Day } from '../../../utils/index.js';
 	import ChoiceMulti from './ChoiceMulti.svelte';
+	import { Days, formatDayLetter, formatDayShort } from '../../../utils/datetime/index.js';
+	import type { Day } from '../../../utils/types/arktype.js';
 
 	let { value = $bindable([]), ...props }: WeekdayChoiceMultiProps = $props();
 

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

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

package/dist/shadcn/components/ui/input/input.svelte

@@ -23,9 +23,8 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
-			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
-			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+			'w-full rounded-lg border border-gray-300 px-4 py-3 transition-all outline-none focus:border-transparent focus:ring-2 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50',
+			'aria-invalid:border-red-500',
 			className
 		)}
 		type="file"
@@ -38,9 +37,8 @@
 		bind:this={ref}
 		data-slot="input"
 		class={cn(
-			'flex h-9 w-full min-w-0 rounded-md border border-input bg-background px-3 py-1 text-base shadow-xs ring-offset-background transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
-			'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
-			'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+			'w-full rounded-lg border border-gray-300 px-4 py-3 transition-all outline-none focus:border-transparent focus:ring-2 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50',
+			'aria-invalid:border-red-500',
 			className
 		)}
 		{type}

package/dist/shadcn/components/ui/select/select-trigger.svelte

@@ -19,7 +19,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+		"flex w-full items-center justify-between gap-2 rounded-lg border border-gray-300 px-4 py-3 transition-all outline-none select-none focus:border-transparent focus:ring-2 focus:ring-primary disabled:opacity-50 aria-invalid:border-red-500 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}

package/dist/utils/form/handler.d.ts

@@ -0,0 +1,29 @@
+import { type SuperValidated } from 'sveltekit-superforms';
+/**
+ * automatically handle database errors from catch.
+ * used in form/action handling in page.server.ts
+ */
+export declare function handleDbErrorForm<T extends Record<string, unknown>>(form: SuperValidated<T>, message: string, err: unknown): import("@sveltejs/kit").ActionFailure<{
+    form: SuperValidated<T>;
+}>;
+/**
+ * check if an error returned by a try catch is a duplicate value error in postgre
+ */
+export declare function isDuplicateDbError(err: unknown): boolean;
+export declare function successMessage<T extends Record<string, unknown>>(form: SuperValidated<T>): {
+    form: SuperValidated<T, any, T>;
+} | import("@sveltejs/kit").ActionFailure<{
+    form: SuperValidated<T, any, T>;
+}>;
+export declare function errorMessage<T extends Record<string, unknown>>(form: SuperValidated<T>, options?: {
+    showToast?: boolean;
+    text?: string;
+    data?: unknown;
+}): {
+    form: SuperValidated<T, any, T>;
+} | import("@sveltejs/kit").ActionFailure<{
+    form: SuperValidated<T, any, T>;
+}>;
+export declare function failFormValidation<T extends Record<string, unknown>>(form: SuperValidated<T>): import("@sveltejs/kit").ActionFailure<{
+    form: SuperValidated<T>;
+}>;

package/dist/utils/form/handler.js

@@ -0,0 +1,34 @@
+import { DatabaseError } from 'pg';
+import { fail, message as superFormMessage } from 'sveltekit-superforms';
+/**
+ * automatically handle database errors from catch.
+ * used in form/action handling in page.server.ts
+ */
+export function handleDbErrorForm(form, message, err) {
+    if (err instanceof DatabaseError) {
+        console.error(`Database Error ${message}:`, err);
+        return fail(500, { form });
+    }
+    console.error(`Unexpected Error ${message}:`, err);
+    return fail(500, { form });
+}
+/**
+ * check if an error returned by a try catch is a duplicate value error in postgre
+ */
+export function isDuplicateDbError(err) {
+    return err instanceof DatabaseError && err.code === '23505';
+}
+export function successMessage(form) {
+    return superFormMessage(form, { success: true, showToast: true, text: 'Success' });
+}
+export function errorMessage(form, options) {
+    return superFormMessage(form, {
+        success: false,
+        showToast: options?.showToast ?? false,
+        text: options?.text,
+        data: options?.data
+    });
+}
+export function failFormValidation(form) {
+    return fail(400, { form });
+}

package/dist/utils/{form.d.ts → form/index.d.ts}

@@ -1,3 +1,4 @@
+export * from './handler.js';
 import { type } from 'arktype';
 import { type SuperValidated } from 'sveltekit-superforms';
 export declare function prepareForm<S extends type.Any<Record<string, unknown>>>(validated: SuperValidated<S['infer']> | S['infer'], schema: S, options?: Partial<{

package/dist/utils/{form.js → form/index.js}

@@ -1,8 +1,9 @@
-import { dateTransport } from './index.js';
+export * from './handler.js';
 import { type } from 'arktype';
 import { toast } from 'svelte-sonner';
 import { defaults, superForm, superValidate } from 'sveltekit-superforms';
 import { arktype, arktypeClient } from 'sveltekit-superforms/adapters';
+import { dateTransport } from '../datetime/index.js';
 export function prepareForm(validated, schema, options) {
     const form = superForm(validated, {
         validators: arktypeClient(schema),

package/dist/utils/types/arktype.d.ts

@@ -1,6 +1,7 @@
 import { Type } from 'arktype';
 import { Days } from '../datetime/index.js';
 import { Time as timeImport, CalendarDate as calendarImport } from '@internationalized/date';
+export declare const Phone: import("arktype/internal/variants/string.ts").StringType<string, {}>;
 /** Type string which is trimmed before narrowing the type checking */
 export declare function trimTo(typeTo: Type<string>): import("arktype/internal/variants/object.ts").ObjectType<(In: string) => import("arktype/internal/attributes.ts").To<string>, {}>;
 export declare const Day: import("arktype/internal/variants/string.ts").StringType<"Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday" | "Saturday" | "Sunday", {}>;

package/dist/utils/types/arktype.js

@@ -3,6 +3,15 @@ import { Days } from '../datetime/index.js';
 import { Time as timeImport, CalendarDate as calendarImport } from '@internationalized/date';
 import { EMAIL_MAX, FIRST_NAME_MAX, LAST_NAME_MAX, NAME_MAX } from './consts.js';
 import { toTitleCase } from '../string.js';
+// Phone arktype: allows "+", digits, and spaces only
+export const Phone = type('string').narrow((value, ctx) => {
+    if (!/^[+0-9 ]+$/.test(value)) {
+        return ctx.reject({
+            problem: 'invalid phone number. Only +, digits, and spaces are allowed.'
+        });
+    }
+    return true;
+});
 /** Type string which is trimmed before narrowing the type checking */
 export function trimTo(typeTo) {
     return type('string.trim').to(typeTo);

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.27",
+  "version": "0.5.29",
   "license": "MIT",
   "files": [
     "dist",
@@ -40,8 +40,8 @@
       "import": "./dist/utils/types/db.js"
     },
     "./utils/form": {
-      "types": "./dist/utils/form.d.ts",
-      "import": "./dist/utils/form.js"
+      "types": "./dist/utils/form/index.d.ts",
+      "import": "./dist/utils/form/index.js"
     },
     "./utils/search": {
       "types": "./dist/utils/search.d.ts",
@@ -72,6 +72,7 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.17",
     "@types/node": "^22.19.0",
+    "@types/pg": "^8.15.6",
     "@types/ramda": "^0.31.1",
     "@types/sorted-array-functions": "^1.3.3",
     "arktype": "^2.1.25",

package/dist/utils/index.d.ts

@@ -1,6 +0,0 @@
-export * from './datetime/index.js';
-export * from './types/arktype.js';
-export * from './types/db.js';
-export * from './types/consts.js';
-export * from './string.js';
-export * from './form.js';

package/dist/utils/index.js

@@ -1,6 +0,0 @@
-export * from './datetime/index.js';
-export * from './types/arktype.js';
-export * from './types/db.js';
-export * from './types/consts.js';
-export * from './string.js';
-export * from './form.js';