@you-agent-factory/components 0.0.0

package/src/primitives/button.tsx

@@ -0,0 +1,258 @@
+import { Slot } from "@radix-ui/react-slot";
+import {
+  type ButtonHTMLAttributes,
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  type Ref,
+} from "react";
+
+import { cn } from "../utilities/cn";
+
+const BUTTON_LOADING_CONTENT_CLASS = "inline-flex items-center justify-center gap-2";
+const BUTTON_LOADING_HIDDEN_CONTENT_CLASS = "opacity-0";
+const BUTTON_LOADING_OVERLAY_CLASS =
+  "pointer-events-none absolute inset-0 inline-flex items-center justify-center";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+  loading?: boolean;
+  tone?:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "warning";
+  size?: "default" | "icon" | "iconPill" | "lg" | "pill" | "sm";
+}
+
+const BUTTON_BASE_CLASS =
+  "inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-af-focus-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:border-outline disabled:bg-surface-container-low disabled:text-on-surface-disabled";
+const BUTTON_TONE_CLASS: Record<NonNullable<ButtonProps["tone"]>, string> = {
+  default:
+    "border-primary bg-primary text-on-primary hover:border-on-primary-container hover:bg-on-primary-container",
+  destructive:
+    "border-error bg-error text-on-error hover:border-af-danger-hover hover:bg-af-danger-hover",
+  ghost:
+    "border-transparent bg-transparent text-on-surface-variant hover:bg-af-overlay hover:text-on-surface",
+  outline:
+    "border-outline bg-surface-container-high text-on-surface hover:border-outline-variant hover:bg-af-overlay",
+  secondary:
+    "border-outline-variant bg-surface-container-low text-primary hover:border-primary hover:bg-af-overlay",
+  warning:
+    "border-af-warning-border bg-warning-container text-on-warning-container hover:border-af-warning-border hover:bg-warning-container hover:text-on-warning-container",
+};
+const BUTTON_SIZE_CLASS: Record<NonNullable<ButtonProps["size"]>, string> = {
+  default: "px-4 py-2.5 text-sm",
+  icon: "h-11 w-11 px-0 py-0",
+  iconPill: "h-10 min-h-10 w-10 rounded-full px-0 py-0",
+  lg: "px-5 py-3 text-base",
+  pill: "min-h-9 rounded-full px-3 py-2 text-xs",
+  sm: "min-h-9 rounded-lg px-3 py-2 text-xs",
+};
+
+export const buttonVariants = ({
+  className,
+  size = "default",
+  tone = "default",
+}: Pick<ButtonProps, "className" | "size" | "tone">) =>
+  cn(
+    BUTTON_BASE_CLASS,
+    BUTTON_TONE_CLASS[tone],
+    BUTTON_SIZE_CLASS[size],
+    className,
+  );
+
+function ButtonLoadingSpinner() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="size-4 animate-spin"
+      fill="none"
+      focusable="false"
+      viewBox="0 0 16 16"
+    >
+      <circle
+        className="text-on-surface-disabled"
+        cx="8"
+        cy="8"
+        r="6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M8 2a6 6 0 0 1 6 6"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+function renderButtonContent(
+  children: ReactNode,
+  loading: boolean,
+): ReactNode {
+  if (!loading) {
+    return children;
+  }
+
+  return (
+    <>
+      <span
+        className={cn(
+          BUTTON_LOADING_CONTENT_CLASS,
+          BUTTON_LOADING_HIDDEN_CONTENT_CLASS,
+        )}
+      >
+        {children}
+      </span>
+      <span aria-hidden="true" className={BUTTON_LOADING_OVERLAY_CLASS}>
+        <ButtonLoadingSpinner />
+      </span>
+    </>
+  );
+}
+
+function suppressSlottedActivation(event: KeyboardEvent | MouseEvent): void {
+  event.preventDefault();
+  const nativeEvent = event.nativeEvent;
+  if (typeof nativeEvent.stopImmediatePropagation === "function") {
+    nativeEvent.stopImmediatePropagation();
+    return;
+  }
+  event.stopPropagation();
+}
+
+function shouldSuppressSlottedKeyboardActivation(
+  event: KeyboardEvent,
+): boolean {
+  return event.key === "Enter" || event.key === " ";
+}
+
+type SlottedChildProps = {
+  "aria-busy"?: boolean | "true" | "false";
+  "aria-disabled"?: boolean | "true" | "false";
+  className?: string;
+  href?: string;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+  ref?: Ref<HTMLElement>;
+};
+
+function mergeRefs<T>(...refs: Array<Ref<T> | undefined>): Ref<T> {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref && typeof ref === "object") {
+        ref.current = value;
+      }
+    }
+  };
+}
+
+function renderBlockedAsChildButton(
+  {
+    children,
+    className,
+    loading,
+    props,
+    ref,
+    size,
+    tone,
+  }: {
+    children: ReactNode;
+    className?: string;
+    loading: boolean;
+    props: Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">;
+    ref: Ref<HTMLButtonElement>;
+    size: NonNullable<ButtonProps["size"]>;
+    tone: NonNullable<ButtonProps["tone"]>;
+  },
+) {
+  const child = Children.only(children);
+  if (!isValidElement<SlottedChildProps>(child)) {
+    throw new Error("Button with asChild requires a single React element child.");
+  }
+
+  return cloneElement(child, {
+    ...props,
+    "aria-busy": loading || undefined,
+    "aria-disabled": true,
+    className: buttonVariants({
+      className: cn("pointer-events-none", className, child.props.className),
+      size,
+      tone,
+    }),
+    href: undefined,
+    onClick: suppressSlottedActivation,
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => {
+      if (shouldSuppressSlottedKeyboardActivation(event)) {
+        suppressSlottedActivation(event);
+      }
+    },
+    ref: mergeRefs(ref, child.props.ref),
+  });
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      asChild = false,
+      children,
+      className,
+      disabled,
+      loading = false,
+      onClick,
+      onKeyDown,
+      size = "default",
+      tone = "default",
+      type = "button",
+      ...props
+    },
+    ref,
+  ) {
+    const isInteractionBlocked = disabled || loading;
+    const showLoadingOverlay = loading && !asChild;
+
+    if (asChild && isInteractionBlocked) {
+      return renderBlockedAsChildButton({
+        children,
+        className,
+        loading,
+        props,
+        ref,
+        size,
+        tone,
+      });
+    }
+
+    const Component = asChild ? Slot : "button";
+
+    return (
+      <Component
+        aria-busy={loading || undefined}
+        className={buttonVariants({
+          className: cn(showLoadingOverlay && "relative", className),
+          size,
+          tone,
+        })}
+        disabled={asChild ? undefined : isInteractionBlocked}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        ref={ref}
+        {...(!asChild ? { type } : undefined)}
+        {...props}
+      >
+        {renderButtonContent(children, showLoadingOverlay)}
+      </Component>
+    );
+  },
+);

