@webstudio-is/sdk-components-react-radix 0.85.0 → 0.87.0

package/lib/cjs/dialog.ws.js

@@ -48,6 +48,7 @@ var import_svg = require("@webstudio-is/icons/svg");
 var import_react_sdk = require("@webstudio-is/react-sdk");
 var tc = __toESM(require("./theme/tailwind-classes"), 1);
 var import_dialog = require("./__generated__/dialog.props");
+var import_button = require("./button.ws");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
 const presetStyle = {
   div: import_css_normalize.div
@@ -63,60 +64,46 @@ const descriptionPresetStyle = {
 };
 const metaDialogTrigger = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog Trigger",
   icon: import_svg.TriggerIcon,
   stylable: false,
   detachable: false
 };
 const metaDialogContent = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog Content",
   presetStyle,
   icon: import_svg.ContentIcon,
   detachable: false
 };
 const metaDialogOverlay = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog Overlay",
   presetStyle,
   icon: import_svg.OverlayIcon,
   detachable: false
 };
 const metaDialogTitle = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle: titlePresetStyle,
-  label: "Dialog Title",
   icon: import_svg.HeadingIcon
 };
 const metaDialogDescription = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle: descriptionPresetStyle,
-  label: "Dialog Description",
   icon: import_svg.TextIcon
 };
 const metaDialogClose = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle: buttonPresetStyle,
-  label: "Dialog Close",
   icon: import_svg.ButtonElementIcon
 };
 const metaDialog = {
   category: "radix",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog",
   icon: import_svg.DialogIcon,
   order: 15,
   stylable: false,
@@ -125,14 +112,20 @@ const metaDialog = {
       type: "instance",
       component: "Dialog",
       dataSources: {
-        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
-        isOpen: { type: "variable", initialValue: "initial" }
+        dialogOpen: { type: "variable", initialValue: false }
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen"
+          name: "open",
+          dataSourceName: "dialogOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `dialogOpen = open` }
+          ]
         }
       ],
       children: [
@@ -140,13 +133,9 @@ const metaDialog = {
           type: "instance",
           component: "DialogTrigger",
           props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
+          children: (0, import_button.template)({
+            children: [{ type: "text", value: "Button" }]
+          })
         },
         {
           type: "instance",
@@ -284,7 +273,7 @@ const metaDialog = {
 };
 const propsMetaDialog = {
   props: import_dialog.propsDialog,
-  initialProps: ["isOpen", "modal"]
+  initialProps: ["open", "modal"]
 };
 const propsMetaDialogTrigger = {
   props: import_dialog.propsDialogTrigger

package/lib/cjs/hooks.js

@@ -22,4 +22,18 @@ __export(hooks_exports, {
 });
 module.exports = __toCommonJS(hooks_exports);
 var import_collapsible = require("./collapsible");
-const hooks = [import_collapsible.hooksCollapsible];
+var import_tabs = require("./tabs");
+var import_dialog = require("./dialog");
+var import_popover = require("./popover");
+var import_sheet = require("./sheet");
+var import_tooltip = require("./tooltip");
+var import_accordion = require("./accordion");
+const hooks = [
+  import_collapsible.hooksCollapsible,
+  import_tabs.hooksTabs,
+  import_dialog.hooksDialog,
+  import_popover.hooksPopover,
+  import_sheet.hooksSheet,
+  import_tooltip.hooksTooltip,
+  import_accordion.hooksAccordion
+];

package/lib/cjs/input.js

@@ -0,0 +1,28 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var input_exports = {};
+__export(input_exports, {
+  Input: () => Input
+});
+module.exports = __toCommonJS(input_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const Input = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref, ...props });
+});

package/lib/cjs/input.ws.js

