@you-agent-factory/components 0.0.0 → 0.0.1

package/dist/chunks/button.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef, Children, isValidElement, cloneElement } from "react";
+import { c as cn } from "./cn.js";
+const BUTTON_LOADING_CONTENT_CLASS = "inline-flex items-center justify-center gap-2";
+const BUTTON_LOADING_HIDDEN_CONTENT_CLASS = "opacity-0";
+const BUTTON_LOADING_OVERLAY_CLASS = "pointer-events-none absolute inset-0 inline-flex items-center justify-center";
+const BUTTON_BASE_CLASS = "inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border font-semibold outline-none transition-colors focus-visible:ring-2 focus-visible:ring-af-focus-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:border-outline disabled:bg-surface-container-low disabled:text-on-surface-disabled";
+const BUTTON_TONE_CLASS = {
+  default: "border-primary bg-primary text-on-primary hover:border-on-primary-container hover:bg-on-primary-container",
+  destructive: "border-error bg-error text-on-error hover:border-af-danger-hover hover:bg-af-danger-hover",
+  ghost: "border-transparent bg-transparent text-on-surface-variant hover:bg-af-overlay hover:text-on-surface",
+  outline: "border-outline bg-surface-container-high text-on-surface hover:border-outline-variant hover:bg-af-overlay",
+  secondary: "border-outline-variant bg-surface-container-low text-primary hover:border-primary hover:bg-af-overlay",
+  warning: "border-af-warning-border bg-warning-container text-on-warning-container hover:border-af-warning-border hover:bg-warning-container hover:text-on-warning-container"
+};
+const BUTTON_SIZE_CLASS = {
+  default: "px-4 py-2.5 text-sm",
+  icon: "h-11 w-11 px-0 py-0",
+  iconPill: "h-10 min-h-10 w-10 rounded-full px-0 py-0",
+  lg: "px-5 py-3 text-base",
+  pill: "min-h-9 rounded-full px-3 py-2 text-xs",
+  sm: "min-h-9 rounded-lg px-3 py-2 text-xs"
+};
+const buttonVariants = ({
+  className,
+  size = "default",
+  tone = "default"
+}) => cn(
+  BUTTON_BASE_CLASS,
+  BUTTON_TONE_CLASS[tone],
+  BUTTON_SIZE_CLASS[size],
+  className
+);
+function ButtonLoadingSpinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "size-4 animate-spin",
+      fill: "none",
+      focusable: "false",
+      viewBox: "0 0 16 16",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "text-on-surface-disabled",
+            cx: "8",
+            cy: "8",
+            r: "6",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8 2a6 6 0 0 1 6 6",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeWidth: "1.5"
+          }
+        )
+      ]
+    }
+  );
+}
+function renderButtonContent(children, loading) {
+  if (!loading) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          BUTTON_LOADING_CONTENT_CLASS,
+          BUTTON_LOADING_HIDDEN_CONTENT_CLASS
+        ),
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: BUTTON_LOADING_OVERLAY_CLASS, children: /* @__PURE__ */ jsx(ButtonLoadingSpinner, {}) })
+  ] });
+}
+function suppressSlottedActivation(event) {
+  event.preventDefault();
+  const nativeEvent = event.nativeEvent;
+  if (typeof nativeEvent.stopImmediatePropagation === "function") {
+    nativeEvent.stopImmediatePropagation();
+    return;
+  }
+  event.stopPropagation();
+}
+function shouldSuppressSlottedKeyboardActivation(event) {
+  return event.key === "Enter" || event.key === " ";
+}
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref && typeof ref === "object") {
+        ref.current = value;
+      }
+    }
+  };
+}
+function renderBlockedAsChildButton({
+  children,
+  className,
+  loading,
+  props,
+  ref,
+  size,
+  tone
+}) {
+  const child = Children.only(children);
+  if (!isValidElement(child)) {
+    throw new Error("Button with asChild requires a single React element child.");
+  }
+  return cloneElement(child, {
+    ...props,
+    "aria-busy": loading || void 0,
+    "aria-disabled": true,
+    className: buttonVariants({
+      className: cn("pointer-events-none", className, child.props.className),
+      size,
+      tone
+    }),
+    href: void 0,
+    onClick: suppressSlottedActivation,
+    onKeyDown: (event) => {
+      if (shouldSuppressSlottedKeyboardActivation(event)) {
+        suppressSlottedActivation(event);
+      }
+    },
+    ref: mergeRefs(ref, child.props.ref)
+  });
+}
+const Button = forwardRef(
+  function Button2({
+    asChild = false,
+    children,
+    className,
+    disabled,
+    loading = false,
+    onClick,
+    onKeyDown,
+    size = "default",
+    tone = "default",
+    type = "button",
+    ...props
+  }, ref) {
+    const isInteractionBlocked = disabled || loading;
+    const showLoadingOverlay = loading && !asChild;
+    if (asChild && isInteractionBlocked) {
+      return renderBlockedAsChildButton({
+        children,
+        className,
+        loading,
+        props,
+        ref,
+        size,
+        tone
+      });
+    }
+    const Component = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        "aria-busy": loading || void 0,
+        className: buttonVariants({
+          className: cn(showLoadingOverlay && "relative", className),
+          size,
+          tone
+        }),
+        disabled: asChild ? void 0 : isInteractionBlocked,
+        onClick,
+        onKeyDown,
+        ref,
+        ...!asChild ? { type } : void 0,
+        ...props,
+        children: renderButtonContent(children, showLoadingOverlay)
+      }
+    );
+  }
+);
+export {
+  Button as B,
+  buttonVariants as b
+};

