UIライブラリ

概要

@authrim/sveltekit/ui は認証UIを構築するための30以上のプリビルドSvelteコンポーネントを提供します。すべてのコンポーネントは：

テーマ対応 — CSSカスタムプロパティ（--authrim-*）
アクセシブル — ARIAロール、フォーカス管理、キーボードナビゲーション
ダークモード対応 — [data-theme="dark"] でライト/ダークテーマ
依存関係なし — 純粋なSvelte、外部UIライブラリ不要

import { Button, Input, Card, EmailCodeForm } from '@authrim/sveltekit/ui';
import '@authrim/sveltekit/ui/styles'; // テーマCSS

コンポーネントカタログ

共通コンポーネント

コンポーネント	Props	説明
`Button`	`variant`, `size`, `loading`, `disabled`, `fullWidth`, `type`	バリアントとローディングスピナー付きアクションボタン
`Input`	`type`, `size`, `value`, `placeholder`, `error`, `errorMessage`, `label`, `required`	ラベル、エラー状態、バリデーション付きテキスト入力
`Card`	`padding`, `bordered`, `shadow`, `hoverable`	ヘッダー/フッタースロット付きコンテナ
`Dialog`	`open`, `title`, `closeOnOverlay`, `closeOnEscape`	フォーカストラップとオーバーレイ付きモーダルダイアログ
`Badge`	`variant`, `dot`	カラーバリアント付きステータスインジケーター
`Spinner`	`size`	ローディングスピナーアニメーション
`Alert`	`variant`, `title`, `dismissible`	アラートメッセージ（success/error/warning/info）
`LanguageSwitcher`	`locales`, `currentLocale`	言語選択ドロップダウン
`CountdownTimer`	`expiresAt`, `size`, `showIcon`, `warnAt`, `criticalAt`	カウントダウン表示

ヘルパーコンポーネント

コンポーネント	Props	説明
`AuthError`	`message`, `dismissible`	`role="alert"` 付きエラー表示（閉じるボタン付き）
`OTPInput`	`length`, `value`, `disabled`, `error`, `autoFocus`	ペースト対応・自動進行の分割コード入力
`ResendCodeButton`	`remainingTime`, `text`, `loading`, `disabled`	カウントダウンタイマー付き再送信ボタン

フォームコンポーネント

コンポーネント	Props	説明
`EmailCodeForm`	`step`, `email`, `maskedEmail`, `loading`, `error`, `resendRemainingTime`	2ステップのメール＋コードフォーム
`SocialLoginButtons`	`providers`, `layout`, `loading`, `loadingProvider`, `compact`	アイコン付きプロバイダーボタン
`PasskeyConditionalInput`	`value`, `placeholder`, `disabled`, `size`, `label`, `showPasskeyHint`	WebAuthn autofill向けのユーザー名入力
`UserCodeInput`	`value`, `disabled`, `placeholder`, `label`, `hint`	Device Flowユーザーコード入力
`QRCodeDisplay`	`data`, `imageUrl`, `size`, `label`, `caption`	QRコード表示ラッパー
`ClientInfo`	`client`, `trustedLabel`, `privacyPolicyLabel`, `termsLabel`	OAuthクライアント情報表示
`ConsentScopesList`	`scopes`, `labelMap`	OAuthスコープ表示リスト
`OrgSelector`	`organizations`, `selectedOrgId`, `label`, `primaryLabel`	同意画面の組織セレクター
`CIBARequestCard`	`request`, `loading`, `approveLabel`, `denyLabel`	単一CIBA承認カード

Passkey管理

コンポーネント	Props	説明
`PasskeyList`	`passkeys`, `loading`, `deletingId`	削除機能付き登録済みPasskey一覧
`PasskeyRegisterButton`	`loading`, `disabled`, `variant`, `size`, `fullWidth`	新規Passkey登録ボタン
`PasskeyDeleteButton`	`credentialId`, `loading`	Passkey削除確認ボタン

セッション管理

コンポーネント	Props	説明
`SessionList`	`sessions`, `currentSessionId`, `loading`, `revokingId`	取消機能付きアクティブセッション一覧
`SessionRevokeButton`	`sessionId`, `loading`	セッション取消ボタン
`SessionExpiryIndicator`	`expiresAt`	セッション有効期限表示

アカウント管理

コンポーネント	Props	説明
`LinkedAccountsList`	`accounts`, `loading`	連携ソーシャルアカウント
`LinkAccountButton`	`provider`, `loading`	新規ソーシャルアカウント連携
`UnlinkAccountButton`	`accountId`, `provider`, `loading`	ソーシャルアカウント連携解除

主要コンポーネントの詳細

Button

<script lang="ts">
  import { Button } from '@authrim/sveltekit/ui';
</script>

<Button variant="primary" size="md" loading={false} onclick={handleClick}>
  サインイン
</Button>

<Button variant="outline" fullWidth>
  メールで続行
</Button>

<Button variant="destructive" size="sm">
  アカウント削除
</Button>

バリアント: primary, secondary, outline, ghost, destructive

サイズ: sm（34px）、md（42px）、lg（50px）

Input

<script lang="ts">
  import { Input } from '@authrim/sveltekit/ui';
  let email = $state('');
</script>

<Input
  type="email"
  label="メールアドレス"
  placeholder="[email protected]"
  bind:value={email}
  required
  error={!email.includes('@')}
  errorMessage="無効なメールアドレスです"
/>

OTPInput

<script lang="ts">
  import { OTPInput } from '@authrim/sveltekit/ui';
