@you-agent-factory/components 0.0.0 → 0.0.2

package/src/data-display/code-panel.tsx

@@ -1,67 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-
-import { cn } from "../utilities/cn";
-
-type CodePanelPadding = "compact" | "default";
-type CodePanelSurface = "high" | "low";
-type CodePanelMaxHeight = "none" | "sm" | "md" | "lg";
-
-export interface CodePanelProps extends HTMLAttributes<HTMLPreElement> {
-  maxHeight?: CodePanelMaxHeight;
-  padding?: CodePanelPadding;
-  surface?: CodePanelSurface;
-}
-
-const CODE_PANEL_PADDING_CLASS: Record<CodePanelPadding, string> = {
-  compact: "p-2",
-  default: "p-3",
-};
-const CODE_PANEL_SURFACE_CLASS: Record<CodePanelSurface, string> = {
-  high: "bg-surface-container-high",
-  low: "bg-surface-container-low",
-};
-const CODE_PANEL_MAX_HEIGHT_CLASS: Record<CodePanelMaxHeight, string> = {
-  none: "",
-  sm: "max-h-48 overflow-y-auto",
-  md: "max-h-72 overflow-y-auto",
-  lg: "max-h-96 overflow-y-auto",
-};
-
-const CODE_PANEL_BODY_CODE_CLASS = "font-mono text-code-medium text-code";
-
-const CODE_PANEL_CONTAINMENT_CLASS =
-  "m-0 min-w-0 w-full max-w-full overflow-x-auto whitespace-pre-wrap rounded-lg border border-outline [overflow-wrap:anywhere] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary";
-
-export function codePanelVariants({
-  className,
-  maxHeight = "none",
-  padding = "compact",
-  surface = "high",
-}: Pick<CodePanelProps, "className" | "maxHeight" | "padding" | "surface">) {
-  return cn(
-    CODE_PANEL_CONTAINMENT_CLASS,
-    CODE_PANEL_PADDING_CLASS[padding],
-    CODE_PANEL_SURFACE_CLASS[surface],
-    CODE_PANEL_MAX_HEIGHT_CLASS[maxHeight],
-    CODE_PANEL_BODY_CODE_CLASS,
-    className,
-  );
-}
-
-export const CodePanel = forwardRef<HTMLPreElement, CodePanelProps>(
-  function CodePanel(
-    { className, maxHeight = "none", padding, surface, tabIndex, ...props },
-    ref,
-  ) {
-    const isScrollable = maxHeight !== "none";
-
-    return (
-      <pre
-        className={codePanelVariants({ className, maxHeight, padding, surface })}
-        ref={ref}
-        tabIndex={tabIndex ?? (isScrollable ? 0 : undefined)}
-        {...props}
-      />
-    );
-  },
-);

package/src/data-display/data-table.tsx

