@tailorkit/react 0.1.0-beta.40 → 0.1.0-beta.42

package/README.md

@@ -1,3 +1,35 @@
 # TailorKit React
 
 Use the React components and hooks in `@tailorkit/react` to integrate TailorKit into your SaaS product.
+
+## Pressable
+
+Register the standard `primitives` with the host client and `primitives(theme)` with the contract's Zod, Valibot, or ArkType adapter. Generated extension types expose the same Pressable API for every validator.
+
+Pressable owns a `<div role="button">` and its layout. `layout` defaults to `"inline"` (`inline-flex`); `"box"`, `"flex"`, and `"grid"` use `block`, `flex`, and `grid`. It accepts existing primitive theme tokens, responsive styles, and layout props, including `align`, `gap`, `padding`, and `columns`.
+
+```tsx
+<Pressable
+  layout="flex"
+  align="center"
+  gap="sm"
+  padding="md"
+  onPress={openEmail}
+>
+  <Box grow="1">
+    <Inline>{email.sender}</Inline>
+    <Inline>{email.subject}</Inline>
+  </Box>
+  <Inline>{email.receivedAt}</Inline>
+</Pressable>
+```
+
+Use non-interactive layout children. Nested interactive controls, including buttons, links, inputs, and other Pressables, are unsupported. Pressable does not promote a child or support `asChild`.
+
+Enabled controls participate in Tab and Shift+Tab navigation and show a focus outline. Pointer clicks activate once. Enter activates on keydown; Space activates on keyup and prevents scrolling. Holding a key does not repeat activation. Blur or disabling cancels pending Space activation. Focus stays on the control unless the action intentionally moves it. This follows the [ARIA button keyboard pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).
+
+Children provide the accessible name. Set `ariaLabel` for an explicit name, including icon-only actions. `disabled` exposes `aria-disabled="true"`, sets `tabIndex={-1}`, and blocks pointer, keyboard, and programmatic click activation. The API also permits omitting `onPress`.
+
+Style interactions with `:hover`, `:active`, `:focus-visible`, and `:disabled` conditional token values. `:active` includes held keyboard activation; `:disabled` targets the ARIA disabled state and suppresses other interaction styles. Each style accepts responsive breakpoint values. The focus indicator uses `outline: auto`, letting the browser choose its appearance. Pressable does not specify an outline width, color, or offset, and does not require a host CSS variable or focus-color token.
+
+DOM events, keyboard state, focus, and styles stay in the React host. Only the zero-argument `onPress?: () => void` callback is dispatched into the sandbox. The host-provided Button and other primitives retain their existing behavior.

package/dist/index.js

@@ -1,11 +1,11 @@
 // src/components/render-slot.tsx
 import { useStore as useStore2 } from "@nanostores/react";
 import { createSlotRuntime, buildThemeCss } from "@tailorkit/client-core";
-import { useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useState as useState2 } from "react";
+import { useEffect as useEffect2, useId as useId2, useMemo as useMemo3, useState as useState3 } from "react";
 
 // src/primitives.tsx
 import { buildPrimitiveCss } from "@tailorkit/client-core";
