@stampui/blocks 1.0.0

package/src/components/core/menubar.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import * as React from "react"
+import { cx } from "@/lib/cx"
+
+// ── Context ────────────────────────────────────────────────────────────────
+
+interface MenubarCtx { open: string | null; setOpen: (id: string | null) => void }
+const MenubarContext = React.createContext<MenubarCtx>({ open: null, setOpen: () => {} })
+
+// ── Root ──────────────────────────────────────────────────────────────────
+
+export interface MenubarProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function Menubar({ className, children, ...props }: MenubarProps) {
+  const [open, setOpen] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (!open) return
+    const close = () => setOpen(null)
+    document.addEventListener("click", close)
+    return () => document.removeEventListener("click", close)
+  }, [open])
+
+  return (
+    <MenubarContext.Provider value={{ open, setOpen }}>
+      <div
+        role="menubar"
+        className={cx("flex items-center gap-1 rounded-lg border border-border bg-background p-1", className)}
+        {...props}
+      >
+        {children}
+      </div>
+    </MenubarContext.Provider>
+  )
+}
+
+// ── Menu ──────────────────────────────────────────────────────────────────
+
+export interface MenubarMenuProps { id: string; trigger: React.ReactNode; children: React.ReactNode }
+
+export function MenubarMenu({ id, trigger, children }: MenubarMenuProps) {
+  const { open, setOpen } = React.useContext(MenubarContext)
+  const isOpen = open === id
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-expanded={isOpen}
+        onClick={(e) => { e.stopPropagation(); setOpen(isOpen ? null : id) }}
+        className={cx(
+          "flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors select-none",
+          isOpen
+            ? "bg-surface-2 text-foreground"
+            : "text-muted-foreground hover:bg-surface-2 hover:text-foreground"
+        )}
+      >
+        {trigger}
+      </button>
+
+      {isOpen && (
+        <div
+          role="menu"
+          onClick={(e) => e.stopPropagation()}
+          className="absolute left-0 top-full mt-1 z-50 min-w-40 rounded-lg border border-border bg-background p-1 shadow-lg"
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Item ──────────────────────────────────────────────────────────────────
+
+export interface MenubarItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  inset?: boolean
+  shortcut?: string
+}
+
+export function MenubarItem({ className, children, inset, shortcut, ...props }: MenubarItemProps) {
+  const { setOpen } = React.useContext(MenubarContext)
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={(e) => { props.onClick?.(e); setOpen(null) }}
+      className={cx(
+        "flex w-full items-center justify-between rounded-md px-2 py-1.5 text-sm text-foreground",
+        "transition-colors hover:bg-surface-2 focus-visible:bg-surface-2 outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        inset && "pl-8",
+        className
+      )}
+      {...props}
+    >
+      <span>{children}</span>
+      {shortcut && <span className="text-xs text-muted-foreground font-mono">{shortcut}</span>}
+    </button>
+  )
+}
+
+// ── Separator ─────────────────────────────────────────────────────────────
+
+export function MenubarSeparator({ className }: { className?: string }) {
+  return <div role="separator" className={cx("my-1 h-px bg-border", className)} />
+}
+
+// ── Label ─────────────────────────────────────────────────────────────────
+
+export function MenubarLabel({ className, children }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cx("px-2 py-1 text-xs font-semibold text-muted-foreground", className)}>
+      {children}
+    </div>
+  )
+}

