@you-agent-factory/components 0.0.2 → 0.0.6

package/dist/charts/chart-state-panel.d.ts

@@ -8,4 +8,4 @@ export interface ChartStatePanelProps extends HTMLAttributes<HTMLDivElement> {
     status: ChartStateStatus;
     title: string;
 }
-export declare function ChartStatePanel({ action, className, description, presentation, status, title, ...props }: ChartStatePanelProps): import("react").JSX.Element;
+export declare function ChartStatePanel({ action, className, description, presentation, status, title, ...props }: ChartStatePanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/charts/chart.d.ts

@@ -19,12 +19,12 @@ export declare function ChartContainer({ children, className, config, footer, in
     rootAttributes?: Record<string, string>;
     style?: CSSProperties;
     title: string;
-}): import("react").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 export declare const ChartTooltip: typeof RechartsTooltip;
 export declare const ChartLegend: import("react").MemoExoticComponent<(outsideProps: import("recharts").LegendProps) => React.ReactPortal | null>;
 export declare function ChartTooltipContent({ active, className, label, payload, }: TooltipContentProps<ValueType, NameType> & {
     className?: string;
-}): import("react").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function ChartLegendContent({ className, getToggleLabel, hiddenSeries, itemClassName, onToggleSeries, payload, swatchClassName, }: RechartsLegendContentProps & {
     className?: string;
     getToggleLabel?: (label: string, hidden: boolean) => string;
@@ -32,4 +32,4 @@ export declare function ChartLegendContent({ className, getToggleLabel, hiddenSe
     itemClassName?: string;
     onToggleSeries?: (key: string) => void;
     swatchClassName?: string;
-}): import("react").JSX.Element | null;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/charts/index.d.ts

@@ -1,5 +1,5 @@
 /** Stable category path for `@you-agent-factory/components/charts`. */
 export declare const COMPONENTS_CATEGORY: "charts";
 export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
-export { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, type ChartConfig, type ChartConfigEntry, type ChartPresentation, } from "./chart";
+export { type ChartConfig, type ChartConfigEntry, ChartContainer, ChartLegend, ChartLegendContent, type ChartPresentation, ChartTooltip, ChartTooltipContent, } from "./chart";
 export { ChartStatePanel, type ChartStatePanelProps, type ChartStateStatus, } from "./chart-state-panel";

package/dist/charts/index.js

@@ -232,7 +232,12 @@ function ChartStatePanel({
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     loading ? /* @__PURE__ */ jsxs("div", { "aria-hidden": "true", className: "grid w-full gap-3", children: [
       /* @__PURE__ */ jsx("div", { className: cn(CHART_STATE_PANEL_SKELETON_CLASS, "h-4 w-32") }),
-      /* @__PURE__ */ jsx("div", { className: cn(CHART_STATE_PANEL_SKELETON_CLASS, "h-28 w-full") })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(CHART_STATE_PANEL_SKELETON_CLASS, "h-28 w-full")
+        }
+      )
     ] }) : null,
     /* @__PURE__ */ jsx("h3", { className: CHART_STATE_PANEL_TITLE_CLASS, children: title }),
     /* @__PURE__ */ jsx("p", { className: CHART_STATE_PANEL_DESCRIPTION_CLASS, children: description }),

package/dist/chunks/alert-panel.js

@@ -144,18 +144,16 @@ const AlertPanelStatusLabel = forwardRef(function AlertPanelStatusLabel2({ class
     }
   );
 });
-const AlertPanelTitle = forwardRef(
-  function AlertPanelTitle2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "h3",
-      {
-        className: cn("m-0 text-body-medium !text-current", className),
-        ref,
-        ...props
-      }
-    );
-  }
-);
+const AlertPanelTitle = forwardRef(function AlertPanelTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn("m-0 text-body-medium !text-current", className),
+      ref,
+      ...props
+    }
+  );
+});
 const ALERT_PANEL_SUPPORTING_TEXT_CLASS = "text-body-small text-on-surface-variant";
 const AlertPanelText = forwardRef(
   function AlertPanelText2({ as: Component = "p", className, variant = "body", ...props }, ref) {

package/dist/chunks/button.js

@@ -118,7 +118,9 @@ function renderBlockedAsChildButton({
 }) {
   const child = Children.only(children);
   if (!isValidElement(child)) {
-    throw new Error("Button with asChild requires a single React element child.");
+    throw new Error(
+      "Button with asChild requires a single React element child."
+    );
   }
   return cloneElement(child, {
     ...props,

package/dist/chunks/{package-form-field.js → package-textarea.js}

@@ -21,15 +21,7 @@ function CheckboxCheckIcon() {
 }
 const PackageCheckbox = forwardRef(function PackageCheckbox2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsxs("span", { className: cn(CHECKBOX_ROOT_CLASS, className), children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        className: "peer sr-only",
-        ref,
-        type: "checkbox",
-        ...props
-      }
-    ),
+    /* @__PURE__ */ jsx("input", { className: "peer sr-only", ref, type: "checkbox", ...props }),
     /* @__PURE__ */ jsx(
       "span",
       {
@@ -357,39 +349,6 @@ const PackageFileInput = forwardRef(function PackageFileInput2({ className, ...p
     }
   );
 });
-const NativeSelect = forwardRef(
-  function NativeSelect2({ children, className, ...props }, ref) {
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        "select",
-        {
-          className: inputVariants({
-            className: `appearance-none pr-10 ${className ?? ""}`
-          }),
-          ref,
-          ...props,
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx(SelectChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-af-text-subtle" })
-    ] });
-  }
-);
-const TEXTAREA_PLAIN_CLASS = "m-0 w-full resize-none border-0 bg-transparent p-0 text-sm leading-6 text-on-surface outline-none";
-const TEXTAREA_FIELD_CLASS = "min-h-28 max-h-52 resize-none overflow-y-auto py-3";
-function textareaVariants({ className } = {}) {
-  return inputVariants({ className: cn(TEXTAREA_FIELD_CLASS, className) });
-}
-const PackageTextarea = forwardRef(function PackageTextarea2({ className, variant = "field", ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      className: variant === "plain" ? cn(TEXTAREA_PLAIN_CLASS, className) : textareaVariants({ className }),
-      ref,
-      ...props
-    }
-  );
-});
 function buildFormFieldAriaDescribedBy(messageIds) {
   const ids = [
     messageIds.descriptionId,
@@ -495,20 +454,58 @@ const FormSuccess = forwardRef(
     );
   }
 );
-const FormFieldGroup = forwardRef(
-  function FormFieldGroup2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx(
-      "fieldset",
-      {
-        className: cn("m-0 space-y-2 border-0 p-0", className),
-        ref,
-        ...props
-      }
-    );
+const FormFieldGroup = forwardRef(function FormFieldGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      className: cn("m-0 space-y-2 border-0 p-0", className),
+      ref,
+      ...props
+    }
+  );
+});
+const FormFieldGroupLabel = forwardRef(function FormFieldGroupLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      className: cn(FORM_LABEL_CLASS, "px-0", className),
+      ref,
+      ...props
+    }
+  );
+});
+const NativeSelect = forwardRef(
+  function NativeSelect2({ children, className, ...props }, ref) {
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: inputVariants({
+            className: `appearance-none pr-10 ${className ?? ""}`
+          }),
+          ref,
+          ...props,
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectChevronDownIcon, { className: "pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-af-text-subtle" })
+    ] });
   }
 );