package/src/primitives/icon-button-shell.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from "react";
+
+import { cn } from "../utilities/cn";
+import { Button, type ButtonProps } from "./button";
+
+const ICON_BUTTON_SHELL_BASE_CLASS = "relative shrink-0";
+const ICON_BUTTON_SHELL_SIZE_CLASS = "h-10 w-10 rounded-lg";
+const ICON_BUTTON_SHELL_TONE_CLASS = {
+  dangerGhost:
+    "text-on-surface-subtle hover:border-af-danger-border hover:bg-error-container hover:text-on-error-container",
+} as const;
+
+type IconButtonShellTone =
+  | ButtonProps["tone"]
+  | keyof typeof ICON_BUTTON_SHELL_TONE_CLASS;
+
+export interface IconButtonShellProps
+  extends Omit<ButtonProps, "size" | "tone"> {
+  tone?: IconButtonShellTone;
+}
+
+export const IconButtonShell = forwardRef<
+  HTMLButtonElement,
+  IconButtonShellProps
+>(function IconButtonShell(
+  { className, tone = "outline", ...props },
+  ref,
+) {
+  const buttonTone = tone === "dangerGhost" ? "ghost" : tone;
+  const toneClassName =
+    tone === "dangerGhost"
+      ? ICON_BUTTON_SHELL_TONE_CLASS.dangerGhost
+      : undefined;
+
+  return (
+    <Button
+      className={cn(
+        ICON_BUTTON_SHELL_BASE_CLASS,
+        ICON_BUTTON_SHELL_SIZE_CLASS,
+        toneClassName,
+        className,
+      )}
+      ref={ref}
+      size="icon"
+      tone={buttonTone}
+      {...props}
+    />
+  );
+});

package/src/primitives/index.ts