@@ -1,180 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-import { cn } from "../utilities/cn";
-import {
-  Table,
-  type TableSize,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "./table";
-
-export type DataTableState = "empty" | "error" | "loading" | "success";
-
-export interface DataTableColumn<Row> {
-  cell: (row: Row) => ReactNode;
-  header: ReactNode;
-  id: string;
-  cellClassName?: string;
-  headerClassName?: string;
-}
-
-export interface DataTableProps<Row> {
-  columns: DataTableColumn<Row>[];
-  data: Row[];
-  getRowKey: (row: Row) => string;
-  ariaLabel?: string;
-  caption?: ReactNode;
-  containerClassName?: string;
-  containerProps?: HTMLAttributes<HTMLDivElement>;
-  emptyMessage?: ReactNode;
-  errorMessage?: ReactNode;
-  loadingMessage?: ReactNode;
-  rowClassName?: (row: Row) => string | undefined;
-  size?: TableSize;
-  state?: DataTableState;
-  tableClassName?: string;
-}
-
-function DataTablePlaceholderBar({ className }: { className?: string }) {
-  return (
-    <div
-      aria-hidden="true"
-      className={cn("animate-pulse rounded-xl bg-af-overlay", className)}
-    />
-  );
-}
-
-function DataTableStatusRow({
-  children,
-  colSpan,
-  role,
-  ariaBusy,
-  ariaLive,
-  cellClassName,
-}: {
-  children: ReactNode;
-  colSpan: number;
-  role: "alert" | "status";
-  ariaBusy?: boolean;
-  ariaLive?: "assertive" | "polite";
-  cellClassName?: string;
-}) {
-  return (
-    <TableRow>
-      <TableCell className={cellClassName} colSpan={colSpan}>
-        <div
-          aria-busy={ariaBusy || undefined}
-          aria-live={ariaLive}
-          role={role}
-        >
-          {children}
-        </div>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export function DataTable<Row>({
-  columns,
-  data,
-  getRowKey,
-  ariaLabel,
-  caption,
-  containerClassName,
-  containerProps,
-  emptyMessage,
-  errorMessage,
-  loadingMessage,
-  rowClassName,
-  size,
-  state = "success",
-  tableClassName,
-}: DataTableProps<Row>) {
-  const renderBody = () => {
-    if (state === "loading") {
-      return (
-        <DataTableStatusRow
-          ariaBusy
-          ariaLive="polite"
-          colSpan={columns.length}
-          role="status"
-        >
-          <div className="grid gap-3 py-1">
-            {loadingMessage}
-            <div aria-hidden="true" className="grid gap-2">
-              <DataTablePlaceholderBar className="h-4 w-full max-w-48" />
-              <DataTablePlaceholderBar className="h-8 w-full" />
-              <DataTablePlaceholderBar className="h-4 w-full max-w-48" />
-            </div>
-          </div>
-        </DataTableStatusRow>
-      );
-    }
-
-    if (state === "error") {
-      return (
-        <DataTableStatusRow
-          ariaLive="assertive"
-          cellClassName="text-af-text-subtle"
-          colSpan={columns.length}
-          role="alert"
-        >
-          {errorMessage}
-        </DataTableStatusRow>
-      );
-    }
-
-    if (state === "empty" || (state === "success" && data.length === 0)) {
-      return (
-        <DataTableStatusRow
-          ariaLive="polite"
-          cellClassName="text-af-text-subtle"
-          colSpan={columns.length}
-          role="status"
-        >
-          {emptyMessage}
-        </DataTableStatusRow>
-      );
-    }
-
-    return data.map((row) => (
-      <TableRow className={rowClassName?.(row)} key={getRowKey(row)}>
-        {columns.map((column) => (
-          <TableCell className={column.cellClassName} key={column.id}>
-            {column.cell(row)}
-          </TableCell>
-        ))}
-      </TableRow>
-    ));
-  };
-
-  return (
-    <Table
-      aria-label={ariaLabel}
-      className={tableClassName}
-      containerClassName={containerClassName}
-      containerProps={containerProps}
-      size={size}
-    >
-      {caption ? <TableCaption>{caption}</TableCaption> : null}
-      <TableHeader>
-        <TableRow>
-          {columns.map((column) => (
-            <TableHead
-              className={column.headerClassName}
-              key={column.id}
-              scope="col"
-            >
-              {column.header}
-            </TableHead>
-          ))}
-        </TableRow>
-      </TableHeader>
-      <TableBody>{renderBody()}</TableBody>
-    </Table>
-  );
-}

package/src/data-display/description-list.tsx

@@ -1,24 +0,0 @@
-import { forwardRef, type HTMLAttributes } from "react";
-
-import { BODY_TEXT_CLASS } from "../primitives/typography-roles";
-import { cn } from "../utilities/cn";
-
-export interface DescriptionListProps
-  extends HTMLAttributes<HTMLDListElement> {}
-
-export const DescriptionList = forwardRef<
-  HTMLDListElement,
-  DescriptionListProps
->(function DescriptionList({ className, ...props }, ref) {
-  return (
-    <dl
-      className={cn(
-        "m-0 grid min-w-0 gap-1.5 [&_dd]:m-0 [&_dd]:min-w-0 [&_div]:grid [&_div]:min-w-0 [&_div]:gap-2",
-        BODY_TEXT_CLASS,
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});

package/src/data-display/table-layout.ts

@@ -1,12 +0,0 @@
-/** Wrap long cell content without forcing page-level horizontal overflow. */
-export const tableCellWrapClassName = "min-w-0 [overflow-wrap:anywhere]";
-
-/** Truncate overflowing cell content with ellipsis. */
-export const tableCellTruncateClassName =
-  "block min-w-0 max-w-full truncate whitespace-nowrap";
-
-/** Minimum table width for wide datasets; pair with a narrow scroll container. */
-export const tableMinWidthWideClassName = "min-w-2xl";
-
-/** Scroll container classes for narrow viewport table containment. */
-export const tableNarrowContainerClassName = "min-w-0 overscroll-x-contain";

package/src/data-display/table.tsx

@@ -1,131 +0,0 @@
-import {
-  forwardRef,
-  type HTMLAttributes,
-  type TableHTMLAttributes,
-  type TdHTMLAttributes,
-  type ThHTMLAttributes,
-} from "react";
-
-import { cn } from "../utilities/cn";
-
-export type TableSize = "default" | "dense";
-
-export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
-  containerClassName?: string;
-  containerProps?: HTMLAttributes<HTMLDivElement>;
-  size?: TableSize;
-}
-
-export const Table = forwardRef<HTMLTableElement, TableProps>(function Table(
-  { className, containerClassName, containerProps, size = "default", ...props },
-  ref,
-) {
-  return (
-    <div
-      className={cn(
-        "group/table w-full overflow-x-auto overflow-y-clip rounded-2xl border border-outline",
-        containerClassName,
-      )}
-      data-size={size}
-      {...containerProps}
-    >
-      <table
-        className={cn("w-full caption-bottom text-sm", className)}
-        ref={ref}
-        {...props}
-      />
-    </div>
-  );
-});
-
-export const TableHeader = forwardRef<
-  HTMLTableSectionElement,
-  HTMLAttributes<HTMLTableSectionElement>
->(function TableHeader({ className, ...props }, ref) {
-  return (
-    <thead
-      className={cn("[&_tr]:border-b [&_tr]:border-outline", className)}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-
-export const TableBody = forwardRef<
-  HTMLTableSectionElement,
-  HTMLAttributes<HTMLTableSectionElement>
->(function TableBody({ className, ...props }, ref) {
-  return (
-    <tbody
-      className={cn(
-        "[&_tr:last-child]:border-0 [&_tr]:border-b [&_tr]:border-outline",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-
-export const TableRow = forwardRef<
-  HTMLTableRowElement,
-  HTMLAttributes<HTMLTableRowElement>
->(function TableRow({ className, ...props }, ref) {
-  return (
-    <tr
-      className={cn(
-        "transition-colors hover:bg-af-overlay data-[state=selected]:bg-af-overlay",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-
-export const TableHead = forwardRef<
-  HTMLTableCellElement,
-  ThHTMLAttributes<HTMLTableCellElement>
->(function TableHead({ className, ...props }, ref) {
-  return (
-    <th
-      className={cn(
-        "h-11 px-4 text-left align-middle text-xs font-bold uppercase tracking-[0.08em] text-af-text-subtle",
-        "group-data-[size=dense]/table:h-8 group-data-[size=dense]/table:px-3 group-data-[size=dense]/table:py-2",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-
-export const TableCell = forwardRef<
-  HTMLTableCellElement,
-  TdHTMLAttributes<HTMLTableCellElement>
->(function TableCell({ className, ...props }, ref) {
-  return (
-    <td
-      className={cn(
-        "min-w-0 px-4 py-3 align-middle text-on-surface",
-        "group-data-[size=dense]/table:px-3 group-data-[size=dense]/table:py-2",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-
-export const TableCaption = forwardRef<
-  HTMLTableCaptionElement,
-  HTMLAttributes<HTMLTableCaptionElement>
->(function TableCaption({ className, ...props }, ref) {
-  return (
-    <caption
-      className={cn("mt-4 text-sm text-af-text-subtle", className)}
-      ref={ref}
-      {...props}
-    />
-  );
-});

package/src/feedback/alert-panel-semantics.ts

@@ -1,75 +0,0 @@
-import type { AlertPanelTone, AlertPanelVariant } from "./alert-panel";
-
-export type AlertPanelSemanticVariant =
-  | "danger"
-  | "empty"
-  | "error"
-  | "info"
-  | "loading"
-  | "neutral"
-  | "success"
-  | "warning";
-
-export interface AlertPanelSemanticConfig {
-  busy?: boolean;
-  role: "alert" | "status";
-  statusLabel?: string;
-  tone: AlertPanelTone;
-  variant: AlertPanelVariant;
-}
-
-export const ALERT_PANEL_SEMANTIC_CONFIG: Record<
-  AlertPanelSemanticVariant,
-  AlertPanelSemanticConfig
-> = {
-  neutral: {
-    role: "status",
-    tone: "neutral",
-    variant: "default",
-  },
-  info: {
-    role: "status",
-    tone: "info",
-    variant: "default",
-  },
-  success: {
-    role: "status",
-    tone: "success",
-    variant: "default",
-  },
-  warning: {
-    role: "alert",
-    tone: "warning",
-    variant: "default",
-  },
-  danger: {
-    role: "alert",
-    tone: "danger",
-    variant: "default",
-  },
-  error: {
-    role: "alert",
-    statusLabel: "Error",
-    tone: "error",
-    variant: "default",
-  },
-  loading: {
-    busy: true,
-    role: "status",
-    statusLabel: "Loading",
-    tone: "neutral",
-    variant: "loading",
-  },
-  empty: {
-    role: "status",
-    statusLabel: "Empty",
-    tone: "neutral",
-    variant: "empty",
-  },
-};
-
-export function resolveAlertPanelSemantic(
-  semantic: AlertPanelSemanticVariant,
-): AlertPanelSemanticConfig {
-  return ALERT_PANEL_SEMANTIC_CONFIG[semantic];
-}

package/src/feedback/alert-panel.tsx

@@ -1,187 +0,0 @@
-import {
-  type ElementType,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode,
-} from "react";
-
-import { SurfacePanel, type SurfacePanelProps } from "../layout/surface-panel";
-import { cn } from "../utilities/cn";
-import {
-  type AlertPanelSemanticVariant,
-  resolveAlertPanelSemantic,
-} from "./alert-panel-semantics";
-import { Skeleton } from "./skeleton";
-
-export type AlertPanelTone =
-  | "danger"
-  | "error"
-  | "info"
-  | "neutral"
-  | "success"
-  | "warning";
-export type AlertPanelVariant = "default" | "empty" | "loading";
-
-export interface AlertPanelProps
-  extends Omit<SurfacePanelProps, "surface" | "tone"> {
-  children?: ReactNode;
-  compact?: boolean;
-  semantic?: AlertPanelSemanticVariant;
-  showStatusLabel?: boolean;
-  tone?: AlertPanelTone;
-  variant?: AlertPanelVariant;
-}
-
-const ALERT_PANEL_TONE_CLASS: Record<AlertPanelTone, string> = {
-  danger: "border-af-danger-border bg-error-container text-on-error-container",
-  error: "border-af-danger-border bg-error-container text-on-error-container",
-  info: "border-af-info-border bg-info-container text-on-info-container",
-  neutral: "border-outline bg-surface-container-low text-on-surface-variant",
-  success:
-    "border-af-success-border bg-success-container text-on-success-container",
-  warning:
-    "border-af-warning-border bg-warning-container text-on-warning-container",
-};
-
-const ALERT_PANEL_VARIANT_CLASS: Record<AlertPanelVariant, string> = {
-  default: "grid gap-2",
-  empty: "grid items-start gap-1.5 rounded-2xl border-dashed p-5 [&_h3]:m-0",
-  loading: "grid gap-2",
-};
-const ALERT_PANEL_COMPACT_CLASS: Record<AlertPanelVariant, string> = {
-  default: "",
-  empty: "min-h-0",
-  loading: "",
-};
-
-const ALERT_PANEL_BODY_TEXT_CLASS = "text-body-medium text-on-surface-variant";
-const ALERT_PANEL_STATUS_LABEL_CLASS =
-  "text-body-small font-medium uppercase tracking-wide text-current";
-
-export const AlertPanel = forwardRef<HTMLDivElement, AlertPanelProps>(
-  function AlertPanel(
-    {
-      "aria-busy": ariaBusy,
-      children,
-      className,
-      compact = false,
-      padding = "default",
-      radius = "xl",
-      role,
-      semantic,
-      showStatusLabel,
-      tone: toneProp = "warning",
-      variant: variantProp = "default",
-      ...props
-    },
-    ref,
-  ) {
-    const semanticConfig = semantic
-      ? resolveAlertPanelSemantic(semantic)
-      : undefined;
-    const tone = semanticConfig?.tone ?? toneProp;
-    const variant = semanticConfig?.variant ?? variantProp;
-    const resolvedRole = role ?? semanticConfig?.role;
-    const resolvedAriaBusy = ariaBusy ?? semanticConfig?.busy;
-    const shouldShowStatusLabel =
-      showStatusLabel ?? (semanticConfig?.statusLabel !== undefined);
-    const statusLabel = semanticConfig?.statusLabel;
-
-    return (
-      <SurfacePanel
-        aria-busy={resolvedAriaBusy === true ? true : undefined}
-        className={cn(
-          ALERT_PANEL_VARIANT_CLASS[variant],
-          compact && ALERT_PANEL_COMPACT_CLASS[variant],
-          ALERT_PANEL_TONE_CLASS[tone],
-          ALERT_PANEL_BODY_TEXT_CLASS,
-          className,
-        )}
-        data-af-feedback-variant={semantic}
-        padding={padding}
-        radius={radius}
-        ref={ref}
-        role={resolvedRole}
-        {...props}
-      >
-        {shouldShowStatusLabel && statusLabel ? (
-          <AlertPanelStatusLabel>{statusLabel}</AlertPanelStatusLabel>
-        ) : null}
-        {variant === "loading" && children === undefined ? (
-          <>
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-4/5" />
-          </>
-        ) : (
-          children
-        )}
-      </SurfacePanel>
-    );
-  },
-);
-
-export interface AlertPanelStatusLabelProps
-  extends HTMLAttributes<HTMLSpanElement> {
-  children?: ReactNode;
-}
-
-export const AlertPanelStatusLabel = forwardRef<
-  HTMLSpanElement,
-  AlertPanelStatusLabelProps
->(function AlertPanelStatusLabel({ className, ...props }, ref) {
-  return (
-    <span
-      className={cn(ALERT_PANEL_STATUS_LABEL_CLASS, className)}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-
-export interface AlertPanelTitleProps extends HTMLAttributes<HTMLHeadingElement> {
-  children?: ReactNode;
-}
-
-export const AlertPanelTitle = forwardRef<HTMLHeadingElement, AlertPanelTitleProps>(
-  function AlertPanelTitle({ className, ...props }, ref) {
-    return (
-      <h3
-        className={cn("m-0 text-body-medium !text-current", className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-
-export interface AlertPanelTextProps extends HTMLAttributes<HTMLElement> {
-  as?: ElementType;
-  children?: ReactNode;
-  variant?: "body" | "supporting";
-}
-
-const ALERT_PANEL_SUPPORTING_TEXT_CLASS =
-  "text-body-small text-on-surface-variant";
-
-export const AlertPanelText = forwardRef<HTMLElement, AlertPanelTextProps>(
-  function AlertPanelText(
-    { as: Component = "p", className, variant = "body", ...props },
-    ref,
-  ) {
-    return (
-      <Component
-        className={cn(
-          "m-0 !text-current",
-          variant === "body"
-            ? ALERT_PANEL_BODY_TEXT_CLASS
-            : ALERT_PANEL_SUPPORTING_TEXT_CLASS,
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-
-export type { AlertPanelSemanticVariant } from "./alert-panel-semantics";

package/src/feedback/index.ts

@@ -1,21 +0,0 @@
-/** Stable category path for `@you-agent-factory/components/feedback`. */
-export const COMPONENTS_CATEGORY = "feedback" as const;
-
-export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
-
-export {
-  AlertPanel,
-  AlertPanelStatusLabel,
-  AlertPanelText,
-  AlertPanelTitle,
-} from "./alert-panel";
-export type {
-  AlertPanelProps,
-  AlertPanelSemanticVariant,
-  AlertPanelStatusLabelProps,
-  AlertPanelTextProps,
-  AlertPanelTitleProps,
-  AlertPanelTone,
-  AlertPanelVariant,
-} from "./alert-panel";
-export { Skeleton } from "./skeleton";