@webstudio-is/sdk-components-react-radix 0.82.0

package/lib/cjs/collapsible.js

@@ -0,0 +1,37 @@
+"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 collapsible_exports = {};
+__export(collapsible_exports, {
+  Collapsible: () => Collapsible,
+  CollapsibleContent: () => CollapsibleContent,
+  CollapsibleTrigger: () => CollapsibleTrigger
+});
+module.exports = __toCommonJS(collapsible_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_collapsible = require("@radix-ui/react-collapsible");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+const Collapsible = import_react_collapsible.Root;
+const displayContentsStyle = { display: "contents" };
+const CollapsibleTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
+  const firstChild = import_react.Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] = (0, import_react_sdk.splitPropsWithWebstudioAttributes)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: displayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_collapsible.Trigger, { asChild: true, ...restProps, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button" }) }) });
+});
+const CollapsibleContent = import_react_collapsible.Content;

package/lib/cjs/collapsible.ws.js

@@ -0,0 +1,120 @@
+"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 collapsible_ws_exports = {};
+__export(collapsible_ws_exports, {
+  metaCollapsible: () => metaCollapsible,
+  metaCollapsibleContent: () => metaCollapsibleContent,
+  metaCollapsibleTrigger: () => metaCollapsibleTrigger,
+  propsMetaCollapsible: () => propsMetaCollapsible,
+  propsMetaCollapsibleContent: () => propsMetaCollapsibleContent,
+  propsMetaCollapsibleTrigger: () => propsMetaCollapsibleTrigger
+});
+module.exports = __toCommonJS(collapsible_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_collapsible = require("./__generated__/collapsible.props");
+const metaCollapsible = {
+  category: "radix",
+  type: "container",
+  label: "Collapsible",
+  icon: import_svg.RadioUncheckedIcon,
+  template: [
+    {
+      type: "instance",
+      component: "Collapsible",
+      props: [
+        {
+          name: "open",
+          type: "boolean",
+          value: false,
+          dataSourceRef: {
+            type: "variable",
+            name: "collapsibleOpen"
+          }
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["open"],
+              code: `collapsibleOpen = open`
+            }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "CollapsibleTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Click to toggle content" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "CollapsibleContent",
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "Collapsible Content" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const metaCollapsibleTrigger = {
+  category: "hidden",
+  type: "container",
+  label: "Collapsible Trigger",
+  icon: import_svg.RadioCheckedIcon,
+  stylable: false,
+  detachable: false
+};
+const metaCollapsibleContent = {
+  category: "hidden",
+  type: "container",
+  label: "Collapsible Content",
+  icon: import_svg.RadioCheckedIcon,
+  detachable: false
+};
+const propsMetaCollapsible = {
+  props: {
+    ...import_collapsible.propsCollapsible,
+    onOpenChange: {
+      type: "action",
+      control: "action",
+      required: false
+    }
+  },
+  initialProps: ["open", "onOpenChange"]
+};
+const propsMetaCollapsibleTrigger = {
+  props: import_collapsible.propsCollapsibleTrigger
+};
+const propsMetaCollapsibleContent = {
+  props: import_collapsible.propsCollapsibleContent
+};

package/lib/cjs/components.js

@@ -0,0 +1,26 @@
+"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 components_exports = {};
+__export(components_exports, {
+  Collapsible: () => import_collapsible.Collapsible,
+  CollapsibleContent: () => import_collapsible.CollapsibleContent,
+  CollapsibleTrigger: () => import_collapsible.CollapsibleTrigger
+});
+module.exports = __toCommonJS(components_exports);
+var import_collapsible = require("./collapsible");

package/lib/cjs/metas.js

@@ -0,0 +1,26 @@
+"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 metas_exports = {};
+__export(metas_exports, {
+  Collapsible: () => import_collapsible.metaCollapsible,
+  CollapsibleContent: () => import_collapsible.metaCollapsibleContent,
+  CollapsibleTrigger: () => import_collapsible.metaCollapsibleTrigger
+});
+module.exports = __toCommonJS(metas_exports);
+var import_collapsible = require("./collapsible.ws");

package/lib/cjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/cjs/props.js

@@ -0,0 +1,26 @@
+"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 props_exports = {};
+__export(props_exports, {
+  Collapsible: () => import_collapsible.propsMetaCollapsible,
+  CollapsibleContent: () => import_collapsible.propsMetaCollapsibleContent,
+  CollapsibleTrigger: () => import_collapsible.propsMetaCollapsibleTrigger
+});
+module.exports = __toCommonJS(props_exports);
+var import_collapsible = require("./collapsible.ws");

package/lib/collapsible.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef,
+  Children
+} from "react";
+import { Root, Trigger, Content } from "@radix-ui/react-collapsible";
+import {
+  splitPropsWithWebstudioAttributes
+} from "@webstudio-is/react-sdk";
+const Collapsible = Root;
+const displayContentsStyle = { display: "contents" };
+const CollapsibleTrigger = forwardRef(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] = splitPropsWithWebstudioAttributes(props);
+  return /* @__PURE__ */ jsx("div", { ref, style: displayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ jsx(Trigger, { asChild: true, ...restProps, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button" }) }) });
+});
+const CollapsibleContent = Content;
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+};

package/lib/collapsible.ws.js

@@ -0,0 +1,104 @@
+import { RadioUncheckedIcon, RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+  propsCollapsible,
+  propsCollapsibleContent,
+  propsCollapsibleTrigger
+} from "./__generated__/collapsible.props";
+const metaCollapsible = {
+  category: "radix",
+  type: "container",
+  label: "Collapsible",
+  icon: RadioUncheckedIcon,
+  template: [
+    {
+      type: "instance",
+      component: "Collapsible",
+      props: [
+        {
+          name: "open",
+          type: "boolean",
+          value: false,
+          dataSourceRef: {
+            type: "variable",
+            name: "collapsibleOpen"
+          }
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["open"],
+              code: `collapsibleOpen = open`
+            }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "CollapsibleTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Click to toggle content" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "CollapsibleContent",
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "Collapsible Content" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const metaCollapsibleTrigger = {
+  category: "hidden",
+  type: "container",
+  label: "Collapsible Trigger",
+  icon: RadioCheckedIcon,
+  stylable: false,
+  detachable: false
+};
+const metaCollapsibleContent = {
+  category: "hidden",
+  type: "container",
+  label: "Collapsible Content",
+  icon: RadioCheckedIcon,
+  detachable: false
+};
+const propsMetaCollapsible = {
+  props: {
+    ...propsCollapsible,
+    onOpenChange: {
+      type: "action",
+      control: "action",
+      required: false
+    }
+  },
+  initialProps: ["open", "onOpenChange"]
+};
+const propsMetaCollapsibleTrigger = {
+  props: propsCollapsibleTrigger
+};
+const propsMetaCollapsibleContent = {
+  props: propsCollapsibleContent
+};
+export {
+  metaCollapsible,
+  metaCollapsibleContent,
+  metaCollapsibleTrigger,
+  propsMetaCollapsible,
+  propsMetaCollapsibleContent,
+  propsMetaCollapsibleTrigger
+};

package/lib/components.js

@@ -0,0 +1,10 @@
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent
+} from "./collapsible";
+export {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+};

package/lib/metas.js

@@ -0,0 +1,10 @@
+import {
+  metaCollapsible,
+  metaCollapsibleTrigger,
+  metaCollapsibleContent
+} from "./collapsible.ws";
+export {
+  metaCollapsible as Collapsible,
+  metaCollapsibleContent as CollapsibleContent,
+  metaCollapsibleTrigger as CollapsibleTrigger
+};

package/lib/props.js

@@ -0,0 +1,10 @@
+import {
+  propsMetaCollapsible,
+  propsMetaCollapsibleTrigger,
+  propsMetaCollapsibleContent
+} from "./collapsible.ws";
+export {
+  propsMetaCollapsible as Collapsible,
+  propsMetaCollapsibleContent as CollapsibleContent,
+  propsMetaCollapsibleTrigger as CollapsibleTrigger
+};

package/lib/types/__generated__/collapsible.props.d.ts

@@ -0,0 +1,4 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const propsCollapsible: Record<string, PropMeta>;
+export declare const propsCollapsibleTrigger: Record<string, PropMeta>;
+export declare const propsCollapsibleContent: Record<string, PropMeta>;

package/lib/types/collapsible.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode, type ForwardRefExoticComponent, type ComponentPropsWithRef } from "react";
+import { Root, Content } from "@radix-ui/react-collapsible";
+import { type WebstudioAttributes } from "@webstudio-is/react-sdk";
+export declare const Collapsible: ForwardRefExoticComponent<Omit<ComponentPropsWithRef<typeof Root>, "defaultOpen" | "asChild">>;
+/**
+ * We're not exposing the 'asChild' property for the Trigger.
+ * Instead, we're enforcing 'asChild=true' for the Trigger and making it style-less.
+ * This avoids situations where the Trigger inadvertently passes all styles to its child,
+ * which would prevent us from displaying styles properly in the builder.
+ */
+export declare const CollapsibleTrigger: ForwardRefExoticComponent<WebstudioAttributes & {
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CollapsibleContent: ForwardRefExoticComponent<Omit<ComponentPropsWithRef<typeof Content>, "asChild">>;

package/lib/types/collapsible.ws.d.ts

@@ -0,0 +1,7 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const metaCollapsible: WsComponentMeta;
+export declare const metaCollapsibleTrigger: WsComponentMeta;
+export declare const metaCollapsibleContent: WsComponentMeta;
+export declare const propsMetaCollapsible: WsComponentPropsMeta;
+export declare const propsMetaCollapsibleTrigger: WsComponentPropsMeta;
+export declare const propsMetaCollapsibleContent: WsComponentPropsMeta;

package/lib/types/components.d.ts

@@ -0,0 +1 @@
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "./collapsible";

package/lib/types/metas.d.ts

@@ -0,0 +1 @@
+export { metaCollapsible as Collapsible, metaCollapsibleTrigger as CollapsibleTrigger, metaCollapsibleContent as CollapsibleContent, } from "./collapsible.ws";

package/lib/types/props.d.ts

@@ -0,0 +1 @@
+export { propsMetaCollapsible as Collapsible, propsMetaCollapsibleTrigger as CollapsibleTrigger, propsMetaCollapsibleContent as CollapsibleContent, } from "./collapsible.ws";

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@webstudio-is/sdk-components-react-radix",
+  "version": "0.82.0",
+  "description": "Webstudio wrapper for radix library",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "license": "AGPL-3.0-or-later",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "lib/*",
+    "src/*"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/components.ts",
+      "types": "./lib/types/components.d.ts",
+      "import": "./lib/components.js",
+      "require": "./lib/cjs/components.js"
+    },
+    "./metas": {
+      "source": "./src/metas.ts",
+      "types": "./lib/types/metas.d.ts",
+      "import": "./lib/metas.js",
+      "require": "./lib/cjs/metas.js"
+    },
+    "./props": {
+      "source": "./src/props.ts",
+      "types": "./lib/types/props.d.ts",
+      "import": "./lib/props.js",
+      "require": "./lib/cjs/props.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-collapsible": "^1.0.3",
+    "@webstudio-is/generate-arg-types": "^0.82.0",
+    "@webstudio-is/icons": "^0.82.0",
+    "@webstudio-is/react-sdk": "^0.82.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.16",
+    "@types/react-dom": "^18.2.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.1.6",
+    "@webstudio-is/scripts": "^0.0.0",
+    "@webstudio-is/tsconfig": "^1.0.6"
+  },
+  "scripts": {
+    "dev": "build-package --watch",
+    "build": "build-package",
+    "build:args": "generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
+    "dts": "tsc --project tsconfig.dts.json",
+    "typecheck": "tsc",
+    "checks": "pnpm typecheck"
+  }
+}