package/src/components/core/multi-select.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import * as React from "react"
+import * as RadixPopover from "@radix-ui/react-popover"
+import { Check, ChevronDown, X } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface MultiSelectOption {
+  label: string
+  value: string
+  disabled?: boolean
+}
+
+export interface MultiSelectProps {
+  options: MultiSelectOption[]
+  value?: string[]
+  onValueChange?: (value: string[]) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+  maxDisplay?: number
+}
+
+export function MultiSelect({
+  options,
+  value = [],
+  onValueChange,
+  placeholder = "Select options...",
+  disabled,
+  className,
+  maxDisplay = 3,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false)
+  const listId = React.useId()
+
+  function toggle(optionValue: string) {
+    if (!onValueChange) return
+    if (value.includes(optionValue)) {
+      onValueChange(value.filter((v) => v !== optionValue))
+    } else {
+      onValueChange([...value, optionValue])
+    }
+  }
+
+  function remove(optionValue: string, e: React.MouseEvent) {
+    e.stopPropagation()
+    onValueChange?.(value.filter((v) => v !== optionValue))
+  }
+
+  const selectedLabels = value
+    .map((v) => options.find((o) => o.value === v)?.label)
+    .filter(Boolean) as string[]
+
+  const visibleLabels = selectedLabels.slice(0, maxDisplay)
+  const overflow = selectedLabels.length - maxDisplay
+
+  return (
+    <RadixPopover.Root open={open} onOpenChange={setOpen}>
+      <RadixPopover.Trigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-controls={listId}
+          aria-label={selectedLabels.length ? selectedLabels.join(", ") : placeholder}
+          className={cx(
+            "flex min-h-9 w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-sm outline-none",
+            "hover:border-border-strong transition-colors text-left",
+            "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+        >
+          <div className="flex flex-1 flex-wrap gap-1">
+            {selectedLabels.length === 0 ? (
+              <span className="text-muted-foreground">{placeholder}</span>
+            ) : (
+              <>
+                {visibleLabels.map((label, i) => (
+                  <span
+                    key={value[i]}
+                    className="inline-flex items-center gap-1 rounded-md border border-border bg-surface px-2 py-0.5 text-xs font-medium"
+                  >
+                    {label}
+                    <button
+                      type="button"
+                      aria-label={`Remove ${label}`}
+                      onClick={(e) => remove(value[i], e)}
+                      className="text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </span>
+                ))}
+                {overflow > 0 && (
+                  <span className="inline-flex items-center rounded-md bg-surface-3 px-2 py-0.5 text-xs text-muted-foreground">
+                    +{overflow} more
+                  </span>
+                )}
+              </>
+            )}
+          </div>
+          <ChevronDown className={cx("h-4 w-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-180")} />
+        </button>
+      </RadixPopover.Trigger>
+
+      <RadixPopover.Portal>
+        <RadixPopover.Content
+          id={listId}
+          role="listbox"
+          aria-multiselectable="true"
+          align="start"
+          sideOffset={4}
+          className="z-50 w-[var(--radix-popover-trigger-width)] max-h-60 overflow-auto rounded-xl border border-border bg-card p-1.5 shadow-lg outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+        >
+          {options.map((option) => {
+            const selected = value.includes(option.value)
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={selected}
+                disabled={option.disabled}
+                onClick={() => toggle(option.value)}
+                className={cx(
+                  "relative flex w-full cursor-default select-none items-center gap-2 rounded-lg px-2.5 py-1.5 text-sm outline-none transition-colors",
+                  "hover:bg-surface-2 focus-visible:bg-surface-2",
+                  "disabled:pointer-events-none disabled:opacity-50",
+                  selected && "font-medium text-foreground"
+                )}
+              >
+                <span className="flex h-4 w-4 items-center justify-center rounded border border-border shrink-0">
+                  {selected && <Check className="h-3 w-3" />}
+                </span>
+                {option.label}
+              </button>
+            )
+          })}
+        </RadixPopover.Content>
+      </RadixPopover.Portal>
+    </RadixPopover.Root>
+  )
+}

package/src/components/core/native-select.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+export const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, children, ...props }, ref) => (
+    <div className="relative inline-flex w-full">
+      <select
+        ref={ref}
+        className={cx(
+          "h-9 w-full appearance-none rounded-lg border border-border bg-surface-2 px-3 pr-8 py-2 text-sm text-foreground outline-none",
+          "hover:border-border-strong transition-colors",
+          "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+    </div>
+  )
+)
+NativeSelect.displayName = "NativeSelect"

package/src/components/core/navigation-menu.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDown } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+// ── Context ───────────────────────────────────────────────────────────────
+
+interface NavMenuCtx { open: string | null; setOpen: (id: string | null) => void }
+const NavMenuContext = React.createContext<NavMenuCtx>({ open: null, setOpen: () => {} })
+
+// ── Root ──────────────────────────────────────────────────────────────────
+
+export interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {}
+
+export function NavigationMenu({ className, children, ...props }: NavigationMenuProps) {
+  const [open, setOpen] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (!open) return
+    const close = () => setOpen(null)
+    document.addEventListener("click", close)
+    return () => document.removeEventListener("click", close)
+  }, [open])
+
+  return (
+    <NavMenuContext.Provider value={{ open, setOpen }}>
+      <nav
+        aria-label="Navigation"
+        className={cx("relative flex items-center gap-1", className)}
+        {...props}
+      >
+        {children}
+      </nav>
+    </NavMenuContext.Provider>
+  )
+}
+
+// ── Item (link only) ──────────────────────────────────────────────────────
+
+export interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  active?: boolean
+}
+
+export function NavigationMenuLink({ className, active, children, ...props }: NavigationMenuLinkProps) {
+  return (
+    <a
+      data-active={active || undefined}
+      className={cx(
+        "inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors",
+        active ? "text-foreground bg-surface-2" : "text-muted-foreground hover:text-foreground hover:bg-surface-2",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </a>
+  )
+}
+
+// ── Item with dropdown ────────────────────────────────────────────────────
+
+export interface NavigationMenuItemProps {
+  id: string
+  trigger: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}
+
+export function NavigationMenuItem({ id, trigger, children, className }: NavigationMenuItemProps) {
+  const { open, setOpen } = React.useContext(NavMenuContext)
+  const isOpen = open === id
+
+  return (
+    <div className={cx("relative", className)}>
+      <button
+        type="button"
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+        onClick={(e) => { e.stopPropagation(); setOpen(isOpen ? null : id) }}
+        className={cx(
+          "inline-flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-md transition-colors select-none",
+          isOpen ? "text-foreground bg-surface-2" : "text-muted-foreground hover:text-foreground hover:bg-surface-2"
+        )}
+      >
+        {trigger}
+        <ChevronDown className={cx("h-3.5 w-3.5 transition-transform duration-200", isOpen && "rotate-180")} />
+      </button>
+
+      {isOpen && (
+        <div
+          onClick={(e) => e.stopPropagation()}
+          className="absolute left-0 top-full mt-1.5 z-50 min-w-48 rounded-xl border border-border bg-background p-2 shadow-lg"
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ── Dropdown content items ────────────────────────────────────────────────
+
+export interface NavigationMenuContentItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  title: string
+  description?: string
+  icon?: React.ReactNode
+}
+
+export function NavigationMenuContentItem({ title, description, icon, className, ...props }: NavigationMenuContentItemProps) {
+  return (
+    <a
+      className={cx(
+        "flex gap-3 rounded-lg p-2.5 transition-colors hover:bg-surface-2 group cursor-pointer",
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-border bg-surface-2 text-muted-foreground group-hover:text-foreground transition-colors">
+          {icon}
+        </div>
+      )}
+      <div className="flex-1 min-w-0">
+        <div className="text-sm font-medium text-foreground">{title}</div>
+        {description && <div className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{description}</div>}
+      </div>
+    </a>
+  )
+}

package/src/components/core/number-stepper.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import * as React from "react"
+import { Minus, Plus } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+export interface NumberStepperProps {
+  value?: number
+  defaultValue?: number
+  onChange?: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  className?: string
+}
+
+export function NumberStepper({
+  value: controlledValue,
+  defaultValue = 0,
+  onChange,
+  min,
+  max,
+  step = 1,
+  disabled = false,
+  className,
+}: NumberStepperProps) {
+  const [internal, setInternal] = React.useState(defaultValue)
+  const controlled = controlledValue !== undefined
+  const value = controlled ? controlledValue : internal
+
+  const update = (next: number) => {
+    if (min !== undefined && next < min) return
+    if (max !== undefined && next > max) return
+    if (!controlled) setInternal(next)
+    onChange?.(next)
+  }
+
+  const decrement = () => update(value - step)
+  const increment = () => update(value + step)
+
+  const atMin = min !== undefined && value <= min
+  const atMax = max !== undefined && value >= max
+
+  return (
+    <div className={cx("inline-flex items-center rounded-lg border border-border bg-input overflow-hidden", className)}>
+      <button
+        type="button"
+        onClick={decrement}
+        disabled={disabled || atMin}
+        aria-label="Decrease"
+        className={cx(
+          "flex h-9 w-9 items-center justify-center text-muted-foreground transition-colors",
+          "hover:bg-surface-2 hover:text-foreground",
+          "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
+        )}
+      >
+        <Minus className="h-3.5 w-3.5" />
+      </button>
+
+      <span className="min-w-12 select-none px-2 text-center text-sm font-medium tabular-nums text-foreground">
+        {value}
+      </span>
+
+      <button
+        type="button"
+        onClick={increment}
+        disabled={disabled || atMax}
+        aria-label="Increase"
+        className={cx(
+          "flex h-9 w-9 items-center justify-center text-muted-foreground transition-colors",
+          "hover:bg-surface-2 hover:text-foreground",
+          "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-muted-foreground"
+        )}
+      >
+        <Plus className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  )
+}

package/src/components/core/pagination.tsx

@@ -0,0 +1,80 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+const itemClass = cx(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
+  "h-9 min-w-9 px-2 border border-border",
+  "text-muted-foreground hover:bg-surface-2 hover:text-foreground",
+  "disabled:pointer-events-none disabled:opacity-40",
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong"
+)
+
+const activeClass = "bg-foreground text-background border-foreground hover:bg-foreground hover:text-background"
+
+export interface PaginationProps {
+  page: number
+  totalPages: number
+  onPageChange?: (page: number) => void
+  siblingCount?: number
+  className?: string
+}
+
+function getPages(page: number, total: number, sibling: number): (number | "…")[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
+  const left = Math.max(2, page - sibling)
+  const right = Math.min(total - 1, page + sibling)
+  const pages: (number | "…")[] = [1]
+  if (left > 2) pages.push("…")
+  for (let i = left; i <= right; i++) pages.push(i)
+  if (right < total - 1) pages.push("…")
+  pages.push(total)
+  return pages
+}
+
+export function Pagination({ page, totalPages, onPageChange, siblingCount = 1, className }: PaginationProps) {
+  const pages = getPages(page, totalPages, siblingCount)
+
+  return (
+    <nav role="navigation" aria-label="Pagination" className={cx("flex items-center gap-1", className)}>
+      <button
+        type="button"
+        onClick={() => onPageChange?.(page - 1)}
+        disabled={page <= 1}
+        aria-label="Previous page"
+        className={itemClass}
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </button>
+
+      {pages.map((p, i) =>
+        p === "…" ? (
+          <span key={`ellipsis-${i}`} className={cx(itemClass, "cursor-default border-transparent")}>
+            <MoreHorizontal className="h-4 w-4" />
+          </span>
+        ) : (
+          <button
+            key={p}
+            type="button"
+            onClick={() => onPageChange?.(p as number)}
+            aria-current={p === page ? "page" : undefined}
+            aria-label={`Page ${p}`}
+            className={cx(itemClass, p === page && activeClass)}
+          >
+            {p}
+          </button>
+        )
+      )}
+
+      <button
+        type="button"
+        onClick={() => onPageChange?.(page + 1)}
+        disabled={page >= totalPages}
+        aria-label="Next page"
+        className={itemClass}
+      >
+        <ChevronRight className="h-4 w-4" />
+      </button>
+    </nav>
+  )
+}

package/src/components/core/password-input.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from "react"
+import { Eye, EyeOff } from "lucide-react"
+import { cx } from "@/lib/cx"
+
+function getStrength(password: string): 0 | 1 | 2 | 3 | 4 {
+  let score = 0
+  if (password.length >= 8) score++
+  if (password.length >= 12) score++
+  if (/[A-Z]/.test(password) && /[a-z]/.test(password)) score++
+  if (/\d/.test(password)) score++
+  if (/[^A-Za-z0-9]/.test(password)) score++
+  return Math.min(score, 4) as 0 | 1 | 2 | 3 | 4
+}
+
+const strengthConfig = [
+  { label: "", color: "bg-border" },
+  { label: "Weak", color: "bg-red-500" },
+  { label: "Fair", color: "bg-orange-400" },
+  { label: "Good", color: "bg-yellow-400" },
+  { label: "Strong", color: "bg-green-500" },
+]
+
+export interface PasswordInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  showStrength?: boolean
+}
+
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ className, showStrength = false, onChange, value, defaultValue, ...props }, ref) => {
+    const [visible, setVisible] = React.useState(false)
+    const [internalValue, setInternalValue] = React.useState((defaultValue as string) ?? "")
+
+    const controlled = value !== undefined
+    const password = controlled ? (value as string) : internalValue
+    const strength = showStrength ? getStrength(password) : 0
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!controlled) setInternalValue(e.target.value)
+      onChange?.(e)
+    }
+
+    return (
+      <div className="w-full space-y-2">
+        <div className="relative">
+          <input
+            ref={ref}
+            type={visible ? "text" : "password"}
+            value={controlled ? value : internalValue}
+            onChange={handleChange}
+            className={cx(
+              "flex w-full rounded-lg border border-border bg-input px-3 py-2 pr-10 text-sm text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:border-border-strong disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            )}
+            {...props}
+          />
+          <button
+            type="button"
+            onClick={() => setVisible((v) => !v)}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+            aria-label={visible ? "Hide password" : "Show password"}
+            tabIndex={-1}
+          >
+            {visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+          </button>
+        </div>
+
+        {showStrength && password.length > 0 && (
+          <div className="space-y-1">
+            <div className="flex gap-1">
+              {[1, 2, 3, 4].map((level) => (
+                <div
+                  key={level}
+                  className={cx(
+                    "h-1 flex-1 rounded-full transition-colors duration-300",
+                    strength >= level ? strengthConfig[strength].color : "bg-border"
+                  )}
+                />
+              ))}
+            </div>
+            <p className="text-[11px] text-muted-foreground">
+              {strengthConfig[strength].label}
+            </p>
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+PasswordInput.displayName = "PasswordInput"