@nim.zone/ui 0.6.0

package/src/components/profile-screen.tsx

@@ -0,0 +1,104 @@
+import type { ReactNode } from 'react'
+import { List, ListRow } from '@/components/list'
+import { ProfileHeader, type ProfileHeaderProps } from '@/components/profile-header'
+import { SectionHeader } from '@/components/section-header'
+import { Switch } from '@/components/choice'
+import { cn } from '@/lib/cn'
+import type { IconName } from '@/components/icon'
+import { Icon } from '@/components/icon'
+
+export interface ProfileRow {
+  /** A switch instead of a chevron. With `onToggle` the row is the control. */
+  checked?: boolean
+  danger?: boolean
+  href?: string
+  icon?: IconName
+  key: string
+  label: ReactNode
+  onSelect?: () => void
+  onToggle?: (next: boolean) => void
+  subtitle?: ReactNode
+  /** A badge, a count, a version string. */
+  value?: ReactNode
+}
+
+export interface ProfileSection {
+  description?: ReactNode
+  key: string
+  rows: ProfileRow[]
+  title?: ReactNode
+}
+
+export interface ProfileScreenProps extends ProfileHeaderProps {
+  className?: string
+  /** Sign out, delete account — whatever ends the session, kept away from the
+      rows above so it is never the thing a thumb reaches by accident. */
+  footer?: ReactNode
+  sections?: ProfileSection[]
+}
+
+/**
+ * The account screen: the identity plate, then grouped rows of settings.
+ *
+ * Ready to mount — hand it the header's props and a list of sections and it is
+ * the screen. Rows are declared, not composed, so the whole of a settings page
+ * is data the app already has: a label, an icon, and either somewhere to go or
+ * something to toggle.
+ *
+ * State stays the caller's. A switch here reports the change and redraws from
+ * the prop, because the truth about whether notifications are on lives on a
+ * server, and a row that flips optimistically and then disagrees with it is
+ * worse than one that waits.
+ */
+export function ProfileScreen({
+  className,
+  footer,
+  sections = [],
+  ...header
+}: ProfileScreenProps) {
+  return (
+    <div className={cn('nim-profile-screen', className)}>
+      <ProfileHeader {...header} />
+
+      {sections.map((section) => (
+        <section className="nim-profile-screen__section" key={section.key}>
+          {section.title ? (
+            <SectionHeader description={section.description} title={section.title} />
+          ) : null}
+          <List>
+            {section.rows.map((row) => (
+              <ListRow
+                className={cn(row.danger && 'nim-list-row--danger')}
+                href={row.href}
+                key={row.key}
+                leading={row.icon ? <Icon name={row.icon} size="md" /> : undefined}
+                onClick={row.onToggle ? undefined : row.onSelect}
+                subtitle={row.subtitle}
+                title={row.label}
+                trailing={
+                  row.onToggle ? (
+                    // The row's own title names the switch, so the control
+                    // carries the name rather than repeating the text beside
+                    // itself. A toggle row is a div, never a button — a switch
+                    // inside a button is two controls in one target.
+                    <Switch
+                      aria-label={typeof row.label === 'string' ? row.label : undefined}
+                      checked={row.checked ?? false}
+                      onChange={(event) => row.onToggle?.(event.target.checked)}
+                    >
+                      {''}
+                    </Switch>
+                  ) : row.value !== undefined ? (
+                    <span className="nim-profile-screen__value">{row.value}</span>
+                  ) : undefined
+                }
+              />
+            ))}
+          </List>
+        </section>
+      ))}
+
+      {footer ? <div className="nim-profile-screen__footer">{footer}</div> : null}
+    </div>
+  )
+}

package/src/components/resource-meter.tsx