</script>

<OTPInput
  length={6}
  autoFocus
  on:complete={(e) => verifyCode(e.detail.value)}
  on:input={(e) => console.log('現在値:', e.detail.value)}
/>

機能: 数字間の自動進行、ペースト対応、矢印キーナビゲーション、エラー時のシェイクアニメーション。

EmailCodeForm

<script lang="ts">
  import { EmailCodeForm } from '@authrim/sveltekit/ui';

  let step: 'email' | 'code' = $state('email');
  let email = $state('');
  let loading = $state(false);
</script>

<EmailCodeForm
  {step}
  {email}
  {loading}
  on:submit-email={(e) => sendCode(e.detail.email)}
  on:submit-code={(e) => verifyCode(e.detail.code)}
  on:back={() => { step = 'email'; }}
  on:resend={() => resendCode()}
  on:dismiss-error={() => { error = ''; }}
/>

SocialLoginButtons

<script lang="ts">
  import { SocialLoginButtons } from '@authrim/sveltekit/ui';
</script>

<SocialLoginButtons
  providers={['google', 'github', 'apple']}
  layout="vertical"
  on:click={(e) => auth.social.loginWithPopup(e.detail.provider)}
/>

レイアウト: vertical（縦並び）、horizontal（横並び）、grid（自動配置）

組み込みアイコン: Google、Apple、Microsoft、GitHub、Facebook — 各ブランドカラー付き。

PasskeyList

<script lang="ts">
  import { PasskeyList } from '@authrim/sveltekit/ui';
</script>

<PasskeyList
  passkeys={[
    { credentialId: 'abc', name: 'MacBook Pro', deviceType: 'platform',
      createdAt: new Date('2024-01-15'), lastUsedAt: new Date('2024-06-01') },
  ]}
  on:delete={(e) => deletePasskey(e.detail.credentialId)}
/>

SessionList

<script lang="ts">
  import { SessionList } from '@authrim/sveltekit/ui';
</script>

<SessionList
  sessions={[
    { sessionId: 'sess_1', browser: 'Chrome', os: 'macOS',
      lastActiveAt: new Date(), isCurrent: true },
    { sessionId: 'sess_2', browser: 'Safari', os: 'iOS',
      lastActiveAt: new Date('2024-05-20') },
  ]}
  currentSessionId="sess_1"
  on:revoke={(e) => revokeSession(e.detail.sessionId)}
/>

カスタマイズ

1. CSSカスタムプロパティ

テーマ変数をオーバーライドして外観を変更：

:root {
  --authrim-color-primary: #0066cc;
  --authrim-color-primary-hover: #0052a3;
  --authrim-radius-md: 8px;
  --authrim-font-sans: 'Inter', sans-serif;
}

2. class prop

すべてのコンポーネントは class propを受け付けます：

<Button class="my-custom-button" variant="primary">
  送信
</Button>

<style>
  :global(.my-custom-button) {
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
</style>

3. スロット

内部セクションをスロットで置き換え：

<Card>
  {#snippet header()}
    <h2>カスタムヘッダー</h2>
  {/snippet}

  <p>カード本文</p>

  {#snippet footer()}
    <Button>保存</Button>
  {/snippet}
</Card>

テーマリファレンス

テーマCSSをインポートしてデフォルトスタイルを適用：

import '@authrim/sveltekit/ui/styles';

カラートークン

トークン	ライト	ダーク	用途
`--authrim-color-primary`	`#4f46e5`	`#818cf8`	プライマリアクション
`--authrim-color-accent`	`#f43f5e`	`#fb7185`	アクセント/ハイライト
`--authrim-color-success`	`#059669`	`#34d399`	成功状態
`--authrim-color-warning`	`#d97706`	`#fbbf24`	警告状態
`--authrim-color-error`	`#e11d48`	`#fb7185`	エラー状態
`--authrim-color-info`	`#0891b2`	`#22d3ee`	情報状態
`--authrim-color-bg`	`#ffffff`	`#09090b`	背景
`--authrim-color-text`	`#09090b`	`#fafafa`	テキスト
`--authrim-color-border`	`#e4e4e7`	`#27272a`	ボーダー

レイアウトトークン

トークン	値	用途
`--authrim-radius-sm`	`6px`	小さい要素
`--authrim-radius-md`	`10px`	ボタン、入力
`--authrim-radius-lg`	`14px`	カード
`--authrim-radius-xl`	`20px`	大きいコンテナ
`--authrim-shadow-sm`	微妙	カード、入力
`--authrim-shadow-md`	中程度	ダイアログ
`--authrim-shadow-lg`	目立つ	ドロップダウン

タイポグラフィトークン

トークン	値
`--authrim-font-sans`	`'DM Sans', system-ui, sans-serif`
`--authrim-font-mono`	`'JetBrains Mono', monospace`
`--authrim-text-sm`	`0.875rem`
`--authrim-text-base`	`1rem`
`--authrim-text-lg`	`1.125rem`

ダークモード

ダークモードは [data-theme="dark"] または prefers-color-scheme: dark で有効化：

<!-- 手動トグル -->
<html data-theme="dark">

/* 自動検知（デフォルト動作） */
@media (prefers-color-scheme: dark) {
  :root { /* ダークトークンが自動適用 */ }
}

次のステップ

ページテンプレート — これらのコンポーネントを使ったフルページレイアウト
コンポーネント — コア認証コンポーネント（AuthProvider等）
設定 — 高度なカスタマイズオプション