@authrim/sveltekit 0.1.0

package/dist/ui/shared/Input.svelte

@@ -0,0 +1,192 @@
+<!--
+  Input Component
+  Text input with label and error states
+-->
+<script lang="ts">
+  import type { Size } from '../types.js';
+
+  export let type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';
+  export let size: Size = 'md';
+  export let value = '';
+  export let placeholder = '';
+  export let disabled = false;
+  export let error = false;
+  export let errorMessage = '';
+  export let label = '';
+  export let required = false;
+  export let fullWidth = false;
+  export let id = '';
+  let className = '';
+  export { className as class };
+
+  // Generate stable ID once on component creation
+  const generatedId = `authrim-input-${Math.random().toString(36).slice(2, 9)}`;
+  $: inputId = id || generatedId;
+  $: hasError = error || !!errorMessage;
+</script>
+
+<div
+  class="authrim-input-wrap {className}"
+  class:authrim-input-wrap--full={fullWidth}
+>
+  {#if label}
+    <label for={inputId} class="authrim-input__label">
+      {label}
+      {#if required}
+        <span class="authrim-input__required" aria-hidden="true">*</span>
+      {/if}
+    </label>
+  {/if}
+
+  <div class="authrim-input__container">
+    <input
+      id={inputId}
+      {type}
+      bind:value
+      {placeholder}
+      {disabled}
+      {required}
+      class="authrim-input authrim-input--{size}"
+      class:authrim-input--error={hasError}
+      aria-invalid={hasError}
+      aria-describedby={errorMessage ? `${inputId}-error` : undefined}
+      on:input
+      on:focus
+      on:blur
+      on:keydown
+      on:keyup
+      {...$$restProps}
+    />
+    {#if $$slots.suffix}
+      <div class="authrim-input__suffix">
+        <slot name="suffix" />
+      </div>
+    {/if}
+  </div>
+
+  {#if errorMessage}
+    <p id="{inputId}-error" class="authrim-input__error" role="alert">
+      <svg class="authrim-input__error-icon" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M8 1a7 7 0 100 14A7 7 0 008 1zm0 10.5a.75.75 0 110-1.5.75.75 0 010 1.5zM8.75 8a.75.75 0 01-1.5 0V5a.75.75 0 011.5 0v3z"/>
+      </svg>
+      {errorMessage}
+    </p>
+  {/if}
+</div>
+
+<style>
+  .authrim-input-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-2);
+  }
+
+  .authrim-input-wrap--full {
+    width: 100%;
+  }
+
+  .authrim-input__label {
+    font-size: var(--authrim-text-sm);
+    font-weight: 500;
+    color: var(--authrim-color-text);
+    letter-spacing: var(--authrim-tracking-tight);
+  }
+
+  .authrim-input__required {
+    color: var(--authrim-color-error);
+    margin-left: 2px;
+  }
+
+  .authrim-input__container {
+    position: relative;
+    display: flex;
+  }
+
+  .authrim-input {
+    width: 100%;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    background: var(--authrim-color-bg);
+    border: 1.5px solid var(--authrim-color-border);
+    border-radius: var(--authrim-radius-md);
+    color: var(--authrim-color-text);
+    transition:
+      border-color var(--authrim-duration-fast) var(--authrim-ease-default),
+      box-shadow var(--authrim-duration-fast) var(--authrim-ease-default),
+      background-color var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-input::placeholder {
+    color: var(--authrim-color-text-muted);
+  }
+
+  .authrim-input:hover:not(:disabled):not(:focus) {
+    border-color: var(--authrim-color-border-strong);
+  }
+
+  .authrim-input:focus {
+    outline: none;
+    border-color: var(--authrim-color-border-focus);
+    box-shadow: var(--authrim-shadow-focus);
+  }
+
+  .authrim-input:disabled {
+    background: var(--authrim-color-bg-subtle);
+    color: var(--authrim-color-text-muted);
+    cursor: not-allowed;
+  }
+
+  .authrim-input--error {
+    border-color: var(--authrim-color-error);
+  }
+
+  .authrim-input--error:focus {
+    border-color: var(--authrim-color-error);
+    box-shadow: var(--authrim-shadow-focus-error);
+  }
+
+  /* Sizes */
+  .authrim-input--sm {
+    height: 34px;
+    padding: 0 var(--authrim-space-3);
+    border-radius: var(--authrim-radius-sm);
+  }
+
+  .authrim-input--md {
+    height: 42px;
+    padding: 0 var(--authrim-space-3);
+  }
+
+  .authrim-input--lg {
+    height: 50px;
+    padding: 0 var(--authrim-space-4);
+    font-size: var(--authrim-text-base);
+    border-radius: var(--authrim-radius-lg);
+  }
+
+  .authrim-input__suffix {
+    position: absolute;
+    right: var(--authrim-space-3);
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    color: var(--authrim-color-text-muted);
+  }
+
+  .authrim-input__error {
+    display: flex;
+    align-items: center;
+    gap: var(--authrim-space-1);
+    font-size: var(--authrim-text-xs);
+    color: var(--authrim-color-error);
+    margin: 0;
+    animation: authrim-fade-up var(--authrim-duration-fast) var(--authrim-ease-out);
+  }
+
+  .authrim-input__error-icon {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+</style>

package/dist/ui/shared/Input.svelte.d.ts

@@ -0,0 +1,42 @@
+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 Input: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    type?: "text" | "email" | "password" | "tel" | "url" | undefined;
+    size?: Size | undefined;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    errorMessage?: string | undefined;
+    label?: string | undefined;
+    required?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    id?: string | undefined;
+    class?: string | undefined;
+}, {
+    input: Event;
+    focus: FocusEvent;
+    blur: FocusEvent;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    suffix: {};
+}, {}, string>;
+type Input = InstanceType<typeof Input>;
+export default Input;
+//# sourceMappingURL=Input.svelte.d.ts.map

package/dist/ui/shared/Input.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/shared/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AA2DxC,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;AAUD,QAAA,MAAM,KAAK;;WAf4O,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK;WAAS,IAAI;;;;;;;;;;;;;;;;;;;;;cAe1L,CAAC;AACtG,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/ui/shared/LanguageSwitcher.svelte

@@ -0,0 +1,99 @@
+<!--
+  LanguageSwitcher Component
+  Language selection dropdown with globe icon
+  Framework-agnostic: emits events for parent to handle locale changes
+-->
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  export let currentLocale = "en";
+  export let locales: Array<{ code: string; label: string }> = [
+    { code: "en", label: "English" },
+    { code: "ja", label: "日本語" },
+  ];
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ change: { locale: string } }>();
+
+  function handleChange(e: Event) {
+    const target = e.target as HTMLSelectElement;
+    dispatch("change", { locale: target.value });
+  }
+</script>
+
+<div class="authrim-lang {className}" {...$$restProps}>
+  <svg
+    class="authrim-lang__icon"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM5.354 5.354a1 1 0 011.414 0l.354.353.354-.353a1 1 0 011.414 1.414l-.353.354.353.354a1 1 0 01-1.414 1.414L7.122 8.182l-.354.354a1 1 0 01-1.414-1.414l.354-.354-.354-.354a1 1 0 010-1.414zm5.2 1.96a.75.75 0 10-1.108 1.012L10.95 10l-1.504 1.674a.75.75 0 101.108 1.012l1.152-1.282 1.152 1.282a.75.75 0 101.108-1.012L12.462 10l1.504-1.674a.75.75 0 10-1.108-1.012L11.706 8.596l-1.152-1.282z"
+      clip-rule="evenodd"
+    />
+  </svg>
+
+  <select
+    value={currentLocale}
+    on:change={handleChange}
+    aria-label="Select language"
+    class="authrim-lang__select"
+  >
+    {#each locales as locale (locale.code)}
+      <option value={locale.code}>{locale.label}</option>
+    {/each}
+  </select>
+</div>
+
+<style>
+  .authrim-lang {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--authrim-space-2);
+  }
+
+  .authrim-lang__icon {
+    width: 16px;
+    height: 16px;
+    color: var(--authrim-color-text-muted);
+    flex-shrink: 0;
+  }
+
+  .authrim-lang__select {
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+    background: transparent;
+    border: 1.5px solid var(--authrim-color-border);
+    border-radius: var(--authrim-radius-sm);
+    padding: var(--authrim-space-1) var(--authrim-space-6)
+      var(--authrim-space-1) var(--authrim-space-2);
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right var(--authrim-space-1) center;
+    background-size: 16px;
+    transition:
+      border-color var(--authrim-duration-fast) var(--authrim-ease-default),
+      box-shadow var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-lang__select:hover {
+    border-color: var(--authrim-color-border-strong);
+  }
+
+  .authrim-lang__select:focus-visible {
+    outline: none;
+    box-shadow: var(--authrim-shadow-focus);
+    border-color: var(--authrim-color-primary);
+  }
+
+  .authrim-lang__select option {
+    background: var(--authrim-color-bg);
+    color: var(--authrim-color-text);
+  }
+</style>

package/dist/ui/shared/LanguageSwitcher.svelte.d.ts

@@ -0,0 +1,31 @@
+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 LanguageSwitcher: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    currentLocale?: string | undefined;
+    locales?: Array<{
+        code: string;
+        label: string;
+    }> | undefined;
+    class?: string | undefined;
+}, {
+    change: CustomEvent<{
+        locale: string;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LanguageSwitcher = InstanceType<typeof LanguageSwitcher>;
+export default LanguageSwitcher;
+//# sourceMappingURL=LanguageSwitcher.svelte.d.ts.map

package/dist/ui/shared/LanguageSwitcher.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/shared/LanguageSwitcher.svelte.ts"],"names":[],"mappings":"AAyCA,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;;;cAVmH,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;;;;gBAA+H,MAAM;;;;kBAUxL,CAAC;AAC3G,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAChE,eAAe,gBAAgB,CAAC"}

package/dist/ui/shared/Spinner.svelte

@@ -0,0 +1,75 @@
+<!--
+  Spinner Component
+  Animated loading indicator with refined motion
+-->
+<script lang="ts">
+  import type { Size } from '../types.js';
+
+  export let size: Size = 'md';
+  let className = '';
+  export { className as class };
+</script>
+
+<svg
+  class="authrim-spinner authrim-spinner--{size} {className}"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  aria-hidden="true"
+  {...$$restProps}
+>
+  <circle
+    class="authrim-spinner__track"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+  />
+  <circle
+    class="authrim-spinner__indicator"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-dasharray="62.83"
+    stroke-dashoffset="47.12"
+  />
+</svg>
+
+<style>
+  .authrim-spinner {
+    display: inline-block;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  .authrim-spinner--sm {
+    width: 16px;
+    height: 16px;
+  }
+
+  .authrim-spinner--md {
+    width: 24px;
+    height: 24px;
+  }
+
+  .authrim-spinner--lg {
+    width: 32px;
+    height: 32px;
+  }
+
+  .authrim-spinner__track {
+    opacity: 0.15;
+  }
+
+  .authrim-spinner__indicator {
+    opacity: 0.9;
+  }
+</style>

package/dist/ui/shared/Spinner.svelte.d.ts

@@ -0,0 +1,24 @@
+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 Spinner: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    size?: Size | undefined;
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Spinner = InstanceType<typeof Spinner>;
+export default Spinner;
+//# sourceMappingURL=Spinner.svelte.d.ts.map

package/dist/ui/shared/Spinner.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/shared/Spinner.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAoBxC,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,OAAO;;WAV8C,IAAI;;;;kBAUoD,CAAC;AAClG,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,13 @@
+/**
+ * Authrim UI Shared Components
+ */
+export { default as Button } from "./Button.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as Card } from "./Card.svelte";
+export { default as Spinner } from "./Spinner.svelte";
+export { default as Badge } from "./Badge.svelte";
+export { default as Alert } from "./Alert.svelte";
+export { default as Dialog } from "./Dialog.svelte";
+export { default as LanguageSwitcher } from "./LanguageSwitcher.svelte";
+export { default as CountdownTimer } from "./CountdownTimer.svelte";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/shared/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/ui/shared/index.js

@@ -0,0 +1,12 @@
+/**
+ * Authrim UI Shared Components
+ */
+export { default as Button } from "./Button.svelte";
+export { default as Input } from "./Input.svelte";
+export { default as Card } from "./Card.svelte";
+export { default as Spinner } from "./Spinner.svelte";
+export { default as Badge } from "./Badge.svelte";
+export { default as Alert } from "./Alert.svelte";
+export { default as Dialog } from "./Dialog.svelte";
+export { default as LanguageSwitcher } from "./LanguageSwitcher.svelte";
+export { default as CountdownTimer } from "./CountdownTimer.svelte";

package/dist/ui/styles/base.css

@@ -0,0 +1,168 @@
+/**
+ * Authrim UI Base Styles
+ * Global resets and utility classes
+ */
+
+/* === Base Reset === */
+.authrim-ui,
+.authrim-ui *,
+.authrim-ui *::before,
+.authrim-ui *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.authrim-ui {
+  font-family: var(--authrim-font-sans);
+  font-size: var(--authrim-text-base);
+  line-height: var(--authrim-leading-normal);
+  color: var(--authrim-color-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* === Focus Management === */
+.authrim-ui :focus {
+  outline: none;
+}
+
+.authrim-ui :focus-visible {
+  outline: none;
+  box-shadow: var(--authrim-shadow-focus);
+}
+
+/* === Screen Reader Only === */
+.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;
+}
+
+/* === Animations === */
+@keyframes authrim-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes authrim-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes authrim-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes authrim-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes authrim-fade-down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes authrim-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes authrim-shake {
+  0%, 100% { transform: translateX(0); }
+  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
+  20%, 40%, 60%, 80% { transform: translateX(4px); }
+}
+
+@keyframes authrim-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes authrim-bounce-subtle {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-2px); }
+}
+
+@keyframes authrim-glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 0 var(--authrim-color-primary-subtle);
+  }
+  50% {
+    box-shadow: 0 0 0 8px transparent;
+  }
+}
+
+@keyframes authrim-digit-pop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+/* === Animation Utilities === */
+.authrim-animate-spin {
+  animation: authrim-spin 1s linear infinite;
+}
+
+.authrim-animate-pulse {
+  animation: authrim-pulse 2s ease-in-out infinite;
+}
+
+.authrim-animate-fade-in {
+  animation: authrim-fade-in var(--authrim-duration-normal) var(--authrim-ease-out);
+}
+
+.authrim-animate-fade-up {
+  animation: authrim-fade-up var(--authrim-duration-normal) var(--authrim-ease-out);
+}
+
+.authrim-animate-scale-in {
+  animation: authrim-scale-in var(--authrim-duration-normal) var(--authrim-ease-bounce);
+}
+
+.authrim-animate-shake {
+  animation: authrim-shake 0.5s ease-in-out;
+}
+
+/* === Reduced Motion === */
+@media (prefers-reduced-motion: reduce) {
+  .authrim-ui *,
+  .authrim-ui *::before,
+  .authrim-ui *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}