@you-agent-factory/components 0.0.0 → 0.0.2

package/src/graphs/index.ts

@@ -1,41 +0,0 @@
-/** Stable category path for `@you-agent-factory/components/graphs`. */
-export const COMPONENTS_CATEGORY = "graphs" as const;
-
-export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
-
-export {
-  GRAPH_NODE_BUTTON_BASE_CLASS,
-  GraphNodeButton,
-  type GraphNodeButtonProps,
-} from "./graph-node-button";
-export {
-  GraphViewportSurface,
-  type GraphViewportSurfaceProps,
-} from "./graph-viewport-surface";
-export type { GraphNodeHandle, GraphNodeHandleTone } from "./graph-node-handle";
-export {
-  GraphNodeHandleBadge,
-  type GraphNodeHandleBadgeProps,
-} from "./graph-node-handle-badge";
-export { GraphNodeShell, type GraphNodeShellProps } from "./graph-node-shell";
-export {
-  defaultGraphNodeStateLabel,
-  GRAPH_NODE_CONTENT_MIN_HEIGHT_CLASS,
-  GRAPH_NODE_STATE_INDICATOR_HEIGHT_CLASS,
-  graphNodeButtonIsDisabled,
-  graphNodeButtonStateAttributes,
-  graphNodeButtonStateClassName,
-  graphNodeShellStateAttributes,
-  graphNodeShellStateClassName,
-  type GraphNodeState,
-} from "./graph-node-state";
-export {
-  GraphNodeStateIndicator,
-  type GraphNodeStateIndicatorProps,
-} from "./graph-node-state-indicator";
-export {
-  buildGraphEdgePathThroughWaypoints,
-  type GraphEdgeWaypoint,
-} from "./graph-edge-path";
-export type { GraphEdgeData, GraphEdgeProps } from "./graph-edge";
-export { GRAPH_EDGE_TYPES, GraphEdge } from "./graph-edge";

package/src/index.ts