package/dist/chunks/cn.js

@@ -0,0 +1,6 @@
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+export {
+  cn as c
+};

package/dist/chunks/factory-emulator-controls.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { B as Button } from "./button.js";
+import { c as cn } from "./cn.js";
+const FACTORY_EMULATOR_SPEEDS = [0.5, 1, 2, 4];
+const STATUS_TONE_CLASS = {
+  danger: "bg-error-container text-on-error-container",
+  neutral: "bg-surface-container-high text-on-surface-variant",
+  success: "bg-success-container text-on-success-container",
+  warning: "bg-warning-container text-on-warning-container"
+};
+function isFactoryEmulatorSpeed(value) {
+  return FACTORY_EMULATOR_SPEEDS.includes(value);
+}
+function FactoryEmulatorControls({
+  className,
+  disabledActions = [],
+  isPlaying,
+  onPause,
+  onPlay,
+  onRestart,
+  onSpeedChange,
+  onStep,
+  runtimeStatus,
+  showPlaybackActions = true,
+  showRuntimeStatus = true,
+  showSpeedControl = true,
+  speed,
+  ...props
+}) {
+  const disabled = new Set(disabledActions);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": "Factory emulator playback controls",
+      className: cn(
+        "factory-emulator-playback flex w-full flex-wrap items-center gap-2 rounded-xl border border-outline bg-surface-container-low p-3",
+        className
+      ),
+      ...props,
+      children: [
+        showPlaybackActions ? /* @__PURE__ */ jsxs("div", { className: "factory-emulator-playback__actions flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "factory-emulator-playback__action",
+              disabled: disabled.has("play"),
+              onClick: onPlay,
+              size: "sm",
+              children: "Play"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "factory-emulator-playback__action",
+              disabled: disabled.has("pause"),
+              onClick: onPause,
+              size: "sm",
+              tone: "secondary",
+              children: "Pause"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "factory-emulator-playback__action",
+              disabled: disabled.has("step"),
+              onClick: onStep,
+              size: "sm",
+              tone: "outline",
+              children: "Step"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: "factory-emulator-playback__action",
+              disabled: disabled.has("restart"),
+              onClick: onRestart,
+              size: "sm",
+              tone: "ghost",
+              children: "Restart"
+            }
+          )
+        ] }) : null,
+        showSpeedControl ? /* @__PURE__ */ jsxs("label", { className: "factory-emulator-playback__speed ml-auto flex min-h-9 items-center gap-2 text-body-small font-medium text-on-surface-variant", children: [
+          /* @__PURE__ */ jsx("span", { children: "Speed" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              "aria-label": "Playback speed",
+              className: "factory-emulator-playback__speed-select min-h-9 rounded-lg border border-outline bg-surface-container-high px-2 text-body-small text-on-surface outline-none focus-visible:ring-2 focus-visible:ring-af-focus-ring",
+              onChange: (event) => {
+                const nextSpeed = Number(event.target.value);
+                if (isFactoryEmulatorSpeed(nextSpeed)) onSpeedChange(nextSpeed);
+              },
+              value: speed,
+              children: FACTORY_EMULATOR_SPEEDS.map((option) => /* @__PURE__ */ jsxs("option", { value: option, children: [
+                option,
+                "x"
+              ] }, option))
+            }
+          )
+        ] }) : null,
+        showRuntimeStatus ? /* @__PURE__ */ jsx(
+          "output",
+          {
+            "aria-label": "Runtime status",
+            className: cn(
+              "factory-emulator-playback__status min-h-9 rounded-full px-3 py-2 text-body-small font-medium",
+              STATUS_TONE_CLASS[runtimeStatus.tone ?? "neutral"]
+            ),
+            "data-playing": isPlaying ? "true" : "false",
+            children: runtimeStatus.label
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  FactoryEmulatorControls as F
+};