@@ -0,0 +1,103 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var input_ws_exports = {};
+__export(input_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(input_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_input = require("./__generated__/input.props");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+const presetStyle = {
+  input: import_css_normalize.input
+};
+const meta = {
+  category: "radix",
+  type: "control",
+  invalidAncestors: ["Button"],
+  icon: import_svg.FormTextFieldIcon,
+  presetStyle,
+  states: [
+    ...import_react_sdk.defaultStates,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: "::file-selector-button", label: "File Selector Button" },
+    // @todo share https://github.com/webstudio-is/webstudio-builder/issues/2102
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ],
+  order: 1,
+  template: [
+    {
+      type: "instance",
+      component: "Input",
+      styles: [
+        // flex h-10 w-full rounded-md border border-input bg-background
+        // px-3 py-2 text-sm
+        // ring-offset-background
+        // file:border-0 file:bg-transparent file:text-sm file:font-medium
+        // placeholder:text-muted-foreground
+        // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+        // disabled:cursor-not-allowed disabled:opacity-50"
+        tc.flex(),
+        tc.h(10),
+        tc.w("full"),
+        tc.rounded("md"),
+        tc.border(),
+        tc.border("input"),
+        tc.bg("background"),
+        tc.px(3),
+        tc.py(2),
+        tc.text("sm"),
+        tc.state(
+          [tc.border(0), tc.bg("transparent"), tc.font("medium")].flat(),
+          "::file-selector-button"
+        ),
+        tc.state(tc.text("mutedForeground"), "::placeholder"),
+        tc.focusVisible(
+          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+        ),
+        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat())
+      ].flat(),
+      children: []
+    }
+  ]
+};
+const propsMeta = {
+  props: import_input.props,
+  initialProps: ["id", "name", "type", "placeholder", "required", "autoFocus"]
+};

package/lib/cjs/label.js

@@ -0,0 +1,37 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var label_exports = {};
+__export(label_exports, {
+  Label: () => Label
+});
+module.exports = __toCommonJS(label_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
+const Label = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LabelPrimitive.Root, { ref, ...props }));

package/lib/cjs/label.ws.js

@@ -0,0 +1,74 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var label_ws_exports = {};
+__export(label_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(label_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_label = require("./__generated__/label.props");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+const presetStyle = {
+  label: import_css_normalize.label
+};
+const meta = {
+  category: "radix",
+  type: "container",
+  icon: import_svg.LabelIcon,
+  presetStyle,
+  states: import_react_sdk.defaultStates,
+  order: 1,
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      styles: [
+        // text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
+        tc.text("sm"),
+        tc.font("medium"),
+        tc.leading("none")
+        // We are not supporting peer like styles yet
+      ].flat(),
+      children: [{ type: "text", value: "Form Label" }]
+    }
+  ]
+};
+const propsMeta = {
+  props: {
+    ...import_label.props,
+    htmlFor: {
+      ...import_label.props.htmlFor,
+      label: "For"
+    }
+  },
+  initialProps: ["id", "htmlFor"]
+};

package/lib/cjs/metas.js

