@webamoki/web-svelte 0.8.0 → 1.0.1

package/README.md

@@ -1,7 +1,87 @@
-# Setup
+# Web-Svelte
 
-in the main css file, e.g. `app.css`, add the following line:
+[![npm version](https://img.shields.io/npm/v/@webamoki/web-svelte.svg)](https://www.npmjs.com/package/@webamoki/web-svelte)
+
+A shared Svelte UI components and utilities library.
+
+## 🚀 Setup
+
+### 1. Install Dependency
+
+Install the library in your project via your preferred package manager:
+
+```bash
+pnpm add @webamoki/web-svelte
+```
+
+### 2. 🎨 Styling
+
+This library is built with Tailwind CSS. To ensure styles are applied correctly in your host project, follow these steps:
+
+### Theme Configuration
+
+Create a `theme.css` file in your project (or update your existing one) to match the CSS variables required by the library's theme.
+
+### Main CSS Setup
+
+In your project's main CSS entry point (e.g., `src/app.css`), include the following. Crucially, you must add the `@source` directive so Tailwind v4 scans the installed library's components for utility classes.
 
 ```css
-@source '../...path/node_modules/@webamoki/web-svelte/dist/**/*.{js,svelte,ts}';
+@import 'tailwindcss';
+@import './theme.css';
+
+/* Tell Tailwind to scan the library for classes */
+@source '../node_modules/@webamoki/web-svelte';
+
+/* Required for the library's dark mode components */
+@custom-variant dark (&:is(.dark *));
 ```
+
+> [!NOTE]
+> Adjust the relative path in `@source` if your `app.css` is deeply nested, e.g., `../../node_modules/...`.
+
+---
+
+## 🛠 Development Workflow
+
+### Local Development
+
+If you want to make changes to `@webamoki/web-svelte` and test them in a host application simultaneously without publishing:
+
+1. Clone this repository:
+   ```bash
+   git clone git@github.com:Webamoki/Web-svelte.git
+   cd Web-svelte
+   pnpm install
+   ```
+2. Link the package globally:
+   ```bash
+   pnpm link --global
+   ```
+3. In your host application, link the local package:
+   ```bash
+   pnpm link --global @webamoki/web-svelte
+   ```
+4. Run the package watcher in the library directory to automatically rebuild on changes:
+   ```bash
+   pnpm watch
+   ```
+
+Alternatively, to develop and test components in isolation, you can use the built-in SvelteKit app:
+
+```bash
+pnpm dev
+```
+
+### Versioning & Releases
+
+We use **Semantic Versioning** managed automatically by `semantic-release`.
+
+Every merge to `main` is automatically analyzed based on the
+**[Angular commit message format](https://github.com/angular/angular/blob/main/contributing-docs/commit-message-guidelines.md)**
+to determine the correct version bump, generate a changelog, create a GitHub Release,
+and publish the package to npm with OIDC provenance.
+
+- **Patch Release (`v1.0.x`)**: `fix:`, `perf:`, etc. (Bug fixes, minor tweaks)
+- **Minor Release (`v1.x.0`)**: `feat:` (New features added in a backwards-compatible manner)
+- **Major Release (`vX.0.0`)**: Any commit that includes `BREAKING CHANGE:` in its footer.

package/dist/components/form/Button.svelte

@@ -1,29 +1,30 @@
 <script lang="ts">
-	import Loader2Icon from '@lucide/svelte/icons/loader-2';
-	import { Button } from '../../shadcn/components/ui/button/index.js';
-	import type { ButtonProps } from '../../shadcn/components/ui/button/index.js';
+  import type { ButtonProps } from '../../shadcn/components/ui/button/index.js';
 
-	type Props = ButtonProps & {
-		loading?: boolean;
-		class?: string;
-		loadingMessage?: string;
-	};
+  import { Button } from '../../shadcn/components/ui/button/index.js';
+  import Loader2Icon from '@lucide/svelte/icons/loader-2';
 
-	let {
-		disabled,
-		loading,
-		children,
-		loadingMessage = 'Please wait',
-		class: className,
-		...restProps
-	}: Props = $props();
+  type Props = ButtonProps & {
+    class?: string;
+    loading?: boolean;
+    loadingMessage?: string;
+  };
+
+  let {
+    children,
+    class: className,
+    disabled,
+    loading,
+    loadingMessage = 'Please wait',
+    ...restProps
+  }: Props = $props();
 </script>
 
-<Button disabled={disabled || loading} class={className} {...restProps}>
-	{#if loading}
-		<Loader2Icon class="mr-2 animate-spin" />
-		{loadingMessage}
-	{:else}
-		{@render children?.()}
-	{/if}
+<Button class={className} disabled={disabled || loading} {...restProps}>
+  {#if loading}
+    <Loader2Icon class="mr-2 animate-spin" />
+    {loadingMessage}
+  {:else}
+    {@render children?.()}
+  {/if}
 </Button>

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

@@ -1,8 +1,8 @@
-import { Button } from '../../shadcn/components/ui/button/index.js';
 import type { ButtonProps } from '../../shadcn/components/ui/button/index.js';
+import { Button } from '../../shadcn/components/ui/button/index.js';
 type Props = ButtonProps & {
-    loading?: boolean;
     class?: string;
+    loading?: boolean;
     loadingMessage?: string;
 };
 declare const Button: import("svelte").Component<Props, {}, "">;

package/dist/components/form/Errors.svelte

@@ -1,20 +1,20 @@
 <script lang="ts">
-	import { cn } from '../../shadcn/utils.js';
-	import { FieldErrors } from 'formsnap';
+  import { cn } from '../../shadcn/utils.js';
+  import { FieldErrors } from 'formsnap';
 
-	interface Props {
-		class?: string;
-	}
+  interface Props {
+    class?: string;
+  }
 
-	let { class: className = '' }: Props = $props();
+  let { class: className = '' }: Props = $props();
 </script>
 
 <FieldErrors>
-	{#snippet children({ errors, errorProps })}
-		<div class={cn('space-y-1', className)}>
-			{#each errors as error, i (i)}
-				<span class="text-destructive" {...errorProps}>{error}</span>
-			{/each}
-		</div>
-	{/snippet}
+  {#snippet children({ errorProps, errors })}
+    <div class={cn('space-y-1', className)}>
+      {#each errors as error, i (i)}
+        <span class="text-destructive" {...errorProps}>{error}</span>
+      {/each}
+    </div>
+  {/snippet}
 </FieldErrors>

package/dist/components/form/FieldWrapper.svelte

@@ -1,64 +1,66 @@
 <script lang="ts" module>
-	export interface FieldWrapperProps<T extends Record<string, unknown>, U extends FormPath<T>, M> {
-		form: FsSuperForm<T, M>;
-		name: U;
-		label?: string;
-		description?: string;
-		class?: string;
-	}
+  export interface FieldWrapperProps<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    class?: string;
+    description?: string;
+    form: FsSuperForm<T, M>;
+    label?: string;
+    name: U;
+  }
 
-	export interface FormAttrs extends ControlAttrs {
-		disabled?: HTMLInputAttributes['disabled'];
-		readonly?: HTMLInputAttributes['readonly'];
-	}
+  export interface FormAttrs extends ControlAttrs {
+    disabled?: HTMLInputAttributes['disabled'];
+    readonly?: HTMLInputAttributes['readonly'];
+  }
 </script>
 
-<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
-	import { cn } from '../../shadcn/utils.js';
-	import {
-		Control,
-		Description,
-		Field,
-		Label,
-		type ControlAttrs,
-		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';
+<script generics="T extends Record<string, unknown>, U extends FormPath<T>, M" lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import type { FormPath } from 'sveltekit-superforms';
 
-	interface Props extends FieldWrapperProps<T, U, M> {
-		formElem: Snippet<[ControlAttrs]>;
-	}
-	let { form, name, label, description, formElem, class: className }: Props = $props();
+  import { cn } from '../../shadcn/utils.js';
+  import {
+    Control,
+    type ControlAttrs,
+    Description,
+    Field,
+    type FsSuperForm,
+    Label
+  } from 'formsnap';
+
+  import Errors from './Errors.svelte';
+
+  interface Props extends FieldWrapperProps<T, U, M> {
+    formElem: Snippet<[ControlAttrs]>;
+  }
+  let { class: className, description, form, formElem, label, name }: Props = $props();
 </script>
 
-<Field {form} {name}>
-	<div class={cn('space-y-1', className)}>
-		<Control>
-			{#snippet children({ props })}
-				<div class="w-full space-y-1">
-					{#if label || description}
-						<div>
-							{#if label}
-								<Label class="mb-2 text-sm font-medium">
-									{label}
-									{#if props['aria-required'] === 'true'}
-										<span class="text-red-500">*</span>
-									{/if}
-								</Label>
-							{/if}
-							{#if description}
-								<Description class="mb-2 text-sm font-medium">{description}</Description>
-							{/if}
-						</div>
-					{/if}
-					{@render formElem(props)}
-				</div>
-			{/snippet}
-		</Control>
+<Field {name} {form}>
+  <div class={cn('space-y-1', className)}>
+    <Control>
+      {#snippet children({ props })}
+        <div class="w-full space-y-1">
+          {#if label || description}
+            <div>
+              {#if label}
+                <Label class="mb-2 text-sm font-medium">
+                  {label}
+                  {#if props['aria-required'] === 'true'}
+                    <span class="text-red-500">*</span>
+                  {/if}
+                </Label>
+              {/if}
+              {#if description}
+                <Description class="mb-2 text-sm font-medium">{description}</Description>
+              {/if}
+            </div>
+          {/if}
+          {@render formElem(props)}
+        </div>
+      {/snippet}
+    </Control>
 
-		<Errors />
-	</div>
+    <Errors />
+  </div>
 </Field>

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

@@ -1,18 +1,18 @@
 export interface FieldWrapperProps<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    class?: string;
+    description?: string;
     form: FsSuperForm<T, M>;
-    name: U;
     label?: string;
-    description?: string;
-    class?: string;
+    name: U;
 }
 export interface FormAttrs extends ControlAttrs {
     disabled?: HTMLInputAttributes['disabled'];
     readonly?: HTMLInputAttributes['readonly'];
 }
-import { type ControlAttrs, type FsSuperForm } from 'formsnap';
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { FormPath } from 'sveltekit-superforms';
+import { type ControlAttrs, type FsSuperForm } from 'formsnap';
 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/Form.svelte

@@ -1,19 +1,23 @@
-<script lang="ts" generics="T extends Record<string, unknown>, M">
-	import type { FsSuperForm } from 'formsnap';
-	import type { Snippet } from 'svelte';
+<script generics="T extends Record<string, unknown>, M" lang="ts">
+  import type { FsSuperForm } from 'formsnap';
+  import type { Snippet } from 'svelte';
 
-	interface Props {
-		form: FsSuperForm<T, M>;
-		action: string;
-		actionName?: string;
-		class?: string;
-		children?: Snippet;
-	}
+  interface Props {
+    actionName?: string;
+    actionPath: string;
+    children?: Snippet;
+    class?: string;
+    form: FsSuperForm<T, M>;
+  }
 
-	let { form, action: _action, actionName, class: className, children }: Props = $props();
-	actionName = actionName ? `?/${actionName}` : '';
+  let { actionName, actionPath, children, class: className, form }: Props = $props();
 </script>
 
-<form class={className} action="{_action}{actionName}" method="POST" use:form.enhance>
-	{@render children?.()}
+<form
+  class={className}
+  action="{actionPath ?? ''}{actionName ? `?/${actionName}` : ''}"
+  method="POST"
+  use:form.enhance
+>
+  {@render children?.()}
 </form>

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

@@ -1,32 +1,41 @@
-import type { FsSuperForm } from 'formsnap';
-import type { Snippet } from 'svelte';
+export default Form;
+type Form<T extends Record<string, unknown>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "" | undefined;
+} & {};
+declare const Form: $$IsomorphicComponent;
+type Props = {
+    actionName?: string | undefined;
+    actionPath: string;
+    children?: Snippet<[]> | undefined;
+    class?: string | undefined;
+    form: FsSuperForm<T, M>;
+};
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, M>(options: import("svelte").ComponentConstructorOptions<ReturnType<__sveltets_Render<T, M>["props"]>>): import("svelte").SvelteComponent<ReturnType<__sveltets_Render<T, M>["props"]>, ReturnType<__sveltets_Render<T, M>["events"]>, ReturnType<__sveltets_Render<T, M>["slots"]>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, M>["bindings"]>;
+    } & ReturnType<__sveltets_Render<T, M>["exports"]>;
+    <T extends Record<string, unknown>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, M>["props"]> & {}): ReturnType<__sveltets_Render<T, M>["exports"]>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>["bindings"]>;
+}
+declare class __sveltets_Render<T extends Record<string, unknown>, M> {
+    props(): ReturnType<typeof $$render<T, M>>["props"];
+    events(): ReturnType<typeof $$render<T, M>>["events"];
+    slots(): ReturnType<typeof $$render<T, M>>["slots"];
+    bindings(): "";
+    exports(): {};
+}
 declare function $$render<T extends Record<string, unknown>, M>(): {
     props: {
-        form: FsSuperForm<T, M>;
-        action: string;
         actionName?: string;
-        class?: string;
+        actionPath: string;
         children?: Snippet;
+        class?: string;
+        form: FsSuperForm<T, M>;
     };
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends Record<string, unknown>, M> {
-    props(): ReturnType<typeof $$render<T, M>>['props'];
-    events(): ReturnType<typeof $$render<T, M>>['events'];
-    slots(): ReturnType<typeof $$render<T, M>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, M>['props']>, ReturnType<__sveltets_Render<T, M>['events']>, ReturnType<__sveltets_Render<T, M>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, M>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, M>['exports']>;
-    <T extends Record<string, unknown>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, M>['props']> & {}): ReturnType<__sveltets_Render<T, M>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
-}
-declare const Form: $$IsomorphicComponent;
-type Form<T extends Record<string, unknown>, M> = InstanceType<typeof Form<T, M>>;
-export default Form;
+import { Snippet } from 'svelte';
+import { FsSuperForm } from 'formsnap';

package/dist/components/form/IconInputWrapper.svelte

@@ -1,39 +1,40 @@
 <script lang="ts">
-	import type { Component, Snippet } from 'svelte';
+  import type { Component, Snippet } from 'svelte';
 
-	interface Props {
-		icon?: Component;
-		/**
-		 * Position of the icon vertically.
-		 * - 'center': Centers vertically (for single-line inputs)
-		 * - 'top': Aligns to top with padding (for multi-line inputs like textarea)
-		 */
-		iconPosition?: 'center' | 'top';
-		/**
-		 * Whether this wrapper should grow to fill flex container (used in layouts with buttons)
-		 */
-		flex?: boolean;
-		children: Snippet<[{ class: string }]>;
-	}
+  interface Props {
+    children: Snippet<[{ class: string }]>;
+    /**
+     * Whether this wrapper should grow to fill flex container (used in layouts with buttons)
+     */
+    flex?: boolean;
+    icon?: Component;
+    /**
+     * Position of the icon vertically.
+     * - 'center': Centers vertically (for single-line inputs)
+     * - 'top': Aligns to top with padding (for multi-line inputs like textarea)
+     */
+    iconPosition?: 'center' | 'top';
+  }
 
-	let { icon, iconPosition = 'center', flex = false, children }: Props = $props();
+  let { children, flex = false, icon, iconPosition = 'center' }: Props = $props();
 
-	const iconClass =
-		iconPosition === 'top'
-			? 'pointer-events-none absolute top-4 left-4 text-gray-500'
-			: 'pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-gray-500';
+  let iconClass = $derived(
+    iconPosition === 'top'
+      ? 'pointer-events-none absolute top-4 left-4 text-gray-500'
+      : 'pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-gray-500'
+  );
 
-	const wrapperClass = flex ? 'relative flex-1' : 'relative';
+  let wrapperClass = $derived(flex ? 'relative flex-1' : 'relative');
 </script>
 
 {#if icon}
-	{@const Icon = icon}
-	<div class={wrapperClass}>
-		<div class={iconClass}>
-			<Icon class="size-5" />
-		</div>
-		{@render children({ class: 'pl-12' })}
-	</div>
+  {@const Icon = icon}
+  <div class={wrapperClass}>
+    <div class={iconClass}>
+      <Icon class="size-5" />
+    </div>
+    {@render children({ class: 'pl-12' })}
+  </div>
 {:else}
-	{@render children({ class: '' })}
+  {@render children({ class: '' })}
 {/if}

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

@@ -1,5 +1,12 @@
 import type { Component, Snippet } from 'svelte';
 interface Props {
+    children: Snippet<[{
+        class: string;
+    }]>;
+    /**
+     * Whether this wrapper should grow to fill flex container (used in layouts with buttons)
+     */
+    flex?: boolean;
     icon?: Component;
     /**
      * Position of the icon vertically.
@@ -7,13 +14,6 @@ interface Props {
      * - 'top': Aligns to top with padding (for multi-line inputs like textarea)
      */
     iconPosition?: 'center' | 'top';
-    /**
-     * Whether this wrapper should grow to fill flex container (used in layouts with buttons)
-     */
-    flex?: boolean;
-    children: Snippet<[{
-        class: string;
-    }]>;
 }
 declare const IconInputWrapper: Component<Props, {}, "">;
 type IconInputWrapper = ReturnType<typeof IconInputWrapper>;

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

@@ -1,51 +1,53 @@
 <script
-	lang="ts"
-	generics="V,I, K extends string | number | symbol,T extends Record<string, unknown>, U extends FormPath<T>, M"
+  generics="V,I, K extends number | string | symbol,T extends Record<string, unknown>, U extends FormPath<T>, M"
+  lang="ts"
 >
-	import Choice, { type ChoiceProps } from '../../ui/choice/Choice.svelte';
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+  import type { FormPath } from 'sveltekit-superforms';
 
-	type Props = {
-		class?: string;
-	} & FieldWrapperProps<T, U, M> &
-		ChoiceProps<V, I, K>;
+  import Choice, { type ChoiceProps } from '../../ui/choice/Choice.svelte';
 
-	let {
-		items,
-		getKey,
-		getLabel,
-		getValue,
-		onChange,
-		vertical,
-		value = $bindable(undefined),
+  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
-		form,
-		name,
-		label,
-		description,
-		disabled,
-		readonly,
-		buttonContent,
-		class: className
-	}: Props = $props();
+  type Props = ChoiceProps<V, I, K> &
+    FieldWrapperProps<T, U, M> & {
+      class?: string;
+    };
+
+  let {
+    buttonContent,
+    class: className,
+    description,
+    disabled,
+    form,
+    getKey,
+    getLabel,
+
+    getValue,
+    items,
+    label,
+    name,
+    onChange,
+    readonly,
+    value = $bindable(undefined),
+    vertical
+  }: Props = $props();
 </script>
 
-<FieldWrapper {form} {name} {label} {description} class={className}>
-	{#snippet formElem(props)}
-		<Choice
-			{items}
-			{getKey}
-			{getLabel}
-			{getValue}
-			{onChange}
-			{buttonContent}
-			{vertical}
-			{disabled}
-			{readonly}
-			bind:value
-			{...props}
-			class="w-full"
-		/>
-	{/snippet}
+<FieldWrapper {name} class={className} {description} {form} {label}>
+  {#snippet formElem(props)}
+    <Choice
+      {buttonContent}
+      {disabled}
+      {getKey}
+      {getLabel}
+      {getValue}
+      {items}
+      {onChange}
+      {readonly}
+      {vertical}
+      bind:value
+      {...props}
+      class="w-full"
+    />
+  {/snippet}
 </FieldWrapper>