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

package/lib/cjs/tooltip.js

@@ -30,15 +30,16 @@ var tooltip_exports = {};
 __export(tooltip_exports, {
   Tooltip: () => Tooltip,
   TooltipContent: () => TooltipContent,
-  TooltipTrigger: () => TooltipTrigger
+  TooltipTrigger: () => TooltipTrigger,
+  hooksTooltip: () => hooksTooltip
 });
 module.exports = __toCommonJS(tooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_react_sdk = require("@webstudio-is/react-sdk");
 var import_react = require("react");
-const Tooltip = (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)(TooltipPrimitive.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Root, { open, ...props }) });
+const Tooltip = (0, import_react.forwardRef)((props, _ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Root, { ...props }) });
 });
 const TooltipTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
   const firstChild = import_react.Children.toArray(children)[0];
@@ -53,3 +54,34 @@ const TooltipContent = (0, import_react.forwardRef)(({ sideOffset = 4, hideWhenD
     ...props
   }
 ) }));
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksTooltip = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:TooltipContent`) {
+        const tooltip = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:Tooltip`
+        );
+        if (tooltip) {
+          context.setPropVariable(tooltip.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:TooltipContent`) {
+        const tooltip = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:Tooltip`
+        );
+        if (tooltip) {
+          context.setPropVariable(tooltip.id, "open", true);
+        }
+      }
+    }
+  }
+};

