@authrim/sveltekit 0.1.0

package/dist/ui/helpers/AuthLoading.svelte

@@ -0,0 +1,83 @@
+<!--
+  AuthLoading Component
+  Loading indicator with optional message and refined animation
+-->
+<script lang="ts">
+  import type { Size } from '../types.js';
+  import Spinner from '../shared/Spinner.svelte';
+
+  export let message = '';
+  export let size: Size = 'md';
+  let className = '';
+  export { className as class };
+</script>
+
+<div
+  class="authrim-loading authrim-loading--{size} {className}"
+  role="status"
+  aria-live="polite"
+  {...$$restProps}
+>
+  <div class="authrim-loading__spinner">
+    <Spinner {size} />
+  </div>
+  {#if message}
+    <p class="authrim-loading__message">{message}</p>
+  {/if}
+  <span class="authrim-sr-only">Loading</span>
+</div>
+
+<style>
+  .authrim-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--authrim-space-4);
+    padding: var(--authrim-space-6);
+    animation: fade-in var(--authrim-duration-normal) var(--authrim-ease-out);
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .authrim-loading--sm {
+    gap: var(--authrim-space-3);
+    padding: var(--authrim-space-4);
+  }
+
+  .authrim-loading--lg {
+    gap: var(--authrim-space-5);
+    padding: var(--authrim-space-8);
+  }
+
+  .authrim-loading__spinner {
+    color: var(--authrim-color-primary);
+  }
+
+  .authrim-loading__message {
+    margin: 0;
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+    text-align: center;
+    letter-spacing: var(--authrim-tracking-tight);
+  }
+
+  .authrim-loading--lg .authrim-loading__message {
+    font-size: var(--authrim-text-base);
+  }
+
+  .authrim-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+</style>

package/dist/ui/helpers/AuthLoading.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { Size } from '../types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const AuthLoading: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    message?: string | undefined;
+    size?: Size | undefined;
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AuthLoading = InstanceType<typeof AuthLoading>;
+export default AuthLoading;
+//# sourceMappingURL=AuthLoading.svelte.d.ts.map

package/dist/ui/helpers/AuthLoading.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthLoading.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/helpers/AuthLoading.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AA4BxC,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;;;WAVuF,IAAI;;;;kBAUW,CAAC;AACtG,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/ui/helpers/OTPInput.svelte

