@authrim/sveltekit 0.1.0

package/dist/ui/shared/Alert.svelte

@@ -0,0 +1,246 @@
+<!--
+  Alert Component
+  Status message display with variant-based styling
+  Supports success, error, warning, and info variants
+-->
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  export let variant: "success" | "error" | "warning" | "info" = "info";
+  export let title = "";
+  export let dismissible = false;
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ dismiss: void }>();
+</script>
+
+<div
+  class="authrim-alert authrim-alert--{variant} {className}"
+  role="alert"
+  aria-live={variant === "error" ? "assertive" : "polite"}
+  {...$$restProps}
+>
+  <div class="authrim-alert__icon">
+    {#if variant === "success"}
+      <svg viewBox="0 0 20 20" fill="currentColor">
+        <path
+          fill-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {:else if variant === "error"}
+      <svg viewBox="0 0 20 20" fill="currentColor">
+        <path
+          fill-rule="evenodd"
+          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {:else if variant === "warning"}
+      <svg viewBox="0 0 20 20" fill="currentColor">
+        <path
+          fill-rule="evenodd"
+          d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 6a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 6zm0 9a1 1 0 100-2 1 1 0 000 2z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {:else}
+      <svg viewBox="0 0 20 20" fill="currentColor">
+        <path
+          fill-rule="evenodd"
+          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    {/if}
+  </div>
+
+  <div class="authrim-alert__body">
+    {#if title}
+      <h3 class="authrim-alert__title">{title}</h3>
+    {/if}
+    <div class="authrim-alert__text">
+      <slot />
+    </div>
+  </div>
+
+  {#if dismissible}
+    <button
+      type="button"
+      class="authrim-alert__dismiss"
+      on:click={() => dispatch("dismiss")}
+      aria-label="Dismiss"
+    >
+      <svg viewBox="0 0 20 20" fill="currentColor">
+        <path
+          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+        />
+      </svg>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .authrim-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--authrim-space-3);
+    padding: var(--authrim-space-4);
+    border: 1.5px solid;
+    border-radius: var(--authrim-radius-md);
+    animation: authrim-alert-in var(--authrim-duration-normal)
+      var(--authrim-ease-bounce);
+  }
+
+  @keyframes authrim-alert-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .authrim-alert__icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .authrim-alert__icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .authrim-alert__body {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .authrim-alert__title {
+    margin: 0 0 var(--authrim-space-1);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    font-weight: 600;
+    line-height: var(--authrim-leading-snug);
+  }
+
+  .authrim-alert__text {
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    line-height: var(--authrim-leading-snug);
+    letter-spacing: var(--authrim-tracking-tight);
+  }
+
+  .authrim-alert__dismiss {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    margin: -2px -4px -2px 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--authrim-radius-sm);
+    cursor: pointer;
+    transition:
+      background-color var(--authrim-duration-fast) var(--authrim-ease-default),
+      transform var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-alert__dismiss:active {
+    transform: scale(0.9);
+  }
+
+  .authrim-alert__dismiss:focus-visible {
+    outline: none;
+    box-shadow: var(--authrim-shadow-focus);
+  }
+
+  .authrim-alert__dismiss svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Success */
+  .authrim-alert--success {
+    background: var(--authrim-color-success-subtle, #f0fdf4);
+    border-color: var(--authrim-color-success, #22c55e);
+  }
+
+  .authrim-alert--success .authrim-alert__icon,
+  .authrim-alert--success .authrim-alert__dismiss {
+    color: var(--authrim-color-success, #22c55e);
+  }
+
+  .authrim-alert--success .authrim-alert__title {
+    color: var(--authrim-color-success, #22c55e);
+  }
+
+  .authrim-alert--success .authrim-alert__text {
+    color: var(--authrim-color-success-text, #166534);
+  }
+
+  /* Error */
+  .authrim-alert--error {
+    background: var(--authrim-color-error-subtle);
+    border-color: var(--authrim-color-error);
+  }
+
+  .authrim-alert--error .authrim-alert__icon,
+  .authrim-alert--error .authrim-alert__dismiss {
+    color: var(--authrim-color-error);
+  }
+
+  .authrim-alert--error .authrim-alert__title {
+    color: var(--authrim-color-error);
+  }
+
+  .authrim-alert--error .authrim-alert__text {
+    color: var(--authrim-color-error-text);
+  }
+
+  /* Warning */
+  .authrim-alert--warning {
+    background: var(--authrim-color-warning-subtle, #fffbeb);
+    border-color: var(--authrim-color-warning, #f59e0b);
+  }
+
+  .authrim-alert--warning .authrim-alert__icon,
+  .authrim-alert--warning .authrim-alert__dismiss {
+    color: var(--authrim-color-warning, #f59e0b);
+  }
+
+  .authrim-alert--warning .authrim-alert__title {
+    color: var(--authrim-color-warning-text, #92400e);
+  }
+
+  .authrim-alert--warning .authrim-alert__text {
+    color: var(--authrim-color-warning-text, #92400e);
+  }
+
+  /* Info */
+  .authrim-alert--info {
+    background: var(--authrim-color-info-subtle, #eff6ff);
+    border-color: var(--authrim-color-info, #3b82f6);
+  }
+
+  .authrim-alert--info .authrim-alert__icon,
+  .authrim-alert--info .authrim-alert__dismiss {
+    color: var(--authrim-color-info, #3b82f6);
+  }
+
+  .authrim-alert--info .authrim-alert__title {
+    color: var(--authrim-color-info, #3b82f6);
+  }
+
+  .authrim-alert--info .authrim-alert__text {
+    color: var(--authrim-color-info-text, #1e40af);
+  }
+</style>

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

@@ -0,0 +1,36 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Alert: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    variant?: "success" | "error" | "warning" | "info" | undefined;
+    title?: string | undefined;
+    dismissible?: boolean | undefined;
+    class?: string | undefined;
+}, {
+    default: {};
+}>, {
+    dismiss: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Alert = InstanceType<typeof Alert>;
+export default Alert;
+//# sourceMappingURL=Alert.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/shared/Alert.svelte.ts"],"names":[],"mappings":"AA6DA,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;cAfmG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM;;;;;;;;;;;;cAe/B,CAAC;AACtG,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/ui/shared/Badge.svelte

@@ -0,0 +1,100 @@
+<!--
+  Badge Component
+  Status indicator with variants
+-->
+<script lang="ts">
+  import type { Size } from '../types.js';
+
+  export let variant: 'default' | 'success' | 'warning' | 'error' | 'info' | 'accent' = 'default';
+  export let size: Size = 'md';
+  export let dot = false;
+  let className = '';
+  export { className as class };
+</script>
+
+<span
+  class="authrim-badge authrim-badge--{variant} authrim-badge--{size} {className}"
+  class:authrim-badge--dot={dot}
+  {...$$restProps}
+>
+  {#if dot}
+    <span class="authrim-badge__dot" aria-hidden="true"></span>
+  {/if}
+  <slot />
+</span>
+
+<style>
+  .authrim-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--authrim-space-1);
+    font-family: var(--authrim-font-sans);
+    font-weight: 500;
+    border-radius: var(--authrim-radius-full);
+    white-space: nowrap;
+    letter-spacing: var(--authrim-tracking-tight);
+  }
+
+  /* Sizes */
+  .authrim-badge--sm {
+    height: 20px;
+    padding: 0 var(--authrim-space-2);
+    font-size: 11px;
+  }
+
+  .authrim-badge--md {
+    height: 24px;
+    padding: 0 var(--authrim-space-3);
+    font-size: var(--authrim-text-xs);
+  }
+
+  .authrim-badge--lg {
+    height: 28px;
+    padding: 0 var(--authrim-space-3);
+    font-size: var(--authrim-text-sm);
+  }
+
+  /* Variants */
+  .authrim-badge--default {
+    background: var(--authrim-color-bg-subtle);
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-badge--success {
+    background: var(--authrim-color-success-subtle);
+    color: var(--authrim-color-success-text);
+  }
+
+  .authrim-badge--warning {
+    background: var(--authrim-color-warning-subtle);
+    color: var(--authrim-color-warning-text);
+  }
+
+  .authrim-badge--error {
+    background: var(--authrim-color-error-subtle);
+    color: var(--authrim-color-error-text);
+  }
+
+  .authrim-badge--info {
+    background: var(--authrim-color-info-subtle);
+    color: var(--authrim-color-info-text);
+  }
+
+  .authrim-badge--accent {
+    background: var(--authrim-color-primary-subtle);
+    color: var(--authrim-color-primary);
+  }
+
+  /* Dot indicator */
+  .authrim-badge__dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .authrim-badge--sm .authrim-badge__dot {
+    width: 5px;
+    height: 5px;
+  }
+</style>

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

@@ -0,0 +1,35 @@
+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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    variant?: "default" | "success" | "warning" | "error" | "info" | "accent" | undefined;
+    size?: Size | undefined;
+    dot?: boolean | undefined;
+    class?: string | undefined;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Badge = InstanceType<typeof Badge>;
+export default Badge;
+//# sourceMappingURL=Badge.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/shared/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAwBxC,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,KAAK;;cAfiF,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ;WAAS,IAAI;;;;;;;;;cAejD,CAAC;AACtG,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/ui/shared/Button.svelte

@@ -0,0 +1,213 @@
+<!--
+  Button Component
+  Primary action component with variants and loading states
+-->
+<script lang="ts">
+  import type { Size, Variant } from '../types.js';
+  import Spinner from './Spinner.svelte';
+
+  export let variant: Variant = 'primary';
+  export let size: Size = 'md';
+  export let loading = false;
+  export let disabled = false;
+  export let fullWidth = false;
+  export let type: 'button' | 'submit' | 'reset' = 'button';
+  let className = '';
+  export { className as class };
+
+  $: isDisabled = disabled || loading;
+</script>
+
+<button
+  {type}
+  disabled={isDisabled}
+  class="authrim-btn authrim-btn--{variant} authrim-btn--{size} {className}"
+  class:authrim-btn--loading={loading}
+  class:authrim-btn--full={fullWidth}
+  on:click
+  on:focus
+  on:blur
+  {...$$restProps}
+>
+  {#if loading}
+    <span class="authrim-btn__spinner">
+      <Spinner size={size === 'lg' ? 'md' : 'sm'} />
+    </span>
+  {/if}
+  <span class="authrim-btn__content" class:authrim-btn__content--hidden={loading}>
+    <slot />
+  </span>
+</button>
+
+<style>
+  .authrim-btn {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--authrim-space-2);
+    font-family: var(--authrim-font-sans);
+    font-weight: 600;
+    letter-spacing: var(--authrim-tracking-tight);
+    border: 1.5px solid transparent;
+    border-radius: var(--authrim-radius-md);
+    cursor: pointer;
+    white-space: nowrap;
+    user-select: none;
+    transition:
+      background-color var(--authrim-duration-fast) var(--authrim-ease-default),
+      border-color var(--authrim-duration-fast) var(--authrim-ease-default),
+      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-default);
+  }
+
+  .authrim-btn:focus-visible {
+    outline: none;
+    box-shadow: var(--authrim-shadow-focus);
+  }
+
+  .authrim-btn:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+
+  .authrim-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Sizes */
+  .authrim-btn--sm {
+    height: 34px;
+    padding: 0 var(--authrim-space-3);
+    font-size: var(--authrim-text-sm);
+    border-radius: var(--authrim-radius-sm);
+  }
+
+  .authrim-btn--md {
+    height: 42px;
+    padding: 0 var(--authrim-space-5);
+    font-size: var(--authrim-text-sm);
+  }
+
+  .authrim-btn--lg {
+    height: 50px;
+    padding: 0 var(--authrim-space-6);
+    font-size: var(--authrim-text-base);
+    border-radius: var(--authrim-radius-lg);
+  }
+
+  /* Primary */
+  .authrim-btn--primary {
+    background: linear-gradient(
+      180deg,
+      var(--authrim-color-primary) 0%,
+      var(--authrim-color-primary-active) 100%
+    );
+    border-color: var(--authrim-color-primary-active);
+    color: var(--authrim-color-primary-text);
+    box-shadow:
+      var(--authrim-shadow-sm),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  .authrim-btn--primary:hover:not(:disabled) {
+    background: linear-gradient(
+      180deg,
+      var(--authrim-color-primary-hover) 0%,
+      var(--authrim-color-primary) 100%
+    );
+    box-shadow:
+      var(--authrim-shadow-md),
+      inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  }
+
+  /* Secondary */
+  .authrim-btn--secondary {
+    background: var(--authrim-color-bg-subtle);
+    border-color: var(--authrim-color-border);
+    color: var(--authrim-color-text);
+  }
+
+  .authrim-btn--secondary:hover:not(:disabled) {
+    background: var(--authrim-color-bg-muted);
+    border-color: var(--authrim-color-border-strong);
+  }
+
+  /* Outline */
+  .authrim-btn--outline {
+    background: transparent;
+    border-color: var(--authrim-color-border-strong);
+    color: var(--authrim-color-text);
+  }
+
+  .authrim-btn--outline:hover:not(:disabled) {
+    background: var(--authrim-color-bg-subtle);
+    border-color: var(--authrim-color-text-muted);
+  }
+
+  /* Ghost */
+  .authrim-btn--ghost {
+    background: transparent;
+    border-color: transparent;
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-btn--ghost:hover:not(:disabled) {
+    background: var(--authrim-color-bg-subtle);
+    color: var(--authrim-color-text);
+  }
+
+  /* Destructive */
+  .authrim-btn--destructive {
+    background: linear-gradient(
+      180deg,
+      var(--authrim-color-error) 0%,
+      var(--authrim-color-error-hover) 100%
+    );
+    border-color: var(--authrim-color-error-hover);
+    color: white;
+    box-shadow:
+      var(--authrim-shadow-sm),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  .authrim-btn--destructive:hover:not(:disabled) {
+    background: linear-gradient(
+      180deg,
+      var(--authrim-color-error-hover) 0%,
+      var(--authrim-color-error) 100%
+    );
+  }
+
+  .authrim-btn--destructive:focus-visible {
+    box-shadow: var(--authrim-shadow-focus-error);
+  }
+
+  /* Full width */
+  .authrim-btn--full {
+    width: 100%;
+  }
+
+  /* Loading state */
+  .authrim-btn--loading {
+    cursor: wait;
+  }
+
+  .authrim-btn__spinner {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .authrim-btn__content {
+    display: flex;
+    align-items: center;
+    gap: var(--authrim-space-2);
+  }
+
+  .authrim-btn__content--hidden {
+    visibility: hidden;
+  }
+</style>

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

@@ -0,0 +1,42 @@
+import type { Size, Variant } 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;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    variant?: Variant | undefined;
+    size?: Size | undefined;
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
+    class?: string | undefined;
+}, {
+    default: {};
+}>, {
+    click: PointerEvent;
+    focus: FocusEvent;
+    blur: FocusEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Button = InstanceType<typeof Button>;
+export default Button;
+//# sourceMappingURL=Button.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/shared/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAmCjD,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;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,MAAM;;cAfiJ,OAAO;WAAS,IAAI;;;;WAA6F,QAAQ,GAAG,QAAQ,GAAG,OAAO;;;;;;;;;;;;cAenL,CAAC;AACvG,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}