@mohou/ui 1.0.20

package/src/composites/slider-range.tsx

@@ -0,0 +1,36 @@
+
+import { Slider } from '@mohou/ui/components/slider'
+
+/**
+ * Two-thumb range slider.
+ * @when min/max numeric filters.
+ * @example
+ * <SliderRange min={0} max={100} value={[10, 40]} onChange={(v) => set(v)} />
+ * @family Form
+ */
+export function SliderRange({
+  value = [20, 80],
+  onChange,
+  min = 0,
+  max = 100,
+}: {
+  value?: number[]
+  onChange?: (value: number[]) => void
+  min?: number
+  max?: number
+}) {
+  return (
+    <div className="w-56" data-testid="slider-range">
+      <Slider
+        value={value}
+        min={min}
+        max={max}
+        onValueChange={next => onChange?.(Array.from(next as number[]))}
+      />
+      <div className="mt-1 flex justify-between text-xs text-muted-foreground">
+        <span>{value[0]}</span>
+        <span>{value[1]}</span>
+      </div>
+    </div>
+  )
+}

package/src/composites/tag-input.tsx

@@ -0,0 +1,62 @@
+
+import * as React from 'react'
+import { X } from 'lucide-react'
+
+import { Badge } from '@mohou/ui/components/badge'
+import { Input } from '@mohou/ui/components/input'
+import { useLabels } from '@mohou/ui/i18n/context'
+
+/**
+ * Chip-style multi-value text input.
+ * @when Labels/owners where free values are allowed (`Transfer` when choosing from a fixed pool).
+ * @example
+ * <TagInput value={tags} onChange={(v) => set(v)} />
+ * @family Form
+ */
+export function TagInput({
+  value = [],
+  onChange,
+  placeholder,
+}: {
+  value?: string[]
+  onChange?: (value: string[]) => void
+  placeholder?: string
+}) {
+  const t = useLabels('tagInput')
+  const [draft, setDraft] = React.useState('')
+  const add = () => {
+    const next = draft.trim()
+    if (!next || value.includes(next)) return
+    onChange?.([...value, next])
+    setDraft('')
+  }
+  return (
+    <div className="flex flex-col gap-2" data-testid="tag-input">
+      <div className="flex flex-wrap gap-1">
+        {value.map(tag => (
+          <Badge key={tag} variant="secondary" className="gap-1">
+            {tag}
+            <button
+              type="button"
+              aria-label={`Remove ${tag}`}
+              onClick={() => onChange?.(value.filter(item => item !== tag))}
+            >
+              <X className="size-3" />
+            </button>
+          </Badge>
+        ))}
+      </div>
+      <Input
+        value={draft}
+        placeholder={placeholder ?? t.placeholder}
+        onChange={event => setDraft(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault()
+            add()
+          }
+        }}
+      />
+    </div>
+  )
+}

package/src/composites/time-picker.tsx

