@webamoki/web-svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Webamoki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,58 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/components/form/Errors.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn } from '../../shadcn/utils.js';
+	import { FieldErrors } from 'formsnap';
+
+	interface Props {
+		class?: string;
+	}
+
+	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}
+</FieldErrors>

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

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const Errors: import("svelte").Component<Props, {}, "">;
+type Errors = ReturnType<typeof Errors>;
+export default Errors;

package/dist/components/form/FieldWrapper.svelte

@@ -0,0 +1,51 @@
+<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;
+	}
+</script>
+
+<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
+	import {
+		Control,
+		Description,
+		Field,
+		Label,
+		type ControlAttrs,
+		type FsSuperForm
+	} from 'formsnap';
+	import type { Snippet } from 'svelte';
+	import type { FormPath } from 'sveltekit-superforms';
+	import Errors from './Errors.svelte';
+
+	interface Props extends FieldWrapperProps<T, U, M> {
+		formElem: Snippet<[ControlAttrs]>;
+	}
+	let { form, name, label, description, formElem }: Props = $props();
+</script>
+
+<Field {form} {name}>
+	<div class="space-y-1">
+		<Control>
+			{#snippet children({ props })}
+				<div class="space-y-1">
+					{#if label || description}
+						<div>
+							{#if label}
+								<Label class="text-sm font-medium">{label}</Label>
+							{/if}
+							{#if description}
+								<Description class="text-sm font-medium">{description}</Description>
+							{/if}
+						</div>
+					{/if}
+					{@render formElem(props)}
+				</div>
+			{/snippet}
+		</Control>
+
+		<Errors />
+	</div>
+</Field>

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

@@ -0,0 +1,35 @@
+export interface FieldWrapperProps<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    form: FsSuperForm<T, M>;
+    name: U;
+    label?: string;
+    description?: string;
+}
+import { type ControlAttrs, type FsSuperForm } from 'formsnap';
+import type { Snippet } from 'svelte';
+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]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<T, U, M>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, M>['props']>, ReturnType<__sveltets_Render<T, U, M>['events']>, ReturnType<__sveltets_Render<T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>['props']> & {}): ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const FieldWrapper: $$IsomorphicComponent;
+type FieldWrapper<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof FieldWrapper<T, U, M>>;
+export default FieldWrapper;

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

@@ -0,0 +1,37 @@
+<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 { Input } from '../../../shadcn/components/ui/input/index.js';
+	import { Eye, EyeOff } from '@lucide/svelte';
+
+	interface Props extends FieldWrapperProps<T, U, M> {
+		value?: string;
+	}
+	let { value = $bindable(), ...fieldProps }: Props = $props();
+
+	let show = $state(false);
+	let inputType = $derived(show ? 'text' : 'password');
+</script>
+
+<FieldWrapper {...fieldProps}>
+	{#snippet formElem(props)}
+		<div class="flex w-full items-center gap-2">
+			<!-- Input itself -->
+			<Input type={inputType} bind:value {...props} />
+
+			<!-- Show/hide button outside input -->
+			<button
+				type="button"
+				class="flex cursor-pointer items-center justify-center rounded-md border px-3 py-2 text-gray-500"
+				onclick={() => (show = !show)}
+				aria-label={show ? 'Hide password' : 'Show password'}
+			>
+				{#if show}
+					<EyeOff class="size-5" />
+				{:else}
+					<Eye class="size-5" />
+				{/if}
+			</button>
+		</div>
+	{/snippet}
+</FieldWrapper>

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

@@ -0,0 +1,28 @@
+import type { FormPath } from 'sveltekit-superforms';
+import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & {
+        value?: string;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<T, U, M>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, M>['props']>, ReturnType<__sveltets_Render<T, U, M>['events']>, ReturnType<__sveltets_Render<T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>['props']> & {}): ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const PasswordField: $$IsomorphicComponent;
+type PasswordField<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof PasswordField<T, U, M>>;
+export default PasswordField;

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

@@ -0,0 +1,17 @@
+<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 { Input } from '../../../shadcn/components/ui/input/index.js';
+
+	interface Props extends FieldWrapperProps<T, U, M> {
+		value?: string;
+		type?: HTMLInputElement['type'];
+	}
+	let { value = $bindable(), type = 'text', ...fieldProps }: Props = $props();
+</script>
+
+<FieldWrapper {...fieldProps}>
+	{#snippet formElem(props)}
+		<Input {type} bind:value {...props} />
+	{/snippet}
+</FieldWrapper>

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

@@ -0,0 +1,29 @@
+import type { FormPath } from 'sveltekit-superforms';
+import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & {
+        value?: string;
+        type?: HTMLInputElement["type"];
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<T, U, M>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, M>['props']>, ReturnType<__sveltets_Render<T, U, M>['events']>, ReturnType<__sveltets_Render<T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>['props']> & {}): ReturnType<__sveltets_Render<T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const TextField: $$IsomorphicComponent;
+type TextField<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof TextField<T, U, M>>;
+export default TextField;

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+import TextField from './form/fields/TextField.svelte';
+import PasswordField from './form/fields/PasswordField.svelte';
+export { TextField, PasswordField };

package/dist/components/index.js

@@ -0,0 +1,3 @@
+import TextField from './form/fields/TextField.svelte';
+import PasswordField from './form/fields/PasswordField.svelte';
+export { TextField, PasswordField };

package/dist/shadcn/components/ui/input/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './input.svelte';
+export { Root, Root as Input };

package/dist/shadcn/components/ui/input/index.js

@@ -0,0 +1,4 @@
+import Root from './input.svelte';
+export { Root, 
+//
+Root as Input };

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, 'type'> &
+			({ type: 'file'; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === 'file'}
+	<input
+		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',
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		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',
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}

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

@@ -0,0 +1,13 @@
+import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+type InputType = Exclude<HTMLInputTypeAttribute, 'file'>;
+type Props = WithElementRef<Omit<HTMLInputAttributes, 'type'> & ({
+    type: 'file';
+    files?: FileList;
+} | {
+    type?: InputType;
+    files?: undefined;
+})>;
+declare const Input: import("svelte").Component<Props, {}, "ref" | "files" | "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/shadcn/utils.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/dist/shadcn/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// Reexport your entry utils here

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@webamoki/web-svelte",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.1.0",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "svelte": "./dist/components/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "svelte": "./dist/utils/index.js"
+    }
+  },
+  "peerDependencies": {
+    "@internationalized/date": "^3.9.0",
+    "@lucide/svelte": "^0.544.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "arktype": "^2.1.22",
+    "ramda": "^0.31.3",
+    "svelte": "^5.0.0",
+    "sveltekit-superforms": "^2.27.1",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.7",
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.22.0",
+    "@internationalized/date": "^3.9.0",
+    "@lucide/svelte": "^0.544.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.22.0",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/node": "^22",
+    "@types/ramda": "^0.31.1",
+    "arktype": "^2.1.22",
+    "clsx": "^2.1.1",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "publint": "^0.3.2",
+    "ramda": "^0.31.3",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "sveltekit-superforms": "^2.27.1",
+    "tailwind-merge": "^3.3.1",
+    "tailwind-variants": "^3.1.1",
+    "tailwindcss": "^4.0.0",
+    "tw-animate-css": "^1.3.8",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.20.0",
+    "vite": "^7.0.4",
+    "vitest": "^3.2.3"
+  },
+  "keywords": [
+    "svelte"
+  ],
+  "dependencies": {
+    "formsnap": "^2.0.1"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm prepack",
+    "preview": "vite preview",
+    "check": "pnpm fmt && pnpm lint && pnpm test",
+    "fmt": "prettier --write --cache --cache-location=.cache/.prettier-cache --cache-strategy metadata --log-level warn .",
+    "lint": "pnpm lint:es && pnpm lint:svelte",
+    "lint:es": "eslint --cache --cache-location .cache/.eslintcache --cache-strategy metadata .",
+    "lint:svelte": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test:unit": "vitest run",
+    "test": "pnpm test:unit"
+  }
+}