-const FormFieldGroupLabel = forwardRef(function FormFieldGroupLabel2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("legend", { className: cn(FORM_LABEL_CLASS, "px-0", className), ref, ...props });
+const TEXTAREA_PLAIN_CLASS = "m-0 w-full resize-none border-0 bg-transparent p-0 text-sm leading-6 text-on-surface outline-none";
+const TEXTAREA_FIELD_CLASS = "min-h-28 max-h-52 resize-none overflow-y-auto py-3";
+function textareaVariants({ className } = {}) {
+  return inputVariants({ className: cn(TEXTAREA_FIELD_CLASS, className) });
+}
+const PackageTextarea = forwardRef(function PackageTextarea2({ className, variant = "field", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: variant === "plain" ? cn(TEXTAREA_PLAIN_CLASS, className) : textareaVariants({ className }),
+      ref,
+      ...props
+    }
+  );
 });
 export {
   ENUM_SELECT_EMPTY_VALUE as E,

package/dist/chunks/table-layout.js

@@ -1,7 +1,7 @@
 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";
+import { a as BODY_TEXT_CLASS } from "./typography-roles.js";
 const CODE_PANEL_PADDING_CLASS = {
   compact: "p-2",
   default: "p-3"
@@ -39,7 +39,12 @@ const CodePanel = forwardRef(
     return /* @__PURE__ */ jsx(
       "pre",
       {
-        className: codePanelVariants({ className, maxHeight, padding, surface }),
+        className: codePanelVariants({
+          className,
+          maxHeight,
+          padding,
+          surface
+        }),
         ref,
         tabIndex: tabIndex ?? (isScrollable ? 0 : void 0),
         ...props
@@ -47,20 +52,6 @@ const CodePanel = forwardRef(
     );
   }
 );
-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",
@@ -173,15 +164,7 @@ function DataTableStatusRow({
   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
-    }
-  ) }) });
+  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,
@@ -269,6 +252,20 @@ function DataTable({
     }
   );
 }
