@you-agent-factory/components 0.0.0

package/src/data-display/table.tsx

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

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

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

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

package/src/feedback/skeleton.tsx

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

package/src/forms/index.ts

@@ -0,0 +1,73 @@
+/** Stable category path for `@you-agent-factory/components/forms`. */
+export const COMPONENTS_CATEGORY = "forms" as const;
+
+export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
+
+export { PackageCheckbox } from "./package-checkbox";
+export type { PackageCheckboxProps } from "./package-checkbox";
+export {
+  EnumSelect,
+  ENUM_SELECT_EMPTY_VALUE,
+  OptionalEnumSelect,
+  ResetEnumSelect,
+} from "./package-enum-select";
+export type {
+  EnumSelectOption,
+  EnumSelectProps,
+  OptionalEnumSelectProps,
+  ResetEnumSelectProps,
+} from "./package-enum-select";
+export { PackageFileInput } from "./package-file-input";
+export type { PackageFileInputProps } from "./package-file-input";
+export { PackageInput, inputVariants } from "./package-input";
+export type { PackageInputProps } from "./package-input";
+export { NativeSelect } from "./package-native-select";
+export type { NativeSelectProps } from "./package-native-select";
+export {
+  Select,
+  SELECT_EMPTY_STATE_VALUE,
+  SelectContent,
+  SelectEmpty,
+  SelectField,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./package-select";
+export type {
+  SelectContentProps,
+  SelectEmptyProps,
+  SelectFieldProps,
+  SelectItemProps,
+  SelectLabelProps,
+  SelectSeparatorProps,
+  SelectTriggerProps,
+} from "./package-select";
+export { PackageTextarea, textareaVariants } from "./package-textarea";
+export type { PackageTextareaProps } from "./package-textarea";
+export {
+  buildFormFieldAriaDescribedBy,
+  FormDescription,
+  FormError,
+  FormField,
+  FormFieldGroup,
+  FormFieldGroupLabel,
+  FormHelperText,
+  FormLabel,
+  FormSuccess,
+  FormWarning,
+} from "./package-form-field";
+export type {
+  FormDescriptionProps,
+  FormErrorProps,
+  FormFieldGroupLabelProps,
+  FormFieldGroupProps,
+  FormFieldMessageIds,
+  FormFieldProps,
+  FormHelperTextProps,
+  FormLabelProps,
+  FormSuccessProps,
+  FormWarningProps,
+} from "./package-form-field";

package/src/forms/package-checkbox.tsx

@@ -0,0 +1,50 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+
+import { cn } from "../utilities/cn";
+
+export type PackageCheckboxProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "type"
+>;
+
+const CHECKBOX_ROOT_CLASS =
+  "relative inline-flex size-4 shrink-0 items-center justify-center [&:has(:disabled)]:cursor-not-allowed";
+
+function CheckboxCheckIcon() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="size-3 opacity-0"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2.5}
+      viewBox="0 0 24 24"
+    >
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  );
+}
+
+export const PackageCheckbox = forwardRef<
+  HTMLInputElement,
+  PackageCheckboxProps
+>(function PackageCheckbox({ className, ...props }, ref) {
+  return (
+    <span className={cn(CHECKBOX_ROOT_CLASS, className)}>
+      <input
+        className="peer sr-only"
+        ref={ref}
+        type="checkbox"
+        {...props}
+      />
+      <span
+        aria-hidden="true"
+        className="pointer-events-none flex size-4 items-center justify-center rounded border border-outline bg-surface-container-high text-on-primary transition-colors peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-af-focus-ring peer-disabled:border-outline peer-disabled:bg-surface-container-low peer-checked:border-primary peer-checked:bg-primary peer-aria-invalid:ring-2 peer-aria-invalid:ring-af-danger-border peer-checked:[&_svg]:opacity-100"
+      >
+        <CheckboxCheckIcon />
+      </span>
+    </span>
+  );
+});