@horon-ai/react 0.0.0-stage → 0.1.0

package/src/components/bottom-sheet.tsx

@@ -0,0 +1,140 @@
+import { Drawer } from "@base-ui/react/drawer";
+import { CaretRight } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+
+export const BottomSheet = Drawer.Root;
+export const BottomSheetTrigger = Drawer.Trigger;
+export const BottomSheetClose = Drawer.Close;
+
+export type BottomSheetContentProps = Omit<ComponentProps<typeof Drawer.Popup>, "className" | "title"> & {
+  title: ReactNode;
+  /**
+   * `panel` is the Figma panel sheet (374px max, label-lg title). `detail` is the Paper detail sheet:
+   * full width, 18px rhythm, a caller-built header (tile, title, description) set flush left.
+   */
+  variant?: "panel" | "detail";
+  /** `glass` is the veil sheet (`veil-overlay`); `solid` is the Paper workspace sheet: opaque default fill, 20px top corners, 8/24/16 padding. */
+  surface?: "glass" | "solid";
+  /** Draws the dimmed, blurred scrim behind the sheet. Paper's floating panel sheet has none. */
+  backdrop?: boolean;
+  /** Insets the sheet 16px from the sides and bottom edge (Paper's 358px panel sheet) instead of docking it full width. */
+  floating?: boolean;
+  className?: string;
+};
+
+/**
+ * Figma `Bottom sheet` (Panels 88:808): the veil with 32px top corners, a 36x5 grabber and a
+ * label-lg title. There is no close button: the sheet closes on the scrim, on Escape, on a
+ * downward drag of the grabber, or through the caller's own bottom action row.
+ */
+export function BottomSheetContent({
+  title,
+  variant = "panel",
+  surface = "solid",
+  backdrop = true,
+  floating = false,
+  className,
+  children,
+  ...props
+}: BottomSheetContentProps) {
+  const detail = variant === "detail";
+  const solid = surface === "solid";
+  return (
+    <Drawer.Portal>
+      {backdrop ? (
+        <Drawer.Backdrop className="fixed inset-0 z-50 bg-bg-scrim/32 motion-fade backdrop-blur-[6px]" />
+      ) : null}
+      <Drawer.Viewport
+        className={cn("fixed z-50 flex justify-center", floating ? "inset-x-4 bottom-4" : "inset-x-0 bottom-0")}
+      >
+        <Drawer.Popup
+          className={cn(
+            "relative flex max-h-[calc(100dvh-2rem)] w-full flex-col items-stretch overflow-clip px-4 pt-2 outline-none",
+            solid ? "rounded-t-xl bg-bg-surface pb-6" : "veil-overlay rounded-t-[32px] pb-5",
+            "transition-[translate] duration-320 ease-out-quint data-ending-style:translate-y-full data-ending-style:duration-220 data-ending-style:ease-in data-starting-style:translate-y-full",
+            detail ? "gap-4.5" : floating ? "gap-3" : "max-w-93.5 gap-1",
+            className,
+          )}
+          {...props}
+        >
+          <span
+            aria-hidden
+            className="relative mx-auto h-[5px] w-9 cursor-grab touch-none rounded-[3px] bg-overlay-ink-20 active:cursor-grabbing"
+          />
+          <Drawer.Content
+            className={cn(
+              "relative flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain",
+              detail ? "gap-4.5" : floating ? "gap-3" : "gap-1",
+            )}
+          >
+            <div className={cn("flex gap-2", detail ? "items-start" : "items-center pt-2.5 pb-2 pl-2")}>
+              <Drawer.Title className={cn("min-w-0 flex-1 text-text-primary", detail ? "flex" : "text-label-lg")}>
+                {title}
+              </Drawer.Title>
+            </div>
+            {children}
+          </Drawer.Content>
+        </Drawer.Popup>
+      </Drawer.Viewport>
+    </Drawer.Portal>
+  );
+}
+
+export type BottomSheetRowProps = Omit<ComponentProps<"button">, "className"> & {
+  icon?: ReactNode;
+  /** Current value on the right, such as "On" or "Weekdays". */
+  value?: ReactNode;
+  className?: string;
+};
+
+/** A 48px settings row: 20px icon, label, value and a 16px caret. */
+export function BottomSheetRow({ icon, value, className, children, ...props }: BottomSheetRowProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex h-12 w-full motion-press cursor-pointer items-center gap-3 rounded-lg px-2 text-left hover:bg-overlay-ink-4 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-text-brand",
+        className,
+      )}
+      {...props}
+    >
+      {icon && <span className="flex shrink-0 text-text-secondary [&>svg]:size-5">{icon}</span>}
+      <span className="min-w-0 flex-1 truncate text-label-md text-text-primary">{children}</span>
+      {value && <span className="shrink-0 text-body-sm text-text-secondary">{value}</span>}
+      <CaretRight aria-hidden className="size-4 shrink-0 text-text-secondary" />
+    </button>
+  );
+}
+
+/** The action row: secondary first, the primary action at the right edge, 8px apart. */
+export function BottomSheetActions({
+  className,
+  ...props
+}: Omit<ComponentProps<"div">, "className"> & { className?: string }) {
+  return (
+    <div className={cn("relative flex w-full flex-wrap items-center justify-end gap-2 pt-3", className)} {...props} />
+  );
+}
+
+export type BottomSheetActionProps = Omit<ComponentProps<"button">, "className"> & {
+  variant?: "primary" | "secondary";
+  className?: string;
+};
+
+/** The sheet's 44px pill actions: `secondary` is 6% ink, `primary` is ink. */
+export function BottomSheetAction({ variant = "secondary", className, ...props }: BottomSheetActionProps) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex h-11 min-w-25 motion-press cursor-pointer items-center justify-center rounded-full px-4 text-label-md whitespace-nowrap",
+        variant === "primary" ? "bg-interactive-primary text-text-inverse" : "bg-overlay-ink-6 text-text-primary",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/components/breadcrumb-header.tsx

