@webamoki/web-svelte 2.3.0 → 2.4.0

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/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

@@ -7,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';
@@ -16,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, CheckboxField, 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

@@ -7,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';
@@ -16,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, CheckboxField, 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.3.0",
+  "version": "2.4.0",
   "license": "MIT",
   "repository": {
     "type": "git",