@better-forge/ui 0.1.0 → 0.1.1

package/src/components/formParts.tsx

@@ -1,59 +1,59 @@
-import type { ReactNode } from 'react'
-
-// Building blocks shared by the forms of the interface and the sections extracted from them.
-
-export interface VaultSummary  { id: number; name: string }
-export interface SecretSummary { id: number; name: string; type: 'userpass' | 'value' | 'json' }
-
-/** What every vault-aware credential picker needs to list vaults and lazily load their secrets. */
-export interface VaultPickerProps {
-  vaults: { id: number; name: string }[]
-  secretsByVault: Record<number, { id: number; name: string; type: string }[]>
-  onLoadSecrets: (vaultId: number) => Promise<void>
-}
-
-// Fields that can be sourced from a json vault secret, per context
-export const JSON_MAPPING_FIELDS: Record<'basic' | 'oauth2' | 'cas' | 'database', { key: string; label: string }[]> = {
-  basic:     [{ key: 'username', label: 'Username' }, { key: 'password', label: 'Password' }],
-  oauth2:    [{ key: 'clientId', label: 'Client ID' }, { key: 'clientSecret', label: 'Client Secret' }],
-  cas:       [{ key: 'username', label: 'Username' }, { key: 'password', label: 'Password' }],
-  database: [{ key: 'username', label: 'Username' }, { key: 'password', label: 'Password' }],
-}
-
-/** The shared caps-style form field: its label is programmatically tied to the control it wraps. */
-export { Field } from './ui'
-
-export function SectionDivider({ label }: { label: string }) {
-  return (
-    <div className="flex items-center gap-3 pt-1">
-      <div style={{ flex: 1, borderTop: '1px solid var(--m3-outline-variant)' }} />
-      <span className="font-mono text-xs uppercase tracking-wider" style={{ color: 'var(--m3-secondary)' }}>{label}</span>
-      <div style={{ flex: 1, borderTop: '1px solid var(--m3-outline-variant)' }} />
-    </div>
-  )
-}
-
-/** Tinted callout: `info` uses the accent blue, `warning` the degraded amber (text colour, not the bar colour). */
-export function Note({ tone, children }: { tone: 'info' | 'warning'; children: ReactNode }) {
-  const color = tone === 'info' ? 'var(--m3-on-primary-container)' : 'var(--m3-degraded)'
-  const tint = tone === 'info' ? color : 'var(--m3-degraded-bar)'
-  return (
-    <div
-      className="flex items-start gap-2 rounded-lg px-3 py-2"
-      style={{ background: `color-mix(in srgb, ${tint} 8%, transparent)`, border: `1px solid color-mix(in srgb, ${tint} 20%, transparent)` }}
-    >
-      {tone === 'info'
-        ? <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '16px', color, lineHeight: '20px' }}>info</span>
-        : <span aria-hidden="true" style={{ color, lineHeight: '20px' }}>⚠</span>}
-      <p className="text-xs" style={{ color: 'var(--m3-on-surface-variant)' }}>{children}</p>
-    </div>
-  )
-}
-
-/** Adds or removes one id from a selection set without mutating it. */
-export function toggleInSet(set: Set<number>, id: number, on: boolean): Set<number> {
-  const next = new Set(set)
-  if (on) next.add(id)
-  else next.delete(id)
-  return next
-}
+import type { ReactNode } from 'react'
+
+// Building blocks shared by the forms of the interface and the sections extracted from them.
+
+export interface VaultSummary  { id: number; name: string }
+export interface SecretSummary { id: number; name: string; type: 'userpass' | 'value' | 'json' }
+
+/** What every vault-aware credential picker needs to list vaults and lazily load their secrets. */
+export interface VaultPickerProps {
+  vaults: { id: number; name: string }[]
+  secretsByVault: Record<number, { id: number; name: string; type: string }[]>
+  onLoadSecrets: (vaultId: number) => Promise<void>
+}
+
+// Fields that can be sourced from a json vault secret, per context
+export const JSON_MAPPING_FIELDS: Record<'basic' | 'oauth2' | 'cas' | 'database', { key: string; label: string }[]> = {
+  basic:     [{ key: 'username', label: 'Username' }, { key: 'password', label: 'Password' }],
+  oauth2:    [{ key: 'clientId', label: 'Client ID' }, { key: 'clientSecret', label: 'Client Secret' }],
+  cas:       [{ key: 'username', label: 'Username' }, { key: 'password', label: 'Password' }],
+  database: [{ key: 'username', label: 'Username' }, { key: 'password', label: 'Password' }],
+}
+
+/** The shared caps-style form field: its label is programmatically tied to the control it wraps. */
+export { Field } from './ui'
+
+export function SectionDivider({ label }: { label: string }) {
+  return (
+    <div className="flex items-center gap-3 pt-1">
+      <div style={{ flex: 1, borderTop: '1px solid var(--m3-outline-variant)' }} />
+      <span className="font-mono text-xs uppercase tracking-wider" style={{ color: 'var(--m3-secondary)' }}>{label}</span>
+      <div style={{ flex: 1, borderTop: '1px solid var(--m3-outline-variant)' }} />
+    </div>
+  )
+}
+
+/** Tinted callout: `info` uses the accent blue, `warning` the degraded amber (text colour, not the bar colour). */
+export function Note({ tone, children }: { tone: 'info' | 'warning'; children: ReactNode }) {
+  const color = tone === 'info' ? 'var(--m3-on-primary-container)' : 'var(--m3-degraded)'
+  const tint = tone === 'info' ? color : 'var(--m3-degraded-bar)'
+  return (
+    <div
+      className="flex items-start gap-2 rounded-lg px-3 py-2"
+      style={{ background: `color-mix(in srgb, ${tint} 8%, transparent)`, border: `1px solid color-mix(in srgb, ${tint} 20%, transparent)` }}
+    >
+      {tone === 'info'
+        ? <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '16px', color, lineHeight: '20px' }}>info</span>
+        : <span aria-hidden="true" style={{ color, lineHeight: '20px' }}>⚠</span>}
+      <p className="text-xs" style={{ color: 'var(--m3-on-surface-variant)' }}>{children}</p>
+    </div>
+  )
+}
+
+/** Adds or removes one id from a selection set without mutating it. */
+export function toggleInSet(set: Set<number>, id: number, on: boolean): Set<number> {
+  const next = new Set(set)
+  if (on) next.add(id)
+  else next.delete(id)
+  return next
+}