@@ -0,0 +1,208 @@
+
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+
+import { Button } from '@mohou/ui/components/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@mohou/ui/components/popover'
+import { cn } from '@mohou/ui/lib/utils'
+
+const ITEM_H = 36
+
+function pad(n: number) {
+  return String(n).padStart(2, '0')
+}
+
+function parseTime(value: string) {
+  const match = /^(\d{1,2}):(\d{1,2})$/.exec(value)
+  if (!match) return { hours: 0, minutes: 0 }
+  return {
+    hours: Math.min(23, Number(match[1])),
+    minutes: Math.min(59, Number(match[2])),
+  }
+}
+
+/**
+ * Column wheel for picking a time value.
+ * @family Calendar & date
+ * @when Inside a time picker where tapping a list beats typing. Prefer `TimePicker` for a normal field.
+ */
+export function TimeWheel({
+  values,
+  value,
+  onChange,
+  testId,
+  visible = 5,
+  className,
+}: {
+  values: number[]
+  value: number
+  onChange: (value: number) => void
+  testId: string
+  visible?: number
+  className?: string
+}) {
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const padPx = ITEM_H * Math.floor((visible - 1) / 2)
+  const index = Math.max(0, values.indexOf(value))
+  const armed = React.useRef(false)
+  const timer = React.useRef<number>(0)
+
+  const jump = React.useCallback((i: number) => {
+    const list = listRef.current
+    if (!list || list.clientHeight === 0) return
+    list.scrollTop = i * ITEM_H
+  }, [])
+
+  React.useLayoutEffect(() => {
+    armed.current = false
+    const list = listRef.current
+    if (!list) return
+    jump(index)
+    const ro = new ResizeObserver(() => jump(index))
+    ro.observe(list)
+    const t1 = window.setTimeout(() => jump(index), 0)
+    const t2 = window.setTimeout(() => jump(index), 32)
+    return () => {
+      ro.disconnect()
+      window.clearTimeout(t1)
+      window.clearTimeout(t2)
+    }
+  }, [index, jump])
+
+  const commit = () => {
+    const list = listRef.current
+    if (!list || !armed.current) return
+    const next = Math.min(
+      values.length - 1,
+      Math.max(0, Math.round(list.scrollTop / ITEM_H)),
+    )
+    jump(next)
+    const picked = values[next]
+    if (picked != null && picked !== value) onChange(picked)
+  }
+
+  return (
+    <div
+      className={cn('relative w-14', className)}
+      style={{ height: ITEM_H * visible }}
+    >
+      <div className="bg-muted pointer-events-none absolute inset-x-0 top-1/2 z-0 h-9 -translate-y-1/2 rounded-md" />
+      <div
+        ref={listRef}
+        data-testid={testId}
+        className="relative z-10 h-full overflow-y-auto [overflow-anchor:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        style={{
+          WebkitMaskImage:
+            'linear-gradient(to bottom, transparent, black 18%, black 82%, transparent)',
+          maskImage:
+            'linear-gradient(to bottom, transparent, black 18%, black 82%, transparent)',
+        }}
+        onPointerDown={() => {
+          armed.current = true
+        }}
+        onScroll={() => {
+          if (!armed.current) return
+          window.clearTimeout(timer.current)
+          timer.current = window.setTimeout(commit, 80)
+        }}
+      >
+        <div style={{ height: padPx }} />
+        {values.map((item, i) => (
+          <button
+            key={item}
+            type="button"
+            data-selected={item === value || undefined}
+            className={cn(
+              'flex w-full items-center justify-center text-sm tabular-nums',
+              item === value
+                ? 'font-medium text-foreground'
+                : 'text-muted-foreground'
+            )}
+            style={{ height: ITEM_H }}
+            onClick={() => {
+              jump(i)
+              onChange(item)
+            }}
+          >
+            {pad(item)}
+          </button>
+        ))}
+        <div style={{ height: padPx }} />
+      </div>
+    </div>
+  )
+}
+
+export type TimePickerProps = {
+  value?: string
+  onChange?: (value: string) => void
+  disabled?: boolean
+  className?: string
+}
+
+/** `value` is `HH:mm` (24h).
+ * @when Clock-only fields. `value` is a string, not a Date.
+ * @example
+ * <TimePicker value="09:30" onChange={(v) => set(v)} />
+ * @family Calendar & date
+ */
+export function TimePicker({
+  value = '',
+  onChange,
+  disabled,
+  className,
+}: TimePickerProps) {
+  const [open, setOpen] = React.useState(false)
+  const parsed = parseTime(value)
+  const [hours, setHours] = React.useState(parsed.hours)
+  const [minutes, setMinutes] = React.useState(parsed.minutes)
+  React.useEffect(() => {
+    const next = parseTime(value)
+    setHours(next.hours)
+    setMinutes(next.minutes)
+  }, [value])
+  const emit = (nextHours: number, nextMinutes: number) => {
+    setHours(nextHours)
+    setMinutes(nextMinutes)
+    onChange?.(`${pad(nextHours)}:${pad(nextMinutes)}`)
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        disabled={disabled}
+        render={
+          <Button
+            variant="outline"
+            data-testid="time-picker"
+            className={cn('w-[120px] justify-between font-normal tabular-nums', className)}
+          />
+        }
+      >
+        <span>{value || '--:--'}</span>
+        <ChevronDown className="size-3.5 opacity-50" />
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-auto p-2">
+        <div className="flex items-center gap-1">
+          <TimeWheel
+            testId="time-picker-hour"
+            values={Array.from({ length: 24 }, (_, i) => i)}
+            value={hours}
+            onChange={h => emit(h, minutes)}
+          />
+          <span className="text-muted-foreground pb-0.5 text-sm font-medium">:</span>
+          <TimeWheel
+            testId="time-picker-minute"
+            values={Array.from({ length: 60 }, (_, i) => i)}
+            value={minutes}
+            onChange={m => emit(hours, m)}
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/composites/time-range-picker.tsx

@@ -0,0 +1,31 @@
+
+import { TimePicker } from '@mohou/ui/composites/time-picker'
+import { useLabels } from '@mohou/ui/i18n/context'
+
+export type TimeRange = { start: string; end: string }
+
+/**
+ * From/to time of day.
+ * @when Daily windows (maintenance 02:00–04:00).
+ * @example
+ * <TimeRangePicker onChange={(r) => set(r)} />
+ * @family Calendar & date
+ */
+export function TimeRangePicker({
+  value,
+  onChange,
+}: {
+  value?: TimeRange
+  onChange?: (value: TimeRange) => void
+}) {
+  const t = useLabels('timeRange')
+  const start = value?.start ?? ''
+  const end = value?.end ?? ''
+  return (
+    <div className="flex items-center gap-2" data-testid="time-range-picker">
+      <TimePicker value={start} onChange={next => onChange?.({ start: next, end })} />
+      <span className="text-muted-foreground text-xs">{t.to}</span>
+      <TimePicker value={end} onChange={next => onChange?.({ start, end: next })} />
+    </div>
+  )
+}

package/src/composites/timezone-select.tsx

@@ -0,0 +1,257 @@
+
+import * as React from 'react'
+import { ChevronsUpDown } from 'lucide-react'
+
+import { Button } from '@mohou/ui/components/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@mohou/ui/components/command'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@mohou/ui/components/popover'
+import { useLabels } from '@mohou/ui/i18n/context'
+import { cn } from '@mohou/ui/lib/utils'
+
+const COMMON_IDS = [
+  'UTC',
+  'Asia/Shanghai',
+  'Asia/Singapore',
+  'Asia/Tokyo',
+  'Asia/Hong_Kong',
+  'Europe/London',
+  'Europe/Paris',
+  'America/New_York',
+  'America/Los_Angeles',
+  'Australia/Sydney',
+] as const
+
+const ALIASES: Record<string, string> = {
+  UTC: 'gmt zulu',
+  'Asia/Shanghai': 'china beijing cst prc',
+  'Asia/Singapore': 'sg',
+  'Asia/Tokyo': 'japan jst',
+  'Asia/Hong_Kong': 'hk hongkong',
+  'Europe/London': 'uk gmt bst',
+  'Europe/Paris': 'france cet cest',
+  'America/New_York': 'nyc eastern est edt usa',
+  'America/Los_Angeles': 'pacific pst pdt la california usa',
+  'Australia/Sydney': 'aest australia',
+}
+
+export type ZoneInfo = {
+  id: string
+  city: string
+  region: string
+  offset: string
+  search: string
+}
+
+const ianaZones =
+  typeof Intl !== 'undefined' && 'supportedValuesOf' in Intl
+    ? Intl.supportedValuesOf('timeZone')
+    : ['UTC']
+
+function cityName(zone: string) {
+  if (zone === 'UTC' || zone === 'Etc/UTC') return 'UTC'
+  return zone.split('/').pop()?.replaceAll('_', ' ') ?? zone
+}
+
+function offsetLabel(zone: string) {
+  try {
+    return (
+      new Intl.DateTimeFormat('en-US', {
+        timeZone: zone,
+        timeZoneName: 'shortOffset',
+      })
+        .formatToParts(new Date())
+        .find(part => part.type === 'timeZoneName')?.value ?? ''
+    )
+  } catch {
+    return ''
+  }
+}
+
+let zoneCache: ZoneInfo[] | null = null
+
+export function listTimezones(): ZoneInfo[] {
+  if (zoneCache) return zoneCache
+  zoneCache = ianaZones.map((id) => {
+    const city = cityName(id)
+    const region = id.includes('/') ? id.slice(0, id.indexOf('/')) : id
+    const offset = offsetLabel(id)
+    const alias = ALIASES[id] ?? ''
+    return {
+      id,
+      city,
+      region,
+      offset,
+      search: `${id} ${city} ${offset} ${offset.replace('GMT', 'UTC')} ${alias}`.toLowerCase(),
+    }
+  })
+  return zoneCache
+}
+
+function localZoneId() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone
+  } catch {
+    return 'UTC'
+  }
+}
+
+function groupByRegion(zones: ZoneInfo[]) {
+  const map = new Map<string, ZoneInfo[]>()
+  for (const zone of zones) {
+    const list = map.get(zone.region)
+    if (list) list.push(zone)
+    else map.set(zone.region, [zone])
+  }
+  return [...map.entries()]
+}
+
+function ZoneItem({
+  zone,
+  selected,
+  onSelect,
+}: {
+  zone: ZoneInfo
+  selected: boolean
+  onSelect: (id: string) => void
+}) {
+  return (
+    <CommandItem
+      value={zone.id}
+      data-checked={selected || undefined}
+      onSelect={() => onSelect(zone.id)}
+    >
+      <span className="flex min-w-0 flex-1 items-baseline gap-2">
+        <span className="truncate">{zone.city}</span>
+        <span className="text-muted-foreground truncate text-[11px]">{zone.id}</span>
+      </span>
+      <span className="text-muted-foreground text-xs tabular-nums">{zone.offset}</span>
+    </CommandItem>
+  )
+}
+
+/**
+ * IANA timezone dropdown.
+ * @when Pair with `DateTimePicker` when data is UTC.
+ * @example
+ * <TimezoneSelect value={tz} onChange={(v) => set(v)} />
+ * @family Calendar & date
+ */
+export function TimezoneSelect({
+  value,
+  onChange,
+  className,
+}: {
+  value?: string | undefined
+  onChange?: (zone: string) => void
+  className?: string
+}) {
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+  const t = useLabels('timezoneSelect')
+  const zones = React.useMemo(() => listTimezones(), [])
+  const selectedId = value ?? localZoneId()
+  const selected = zones.find(zone => zone.id === selectedId)
+
+  const common = React.useMemo(() => {
+    const local = localZoneId()
+    const ids = [local, ...COMMON_IDS.filter(id => id !== local)]
+    return ids
+      .map(id => zones.find(zone => zone.id === id))
+      .filter((zone): zone is ZoneInfo => Boolean(zone))
+  }, [zones])
+
+  const matches = React.useMemo(() => {
+    const needle = query.trim().toLowerCase()
+    if (!needle) return null
+    return zones.filter(zone => zone.search.includes(needle)).slice(0, 80)
+  }, [query, zones])
+
+  const pick = (id: string) => {
+    onChange?.(id)
+    setOpen(false)
+    setQuery('')
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next)
+        if (!next) setQuery('')
+      }}
+    >
+      <PopoverTrigger
+        render={
+          <Button
+            variant="outline"
+            data-testid="timezone-select"
+            aria-label={t.aria(selected?.city ?? selectedId)}
+            className={cn('w-[240px] justify-between font-normal', className)}
+          />
+        }
+      >
+        <span className="truncate">
+          {selected?.city ?? cityName(selectedId)}
+          <span className="text-muted-foreground ml-1 text-xs tabular-nums">
+            {selected?.offset ?? offsetLabel(selectedId)}
+          </span>
+        </span>
+        <ChevronsUpDown className="size-3.5 opacity-50" />
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-[320px] overflow-hidden p-0">
+        <Command shouldFilter={false} className="h-auto overflow-hidden">
+          <CommandInput
+            placeholder={t.search}
+            value={query}
+            onValueChange={setQuery}
+            data-testid="timezone-search"
+          />
+          <CommandList className="max-h-64">
+            <CommandEmpty>{t.empty}</CommandEmpty>
+            {matches ? (
+              groupByRegion(matches).map(([region, items]) => (
+                <CommandGroup key={region} heading={region}>
+                  {items.map(zone => (
+                    <ZoneItem
+                      key={zone.id}
+                      zone={zone}
+                      selected={zone.id === selectedId}
+                      onSelect={pick}
+                    />
+                  ))}
+                </CommandGroup>
+              ))
+            ) : (
+              <CommandGroup heading={t.common}>
+                {common.map(zone => (
+                  <ZoneItem
+                    key={zone.id}
+                    zone={zone}
+                    selected={zone.id === selectedId}
+                    onSelect={pick}
+                  />
+                ))}
+              </CommandGroup>
+            )}
+          </CommandList>
+          {!matches ? (
+            <p className="text-muted-foreground border-t px-2.5 py-1.5 text-[11px]">
+              {t.typeToSearch(zones.length)}
+            </p>
+          ) : null}
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/composites/transfer.tsx