@@ -0,0 +1,87 @@
+import { CaretRight, DotsThree, MagnifyingGlass } from "@phosphor-icons/react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { BreadcrumbItem } from "./breadcrumb";
+import { IconButton } from "./icon-button";
+import { LiquidGlass } from "./liquid-glass";
+
+export type BreadcrumbHeaderCrumb = {
+  label: string;
+  href?: string;
+  /** Leading 20px ink tile, such as the workspace initial. */
+  tile?: ReactNode;
+};
+
+export type BreadcrumbHeaderProps = Omit<ComponentProps<"header">, "className"> & {
+  /** Crumbs in order; the last one is the current page. */
+  crumbs: BreadcrumbHeaderCrumb[];
+  onSearch?: () => void;
+  onMore?: () => void;
+  searchLabel?: string;
+  moreLabel?: string;
+  /** `solid` (default) on the page, `glass` over imagery and glass panels. */
+  surface?: "solid" | "glass";
+  className?: string;
+};
+
+/** Paper `Header with breadcrumb`: a 52px regular-glass pill with a crumb row, search and more buttons. */
+export function BreadcrumbHeader({
+  crumbs,
+  onSearch,
+  onMore,
+  searchLabel = "Search",
+  moreLabel = "More",
+  surface = "solid",
+  className,
+  ...props
+}: BreadcrumbHeaderProps) {
+  return (
+    <header
+      className={cn(
+        "relative flex h-13 items-center gap-2 overflow-clip rounded-full p-2",
+        surface === "glass" ? "bg-glass-regular" : "border border-border-default bg-bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      <nav aria-label="Breadcrumb" className="relative min-w-0 flex-1 overflow-x-auto">
+        <ol className="flex items-center gap-1.5">
+          {crumbs.map((crumb, index) => {
+            const current = index === crumbs.length - 1;
+            return (
+              <li key={crumb.label} className={cn("flex items-center gap-1.5", current && "min-w-0")}>
+                {index > 0 && <CaretRight aria-hidden className="size-3.5 shrink-0 text-text-secondary" />}
+                <BreadcrumbItem
+                  current={current}
+                  tile={crumb.tile}
+                  href={crumb.href}
+                  className={current ? "min-w-0" : undefined}
+                >
+                  <span className="min-w-0 truncate">{crumb.label}</span>
+                </BreadcrumbItem>
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
+      {onSearch && (
+        <IconButton
+          icon={<MagnifyingGlass />}
+          label={searchLabel}
+          onClick={onSearch}
+          className="relative size-9 [&_svg]:size-4.5"
+        />
+      )}
+      {onMore && (
+        <IconButton
+          icon={<DotsThree weight="bold" />}
+          label={moreLabel}
+          onClick={onMore}
+          className="relative size-9 [&_svg]:size-4.5"
+        />
+      )}
+    </header>
+  );
+}

package/src/components/breadcrumb.tsx

@@ -0,0 +1,86 @@
+import { CaretRight } from "@phosphor-icons/react";
+import { Children, Fragment, type ComponentProps, type ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { LiquidGlass } from "./liquid-glass";
+
+export type BreadcrumbSurface = "glass" | "solid";
+
+export type BreadcrumbProps = Omit<ComponentProps<"nav">, "className"> & {
+  /** `glass` wraps the crumbs in a regular-glass tray, `solid` in an opaque tray. Omitted keeps them bare. */
+  surface?: BreadcrumbSurface;
+  className?: string;
+};
+
+/** Figma `Breadcrumb` (110:948): crumbs 6px apart with 14px carets; the last crumb is the current page. */
+export function Breadcrumb({
+  surface,
+  className,
+  children,
+  "aria-label": ariaLabel = "Breadcrumb",
+  ...props
+}: BreadcrumbProps) {
+  return (
+    <nav
+      aria-label={ariaLabel}
+      className={cn(
+        // A flex item cannot shrink below its trail's min-content width, so the tray
+        // would keep its 369px min-content and push the page wide. As a grid box the
+        // tray takes the available width below `sm` and hugs the crumbs from `sm` up.
+        "grid w-full min-w-0 sm:w-fit sm:max-w-fit",
+        surface === "glass" && "relative overflow-clip rounded-xl bg-glass-regular px-4 py-3.5",
+        surface === "solid" && "relative rounded-xl border border-border-default bg-bg-surface px-4 py-3.5",
+        className,
+      )}
+      {...props}
+    >
+      {surface === "glass" && <LiquidGlass />}
+      {/* Crumbs are navigation targets: an over-wide trail scrolls inside the tray
+       * instead of truncating a label the reader may need to tap. */}
+      <ol className="relative flex min-w-0 items-center gap-1.5 overflow-x-auto">
+        {Children.map(children, (item, index) => (
+          <Fragment key={index}>
+            {index > 0 && (
+              <li aria-hidden className="flex shrink-0">
+                <CaretRight className="size-3.5 shrink-0 text-text-secondary" />
+              </li>
+            )}
+            <li className="flex">{item}</li>
+          </Fragment>
+        ))}
+      </ol>
+    </nav>
+  );
+}
+
+export type BreadcrumbItemProps = Omit<ComponentProps<"a">, "className"> & {
+  /** Marks the current page: primary text and `aria-current`. */
+  current?: boolean;
+  /** Leading 20px ink tile, such as the workspace initial. */
+  tile?: ReactNode;
+  className?: string;
+};
+
+export function BreadcrumbItem({ current, tile, href, className, children, ...props }: BreadcrumbItemProps) {
+  const Element = href && !current ? "a" : "span";
+  return (
+    <Element
+      href={Element === "a" ? href : undefined}
+      aria-current={current ? "page" : undefined}
+      className={cn(
+        "flex items-center gap-1.5 rounded-sm py-1 pr-1.5 pl-1.5 text-label-md whitespace-nowrap no-underline motion-colors",
+        current ? "text-text-primary" : "text-text-secondary",
+        Element === "a" && "hover:text-text-primary focus-visible:outline-2 focus-visible:outline-text-brand",
+        className,
+      )}
+      {...props}
+    >
+      {tile && (
+        <span className="flex size-5 shrink-0 items-center justify-center rounded-xs bg-interactive-primary text-label-sm text-text-inverse">
+          {tile}
+        </span>
+      )}
+      {children}
+    </Element>
+  );
+}

package/src/components/button.tsx

@@ -0,0 +1,146 @@
+import { Button as BaseButton } from "@base-ui/react/button";
+import { Children, isValidElement, type ComponentProps, type ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { LiquidGlass } from "./liquid-glass";
+
+export type ButtonVariant = "primary" | "glass" | "solid" | "danger" | "link";
+export type ButtonSize = "sm" | "md" | "lg";
+
+type ButtonCommonProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /** Leading icon; sized 16px (sm, md) or 20px (lg) and colored like the label. */
+  icon?: ReactNode;
+  className?: string;
+};
+
+/** Anchor attributes a button element does not have; they only reach the DOM when `href` is set. */
+type ButtonAnchorProps = Pick<ComponentProps<"a">, "href" | "target" | "rel" | "download">;
+
+/**
+ * One flat prop type rather than a union of button props and anchor props: a caller that forwards the
+ * component's props (`Omit<ComponentProps<typeof Button>, "variant" | "size">`) needs a single object
+ * type. `keyof` of a union is only the keys both branches share, so `type` vanished there and the
+ * caller's `type="button"` failed to type-check.
+ *
+ * `href` still switches the render to a real anchor, and the anchor drops everything a button-only prop
+ * means there: `type`, `disabled`, `name`, `value`, the `form*` family and Base UI's own props. They stay
+ * assignable while `href` is set — forbidding them needs the two-branch union that caused the bug — but
+ * they never reach the DOM, where `<a disabled>` would render as an inert attribute.
+ */
+export type ButtonProps = ButtonCommonProps & ButtonAnchorProps & Omit<ComponentProps<typeof BaseButton>, "className">;
+
+const sizeClass: Record<ButtonSize, string> = {
+  sm: "h-8 gap-1.5 px-3 text-label-md [&_svg]:size-4",
+  md: "h-10 gap-2 px-4 text-label-lg [&_svg]:size-4",
+  lg: "h-12 gap-2 px-5 text-label-lg [&_svg]:size-5",
+};
+
+const variantClass: Record<ButtonVariant, string> = {
+  primary:
+    "bg-interactive-primary text-interactive-on-primary hover:not-data-disabled:bg-interactive-primary-hover active:not-data-disabled:bg-interactive-primary-pressed",
+  glass:
+    "bg-glass-clear text-text-primary hover:not-data-disabled:bg-glass-clear-hover active:not-data-disabled:bg-glass-clear-pressed",
+  solid:
+    "border border-border-default bg-bg-surface text-text-primary hover:not-data-disabled:bg-bg-subtle active:not-data-disabled:bg-interactive-secondary-hover",
+  danger:
+    "bg-interactive-danger text-interactive-on-danger hover:not-data-disabled:bg-interactive-danger-hover active:not-data-disabled:bg-interactive-danger",
+  link: "h-auto gap-1.5 rounded-sm px-1 text-label-sm text-text-secondary motion-colors hover:not-data-disabled:text-text-primary aria-[current=page]:text-text-primary aria-[current=true]:text-text-primary [&_svg]:size-3.5",
+};
+
+/** Figma `Button` (55:339): Primary, Glass, Solid and Danger in three sizes, plus a text-only `link` variant (size-independent). */
+export function Button({
+  variant = "primary",
+  size = "md",
+  icon,
+  className,
+  children,
+  href,
+  target,
+  rel,
+  download,
+  ...props
+}: ButtonProps) {
+  const classes = cn(
+    "relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap select-none",
+    variant === "link" ? "" : "motion-press rounded-full",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand data-disabled:cursor-not-allowed data-disabled:opacity-40",
+    variant !== "link" && sizeClass[size],
+    // Paper's small buttons are 32px tall. Paint the 44px reach without moving the control;
+    // the reach is an invisible box, so it never needs clipping.
+    variant !== "link" &&
+      size !== "lg" &&
+      "relative after:absolute after:top-1/2 after:left-1/2 after:min-h-11 after:min-w-11 after:-translate-x-1/2 after:-translate-y-1/2 after:content-['']",
+    variantClass[variant],
+    className,
+  );
+
+  // Preflight makes every `svg` a block box, so an icon passed as a child (rather than through `icon`)
+  // started a second line and the label clipped. Any element child gets a row at the button's own gap.
+  // A plain string or number label keeps the exact single-span markup it had, `text-trim` included.
+  // `forEach` + `isValidElement` rather than `toArray().some()`: no array per render.
+  let hasElementChild = false;
+  Children.forEach(children, (child) => {
+    if (isValidElement(child)) hasElementChild = true;
+  });
+
+  const content = (
+    <>
+      {variant === "glass" && <LiquidGlass />}
+      {icon && <span className="relative flex shrink-0">{icon}</span>}
+      <span
+        className={cn(
+          "relative",
+          variant !== "link" && "text-trim",
+          hasElementChild && "inline-flex items-center gap-[inherit]",
+        )}
+      >
+        {children}
+      </span>
+    </>
+  );
+
+  if (href !== undefined) {
+    // An anchor takes none of the button-only attributes, and React would write them to the DOM where
+    // they do nothing (`<a disabled>` is inert). They stop here. `type` is a button type in this prop
+    // type, not an anchor MIME type, so it stops too, as do Base UI's own props.
+    const {
+      type: _type,
+      style,
+      render: _render,
+      nativeButton: _native,
+      focusableWhenDisabled: _focus,
+      disabled: _disabled,
+      form: _form,
+      formAction: _formAction,
+      formEncType: _formEncType,
+      formMethod: _formMethod,
+      formNoValidate: _formNoValidate,
+      formTarget: _formTarget,
+      name: _name,
+      value: _value,
+      ...anchorProps
+    } = props;
+    return (
+      <a
+        href={href}
+        target={target}
+        rel={rel}
+        download={download}
+        style={typeof style === "function" ? undefined : style}
+        className={classes}
+        // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- what is left is anchor attributes; Base UI types them against `<button>`
+        {...(anchorProps as Omit<ComponentProps<"a">, "className" | "href">)}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <BaseButton className={classes} {...props}>
+      {content}
+    </BaseButton>
+  );
+}