@@ -1,209 +0,0 @@
-/** Stable package identifier for `@you-agent-factory/components` consumers. */
-export const COMPONENTS_PACKAGE_NAME = "@you-agent-factory/components" as const;
-
-export type ComponentsPackageName = typeof COMPONENTS_PACKAGE_NAME;
-
-export {
-  COMPONENT_CATEGORY_EXPORT_PATHS,
-  type ComponentCategoryExportPath,
-} from "./category-paths";
-
-export { Button, ButtonLink, buttonVariants, IconButtonShell } from "./primitives";
-export type {
-  ButtonLinkProps,
-  ButtonProps,
-  IconButtonShellProps,
-} from "./primitives";
-export { DescriptionList } from "./data-display/description-list";
-export type { DescriptionListProps } from "./data-display/description-list";
-
-export {
-  AlertPanel,
-  AlertPanelStatusLabel,
-  AlertPanelText,
-  AlertPanelTitle,
-  Skeleton,
-} from "./feedback";
-export type {
-  AlertPanelProps,
-  AlertPanelSemanticVariant,
-  AlertPanelStatusLabelProps,
-  AlertPanelTextProps,
-  AlertPanelTitleProps,
-  AlertPanelTone,
-  AlertPanelVariant,
-} from "./feedback";
-export {
-  CodePanel,
-  DataTable,
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  codePanelVariants,
-  tableCellTruncateClassName,
-  tableCellWrapClassName,
-  tableMinWidthWideClassName,
-  tableNarrowContainerClassName,
-} from "./data-display";
-export type {
-  CodePanelProps,
-  DataTableColumn,
-  DataTableProps,
-  DataTableState,
-  TableProps,
-  TableSize,
-} from "./data-display";
-export {
-  WidgetDetailCopy,
-  WidgetEmptyState,
-  WidgetEmptyStateText,
-  WidgetEmptyStateTitle,
-  WidgetErrorState,
-  WidgetFrame,
-  WidgetFrameDisclosure,
-  WidgetFrameDisclosureIcon,
-  WidgetFrameDisclosurePanel,
-  WidgetFrameDisclosureTrigger,
-  WidgetFrameSkeleton,
-  WidgetLoadingState,
-  WidgetSubtitle,
-  WidgetSuccessState,
-  WIDGET_FRAME_BODY_TEXT_CLASS,
-  WIDGET_FRAME_MIN_WIDTH_CLASS,
-  WIDGET_FRAME_OVERFLOW_TOLERANCE_PX,
-  WIDGET_FRAME_RESPONSIVE_SHELL_CLASS,
-  WIDGET_FRAME_SECTION_HEADING_CLASS,
-  WIDGET_FRAME_STORY_SHELL_DATA_ATTR,
-  WIDGET_FRAME_SUBTITLE_CLASS,
-  WIDGET_FRAME_SUPPORTING_LABEL_CLASS,
-  WIDGET_FRAME_SUPPORTING_LABELS_CLASS,
-  WIDGET_FRAME_WIDE_BODY_CLASS,
-  widgetFrameDetailCardClass,
-  widgetFrameHasNoHorizontalOverflow,
-  widgetFrameStoryShellStyle,
-} from "./recipes";
-export type {
-  WidgetDetailCopyProps,
-  WidgetEmptyStateProps,
-  WidgetEmptyStateTextProps,
-  WidgetEmptyStateTitleProps,
-  WidgetErrorStateProps,
-  WidgetFrameDisclosureIconProps,
-  WidgetFrameDisclosurePanelProps,
-  WidgetFrameDisclosureProps,
-  WidgetFrameDisclosureTriggerProps,
-  WidgetFrameProps,
-  WidgetLoadingStateProps,
-  WidgetSubtitleProps,
-  WidgetSuccessStateProps,
-} from "./recipes";
-export {
-  buildFormFieldAriaDescribedBy,
-  EnumSelect,
-  ENUM_SELECT_EMPTY_VALUE,
-  FormDescription,
-  FormError,
-  FormField,
-  FormFieldGroup,
-  FormFieldGroupLabel,
-  FormHelperText,
-  FormLabel,
-  FormSuccess,
-  FormWarning,
-  NativeSelect,
-  OptionalEnumSelect,
-  PackageCheckbox,
-  PackageFileInput,
-  PackageInput,
-  PackageTextarea,
-  ResetEnumSelect,
-  Select,
-  SELECT_EMPTY_STATE_VALUE,
-  SelectContent,
-  SelectEmpty,
-  SelectField,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-  inputVariants,
-  textareaVariants,
-} from "./forms";
-export type {
-  EnumSelectOption,
-  EnumSelectProps,
-  FormDescriptionProps,
-  FormErrorProps,
-  FormFieldGroupLabelProps,
-  FormFieldGroupProps,
-  FormFieldMessageIds,
-  FormFieldProps,
-  FormHelperTextProps,
-  FormLabelProps,
-  FormSuccessProps,
-  FormWarningProps,
-  NativeSelectProps,
-  OptionalEnumSelectProps,
-  PackageCheckboxProps,
-  PackageFileInputProps,
-  PackageInputProps,
-  PackageTextareaProps,
-  ResetEnumSelectProps,
-  SelectContentProps,
-  SelectEmptyProps,
-  SelectFieldProps,
-  SelectItemProps,
-  SelectLabelProps,
-  SelectSeparatorProps,
-  SelectTriggerProps,
-} from "./forms";
-
-export { ActionRow } from "./layout/action-row";
-export type { ActionRowProps } from "./layout/action-row";
-export { SurfacePanel, surfacePanelVariants } from "./layout/surface-panel";
-export type { SurfacePanelProps } from "./layout/surface-panel";
-
-export { Code, Heading, Label, Text } from "./primitives/typography";
-export type {
-  CodeProps,
-  HeadingProps,
-  LabelProps,
-  TextProps,
-  TextVariant,
-} from "./primitives/typography";
-export {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-  OVERLAY_DIALOG_BODY_CLASS,
-  OVERLAY_DIALOG_CONTENT_SHELL_CLASS,
-  OVERLAY_FORM_GROUP_CLASS,
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverTrigger,
-  ScrollArea,
-  ScrollBar,
-} from "./overlays";
-export type {
-  DialogContentProps,
-  ScrollAreaProps,
-  ScrollBarProps,
-} from "./overlays";
-

package/src/layout/action-row.tsx

@@ -1,53 +0,0 @@
-import type { HTMLAttributes, ReactNode } from "react";
-
-import { cn } from "../utilities/cn";
-
-const ACTION_ROW_CLASS =
-  "flex min-w-0 flex-wrap items-center gap-2 max-md:justify-start";
-const ACTION_ROW_SECTION_CLASS =
-  "flex min-w-0 flex-wrap items-center gap-2";
-
-export interface ActionRowProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
-  actions?: ReactNode;
-  actionsClassName?: string;
-  statuses?: ReactNode;
-  statusesClassName?: string;
-}
-
-export function ActionRow({
-  actions,
-  actionsClassName,
-  className,
-  statuses,
-  statusesClassName,
-  ...props
-}: ActionRowProps) {
-  const hasStatuses = statuses !== undefined && statuses !== null;
-  const hasActions = actions !== undefined && actions !== null;
-
-  if (!hasStatuses && !hasActions) {
-    return null;
-  }
-
-  return (
-    <div className={cn(ACTION_ROW_CLASS, className)} {...props}>
-      {hasStatuses ? (
-        <div
-          className={cn(ACTION_ROW_SECTION_CLASS, statusesClassName)}
-          data-action-row-section="statuses"
-        >
-          {statuses}
-        </div>
-      ) : null}
-      {hasActions ? (
-        <div
-          className={cn(ACTION_ROW_SECTION_CLASS, actionsClassName)}
-          data-action-row-section="actions"
-        >
-          {actions}
-        </div>
-      ) : null}
-    </div>
-  );
-}