@@ -0,0 +1,60 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
+export type ResourceMeterTone = 'accent' | 'danger' | 'success' | 'warning'
+
+export interface ResourceMeterProps extends HTMLAttributes<HTMLDivElement> {
+  /** A concise description of the capacity being measured. */
+  label: ReactNode
+  /** A readable measurement such as `18.4 / 32 GiB`; formatting stays in the product. */
+  value: ReactNode
+  /** Optional secondary context, for example a node's one-minute load. */
+  detail?: ReactNode
+  /** Percentage used, clamped to the meter's valid 0–100 range. Omit for capacity-only data. */
+  percent?: number
+  tone?: ResourceMeterTone
+}
+
+/**
+ * A compact, accessible capacity reading for operator interfaces.
+ *
+ * `Progress` is intentionally unlabelled composition; a resource figure needs
+ * its numerator, denominator, and qualitative state to travel together. The
+ * product supplies formatting because bytes, vCPU, and retention windows do
+ * not share a unit.
+ */
+export function ResourceMeter({
+  className,
+  detail,
+  label,
+  percent,
+  tone = 'accent',
+  value,
+  ...props
+}: ResourceMeterProps) {
+  const hasMeasurement = typeof percent === 'number'
+  const clamped = Math.min(100, Math.max(0, percent ?? 0))
+  const labelText = typeof label === 'string' ? label : undefined
+
+  return (
+    <div className={cn('nim-resource-meter', className)} data-tone={tone} {...props}>
+      <div className="nim-resource-meter__head">
+        <span className="nim-resource-meter__label">{label}</span>
+        <span className="nim-resource-meter__value">{value}</span>
+      </div>
+      {hasMeasurement ? (
+        <div
+          aria-label={labelText}
+          aria-valuemax={100}
+          aria-valuemin={0}
+          aria-valuenow={clamped}
+          className="nim-resource-meter__track"
+          role="meter"
+        >
+          <span className="nim-resource-meter__fill" style={{ inlineSize: `${clamped}%` }} />
+        </div>
+      ) : null}
+      {detail ? <span className="nim-resource-meter__detail">{detail}</span> : null}
+    </div>
+  )
+}

package/src/components/section-header.tsx

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
+export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+  action?: ReactNode
+  description?: ReactNode
+  eyebrow?: ReactNode
+  title: ReactNode
+}
+
+export function SectionHeader({
+  action,
+  className,
+  description,
+  eyebrow,
+  title,
+  ...props
+}: SectionHeaderProps) {
+  return (
+    <header className={cn('nim-section-header', className)} {...props}>
+      <div>
+        {eyebrow ? <p className="nim-label nim-section-header__eyebrow">{eyebrow}</p> : null}
+        <h2 className="nim-title nim-title--md">{title}</h2>
+        {description ? (
+          <p className="nim-body nim-body--sm nim-section-header__description">{description}</p>
+        ) : null}
+      </div>
+      {action ? <div className="nim-section-header__action">{action}</div> : null}
+    </header>
+  )
+}

package/src/components/segmented.tsx

@@ -0,0 +1,53 @@
+import type { HTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+export interface SegmentedOption<T extends string> {
+  disabled?: boolean
+  label: string
+  value: T
+}
+
+export interface SegmentedProps<T extends string> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  fullWidth?: boolean
+  label: string
+  onChange: (value: T) => void
+  options: SegmentedOption<T>[]
+  value: T
+}
+
+/**
+ * A tablist rather than a row of buttons: arrow-key navigation and the
+ * selected state both come from the platform's tab semantics.
+ */
+export function Segmented<T extends string>({
+  className,
+  fullWidth = false,
+  label,
+  onChange,
+  options,
+  value,
+  ...props
+}: SegmentedProps<T>) {
+  return (
+    <div
+      aria-label={label}
+      className={cn('nim-segmented', fullWidth && 'nim-segmented--full', className)}
+      role="tablist"
+      {...props}
+    >
+      {options.map((option) => (
+        <button
+          aria-selected={option.value === value}
+          className="nim-segmented__option"
+          disabled={option.disabled}
+          key={option.value}
+          onClick={() => onChange(option.value)}
+          role="tab"
+          type="button"
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  )
+}

package/src/components/sheet.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import type { ReactNode } from 'react'
+import { IconButton } from '@/components/icon-button'
+import { cn } from '@/lib/cn'
+
+export interface SheetProps {
+  children: ReactNode
+  className?: string
+  /** Label for the close control; also names the dialog when no title is set. */
+  closeLabel?: string
+  footer?: ReactNode
+  onClose: () => void
+  open: boolean
+  title?: ReactNode
+}
+
+/**
+ * The bottom sheet is nim's modal surface. It owns the three things that are
+ * always forgotten in hand-rolled sheets: the page behind it must not scroll,
+ * Escape must close it, and focus must move into it on open and be restorable
+ * on close.
+ */
+export function Sheet({ children, className, closeLabel = 'Close', footer, onClose, open, title }: SheetProps) {
+  const panelRef = useRef<HTMLDivElement>(null)
+  const restoreRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    if (!open) return
+
+    restoreRef.current = document.activeElement as HTMLElement | null
+    const previousOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    panelRef.current?.focus()
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      document.body.style.overflow = previousOverflow
+      window.removeEventListener('keydown', onKeyDown)
+      restoreRef.current?.focus?.()
+    }
+  }, [onClose, open])
+
+  if (!open || typeof document === 'undefined') return null
+
+  return createPortal(
+    <>
+      <div className="nim-sheet__scrim" onClick={onClose} />
+      <div
+        aria-label={typeof title === 'string' ? title : closeLabel}
+        aria-modal="true"
+        className={cn('nim-sheet__panel', className)}
+        ref={panelRef}
+        role="dialog"
+        tabIndex={-1}
+      >
+        <span aria-hidden="true" className="nim-sheet__handle" />
+        {title ? (
+          <div className="nim-sheet__header">
+            <p className="nim-title nim-title--md">{title}</p>
+            <IconButton label={closeLabel} name="close" onClick={onClose} size="sm" />
+          </div>
+        ) : null}
+        <div className="nim-sheet__body">{children}</div>
+        {footer ? <div className="nim-sheet__footer">{footer}</div> : null}
+      </div>
+    </>,
+    document.body,
+  )
+}