+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 tableCellWrapClassName = "min-w-0 [overflow-wrap:anywhere]";
 const tableCellTruncateClassName = "block min-w-0 max-w-full truncate whitespace-nowrap";
 const tableMinWidthWideClassName = "min-w-2xl";

package/dist/chunks/typography-roles.js

@@ -11,14 +11,14 @@ 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,
+  BODY_CODE_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,
+  BODY_TEXT_CLASS as a,
   SUPPORTING_CODE_CLASS as b,
   SUPPORTING_LABEL_CLASS as c,
   SUPPORTING_TEXT_CLASS as d,

package/dist/chunks/typography.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { B as Button } from "./button.js";
 import { c as cn } from "./cn.js";
-import { a as BODY_CODE_CLASS, b as SUPPORTING_CODE_CLASS, P as PAGE_HEADING_CLASS, S as SECTION_HEADING_CLASS, c as SUPPORTING_LABEL_CLASS, D as DENSE_BODY_TEXT_CLASS, C as CAPTION_TEXT_CLASS, M as MUTED_TEXT_CLASS, d as SUPPORTING_TEXT_CLASS, B as BODY_TEXT_CLASS, T as TEXT_TRUNCATE_CLASS, e as TEXT_WRAP_CLASS } from "./typography-roles.js";
+import { B as BODY_CODE_CLASS, b as SUPPORTING_CODE_CLASS, P as PAGE_HEADING_CLASS, S as SECTION_HEADING_CLASS, c as SUPPORTING_LABEL_CLASS, D as DENSE_BODY_TEXT_CLASS, C as CAPTION_TEXT_CLASS, M as MUTED_TEXT_CLASS, d as SUPPORTING_TEXT_CLASS, a as BODY_TEXT_CLASS, T as TEXT_TRUNCATE_CLASS, e as TEXT_WRAP_CLASS } from "./typography-roles.js";
 const ButtonLink = forwardRef(
   function ButtonLink2({ children, className, size = "default", tone = "default", ...props }, ref) {
     return /* @__PURE__ */ jsx(Button, { asChild: true, className, size, tone, children: /* @__PURE__ */ jsx("a", { ref, ...props, children }) });

package/dist/chunks/{widget-frame.js → widget-frame-states.js}

@@ -1,11 +1,147 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { c as cn } from "./cn.js";
+import { forwardRef } from "react";
 const WIDGET_FRAME_SECTION_HEADING_CLASS = "text-title-large uppercase text-on-surface";
 const WIDGET_FRAME_BODY_TEXT_CLASS = "text-body-medium text-on-surface-variant";
 const WIDGET_FRAME_SUBTITLE_CLASS = "font-mono text-display-small text-on-surface-variant [overflow-wrap:anywhere]";
 const WIDGET_FRAME_SUPPORTING_LABEL_CLASS = "text-label-medium uppercase text-on-surface-subtle";
 const WIDGET_FRAME_SUPPORTING_LABELS_CLASS = "[&_dt]:text-label-medium [&_dt]:uppercase [&_dt]:text-on-surface-subtle";
+const WIDGET_FRAME_MIN_WIDTH_CLASS = "min-w-0";
+const WIDGET_FRAME_WIDE_BODY_CLASS = "min-h-72";
+const WIDGET_FRAME_RESPONSIVE_SHELL_CLASS = "min-w-0 w-full";
+const WIDGET_FRAME_STORY_SHELL_DATA_ATTR = "data-widget-frame-story-shell";
+const WIDGET_FRAME_OVERFLOW_TOLERANCE_PX = 1;
+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
+);
+function widgetFrameStoryShellStyle(maxWidth) {
+  return {
+    style: {
+      maxWidth,
+      padding: "1rem",
+      width: "100%"
+    }
+  };
+}
+function widgetFrameHasNoHorizontalOverflow(element, tolerancePx = WIDGET_FRAME_OVERFLOW_TOLERANCE_PX) {
+  return element.scrollWidth <= element.clientWidth + tolerancePx;
+}
+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
+);
+function WidgetFrame({
+  bodyClassName,
+  bodyProps,
+  bodyScroll = true,
+  children,
+  className,
+  headerAction,
+  title,
+  wide = false
+}) {
+  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 /* @__PURE__ */ jsxs("article", { "aria-label": title, className: cardClassName, children: [
+    /* @__PURE__ */ jsxs("header", { className: WIDGET_FRAME_HEADER_CLASS, children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("h3", { className: "m-0 min-w-0 flex-1 text-title-large uppercase text-on-surface [overflow-wrap:anywhere]", children: title }) }),
+      /* @__PURE__ */ jsx("div", { className: WIDGET_FRAME_HEADER_TOOLS_CLASS, children: headerAction ?? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "block h-10 w-10 shrink-0",
+          "data-widget-frame-header-action-spacer": "true"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: bodyClassNames, ...bodyProps, children })
+  ] });
+}
+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";
+function WidgetSubtitle({
+  as: Component = "p",
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Component, { className: cn(WIDGET_SUBTITLE_CLASS, className), ...props, children });
+}
+function WidgetDetailCopy({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cn(DETAIL_COPY_CLASS, className), ...props, children });
+}
+function WidgetEmptyState({
+  children,
+  className,
+  compact = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        EMPTY_STATE_CLASS,
+        compact && EMPTY_STATE_COMPACT_CLASS,
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function WidgetEmptyStateTitle({
+  as: Component = "h3",
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(WIDGET_FRAME_SECTION_HEADING_CLASS, className),
+      ...props,
+      children
+    }
+  );
+}
+function WidgetEmptyStateText({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn("m-0", WIDGET_FRAME_BODY_TEXT_CLASS, className),
+      ...props,
+      children
+    }
+  );
+}
 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",