package/src/layout/surface-panel.tsx

@@ -1,91 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { forwardRef, type HTMLAttributes } from "react";
-
-import { cn } from "../utilities/cn";
-
-type SurfacePanelPadding = "compact" | "default" | "none";
-type SurfacePanelRadius = "lg" | "xl" | "2xl" | "3xl" | "full";
-type SurfacePanelSurface = "high" | "low";
-type SurfacePanelTone = "default" | "accent" | "selected";
-
-export interface SurfacePanelProps extends HTMLAttributes<HTMLDivElement> {
-  asChild?: boolean;
-  padding?: SurfacePanelPadding;
-  radius?: SurfacePanelRadius;
-  surface?: SurfacePanelSurface;
-  tone?: SurfacePanelTone;
-}
-
-const SURFACE_PANEL_BASE_CLASS = "border border-outline";
-const SURFACE_PANEL_PADDING_CLASS: Record<SurfacePanelPadding, string> = {
-  compact: "p-2",
-  default: "p-3",
-  none: "",
-};
-const SURFACE_PANEL_RADIUS_CLASS: Record<SurfacePanelRadius, string> = {
-  lg: "rounded-lg",
-  xl: "rounded-xl",
-  "2xl": "rounded-2xl",
-  "3xl": "rounded-3xl",
-  full: "rounded-full",
-};
-const SURFACE_PANEL_SURFACE_CLASS: Record<SurfacePanelSurface, string> = {
-  high: "bg-surface-container-high",
-  low: "bg-surface-container-low",
-};
-const SURFACE_PANEL_TONE_CLASS: Record<SurfacePanelTone, string> = {
-  default: "",
-  accent: "border-primary text-on-surface",
-  selected: "border-primary bg-primary-container text-on-primary-container",
-};
-
-export function surfacePanelVariants({
-  className,
-  padding = "default",
-  radius = "xl",
-  surface = "high",
-  tone = "default",
-}: Pick<
-  SurfacePanelProps,
-  "className" | "padding" | "radius" | "surface" | "tone"
->) {
-  return cn(
-    SURFACE_PANEL_BASE_CLASS,
-    SURFACE_PANEL_PADDING_CLASS[padding],
-    SURFACE_PANEL_RADIUS_CLASS[radius],
-    SURFACE_PANEL_SURFACE_CLASS[surface],
-    SURFACE_PANEL_TONE_CLASS[tone],
-    className,
-  );
-}
-
-export const SurfacePanel = forwardRef<HTMLDivElement, SurfacePanelProps>(
-  function SurfacePanel(
-    {
-      asChild = false,
-      className,
-      padding = "default",
-      radius = "xl",
-      surface = "high",
-      tone = "default",
-      ...props
-    },
-    ref,
-  ) {
-    const Component = asChild ? Slot : "div";
-
-    return (
-      <Component
-        className={surfacePanelVariants({
-          className,
-          padding,
-          radius,
-          surface,
-          tone,
-        })}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);

package/src/overlays/collapsible.tsx

@@ -1,22 +0,0 @@
-import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import type { ComponentProps } from "react";
-
-import { cn } from "../utilities/cn";
-
-export const Collapsible = CollapsiblePrimitive.Root;
-export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
-
-export function CollapsibleContent({
-  className,
-  ...props
-}: ComponentProps<typeof CollapsiblePrimitive.Content>) {
-  return (
-    <CollapsiblePrimitive.Content
-      className={cn(
-        "overflow-hidden data-[state=closed]:animate-[overlay-collapsible-up_160ms_ease-out] data-[state=open]:animate-[overlay-collapsible-down_200ms_ease-out]",
-        className,
-      )}
-      {...props}
-    />
-  );
-}

package/src/overlays/dialog.tsx

@@ -1,148 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import type { ComponentProps, HTMLAttributes } from "react";
-
-import { cn } from "../utilities/cn";
-import {
-  OVERLAY_DIALOG_CONTENT_SHELL_CLASS,
-  OVERLAY_FORM_GROUP_CLASS,
-} from "./overlay-layout";
-
-const DIALOG_CLOSE_BUTTON_CLASS =
-  "absolute right-4 top-4 inline-flex min-h-9 w-9 items-center justify-center rounded-full border border-outline bg-transparent p-0 text-on-surface transition-colors hover:bg-surface-container-low disabled:pointer-events-none disabled:opacity-50";
-
-function DialogCloseIcon() {
-  return (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      height="18"
-      viewBox="0 0 24 24"
-      width="18"
-    >
-      <path
-        d="M6 6l12 12M18 6L6 18"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.8"
-      />
-    </svg>
-  );
-}
-
-export const Dialog = DialogPrimitive.Root;
-export const DialogTrigger = DialogPrimitive.Trigger;
-export const DialogPortal = DialogPrimitive.Portal;
-export const DialogClose = DialogPrimitive.Close;
-
-export function DialogOverlay({
-  className,
-  ...props
-}: ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      className={cn(
-        "fixed inset-0 z-50 bg-black/70 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export type DialogContentProps = ComponentProps<typeof DialogPrimitive.Content> & {
-  closeDisabled?: boolean;
-  closeLabel?: string;
-};
-
-export function DialogContent({
-  children,
-  className,
-  closeDisabled = false,
-  closeLabel = "Close",
-  ...props
-}: DialogContentProps) {
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        className={cn(
-          "fixed inset-x-4 top-1/2 z-50 mx-auto max-h-dvh max-w-2xl -translate-y-1/2 overflow-y-auto rounded-2xl border border-outline bg-surface-container-high text-on-surface shadow-xl",
-          OVERLAY_DIALOG_CONTENT_SHELL_CLASS,
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        {closeDisabled ? (
-          <button
-            aria-label={closeLabel}
-            className={DIALOG_CLOSE_BUTTON_CLASS}
-            disabled
-            type="button"
-          >
-            <DialogCloseIcon />
-          </button>
-        ) : (
-          <DialogPrimitive.Close
-            aria-label={closeLabel}
-            className={DIALOG_CLOSE_BUTTON_CLASS}
-          >
-            <DialogCloseIcon />
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  );
-}
-
-export function DialogHeader({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(OVERLAY_FORM_GROUP_CLASS, "text-left", className)}
-      {...props}
-    />
-  );
-}
-
-export function DialogFooter({
-  className,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("flex flex-wrap justify-end gap-layout-element", className)}
-      {...props}
-    />
-  );
-}
-
-export function DialogTitle({
-  className,
-  ...props
-}: ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      className={cn(
-        "font-display text-2xl leading-tight tracking-[-0.03em] text-on-surface",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function DialogDescription({
-  className,
-  ...props
-}: ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      className={cn("text-sm leading-6 text-on-surface-variant", className)}
-      {...props}
-    />
-  );
-}

package/src/overlays/index.ts

@@ -1,31 +0,0 @@
-/** Stable category path for `@you-agent-factory/components/overlays`. */
-export const COMPONENTS_CATEGORY = "overlays" as const;
-
-export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
-
-export {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "./collapsible";
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-} from "./dialog";
-export type { DialogContentProps } from "./dialog";
-export {
-  OVERLAY_DIALOG_BODY_CLASS,
-  OVERLAY_DIALOG_CONTENT_SHELL_CLASS,
-  OVERLAY_FORM_GROUP_CLASS,
-} from "./overlay-layout";
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover";
-export { ScrollArea, ScrollBar } from "./scroll-area";
-export type { ScrollAreaProps, ScrollBarProps } from "./scroll-area";

package/src/overlays/overlay-layout.ts

@@ -1,9 +0,0 @@
-/** Interior stack for dialog header, body, and footer regions. */
-export const OVERLAY_FORM_GROUP_CLASS = "grid gap-layout-tight";
-
-/** Dialog and modal body regions between header and footer. */
-export const OVERLAY_DIALOG_BODY_CLASS = "grid gap-layout-group";
-
-/** Radix dialog content shell spacing for package-owned dialogs. */
-export const OVERLAY_DIALOG_CONTENT_SHELL_CLASS =
-  "grid gap-layout-group p-layout-inset-dialog";

package/src/overlays/popover.tsx

@@ -1,29 +0,0 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import type { ComponentProps } from "react";
-
-import { cn } from "../utilities/cn";
-
-export const Popover = PopoverPrimitive.Root;
-export const PopoverTrigger = PopoverPrimitive.Trigger;
-export const PopoverAnchor = PopoverPrimitive.Anchor;
-
-export function PopoverContent({
-  align = "center",
-  className,
-  sideOffset = 10,
-  ...props
-}: ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        align={align}
-        className={cn(
-          "z-50 w-72 rounded-2xl border border-outline bg-surface-container-high p-3 text-on-surface shadow-xl outline-none data-[state=closed]:animate-out data-[state=open]:animate-in sm:w-80",
-          className,
-        )}
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  );
-}