@you-agent-factory/components 0.0.0 → 0.0.2

package/dist/chunks/scroll-area.js

@@ -0,0 +1,261 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { c as cn } from "./cn.js";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { forwardRef } from "react";
+const Collapsible = CollapsiblePrimitive.Root;
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+function CollapsibleContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    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
+    }
+  );
+}
+const OVERLAY_FORM_GROUP_CLASS = "grid gap-layout-tight";
+const OVERLAY_DIALOG_BODY_CLASS = "grid gap-layout-group";
+const OVERLAY_DIALOG_CONTENT_SHELL_CLASS = "grid gap-layout-group p-layout-inset-dialog";
+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 /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      height: "18",
+      viewBox: "0 0 24 24",
+      width: "18",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6 6l12 12M18 6L6 18",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: "1.8"
+        }
+      )
+    }
+  );
+}
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    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
+    }
+  );
+}
+function DialogContent({
+  children,
+  className,
+  closeDisabled = false,
+  closeLabel = "Close",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      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: [
+          children,
+          closeDisabled ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": closeLabel,
+              className: DIALOG_CLOSE_BUTTON_CLASS,
+              disabled: true,
+              type: "button",
+              children: /* @__PURE__ */ jsx(DialogCloseIcon, {})
+            }
+          ) : /* @__PURE__ */ jsx(
+            DialogPrimitive.Close,
+            {
+              "aria-label": closeLabel,
+              className: DIALOG_CLOSE_BUTTON_CLASS,
+              children: /* @__PURE__ */ jsx(DialogCloseIcon, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(OVERLAY_FORM_GROUP_CLASS, "text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap justify-end gap-layout-element", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      className: cn(
+        "font-display text-2xl leading-tight tracking-[-0.03em] text-on-surface",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    {
+      className: cn("text-sm leading-6 text-on-surface-variant", className),
+      ...props
+    }
+  );
+}
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+function PopoverContent({
+  align = "center",
+  className,
+  sideOffset = 10,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      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,
+      ...props
+    }
+  ) });
+}
+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"
+);
+const ScrollArea = forwardRef(function ScrollArea2({
+  children,
+  className,
+  type = "auto",
+  viewportClassName,
+  viewportProps,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      className: cn("relative overflow-hidden", className),
+      ref,
+      type,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            className: cn(SCROLL_AREA_VIEWPORT_CLASS, viewportClassName),
+            ...viewportProps,
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+});
+const ScrollBar = forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    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,
+      ref,
+      ...props,
+      children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-outline-variant transition-colors hover:bg-on-surface-variant" })
+    }
+  );
+});
+export {
+  Collapsible as C,
+  Dialog as D,
+  OVERLAY_DIALOG_BODY_CLASS as O,
+  Popover as P,
+  ScrollArea as S,
+  CollapsibleContent as a,
+  CollapsibleTrigger as b,
+  DialogClose as c,
+  DialogContent as d,
+  DialogDescription as e,
+  DialogFooter as f,
+  DialogHeader as g,
+  DialogOverlay as h,
+  DialogPortal as i,
+  DialogTitle as j,
+  DialogTrigger as k,
+  OVERLAY_DIALOG_CONTENT_SHELL_CLASS as l,
+  OVERLAY_FORM_GROUP_CLASS as m,
+  PopoverAnchor as n,
+  PopoverContent as o,
+  PopoverTrigger as p,
+  ScrollBar as q
+};

