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

package/lib/cjs/popover.ws.js

@@ -1,142 +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 popover_ws_exports = {};
-__export(popover_ws_exports, {
-  metaPopover: () => metaPopover,
-  metaPopoverContent: () => metaPopoverContent,
-  metaPopoverTrigger: () => metaPopoverTrigger,
-  propsMetaPopover: () => propsMetaPopover,
-  propsMetaPopoverContent: () => propsMetaPopoverContent,
-  propsMetaPopoverTrigger: () => propsMetaPopoverTrigger
-});
-module.exports = __toCommonJS(popover_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_popover = require("./__generated__/popover.props");
-const presetStyle = {
-  div: import_css_normalize.div
-};
-const metaPopoverTrigger = {
-  category: "hidden",
-  type: "container",
-  icon: import_svg.TriggerIcon,
-  stylable: false,
-  detachable: false
-};
-const metaPopoverContent = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: import_svg.ContentIcon,
-  detachable: false
-};
-const metaPopover = {
-  category: "radix",
-  order: 6,
-  type: "container",
-  icon: import_svg.PopoverIcon,
-  stylable: false,
-  description: "Displays rich content in a portal, triggered by a button.",
-  template: [
-    {
-      type: "instance",
-      component: "Popover",
-      dataSources: {
-        popoverOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "popoverOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `popoverOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "PopoverTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: (0, import_styles.getButtonStyles)("outline"),
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "PopoverContent",
-          /**
-           *  z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
-           **/
-          styles: [
-            tc.z(50),
-            tc.w(72),
-            tc.rounded("md"),
-            tc.border(),
-            tc.bg("popover"),
-            tc.p(4),
-            tc.text("popoverForeground"),
-            tc.shadow("md"),
-            tc.outline("none")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "Text",
-              children: [{ type: "text", value: "The text you can edit" }]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-const propsMetaPopover = {
-  props: import_popover.propsPopover,
-  initialProps: ["open"]
-};
-const propsMetaPopoverTrigger = {
-  props: import_popover.propsPopoverTrigger
-};
-const propsMetaPopoverContent = {
-  props: import_popover.propsPopoverContent,
-  initialProps: ["side", "sideOffset", "align", "alignOffset"]
-};

package/lib/cjs/props-descriptions.js

@@ -1,56 +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 props_descriptions_exports = {};
-__export(props_descriptions_exports, {
-  propsDescriptions: () => propsDescriptions
-});
-module.exports = __toCommonJS(props_descriptions_exports);
-const open = "Show or hide the content of this component on the canvas. This will not affect the initial state of the component.";
-const alignOffset = "The offset in pixels from the \u201Cstart\u201C or \u201Cend\u201C alignment options.";
-const sideOffset = "The distance in pixels between the Content and the Trigger.";
-const side = "The preferred alignment against the Trigger. May change when collisions occur.";
-const propsDescriptions = {
-  Dialog: {
-    open
-  },
-  Sheet: {
-    open
-  },
-  Collapsible: {
-    open
-  },
-  Popover: {
-    open
-  },
-  PopoverContent: {
-    alignOffset,
-    sideOffset,
-    side
-  },
-  Tooltip: {
-    open,
-    delayDuration: "The delay before the Tooltip shows after the Trigger is hovered, in milliseconds. If no value is specified, the default is 700ms",
-    disableHoverableContent: "When toggled, prevents the Tooltip content from showing when the Trigger is hovered."
-  },
-  TooltipContent: {
-    alignOffset,
-    sideOffset,
-    side
-  }
-};

package/lib/cjs/props.js

@@ -1,82 +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 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,
-  Checkbox: () => import_checkbox.propsMetaCheckbox,
-  CheckboxIndicator: () => import_checkbox.propsMetaCheckboxIndicator,
-  Collapsible: () => import_collapsible.propsMetaCollapsible,
-  CollapsibleContent: () => import_collapsible.propsMetaCollapsibleContent,
-  CollapsibleTrigger: () => import_collapsible.propsMetaCollapsibleTrigger,
-  Dialog: () => import_dialog.propsMetaDialog,
-  DialogClose: () => import_dialog.propsMetaDialogClose,
-  DialogContent: () => import_dialog.propsMetaDialogContent,
-  DialogDescription: () => import_dialog.propsMetaDialogDescription,
-  DialogOverlay: () => import_dialog.propsMetaDialogOverlay,
-  DialogTitle: () => import_dialog.propsMetaDialogTitle,
-  DialogTrigger: () => import_dialog.propsMetaDialogTrigger,
-  Label: () => import_label.propsMeta,
-  NavigationMenu: () => import_navigation_menu.propsMetaNavigationMenu,
-  NavigationMenuContent: () => import_navigation_menu.propsMetaNavigationMenuContent,
-  NavigationMenuItem: () => import_navigation_menu.propsMetaNavigationMenuItem,
-  NavigationMenuLink: () => import_navigation_menu.propsMetaNavigationMenuLink,
-  NavigationMenuList: () => import_navigation_menu.propsMetaNavigationMenuList,
-  NavigationMenuTrigger: () => import_navigation_menu.propsMetaNavigationMenuTrigger,
-  NavigationMenuViewport: () => import_navigation_menu.propsMetaNavigationMenuViewport,
-  Popover: () => import_popover.propsMetaPopover,
-  PopoverContent: () => import_popover.propsMetaPopoverContent,
-  PopoverTrigger: () => import_popover.propsMetaPopoverTrigger,
-  RadioGroup: () => import_radio_group.propsMetaRadioGroup,
-  RadioGroupIndicator: () => import_radio_group.propsMetaRadioGroupIndicator,
-  RadioGroupItem: () => import_radio_group.propsMetaRadioGroupItem,
-  Select: () => import_select.propsMetaSelect,
-  SelectContent: () => import_select.propsMetaSelectContent,
-  SelectItem: () => import_select.propsMetaSelectItem,
-  SelectItemIndicator: () => import_select.propsMetaSelectItemIndicator,
-  SelectItemText: () => import_select.propsMetaSelectItemText,
-  SelectTrigger: () => import_select.propsMetaSelectTrigger,
-  SelectValue: () => import_select.propsMetaSelectValue,
-  SelectViewport: () => import_select.propsMetaSelectViewport,
-  Switch: () => import_switch.propsMetaSwitch,
-  SwitchThumb: () => import_switch.propsMetaSwitchThumb,
-  Tabs: () => import_tabs.propsMetaTabs,
-  TabsContent: () => import_tabs.propsMetaTabsContent,
-  TabsList: () => import_tabs.propsMetaTabsList,
-  TabsTrigger: () => import_tabs.propsMetaTabsTrigger,
-  Tooltip: () => import_tooltip.propsMetaTooltip,
-  TooltipContent: () => import_tooltip.propsMetaTooltipContent,
-  TooltipTrigger: () => import_tooltip.propsMetaTooltipTrigger
-});
-module.exports = __toCommonJS(props_exports);
-var import_collapsible = require("./collapsible.ws");
-var import_dialog = require("./dialog.ws");
-var import_popover = require("./popover.ws");
-var import_tooltip = require("./tooltip.ws");
-var import_tabs = require("./tabs.ws");
-var import_label = require("./label.ws");
-var import_accordion = require("./accordion.ws");
-var import_navigation_menu = require("./navigation-menu.ws");
-var import_select = require("./select.ws");
-var import_switch = require("./switch.ws");
-var import_checkbox = require("./checkbox.ws");
-var import_radio_group = require("./radio-group.ws");

package/lib/cjs/radio-group.js

@@ -1,30 +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 radio_group_exports = {};
-__export(radio_group_exports, {
-  RadioGroup: () => RadioGroup,
-  RadioGroupIndicator: () => RadioGroupIndicator,
-  RadioGroupItem: () => RadioGroupItem
-});
-module.exports = __toCommonJS(radio_group_exports);
-var import_react = require("react");
-var import_react_radio_group = require("@radix-ui/react-radio-group");
-const RadioGroup = import_react_radio_group.Root;
-const RadioGroupItem = import_react_radio_group.Item;
-const RadioGroupIndicator = import_react_radio_group.Indicator;

package/lib/cjs/radio-group.ws.js

@@ -1,191 +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 radio_group_ws_exports = {};
-__export(radio_group_ws_exports, {
-  metaRadioGroup: () => metaRadioGroup,
-  metaRadioGroupIndicator: () => metaRadioGroupIndicator,
-  metaRadioGroupItem: () => metaRadioGroupItem,
-  propsMetaRadioGroup: () => propsMetaRadioGroup,
-  propsMetaRadioGroupIndicator: () => propsMetaRadioGroupIndicator,
-  propsMetaRadioGroupItem: () => propsMetaRadioGroupItem
-});
-module.exports = __toCommonJS(radio_group_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_radio_group = require("./__generated__/radio-group.props");
-const createRadioGroupItem = ({
-  value,
-  label
-}) => ({
-  type: "instance",
-  component: "Label",
-  // flex items-center space-x-2
-  styles: [tc.flex(), tc.items("center"), tc.gap(2)].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "RadioGroupItem",
-      props: [{ name: "value", type: "string", value }],
-      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
-      // focus:outline-none
-      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-      // disabled:cursor-not-allowed disabled:opacity-50
-      styles: [
-        tc.aspect("square"),
-        tc.h(4),
-        tc.w(4),
-        tc.rounded("full"),
-        tc.border(),
-        tc.border("primary"),
-        tc.text("primary"),
-        tc.focusVisible(
-          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-        ),
-        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat())
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "RadioGroupIndicator",
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Indicator Icon",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: import_svg.RadioDotIcon
-                }
-              ],
-              children: []
-            }
-          ]
-        }
-      ]
-    },
-    {
-      type: "instance",
-      component: "Text",
-      children: [{ type: "text", value: label }]
-    }
-  ]
-});
-const metaRadioGroup = {
-  category: "radix",
-  order: 100,
-  type: "container",
-  description: "A set of checkable buttons\u2014known as radio buttons\u2014where no more than one of the buttons can be checked at a time.",
-  icon: import_svg.RadioCheckedIcon,
-  states: [
-    ...import_react_sdk.defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
-  ],
-  presetStyle: {
-    div: import_css_normalize.div
-  },
-  template: [
-    {
-      type: "instance",
-      component: "RadioGroup",
-      dataSources: {
-        radioGroupValue: { type: "variable", initialValue: "" }
-      },
-      // grid gap-2
-      styles: [tc.flex(), tc.flex("col"), tc.gap(2)].flat(),
-      props: [
-        {
-          type: "dataSource",
-          name: "value",
-          dataSourceName: "radioGroupValue"
-        },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: `radioGroupValue = value`
-            }
-          ]
-        }
-      ],
-      children: [
-        createRadioGroupItem({ value: "default", label: "Default" }),
-        createRadioGroupItem({ value: "comfortable", label: "Comfortable" }),
-        createRadioGroupItem({ value: "compact", label: "Compact" })
-      ]
-    }
-  ]
-};
-const metaRadioGroupItem = {
-  category: "hidden",
-  type: "container",
-  requiredAncestors: ["RadioGroup"],
-  icon: import_svg.ItemIcon,
-  states: import_react_sdk.defaultStates,
-  presetStyle: {
-    button: [import_css_normalize.button, import_styles.buttonReset].flat()
-  }
-};
-const metaRadioGroupIndicator = {
-  category: "hidden",
-  type: "container",
-  detachable: false,
-  icon: import_svg.TriggerIcon,
-  states: import_react_sdk.defaultStates,
-  presetStyle: {
-    span: import_css_normalize.span
-  }
-};
-const propsMetaRadioGroup = {
-  props: import_radio_group.propsRadioGroup,
-  initialProps: ["id", "value", "name", "required"]
-};
-const propsMetaRadioGroupItem = {
-  props: import_radio_group.propsRadioGroupItem,
-  initialProps: ["value"]
-};
-const propsMetaRadioGroupIndicator = {
-  props: import_radio_group.propsRadioGroupIndicator
-};

