@webstudio-is/sdk-components-react-radix 0.90.0 → 0.92.0

package/lib/cjs/accordion.ws.js

@@ -1,285 +0,0 @@
-"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_react_sdk = require("@webstudio-is/react-sdk");
-var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
-var tc = __toESM(require("./theme/tailwind-classes"), 1);
-var import_styles = require("./theme/styles");
-var import_accordion = require("./__generated__/accordion.props");
-const presetStyle = {
-  div: import_css_normalize.div
-};
-const accordionItemStyles = [tc.borderB()].flat();
-const createAccordionTrigger = ({
-  children
-}) => ({
-  type: "instance",
-  component: "AccordionHeader",
-  // flex
-  styles: [tc.flex()].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "AccordionTrigger",
-      // flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180
-      styles: [
-        tc.flex(),
-        tc.flex(1),
-        tc.items("center"),
-        tc.justify("between"),
-        tc.py(4),
-        tc.font("medium"),
-        tc.hover([tc.underline()].flat()),
-        tc.property("--accordion-trigger-icon-transform", "0deg"),
-        tc.state(
-          [tc.property("--accordion-trigger-icon-transform", "180deg")],
-          "[data-state=open]"
-        )
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "Text",
-          children
-        },
-        {
-          type: "instance",
-          component: "Box",
-          label: "Icon Container",
-          // h-4 w-4 shrink-0 transition-transform duration-200
-          styles: [
-            tc.property("rotate", "--accordion-trigger-icon-transform"),
-            tc.h(4),
-            tc.w(4),
-            tc.shrink(0),
-            tc.transition("all"),
-            tc.duration(200)
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Chevron Icon",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: import_svg.ChevronDownIcon
-                }
-              ],
-              children: []
-            }
-          ]
-        }
-      ]
-    }
-  ]
-});
-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",
-  order: 3,
-  type: "container",
-  icon: import_svg.AccordionIcon,
-  presetStyle,
-  description: "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
-  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: [
-            createAccordionTrigger({
-              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: [
-            createAccordionTrigger({
-              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: [
-            createAccordionTrigger({
-              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",
-  label: "Item",
-  icon: import_svg.ItemIcon,
-  requiredAncestors: ["Accordion"],
-  indexWithinAncestor: "Accordion",
-  presetStyle
-};
-const metaAccordionHeader = {
-  category: "hidden",
-  type: "container",
-  label: "Item Header",
-  icon: import_svg.HeaderIcon,
-  requiredAncestors: ["AccordionItem"],
-  detachable: false,
-  presetStyle: {
-    h3: [import_css_normalize.h3, tc.my(0)].flat()
-  }
-};
-const metaAccordionTrigger = {
-  category: "hidden",
-  type: "container",
-  label: "Item Trigger",
-  icon: import_svg.TriggerIcon,
-  requiredAncestors: ["AccordionHeader"],
-  detachable: false,
-  states: [
-    ...import_react_sdk.defaultStates,
-    {
-      category: "component-states",
-      label: "Open",
-      selector: "[data-state=open]"
-    }
-  ],
-  presetStyle: {
-    button: [import_css_normalize.button, import_styles.buttonReset].flat()
-  }
-};
-const metaAccordionContent = {
-  category: "hidden",
-  type: "container",
-  label: "Item Content",
-  icon: import_svg.ContentIcon,
-  requiredAncestors: ["AccordionItem"],
-  detachable: false,
-  presetStyle
-};
-const propsMetaAccordion = {
-  props: import_accordion.propsAccordion,
-  initialProps: ["value", "collapsible"]
-};
-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/checkbox.js

@@ -1,31 +0,0 @@
-"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 checkbox_exports = {};
-__export(checkbox_exports, {
-  Checkbox: () => Checkbox,
-  CheckboxIndicator: () => CheckboxIndicator
-});
-module.exports = __toCommonJS(checkbox_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_react_checkbox = require("@radix-ui/react-checkbox");
-const Checkbox = (0, import_react.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_checkbox.Root, { ref, ...props });
-});
-const CheckboxIndicator = import_react_checkbox.Indicator;

package/lib/cjs/checkbox.ws.js

@@ -1,174 +0,0 @@
-"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 checkbox_ws_exports = {};
-__export(checkbox_ws_exports, {
-  metaCheckbox: () => metaCheckbox,
-  metaCheckboxIndicator: () => metaCheckboxIndicator,
-  propsMetaCheckbox: () => propsMetaCheckbox,
-  propsMetaCheckboxIndicator: () => propsMetaCheckboxIndicator
-});
-module.exports = __toCommonJS(checkbox_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 tc = __toESM(require("./theme/tailwind-classes"), 1);
-var import_styles = require("./theme/styles");
-var import_checkbox = require("./__generated__/checkbox.props");
-const metaCheckbox = {
-  category: "radix",
-  order: 101,
-  type: "container",
-  icon: import_svg.CheckboxCheckedIcon,
-  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
-  states: [
-    ...import_react_sdk.defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
-  ],
-  presetStyle: {
-    button: [import_css_normalize.button, import_styles.buttonReset].flat()
-  },
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Checkbox Field",
-      styles: [tc.flex(), tc.gap(2), tc.items("center")].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "Checkbox",
-          dataSources: {
-            checkboxChecked: { type: "variable", initialValue: false }
-          },
-          props: [
-            {
-              name: "checked",
-              type: "dataSource",
-              dataSourceName: "checkboxChecked"
-            },
-            {
-              name: "onCheckedChange",
-              type: "action",
-              value: [
-                {
-                  type: "execute",
-                  args: ["checked"],
-                  code: `checkboxChecked = checked`
-                }
-              ]
-            }
-          ],
-          // peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background
-          // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-          // disabled:cursor-not-allowed disabled:opacity-50
-          // data-[state=checked]:bg-primary
-          // data-[state=checked]:text-primary-foreground",
-          styles: [
-            // We are not supporting peer like styles yet
-            tc.h(4),
-            tc.w(4),
-            tc.shrink(0),
-            tc.rounded("sm"),
-            tc.border(),
-            tc.border("primary"),
-            tc.focusVisible(
-              [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-            ),
-            tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
-            tc.state(
-              [tc.bg("primary"), tc.text("primaryForeground")].flat(),
-              "[data-state=checked]"
-            )
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "CheckboxIndicator",
-              // flex items-center justify-center text-current
-              styles: [
-                tc.flex(),
-                tc.items("center"),
-                tc.justify("center"),
-                tc.text("current")
-              ].flat(),
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Indicator Icon",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: import_svg.CheckMarkIcon
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Checkbox Label",
-          props: [{ name: "tag", type: "string", value: "span" }],
-          children: [{ type: "text", value: "Checkbox" }]
-        }
-      ]
-    }
-  ]
-};
-const metaCheckboxIndicator = {
-  category: "hidden",
-  type: "container",
-  detachable: false,
-  icon: import_svg.TriggerIcon,
-  states: import_react_sdk.defaultStates,
-  presetStyle: {
-    span: import_css_normalize.span
-  }
-};
-const propsMetaCheckbox = {
-  props: import_checkbox.propsCheckbox,
-  initialProps: ["id", "checked", "name", "required"]
-};
-const propsMetaCheckboxIndicator = {
-  props: import_checkbox.propsCheckboxIndicator
-};

package/lib/cjs/collapsible.js

@@ -1,53 +0,0 @@
-"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,
-  hooksCollapsible: () => hooksCollapsible
-});
-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 CollapsibleTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
-  const firstChild = import_react.Children.toArray(children)[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_collapsible.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button" }) });
-});
-const CollapsibleContent = import_react_collapsible.Content;
-const namespace = "@webstudio-is/sdk-components-react-radix";
-const hooksCollapsible = {
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:CollapsibleContent`) {
-        const collapsible = (0, import_react_sdk.getClosestInstance)(
-          event.instancePath,
-          instance,
-          `${namespace}:Collapsible`
-        );
-        if (collapsible) {
-          context.setPropVariable(collapsible.id, "open", true);
-        }
-      }
-    }
-  }
-};

package/lib/cjs/collapsible.ws.js

@@ -1,122 +0,0 @@
-"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_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
-var import_collapsible = require("./__generated__/collapsible.props");
-var import_styles = require("./theme/styles");
-const presetStyle = {
-  div: import_css_normalize.div
-};
-const metaCollapsible = {
-  category: "radix",
-  order: 5,
-  type: "container",
-  presetStyle,
-  icon: import_svg.CollapsibleIcon,
-  description: "An interactive component which expands and collapses some content, triggered by a button.",
-  template: [
-    {
-      type: "instance",
-      component: "Collapsible",
-      dataSources: {
-        collapsibleOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "collapsibleOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `collapsibleOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "CollapsibleTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: (0, import_styles.getButtonStyles)("outline"),
-              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",
-  icon: import_svg.TriggerIcon,
-  stylable: false,
-  detachable: false
-};
-const metaCollapsibleContent = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: import_svg.ContentIcon,
-  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
-};