package/dist/chunks/surface-panel.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+import { c as cn } from "./cn.js";
+const SURFACE_PANEL_BASE_CLASS = "border border-outline";
+const SURFACE_PANEL_PADDING_CLASS = {
+  compact: "p-2",
+  default: "p-3",
+  none: ""
+};
+const SURFACE_PANEL_RADIUS_CLASS = {
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  full: "rounded-full"
+};
+const SURFACE_PANEL_SURFACE_CLASS = {
+  high: "bg-surface-container-high",
+  low: "bg-surface-container-low"
+};
+const SURFACE_PANEL_TONE_CLASS = {
+  default: "",
+  accent: "border-primary text-on-surface",
+  selected: "border-primary bg-primary-container text-on-primary-container"
+};
+function surfacePanelVariants({
+  className,
+  padding = "default",
+  radius = "xl",
+  surface = "high",
+  tone = "default"
+}) {
+  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
+  );
+}
+const SurfacePanel = forwardRef(
+  function SurfacePanel2({
+    asChild = false,
+    className,
+    padding = "default",
+    radius = "xl",
+    surface = "high",
+    tone = "default",
+    ...props
+  }, ref) {
+    const Component = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        className: surfacePanelVariants({
+          className,
+          padding,
+          radius,
+          surface,
+          tone
+        }),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+export {
+  SurfacePanel as S,
+  surfacePanelVariants as s
+};

package/dist/chunks/table-layout.js

@@ -0,0 +1,292 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { c as cn } from "./cn.js";
+import { B as BODY_TEXT_CLASS } from "./typography-roles.js";
+const CODE_PANEL_PADDING_CLASS = {
+  compact: "p-2",
+  default: "p-3"
+};
+const CODE_PANEL_SURFACE_CLASS = {
+  high: "bg-surface-container-high",
+  low: "bg-surface-container-low"
+};
+const CODE_PANEL_MAX_HEIGHT_CLASS = {
+  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";
+function codePanelVariants({
+  className,
+  maxHeight = "none",
+  padding = "compact",
+  surface = "high"
+}) {
+  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
+  );
+}
+const CodePanel = forwardRef(
+  function CodePanel2({ className, maxHeight = "none", padding, surface, tabIndex, ...props }, ref) {
+    const isScrollable = maxHeight !== "none";
+    return /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: codePanelVariants({ className, maxHeight, padding, surface }),
+        ref,
+        tabIndex: tabIndex ?? (isScrollable ? 0 : void 0),
+        ...props
+      }
+    );
+  }
+);
+const DescriptionList = forwardRef(function DescriptionList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "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,
+      ...props
+    }
+  );
+});
+const Table = forwardRef(function Table2({ className, containerClassName, containerProps, size = "default", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group/table w-full overflow-x-auto overflow-y-clip rounded-2xl border border-outline",
+        containerClassName
+      ),
+      "data-size": size,
+      ...containerProps,
+      children: /* @__PURE__ */ jsx(
+        "table",
+        {
+          className: cn("w-full caption-bottom text-sm", className),
+          ref,
+          ...props
+        }
+      )
+    }
+  );
+});
+const TableHeader = forwardRef(function TableHeader2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      className: cn("[&_tr]:border-b [&_tr]:border-outline", className),
+      ref,
+      ...props
+    }
+  );
+});
+const TableBody = forwardRef(function TableBody2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      className: cn(
+        "[&_tr:last-child]:border-0 [&_tr]:border-b [&_tr]:border-outline",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+const TableRow = forwardRef(function TableRow2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      className: cn(
+        "transition-colors hover:bg-af-overlay data-[state=selected]:bg-af-overlay",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+const TableHead = forwardRef(function TableHead2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "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,
+      ...props
+    }
+  );
+});
+const TableCell = forwardRef(function TableCell2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "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,
+      ...props
+    }
+  );
+});
+const TableCaption = forwardRef(function TableCaption2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "caption",
+    {
+      className: cn("mt-4 text-sm text-af-text-subtle", className),
+      ref,
+      ...props
+    }
+  );
+});
+function DataTablePlaceholderBar({ className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn("animate-pulse rounded-xl bg-af-overlay", className)
+    }
+  );
+}
+function DataTableStatusRow({
+  children,
+  colSpan,
+  role,
+  ariaBusy,
+  ariaLive,
+  cellClassName
+}) {
+  return /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { className: cellClassName, colSpan, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-busy": ariaBusy || void 0,
+      "aria-live": ariaLive,
+      role,
+      children
+    }
+  ) }) });
+}
+function DataTable({
+  columns,
+  data,
+  getRowKey,
+  ariaLabel,
+  caption,
+  containerClassName,
+  containerProps,
+  emptyMessage,
+  errorMessage,
+  loadingMessage,
+  rowClassName,
+  size,
+  state = "success",
+  tableClassName
+}) {
+  const renderBody = () => {
+    if (state === "loading") {
+      return /* @__PURE__ */ jsx(
+        DataTableStatusRow,
+        {
+          ariaBusy: true,
+          ariaLive: "polite",
+          colSpan: columns.length,
+          role: "status",
+          children: /* @__PURE__ */ jsxs("div", { className: "grid gap-3 py-1", children: [
+            loadingMessage,
+            /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "grid gap-2", children: [
+              /* @__PURE__ */ jsx(DataTablePlaceholderBar, { className: "h-4 w-full max-w-48" }),
+              /* @__PURE__ */ jsx(DataTablePlaceholderBar, { className: "h-8 w-full" }),
+              /* @__PURE__ */ jsx(DataTablePlaceholderBar, { className: "h-4 w-full max-w-48" })
+            ] })
+          ] })
+        }
+      );
+    }
+    if (state === "error") {
+      return /* @__PURE__ */ jsx(
+        DataTableStatusRow,
+        {
+          ariaLive: "assertive",
+          cellClassName: "text-af-text-subtle",
+          colSpan: columns.length,
+          role: "alert",
+          children: errorMessage
+        }
+      );
+    }
+    if (state === "empty" || state === "success" && data.length === 0) {
+      return /* @__PURE__ */ jsx(
+        DataTableStatusRow,
+        {
+          ariaLive: "polite",
+          cellClassName: "text-af-text-subtle",
+          colSpan: columns.length,
+          role: "status",
+          children: emptyMessage
+        }
+      );
+    }
+    return data.map((row) => /* @__PURE__ */ jsx(TableRow, { className: rowClassName?.(row), children: columns.map((column) => /* @__PURE__ */ jsx(TableCell, { className: column.cellClassName, children: column.cell(row) }, column.id)) }, getRowKey(row)));
+  };
+  return /* @__PURE__ */ jsxs(
+    Table,
+    {
+      "aria-label": ariaLabel,
+      className: tableClassName,
+      containerClassName,
+      containerProps,
+      size,
+      children: [
+        caption ? /* @__PURE__ */ jsx(TableCaption, { children: caption }) : null,
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => /* @__PURE__ */ jsx(
+          TableHead,
+          {
+            className: column.headerClassName,
+            scope: "col",
+            children: column.header
+          },
+          column.id
+        )) }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: renderBody() })
+      ]
+    }
+  );
+}
+const tableCellWrapClassName = "min-w-0 [overflow-wrap:anywhere]";
+const tableCellTruncateClassName = "block min-w-0 max-w-full truncate whitespace-nowrap";
+const tableMinWidthWideClassName = "min-w-2xl";
+const tableNarrowContainerClassName = "min-w-0 overscroll-x-contain";
+export {
+  CodePanel as C,
+  DataTable as D,
+  Table as T,
+  DescriptionList as a,
+  TableBody as b,
+  TableCaption as c,
+  TableCell as d,
+  TableHead as e,
+  TableHeader as f,
+  TableRow as g,
+  codePanelVariants as h,
+  tableCellWrapClassName as i,
+  tableMinWidthWideClassName as j,
+  tableNarrowContainerClassName as k,
+  tableCellTruncateClassName as t
+};

