@you-agent-factory/components 0.0.0

package/src/layout/action-row.tsx

@@ -0,0 +1,53 @@
+import type { HTMLAttributes, ReactNode } from "react";
+
+import { cn } from "../utilities/cn";
+
+const ACTION_ROW_CLASS =
+  "flex min-w-0 flex-wrap items-center gap-2 max-md:justify-start";
+const ACTION_ROW_SECTION_CLASS =
+  "flex min-w-0 flex-wrap items-center gap-2";
+
+export interface ActionRowProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  actions?: ReactNode;
+  actionsClassName?: string;
+  statuses?: ReactNode;
+  statusesClassName?: string;
+}
+
+export function ActionRow({
+  actions,
+  actionsClassName,
+  className,
+  statuses,
+  statusesClassName,
+  ...props
+}: ActionRowProps) {
+  const hasStatuses = statuses !== undefined && statuses !== null;
+  const hasActions = actions !== undefined && actions !== null;
+
+  if (!hasStatuses && !hasActions) {
+    return null;
+  }
+
+  return (
+    <div className={cn(ACTION_ROW_CLASS, className)} {...props}>
+      {hasStatuses ? (
+        <div
+          className={cn(ACTION_ROW_SECTION_CLASS, statusesClassName)}
+          data-action-row-section="statuses"
+        >
+          {statuses}
+        </div>
+      ) : null}
+      {hasActions ? (
+        <div
+          className={cn(ACTION_ROW_SECTION_CLASS, actionsClassName)}
+          data-action-row-section="actions"
+        >
+          {actions}
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/src/layout/index.ts

@@ -0,0 +1,9 @@
+/** Stable category path for `@you-agent-factory/components/layout`. */
+export const COMPONENTS_CATEGORY = "layout" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+
+export { ActionRow } from "./action-row";
+export type { ActionRowProps } from "./action-row";
+export { SurfacePanel, surfacePanelVariants } from "./surface-panel";
+export type { SurfacePanelProps } from "./surface-panel";

package/src/layout/surface-panel.tsx

@@ -0,0 +1,91 @@
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef, type HTMLAttributes } from "react";
+
+import { cn } from "../utilities/cn";
+
+type SurfacePanelPadding = "compact" | "default" | "none";
+type SurfacePanelRadius = "lg" | "xl" | "2xl" | "3xl" | "full";
+type SurfacePanelSurface = "high" | "low";
+type SurfacePanelTone = "default" | "accent" | "selected";
+
+export interface SurfacePanelProps extends HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+  padding?: SurfacePanelPadding;
+  radius?: SurfacePanelRadius;
+  surface?: SurfacePanelSurface;
+  tone?: SurfacePanelTone;
+}
+
+const SURFACE_PANEL_BASE_CLASS = "border border-outline";
+const SURFACE_PANEL_PADDING_CLASS: Record<SurfacePanelPadding, string> = {
+  compact: "p-2",
+  default: "p-3",
+  none: "",
+};
+const SURFACE_PANEL_RADIUS_CLASS: Record<SurfacePanelRadius, string> = {
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  full: "rounded-full",
+};
+const SURFACE_PANEL_SURFACE_CLASS: Record<SurfacePanelSurface, string> = {
+  high: "bg-surface-container-high",
+  low: "bg-surface-container-low",
+};
+const SURFACE_PANEL_TONE_CLASS: Record<SurfacePanelTone, string> = {
+  default: "",
+  accent: "border-primary text-on-surface",
+  selected: "border-primary bg-primary-container text-on-primary-container",
+};
+
+export function surfacePanelVariants({
+  className,
+  padding = "default",
+  radius = "xl",
+  surface = "high",
+  tone = "default",
+}: Pick<
+  SurfacePanelProps,
+  "className" | "padding" | "radius" | "surface" | "tone"
+>) {
+  return cn(
+    SURFACE_PANEL_BASE_CLASS,
+    SURFACE_PANEL_PADDING_CLASS[padding],
+    SURFACE_PANEL_RADIUS_CLASS[radius],
+    SURFACE_PANEL_SURFACE_CLASS[surface],
+    SURFACE_PANEL_TONE_CLASS[tone],
+    className,
+  );
+}
+
+export const SurfacePanel = forwardRef<HTMLDivElement, SurfacePanelProps>(
+  function SurfacePanel(
+    {
+      asChild = false,
+      className,
+      padding = "default",
+      radius = "xl",
+      surface = "high",
+      tone = "default",
+      ...props
+    },
+    ref,
+  ) {
+    const Component = asChild ? Slot : "div";
+
+    return (
+      <Component
+        className={surfacePanelVariants({
+          className,
+          padding,
+          radius,
+          surface,
+          tone,
+        })}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);

package/src/navigation/index.ts

@@ -0,0 +1,4 @@
+/** Stable category path for `@you-agent-factory/components/navigation`. */
+export const COMPONENTS_CATEGORY = "navigation" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;

package/src/overlays/collapsible.tsx

@@ -0,0 +1,22 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import type { ComponentProps } from "react";
+
+import { cn } from "../utilities/cn";
+
+export const Collapsible = CollapsiblePrimitive.Root;
+export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+export function CollapsibleContent({
+  className,
+  ...props
+}: ComponentProps<typeof CollapsiblePrimitive.Content>) {
+  return (
+    <CollapsiblePrimitive.Content
+      className={cn(
+        "overflow-hidden data-[state=closed]:animate-[overlay-collapsible-up_160ms_ease-out] data-[state=open]:animate-[overlay-collapsible-down_200ms_ease-out]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}

package/src/overlays/dialog.tsx

@@ -0,0 +1,148 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+import { cn } from "../utilities/cn";
+import {
+  OVERLAY_DIALOG_CONTENT_SHELL_CLASS,
+  OVERLAY_FORM_GROUP_CLASS,
+} from "./overlay-layout";
+
+const DIALOG_CLOSE_BUTTON_CLASS =
+  "absolute right-4 top-4 inline-flex min-h-9 w-9 items-center justify-center rounded-full border border-outline bg-transparent p-0 text-on-surface transition-colors hover:bg-surface-container-low disabled:pointer-events-none disabled:opacity-50";
+
+function DialogCloseIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="18"
+      viewBox="0 0 24 24"
+      width="18"
+    >
+      <path
+        d="M6 6l12 12M18 6L6 18"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.8"
+      />
+    </svg>
+  );
+}
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogPortal = DialogPrimitive.Portal;
+export const DialogClose = DialogPrimitive.Close;
+
+export function DialogOverlay({
+  className,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn(
+        "fixed inset-0 z-50 bg-black/70 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export type DialogContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
+  closeDisabled?: boolean;
+  closeLabel?: string;
+};
+
+export function DialogContent({
+  children,
+  className,
+  closeDisabled = false,
+  closeLabel = "Close",
+  ...props
+}: DialogContentProps) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          "fixed inset-x-4 top-1/2 z-50 mx-auto max-h-dvh max-w-2xl -translate-y-1/2 overflow-y-auto rounded-2xl border border-outline bg-surface-container-high text-on-surface shadow-xl",
+          OVERLAY_DIALOG_CONTENT_SHELL_CLASS,
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {closeDisabled ? (
+          <button
+            aria-label={closeLabel}
+            className={DIALOG_CLOSE_BUTTON_CLASS}
+            disabled
+            type="button"
+          >
+            <DialogCloseIcon />
+          </button>
+        ) : (
+          <DialogPrimitive.Close
+            aria-label={closeLabel}
+            className={DIALOG_CLOSE_BUTTON_CLASS}
+          >
+            <DialogCloseIcon />
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+export function DialogHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(OVERLAY_FORM_GROUP_CLASS, "text-left", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogFooter({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-wrap justify-end gap-layout-element", className)}
+      {...props}
+    />
+  );
+}
+
+export function DialogTitle({
+  className,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        "font-display text-2xl leading-tight tracking-[-0.03em] text-on-surface",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function DialogDescription({
+  className,
+  ...props
+}: ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-sm leading-6 text-on-surface-variant", className)}
+      {...props}
+    />
+  );
+}

package/src/overlays/index.ts

@@ -0,0 +1,31 @@
+/** Stable category path for `@you-agent-factory/components/overlays`. */
+export const COMPONENTS_CATEGORY = "overlays" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./collapsible";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+export type { DialogContentProps } from "./dialog";
+export {
+  OVERLAY_DIALOG_BODY_CLASS,
+  OVERLAY_DIALOG_CONTENT_SHELL_CLASS,
+  OVERLAY_FORM_GROUP_CLASS,
+} from "./overlay-layout";
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover";
+export { ScrollArea, ScrollBar } from "./scroll-area";
+export type { ScrollAreaProps, ScrollBarProps } from "./scroll-area";

package/src/overlays/overlay-layout.ts

@@ -0,0 +1,9 @@
+/** Interior stack for dialog header, body, and footer regions. */
+export const OVERLAY_FORM_GROUP_CLASS = "grid gap-layout-tight";
+
+/** Dialog and modal body regions between header and footer. */
+export const OVERLAY_DIALOG_BODY_CLASS = "grid gap-layout-group";
+
+/** Radix dialog content shell spacing for package-owned dialogs. */
+export const OVERLAY_DIALOG_CONTENT_SHELL_CLASS =
+  "grid gap-layout-group p-layout-inset-dialog";

package/src/overlays/popover.tsx

@@ -0,0 +1,29 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import type { ComponentProps } from "react";
+
+import { cn } from "../utilities/cn";
+
+export const Popover = PopoverPrimitive.Root;
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+
+export function PopoverContent({
+  align = "center",
+  className,
+  sideOffset = 10,
+  ...props
+}: ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        className={cn(
+          "z-50 w-72 rounded-2xl border border-outline bg-surface-container-high p-3 text-on-surface shadow-xl outline-none data-[state=closed]:animate-out data-[state=open]:animate-in sm:w-80",
+          className,
+        )}
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}

package/src/overlays/scroll-area.tsx

@@ -0,0 +1,78 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { type ComponentProps, type ComponentRef, forwardRef } from "react";
+
+import { cn } from "../utilities/cn";
+
+const SCROLL_AREA_VIEWPORT_CLASS = cn(
+  "size-full outline-none",
+  "[&>div]:!block [&>div]:size-full",
+  "[scrollbar-width:none] [-ms-overflow-style:none]",
+  "[&::-webkit-scrollbar]:hidden",
+);
+
+export type ScrollAreaProps = ComponentProps<
+  typeof ScrollAreaPrimitive.Root
+> & {
+  viewportClassName?: string;
+  viewportProps?: ComponentProps<typeof ScrollAreaPrimitive.Viewport>;
+};
+
+export const ScrollArea = forwardRef<
+  ComponentRef<typeof ScrollAreaPrimitive.Root>,
+  ScrollAreaProps
+>(function ScrollArea(
+  {
+    children,
+    className,
+    type = "auto",
+    viewportClassName,
+    viewportProps,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <ScrollAreaPrimitive.Root
+      className={cn("relative overflow-hidden", className)}
+      ref={ref}
+      type={type}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        className={cn(SCROLL_AREA_VIEWPORT_CLASS, viewportClassName)}
+        {...viewportProps}
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+});
+
+export type ScrollBarProps = ComponentProps<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+>;
+
+export const ScrollBar = forwardRef<
+  ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  ScrollBarProps
+>(function ScrollBar({ className, orientation = "vertical", ...props }, ref) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      className={cn(
+        "flex touch-none select-none bg-transparent p-px transition-colors",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      orientation={orientation}
+      ref={ref}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-outline-variant transition-colors hover:bg-on-surface-variant" />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+});

package/src/primitives/button-link.tsx

@@ -0,0 +1,22 @@
+import { type AnchorHTMLAttributes, forwardRef } from "react";
+
+import { Button, type ButtonProps } from "./button";
+
+export interface ButtonLinkProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement>,
+    Pick<ButtonProps, "size" | "tone"> {}
+
+export const ButtonLink = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  function ButtonLink(
+    { children, className, size = "default", tone = "default", ...props },
+    ref,
+  ) {
+    return (
+      <Button asChild className={className} size={size} tone={tone}>
+        <a ref={ref} {...props}>
+          {children}
+        </a>
+      </Button>
+    );
+  },
+);