package/src/components/ui/Alert.tsx

@@ -1,45 +1,45 @@
-import clsx from 'clsx'
-import type { CSSProperties, ReactNode } from 'react'
-
-export type AlertTone = 'error' | 'success' | 'info' | 'warning'
-
-const TONES: Record<AlertTone, { icon: string; style: CSSProperties }> = {
-  error:   { icon: 'error',        style: { background: 'var(--m3-down-bg)', color: 'var(--m3-down)', borderColor: 'color-mix(in srgb, var(--m3-down) 30%, transparent)' } },
-  success: { icon: 'check_circle', style: { background: 'var(--m3-up-bg)', color: 'var(--m3-up)', borderColor: 'color-mix(in srgb, var(--m3-up) 30%, transparent)' } },
-  warning: { icon: 'warning',      style: { background: 'var(--m3-degraded-bg)', color: 'var(--m3-degraded)', borderColor: 'color-mix(in srgb, var(--m3-degraded) 30%, transparent)' } },
-  info:    { icon: 'info',         style: { background: 'var(--m3-surface-container-high)', color: 'var(--m3-on-surface)', borderColor: 'var(--m3-outline-variant)' } },
-}
-
-interface AlertProps {
-  tone: AlertTone
-  children: ReactNode
-  /** Optional bold first line. */
-  title?: ReactNode | undefined
-  /** Renders a × button (aria-label "Dismiss") that calls this. */
-  onDismiss?: (() => void) | undefined
-  className?: string | undefined
-}
-
-/** Inline, token-coloured message box. Errors are announced assertively (role="alert"); other tones politely. */
-export function Alert({ tone, children, title, onDismiss, className }: AlertProps) {
-  const { icon, style } = TONES[tone]
-  return (
-    <div
-      role={tone === 'error' ? 'alert' : 'status'}
-      data-tone={tone}
-      className={clsx('flex items-start gap-3 rounded-xl border px-4 py-3 text-sm', className)}
-      style={style}
-    >
-      <span className="material-symbols-outlined flex-shrink-0 mt-px" aria-hidden="true" style={{ fontSize: '18px' }}>{icon}</span>
-      <div className="flex-1 min-w-0 break-words">
-        {title && <p className="font-semibold">{title}</p>}
-        <div className={title ? 'mt-0.5' : undefined}>{children}</div>
-      </div>
-      {onDismiss && (
-        <button type="button" onClick={onDismiss} aria-label="Dismiss" className="btn-icon -my-1 -mr-2" style={{ color: 'inherit' }}>
-          <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '18px' }}>close</span>
-        </button>
-      )}
-    </div>
-  )
-}
+import clsx from 'clsx'
+import type { CSSProperties, ReactNode } from 'react'
+
+export type AlertTone = 'error' | 'success' | 'info' | 'warning'
+
+const TONES: Record<AlertTone, { icon: string; style: CSSProperties }> = {
+  error:   { icon: 'error',        style: { background: 'var(--m3-down-bg)', color: 'var(--m3-down)', borderColor: 'color-mix(in srgb, var(--m3-down) 30%, transparent)' } },
+  success: { icon: 'check_circle', style: { background: 'var(--m3-up-bg)', color: 'var(--m3-up)', borderColor: 'color-mix(in srgb, var(--m3-up) 30%, transparent)' } },
+  warning: { icon: 'warning',      style: { background: 'var(--m3-degraded-bg)', color: 'var(--m3-degraded)', borderColor: 'color-mix(in srgb, var(--m3-degraded) 30%, transparent)' } },
+  info:    { icon: 'info',         style: { background: 'var(--m3-surface-container-high)', color: 'var(--m3-on-surface)', borderColor: 'var(--m3-outline-variant)' } },
+}
+
+interface AlertProps {
+  tone: AlertTone
+  children: ReactNode
+  /** Optional bold first line. */
+  title?: ReactNode | undefined
+  /** Renders a × button (aria-label "Dismiss") that calls this. */
+  onDismiss?: (() => void) | undefined
+  className?: string | undefined
+}
+
+/** Inline, token-coloured message box. Errors are announced assertively (role="alert"); other tones politely. */
+export function Alert({ tone, children, title, onDismiss, className }: AlertProps) {
+  const { icon, style } = TONES[tone]
+  return (
+    <div
+      role={tone === 'error' ? 'alert' : 'status'}
+      data-tone={tone}
+      className={clsx('flex items-start gap-3 rounded-xl border px-4 py-3 text-sm', className)}
+      style={style}
+    >
+      <span className="material-symbols-outlined flex-shrink-0 mt-px" aria-hidden="true" style={{ fontSize: '18px' }}>{icon}</span>
+      <div className="flex-1 min-w-0 break-words">
+        {title && <p className="font-semibold">{title}</p>}
+        <div className={title ? 'mt-0.5' : undefined}>{children}</div>
+      </div>
+      {onDismiss && (
+        <button type="button" onClick={onDismiss} aria-label="Dismiss" className="btn-icon -my-1 -mr-2" style={{ color: 'inherit' }}>
+          <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '18px' }}>close</span>
+        </button>
+      )}
+    </div>
+  )
+}