package/src/components/sign-in-flow.tsx

@@ -0,0 +1,322 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import { AuthScreen } from '@/components/auth-screen'
+import { Banner } from '@/components/banner'
+import { Button } from '@/components/button'
+import { Input } from '@/components/field'
+import { OtpInput } from '@/components/otp-input'
+import { PasswordField } from '@/components/password-field'
+import { PhoneField, toE164 } from '@/components/phone-field'
+
+export type SignInMethod = 'code' | 'password'
+
+export interface SignInCopy {
+  back: string
+  codeLabel: string
+  codeSubtitle: (destination: string) => ReactNode
+  codeTitle: string
+  identifierLabel: string
+  passwordLabel: string
+  passwordSubtitle: ReactNode
+  passwordTitle: string
+  phoneLabel: string
+  phoneSubtitle: ReactNode
+  phoneTitle: string
+  resend: string
+  resendIn: (seconds: number) => string
+  sendCode: string
+  signIn: string
+  usePassword: string
+  usePhone: string
+  verify: string
+}
+
+const DEFAULT_COPY: SignInCopy = {
+  back: 'Back',
+  codeLabel: 'Verification code',
+  codeSubtitle: (destination) => `Enter the code we sent to ${destination}`,
+  codeTitle: 'Verification code',
+  identifierLabel: 'Email',
+  passwordLabel: 'Password',
+  passwordSubtitle: 'Use the email and password on your account.',
+  passwordTitle: 'Sign in with a password',
+  phoneLabel: 'Mobile number',
+  phoneSubtitle: 'Enter your mobile number. We will text you a code — no password.',
+  phoneTitle: 'Welcome',
+  resend: 'Send the code again',
+  resendIn: (seconds) => `You can ask for a new code in ${seconds}s`,
+  sendCode: 'Send code',
+  signIn: 'Sign in',
+  usePassword: 'Sign in with a password instead',
+  usePhone: 'Sign in with a code instead',
+  verify: 'Verify and sign in',
+}
+
+export interface SignInFlowProps {
+  brand?: ReactNode
+  className?: string
+  codeLength?: number
+  copy?: Partial<SignInCopy>
+  /** ISO 3166-1 alpha-2 the phone step opens on. */
+  defaultCountry?: string
+  /** Which door the flow opens on. With both methods enabled the viewer can
+      switch; with one, the other is never offered. */
+  defaultMethod?: SignInMethod
+  /** Terms line, support link — under the action on every step. */
+  footer?: ReactNode
+  methods?: SignInMethod[]
+  /** Ask the backend for a code. Rejecting shows the message on the step. */
+  onRequestCode?: (e164: string) => Promise<void> | void
+  /** Verify it. Resolving is success — routing afterwards is the caller's. */
+  onVerifyCode?: (e164: string, code: string) => Promise<void> | void
+  onPasswordSignIn?: (identifier: string, password: string) => Promise<void> | void
+  /** Countries floated to the top of the picker. */
+  priority?: string[]
+  /** Seconds before "send it again" is offered. */
+  resendSeconds?: number
+}
+
+const messageOf = (error: unknown, fallback: string) =>
+  error instanceof Error && error.message.trim() ? error.message.trim() : fallback
+
+/**
+ * The whole sign-in, ready to mount: phone → code, or email → password, with
+ * the resend countdown, the loading and error states, and the step machine
+ * already wired.
+ *
+ * The caller supplies three async functions and gets a working screen. Nothing
+ * here knows about a router or an API client — `onVerifyCode` resolving *is*
+ * success, and where the viewer goes next is the app's decision, made in one
+ * place instead of at each of the flow's five exits.
+ *
+ * Compose `AuthScreen`, `PhoneField`, `OtpInput` and `PasswordField` by hand
+ * instead when the product's flow differs — an invite code step, a captcha, a
+ * tenant picker. This is the common shape, not the only one.
+ */
+export function SignInFlow({
+  brand,
+  className,
+  codeLength = 5,
+  copy,
+  defaultCountry = 'IR',
+  defaultMethod = 'code',
+  footer,
+  methods = ['code', 'password'],
+  onPasswordSignIn,
+  onRequestCode,
+  onVerifyCode,
+  priority = ['IR', 'AE', 'TR', 'DE', 'US', 'GB'],
+  resendSeconds = 60,
+}: SignInFlowProps) {
+  const text = { ...DEFAULT_COPY, ...copy }
+  const [method, setMethod] = useState<SignInMethod>(
+    methods.includes(defaultMethod) ? defaultMethod : methods[0],
+  )
+  const [sent, setSent] = useState(false)
+  const [country, setCountry] = useState(defaultCountry)
+  const [phone, setPhone] = useState('')
+  const [code, setCode] = useState('')
+  const [identifier, setIdentifier] = useState('')
+  const [password, setPassword] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [countdown, setCountdown] = useState(0)
+  const verifying = useRef(false)
+
+  useEffect(() => {
+    if (countdown <= 0) return
+    const timer = window.setTimeout(() => setCountdown((seconds) => seconds - 1), 1000)
+    return () => window.clearTimeout(timer)
+  }, [countdown])
+
+  const e164 = toE164(country, phone)
+  const phoneReady = phone.replace(/\D/g, '').length >= 6
+
+  const requestCode = useCallback(
+    async (resend = false) => {
+      if (busy || (!resend && !phoneReady)) return
+      setBusy(true)
+      setError('')
+      try {
+        await onRequestCode?.(e164)
+        setSent(true)
+        setCode('')
+        setCountdown(resendSeconds)
+      } catch (failure) {
+        setError(messageOf(failure, text.sendCode))
+      } finally {
+        setBusy(false)
+      }
+    },
+    [busy, e164, onRequestCode, phoneReady, resendSeconds, text.sendCode],
+  )
+
+  const verify = useCallback(
+    async (value: string) => {
+      // Auto-submit on the last digit and the button can fire together; the
+      // guard is a ref because both land in the same render.
+      if (verifying.current || value.length !== codeLength) return
+      verifying.current = true
+      setBusy(true)
+      setError('')
+      try {
+        await onVerifyCode?.(e164, value)
+      } catch (failure) {
+        setError(messageOf(failure, text.verify))
+        setCode('')
+      } finally {
+        verifying.current = false
+        setBusy(false)
+      }
+    },
+    [codeLength, e164, onVerifyCode, text.verify],
+  )
+
+  const signInWithPassword = useCallback(async () => {
+    if (busy || !identifier.trim() || !password) return
+    setBusy(true)
+    setError('')
+    try {
+      await onPasswordSignIn?.(identifier.trim(), password)
+    } catch (failure) {
+      setError(messageOf(failure, text.signIn))
+    } finally {
+      setBusy(false)
+    }
+  }, [busy, identifier, onPasswordSignIn, password, text.signIn])
+
+  const switcher =
+    methods.length > 1 ? (
+      <Button
+        onClick={() => {
+          setMethod(method === 'code' ? 'password' : 'code')
+          setError('')
+        }}
+        size="sm"
+        variant="ghost"
+      >
+        {method === 'code' ? text.usePassword : text.usePhone}
+      </Button>
+    ) : null
+
+  const notice = error ? <Banner tone="danger">{error}</Banner> : null
+
+  if (method === 'password') {
+    return (
+      <AuthScreen
+        action={{
+          disabled: !identifier.trim() || !password,
+          label: text.signIn,
+          loading: busy,
+          onClick: () => void signInWithPassword(),
+        }}
+        brand={brand}
+        className={className}
+        footer={
+          <>
+            {switcher}
+            {footer}
+          </>
+        }
+        subtitle={text.passwordSubtitle}
+        title={text.passwordTitle}
+      >
+        {notice}
+        <Input
+          autoComplete="username"
+          label={text.identifierLabel}
+          onChange={(event) => setIdentifier(event.target.value)}
+          type="email"
+          value={identifier}
+        />
+        <PasswordField
+          autoComplete="current-password"
+          label={text.passwordLabel}
+          onChange={(event) => setPassword(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') void signInWithPassword()
+          }}
+          value={password}
+        />
+      </AuthScreen>
+    )
+  }
+
+  if (sent) {
+    return (
+      <AuthScreen
+        action={{
+          disabled: code.length !== codeLength,
+          label: text.verify,
+          loading: busy,
+          onClick: () => void verify(code),
+        }}
+        back={{
+          label: text.back,
+          onClick: () => {
+            setSent(false)
+            setCode('')
+            setError('')
+          },
+        }}
+        className={className}
+        footer={
+          <>
+            {countdown > 0 ? (
+              <p>{text.resendIn(countdown)}</p>
+            ) : (
+              <Button onClick={() => void requestCode(true)} size="sm" variant="ghost">
+                {text.resend}
+              </Button>
+            )}
+            {footer}
+          </>
+        }
+        subtitle={text.codeSubtitle(e164)}
+        title={text.codeTitle}
+      >
+        {notice}
+        <OtpInput
+          autoFocus
+          label={text.codeLabel}
+          length={codeLength}
+          onChange={setCode}
+          onComplete={(value) => void verify(value)}
+          value={code}
+        />
+      </AuthScreen>
+    )
+  }
+
+  return (
+    <AuthScreen
+      action={{
+        disabled: !phoneReady,
+        label: text.sendCode,
+        loading: busy,
+        onClick: () => void requestCode(),
+      }}
+      brand={brand}
+      className={className}
+      footer={
+        <>
+          {switcher}
+          {footer}
+        </>
+      }
+      subtitle={text.phoneSubtitle}
+      title={text.phoneTitle}
+    >
+      {notice}
+      <PhoneField
+        country={country}
+        label={text.phoneLabel}
+        onChange={setPhone}
+        onCountryChange={setCountry}
+        onSubmit={() => void requestCode()}
+        priority={priority}
+        value={phone}
+      />
+    </AuthScreen>
+  )
+}

