@boyernick/standard-ui-react 0.1.1-canary.9 → 0.2.0

package/src/pagination.tsx

@@ -1,17 +1,93 @@
-import type { ComponentProps } from "react";
-import { IconChevronRightSmall } from "./icons";
-import { cn } from "./lib/cn";
-import { motion } from "./lib/motion";
-
-export type PaginationProps = ComponentProps<"nav">;
-export type PaginationContentProps = ComponentProps<"ul">;
-export type PaginationItemProps = ComponentProps<"li">;
-export type PaginationLinkProps = ComponentProps<"button"> & {
-  active?: boolean;
-};
-export type PaginationPreviousProps = PaginationLinkProps;
-export type PaginationNextProps = PaginationLinkProps;
-export type PaginationEllipsisProps = ComponentProps<"span">;
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { IconChevronRightSmall } from "./icons"
+import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
+import { motion } from "./lib/motion"
+
+const paginationLinkVariants = cva(
+  cn(
+    "inline-flex cursor-pointer items-center justify-center rounded-md border border-transparent text-fg-secondary hover:bg-background-tertiary hover:text-fg-primary aria-disabled:pointer-events-none aria-disabled:opacity-50 disabled:cursor-not-allowed disabled:opacity-50 data-[active]:border-border-primary data-[active]:bg-surface data-[active]:text-fg-primary [&_svg]:size-4 [&_svg]:shrink-0",
+    focusRing,
+  ),
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-xs",
+        md: "size-9 text-sm",
+        lg: "size-10 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+)
+
+const paginationDirectionVariants = cva("", {
+  variants: {
+    size: {
+      sm: "",
+      md: "",
+      lg: "",
+    },
+    iconOnly: {
+      true: "",
+      false: "w-auto gap-1",
+    },
+  },
+  compoundVariants: [
+    { size: "sm", iconOnly: false, class: "px-2.5" },
+    { size: "md", iconOnly: false, class: "px-3" },
+    { size: "lg", iconOnly: false, class: "px-3.5" },
+  ],
+  defaultVariants: {
+    size: "md",
+    iconOnly: false,
+  },
+})
+
+export type PaginationSize = NonNullable<
+  VariantProps<typeof paginationLinkVariants>["size"]
+>
+
+type PaginationLinkCommonProps = VariantProps<typeof paginationLinkVariants> & {
+  active?: boolean
+}
+
+export type PaginationButtonProps = Omit<ComponentProps<"button">, "size"> &
+  PaginationLinkCommonProps & {
+    href?: never
+  }
+export type PaginationAnchorProps = Omit<ComponentProps<"a">, "size"> &
+  PaginationLinkCommonProps & {
+    href: string
+    disabled?: boolean
+  }
+export type PaginationLinkProps =
+  | PaginationButtonProps
+  | PaginationAnchorProps
+export type PaginationProps = ComponentProps<"nav">
+export type PaginationContentProps = ComponentProps<"ul">
+export type PaginationItemProps = ComponentProps<"li">
+export type PaginationPreviousProps = PaginationLinkProps & {
+  iconOnly?: boolean
+}
+export type PaginationNextProps = PaginationPreviousProps
+export type PaginationFirstProps = PaginationPreviousProps
+export type PaginationLastProps = PaginationPreviousProps
+export type PaginationEllipsisProps = ComponentProps<"span">
+export type PaginationStatusProps = ComponentProps<"span"> & {
+  page: number
+  totalPages: number
+}
+export type PaginationRangeProps = ComponentProps<"span"> & {
+  start: number
+  end: number
+  total: number
+}
 
 export const Pagination = ({ className, ...props }: PaginationProps) => (
   <nav
@@ -19,60 +95,169 @@ export const Pagination = ({ className, ...props }: PaginationProps) => (
     className={cn("flex w-full justify-center", className)}
     {...props}
   />
-);
+)
 
 export const PaginationContent = ({
   className,
   ...props
 }: PaginationContentProps) => (
   <ul className={cn("flex items-center gap-1", className)} {...props} />
-);
+)
 
 export const PaginationItem = ({
   className,
   ...props
-}: PaginationItemProps) => <li className={cn("flex", className)} {...props} />;
+}: PaginationItemProps) => (
+  <li className={cn("flex items-center", className)} {...props} />
+)
 
