@monkey-mini-app/ui 0.1.0

package/dist/src/composites/slider-range.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { Slider } from "@monkey-mini-app/ui/components/slider"
+
+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/dist/src/composites/tag-input.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import { X } from "lucide-react"
+
+import { Badge } from "@monkey-mini-app/ui/components/badge"
+import { Input } from "@monkey-mini-app/ui/components/input"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+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/dist/src/composites/time-picker.tsx

@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@monkey-mini-app/ui/components/popover"
+import { cn } from "@monkey-mini-app/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])),
+  }
+}
+
+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). */
+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/dist/src/composites/time-range-picker.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { TimePicker } from "@monkey-mini-app/ui/composites/time-picker"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export type TimeRange = { start: string; end: string }
+
+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/dist/src/composites/timezone-select.tsx

@@ -0,0 +1,251 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown } from "lucide-react"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@monkey-mini-app/ui/components/command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@monkey-mini-app/ui/components/popover"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+import { cn } from "@monkey-mini-app/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>
+  )
+}
+
+export function TimezoneSelect({
+  value,
+  onChange,
+  className,
+}: {
+  value?: string
+  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/dist/src/composites/transfer.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import { Button } from "@monkey-mini-app/ui/components/button"
+
+export type TransferItem = { id: string; label: string }
+
+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/dist/src/composites/user-picker.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { Avatar, AvatarFallback } from "@monkey-mini-app/ui/components/avatar"
+import { NativeSelect, NativeSelectOption } from "@monkey-mini-app/ui/components/native-select"
+import { useLabels } from "@monkey-mini-app/ui/i18n/context"
+
+export type UserOption = { id: string; name: string }
+
+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>
+  )
+}

package/dist/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}