package/dist/chunks/typography-roles.js

@@ -0,0 +1,26 @@
+const PAGE_HEADING_CLASS = "af-page-heading";
+const SECTION_HEADING_CLASS = "af-section-heading";
+const BODY_TEXT_CLASS = "af-body-text";
+const SUPPORTING_TEXT_CLASS = "af-supporting-text";
+const MUTED_TEXT_CLASS = "af-muted-text";
+const CAPTION_TEXT_CLASS = "af-caption-text";
+const DENSE_BODY_TEXT_CLASS = "af-dense-body-text";
+const SUPPORTING_LABEL_CLASS = "af-supporting-label";
+const BODY_CODE_CLASS = "af-body-code";
+const SUPPORTING_CODE_CLASS = "af-supporting-code";
+const TEXT_TRUNCATE_CLASS = "af-text-truncate";
+const TEXT_WRAP_CLASS = "af-text-wrap";
+export {
+  BODY_TEXT_CLASS as B,
+  CAPTION_TEXT_CLASS as C,
+  DENSE_BODY_TEXT_CLASS as D,
+  MUTED_TEXT_CLASS as M,
+  PAGE_HEADING_CLASS as P,
+  SECTION_HEADING_CLASS as S,
+  TEXT_TRUNCATE_CLASS as T,
+  BODY_CODE_CLASS as a,
+  SUPPORTING_CODE_CLASS as b,
+  SUPPORTING_LABEL_CLASS as c,
+  SUPPORTING_TEXT_CLASS as d,
+  TEXT_WRAP_CLASS as e
+};