@@ -18,6 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var metas_exports = {};
 __export(metas_exports, {
+  Accordion: () => import_accordion.metaAccordion,
+  AccordionContent: () => import_accordion.metaAccordionContent,
+  AccordionHeader: () => import_accordion.metaAccordionHeader,
+  AccordionItem: () => import_accordion.metaAccordionItem,
+  AccordionTrigger: () => import_accordion.metaAccordionTrigger,
+  Button: () => import_button.meta,
   Collapsible: () => import_collapsible.metaCollapsible,
   CollapsibleContent: () => import_collapsible.metaCollapsibleContent,
   CollapsibleTrigger: () => import_collapsible.metaCollapsibleTrigger,
@@ -28,6 +34,8 @@ __export(metas_exports, {
   DialogOverlay: () => import_dialog.metaDialogOverlay,
   DialogTitle: () => import_dialog.metaDialogTitle,
   DialogTrigger: () => import_dialog.metaDialogTrigger,
+  Input: () => import_input.meta,
+  Label: () => import_label.meta,
   Popover: () => import_popover.metaPopover,
   PopoverContent: () => import_popover.metaPopoverContent,
   PopoverTrigger: () => import_popover.metaPopoverTrigger,
@@ -42,6 +50,7 @@ __export(metas_exports, {
   TabsContent: () => import_tabs.metaTabsContent,
   TabsList: () => import_tabs.metaTabsList,
   TabsTrigger: () => import_tabs.metaTabsTrigger,
+  Textarea: () => import_textarea.meta,
   Tooltip: () => import_tooltip.metaTooltip,
   TooltipContent: () => import_tooltip.metaTooltipContent,
   TooltipTrigger: () => import_tooltip.metaTooltipTrigger
@@ -53,3 +62,8 @@ var import_popover = require("./popover.ws");
 var import_tooltip = require("./tooltip.ws");
 var import_sheet = require("./sheet.ws");
 var import_tabs = require("./tabs.ws");
+var import_button = require("./button.ws");
+var import_input = require("./input.ws");
+var import_textarea = require("./textarea.ws");
+var import_label = require("./label.ws");
+var import_accordion = require("./accordion.ws");

package/lib/cjs/popover.js

@@ -30,15 +30,16 @@ var popover_exports = {};
 __export(popover_exports, {
   Popover: () => Popover,
   PopoverContent: () => PopoverContent,
-  PopoverTrigger: () => PopoverTrigger
+  PopoverTrigger: () => PopoverTrigger,
+  hooksPopover: () => hooksPopover
 });
 module.exports = __toCommonJS(popover_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
 var import_react = require("react");
-const Popover = (0, import_react.forwardRef)(({ open: openProp, isOpen, ...props }, ref) => {
-  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Root, { open, ...props });
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+const Popover = (0, import_react.forwardRef)((props, _ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Root, { ...props });
 });
 const PopoverTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
   const firstChild = import_react.Children.toArray(children)[0];
@@ -56,3 +57,34 @@ const PopoverContent = (0, import_react.forwardRef)(
     }
   ) })
 );
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksPopover = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:PopoverContent`) {
+        const popover = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:Popover`
+        );
+        if (popover) {
+          context.setPropVariable(popover.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:PopoverContent`) {
+        const popover = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:Popover`
+        );
+        if (popover) {
+          context.setPropVariable(popover.id, "open", true);
+        }
+      }
+    }
+  }
+};

package/lib/cjs/popover.ws.js

@@ -41,32 +41,27 @@ var import_react_sdk = require("@webstudio-is/react-sdk");
 var tc = __toESM(require("./theme/tailwind-classes"), 1);
 var import_popover = require("./__generated__/popover.props");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_button = require("./button.ws");
 const presetStyle = {
   div: import_css_normalize.div
 };
 const metaPopoverTrigger = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Popover Trigger",
   icon: import_svg.TriggerIcon,
   stylable: false,
   detachable: false
 };
 const metaPopoverContent = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle,
