@tappify/extension-sdk 2.0.0 → 2.1.0-beta.1

package/dist/ui.mjs

@@ -0,0 +1,1018 @@
+import {
+  useTap
+} from "./chunk-QA5AL3VZ.mjs";
+import {
+  TapError
+} from "./chunk-QXD7WVKK.mjs";
+import "./chunk-J5LGTIGS.mjs";
+
+// src/client/ui/cn.ts
+import clsx from "clsx";
+function cn(...values) {
+  return clsx(values);
+}
+
+// src/client/ui/button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Button({
+  "aria-busy": ariaBusy,
+  "data-slot": slot = "button",
+  children,
+  className,
+  disabled,
+  loading = false,
+  size = "default",
+  type = "button",
+  variant = "primary",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      "aria-busy": ariaBusy ?? (loading || void 0),
+      className: cn("tap-button", className),
+      "data-loading": loading || void 0,
+      "data-size": size,
+      "data-slot": slot,
+      "data-variant": variant,
+      disabled: loading ? true : disabled,
+      type,
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "tap-button__spinner" }) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/client/ui/card.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Card({ className, size = "default", ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...props,
+      className: cn("tap-ui-card", className),
+      "data-size": size,
+      "data-slot": "card"
+    }
+  );
+}
+function CardHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...props,
+      className: cn("tap-card__header", className),
+      "data-slot": "card-header"
+    }
+  );
+}
+function CardTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...props,
+      className: cn("tap-card__title", className),
+      "data-slot": "card-title"
+    }
+  );
+}
+function CardDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...props,
+      className: cn("tap-card__description", className),
+      "data-slot": "card-description"
+    }
+  );
+}
+function CardAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...props,
+      className: cn("tap-card__action", className),
+      "data-slot": "card-action"
+    }
+  );
+}
+function CardContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...props,
+      className: cn("tap-card__content", className),
+      "data-slot": "card-content"
+    }
+  );
+}
+function CardFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...props,
+      className: cn("tap-card__footer", className),
+      "data-slot": "card-footer"
+    }
+  );
+}
+
+// src/client/ui/dialog.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef
+} from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function activeElementNear(node) {
+  const root = node?.getRootNode();
+  return root instanceof ShadowRoot ? root.activeElement : document.activeElement;
+}
+var DialogContext = createContext(null);
+function useDialogPart() {
+  const value = useContext(DialogContext);
+  if (!value)
+    throw new Error("Dialog compound parts must be rendered inside Dialog.");
+  return value;
+}
+function Dialog({
+  children,
+  onOpenChange,
+  open
+}) {
+  const tap = useTap();
+  const contentRef = useRef(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const close = useCallback(() => onOpenChange(false), [onOpenChange]);
+  const focusables = useCallback(
+    () => Array.from(
+      contentRef.current?.querySelectorAll(FOCUSABLE) ?? []
+    ),
+    []
+  );
+  useEffect(() => {
+    if (!open) return;
+    const previous = activeElementNear(contentRef.current);
+    focusables()[0]?.focus();
+    return () => {
+      if (previous instanceof HTMLElement) previous.focus();
+    };
+  }, [focusables, open]);
+  useEffect(() => {
+    if (!open || !tap.__portal) return;
+    tap.__portal.addEventListener("tap:dialog-close", close);
+    return () => tap.__portal?.removeEventListener("tap:dialog-close", close);
+  }, [close, open, tap]);
+  if (!open) return null;
+  if (!tap.__portal) {
+    throw new TapError(
+      "TAP_NO_PORTAL",
+      "Dialog needs the host portal node inside the extension shadow root."
+    );
+  }
+  const onKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close();
+      return;
+    }
+    if (event.key !== "Tab") return;
+    const items = focusables();
+    if (items.length === 0) return;
+    const first = items[0];
+    const last = items.at(-1);
+    const active = activeElementNear(contentRef.current);
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx3(
+      DialogContext.Provider,
+      {
+        value: { close, contentRef, descriptionId, titleId },
+        children: /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "tap-root tap-ui-dialog-overlay",
+            "data-slot": "dialog-overlay",
+            onKeyDown,
+            onMouseDown: (event) => {
+              if (event.target === event.currentTarget) close();
+            },
+            children
+          }
+        )
+      }
+    ),
+    tap.__portal
+  );
+}
+function DialogContent({
+  className,
+  size = "default",
+  surface = "paper",
+  ...props
+}) {
+  const dialog = useDialogPart();
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...props,
+      "aria-describedby": props["aria-describedby"] ?? dialog.descriptionId,
+      "aria-labelledby": props["aria-labelledby"] ?? dialog.titleId,
+      "aria-modal": "true",
+      className: cn("tap-ui-dialog", className),
+      "data-size": size,
+      "data-slot": "dialog-content",
+      "data-surface": surface,
+      ref: dialog.contentRef,
+      role: "dialog"
+    }
+  );
+}
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "header",
+    {
+      ...props,
+      className: cn("tap-dialog__header", className),
+      "data-slot": "dialog-header"
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  const dialog = useDialogPart();
+  return /* @__PURE__ */ jsx3(
+    "h2",
+    {
+      ...props,
+      className: cn("tap-dialog__title", className),
+      "data-slot": "dialog-title",
+      id: props.id ?? dialog.titleId
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  const dialog = useDialogPart();
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...props,
+      className: cn("tap-dialog__description", className),
+      "data-slot": "dialog-description",
+      id: props.id ?? dialog.descriptionId
+    }
+  );
+}
+function DialogBody({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ...props,
+      className: cn("tap-dialog__body", className),
+      "data-slot": "dialog-body"
+    }
+  );
+}
+function DialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "footer",
+    {
+      ...props,
+      className: cn("tap-dialog__footer", className),
+      "data-slot": "dialog-footer"
+    }
+  );
+}
+function DialogClose({
+  children = "\xD7",
+  ...props
+}) {
+  const dialog = useDialogPart();
+  return /* @__PURE__ */ jsx3(
+    Button,
+    {
+      ...props,
+      "aria-label": props["aria-label"] ?? "Close dialog",
+      "data-slot": "dialog-close",
+      onClick: (event) => {
+        props.onClick?.(event);
+        if (!event.defaultPrevented) dialog.close();
+      },
+      size: "icon-sm",
+      variant: "tertiary",
+      children
+    }
+  );
+}
+
+// src/client/ui/layout.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Stack({
+  gap = 16,
+  className,
+  "data-slot": slot = "stack",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ...props,
+      className: cn("tap-stack", className),
+      "data-gap": gap,
+      "data-slot": slot
+    }
+  );
+}
+function Inline({
+  align = "center",
+  gap = 8,
+  justify = "start",
+  className,
+  "data-slot": slot = "inline",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ...props,
+      className: cn("tap-inline", className),
+      "data-align": align,
+      "data-gap": gap,
+      "data-justify": justify,
+      "data-slot": slot
+    }
+  );
+}
+
+// src/client/ui/feedback.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function Metric({ delta, description, label, value }) {
+  const percent = delta === void 0 ? void 0 : Math.round(delta * 100);
+  const direction = percent === void 0 || percent === 0 ? "flat" : percent > 0 ? "up" : "down";
+  return /* @__PURE__ */ jsxs2("div", { className: "tap-metric", "data-slot": "metric", children: [
+    /* @__PURE__ */ jsx5("div", { className: "tap-metric__label", "data-slot": "metric-label", children: label }),
+    /* @__PURE__ */ jsx5("div", { className: "tap-metric__value", "data-slot": "metric-value", children: value }),
+    percent !== void 0 ? /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "tap-metric__delta",
+        "data-direction": direction,
+        "data-slot": "metric-delta",
+        children: [
+          percent > 0 ? "+" : "",
+          percent,
+          "%"
+        ]
+      }
+    ) : null,
+    description ? /* @__PURE__ */ jsx5("div", { className: "tap-metric__description", "data-slot": "metric-description", children: description }) : null
+  ] });
+}
+function Skeleton({ className, lines = 1, width }) {
+  return /* @__PURE__ */ jsx5("div", { className: cn("tap-ui-skeleton", className), "data-slot": "skeleton", children: Array.from({ length: Math.max(0, lines) }, (_, index) => /* @__PURE__ */ jsx5(
+    "span",
+    {
+      className: "tap-skeleton__line",
+      "data-slot": "skeleton-line",
+      style: { width }
+    },
+    index
+  )) });
+}
+function EmptyState({ action, description, title }) {
+  return /* @__PURE__ */ jsxs2(Stack, { className: "tap-ui-state", "data-slot": "empty-state", gap: 12, children: [
+    /* @__PURE__ */ jsx5("div", { className: "tap-state__title", children: title }),
+    description ? /* @__PURE__ */ jsx5("div", { className: "tap-state__description", children: description }) : null,
+    action ? /* @__PURE__ */ jsx5("div", { className: "tap-state__action", children: action }) : null
+  ] });
+}
+function ErrorState({
+  code,
+  description,
+  onRetry,
+  title
+}) {
+  return /* @__PURE__ */ jsxs2(
+    Stack,
+    {
+      className: "tap-ui-state tap-ui-state--error",
+      "data-slot": "error-state",
+      gap: 12,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx5("div", { className: "tap-state__title", children: title }),
+        description ? /* @__PURE__ */ jsx5("div", { className: "tap-state__description", children: description }) : null,
+        code ? /* @__PURE__ */ jsx5("code", { className: "tap-state__code", children: code }) : null,
+        onRetry ? /* @__PURE__ */ jsx5("div", { className: "tap-state__action", children: /* @__PURE__ */ jsx5(Button, { variant: "secondary", onClick: onRetry, children: "Try again" }) }) : null
+      ]
+    }
+  );
+}
+
+// src/client/ui/field.tsx
+import {
+  Children,
+  createContext as createContext2,
+  forwardRef,
+  isValidElement,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useId as useId2,
+  useRef as useRef2
+} from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FieldContext = createContext2(null);
+function Field({
+  children,
+  className,
+  ...props
+}) {
+  const generatedId = useId2();
+  const items = Children.toArray(children);
+  const control = items.find(
+    (child) => isValidElement(child) && (child.type === Input || child.type === Textarea || child.type === Checkbox || child.type === Select)
+  );
+  const customId = isValidElement(control) && typeof control.props.id === "string" ? control.props.id : void 0;
+  const hasDescription = items.some(
+    (child) => isValidElement(child) && child.type === FieldDescription
+  );
+  const hasError = items.some(
+    (child) => isValidElement(child) && child.type === FieldError
+  );
+  const baseId = `tap-ui-field-${generatedId.replace(/:/g, "")}`;
+  const value = {
+    controlId: customId ?? `${baseId}-control`,
+    descriptionId: hasDescription ? `${baseId}-description` : void 0,
+    errorId: hasError ? `${baseId}-error` : void 0
+  };
+  return /* @__PURE__ */ jsx6(FieldContext.Provider, { value, children: /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ...props,
+      className: cn("tap-ui-field", className),
+      "data-invalid": hasError || void 0,
+      "data-slot": "field",
+      children
+    }
+  ) });
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  const field = useContext2(FieldContext);
+  return /* @__PURE__ */ jsx6(
+    "label",
+    {
+      ...props,
+      className: cn("tap-field__label", className),
+      "data-slot": "field-label",
+      htmlFor: props.htmlFor ?? field?.controlId
+    }
+  );
+}
+function FieldDescription({
+  className,
+  ...props
+}) {
+  const field = useContext2(FieldContext);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ...props,
+      className: cn("tap-field__description", className),
+      "data-slot": "field-description",
+      id: props.id ?? field?.descriptionId
+    }
+  );
+}
+function FieldError({
+  className,
+  ...props
+}) {
+  const field = useContext2(FieldContext);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ...props,
+      className: cn("tap-field__error", className),
+      "data-slot": "field-error",
+      id: props.id ?? field?.errorId,
+      role: props.role ?? "alert"
+    }
+  );
+}
+function joinIds(...ids) {
+  const unique = [
+    ...new Set(ids.flatMap((id) => id?.split(/\s+/) ?? []).filter(Boolean))
+  ];
+  return unique.length > 0 ? unique.join(" ") : void 0;
+}
+function fieldControlProps(field, id, describedBy, invalid) {
+  return {
+    "aria-describedby": joinIds(
+      describedBy,
+      field?.descriptionId,
+      field?.errorId
+    ),
+    "aria-invalid": field?.errorId ? true : invalid,
+    id: id ?? field?.controlId
+  };
+}
+var Input = forwardRef(function Input2({
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}, ref) {
+  const field = useContext2(FieldContext);
+  return /* @__PURE__ */ jsx6(
+    "input",
+    {
+      ...props,
+      ...fieldControlProps(field, id, describedBy, invalid),
+      className: cn("tap-ui-control tap-input", className),
+      "data-slot": "input",
+      ref
+    }
+  );
+});
+var Textarea = forwardRef(function Textarea2({
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}, ref) {
+  const field = useContext2(FieldContext);
+  return /* @__PURE__ */ jsx6(
+    "textarea",
+    {
+      ...props,
+      ...fieldControlProps(field, id, describedBy, invalid),
+      className: cn("tap-ui-control tap-textarea", className),
+      "data-slot": "textarea",
+      ref
+    }
+  );
+});
+var Select = forwardRef(function Select2({
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": invalid,
+  ...props
+}, ref) {
+  const field = useContext2(FieldContext);
+  return /* @__PURE__ */ jsx6(
+    "select",
+    {
+      ...props,
+      ...fieldControlProps(field, id, describedBy, invalid),
+      className: cn("tap-ui-control tap-select", className),
+      "data-slot": "select",
+      ref
+    }
+  );
+});
+var Checkbox = forwardRef(
+  function Checkbox2({
+    checked,
+    className,
+    id,
+    indeterminate = false,
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid,
+    ...props
+  }, forwardedRef) {
+    const field = useContext2(FieldContext);
+    const innerRef = useRef2(null);
+    useEffect2(() => {
+      if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const setRef = (element) => {
+      innerRef.current = element;
+      if (typeof forwardedRef === "function") forwardedRef(element);
+      else if (forwardedRef) forwardedRef.current = element;
+    };
+    return /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ...props,
+        ...fieldControlProps(field, id, describedBy, invalid),
+        checked,
+        className: cn("tap-checkbox", className),
+        "data-slot": "checkbox",
+        "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
+        ref: setRef,
+        type: "checkbox"
+      }
+    );
+  }
+);
+
+// src/client/ui/page-header.tsx
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function PageHeader({
+  actions,
+  className,
+  description,
+  title,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(
+    "header",
+    {
+      ...props,
+      className: cn("tap-ui-page-header", className),
+      "data-slot": "page-header",
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "tap-page-header__copy", "data-slot": "page-header-copy", children: [
+          /* @__PURE__ */ jsx7("h2", { className: "tap-page-header__title", "data-slot": "page-header-title", children: title }),
+          description ? /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: "tap-page-header__description",
+              "data-slot": "page-header-description",
+              children: description
+            }
+          ) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "tap-page-header__actions",
+            "data-slot": "page-header-actions",
+            children: actions
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/client/ui/schema-form.tsx
+import {
+  useMemo,
+  useState
+} from "react";
+import { z } from "zod";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function text(source, key) {
+  return typeof source[key] === "string" ? source[key] : void 0;
+}
+function humanize(name) {
+  const spaced = name.replace(/[_-]+/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+function fieldKind(property) {
+  if (Array.isArray(property.enum)) return "enum";
+  if (property.type === "boolean") return "boolean";
+  if (property.type === "number" || property.type === "integer")
+    return "number";
+  if (property.format === "textarea") return "textarea";
+  if (property.format === "date") return "date";
+  return "text";
+}
+function schemaFields(schema) {
+  if (typeof schema.properties !== "object" || schema.properties === null)
+    return [];
+  const required = new Set(
+    Array.isArray(schema.required) ? schema.required.filter(
+      (name) => typeof name === "string"
+    ) : []
+  );
+  return Object.entries(schema.properties).flatMap(([name, raw]) => {
+    if (typeof raw !== "object" || raw === null) return [];
+    const property = { ...raw };
+    const kind = fieldKind(property);
+    const field = {
+      name,
+      label: text(property, "title") ?? humanize(name),
+      kind,
+      required: required.has(name)
+    };
+    const description = text(property, "description");
+    if (description) field.description = description;
+    if (kind === "enum" && Array.isArray(property.enum)) {
+      field.options = property.enum.filter((option) => typeof option === "string").map((option) => ({ value: option, label: option }));
+    }
+    return [field];
+  });
+}
+function compile(schema) {
+  try {
+    return z.fromJSONSchema(schema);
+  } catch {
+    return null;
+  }
+}
+function clean(fields, values) {
+  return Object.fromEntries(
+    fields.flatMap((field) => {
+      const value = values[field.name];
+      return value === void 0 || value === "" ? [] : [[field.name, value]];
+    })
+  );
+}
+function validate(fields, compiled, values) {
+  const errors = {};
+  for (const field of fields) {
+    if (field.required && (values[field.name] === void 0 || values[field.name] === "")) {
+      errors[field.name] = `${field.label} is required.`;
+    }
+  }
+  if (!compiled) return errors;
+  const result = compiled.safeParse(values);
+  if (result.success) return errors;
+  for (const issue of result.error.issues) {
+    const key = issue.path[0];
+    if (typeof key === "string" && errors[key] === void 0)
+      errors[key] = issue.message;
+  }
+  return errors;
+}
+function SchemaForm({
+  schema,
+  value,
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+  busy = false,
+  onSubmit,
+  onCancel
+}) {
+  const fields = useMemo(() => schemaFields(schema), [schema]);
+  const compiled = useMemo(() => compile(schema), [schema]);
+  const [values, setValues] = useState(() => ({ ...value }));
+  const [errors, setErrors] = useState({});
+  const set = (name, next) => {
+    setValues((current) => ({ ...current, [name]: next }));
+    setErrors((current) => {
+      if (current[name] === void 0) return current;
+      const { [name]: _removed, ...rest } = current;
+      return rest;
+    });
+  };
+  const submit = (event) => {
+    event.preventDefault();
+    const candidate = clean(fields, values);
+    const found = validate(fields, compiled, candidate);
+    setErrors(found);
+    if (Object.keys(found).length === 0) void onSubmit(candidate);
+  };
+  return /* @__PURE__ */ jsxs4(
+    "form",
+    {
+      className: "tap-schema-form",
+      "data-slot": "schema-form",
+      noValidate: true,
+      onSubmit: submit,
+      children: [
+        fields.map((field) => {
+          const raw = values[field.name];
+          const description = field.description ? /* @__PURE__ */ jsx8(FieldDescription, { children: field.description }) : null;
+          const error = errors[field.name] ? /* @__PURE__ */ jsx8(FieldError, { children: errors[field.name] }) : null;
+          if (field.kind === "boolean") {
+            return /* @__PURE__ */ jsxs4(Field, { className: "tap-ui-field--checkbox", children: [
+              /* @__PURE__ */ jsxs4(FieldLabel, { className: "tap-checkbox-row", children: [
+                /* @__PURE__ */ jsx8(
+                  Checkbox,
+                  {
+                    checked: raw === true,
+                    onChange: (event) => set(field.name, event.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsx8("span", { children: field.label })
+              ] }),
+              description,
+              error
+            ] }, field.name);
+          }
+          return /* @__PURE__ */ jsxs4(Field, { children: [
+            /* @__PURE__ */ jsx8(FieldLabel, { children: field.label }),
+            field.kind === "enum" ? /* @__PURE__ */ jsxs4(
+              Select,
+              {
+                required: field.required,
+                value: typeof raw === "string" ? raw : "",
+                onChange: (event) => set(field.name, event.target.value),
+                children: [
+                  /* @__PURE__ */ jsx8("option", { value: "", children: "Choose one" }),
+                  field.options?.map((option) => /* @__PURE__ */ jsx8("option", { value: option.value, children: option.label }, option.value))
+                ]
+              }
+            ) : field.kind === "textarea" ? /* @__PURE__ */ jsx8(
+              Textarea,
+              {
+                required: field.required,
+                value: typeof raw === "string" ? raw : "",
+                onChange: (event) => set(field.name, event.target.value)
+              }
+            ) : /* @__PURE__ */ jsx8(
+              Input,
+              {
+                required: field.required,
+                type: field.kind === "number" ? "number" : field.kind === "date" ? "date" : "text",
+                value: typeof raw === "string" || typeof raw === "number" ? String(raw) : "",
+                onChange: (event) => set(
+                  field.name,
+                  field.kind === "number" ? event.target.value === "" ? "" : Number(event.target.value) : event.target.value
+                )
+              }
+            ),
+            description,
+            error
+          ] }, field.name);
+        }),
+        /* @__PURE__ */ jsxs4(
+          Inline,
+          {
+            className: "tap-schema-form__actions",
+            "data-slot": "form-actions",
+            justify: "end",
+            children: [
+              onCancel ? /* @__PURE__ */ jsx8(Button, { variant: "secondary", onClick: onCancel, children: cancelLabel }) : null,
+              /* @__PURE__ */ jsx8(Button, { loading: busy, type: "submit", children: submitLabel })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/client/ui/table.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function Table({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9("div", { className: "tap-ui-table-container", "data-slot": "table-container", children: /* @__PURE__ */ jsx9(
+    "table",
+    {
+      ...props,
+      className: cn("tap-ui-table", className),
+      "data-slot": "table"
+    }
+  ) });
+}
+function TableHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    "thead",
+    {
+      ...props,
+      className: cn("tap-table__header", className),
+      "data-slot": "table-header"
+    }
+  );
+}
+function TableBody({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    "tbody",
+    {
+      ...props,
+      className: cn("tap-table__body", className),
+      "data-slot": "table-body"
+    }
+  );
+}
+function TableRow({
+  className,
+  variant = "body",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    "tr",
+    {
+      ...props,
+      className: cn("tap-table__row", className),
+      "data-slot": "table-row",
+      "data-variant": variant
+    }
+  );
+}
+function TableHead({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    "th",
+    {
+      ...props,
+      className: cn("tap-table__head", className),
+      "data-slot": "table-head"
+    }
+  );
+}
+function TableCell({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    "td",
+    {
+      ...props,
+      className: cn("tap-table__cell", className),
+      "data-slot": "table-cell"
+    }
+  );
+}
+export {
+  Button,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  EmptyState,
+  ErrorState,
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  Inline,
+  Input,
+  Metric,
+  PageHeader,
+  SchemaForm,
+  Select,
+  Skeleton,
+  Stack,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Textarea,
+  cn,
+  schemaFields
+};
+//# sourceMappingURL=ui.mjs.map