package/lib/cjs/select.js

@@ -1,83 +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 select_exports = {};
-__export(select_exports, {
-  Select: () => Select,
-  SelectContent: () => SelectContent,
-  SelectItem: () => SelectItem,
-  SelectItemIndicator: () => SelectItemIndicator,
-  SelectItemText: () => SelectItemText,
-  SelectTrigger: () => SelectTrigger,
-  SelectValue: () => SelectValue,
-  SelectViewport: () => SelectViewport,
-  hooksSelect: () => hooksSelect
-});
-module.exports = __toCommonJS(select_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_react_select = require("@radix-ui/react-select");
-var import_react_sdk = require("@webstudio-is/react-sdk");
-const Select = (0, import_react.forwardRef)(({ value, ...props }, _ref) => {
-  if (value === "") {
-    value = void 0;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Root, { value, ...props });
-});
-const SelectTrigger = import_react_select.Trigger;
-const SelectValue = (0, import_react.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Value, { ref, ...props });
-});
-const SelectContent = (0, import_react.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Content, { ref, ...props, position: "popper" }) });
-});
-const SelectViewport = import_react_select.Viewport;
-const SelectItem = import_react_select.Item;
-const SelectItemIndicator = import_react_select.ItemIndicator;
-const SelectItemText = import_react_select.ItemText;
-const namespace = "@webstudio-is/sdk-components-react-radix";
-const hooksSelect = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SelectContent`) {
-        const select = (0, import_react_sdk.getClosestInstance)(
-          event.instancePath,
-          instance,
-          `${namespace}:Select`
-        );
-        if (select) {
-          context.setPropVariable(select.id, "open", false);
-        }
-      }
-    }
-  },
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SelectContent`) {
-        const select = (0, import_react_sdk.getClosestInstance)(
-          event.instancePath,
-          instance,
-          `${namespace}:Select`
-        );
-        if (select) {
-          context.setPropVariable(select.id, "open", true);
-        }
-      }
-    }
-  }
-};