-  label: "Popover Content",
   icon: import_svg.ContentIcon,
   detachable: false
 };
 const metaPopover = {
   category: "radix",
-  invalidAncestors: [],
   type: "container",
-  label: "Popover",
   icon: import_svg.PopoverIcon,
   order: 15,
   stylable: false,
@@ -75,14 +70,20 @@ const metaPopover = {
       type: "instance",
       component: "Popover",
       dataSources: {
-        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
-        isOpen: { type: "variable", initialValue: "initial" }
+        popoverOpen: { type: "variable", initialValue: false }
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen"
+          name: "open",
+          dataSourceName: "popoverOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `popoverOpen = open` }
+          ]
         }
       ],
       children: [
@@ -90,13 +91,9 @@ const metaPopover = {
           type: "instance",
           component: "PopoverTrigger",
           props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
+          children: (0, import_button.template)({
+            children: [{ type: "text", value: "Button" }]
+          })
         },
         {
           type: "instance",
@@ -130,7 +127,7 @@ const metaPopover = {
 };
 const propsMetaPopover = {
   props: import_popover.propsPopover,
-  initialProps: ["isOpen", "modal"]
+  initialProps: ["open", "modal"]
 };
 const propsMetaPopoverTrigger = {
   props: import_popover.propsPopoverTrigger

package/lib/cjs/props.js

@@ -18,6 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var props_exports = {};
 __export(props_exports, {
+  Accordion: () => import_accordion.propsMetaAccordion,
+  AccordionContent: () => import_accordion.propsMetaAccordionContent,
+  AccordionHeader: () => import_accordion.propsMetaAccordionHeader,
+  AccordionItem: () => import_accordion.propsMetaAccordionItem,
+  AccordionTrigger: () => import_accordion.propsMetaAccordionTrigger,
+  Button: () => import_button.propsMeta,
   Collapsible: () => import_collapsible.propsMetaCollapsible,
   CollapsibleContent: () => import_collapsible.propsMetaCollapsibleContent,
   CollapsibleTrigger: () => import_collapsible.propsMetaCollapsibleTrigger,
@@ -28,6 +34,8 @@ __export(props_exports, {
   DialogOverlay: () => import_dialog.propsMetaDialogOverlay,
   DialogTitle: () => import_dialog.propsMetaDialogTitle,
   DialogTrigger: () => import_dialog.propsMetaDialogTrigger,
+  Input: () => import_input.propsMeta,
+  Label: () => import_label.propsMeta,
   Popover: () => import_popover.propsMetaPopover,
   PopoverContent: () => import_popover.propsMetaPopoverContent,
   PopoverTrigger: () => import_popover.propsMetaPopoverTrigger,
@@ -42,6 +50,7 @@ __export(props_exports, {
   TabsContent: () => import_tabs.propsMetaTabsContent,
   TabsList: () => import_tabs.propsMetaTabsList,
   TabsTrigger: () => import_tabs.propsMetaTabsTrigger,
+  Textarea: () => import_textarea.propsMeta,
   Tooltip: () => import_tooltip.propsMetaTooltip,
   TooltipContent: () => import_tooltip.propsMetaTooltipContent,
   TooltipTrigger: () => import_tooltip.propsMetaTooltipTrigger
@@ -53,3 +62,8 @@ var import_popover = require("./popover.ws");
 var import_tooltip = require("./tooltip.ws");
 var import_sheet = require("./sheet.ws");
 var import_tabs = require("./tabs.ws");
+var import_button = require("./button.ws");
+var import_input = require("./input.ws");
+var import_textarea = require("./textarea.ws");
+var import_label = require("./label.ws");
+var import_accordion = require("./accordion.ws");

package/lib/cjs/sheet.js

@@ -34,11 +34,13 @@ __export(sheet_exports, {
   SheetDescription: () => SheetDescription,
   SheetOverlay: () => SheetOverlay,
   SheetTitle: () => SheetTitle,
-  SheetTrigger: () => SheetTrigger
+  SheetTrigger: () => SheetTrigger,
+  hooksSheet: () => hooksSheet
 });
 module.exports = __toCommonJS(sheet_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_react_sdk = require("@webstudio-is/react-sdk");
 var Dialog = __toESM(require("./dialog"), 1);
 const Sheet = Dialog.Dialog;
 const SheetTrigger = Dialog.DialogTrigger;
@@ -61,3 +63,34 @@ const SheetContent = (0, import_react.forwardRef)(
     );
   }
 );
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksSheet = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SheetOverlay`) {
+        const sheet = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:Sheet`
+        );
+        if (sheet) {
+          context.setPropVariable(sheet.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SheetOverlay`) {
+        const sheet = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:Sheet`
+        );
+        if (sheet) {
+          context.setPropVariable(sheet.id, "open", true);
+        }
+      }
+    }
+  }
+};