@webamoki/web-svelte 2.2.1 → 2.4.0

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { cn, type WithoutChildrenOrChild } from '../../../utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import MinusIcon from '@lucide/svelte/icons/minus';
+  import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+
+  let {
+    checked = $bindable(false),
+    class: className,
+    indeterminate = $bindable(false),
+    ref = $bindable(null),
+    ...restProps
+  }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<CheckboxPrimitive.Root
+  class={cn(
+    'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-gray-300 transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:data-checked:bg-primary',
+    className
+  )}
+  data-slot="checkbox"
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  {...restProps}
+>
+  {#snippet children({ checked, indeterminate })}
+    <div
+      class="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      data-slot="checkbox-indicator"
+    >
+      {#if checked}
+        <CheckIcon />
+      {:else if indeterminate}
+        <MinusIcon />
+      {/if}
+    </div>
+  {/snippet}
+</CheckboxPrimitive.Root>

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

@@ -0,0 +1,4 @@
+import { Checkbox as CheckboxPrimitive } from 'bits-ui';
+declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

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

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

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

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

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

@@ -0,0 +1,5 @@
+import Group from './input-otp-group.svelte';
+import Separator from './input-otp-separator.svelte';
+import Slot from './input-otp-slot.svelte';
+import Root from './input-otp.svelte';
+export { Group, Root as InputOTP, Group as InputOTPGroup, Separator as InputOTPSeparator, Slot as InputOTPSlot, Root, Separator, Slot };

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

@@ -0,0 +1,5 @@
+import Group from './input-otp-group.svelte';
+import Separator from './input-otp-separator.svelte';
+import Slot from './input-otp-slot.svelte';
+import Root from './input-otp.svelte';
+export { Group, Root as InputOTP, Group as InputOTPGroup, Separator as InputOTPSeparator, Slot as InputOTPSlot, Root, Separator, Slot };

package/dist/shadcn/components/ui/input-otp/input-otp-group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  import { cn, type WithElementRef } from '../../../utils.js';
+
+  let {
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(
+    'flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40',
+    className
+  )}
+  data-slot="input-otp-group"
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/shadcn/components/ui/input-otp/input-otp-group.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const InputOtpGroup: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type InputOtpGroup = ReturnType<typeof InputOtpGroup>;
+export default InputOtpGroup;

package/dist/shadcn/components/ui/input-otp/input-otp-separator.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { WithElementRef } from '../../../utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  import { cn } from '../../../utils.js';
+  import MinusIcon from '@lucide/svelte/icons/minus';
+
+  let {
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn("flex items-center [&_svg:not([class*='size-'])]:size-4", className)}
+  data-slot="input-otp-separator"
+  role="separator"
+  {...restProps}
+>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <MinusIcon />
+  {/if}
+</div>

package/dist/shadcn/components/ui/input-otp/input-otp-separator.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const InputOtpSeparator: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type InputOtpSeparator = ReturnType<typeof InputOtpSeparator>;
+export default InputOtpSeparator;

package/dist/shadcn/components/ui/input-otp/input-otp-slot.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import { PinInput as InputOTPPrimitive } from 'bits-ui';
+
+  let {
+    cell,
+    class: className,
+    ref = $bindable(null),
+    ...restProps
+  }: InputOTPPrimitive.CellProps = $props();
+</script>
+
+<InputOTPPrimitive.Cell
+  class={cn(
+    'relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40',
+    className
+  )}
+  {cell}
+  data-slot="input-otp-slot"
+  bind:ref
+  {...restProps}
+>
+  {cell.char}
+  {#if cell.hasFakeCaret}
+    <div
+      class="cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center"
+    >
+      <div class="h-4 w-px animate-caret-blink bg-foreground duration-1000"></div>
+    </div>
+  {/if}
+</InputOTPPrimitive.Cell>

package/dist/shadcn/components/ui/input-otp/input-otp-slot.svelte.d.ts

@@ -0,0 +1,4 @@
+import { PinInput as InputOTPPrimitive } from 'bits-ui';
+declare const InputOtpSlot: import("svelte").Component<InputOTPPrimitive.CellProps, {}, "ref">;
+type InputOtpSlot = ReturnType<typeof InputOtpSlot>;
+export default InputOtpSlot;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import { PinInput as InputOTPPrimitive } from 'bits-ui';
+
+  let {
+    class: className,
+    ref = $bindable(null),
+    value = $bindable(''),
+    ...restProps
+  }: InputOTPPrimitive.RootProps = $props();
+</script>
+
+<InputOTPPrimitive.Root
+  class={cn(
+    'cn-input-otp-input flex items-center gap-2 disabled:cursor-not-allowed has-disabled:opacity-50',
+    className
+  )}
+  data-slot="input-otp"
+  spellcheck={false}
+  bind:ref
+  bind:value
+  {...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { PinInput as InputOTPPrimitive } from 'bits-ui';
+declare const InputOtp: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "ref" | "value">;
+type InputOtp = ReturnType<typeof InputOtp>;
+export default InputOtp;

package/dist/shared/components/form/fields/CheckboxField.svelte

@@ -0,0 +1,55 @@
+<script generics="T extends Record<string, unknown>, U extends FormPath<T>, M" lang="ts">
+  import type { FormPath } from 'sveltekit-superforms';
+
+  import { Checkbox } from '../../../../shadcn/components/ui/checkbox/index.js';
+  import { cn } from '../../../../shadcn/utils.js';
+  import { Control, Description, Field, Label } from 'formsnap';
+
+  import type { FieldWrapperProps } from '../FieldWrapper.svelte';
+
+  import Errors from '../Errors.svelte';
+
+  interface Props extends FieldWrapperProps<T, U, M> {
+    checked?: boolean;
+    class?: string;
+    disabled?: boolean;
+  }
+
+  let {
+    checked = $bindable(false),
+    class: className,
+    description,
+    disabled,
+    form,
+    label,
+    name,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Field {name} {form}>
+  <div class={cn('space-y-1', className)}>
+    <Control>
+      {#snippet children({ props })}
+        <div class="flex items-center gap-2">
+          <Checkbox {disabled} bind:checked {...props} {...restProps} />
+          {#if label}
+            <Label
+              class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              {label}
+              {#if props['aria-required'] === 'true'}
+                <span class="text-red-500">*</span>
+              {/if}
+            </Label>
+          {/if}
+        </div>
+        {#if description}
+          <Description class="ml-6 text-sm text-muted-foreground">{description}</Description>
+        {/if}
+      {/snippet}
+    </Control>
+
+    <Errors class="ml-6" />
+  </div>
+</Field>

package/dist/shared/components/form/fields/CheckboxField.svelte.d.ts

@@ -0,0 +1,37 @@
+export default CheckboxField;
+type CheckboxField<T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "checked" | undefined;
+} & {};
+declare const CheckboxField: $$IsomorphicComponent;
+import { FormPath } from 'sveltekit-superforms';
+type Props = FieldWrapperProps<T, U, M> & {
+    checked?: boolean | undefined;
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+};
+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 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(): "checked";
+    exports(): {};
+}
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & {
+        checked?: boolean;
+        class?: string;
+        disabled?: boolean;
+    };
+    exports: {};
+    bindings: "checked";
+    slots: {};
+    events: {};
+};
+import { FieldWrapperProps } from '../FieldWrapper.svelte';

package/dist/shared/components/form/fields/PinField.svelte

@@ -0,0 +1,48 @@
+<script generics="T extends Record<string, unknown>, U extends FormPath<T>, M" lang="ts">
+  import type { FormPath } from 'sveltekit-superforms';
+
+  import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSeparator,
+    InputOTPSlot
+  } from '../../../../shadcn/components/ui/input-otp/index.js';
+
+  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+
+  interface Props extends FieldWrapperProps<T, U, M> {
+    class?: string;
+    disabled?: boolean;
+    maxlength?: number;
+    value?: string;
+  }
+
+  let {
+    class: className,
+    disabled,
+    maxlength = 6,
+    value = $bindable(''),
+    ...fieldProps
+  }: Props = $props();
+</script>
+
+<FieldWrapper class={className} {...fieldProps}>
+  {#snippet formElem(props)}
+    <InputOTP {disabled} {maxlength} textalign="center" bind:value {...props}>
+      {#snippet children({ cells })}
+        {@const half = Math.ceil(maxlength / 2)}
+        <InputOTPGroup>
+          {#each cells.slice(0, half) as cell (cell)}
+            <InputOTPSlot {cell} />
+          {/each}
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+          {#each cells.slice(half) as cell (cell)}
+            <InputOTPSlot {cell} />
+          {/each}
+        </InputOTPGroup>
+      {/snippet}
+    </InputOTP>
+  {/snippet}
+</FieldWrapper>

package/dist/shared/components/form/fields/PinField.svelte.d.ts

@@ -0,0 +1,39 @@
+export default PinField;
+type PinField<T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "value" | undefined;
+} & {};
+declare const PinField: $$IsomorphicComponent;
+import { FormPath } from 'sveltekit-superforms';
+type Props = FieldWrapperProps<T, U, M> & {
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    maxlength?: number | undefined;
+    value?: string | undefined;
+};
+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 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(): {};
+}
+declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & {
+        class?: string;
+        disabled?: boolean;
+        maxlength?: number;
+        value?: string;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+import { FieldWrapperProps } from '../FieldWrapper.svelte';

package/dist/shared/components/form/index.d.ts

@@ -1,4 +1,5 @@
 import Button from './Button.svelte';
+import CheckboxField from './fields/CheckboxField.svelte';
 import ChoiceField from './fields/ChoiceField.svelte';
 import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
 import DateField from './fields/DateField.svelte';
@@ -6,6 +7,7 @@ import HexColorField from './fields/HexColorField.svelte';
 import MessageField from './fields/MessageField.svelte';
 import NumberField from './fields/NumberField.svelte';
 import PasswordField from './fields/PasswordField.svelte';
+import PinField from './fields/PinField.svelte';
 import SelectField from './fields/SelectField.svelte';
 import SelectMultiField from './fields/SelectMultiField.svelte';
 import TextField from './fields/TextField.svelte';
@@ -15,4 +17,4 @@ import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
 import Form from './Form.svelte';
 import IconInputWrapper from './IconInputWrapper.svelte';
-export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
+export { Button, CheckboxField, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, PinField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };

package/dist/shared/components/form/index.js

@@ -1,4 +1,5 @@
 import Button from './Button.svelte';
+import CheckboxField from './fields/CheckboxField.svelte';
 import ChoiceField from './fields/ChoiceField.svelte';
 import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
 import DateField from './fields/DateField.svelte';
@@ -6,6 +7,7 @@ import HexColorField from './fields/HexColorField.svelte';
 import MessageField from './fields/MessageField.svelte';
 import NumberField from './fields/NumberField.svelte';
 import PasswordField from './fields/PasswordField.svelte';
+import PinField from './fields/PinField.svelte';
 import SelectField from './fields/SelectField.svelte';
 import SelectMultiField from './fields/SelectMultiField.svelte';
 import TextField from './fields/TextField.svelte';
@@ -15,4 +17,4 @@ import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
 import Form from './Form.svelte';
 import IconInputWrapper from './IconInputWrapper.svelte';
-export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
+export { Button, CheckboxField, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, PinField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public",
     "provenance": true
   },
-  "version": "2.2.1",
+  "version": "2.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -74,6 +74,7 @@
     "@eslint/compat": "^2.0.3",
     "@eslint/js": "^9.39.4",
     "@internationalized/date": "^3.12.0",
+    "@lucide/svelte": "^1.7.0",
     "@standard-schema/spec": "^1.1.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.55.0",
@@ -116,7 +117,6 @@
     "svelte"
   ],
   "dependencies": {
-    "@lucide/svelte": "^1.6.0",
     "aws4fetch": "^1.0.20",
     "bits-ui": "^2.16.3",
     "devalue": "^5.6.4",