@nim.zone/ui 0.6.0

package/src/components/typography.tsx

@@ -0,0 +1,65 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react'
+import { cn } from '@/lib/cn'
+
+interface TextProps extends HTMLAttributes<HTMLElement> {
+  as?: ElementType
+  children: ReactNode
+}
+
+/** The largest role: page-opening statements only, one per screen. */
+export function Display({ as: Component = 'h1', children, className, ...props }: TextProps) {
+  return (
+    <Component className={cn('nim-display', className)} {...props}>
+      {children}
+    </Component>
+  )
+}
+
+export function Title({
+  as: Component = 'h2',
+  children,
+  className,
+  size = 'lg',
+  ...props
+}: TextProps & { size?: 'lg' | 'md' }) {
+  return (
+    <Component className={cn('nim-title', size === 'md' && 'nim-title--md', className)} {...props}>
+      {children}
+    </Component>
+  )
+}
+
+export function Body({
+  as: Component = 'p',
+  children,
+  className,
+  size = 'md',
+  ...props
+}: TextProps & { size?: 'md' | 'sm' }) {
+  return (
+    <Component className={cn('nim-body', size === 'sm' && 'nim-body--sm', className)} {...props}>
+      {children}
+    </Component>
+  )
+}
+
+/** Mono/uppercase in Ledger, sentence case in Vlora — the theme decides. */
+export function Label({ as: Component = 'span', children, className, ...props }: TextProps) {
+  return (
+    <Component className={cn('nim-label', className)} {...props}>
+      {children}
+    </Component>
+  )
+}
+
+export function Caption({ as: Component = 'p', children, className, ...props }: TextProps) {
+  return (
+    <Component className={cn('nim-caption', className)} {...props}>
+      {children}
+    </Component>
+  )
+}
+
+export function Rule({ className, ...props }: HTMLAttributes<HTMLHRElement>) {
+  return <hr className={cn('nim-rule', className)} {...props} />
+}

package/src/components/wizard.tsx