@@ -100,66 +236,6 @@ function WidgetFrameDisclosurePanel({
     }
   );
 }
-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";
-function WidgetSubtitle({
-  as: Component = "p",
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Component, { className: cn(WIDGET_SUBTITLE_CLASS, className), ...props, children });
-}
-function WidgetDetailCopy({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("p", { className: cn(DETAIL_COPY_CLASS, className), ...props, children });
-}
-function WidgetEmptyState({
-  children,
-  className,
-  compact = false,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        EMPTY_STATE_CLASS,
-        compact && EMPTY_STATE_COMPACT_CLASS,
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-}
-function WidgetEmptyStateTitle({
-  as: Component = "h3",
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: cn(WIDGET_FRAME_SECTION_HEADING_CLASS, className),
-      ...props,
-      children
-    }
-  );
-}
-function WidgetEmptyStateText({
-  children,
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx("p", { className: cn("m-0", WIDGET_FRAME_BODY_TEXT_CLASS, className), ...props, children });
-}
 function WidgetFrameSkeleton({
   className,
   ...props
@@ -198,14 +274,7 @@ function WidgetLoadingState({
       ...props,
       children: [
         children,
-        resolvedPlaceholder ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: WIDGET_LOADING_PLACEHOLDER_CLASS,
-            children: resolvedPlaceholder
-          }
-        ) : null
+        resolvedPlaceholder ? /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: WIDGET_LOADING_PLACEHOLDER_CLASS, children: resolvedPlaceholder }) : null
       ]
     }
   );
