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

package/lib/cjs/accordion.ws.js

@@ -0,0 +1,261 @@
+"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 accordion_ws_exports = {};
+__export(accordion_ws_exports, {
+  metaAccordion: () => metaAccordion,
+  metaAccordionContent: () => metaAccordionContent,
+  metaAccordionHeader: () => metaAccordionHeader,
+  metaAccordionItem: () => metaAccordionItem,
+  metaAccordionTrigger: () => metaAccordionTrigger,
+  propsMetaAccordion: () => propsMetaAccordion,
+  propsMetaAccordionContent: () => propsMetaAccordionContent,
+  propsMetaAccordionHeader: () => propsMetaAccordionHeader,
+  propsMetaAccordionItem: () => propsMetaAccordionItem,
+  propsMetaAccordionTrigger: () => propsMetaAccordionTrigger
+});
+module.exports = __toCommonJS(accordion_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+var import_accordion = require("./__generated__/accordion.props");
+const presetStyle = {
+  div: import_css_normalize.div
+};
+const accordionItemStyles = [tc.borderB()].flat();
+const accordionHeaderStyles = [tc.flex()].flat();
+const accordionTriggerStyles = [
+  tc.flex(),
+  tc.flex(1),
+  tc.items("center"),
+  tc.justify("between"),
+  tc.py(4),
+  tc.font("medium"),
+  tc.transition("all"),
+  tc.hover([tc.underline()].flat())
+].flat();
+const accordionContentStyles = [
+  tc.overflow("hidden"),
+  tc.text("sm"),
+  // transition does not work with display: none
+  // tc.transition("all"),
+  tc.pb(4)
+].flat();
+const metaAccordion = {
+  category: "radix",
+  type: "container",
+  icon: import_svg.AccordionIcon,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Accordion",
+      dataSources: {
+        accordionValue: { type: "variable", initialValue: "0" }
+      },
+      props: [
+        { type: "boolean", name: "collapsible", value: true },
+        { type: "dataSource", name: "value", dataSourceName: "accordionValue" },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: `accordionValue = value`
+            }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "AccordionItem",
+          styles: accordionItemStyles,
+          children: [
+            {
+              type: "instance",
+              component: "AccordionHeader",
+              styles: accordionHeaderStyles,
+              children: [
+                {
+                  type: "instance",
+                  component: "AccordionTrigger",
+                  styles: accordionTriggerStyles,
+                  children: [{ type: "text", value: "Is it accessible?" }]
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "AccordionContent",
+              styles: accordionContentStyles,
+              children: [
+                {
+                  type: "text",
+                  value: "Yes. It adheres to the WAI-ARIA design pattern."
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "AccordionItem",
+          styles: accordionItemStyles,
+          children: [
+            {
+              type: "instance",
+              component: "AccordionHeader",
+              styles: accordionHeaderStyles,
+              children: [
+                {
+                  type: "instance",
+                  component: "AccordionTrigger",
+                  styles: accordionTriggerStyles,
+                  children: [{ type: "text", value: "Is it styled?" }]
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "AccordionContent",
+              styles: accordionContentStyles,
+              children: [
+                {
+                  type: "text",
+                  value: "Yes. It comes with default styles that matches the other components' aesthetic."
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "AccordionItem",
+          styles: accordionItemStyles,
+          children: [
+            {
+              type: "instance",
+              component: "AccordionHeader",
+              styles: accordionHeaderStyles,
+              children: [
+                {
+                  type: "instance",
+                  component: "AccordionTrigger",
+                  styles: accordionTriggerStyles,
+                  children: [{ type: "text", value: "Is it animated?" }]
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "AccordionContent",
+              styles: accordionContentStyles,
+              children: [
+                {
+                  type: "text",
+                  value: "Yes. It's animated by default, but you can disable it if you prefer."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const metaAccordionItem = {
+  category: "hidden",
+  type: "container",
+  icon: import_svg.ItemIcon,
+  requiredAncestors: ["Accordion"],
+  indexWithinAncestor: "Accordion",
+  presetStyle
+};
+const metaAccordionHeader = {
+  category: "hidden",
+  type: "container",
+  icon: import_svg.HeaderIcon,
+  requiredAncestors: ["AccordionItem"],
+  detachable: false,
+  presetStyle: {
+    h3: [import_css_normalize.h3, tc.my(0)].flat()
+  }
+};
+const metaAccordionTrigger = {
+  category: "hidden",
+  type: "container",
+  icon: import_svg.TriggerIcon,
+  requiredAncestors: ["AccordionHeader"],
+  detachable: false,
+  presetStyle: {
+    button: [
+      import_css_normalize.button,
+      {
+        property: "backgroundColor",
+        value: { type: "keyword", value: "transparent" }
+      },
+      {
+        property: "backgroundImage",
+        value: { type: "keyword", value: "none" }
+      },
+      {
+        property: "cursor",
+        value: { type: "keyword", value: "pointer" }
+      },
+      tc.px(0),
+      tc.border(0)
+    ].flat()
+  }
+};
+const metaAccordionContent = {
+  category: "hidden",
+  type: "container",
+  icon: import_svg.ContentIcon,
+  requiredAncestors: ["AccordionItem"],
+  detachable: false,
+  presetStyle
+};
+const propsMetaAccordion = {
+  props: import_accordion.propsAccordion,
+  initialProps: ["value", "collapsible", "dir", "orientation"]
+};
+const propsMetaAccordionItem = {
+  props: import_accordion.propsAccordionItem
+};
+const propsMetaAccordionHeader = {
+  props: import_accordion.propsAccordionHeader
+};
+const propsMetaAccordionTrigger = {
+  props: import_accordion.propsAccordionTrigger
+};
+const propsMetaAccordionContent = {
+  props: import_accordion.propsAccordionContent
+};

package/lib/cjs/button.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 button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const Button = (0, import_react.forwardRef)(({ variant = "default", size = "default", ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, "data-size": size, "data-variant": variant, ...props });
+});

package/lib/cjs/button.ws.js

@@ -0,0 +1,160 @@
+"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 button_ws_exports = {};
+__export(button_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta,
+  template: () => template
+});
+module.exports = __toCommonJS(button_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_button = require("./__generated__/button.props");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+const presetStyle = {
+  button: import_css_normalize.button
+};
+const template = (props2) => [
+  {
+    type: "instance",
+    component: "Button",
+    styles: [
+      // 'inline-flex items-center justify-center rounded-md text-sm font-medium
+      // ring-offset-background transition-colors
+      // focus-visible:outline-none focus-visible:ring-2
+      // focus-visible:ring-ring focus-visible:ring-offset-2
+      // disabled:pointer-events-none disabled:opacity-50'
+      tc.border(0),
+      tc.bg("transparent"),
+      tc.inlineFlex(),
+      tc.items("center"),
+      tc.justify("center"),
+      tc.rounded("md"),
+      tc.text("sm"),
+      tc.font("medium"),
+      tc.focusVisible(
+        [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+      ),
+      tc.state([tc.pointerEvents("none"), tc.opacity(50)].flat(), ":disabled"),
+      // VARIANT
+      // default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      tc.state(
+        [tc.bg("primary"), tc.text("primaryForeground")].flat(),
+        "[data-variant=default]"
+      ),
+      tc.state(
+        [[tc.bg("primary", 90)].flat()].flat(),
+        "[data-variant=default]:hover"
+      ),
+      // destructive:'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      tc.state(
+        [tc.bg("destructive"), tc.text("destructiveForeground")].flat(),
+        "[data-variant=destructive]"
+      ),
+      tc.state(
+        [[tc.bg("destructive", 90)].flat()].flat(),
+        "[data-variant=destructive]:hover"
+      ),
+      // outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      tc.state(
+        [tc.border(), tc.border("input"), tc.bg("background")].flat(),
+        "[data-variant=outline]"
+      ),
+      tc.state(
+        [[tc.bg("accent", 90), tc.text("accentForeground")].flat()].flat(),
+        "[data-variant=outline]:hover"
+      ),
+      // secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      tc.state(
+        [tc.bg("secondary"), tc.text("secondaryForeground")].flat(),
+        "[data-variant=secondary]"
+      ),
+      tc.state(
+        [[tc.bg("secondary", 80)].flat()].flat(),
+        "[data-variant=secondary]:hover"
+      ),
+      // ghost: 'hover:bg-accent hover:text-accent-foreground',
+      tc.state(
+        [[tc.bg("accent"), tc.text("accentForeground")].flat()].flat(),
+        "[data-variant=ghost]:hover"
+      ),
+      // link: 'text-primary underline-offset-4 hover:underline',
+      tc.state(
+        [tc.text("primary"), tc.underlineOffset(4)].flat(),
+        "[data-variant=link]"
+      ),
+      tc.state([[tc.underline()].flat()].flat(), "[data-variant=link]:hover"),
+      // SIZE
+      // default: 'h-10 px-4 py-2',
+      tc.state([tc.h(10), tc.px(4), tc.py(2)].flat(), "[data-size=default]"),
+      // sm: 'h-9 rounded-md px-3',
+      tc.state([tc.h(10), tc.px(3)].flat(), "[data-size=sm]"),
+      // lg: 'h-11 rounded-md px-8',
+      tc.state([tc.h(11), tc.px(8)].flat(), "[data-size=lg]"),
+      // icon: 'h-10 w-10',
+      tc.state([tc.h(10), tc.w(10)].flat(), "[data-size=icon]")
+    ].flat(),
+    children: props2?.children ?? [{ type: "text", value: "Button" }],
+    props: props2?.props
+  }
+];
+const meta = {
+  category: "radix",
+  type: "container",
+  invalidAncestors: ["Button"],
+  icon: import_svg.ButtonElementIcon,
+  presetStyle,
+  states: [
+    ...import_react_sdk.defaultStates,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: "[data-variant=default]", label: "Default" },
+    { selector: "[data-variant=default]:hover", label: "Default Hover" },
+    { selector: "[data-variant=destructive]", label: "Destructive" },
+    {
+      selector: "[data-variant=destructive]:hover",
+      label: "Destructive Hover"
+    },
+    { selector: "[data-variant=outline]", label: "Outline" },
+    { selector: "[data-variant=outline]:hover", label: "Outline Hover" },
+    { selector: "[data-variant=secondary]", label: "Secondary" },
+    { selector: "[data-variant=secondary]:hover", label: "Secondary Hover" },
+    { selector: "[data-variant=ghost]", label: "Ghost" },
+    { selector: "[data-variant=ghost]:hover", label: "Ghost Hover" },
+    { selector: "[data-variant=link]", label: "Link" },
+    { selector: "[data-variant=link]:hover", label: "Link Hover" }
+  ],
+  order: 1,
+  template: template()
+};
+const propsMeta = {
+  props: import_button.props,
+  initialProps: ["id", "type", "variant", "size", "aria-label"]
+};

package/lib/cjs/collapsible.js

@@ -36,25 +36,11 @@ const CollapsibleTrigger = (0, import_react.forwardRef)(({ children, ...props },
 const CollapsibleContent = import_react_collapsible.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 = (0, import_react_sdk.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 = (0, import_react_sdk.getClosestInstance)(
-          event.instanceSelection,
+          event.instancePath,
           instance,
           `${namespace}:Collapsible`
         );

package/lib/cjs/collapsible.ws.js

@@ -36,7 +36,6 @@ const metaCollapsible = {
   category: "radix",
   type: "container",
   presetStyle,
-  label: "Collapsible",
   icon: import_svg.CollapsibleIcon,
   template: [
     {
@@ -55,11 +54,7 @@ const metaCollapsible = {
           name: "onOpenChange",
           type: "action",
           value: [
-            {
-              type: "execute",
-              args: ["open"],
-              code: `collapsibleOpen = open`
-            }
+            { type: "execute", args: ["open"], code: `collapsibleOpen = open` }
           ]
         }
       ],
@@ -93,7 +88,6 @@ const metaCollapsible = {
 const metaCollapsibleTrigger = {
   category: "hidden",
   type: "container",
-  label: "Collapsible Trigger",
   icon: import_svg.TriggerIcon,
   stylable: false,
   detachable: false
@@ -102,7 +96,6 @@ const metaCollapsibleContent = {
   category: "hidden",
   type: "container",
   presetStyle,
-  label: "Collapsible Content",
   icon: import_svg.ContentIcon,
   detachable: false
 };

package/lib/cjs/components.js

@@ -18,6 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var components_exports = {};
 __export(components_exports, {
+  Accordion: () => import_accordion.Accordion,
+  AccordionContent: () => import_accordion.AccordionContent,
+  AccordionHeader: () => import_accordion.AccordionHeader,
+  AccordionItem: () => import_accordion.AccordionItem,
+  AccordionTrigger: () => import_accordion.AccordionTrigger,
+  Button: () => import_button.Button,
   Collapsible: () => import_collapsible.Collapsible,
   CollapsibleContent: () => import_collapsible.CollapsibleContent,
   CollapsibleTrigger: () => import_collapsible.CollapsibleTrigger,
@@ -28,6 +34,8 @@ __export(components_exports, {
   DialogOverlay: () => import_dialog.DialogOverlay,
   DialogTitle: () => import_dialog.DialogTitle,
   DialogTrigger: () => import_dialog.DialogTrigger,
+  Input: () => import_input.Input,
+  Label: () => import_label.Label,
   Popover: () => import_popover.Popover,
   PopoverContent: () => import_popover.PopoverContent,
   PopoverTrigger: () => import_popover.PopoverTrigger,
@@ -42,6 +50,7 @@ __export(components_exports, {
   TabsContent: () => import_tabs.TabsContent,
   TabsList: () => import_tabs.TabsList,
   TabsTrigger: () => import_tabs.TabsTrigger,
+  Textarea: () => import_textarea.Textarea,
   Tooltip: () => import_tooltip.Tooltip,
   TooltipContent: () => import_tooltip.TooltipContent,
   TooltipTrigger: () => import_tooltip.TooltipTrigger
@@ -53,3 +62,8 @@ var import_popover = require("./popover");
 var import_tooltip = require("./tooltip");
 var import_sheet = require("./sheet");
 var import_tabs = require("./tabs");
+var import_button = require("./button");
+var import_input = require("./input");
+var import_textarea = require("./textarea");
+var import_label = require("./label");
+var import_accordion = require("./accordion");

package/lib/cjs/dialog.js

@@ -34,19 +34,20 @@ __export(dialog_exports, {
   DialogDescription: () => DialogDescription,
   DialogOverlay: () => DialogOverlay,
   DialogTitle: () => DialogTitle,
-  DialogTrigger: () => DialogTrigger
+  DialogTrigger: () => DialogTrigger,
+  hooksDialog: () => hooksDialog
 });
 module.exports = __toCommonJS(dialog_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_react = require("react");
-const Dialog = (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)(DialogPrimitive.Root, { open, ...props });
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+const Dialog = (0, import_react.forwardRef)((props, _ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Root, { ...props });
 });
 const DialogTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
   const firstChild = import_react.Children.toArray(children)[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button or link" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { ref, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button or link" }) });
 });
 const DialogOverlay = (0, import_react.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Overlay, { ref, ...props }) });
@@ -55,3 +56,34 @@ 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 = (0, import_react_sdk.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 = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:Dialog`
+        );
+        if (dialog) {
+          context.setPropVariable(dialog.id, "open", true);
+        }
+      }
+    }
+  }
+};