@@ -0,0 +1,31 @@
+/** Stable category path for `@you-agent-factory/components/primitives`. */
+export const COMPONENTS_CATEGORY = "primitives" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+
+export { Button, buttonVariants } from "./button";
+export type { ButtonProps } from "./button";
+export { ButtonLink } from "./button-link";
+export type { ButtonLinkProps } from "./button-link";
+export { IconButtonShell } from "./icon-button-shell";
+export type { IconButtonShellProps } from "./icon-button-shell";
+export { PackageText } from "./package-text";
+export type { PackageTextProps, PackageTextVariant } from "./package-text";
+
+export { Code, Heading, Label, Text } from "./typography";
+export type { CodeProps, HeadingProps, LabelProps, TextProps, TextVariant } from "./typography";
+
+export {
+  BODY_CODE_CLASS,
+  BODY_TEXT_CLASS,
+  CAPTION_TEXT_CLASS,
+  DENSE_BODY_TEXT_CLASS,
+  MUTED_TEXT_CLASS,
+  PAGE_HEADING_CLASS,
+  SECTION_HEADING_CLASS,
+  SUPPORTING_CODE_CLASS,
+  SUPPORTING_LABEL_CLASS,
+  SUPPORTING_TEXT_CLASS,
+  TEXT_TRUNCATE_CLASS,
+  TEXT_WRAP_CLASS,
+} from "./typography-roles";

package/src/primitives/package-text.tsx

