@you-agent-factory/components 0.0.0 → 0.0.2

package/src/recipes/widget-frame-content.tsx

@@ -1,114 +0,0 @@
-import type { ElementType, HTMLAttributes, ReactNode } from "react";
-
-import { cn } from "../utilities/cn";
-
-import {
-  WIDGET_FRAME_BODY_TEXT_CLASS,
-  WIDGET_FRAME_SECTION_HEADING_CLASS,
-  WIDGET_FRAME_SUBTITLE_CLASS,
-} from "./widget-frame-typography";
-
-const WIDGET_SUBTITLE_CLASS = cn("mt-0", WIDGET_FRAME_SUBTITLE_CLASS);
-const DETAIL_COPY_CLASS = cn("m-0", WIDGET_FRAME_BODY_TEXT_CLASS);
-const EMPTY_STATE_CLASS =
-  "grid min-h-60 items-start gap-1.5 rounded-2xl border border-dashed border-outline-variant bg-surface-container-low p-5 [&_h3]:m-0";
-const EMPTY_STATE_COMPACT_CLASS = "min-h-0";
-
-export interface WidgetSubtitleProps extends HTMLAttributes<HTMLElement> {
-  as?: ElementType;
-  children: ReactNode;
-}
-
-export function WidgetSubtitle({
-  as: Component = "p",
-  children,
-  className,
-  ...props
-}: WidgetSubtitleProps) {
-  return (
-    <Component className={cn(WIDGET_SUBTITLE_CLASS, className)} {...props}>
-      {children}
-    </Component>
-  );
-}
-
-export interface WidgetDetailCopyProps
-  extends HTMLAttributes<HTMLParagraphElement> {
-  children: ReactNode;
-}
-
-export function WidgetDetailCopy({
-  children,
-  className,
-  ...props
-}: WidgetDetailCopyProps) {
-  return (
-    <p className={cn(DETAIL_COPY_CLASS, className)} {...props}>
-      {children}
-    </p>
-  );
-}
-
-export interface WidgetEmptyStateProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-  compact?: boolean;
-}
-
-export function WidgetEmptyState({
-  children,
-  className,
-  compact = false,
-  ...props
-}: WidgetEmptyStateProps) {
-  return (
-    <div
-      className={cn(
-        EMPTY_STATE_CLASS,
-        compact && EMPTY_STATE_COMPACT_CLASS,
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-export interface WidgetEmptyStateTitleProps
-  extends HTMLAttributes<HTMLElement> {
-  as?: ElementType;
-  children: ReactNode;
-}
-
-export function WidgetEmptyStateTitle({
-  as: Component = "h3",
-  children,
-  className,
-  ...props
-}: WidgetEmptyStateTitleProps) {
-  return (
-    <Component
-      className={cn(WIDGET_FRAME_SECTION_HEADING_CLASS, className)}
-      {...props}
-    >
-      {children}
-    </Component>
-  );
-}
-
-export interface WidgetEmptyStateTextProps
-  extends HTMLAttributes<HTMLParagraphElement> {
-  children: ReactNode;
-}
-
-export function WidgetEmptyStateText({
-  children,
-  className,
-  ...props
-}: WidgetEmptyStateTextProps) {
-  return (
-    <p className={cn("m-0", WIDGET_FRAME_BODY_TEXT_CLASS, className)} {...props}>
-      {children}
-    </p>
-  );
-}

package/src/recipes/widget-frame-disclosure.tsx

@@ -1,161 +0,0 @@
-import {
-  forwardRef,
-  type ButtonHTMLAttributes,
-  type HTMLAttributes,
-  type ReactNode,
-} from "react";
-
-import { cn } from "../utilities/cn";
-
-import { WIDGET_FRAME_BODY_TEXT_CLASS } from "./widget-frame-typography";
-
-const WIDGET_FRAME_DISCLOSURE_CLASS = "grid min-w-0 gap-2.5";
-const WIDGET_FRAME_DISCLOSURE_TRIGGER_CLASS = cn(
-  "inline-flex min-h-9 shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-lg border border-outline bg-surface-container-high px-2.5 py-2 text-on-surface-variant transition hover:border-outline-variant hover:bg-af-overlay hover:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-af-accent disabled:cursor-not-allowed disabled:border-outline disabled:bg-surface-container-low disabled:text-on-surface-disabled",
-  WIDGET_FRAME_BODY_TEXT_CLASS,
-);
-const WIDGET_FRAME_DISCLOSURE_ICON_CLASS =
-  "h-3.5 w-3.5 shrink-0 text-current transition-transform duration-150";
-
-export interface WidgetFrameDisclosureProps
-  extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-}
-
-export function WidgetFrameDisclosure({
-  children,
-  className,
-  ...props
-}: WidgetFrameDisclosureProps) {
-  return (
-    <div className={cn(WIDGET_FRAME_DISCLOSURE_CLASS, className)} {...props}>
-      {children}
-    </div>
-  );
-}
-
-export interface WidgetFrameDisclosureIconProps {
-  expanded: boolean;
-  className?: string;
-}
-
-export function WidgetFrameDisclosureIcon({
-  className,
-  expanded,
-}: WidgetFrameDisclosureIconProps) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={cn(
-        WIDGET_FRAME_DISCLOSURE_ICON_CLASS,
-        expanded ? "rotate-180" : "rotate-0",
-        className,
-      )}
-      fill="none"
-      focusable="false"
-      viewBox="0 0 16 16"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M4 6l4 4 4-4"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.8"
-      />
-    </svg>
-  );
-}
-
-type WidgetFrameDisclosureTriggerBaseProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "aria-expanded" | "aria-controls" | "children" | "type"
-> & {
-  controlsID: string;
-  expanded: boolean;
-  onExpandedChange?: (expanded: boolean) => void;
-  type?: "button";
-};
-
-type WidgetFrameDisclosureTriggerWithLabelProps =
-  WidgetFrameDisclosureTriggerBaseProps & {
-    children: ReactNode;
-    "aria-label"?: string;
-  };
-
-type WidgetFrameDisclosureTriggerIconOnlyProps =
-  WidgetFrameDisclosureTriggerBaseProps & {
-    children?: never;
-    "aria-label": string;
-  };
-
-export type WidgetFrameDisclosureTriggerProps =
-  | WidgetFrameDisclosureTriggerWithLabelProps
-  | WidgetFrameDisclosureTriggerIconOnlyProps;
-
-export const WidgetFrameDisclosureTrigger = forwardRef<
-  HTMLButtonElement,
-  WidgetFrameDisclosureTriggerProps
->(function WidgetFrameDisclosureTrigger(
-  {
-    children,
-    className,
-    controlsID,
-    expanded,
-    onClick,
-    onExpandedChange,
-    type = "button",
-    ...props
-  },
-  ref,
-) {
-  const handleClick: ButtonHTMLAttributes<HTMLButtonElement>["onClick"] = (
-    event,
-  ) => {
-    onClick?.(event);
-    if (!event.defaultPrevented) {
-      onExpandedChange?.(!expanded);
-    }
-  };
-
-  return (
-    <button
-      aria-controls={controlsID}
-      aria-expanded={expanded}
-      className={cn(WIDGET_FRAME_DISCLOSURE_TRIGGER_CLASS, className)}
-      onClick={handleClick}
-      ref={ref}
-      type={type}
-      {...props}
-    >
-      <WidgetFrameDisclosureIcon expanded={expanded} />
-      {children}
-    </button>
-  );
-});
-
-export interface WidgetFrameDisclosurePanelProps
-  extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-  expanded: boolean;
-  id: string;
-}
-
-export function WidgetFrameDisclosurePanel({
-  children,
-  className,
-  expanded,
-  id,
-  ...props
-}: WidgetFrameDisclosurePanelProps) {
-  return (
-    <div
-      className={cn("min-w-0", className)}
-      hidden={!expanded}
-      id={id}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}

package/src/recipes/widget-frame-layout.ts

@@ -1,40 +0,0 @@
-import type { CSSProperties } from "react";
-
-import { cn } from "../utilities/cn";
-
-import { WIDGET_FRAME_SUPPORTING_LABELS_CLASS } from "./widget-frame-typography";
-
-export const WIDGET_FRAME_MIN_WIDTH_CLASS = "min-w-0";
-
-export const WIDGET_FRAME_WIDE_BODY_CLASS = "min-h-72";
-
-export const WIDGET_FRAME_RESPONSIVE_SHELL_CLASS = "min-w-0 w-full";
-
-export const WIDGET_FRAME_STORY_SHELL_DATA_ATTR = "data-widget-frame-story-shell";
-
-export const WIDGET_FRAME_OVERFLOW_TOLERANCE_PX = 1;
-
-/** Detail-card layout recipe for description lists inside widget frames. */
-export const widgetFrameDetailCardClass = cn(
-  "[&_dd]:m-0 [&_dl]:m-0 [&_dl]:grid [&_dl]:gap-3 [&_dl_div:first-child]:border-t-0 [&_dl_div:first-child]:pt-0 [&_dl_div]:border-t [&_dl_div]:border-outline [&_dl_div]:pt-3 [&_dt]:mb-1 [&_h3]:mt-0",
-  WIDGET_FRAME_SUPPORTING_LABELS_CLASS,
-);
-
-export function widgetFrameStoryShellStyle(maxWidth: string): {
-  style: CSSProperties;
-} {
-  return {
-    style: {
-      maxWidth,
-      padding: "1rem",
-      width: "100%",
-    },
-  };
-}
-
-export function widgetFrameHasNoHorizontalOverflow(
-  element: HTMLElement,
-  tolerancePx = WIDGET_FRAME_OVERFLOW_TOLERANCE_PX,
-): boolean {
-  return element.scrollWidth <= element.clientWidth + tolerancePx;
-}

package/src/recipes/widget-frame-skeleton.tsx

@@ -1,16 +0,0 @@
-import type { HTMLAttributes } from "react";
-
-import { cn } from "../utilities/cn";
-
-export function WidgetFrameSkeleton({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      aria-hidden="true"
-      className={cn("animate-pulse rounded-xl bg-af-overlay", className)}
-      {...props}
-    />
-  );
-}

package/src/recipes/widget-frame-states.tsx

@@ -1,99 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-import { cn } from "../utilities/cn";
-
-import { WidgetFrameSkeleton } from "./widget-frame-skeleton";
-
-const WIDGET_STATE_PANEL_CLASS = "grid gap-2";
-const WIDGET_ERROR_STATE_CLASS =
-  "rounded-2xl border border-af-danger-border bg-error-container p-5 text-on-error-container";
-const WIDGET_SUCCESS_STATE_CLASS =
-  "rounded-2xl border border-af-success-border bg-success-container p-5 text-on-success-container";
-const WIDGET_LOADING_PLACEHOLDER_CLASS = "grid gap-2 pt-2";
-
-export interface WidgetLoadingStateProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-  placeholder?: ReactNode;
-  showDefaultPlaceholder?: boolean;
-}
-
-export function WidgetLoadingState({
-  children,
-  className,
-  placeholder,
-  showDefaultPlaceholder = true,
-  ...props
-}: WidgetLoadingStateProps) {
-  const resolvedPlaceholder =
-    placeholder ??
-    (showDefaultPlaceholder ? (
-      <>
-        <WidgetFrameSkeleton className="h-4 w-full max-w-48" />
-        <WidgetFrameSkeleton className="h-24 w-full" />
-        <WidgetFrameSkeleton className="h-4 w-full max-w-48" />
-      </>
-    ) : null);
-
-  return (
-    <div
-      aria-busy="true"
-      className={cn(WIDGET_STATE_PANEL_CLASS, className)}
-      role="status"
-      {...props}
-    >
-      {children}
-      {resolvedPlaceholder ? (
-        <div
-          aria-hidden="true"
-          className={WIDGET_LOADING_PLACEHOLDER_CLASS}
-        >
-          {resolvedPlaceholder}
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-export interface WidgetErrorStateProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-}
-
-export function WidgetErrorState({
-  children,
-  className,
-  ...props
-}: WidgetErrorStateProps) {
-  return (
-    <div
-      className={cn(WIDGET_ERROR_STATE_CLASS, WIDGET_STATE_PANEL_CLASS, className)}
-      role="alert"
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-export interface WidgetSuccessStateProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-}
-
-export function WidgetSuccessState({
-  children,
-  className,
-  ...props
-}: WidgetSuccessStateProps) {
-  return (
-    <div
-      className={cn(
-        WIDGET_SUCCESS_STATE_CLASS,
-        WIDGET_STATE_PANEL_CLASS,
-        className,
-      )}
-      role="status"
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}

package/src/recipes/widget-frame-typography.ts

@@ -1,19 +0,0 @@
-/** Section heading typography for widget frame titles and empty-state headings. */
-export const WIDGET_FRAME_SECTION_HEADING_CLASS =
-  "text-title-large uppercase text-on-surface";
-
-/** Body copy typography for widget frame detail regions. */
-export const WIDGET_FRAME_BODY_TEXT_CLASS =
-  "text-body-medium text-on-surface-variant";
-
-/** Monospace subtitle typography for metric and metadata values. */
-export const WIDGET_FRAME_SUBTITLE_CLASS =
-  "font-mono text-display-small text-on-surface-variant [overflow-wrap:anywhere]";
-
-/** Supporting label typography for description-list terms. */
-export const WIDGET_FRAME_SUPPORTING_LABEL_CLASS =
-  "text-label-medium uppercase text-on-surface-subtle";
-
-/** Description-list label styling for widget detail cards. */
-export const WIDGET_FRAME_SUPPORTING_LABELS_CLASS =
-  "[&_dt]:text-label-medium [&_dt]:uppercase [&_dt]:text-on-surface-subtle";

package/src/recipes/widget-frame.tsx

@@ -1,84 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-import { cn } from "../utilities/cn";
-
-import { WIDGET_FRAME_BODY_TEXT_CLASS } from "./widget-frame-typography";
-import {
-  WIDGET_FRAME_MIN_WIDTH_CLASS,
-  WIDGET_FRAME_WIDE_BODY_CLASS,
-  widgetFrameDetailCardClass,
-} from "./widget-frame-layout";
-
-const WIDGET_FRAME_SHELL_CLASS =
-  "flex min-w-0 flex-col rounded-lg border border-outline bg-surface-container-high text-on-surface shadow-af-card";
-const WIDGET_FRAME_SCROLL_CLASS = "overflow-hidden";
-const WIDGET_FRAME_HEADER_CLASS =
-  "relative z-10 flex min-h-13 shrink-0 items-center justify-between gap-3 border-b border-outline bg-surface-container-high px-3.5 py-3";
-const WIDGET_FRAME_HEADER_TOOLS_CLASS =
-  "flex min-w-0 shrink-0 items-center gap-2";
-const WIDGET_FRAME_BODY_SCROLL_CLASS = "min-h-0 flex-1 overflow-auto";
-const WIDGET_FRAME_BODY_CLASS = cn(
-  "grid min-h-0 gap-2.5 px-3.5 pt-3.5 pb-4 [&>*]:pb-1 [&_p]:m-0",
-  WIDGET_FRAME_BODY_TEXT_CLASS,
-);
-
-export interface WidgetFrameProps {
-  bodyClassName?: string;
-  bodyProps?: HTMLAttributes<HTMLDivElement>;
-  bodyScroll?: boolean;
-  children: ReactNode;
-  className?: string;
-  headerAction?: ReactNode;
-  title: string;
-  wide?: boolean;
-}
-
-export function WidgetFrame({
-  bodyClassName,
-  bodyProps,
-  bodyScroll = true,
-  children,
-  className,
-  headerAction,
-  title,
-  wide = false,
-}: WidgetFrameProps) {
-  const cardClassName = cn(
-    WIDGET_FRAME_SHELL_CLASS,
-    WIDGET_FRAME_MIN_WIDTH_CLASS,
-    widgetFrameDetailCardClass,
-    wide && WIDGET_FRAME_WIDE_BODY_CLASS,
-    bodyScroll && WIDGET_FRAME_SCROLL_CLASS,
-    className,
-  );
-  const cardBodyClassName = cn(WIDGET_FRAME_BODY_CLASS, bodyClassName);
-  const bodyClassNames = cn(
-    "min-h-0 flex-1",
-    bodyScroll && WIDGET_FRAME_BODY_SCROLL_CLASS,
-    cardBodyClassName,
-  );
-
-  return (
-    <article aria-label={title} className={cardClassName}>
-      <header className={WIDGET_FRAME_HEADER_CLASS}>
-        <div className="min-w-0 flex-1">
-          <h3 className="m-0 min-w-0 flex-1 text-title-large uppercase text-on-surface [overflow-wrap:anywhere]">
-            {title}
-          </h3>
-        </div>
-        <div className={WIDGET_FRAME_HEADER_TOOLS_CLASS}>
-          {headerAction ?? (
-            <span
-              aria-hidden="true"
-              className="block h-10 w-10 shrink-0"
-              data-widget-frame-header-action-spacer="true"
-            />
-          )}
-        </div>
-      </header>
-      <div className={bodyClassNames} {...bodyProps}>
-        {children}
-      </div>
-    </article>
-  );
-}

package/src/testing/index.ts

@@ -1,13 +0,0 @@
-/** Stable category path for `@you-agent-factory/components/testing`. */
-export const COMPONENTS_CATEGORY = "testing" as const;
-
-export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
-
-export {
-  render,
-  renderPackageComponent,
-  screen,
-  userEvent,
-  waitFor,
-  within,
-} from "./render";

package/src/testing/render.tsx

@@ -1,16 +0,0 @@
-import {
-  render,
-  type RenderOptions,
-  type RenderResult,
-} from "@testing-library/react";
-import type { ReactElement } from "react";
-
-export function renderPackageComponent(
-  ui: ReactElement,
-  options?: Omit<RenderOptions, "wrapper">,
-): RenderResult {
-  return render(ui, options);
-}
-
-export { fireEvent, render, screen, within, waitFor } from "@testing-library/react";
-export { default as userEvent } from "@testing-library/user-event";

package/src/utilities/cn.ts

@@ -1,5 +0,0 @@
-export function cn(
-  ...classes: Array<false | null | string | undefined>
-): string {
-  return classes.filter(Boolean).join(" ");
-}