package/src/components/slider.tsx

@@ -0,0 +1,50 @@
+import type { CSSProperties, InputHTMLAttributes } from 'react'
+import { cn } from '@/lib/cn'
+
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  label?: string
+  max?: number
+  min?: number
+  /** Rendered beneath the track, evenly spaced — e.g. ['1M', '8M', '15M']. */
+  scale?: string[]
+  value: number
+}
+
+export function Slider({
+  className,
+  label,
+  max = 100,
+  min = 0,
+  scale,
+  step = 1,
+  value,
+  ...props
+}: SliderProps) {
+  const progress = max === min ? 0 : ((value - min) / (max - min)) * 100
+
+  return (
+    <div className="nim-field">
+      {label ? <span className="nim-field__label">{label}</span> : null}
+      <input
+        aria-label={label}
+        className={cn('nim-slider', className)}
+        max={max}
+        min={min}
+        step={step}
+        style={{ '--nim-slider-progress': `${progress}%` } as CSSProperties}
+        type="range"
+        value={value}
+        {...props}
+      />
+      {scale ? (
+        <div aria-hidden="true" className="nim-inline" style={{ justifyContent: 'space-between' }}>
+          {scale.map((mark) => (
+            <span className="nim-caption" key={mark}>
+              {mark}
+            </span>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  )
+}