@@ -0,0 +1,29 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cn } from "../utilities/cn";
+
+export type PackageTextVariant = "body" | "title";
+
+export type PackageTextProps = ComponentPropsWithoutRef<"p"> & {
+  variant?: PackageTextVariant;
+};
+
+export function PackageText({
+  children,
+  className,
+  variant = "body",
+  ...props
+}: PackageTextProps) {
+  return (
+    <p
+      className={cn(
+        variant === "title" ? "text-title-large" : "text-body-medium",
+        "text-on-surface",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}

package/src/primitives/typography-roles.ts

@@ -0,0 +1,12 @@
+export const PAGE_HEADING_CLASS = "af-page-heading";
+export const SECTION_HEADING_CLASS = "af-section-heading";
+export const BODY_TEXT_CLASS = "af-body-text";
+export const SUPPORTING_TEXT_CLASS = "af-supporting-text";
+export const MUTED_TEXT_CLASS = "af-muted-text";
+export const CAPTION_TEXT_CLASS = "af-caption-text";
+export const DENSE_BODY_TEXT_CLASS = "af-dense-body-text";
+export const SUPPORTING_LABEL_CLASS = "af-supporting-label";
+export const BODY_CODE_CLASS = "af-body-code";
+export const SUPPORTING_CODE_CLASS = "af-supporting-code";
+export const TEXT_TRUNCATE_CLASS = "af-text-truncate";
+export const TEXT_WRAP_CLASS = "af-text-wrap";

package/src/primitives/typography.tsx

@@ -0,0 +1,165 @@
+import {
+  type ElementType,
+  forwardRef,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+
+import { cn } from "../utilities/cn";
+import {
+  BODY_CODE_CLASS,
+  BODY_TEXT_CLASS,
+  CAPTION_TEXT_CLASS,
+  DENSE_BODY_TEXT_CLASS,
+  MUTED_TEXT_CLASS,
+  PAGE_HEADING_CLASS,
+  SECTION_HEADING_CLASS,
+  SUPPORTING_CODE_CLASS,
+  SUPPORTING_LABEL_CLASS,
+  SUPPORTING_TEXT_CLASS,
+  TEXT_TRUNCATE_CLASS,
+  TEXT_WRAP_CLASS,
+} from "./typography-roles";
+
+type TypographyElementProps = HTMLAttributes<HTMLElement> & {
+  as?: ElementType;
+  children?: ReactNode;
+  dateTime?: string;
+  htmlFor?: string;
+  type?: "button" | "reset" | "submit";
+};
+
+type TypographyOverflowProps = {
+  truncate?: boolean;
+  wrap?: boolean;
+};
+
+function typographyOverflowClass({
+  truncate,
+  wrap,
+}: TypographyOverflowProps): string | undefined {
+  if (truncate) {
+    return TEXT_TRUNCATE_CLASS;
+  }
+
+  if (wrap) {
+    return TEXT_WRAP_CLASS;
+  }
+
+  return undefined;
+}
+
+const TEXT_VARIANT_CLASS = {
+  body: BODY_TEXT_CLASS,
+  supporting: SUPPORTING_TEXT_CLASS,
+  muted: MUTED_TEXT_CLASS,
+  caption: CAPTION_TEXT_CLASS,
+  dense: DENSE_BODY_TEXT_CLASS,
+} as const;
+
+export type TextVariant = keyof typeof TEXT_VARIANT_CLASS;
+
+export interface TextProps
+  extends TypographyElementProps,
+    TypographyOverflowProps {
+  variant?: TextVariant;
+}
+
+export const Text = forwardRef<HTMLElement, TextProps>(function Text(
+  {
+    as: Component = "p",
+    children,
+    className,
+    truncate,
+    variant = "body",
+    wrap,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <Component
+      className={cn(
+        TEXT_VARIANT_CLASS[variant],
+        typographyOverflowClass({ truncate, wrap }),
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});
+
+export interface HeadingProps
+  extends TypographyElementProps,
+    TypographyOverflowProps {
+  level?: "page" | "section";
+}
+
+export const Heading = forwardRef<HTMLElement, HeadingProps>(function Heading(
+  { as, children, className, level = "section", truncate, wrap, ...props },
+  ref,
+) {
+  const Component = as ?? (level === "page" ? "h1" : "h3");
+
+  return (
+    <Component
+      className={cn(
+        level === "page" ? PAGE_HEADING_CLASS : SECTION_HEADING_CLASS,
+        typographyOverflowClass({ truncate, wrap }),
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});
+
+export interface LabelProps
+  extends TypographyElementProps,
+    TypographyOverflowProps {}
+
+export const Label = forwardRef<HTMLElement, LabelProps>(function Label(
+  { as: Component = "span", children, className, truncate, wrap, ...props },
+  ref,
+) {
+  return (
+    <Component
+      className={cn(
+        SUPPORTING_LABEL_CLASS,
+        typographyOverflowClass({ truncate, wrap }),
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});
+
+export interface CodeProps extends TypographyElementProps {
+  size?: "body" | "supporting";
+}
+
+export const Code = forwardRef<HTMLElement, CodeProps>(function Code(
+  { as: Component = "code", children, className, size = "body", ...props },
+  ref,
+) {
+  return (
+    <Component
+      className={cn(
+        size === "body" ? BODY_CODE_CLASS : SUPPORTING_CODE_CLASS,
+        className,
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});

package/src/recipes/index.ts

@@ -0,0 +1,61 @@
+/** Stable category path for `@you-agent-factory/components/recipes`. */
+export const COMPONENTS_CATEGORY = "recipes" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+
+export {
+  WidgetFrameDisclosure,
+  WidgetFrameDisclosureIcon,
+  WidgetFrameDisclosurePanel,
+  WidgetFrameDisclosureTrigger,
+} from "./widget-frame-disclosure";
+export type {
+  WidgetFrameDisclosureIconProps,
+  WidgetFrameDisclosurePanelProps,
+  WidgetFrameDisclosureProps,
+  WidgetFrameDisclosureTriggerProps,
+} from "./widget-frame-disclosure";
+export {
+  WidgetDetailCopy,
+  WidgetEmptyState,
+  WidgetEmptyStateText,
+  WidgetEmptyStateTitle,
+  WidgetSubtitle,
+} from "./widget-frame-content";
+export type {
+  WidgetDetailCopyProps,
+  WidgetEmptyStateProps,
+  WidgetEmptyStateTextProps,
+  WidgetEmptyStateTitleProps,
+  WidgetSubtitleProps,
+} from "./widget-frame-content";
+export { WidgetFrameSkeleton } from "./widget-frame-skeleton";
+export {
+  WidgetErrorState,
+  WidgetLoadingState,
+  WidgetSuccessState,
+} from "./widget-frame-states";
+export type {
+  WidgetErrorStateProps,
+  WidgetLoadingStateProps,
+  WidgetSuccessStateProps,
+} from "./widget-frame-states";
+export {
+  WIDGET_FRAME_MIN_WIDTH_CLASS,
+  WIDGET_FRAME_OVERFLOW_TOLERANCE_PX,
+  WIDGET_FRAME_RESPONSIVE_SHELL_CLASS,
+  WIDGET_FRAME_STORY_SHELL_DATA_ATTR,
+  WIDGET_FRAME_WIDE_BODY_CLASS,
+  widgetFrameDetailCardClass,
+  widgetFrameHasNoHorizontalOverflow,
+  widgetFrameStoryShellStyle,
+} from "./widget-frame-layout";
+export { WidgetFrame } from "./widget-frame";
+export type { WidgetFrameProps } from "./widget-frame";
+export {
+  WIDGET_FRAME_BODY_TEXT_CLASS,
+  WIDGET_FRAME_SECTION_HEADING_CLASS,
+  WIDGET_FRAME_SUBTITLE_CLASS,
+  WIDGET_FRAME_SUPPORTING_LABEL_CLASS,
+  WIDGET_FRAME_SUPPORTING_LABELS_CLASS,
+} from "./widget-frame-typography";