@@ -0,0 +1,58 @@
+
+import { Button } from '@mohou/ui/components/button'
+
+export type TransferItem = { id: string; label: string }
+
+/**
+ * Two-panel move-between-lists picker.
+ * @when Selecting many items from a known pool (assign users to a shift).
+ * @example
+ * <Transfer items={[{ id: "u1", label: "张三" }]} onChange={(ids) => set(ids)} />
+ * @family Form
+ */
+export function Transfer({
+  items,
+  value = [],
+  onChange,
+}: {
+  items: TransferItem[]
+  value?: string[]
+  onChange?: (value: string[]) => void
+}) {
+  const selected = new Set(value)
+  const left = items.filter(item => !selected.has(item.id))
+  const right = items.filter(item => selected.has(item.id))
+  return (
+    <div className="grid grid-cols-[1fr_auto_1fr] items-center gap-2" data-testid="transfer">
+      <ul className="h-40 overflow-auto rounded-lg border p-1 text-sm">
+        {left.map(item => (
+          <li key={item.id}>
+            <button
+              type="button"
+              className="w-full rounded-md px-2 py-1 text-left hover:bg-muted"
+              onClick={() => onChange?.([...value, item.id])}
+            >
+              {item.label}
+            </button>
+          </li>
+        ))}
+      </ul>
+      <Button variant="outline" size="icon-xs" disabled>
+        →
+      </Button>
+      <ul className="h-40 overflow-auto rounded-lg border p-1 text-sm">
+        {right.map(item => (
+          <li key={item.id}>
+            <button
+              type="button"
+              className="w-full rounded-md px-2 py-1 text-left hover:bg-muted"
+              onClick={() => onChange?.(value.filter(id => id !== item.id))}
+            >
+              {item.label}
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package/src/composites/user-picker.tsx

@@ -0,0 +1,46 @@
+
+import { Avatar, AvatarFallback } from '@mohou/ui/components/avatar'
+import { NativeSelect, NativeSelectOption } from '@mohou/ui/components/native-select'
+import { useLabels } from '@mohou/ui/i18n/context'
+
+export type UserOption = { id: string; name: string }
+
+/**
+ * Pick a user from a list (avatar + name).
+ * @when Assignee/owner fields; you supply the user list.
+ * @example
+ * <UserPicker users={[{ id: "u1", name: "张三" }]} onChange={(id) => set(id)} />
+ * @family Form
+ */
+export function UserPicker({
+  users,
+  value,
+  onChange,
+}: {
+  users: UserOption[]
+  value?: string
+  onChange?: (id: string) => void
+}) {
+  const t = useLabels('userPicker')
+  const selected = users.find(user => user.id === value)
+  return (
+    <div className="flex items-center gap-2" data-testid="user-picker">
+      <Avatar className="size-6">
+        <AvatarFallback className="text-[10px]">
+          {(selected?.name ?? '?').slice(0, 2).toUpperCase()}
+        </AvatarFallback>
+      </Avatar>
+      <NativeSelect
+        value={value ?? ''}
+        onChange={event => onChange?.(event.target.value)}
+      >
+        <NativeSelectOption value="">{t.placeholder}</NativeSelectOption>
+        {users.map(user => (
+          <NativeSelectOption key={user.id} value={user.id}>
+            {user.name}
+          </NativeSelectOption>
+        ))}
+      </NativeSelect>
+    </div>
+  )
+}