@@ -218,7 +287,11 @@ function WidgetErrorState({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn(WIDGET_ERROR_STATE_CLASS, WIDGET_STATE_PANEL_CLASS, className),
+      className: cn(
+        WIDGET_ERROR_STATE_CLASS,
+        WIDGET_STATE_PANEL_CLASS,
+        className
+      ),
       role: "alert",
       ...props,
       children
@@ -244,75 +317,6 @@ function WidgetSuccessState({
     }
   );
 }
-const WIDGET_FRAME_MIN_WIDTH_CLASS = "min-w-0";
-const WIDGET_FRAME_WIDE_BODY_CLASS = "min-h-72";
-const WIDGET_FRAME_RESPONSIVE_SHELL_CLASS = "min-w-0 w-full";
-const WIDGET_FRAME_STORY_SHELL_DATA_ATTR = "data-widget-frame-story-shell";
-const WIDGET_FRAME_OVERFLOW_TOLERANCE_PX = 1;
-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
-);
-function widgetFrameStoryShellStyle(maxWidth) {
-  return {
-    style: {
-      maxWidth,
-      padding: "1rem",
-      width: "100%"
-    }
-  };
-}
-function widgetFrameHasNoHorizontalOverflow(element, tolerancePx = WIDGET_FRAME_OVERFLOW_TOLERANCE_PX) {
-  return element.scrollWidth <= element.clientWidth + tolerancePx;
-}
-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
-);
-function WidgetFrame({
-  bodyClassName,
-  bodyProps,
-  bodyScroll = true,
-  children,
-  className,
-  headerAction,
-  title,
-  wide = false
-}) {
-  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 /* @__PURE__ */ jsxs("article", { "aria-label": title, className: cardClassName, children: [
-    /* @__PURE__ */ jsxs("header", { className: WIDGET_FRAME_HEADER_CLASS, children: [
-      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("h3", { className: "m-0 min-w-0 flex-1 text-title-large uppercase text-on-surface [overflow-wrap:anywhere]", children: title }) }),
-      /* @__PURE__ */ jsx("div", { className: WIDGET_FRAME_HEADER_TOOLS_CLASS, children: headerAction ?? /* @__PURE__ */ jsx(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: "block h-10 w-10 shrink-0",
-          "data-widget-frame-header-action-spacer": "true"
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: bodyClassNames, ...bodyProps, children })
-  ] });
-}
 export {
   WIDGET_FRAME_BODY_TEXT_CLASS as W,
   WIDGET_FRAME_MIN_WIDTH_CLASS as a,

package/dist/data-display/data-table.d.ts

@@ -24,4 +24,4 @@ export interface DataTableProps<Row> {
     state?: DataTableState;
     tableClassName?: string;
 }
-export declare function DataTable<Row>({ columns, data, getRowKey, ariaLabel, caption, containerClassName, containerProps, emptyMessage, errorMessage, loadingMessage, rowClassName, size, state, tableClassName, }: DataTableProps<Row>): import("react").JSX.Element;
+export declare function DataTable<Row>({ columns, data, getRowKey, ariaLabel, caption, containerClassName, containerProps, emptyMessage, errorMessage, loadingMessage, rowClassName, size, state, tableClassName, }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;

package/dist/data-display/index.d.ts

@@ -1,12 +1,12 @@
 /** Stable category path for `@you-agent-factory/components/data-display`. */
 export declare const COMPONENTS_CATEGORY: "data-display";
 export type ComponentsCategory = typeof COMPONENTS_CATEGORY;
-export { CodePanel, codePanelVariants } from "./code-panel";
 export type { CodePanelProps } from "./code-panel";
-export { DescriptionList } from "./description-list";
-export type { DescriptionListProps } from "./description-list";
-export { DataTable } from "./data-table";
+export { CodePanel, codePanelVariants } from "./code-panel";
 export type { DataTableColumn, DataTableProps, DataTableState, } from "./data-table";
-export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "./table";
+export { DataTable } from "./data-table";
+export type { DescriptionListProps } from "./description-list";
+export { DescriptionList } from "./description-list";
 export type { TableProps, TableSize } from "./table";
+export { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "./table";
 export { tableCellTruncateClassName, tableCellWrapClassName, tableMinWidthWideClassName, tableNarrowContainerClassName, } from "./table-layout";