-export const PaginationLink = ({
-  className,
-  active = false,
-  type = "button",
-  ...props
-}: PaginationLinkProps) => (
-  <button
-    type={type}
-    aria-current={active ? "page" : undefined}
-    data-active={active || undefined}
-    className={cn(
-      "inline-flex size-9 cursor-pointer items-center justify-center rounded-md border border-transparent text-sm text-fg-secondary outline-none hover:bg-background-tertiary hover:text-fg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 data-[active]:border-border-primary data-[active]:bg-surface data-[active]:text-fg-primary",
-      motion.colors,
-      className,
-    )}
-    {...props}
-  />
-);
+export const PaginationLink = (props: PaginationLinkProps) => {
+  const { className, active = false, size, ...linkProps } = props
+  const classes = cn(
+    paginationLinkVariants({ size }),
+    motion.colors,
+    className,
+  )
+
+  if ("href" in linkProps && typeof linkProps.href === "string") {
+    const {
+      disabled = false,
+      onClick,
+      tabIndex,
+      ...anchorProps
+    } = linkProps as PaginationAnchorProps
+
+    return (
+      <a
+        {...anchorProps}
+        aria-current={active ? "page" : undefined}
+        aria-disabled={disabled || undefined}
+        data-active={active || undefined}
+        tabIndex={disabled ? -1 : tabIndex}
+        className={classes}
+        onClick={(event) => {
+          if (disabled) {
+            event.preventDefault()
+            return
+          }
+          onClick?.(event)
+        }}
+      />
+    )
+  }
+
+  const { type = "button", ...buttonProps } =
+    linkProps as PaginationButtonProps
+
+  return (
+    <button
+      type={type}
+      aria-current={active ? "page" : undefined}
+      data-active={active || undefined}
+      className={classes}
+      {...buttonProps}
+    />
+  )
+}
+
+const DoubleChevron = ({ direction }: { direction: "first" | "last" }) => (
+  <span className="flex -space-x-2" aria-hidden>
+    <IconChevronRightSmall
+      className={direction === "first" ? "rotate-180" : undefined}
+    />
+    <IconChevronRightSmall
+      className={direction === "first" ? "rotate-180" : undefined}
+    />
+  </span>
+)
 
 export const PaginationPrevious = ({
   children = "Previous",
   className,
+  iconOnly = false,
+  size = "md",
+  "aria-label": ariaLabel,
   ...props
 }: PaginationPreviousProps) => (
-  <PaginationLink className={cn("w-auto gap-1 px-3", className)} {...props}>
+  <PaginationLink
+    aria-label={ariaLabel ?? (iconOnly ? "Previous page" : undefined)}
+    className={cn(
+      paginationDirectionVariants({ size, iconOnly }),
+      className,
+    )}
+    size={size}
+    {...props}
+  >
     <IconChevronRightSmall className="rotate-180" aria-hidden />
-    {children}
+    {iconOnly ? null : children}
   </PaginationLink>
-);
+)
 
 export const PaginationNext = ({
   children = "Next",
   className,
+  iconOnly = false,
+  size = "md",
+  "aria-label": ariaLabel,
   ...props
 }: PaginationNextProps) => (
-  <PaginationLink className={cn("w-auto gap-1 px-3", className)} {...props}>
-    {children}
+  <PaginationLink
+    aria-label={ariaLabel ?? (iconOnly ? "Next page" : undefined)}
+    className={cn(
+      paginationDirectionVariants({ size, iconOnly }),
+      className,
+    )}
+    size={size}
+    {...props}
+  >
+    {iconOnly ? null : children}
     <IconChevronRightSmall aria-hidden />
   </PaginationLink>
-);
+)
+
+export const PaginationFirst = ({
+  children = "First",
+  className,
+  iconOnly = false,
+  size = "md",
+  "aria-label": ariaLabel,
+  ...props
+}: PaginationFirstProps) => (
+  <PaginationLink
+    aria-label={ariaLabel ?? (iconOnly ? "First page" : undefined)}
+    className={cn(
+      paginationDirectionVariants({ size, iconOnly }),
+      className,
+    )}
+    size={size}
+    {...props}
+  >
+    <DoubleChevron direction="first" />
+    {iconOnly ? null : children}
+  </PaginationLink>
+)
+
+export const PaginationLast = ({
+  children = "Last",
+  className,
+  iconOnly = false,
+  size = "md",
+  "aria-label": ariaLabel,
+  ...props
+}: PaginationLastProps) => (
+  <PaginationLink
+    aria-label={ariaLabel ?? (iconOnly ? "Last page" : undefined)}
+    className={cn(
+      paginationDirectionVariants({ size, iconOnly }),
+      className,
+    )}
+    size={size}
+    {...props}
+  >
+    {iconOnly ? null : children}
+    <DoubleChevron direction="last" />
+  </PaginationLink>
+)
 
 export const PaginationEllipsis = ({
   className,
@@ -88,4 +273,39 @@ export const PaginationEllipsis = ({
   >
     …
   </span>
-);
+)
+
+export const PaginationStatus = ({
+  page,
+  totalPages,
+  children,
+  className,
+  ...props
+}: PaginationStatusProps) => (
+  <span
+    aria-live="polite"
+    className={cn("whitespace-nowrap text-sm text-fg-secondary tabular-nums", className)}
+    {...props}
+  >
+    {children ?? `Page ${page} of ${totalPages}`}
+  </span>
+)
+
+export const PaginationRange = ({
+  start,
+  end,
+  total,
+  children,
+  className,
+  ...props
+}: PaginationRangeProps) => (
+  <span
+    aria-live="polite"
+    className={cn("whitespace-nowrap text-sm text-fg-secondary tabular-nums", className)}
+    {...props}
+  >
+    {children ?? `${start}–${end} of ${total}`}
+  </span>
+)
+
+export { paginationDirectionVariants, paginationLinkVariants }

package/src/password-protection.tsx

@@ -0,0 +1,345 @@
+"use client"
+
+import {
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react"
+import { Button } from "./button"
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogClose,
+  DialogDescription,
+  DialogHeader,
+  DialogPopup,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog"
+import {
+  Field,
+  FieldControl,
+  FieldError,
+  FieldLabel,
+} from "./field"
+import { Form } from "./form"
+import { cn } from "./lib/cn"
+
+export type PasswordProtectionVerify = (
+  password: string,
+) => boolean | Promise<boolean>
+
+type PasswordProtectionSharedProps = {
+  /** Returns true when the entered password unlocks access. */
+  verify: PasswordProtectionVerify
+  title?: ReactNode
+  description?: ReactNode
+  submitLabel?: string
+  cancelLabel?: string
+  passwordLabel?: string
+  passwordPlaceholder?: string
+  /** Shown when `verify` returns false. */
+  errorMessage?: string
+  onUnlock?: () => void
+  className?: string
+}
+
+export type PasswordProtectionProps = PasswordProtectionSharedProps & {
+  children: ReactNode
+  /** Controlled unlocked state. */
+  unlocked?: boolean
+  defaultUnlocked?: boolean
+  onUnlockedChange?: (unlocked: boolean) => void
+  /** Show a cancel action that dismisses without unlocking. @default true */
+  cancelable?: boolean
+  /** Called when the visitor dismisses without unlocking. */
+  onCancel?: () => void
+}
+
+export type PasswordProtectionDialogProps = PasswordProtectionSharedProps & {
+  /** Element rendered as the dialog trigger (`render` target). */
+  trigger: ReactElement
+  /** Label rendered inside the trigger. */
+  children: ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Show a cancel action that closes without unlocking. @default true */
+  cancelable?: boolean
+}
+
+const DEFAULT_TITLE = "This content is protected"
+const DEFAULT_DESCRIPTION = "Enter password to continue"
+const DEFAULT_SUBMIT = "Continue"
+const DEFAULT_CANCEL = "Cancel"
+const DEFAULT_PASSWORD_LABEL = "Password"
+const DEFAULT_ERROR = "Incorrect password"
+const DEFAULT_EMPTY = "Enter a password."
+
+const passwordBackdropClassName = "bg-black/55 dark:bg-black/75"
+const passwordPopupClassName = "gap-4"
+
+type PasswordFormProps = Omit<PasswordProtectionSharedProps, "onUnlock"> & {
+  onSuccess: () => void
+  cancelable?: boolean
+  /** Prefer this over DialogClose when the dialog is force-open (gate). */
+  onCancel?: () => void
+}
+
+const PasswordForm = ({
+  verify,
+  title = DEFAULT_TITLE,
+  description = DEFAULT_DESCRIPTION,
+  submitLabel = DEFAULT_SUBMIT,
+  cancelLabel = DEFAULT_CANCEL,
+  passwordLabel = DEFAULT_PASSWORD_LABEL,
+  passwordPlaceholder,
+  errorMessage = DEFAULT_ERROR,
+  onSuccess,
+  cancelable = false,
+  onCancel,
+  className,
+}: PasswordFormProps) => {
+  const [errors, setErrors] = useState<Record<string, string | string[]>>({})
+  const [pending, setPending] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleSubmit = (values: Record<string, unknown>) => {
+    const password = String(values.password ?? "")
+    setErrors({})
+
+    if (!password.trim()) {
+      setErrors({ password: DEFAULT_EMPTY })
+      queueMicrotask(() => inputRef.current?.focus())
+      return
+    }
+
+    setPending(true)
+
+    const finish = (ok: boolean) => {
+      if (!ok) {
+        setErrors({ password: errorMessage })
+        setPending(false)
+        queueMicrotask(() => inputRef.current?.select())
+        return
+      }
+      setPending(false)
+      onSuccess()
+    }
+
+    try {
+      const result = verify(password)
+      if (result instanceof Promise) {
+        void result.then(finish).catch(() => finish(false))
+        return
+      }
+      finish(result)
+    } catch {
+      finish(false)
+    }
+  }
+
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>{title}</DialogTitle>
+        {description ? (
+          <DialogDescription>{description}</DialogDescription>
+        ) : null}
+      </DialogHeader>
+      <Form
+        errors={errors}
+        onFormSubmit={handleSubmit}
+        className={cn("gap-4", className)}
+      >
+        <Field name="password">
+          <FieldLabel>{passwordLabel}</FieldLabel>
+          <FieldControl
+            ref={inputRef}
+            type="password"
+            name="password"
+            autoComplete="current-password"
+            autoFocus
+            placeholder={passwordPlaceholder}
+            disabled={pending}
+            aria-invalid={errors.password ? true : undefined}
+          />
+          <FieldError />
+        </Field>
+        <div className="flex justify-end gap-2">
+          {cancelable ? (
+            onCancel ? (
+              <Button
+                type="button"
+                variant="outline"
+                disabled={pending}
+                onClick={onCancel}
+              >
+                {cancelLabel}
+              </Button>
+            ) : (
+              <DialogClose
+                render={
+                  <Button type="button" variant="outline" disabled={pending} />
+                }
+              >
+                {cancelLabel}
+              </DialogClose>
+            )
+          ) : null}
+          <Button type="submit" disabled={pending}>
+            {pending ? "Checking…" : submitLabel}
+          </Button>
+        </div>
+      </Form>
+    </>
+  )
+}
+
+/**
+ * Gates children behind a password dialog. The dialog stays open until
+ * `verify` succeeds — soft client-side protection for private links and pages.
+ */
+export const PasswordProtection = ({
+  verify,
+  children,
+  unlocked: unlockedProp,
+  defaultUnlocked = false,
+  onUnlockedChange,
+  onUnlock,
+  onCancel,
+  cancelable = true,
+  title,
+  description,
+  submitLabel,
+  cancelLabel,
+  passwordLabel,
+  passwordPlaceholder,
+  errorMessage,
+  className,
+}: PasswordProtectionProps) => {
+  const [unlockedState, setUnlockedState] = useState(defaultUnlocked)
+  const [dismissed, setDismissed] = useState(false)
+  const unlocked = unlockedProp ?? unlockedState
+
+  const setUnlocked = (next: boolean) => {
+    if (unlockedProp === undefined) setUnlockedState(next)
+    onUnlockedChange?.(next)
+  }
+
+  const handleSuccess = () => {
+    setDismissed(false)
+    setUnlocked(true)
+    onUnlock?.()
+  }
+
+  const handleCancel = () => {
+    setDismissed(true)
+    onCancel?.()
+  }
+
+  if (unlocked) return <>{children}</>
+  if (dismissed) return null
+
+  return (
+    <Dialog
+      open
+      disablePointerDismissal={!cancelable}
+      onOpenChange={(open) => {
+        if (open) return
+        if (!cancelable) return
+        handleCancel()
+      }}
+    >
+      <DialogPortal>
+        <DialogBackdrop className={passwordBackdropClassName} />
+        <DialogPopup
+          data-slot="password-protection"
+          className={cn(passwordPopupClassName, className)}
+        >
+          <PasswordForm
+            verify={verify}
+            title={title}
+            description={description}
+            submitLabel={submitLabel}
+            cancelLabel={cancelLabel}
+            passwordLabel={passwordLabel}
+            passwordPlaceholder={passwordPlaceholder}
+            errorMessage={errorMessage}
+            cancelable={cancelable}
+            onCancel={cancelable ? handleCancel : undefined}
+            onSuccess={handleSuccess}
+          />
+        </DialogPopup>
+      </DialogPortal>
+    </Dialog>
+  )
+}
+
+/**
+ * Opens a password dialog from a trigger — for gated links that unlock a
+ * navigation or reveal after a successful check.
+ */
+export const PasswordProtectionDialog = ({
+  verify,
+  trigger,
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  onUnlock,
+  title,
+  description,
+  submitLabel,
+  cancelLabel,
+  passwordLabel,
+  passwordPlaceholder,
+  errorMessage,
+  cancelable = true,
+  className,
+}: PasswordProtectionDialogProps) => {
+  const [openState, setOpenState] = useState(defaultOpen)
+  const open = openProp ?? openState
+
+  const setOpen = (next: boolean) => {
+    if (openProp === undefined) setOpenState(next)
+    onOpenChange?.(next)
+  }
+
+  const handleSuccess = () => {
+    setOpen(false)
+    onUnlock?.()
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={setOpen}
+      disablePointerDismissal={!cancelable}
+    >
+      <DialogTrigger render={trigger}>{children}</DialogTrigger>
+      <DialogPortal>
+        <DialogBackdrop className={passwordBackdropClassName} />
+        <DialogPopup
+          data-slot="password-protection-dialog"
+          className={cn(passwordPopupClassName, className)}
+        >
+          <PasswordForm
+            verify={verify}
+            title={title}
+            description={description}
+            submitLabel={submitLabel}
+            cancelLabel={cancelLabel}
+            passwordLabel={passwordLabel}
+            passwordPlaceholder={passwordPlaceholder}
+            errorMessage={errorMessage}
+            cancelable={cancelable}
+            onSuccess={handleSuccess}
+          />
+        </DialogPopup>
+      </DialogPortal>
+    </Dialog>
+  )
+}

package/src/popover.tsx

@@ -48,7 +48,7 @@ export const PopoverPositioner = ({
 export const PopoverPopup = ({ className, ...props }: PopoverPopupProps) => (
   <BasePopover.Popup
     className={cn(
-      "z-50 flex w-72 flex-col gap-1 p-4",
+      "z-50 flex w-72 flex-col gap-0.5 px-4 py-3",
       popupSurface,
       motion.popupAnchor,
       className,

package/src/progress.tsx

@@ -53,6 +53,11 @@ export const ProgressIndicator = ({
   <BaseProgress.Indicator
     className={cn(
       "h-full rounded-full bg-brand-primary transition-[width] duration-[var(--duration-lg)] ease-enter motion-reduce:transition-none",
+      // Base UI flags a null value with data-indeterminate and leaves the
+      // indicator full width, so without this the bar reads as complete.
+      // A quarter-width stripe crossing the track on the passive curve —
+      // ambient, system-initiated movement.
+      "data-indeterminate:w-1/4 data-indeterminate:animate-[progress-indeterminate_1.4s_var(--ease-passive)_infinite] motion-reduce:animate-none",
       className,
     )}
     {...props}