-import { createContext, useContext, useId, useMemo } from "react";
+import { createContext, useContext, useId, useMemo, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var PrimitiveThemeContext = createContext(null);
 var usePrimitiveNodeId = () => {
@@ -50,6 +50,10 @@ var Pressable = ({
   const { ariaLabel, layout, onPress } = props;
   const display = layout === "box" || layout === "flex" || layout === "grid" ? displays[layout] : displays.inline;
   const disabled = props.disabled === true;
+  const [pressedKey, setPressedKey] = useState(null);
+  if (disabled && pressedKey !== null) {
+    setPressedKey(null);
+  }
   const css = context ? buildPrimitiveCss({
     display,
     nodeId,
@@ -61,17 +65,62 @@ var Pressable = ({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     css === "" ? null : /* @__PURE__ */ jsx("style", { "data-tailorkit-node-style": nodeId, children: css }),
     /* @__PURE__ */ jsx(
-      "button",
+      "div",
       {
+        "aria-disabled": disabled || void 0,
         "aria-label": isStringValue(ariaLabel) ? ariaLabel : void 0,
+        "data-pressed": !disabled && pressedKey !== null ? "" : void 0,
         "data-tailorkit-node": nodeId,
-        disabled,
-        onClick: () => {
-          if (!disabled && isPressCallback(onPress)) {
+        onBlur: () => {
+          setPressedKey(null);
+        },
+        onClick: (event) => {
+          if (disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          if (event.button === 0 && isPressCallback(onPress)) {
+            onPress();
+          }
+        },
+        onKeyDown: (event) => {
+          const { key } = event;
+          if (event.target !== event.currentTarget || key !== "Enter" && key !== " ") {
+            return;
+          }
+          event.preventDefault();
+          if (disabled || event.repeat || pressedKey !== null) {
+            return;
+          }
+          setPressedKey(key);
+          if (key === "Enter" && isPressCallback(onPress)) {
             onPress();
           }
         },
-        type: "button",
+        onKeyUp: (event) => {
+          const { key } = event;
+          if (event.target !== event.currentTarget || key !== "Enter" && key !== " ") {
+            return;
+          }
+          event.preventDefault();
+          const activate = !disabled && key === " " && pressedKey === " ";
+          setPressedKey(null);
+          if (activate && isPressCallback(onPress)) {
+            onPress();
+          }
+        },
+        onPointerDown: (event) => {
+          if (disabled) {
+            event.preventDefault();
+            return;
+          }
+          if (event.button === 0) {
+            event.currentTarget.focus();
+          }
+        },
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
         children
       }
     )
@@ -115,7 +164,7 @@ import {
   useContext as useContext2,
   useEffect,
   useMemo as useMemo2,
-  useState
+  useState as useState2
 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var RemoteUIContext = createContext2(null);
@@ -144,7 +193,6 @@ var RemoteRoot = ({ store }) => {
 };
 var RemoteViewHost = ({
   appUrl,
-  sourceText,
   toolBridge,
   getBackendSession,
   components: components2,
@@ -152,7 +200,7 @@ var RemoteViewHost = ({
   props
 }) => {
   const appKey = appUrl.toString();
-  const [state, setState] = useState(() => ({
+  const [state, setState] = useState2(() => ({
     appKey,
     store: createRemoteViewStore({ components: components2, props })
   }));
@@ -172,10 +220,9 @@ var RemoteViewHost = ({
       appUrl,
       createIframe,
       getBackendSession,
-      sourceText,
       toolBridge
     }),
-    [appUrl, sourceText, toolBridge, getBackendSession, createIframe, store]
+    [appUrl, toolBridge, getBackendSession, createIframe, store]
   );
   if (snapshot.status === "error" && snapshot.error) {
     return createElement("div", null, formatError(snapshot.error));
@@ -262,7 +309,7 @@ var SlotRenderer = (options) => {
     options.mode === "managed" ? "RenderSlot" : "RenderSlot.Controlled"
   );
   const reactId = useId2();
-  const [state, setState] = useState2(() => ({
+  const [state, setState] = useState3(() => ({
     runtime: createSlotRuntime(store, options),
     store
   }));
@@ -294,7 +341,6 @@ var SlotRenderer = (options) => {
       RemoteViewHost,
       {
         appUrl: snapshot.appUrl,
-        sourceText: snapshot.sourceText,
         toolBridge: snapshot.toolBridge,
         getBackendSession: snapshot.getBackendSession,
         components: client.components,
@@ -319,7 +365,7 @@ import {
   createComponentRegistry,
   createTailorKitStore
 } from "@tailorkit/client-core";
-import { createElement as createElement2, useEffect as useEffect4, useMemo as useMemo8, useState as useState3 } from "react";
+import { createElement as createElement2, useEffect as useEffect4, useMemo as useMemo8, useState as useState4 } from "react";
 
 // src/hooks/use-apps.ts
 import { createValueMemo, createAppsQuery } from "@tailorkit/client-core";
@@ -427,7 +473,7 @@ var createReactTailorKitClient = (options) => {
   const client = {
     ...clientConfig,
     Provider: function Provider({ children, apps }) {
-      const [store] = useState3(
+      const [store] = useState4(
         () => createTailorKitStore({
           apps,
           assetsBaseUrl: client.assetsBaseUrl,
@@ -440,12 +486,6 @@ var createReactTailorKitClient = (options) => {
       useEffect4(() => {
         store.setProvidedApps(apps);
       }, [store, apps]);
-      useEffect4(
-        () => () => {
-          store.previews.dispose();
-        },
-        [store]
-      );
       const context = useMemo8(() => ({ client, store }), [store]);
       return createElement2(
         TailorkitContext.Provider,

package/dist/remote-view.d.ts

@@ -3,7 +3,6 @@ import type { RemoteProps } from "@tailorkit/sandbox/protocol";
 import type { ReactNode } from "react";
 interface RemoteViewHostProps {
     appUrl: string | URL;
-    sourceText?: string;
     toolBridge?: ToolBridge;
     getBackendSession?: (options: {
         refresh: boolean;
@@ -12,7 +11,7 @@ interface RemoteViewHostProps {
     createIframe?: () => HTMLIFrameElement;
     props?: RemoteProps;
 }
-export declare const RemoteViewHost: ({ appUrl, sourceText, toolBridge, getBackendSession, components, createIframe, props, }: RemoteViewHostProps) => ReactNode;
+export declare const RemoteViewHost: ({ appUrl, toolBridge, getBackendSession, components, createIframe, props, }: RemoteViewHostProps) => ReactNode;
 interface RemoteViewProps {
     nodeId: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailorkit/react",
-  "version": "0.1.0-beta.40",
+  "version": "0.1.0-beta.42",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -47,11 +47,11 @@
     "@floating-ui/react-dom": "^2.1.9",
     "@nanostores/react": "2.0.1",
     "@standard-schema/spec": "^1.1.0",
-    "@tailorkit/app": "0.1.0-beta.40",
-    "@tailorkit/client-core": "0.1.0-beta.40",
-    "@tailorkit/client-platform": "0.1.0-beta.40",
-    "@tailorkit/core": "0.1.0-beta.40",
-    "@tailorkit/sandbox": "0.1.0-beta.40",
+    "@tailorkit/app": "0.1.0-beta.42",
+    "@tailorkit/client-core": "0.1.0-beta.42",
+    "@tailorkit/client-platform": "0.1.0-beta.42",
+    "@tailorkit/core": "0.1.0-beta.42",
+    "@tailorkit/sandbox": "0.1.0-beta.42",
     "nanostores": "1.5.5"
   },
   "devDependencies": {