package/lib/cjs/tooltip.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_tooltip = require("./__generated__/tooltip.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 metaTooltipTrigger = {
   category: "hidden",
   detachable: false,
-  invalidAncestors: [],
   type: "container",
-  label: "Tooltip Trigger",
   icon: import_svg.TriggerIcon,
   stylable: false
 };
 const metaTooltipContent = {
   category: "hidden",
   detachable: false,
-  invalidAncestors: [],
   type: "container",
   presetStyle,
-  label: "Tooltip Content",
   icon: import_svg.ContentIcon
 };
 const metaTooltip = {
   category: "radix",
-  invalidAncestors: [],
   type: "container",
-  label: "Tooltip",
   icon: import_svg.TooltipIcon,
   order: 15,
   stylable: false,
@@ -75,14 +70,20 @@ const metaTooltip = {
       type: "instance",
       component: "Tooltip",
       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" }
+        tooltipOpen: { type: "variable", initialValue: false }
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen"
+          name: "open",
+          dataSourceName: "tooltipOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `tooltipOpen = open` }
+          ]
         }
       ],
       children: [
@@ -90,13 +91,9 @@ const metaTooltip = {
           type: "instance",
           component: "TooltipTrigger",
           props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
+          children: (0, import_button.template)({
+            children: [{ type: "text", value: "Button" }]
+          })
         },
         {
           type: "instance",
@@ -131,7 +128,7 @@ const metaTooltip = {
 };
 const propsMetaTooltip = {
   props: import_tooltip.propsTooltip,
-  initialProps: ["isOpen", "delayDuration", "disableHoverableContent"]
+  initialProps: ["open", "delayDuration", "disableHoverableContent"]
 };
 const propsMetaTooltipTrigger = {
   props: import_tooltip.propsTooltipTrigger

package/lib/collapsible.js

@@ -13,25 +13,11 @@ const CollapsibleTrigger = forwardRef(({ children, ...props }, ref) => {
 const CollapsibleContent = Content;
 const namespace = "@webstudio-is/sdk-components-react-radix";
 const hooksCollapsible = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instanceSelection) {
-      if (instance.component === `${namespace}:CollapsibleContent`) {
-        const collapsible = getClosestInstance(
-          event.instanceSelection,
-          instance,
-          `${namespace}:Collapsible`
-        );
-        if (collapsible) {
-          context.setPropVariable(collapsible.id, "open", false);
-        }
-      }
-    }
-  },
   onNavigatorSelect: (context, event) => {
-    for (const instance of event.instanceSelection) {
+    for (const instance of event.instancePath) {
       if (instance.component === `${namespace}:CollapsibleContent`) {
         const collapsible = getClosestInstance(
-          event.instanceSelection,
+          event.instancePath,
           instance,
           `${namespace}:Collapsible`
         );

package/lib/collapsible.ws.js

@@ -16,7 +16,6 @@ const metaCollapsible = {
   category: "radix",
   type: "container",
   presetStyle,
-  label: "Collapsible",
   icon: CollapsibleIcon,
   template: [
     {
@@ -35,11 +34,7 @@ const metaCollapsible = {
           name: "onOpenChange",
           type: "action",
           value: [
-            {
-              type: "execute",
-              args: ["open"],
-              code: `collapsibleOpen = open`
-            }
+            { type: "execute", args: ["open"], code: `collapsibleOpen = open` }
           ]
         }
       ],
@@ -73,7 +68,6 @@ const metaCollapsible = {
 const metaCollapsibleTrigger = {
   category: "hidden",
   type: "container",
-  label: "Collapsible Trigger",
   icon: TriggerIcon,
   stylable: false,
   detachable: false
@@ -82,7 +76,6 @@ const metaCollapsibleContent = {
   category: "hidden",
   type: "container",
   presetStyle,
-  label: "Collapsible Content",
   icon: ContentIcon,
   detachable: false
 };

package/lib/components.js

@@ -24,7 +24,24 @@ import {
   SheetDescription
 } from "./sheet";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Textarea } from "./textarea";
+import { Label } from "./label";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionContent
+} from "./accordion";
 export {
+  Accordion,
+  AccordionContent,
+  AccordionHeader,
+  AccordionItem,
+  AccordionTrigger,
+  Button,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
@@ -35,6 +52,8 @@ export {
   DialogOverlay,
   DialogTitle,
   DialogTrigger,
+  Input,
+  Label,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -49,6 +68,7 @@ export {
   TabsContent,
   TabsList,
   TabsTrigger,
+  Textarea,
   Tooltip,
   TooltipContent,
   TooltipTrigger

package/lib/dialog.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import {
   forwardRef,
   Children
 } from "react";
-const Dialog = forwardRef(({ open: openProp, isOpen, ...props }, ref) => {
-  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, ...props });
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { getClosestInstance } from "@webstudio-is/react-sdk";
+const Dialog = forwardRef((props, _ref) => {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
 });
 const DialogTrigger = forwardRef(({ children, ...props }, ref) => {
   const firstChild = Children.toArray(children)[0];
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
 });
 const DialogOverlay = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { ref, ...props }) });
@@ -19,6 +19,37 @@ const DialogContent = DialogPrimitive.Content;
 const DialogClose = DialogPrimitive.Close;
 const DialogTitle = DialogPrimitive.Title;
 const DialogDescription = DialogPrimitive.Description;
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksDialog = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:DialogOverlay`) {
+        const dialog = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Dialog`
+        );
+        if (dialog) {
+          context.setPropVariable(dialog.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:DialogOverlay`) {
+        const dialog = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Dialog`
+        );
+        if (dialog) {
+          context.setPropVariable(dialog.id, "open", true);
+        }
+      }
+    }
+  }
+};
 export {
   Dialog,
   DialogClose,
@@ -26,5 +57,6 @@ export {
   DialogDescription,
   DialogOverlay,
   DialogTitle,
-  DialogTrigger
+  DialogTrigger,
+  hooksDialog
 };

package/lib/dialog.ws.js

@@ -19,6 +19,7 @@ import {
   propsDialogTitle,
   propsDialogDescription
 } from "./__generated__/dialog.props";
+import { template as buttonTemplate } from "./button.ws";
 import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
 const presetStyle = {
   div
@@ -34,60 +35,46 @@ const descriptionPresetStyle = {
 };
 const metaDialogTrigger = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog Trigger",
   icon: TriggerIcon,
   stylable: false,
   detachable: false
 };
 const metaDialogContent = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog Content",
   presetStyle,
   icon: ContentIcon,
   detachable: false
 };
 const metaDialogOverlay = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog Overlay",
   presetStyle,
   icon: OverlayIcon,
   detachable: false
 };
 const metaDialogTitle = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle: titlePresetStyle,
-  label: "Dialog Title",
   icon: HeadingIcon
 };
 const metaDialogDescription = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle: descriptionPresetStyle,
-  label: "Dialog Description",
   icon: TextIcon
 };
 const metaDialogClose = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle: buttonPresetStyle,
-  label: "Dialog Close",
   icon: ButtonElementIcon
 };
 const metaDialog = {
   category: "radix",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog",
   icon: DialogIcon,
   order: 15,
   stylable: false,
@@ -96,14 +83,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: [
@@ -111,13 +104,9 @@ const metaDialog = {
           type: "instance",
           component: "DialogTrigger",
           props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
+          children: buttonTemplate({
+            children: [{ type: "text", value: "Button" }]
+          })
         },
         {
           type: "instance",
@@ -255,7 +244,7 @@ const metaDialog = {
 };
 const propsMetaDialog = {
   props: propsDialog,
-  initialProps: ["isOpen", "modal"]
+  initialProps: ["open", "modal"]
 };
 const propsMetaDialogTrigger = {
   props: propsDialogTrigger

package/lib/hooks.js

@@ -1,5 +1,19 @@
 import { hooksCollapsible } from "./collapsible";
-const hooks = [hooksCollapsible];
+import { hooksTabs } from "./tabs";
+import { hooksDialog } from "./dialog";
+import { hooksPopover } from "./popover";
+import { hooksSheet } from "./sheet";
+import { hooksTooltip } from "./tooltip";
+import { hooksAccordion } from "./accordion";
+const hooks = [
+  hooksCollapsible,
+  hooksTabs,
+  hooksDialog,
+  hooksPopover,
+  hooksSheet,
+  hooksTooltip,
+  hooksAccordion
+];
 export {
   hooks
 };

package/lib/input.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Input = forwardRef(({ children: _children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("input", { ref, ...props });
+});
+export {
+  Input
+};

package/lib/input.ws.js

@@ -0,0 +1,75 @@
+import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { input } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/input.props";
+import * as tc from "./theme/tailwind-classes";
+const presetStyle = {
+  input
+};
+const meta = {
+  category: "radix",
+  type: "control",
+  invalidAncestors: ["Button"],
+  icon: FormTextFieldIcon,
+  presetStyle,
+  states: [
+    ...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,
+  initialProps: ["id", "name", "type", "placeholder", "required", "autoFocus"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/label.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+const Label = forwardRef((props, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, ...props }));
+export {
+  Label
+};

package/lib/label.ws.js

@@ -0,0 +1,46 @@
+import { LabelIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { label } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/label.props";
+import * as tc from "./theme/tailwind-classes";
+const presetStyle = {
+  label
+};
+const meta = {
+  category: "radix",
+  type: "container",
+  icon: LabelIcon,
+  presetStyle,
+  states: 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: {
+    ...props,
+    htmlFor: {
+      ...props.htmlFor,
+      label: "For"
+    }
+  },
+  initialProps: ["id", "htmlFor"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/metas.js

@@ -37,7 +37,24 @@ import {
   metaTabsTrigger,
   metaTabsContent
 } from "./tabs.ws";
+import { meta } from "./button.ws";
+import { meta as meta2 } from "./input.ws";
+import { meta as meta3 } from "./textarea.ws";
+import { meta as meta4 } from "./label.ws";
+import {
+  metaAccordion,
+  metaAccordionItem,
+  metaAccordionHeader,
+  metaAccordionTrigger,
+  metaAccordionContent
+} from "./accordion.ws";
 export {
+  metaAccordion as Accordion,
+  metaAccordionContent as AccordionContent,
+  metaAccordionHeader as AccordionHeader,
+  metaAccordionItem as AccordionItem,
+  metaAccordionTrigger as AccordionTrigger,
+  meta as Button,
   metaCollapsible as Collapsible,
   metaCollapsibleContent as CollapsibleContent,
   metaCollapsibleTrigger as CollapsibleTrigger,
@@ -48,6 +65,8 @@ export {
   metaDialogOverlay as DialogOverlay,
   metaDialogTitle as DialogTitle,
   metaDialogTrigger as DialogTrigger,
+  meta2 as Input,
+  meta4 as Label,
   metaPopover as Popover,
   metaPopoverContent as PopoverContent,
   metaPopoverTrigger as PopoverTrigger,
@@ -62,6 +81,7 @@ export {
   metaTabsContent as TabsContent,
   metaTabsList as TabsList,
   metaTabsTrigger as TabsTrigger,
+  meta3 as Textarea,
   metaTooltip as Tooltip,
   metaTooltipContent as TooltipContent,
   metaTooltipTrigger as TooltipTrigger