@webamoki/web-svelte 0.3.3 → 0.4.0

package/dist/components/form/Button.svelte

@@ -0,0 +1,22 @@
+<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 { Readable } from 'svelte/store';
+
+	type Props = ButtonProps & {
+		loading?: boolean;
+		delayed?: Readable<boolean>;
+	};
+
+	let { disabled, loading, delayed, children, ...restProps }: Props = $props();
+</script>
+
+<Button disabled={disabled || loading || $delayed} {...restProps}>
+	{#if loading || $delayed}
+		<Loader2Icon class="mr-2 animate-spin" />
+		Please wait
+	{:else}
+		{@render children?.()}
+	{/if}
+</Button>

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

@@ -0,0 +1,10 @@
+import { Button } from '../../shadcn/components/ui/button/index.js';
+import type { ButtonProps } from '../../shadcn/components/ui/button/index.js';
+import type { Readable } from 'svelte/store';
+type Props = ButtonProps & {
+    loading?: boolean;
+    delayed?: Readable<boolean>;
+};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,15 @@
+<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 ColorPicker from 'svelte-awesome-color-picker';
+	interface Props extends FieldWrapperProps<T, U, M> {
+		value?: string;
+	}
+	let { value = $bindable(), ...fieldProps }: Props = $props();
+</script>
+
+<FieldWrapper {...fieldProps}>
+	{#snippet formElem()}
+		<ColorPicker bind:hex={value} label={value} isAlpha={false} position="responsive" />
+	{/snippet}
+</FieldWrapper>

package/dist/components/form/fields/HexColorField.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 HexColorField: $$IsomorphicComponent;
+type HexColorField<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof HexColorField<T, U, M>>;
+export default HexColorField;

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 import TextField from './form/fields/TextField.svelte';
 import PasswordField from './form/fields/PasswordField.svelte';
+import HexColorField from './form/fields/HexColorField.svelte';
 import ChoiceField from './form/fields/ChoiceField.svelte';
 import ChoiceMultiField from './form/fields/ChoiceMultiField.svelte';
 import Choice from './ui/choice/Choice.svelte';
@@ -8,4 +9,5 @@ import WeekdayChoice from './ui/choice/WeekdayChoice.svelte';
 import WeekdayChoiceMulti from './ui/choice/WeekdayChoiceMulti.svelte';
 import WeekdayChoiceField from './form/fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './form/fields/WeekdayChoiceMultiField.svelte';
-export { TextField, PasswordField, ChoiceMultiField, ChoiceField, WeekdayChoiceField, WeekdayChoiceMultiField, Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti };
+import Button from './form/Button.svelte';
+export { TextField, PasswordField, HexColorField, ChoiceMultiField, ChoiceField, WeekdayChoiceField, WeekdayChoiceMultiField, Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti, Button };

package/dist/components/index.js

@@ -1,5 +1,6 @@
 import TextField from './form/fields/TextField.svelte';
 import PasswordField from './form/fields/PasswordField.svelte';
+import HexColorField from './form/fields/HexColorField.svelte';
 import ChoiceField from './form/fields/ChoiceField.svelte';
 import ChoiceMultiField from './form/fields/ChoiceMultiField.svelte';
 import Choice from './ui/choice/Choice.svelte';
@@ -8,4 +9,5 @@ import WeekdayChoice from './ui/choice/WeekdayChoice.svelte';
 import WeekdayChoiceMulti from './ui/choice/WeekdayChoiceMulti.svelte';
 import WeekdayChoiceField from './form/fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './form/fields/WeekdayChoiceMultiField.svelte';
-export { TextField, PasswordField, ChoiceMultiField, ChoiceField, WeekdayChoiceField, WeekdayChoiceMultiField, Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti };
+import Button from './form/Button.svelte';
+export { TextField, PasswordField, HexColorField, ChoiceMultiField, ChoiceField, WeekdayChoiceField, WeekdayChoiceMultiField, Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti, Button };

package/dist/components/showcase/Preview.svelte

@@ -1,4 +1,4 @@
-<div class="overflow-hidden rounded-t-xl border bg-white shadow-sm">
+<div class="rounded-t-xl border bg-white shadow-sm">
 	<div class="border-b bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700">Preview</div>
 	<div class="p-6">
 		<slot />

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

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import { type VariantProps, tv } from 'tailwind-variants';
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+				destructive:
+					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
+				outline:
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
+				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline'
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9'
+			}
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default'
+		}
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = 'default',
+		size = 'default',
+		ref = $bindable(null),
+		href = undefined,
+		type = 'button',
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+<!-- eslint-disable svelte/no-navigation-without-resolve -->
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? 'link' : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
+<!-- eslint-enable svelte/no-navigation-without-resolve -->

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

@@ -0,0 +1,58 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        link: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+        icon: string;
+    };
+}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", unknown, unknown, undefined>>;
+export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
+export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<HTMLAnchorAttributes> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

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

@@ -0,0 +1,2 @@
+import Root, { type ButtonProps, type ButtonSize, type ButtonVariant, buttonVariants } from './button.svelte';
+export { Root, type ButtonProps as Props, Root as Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant };

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

@@ -0,0 +1,4 @@
+import Root, { buttonVariants } from './button.svelte';
+export { Root, 
+//
+Root as Button, buttonVariants };

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

@@ -1,7 +1,6 @@
 <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<

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.3.3",
+  "version": "0.4.0",
   "license": "MIT",
   "files": [
     "dist",
@@ -80,7 +80,8 @@
   "dependencies": {
     "formsnap": "^2.0.1",
     "ramda": "^0.31.3",
-    "sorted-array-functions": "^1.3.0"
+    "sorted-array-functions": "^1.3.0",
+    "svelte-awesome-color-picker": "^4.0.2"
   },
   "scripts": {
     "dev": "vite dev",