@you-agent-factory/components 0.0.0 → 0.0.2

package/src/overlays/scroll-area.tsx

@@ -1,78 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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>
-    );
-  },
-);

package/src/primitives/button.tsx

@@ -1,258 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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/package-text.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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

@@ -1,61 +0,0 @@
-/** 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";