@@ -0,0 +1,192 @@
+import { useCallback, useState } from 'react'
+import type { ReactNode } from 'react'
+import { Button } from '@/components/button'
+import { IconButton } from '@/components/icon-button'
+import { cn } from '@/lib/cn'
+
+export interface WizardStep {
+  /** The step itself. A function receives nothing — the caller already holds
+      the answers, because they are the app's, not the wizard's. */
+  content: ReactNode
+  /** Blocks the CTA until the step is answered. */
+  canContinue?: boolean
+  /** Overrides the CTA label on this step alone. */
+  continueLabel?: string
+  id: string
+  /** The one thing being asked. Kept short: a wizard step is a question. */
+  question?: ReactNode
+  subtitle?: ReactNode
+}
+
+export interface WizardProps {
+  className?: string
+  continueLabel: string
+  /** Label on the last step. */
+  finishLabel: string
+  labels?: { back: string; close: string; step: (index: number, total: number) => string }
+  onClose?: () => void
+  /** Fired from the last step's CTA. */
+  onDone: () => void
+  /** Every step change, including backwards — for analytics and autosave. */
+  onStep?: (index: number) => void
+  steps: WizardStep[]
+}
+
+const DEFAULT_LABELS = {
+  back: 'Back',
+  close: 'Close',
+  step: (index: number, total: number) => `Step ${index + 1} of ${total}`,
+}
+
+/**
+ * A short, one-question-per-screen flow: mood → cause → note, or any other
+ * sequence a viewer walks once and abandons easily.
+ *
+ * The step index is the wizard's; the answers are not. A wizard that owned the
+ * answers would have to know their shape, and every product's are different —
+ * so each step is given its content and reports back through `canContinue`,
+ * which is the only thing the shell needs to know.
+ *
+ * Progress is dots rather than a bar: a bar implies a percentage of work done,
+ * and three questions are three questions. The close control is always present
+ * — a flow the viewer cannot leave is a trap, and leaving is the most common
+ * thing anyone does with one of these.
+ */
+export function Wizard({
+  className,
+  continueLabel,
+  finishLabel,
+  labels,
+  onClose,
+  onDone,
+  onStep,
+  steps,
+}: WizardProps) {
+  const text = { ...DEFAULT_LABELS, ...labels }
+  const [index, setIndex] = useState(0)
+  const step = steps[Math.min(index, steps.length - 1)]
+  const last = index === steps.length - 1
+
+  const goTo = useCallback(
+    (next: number) => {
+      setIndex(next)
+      onStep?.(next)
+    },
+    [onStep],
+  )
+
+  return (
+    <section className={cn('nim-wizard', className)}>
+      <header className="nim-wizard__bar">
+        <span className="nim-wizard__slot">
+          {index > 0 ? (
+            <IconButton label={text.back} name="chevron-back" onClick={() => goTo(index - 1)} size="sm" />
+          ) : null}
+        </span>
+
+        <ol aria-label={text.step(index, steps.length)} className="nim-wizard__dots">
+          {steps.map((item, dot) => (
+            <li
+              className="nim-wizard__dot"
+              data-done={dot < index ? 'true' : undefined}
+              data-on={dot === index ? 'true' : undefined}
+              key={item.id}
+            />
+          ))}
+        </ol>
+
+        <span className="nim-wizard__slot">
+          {onClose ? <IconButton label={text.close} name="close" onClick={onClose} size="sm" /> : null}
+        </span>
+      </header>
+
+      {step.question ? (
+        <div className="nim-wizard__ask">
+          <h1 className="nim-wizard__question">{step.question}</h1>
+          {step.subtitle ? <p className="nim-wizard__subtitle">{step.subtitle}</p> : null}
+        </div>
+      ) : null}
+
+      <div className="nim-wizard__content">{step.content}</div>
+
+      <footer className="nim-wizard__foot">
+        <Button
+          disabled={step.canContinue === false}
+          fullWidth
+          onClick={() => (last ? onDone() : goTo(index + 1))}
+          size="lg"
+          variant="accent"
+        >
+          {step.continueLabel ?? (last ? finishLabel : continueLabel)}
+        </Button>
+      </footer>
+    </section>
+  )
+}
+
+export interface ChoiceGridOption {
+  disabled?: boolean
+  icon?: ReactNode
+  id: string
+  label: ReactNode
+}
+
+export interface ChoiceGridProps {
+  className?: string
+  /** Cap a multi-select. Options past the cap disable rather than disappear,
+      so the grid does not reflow under the viewer's finger. */
+  max?: number
+  multiple?: boolean
+  onChange: (selected: string[]) => void
+  options: ChoiceGridOption[]
+  selected: string[]
+}
+
+/**
+ * The grid of icon tiles a wizard step is usually made of.
+ *
+ * Single-select renders radios and multi-select renders checkboxes — stated in
+ * ARIA rather than implied by how many are lit, because "pick one" and "pick
+ * any" are different promises and only one of them is visible in a grid.
+ */
+export function ChoiceGrid({
+  className,
+  max,
+  multiple = false,
+  onChange,
+  options,
+  selected,
+}: ChoiceGridProps) {
+  const full = multiple && max !== undefined && selected.length >= max
+
+  const toggle = (id: string) => {
+    if (!multiple) {
+      onChange([id])
+      return
+    }
+    onChange(selected.includes(id) ? selected.filter((item) => item !== id) : [...selected, id])
+  }
+
+  return (
+    <div className={cn('nim-choice-grid', className)} role={multiple ? 'group' : 'radiogroup'}>
+      {options.map((option) => {
+        const on = selected.includes(option.id)
+        return (
+          <button
+            aria-checked={on}
+            className="nim-choice-grid__tile"
+            data-on={on ? 'true' : undefined}
+            disabled={option.disabled || (full && !on)}
+            key={option.id}
+            onClick={() => toggle(option.id)}
+            role={multiple ? 'checkbox' : 'radio'}
+            type="button"
+          >
+            {option.icon ? <span className="nim-choice-grid__icon">{option.icon}</span> : null}
+            <span className="nim-choice-grid__label">{option.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/index.ts

@@ -0,0 +1,216 @@
+/**
+ * nim — public surface.
+ *
+ * Importing the kit brings its stylesheet with it, so a consumer can never end
+ * up with nim markup and no nim styles. Apps that need to control CSS order
+ * themselves can import `nim/styles.css` explicitly instead.
+ *
+ * Wrap the tree in <NimProvider> to pick a style, colourway, scheme, and
+ * direction.
+ */
+
+import '@/theme/index.css'
+
+export { ActivityFeed, AdminShell, DetailHeader, FilterChips } from '@/components/admin-shell'
+export type {
+  ActivityEvent,
+  ActivityFeedProps,
+  AdminNavGroup,
+  AdminNavItem,
+  AdminShellProps,
+  DetailHeaderProps,
+  FilterChip,
+  FilterChipsProps,
+} from '@/components/admin-shell'
+
+export { AppShell } from '@/components/app-shell'
+export type { AppShellProps } from '@/components/app-shell'
+
+export { AuthScreen } from '@/components/auth-screen'
+export type { AuthScreenProps } from '@/components/auth-screen'
+
+export { Avatar } from '@/components/avatar'
+export type { AvatarProps, AvatarSize } from '@/components/avatar'
+
+export { AvatarRing, ProfileHeader } from '@/components/profile-header'
+export type { AvatarRingProps, ProfileHeaderProps } from '@/components/profile-header'
+
+export { Badge } from '@/components/badge'
+export type { BadgeProps, BadgeSize, BadgeTone, BadgeVariant } from '@/components/badge'
+
+export { Banner } from '@/components/banner'
+export type { BannerProps, BannerTone } from '@/components/banner'
+
+export { Breadcrumb } from '@/components/breadcrumb'
+export type { BreadcrumbProps, Crumb } from '@/components/breadcrumb'
+
+export { Button } from '@/components/button'
+export type { ButtonProps, ButtonSize, ButtonVariant } from '@/components/button'
+
+export { Card } from '@/components/card'
+export type { CardPadding, CardProps, CardVariant } from '@/components/card'
+
+export { ActionBar, OptionCard, OrderSummary } from '@/components/checkout'
+export type {
+  ActionBarProps,
+  OptionCardProps,
+  OrderSummaryProps,
+  SummaryLine,
+} from '@/components/checkout'
+
+export { Chat } from '@/components/chat'
+export type { ChatAttachment, ChatMediaKind, ChatMessage, ChatProps } from '@/components/chat'
+
+export { ChatComposer } from '@/components/chat-composer'
+export type { ChatComposerProps, ChatDraft } from '@/components/chat-composer'
+
+export { Checkbox, Switch } from '@/components/choice'
+export type { CheckboxProps, SwitchProps } from '@/components/choice'
+
+export { Combobox } from '@/components/combobox'
+export type { ComboboxOption, ComboboxProps } from '@/components/combobox'
+
+export { Calendar, DateField, DatePicker } from '@/components/date-field'
+export type {
+  CalendarProps,
+  CalendarSystem,
+  DateFieldProps,
+  DatePickerProps,
+  IsoDate,
+} from '@/components/date-field'
+
+export {
+  addDays,
+  addMonths,
+  formatNumeric,
+  monthLength,
+  parseNumeric,
+  partsOf,
+  fromParts,
+  startOfMonth,
+  todayIso,
+} from '@/lib/calendars'
+export type { CalendarParts } from '@/lib/calendars'
+
+export { Dialog } from '@/components/dialog'
+export type { DialogProps } from '@/components/dialog'
+
+export { EmptyState } from '@/components/empty-state'
+export type { EmptyStateProps } from '@/components/empty-state'
+
+export { Progress, Skeleton, Spinner } from '@/components/feedback'
+export type { ProgressProps, SkeletonProps, SpinnerProps } from '@/components/feedback'
+
+export { ResourceMeter } from '@/components/resource-meter'
+export type { ResourceMeterProps, ResourceMeterTone } from '@/components/resource-meter'
+
+export { Input, Select, Textarea } from '@/components/field'
+export type { InputProps, SelectOption, SelectProps, TextareaProps } from '@/components/field'
+
+export { Icon, iconNames } from '@/components/icon'
+export type { IconName, IconProps, IconSize, IconTone } from '@/components/icon'
+
+export { IconButton } from '@/components/icon-button'
+export type { IconButtonProps, IconButtonSize, IconButtonVariant } from '@/components/icon-button'
+
+export { AppFrame, Inline, Stack } from '@/components/layout'
+
+export { List, ListRow } from '@/components/list'
+export type { ListProps, ListRowProps } from '@/components/list'
+
+export { Menu, Popover } from '@/components/menu'
+export type { MenuAction, MenuHeading, MenuItem, MenuProps, MenuSeparator, PopoverProps } from '@/components/menu'
+
+export { Onboarding } from '@/components/onboarding'
+export type { OnboardingProps, OnboardingSlide } from '@/components/onboarding'
+
+export { OtpInput } from '@/components/otp-input'
+export type { OtpInputProps } from '@/components/otp-input'
+
+export { Pagination } from '@/components/pagination'
+export type { PaginationProps } from '@/components/pagination'
+
+export { PasswordField, scorePassword } from '@/components/password-field'
+export type { PasswordFieldProps, PasswordStrength } from '@/components/password-field'
+
+export { PhoneField, toE164 } from '@/components/phone-field'
+export type { PhoneFieldProps } from '@/components/phone-field'
+
+export { PlanCard } from '@/components/plan-card'
+export type { PlanCardProps, PlanFeature } from '@/components/plan-card'
+
+export { PlanPicker } from '@/components/plan-picker'
+export type { BillingCycle, PlanOffer, PlanPickerProps } from '@/components/plan-picker'
+
+export { ProfileScreen } from '@/components/profile-screen'
+export type { ProfileRow, ProfileScreenProps, ProfileSection } from '@/components/profile-screen'
+
+export { SectionHeader } from '@/components/section-header'
+export type { SectionHeaderProps } from '@/components/section-header'
+
+export { Segmented } from '@/components/segmented'
+export type { SegmentedOption, SegmentedProps } from '@/components/segmented'
+
+export { SignInFlow } from '@/components/sign-in-flow'
+export type { SignInCopy, SignInFlowProps, SignInMethod } from '@/components/sign-in-flow'
+
+export { Sheet } from '@/components/sheet'
+export type { SheetProps } from '@/components/sheet'
+
+export { Slider } from '@/components/slider'
+export type { SliderProps } from '@/components/slider'
+
+export { Stat } from '@/components/stat'
+export type { StatProps } from '@/components/stat'
+
+export { Stepper } from '@/components/stepper'
+export type { StepperProps } from '@/components/stepper'
+
+export { TaskProgress } from '@/components/task-progress'
+export type { TaskProgressProps, TaskStep, TaskStepStatus } from '@/components/task-progress'
+
+export { Table } from '@/components/table'
+export type { SortDirection, TableColumn, TableProps } from '@/components/table'
+
+export { TabBar } from '@/components/tab-bar'
+export type { TabBarItem, TabBarProps } from '@/components/tab-bar'
+
+export { Tabs } from '@/components/tabs'
+export type { TabOption, TabsProps } from '@/components/tabs'
+
+export { NimProvider, useNim, useSchemeToggle } from '@/components/theme'
+export type {
+  NimColorway,
+  NimDirection,
+  NimProviderProps,
+  NimScheme,
+  NimStyle,
+} from '@/components/theme'
+
+export { ToastProvider, useToast } from '@/components/toast'
+export type { ToastOptions, ToastTone } from '@/components/toast'
+
+export { Tooltip } from '@/components/tooltip'
+export type { TooltipProps } from '@/components/tooltip'
+
+export { ChoiceGrid, Wizard } from '@/components/wizard'
+export type {
+  ChoiceGridOption,
+  ChoiceGridProps,
+  WizardProps,
+  WizardStep,
+} from '@/components/wizard'
+
+export { Body, Caption, Display, Label, Rule, Title } from '@/components/typography'
+
+export {
+  COUNTRIES,
+  countryByDial,
+  countryByIso2,
+  countryNamer,
+  toAsciiDigits,
+} from '@/lib/countries'
+export type { Country } from '@/lib/countries'
+
+export { cn } from '@/lib/cn'
+export type { ClassValue } from '@/lib/cn'