@@ -0,0 +1,214 @@
+<!--
+  OTPInput Component
+  Segmented one-time password input with satisfying interactions
+-->
+<script lang="ts">
+  import { createEventDispatcher, onMount } from 'svelte';
+
+  export let length = 6;
+  export let value = '';
+  export let disabled = false;
+  export let autoFocus = true;
+  export let error = false;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    input: { value: string };
+    complete: { value: string };
+  }>();
+
+  let inputs: HTMLInputElement[] = [];
+  let digits: string[] = [];
+  let activeIndex = -1;
+
+  $: {
+    digits = value.split('').slice(0, length);
+    while (digits.length < length) digits.push('');
+  }
+
+  onMount(() => {
+    if (autoFocus && inputs[0] && !disabled) {
+      inputs[0].focus();
+    }
+  });
+
+  function handleInput(index: number, event: Event) {
+    const input = event.target as HTMLInputElement;
+    const inputValue = input.value.replace(/\D/g, '');
+
+    if (inputValue.length === 1) {
+      digits[index] = inputValue;
+      updateValue();
+      if (index < length - 1) inputs[index + 1]?.focus();
+    } else if (inputValue.length > 1) {
+      const chars = inputValue.split('').slice(0, length - index);
+      chars.forEach((char, i) => {
+        if (index + i < length) digits[index + i] = char;
+      });
+      updateValue();
+      const next = Math.min(index + chars.length, length - 1);
+      inputs[next]?.focus();
+    }
+  }
+
+  function handleKeyDown(index: number, event: KeyboardEvent) {
+    if (event.key === 'Backspace') {
+      event.preventDefault();
+      if (digits[index]) {
+        digits[index] = '';
+        updateValue();
+      } else if (index > 0) {
+        inputs[index - 1]?.focus();
+        digits[index - 1] = '';
+        updateValue();
+      }
+    } else if (event.key === 'ArrowLeft' && index > 0) {
+      event.preventDefault();
+      inputs[index - 1]?.focus();
+    } else if (event.key === 'ArrowRight' && index < length - 1) {
+      event.preventDefault();
+      inputs[index + 1]?.focus();
+    }
+  }
+
+  function handlePaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const pasted = event.clipboardData?.getData('text').replace(/\D/g, '');
+    if (pasted) {
+      const chars = pasted.split('').slice(0, length);
+      chars.forEach((char, i) => (digits[i] = char));
+      for (let i = chars.length; i < length; i++) digits[i] = '';
+      updateValue();
+      inputs[Math.min(chars.length, length - 1)]?.focus();
+    }
+  }
+
+  function handleFocus(index: number) {
+    activeIndex = index;
+    inputs[index]?.select();
+  }
+
+  function handleBlur() {
+    activeIndex = -1;
+  }
+
+  function updateValue() {
+    value = digits.join('');
+    dispatch('input', { value });
+    if (value.length === length && !digits.includes('')) {
+      dispatch('complete', { value });
+    }
+  }
+</script>
+
+<div
+  class="authrim-otp {className}"
+  class:authrim-otp--error={error}
+  role="group"
+  aria-label="Verification code"
+  {...$$restProps}
+>
+  {#each Array(length) as _, index}
+    <input
+      bind:this={inputs[index]}
+      type="text"
+      inputmode="numeric"
+      autocomplete="one-time-code"
+      maxlength="1"
+      value={digits[index]}
+      {disabled}
+      class="authrim-otp__digit"
+      class:authrim-otp__digit--filled={digits[index]}
+      class:authrim-otp__digit--active={activeIndex === index}
+      aria-label="Digit {index + 1} of {length}"
+      on:input={(e) => handleInput(index, e)}
+      on:keydown={(e) => handleKeyDown(index, e)}
+      on:paste={handlePaste}
+      on:focus={() => handleFocus(index)}
+      on:blur={handleBlur}
+    />
+  {/each}
+</div>
+
+<style>
+  .authrim-otp {
+    display: flex;
+    gap: var(--authrim-space-2);
+    justify-content: center;
+  }
+
+  .authrim-otp__digit {
+    width: 52px;
+    height: 64px;
+    padding: 0;
+    font-family: var(--authrim-font-mono);
+    font-size: var(--authrim-text-2xl);
+    font-weight: 600;
+    text-align: center;
+    background: var(--authrim-color-bg);
+    border: 2px solid var(--authrim-color-border);
+    border-radius: var(--authrim-radius-md);
+    color: var(--authrim-color-text);
+    caret-color: var(--authrim-color-primary);
+    transition:
+      border-color var(--authrim-duration-fast) var(--authrim-ease-default),
+      box-shadow var(--authrim-duration-fast) var(--authrim-ease-default),
+      transform var(--authrim-duration-fast) var(--authrim-ease-bounce);
+  }
+
+  .authrim-otp__digit:hover:not(:disabled):not(:focus) {
+    border-color: var(--authrim-color-border-strong);
+  }
+
+  .authrim-otp__digit:focus {
+    outline: none;
+    border-color: var(--authrim-color-primary);
+    box-shadow: var(--authrim-shadow-focus);
+  }
+
+  .authrim-otp__digit--filled {
+    border-color: var(--authrim-color-border-strong);
+    animation: digit-pop var(--authrim-duration-fast) var(--authrim-ease-bounce);
+  }
+
+  @keyframes digit-pop {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+
+  .authrim-otp__digit--active {
+    border-color: var(--authrim-color-primary);
+  }
+
+  .authrim-otp__digit:disabled {
+    background: var(--authrim-color-bg-subtle);
+    color: var(--authrim-color-text-muted);
+    cursor: not-allowed;
+  }
+
+  .authrim-otp--error .authrim-otp__digit {
+    border-color: var(--authrim-color-error);
+    animation: shake 0.4s ease-in-out;
+  }
+
+  .authrim-otp--error .authrim-otp__digit:focus {
+    box-shadow: var(--authrim-shadow-focus-error);
+  }
+
+  @keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    20%, 60% { transform: translateX(-3px); }
+    40%, 80% { transform: translateX(3px); }
+  }
+
+  /* Responsive */
+  @media (max-width: 420px) {
+    .authrim-otp__digit {
+      width: 44px;
+      height: 56px;
+      font-size: var(--authrim-text-xl);
+    }
+  }
+</style>

package/dist/ui/helpers/OTPInput.svelte.d.ts

@@ -0,0 +1,34 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const OTPInput: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    length?: number | undefined;
+    value?: string | undefined;
+    disabled?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    error?: boolean | undefined;
+    class?: string | undefined;
+}, {
+    input: CustomEvent<{
+        value: string;
+    }>;
+    complete: CustomEvent<{
+        value: string;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OTPInput = InstanceType<typeof OTPInput>;
+export default OTPInput;
+//# sourceMappingURL=OTPInput.svelte.d.ts.map

package/dist/ui/helpers/OTPInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/helpers/OTPInput.svelte.ts"],"names":[],"mappings":"AAuHA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;;;;;;;;;;eAZM,MAAM;;;eACH,MAAM;;;;kBAWuF,CAAC;AACnG,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/ui/helpers/ResendCodeButton.svelte

@@ -0,0 +1,140 @@
+<!--
+  ResendCodeButton Component
+  Button to resend verification code with countdown
+-->
+<script lang="ts">
+  import { createEventDispatcher, onDestroy } from 'svelte';
+
+  export let disabled = false;
+  export let remainingTime = 0;
+  export let text = 'Resend code';
+  export let loading = false;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ click: void }>();
+
+  let displayTime = remainingTime;
+  let interval: ReturnType<typeof setInterval> | null = null;
+
+  // Reactive statement: Restart countdown when remainingTime prop changes from parent.
+  // This allows parent to reset the countdown (e.g., after successful resend).
+  // We always stop existing countdown first to prevent timer leaks.
+  $: {
+    stopCountdown();
+    displayTime = remainingTime;
+    if (remainingTime > 0) {
+      startCountdown();
+    }
+  }
+
+  function startCountdown() {
+    interval = setInterval(() => {
+      displayTime -= 1;
+      if (displayTime <= 0) stopCountdown();
+    }, 1000);
+  }
+
+  function stopCountdown() {
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+  }
+
+  function handleClick() {
+    if (!disabled && displayTime <= 0 && !loading) {
+      dispatch('click');
+    }
+  }
+
+  function formatTime(seconds: number): string {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return m > 0 ? `${m}:${s.toString().padStart(2, '0')}` : `${s}s`;
+  }
+
+  onDestroy(stopCountdown);
+</script>
+
+<button
+  type="button"
+  class="authrim-resend {className}"
+  class:authrim-resend--loading={loading}
+  disabled={disabled || displayTime > 0 || loading}
+  on:click={handleClick}
+  {...$$restProps}
+>
+  {#if loading}
+    <span class="authrim-resend__spinner"></span>
+  {/if}
+  <span class="authrim-resend__text" class:authrim-resend__text--hidden={loading}>
+    {#if displayTime > 0}
+      {text} ({formatTime(displayTime)})
+    {:else}
+      {text}
+    {/if}
+  </span>
+</button>
+
+<style>
+  .authrim-resend {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--authrim-space-2);
+    padding: var(--authrim-space-2) var(--authrim-space-3);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    font-weight: 500;
+    color: var(--authrim-color-primary);
+    background: transparent;
+    border: none;
+    border-radius: var(--authrim-radius-sm);
+    cursor: pointer;
+    transition:
+      color var(--authrim-duration-fast) var(--authrim-ease-default),
+      background-color var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-resend:hover:not(:disabled) {
+    background: var(--authrim-color-primary-subtle);
+  }
+
+  .authrim-resend:focus-visible {
+    outline: none;
+    box-shadow: var(--authrim-shadow-focus);
+  }
+
+  .authrim-resend:disabled {
+    color: var(--authrim-color-text-muted);
+    cursor: not-allowed;
+  }
+
+  .authrim-resend:disabled:not(.authrim-resend--loading) {
+    opacity: 0.7;
+  }
+
+  .authrim-resend__spinner {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    border: 2px solid var(--authrim-color-primary-subtle);
+    border-top-color: var(--authrim-color-primary);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .authrim-resend__text {
+    transition: opacity var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-resend__text--hidden {
+    opacity: 0;
+  }
+</style>

package/dist/ui/helpers/ResendCodeButton.svelte.d.ts

@@ -0,0 +1,28 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ResendCodeButton: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    disabled?: boolean | undefined;
+    remainingTime?: number | undefined;
+    text?: string | undefined;
+    loading?: boolean | undefined;
+    class?: string | undefined;
+}, {
+    click: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ResendCodeButton = InstanceType<typeof ResendCodeButton>;
+export default ResendCodeButton;
+//# sourceMappingURL=ResendCodeButton.svelte.d.ts.map

package/dist/ui/helpers/ResendCodeButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResendCodeButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/helpers/ResendCodeButton.svelte.ts"],"names":[],"mappings":"AA6EA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,gBAAgB;;;;;;;;;;;kBAAsG,CAAC;AAC3G,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAChE,eAAe,gBAAgB,CAAC"}

package/dist/ui/helpers/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Authrim UI Helper Components
+ */
+export { default as AuthLoading } from './AuthLoading.svelte';
+export { default as AuthError } from './AuthError.svelte';
+export { default as OTPInput } from './OTPInput.svelte';
+export { default as ResendCodeButton } from './ResendCodeButton.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/helpers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/helpers/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/ui/helpers/index.js

@@ -0,0 +1,7 @@
+/**
+ * Authrim UI Helper Components
+ */
+export { default as AuthLoading } from './AuthLoading.svelte';
+export { default as AuthError } from './AuthError.svelte';
+export { default as OTPInput } from './OTPInput.svelte';
+export { default as ResendCodeButton } from './ResendCodeButton.svelte';

package/dist/ui/index.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @authrim/sveltekit UI Components
+ *
+ * Styled, accessible UI components for authentication flows.
+ * These components are thin facades - they handle styling and events,
+ * while parent components control auth API calls.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { getAuthContext } from '@authrim/sveltekit';
+ *   import { SocialLoginButtons, AuthError } from '@authrim/sveltekit/ui';
+ *
+ *   const auth = getAuthContext();
+ *   let loading = false;
+ *   let error = null;
+ *
+ *   async function handleSocialClick(e) {
+ *     const { provider } = e.detail;
+ *     loading = true;
+ *     const result = await auth.social.loginWithPopup(provider);
+ *     if (result.error) error = result.error.message;
+ *     loading = false;
+ *   }
+ * </script>
+ *
+ * <SocialLoginButtons
+ *   providers={['google', 'github']}
+ *   {loading}
+ *   on:click={handleSocialClick}
+ * />
+ * {#if error}<AuthError message={error} on:dismiss={() => error = null} />{/if}
+ * ```
+ */
+export type { Size, Variant, EmailCodeStep, AlertVariant, PasskeyItemDisplay, SessionItemDisplay, LinkedAccountDisplay, EmailSubmitEvent, CodeSubmitEvent, SocialClickEvent, PasskeyDeleteEvent, SessionRevokeEvent, AccountUnlinkEvent, ConsentAllowEvent, OrgChangeEvent, DeviceCodeEvent, DeviceCodeChangeEvent, CIBAApproveEvent, CIBADenyEvent, ReauthEvent, ReauthSocialEvent, LanguageChangeEvent, } from "./types.js";
+export { type Theme, type ThemeContext, THEME_CONTEXT_KEY, createThemeContext, getThemeContext, hasThemeContext, loadSavedTheme, } from "./context.js";
+export { Button, Input, Card, Spinner, Badge, Alert, Dialog, LanguageSwitcher, CountdownTimer, } from "./shared/index.js";
+export { AuthLoading, AuthError, OTPInput, ResendCodeButton, } from "./helpers/index.js";
+export { EmailCodeForm, PasskeyConditionalInput, SocialLoginButtons, ConsentScopesList, OrgSelector, ClientInfo, UserCodeInput, QRCodeDisplay, CIBARequestCard, } from "./forms/index.js";
+export { PasskeyList, PasskeyRegisterButton, PasskeyDeleteButton, } from "./passkey/index.js";
+export { SessionList, SessionRevokeButton, SessionExpiryIndicator, } from "./session/index.js";
+export { LinkedAccountsList, LinkAccountButton, UnlinkAccountButton, } from "./account/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAGH,YAAY,EACV,IAAI,EACJ,OAAO,EACP,aAAa,EACb,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,qBAAqB,EACrB,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,KAAK,KAAK,EACV,KAAK,YAAY,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,eAAe,EACf,cAAc,GACf,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,MAAM,EACN,KAAK,EACL,IAAI,EACJ,OAAO,EACP,KAAK,EACL,KAAK,EACL,MAAM,EACN,gBAAgB,EAChB,cAAc,GACf,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,WAAW,EACX,SAAS,EACT,QAAQ,EACR,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACX,UAAU,EACV,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,WAAW,EACX,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,WAAW,EACX,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,48 @@
+/**
+ * @authrim/sveltekit UI Components
+ *
+ * Styled, accessible UI components for authentication flows.
+ * These components are thin facades - they handle styling and events,
+ * while parent components control auth API calls.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { getAuthContext } from '@authrim/sveltekit';
+ *   import { SocialLoginButtons, AuthError } from '@authrim/sveltekit/ui';
+ *
+ *   const auth = getAuthContext();
+ *   let loading = false;
+ *   let error = null;
+ *
+ *   async function handleSocialClick(e) {
+ *     const { provider } = e.detail;
+ *     loading = true;
+ *     const result = await auth.social.loginWithPopup(provider);
+ *     if (result.error) error = result.error.message;
+ *     loading = false;
+ *   }
+ * </script>
+ *
+ * <SocialLoginButtons
+ *   providers={['google', 'github']}
+ *   {loading}
+ *   on:click={handleSocialClick}
+ * />
+ * {#if error}<AuthError message={error} on:dismiss={() => error = null} />{/if}
+ * ```
+ */
+// Context
+export { THEME_CONTEXT_KEY, createThemeContext, getThemeContext, hasThemeContext, loadSavedTheme, } from "./context.js";
+// Shared Components
+export { Button, Input, Card, Spinner, Badge, Alert, Dialog, LanguageSwitcher, CountdownTimer, } from "./shared/index.js";
+// Helper Components
+export { AuthLoading, AuthError, OTPInput, ResendCodeButton, } from "./helpers/index.js";
+// Form Components
+export { EmailCodeForm, PasskeyConditionalInput, SocialLoginButtons, ConsentScopesList, OrgSelector, ClientInfo, UserCodeInput, QRCodeDisplay, CIBARequestCard, } from "./forms/index.js";
+// Passkey Components
+export { PasskeyList, PasskeyRegisterButton, PasskeyDeleteButton, } from "./passkey/index.js";
+// Session Components
+export { SessionList, SessionRevokeButton, SessionExpiryIndicator, } from "./session/index.js";
+// Account Components
+export { LinkedAccountsList, LinkAccountButton, UnlinkAccountButton, } from "./account/index.js";