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

package/lib/cjs/switch.js

@@ -1,27 +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 switch_exports = {};
-__export(switch_exports, {
-  Switch: () => Switch,
-  SwitchThumb: () => SwitchThumb
-});
-module.exports = __toCommonJS(switch_exports);
-var import_react_switch = require("@radix-ui/react-switch");
-const Switch = import_react_switch.Root;
-const SwitchThumb = import_react_switch.Thumb;

package/lib/cjs/switch.ws.js

@@ -1,173 +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 switch_ws_exports = {};
-__export(switch_ws_exports, {
-  metaSwitch: () => metaSwitch,
-  metaSwitchThumb: () => metaSwitchThumb,
-  propsMetaSwitch: () => propsMetaSwitch,
-  propsMetaSwitchThumb: () => propsMetaSwitchThumb
-});
-module.exports = __toCommonJS(switch_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_switch = require("./__generated__/switch.props");
-const metaSwitch = {
-  category: "radix",
-  order: 11,
-  type: "container",
-  description: "A control that allows the user to toggle between checked and not checked.",
-  icon: import_svg.SwitchIcon,
-  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: "Switch",
-      dataSources: {
-        switchChecked: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          name: "checked",
-          type: "dataSource",
-          dataSourceName: "switchChecked"
-        },
-        {
-          name: "onCheckedChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["checked"],
-              code: `switchChecked = checked`
-            }
-          ]
-        }
-      ],
-      // peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors
-      // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
-      // disabled:cursor-not-allowed disabled:opacity-50
-      // data-[state=checked]:bg-primary
-      // data-[state=unchecked]:bg-input
-      styles: [
-        // We are not supporting peer like styles yet
-        tc.inlineFlex(),
-        tc.property("height", "24px"),
-        tc.property("width", "44px"),
-        tc.shrink(0),
-        tc.cursor("pointer"),
-        tc.items("center"),
-        tc.rounded("full"),
-        tc.border(2),
-        tc.border("transparent"),
-        tc.transition("all"),
-        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")].flat(), "[data-state=checked]"),
-        tc.state([tc.bg("input")].flat(), "[data-state=unchecked]")
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "SwitchThumb",
-          // pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
-          // data-[state=checked]:translate-x-5
-          // data-[state=unchecked]:translate-x-0
-          styles: [
-            tc.pointerEvents("none"),
-            tc.block(),
-            tc.h(5),
-            tc.w(5),
-            tc.rounded("full"),
-            tc.bg("background"),
-            tc.shadow("lg"),
-            tc.transition("transform"),
-            tc.state(
-              [tc.property("transform", "translateX(20px)")].flat(),
-              "[data-state=checked]"
-            ),
-            tc.state(
-              [tc.property("transform", "translateX(0px)")].flat(),
-              "[data-state=unchecked]"
-            )
-          ].flat(),
-          children: []
-        }
-      ]
-    }
-  ]
-};
-const metaSwitchThumb = {
-  category: "hidden",
-  type: "container",
-  detachable: false,
-  icon: import_svg.TriggerIcon,
-  states: [
-    ...import_react_sdk.defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
-  ],
-  presetStyle: {
-    span: import_css_normalize.span
-  }
-};
-const propsMetaSwitch = {
-  props: import_switch.propsSwitch,
-  initialProps: ["id", "checked", "name", "required"]
-};
-const propsMetaSwitchThumb = {
-  props: import_switch.propsSwitchThumb
-};

package/lib/cjs/tabs.js

@@ -1,59 +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 tabs_exports = {};
-__export(tabs_exports, {
-  Tabs: () => Tabs,
-  TabsContent: () => TabsContent,
-  TabsList: () => TabsList,
-  TabsTrigger: () => TabsTrigger,
-  hooksTabs: () => hooksTabs
-});
-module.exports = __toCommonJS(tabs_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_react_tabs = require("@radix-ui/react-tabs");
-var import_react_sdk = require("@webstudio-is/react-sdk");
-const Tabs = import_react_tabs.Root;
-const TabsList = import_react_tabs.List;
-const TabsTrigger = (0, import_react.forwardRef)(({ value, ...props }, ref) => {
-  const index = (0, import_react_sdk.getIndexWithinAncestorFromComponentProps)(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_tabs.Trigger, { ref, value: value ?? index, ...props });
-});
-const TabsContent = (0, import_react.forwardRef)(({ value, ...props }, ref) => {
-  const index = (0, import_react_sdk.getIndexWithinAncestorFromComponentProps)(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_tabs.Content, { ref, value: value ?? index, ...props });
-});
-const namespace = "@webstudio-is/sdk-components-react-radix";
-const hooksTabs = {
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:TabsContent`) {
-        const tabs = (0, import_react_sdk.getClosestInstance)(
-          event.instancePath,
-          instance,
-          `${namespace}:Tabs`
-        );
-        const contentValue = context.getPropValue(instance.id, "value") ?? context.indexesWithinAncestors.get(instance.id)?.toString();
-        if (tabs && contentValue) {
-          context.setPropVariable(tabs.id, "value", contentValue);
-        }
-      }
-    }
-  }
-};

package/lib/cjs/tabs.ws.js

@@ -1,196 +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 tabs_ws_exports = {};
-__export(tabs_ws_exports, {
-  metaTabs: () => metaTabs,
-  metaTabsContent: () => metaTabsContent,
-  metaTabsList: () => metaTabsList,
-  metaTabsTrigger: () => metaTabsTrigger,
-  propsMetaTabs: () => propsMetaTabs,
-  propsMetaTabsContent: () => propsMetaTabsContent,
-  propsMetaTabsList: () => propsMetaTabsList,
-  propsMetaTabsTrigger: () => propsMetaTabsTrigger
-});
-module.exports = __toCommonJS(tabs_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_tabs = require("./__generated__/tabs.props");
-const presetStyle = {
-  div: import_css_normalize.div
-};
-const tabsTriggerStyles = [
-  tc.inlineFlex(),
-  tc.items("center"),
-  tc.justify("center"),
-  tc.whitespace("nowrap"),
-  tc.rounded("md"),
-  tc.px(3),
-  tc.py(1.5),
-  tc.text("sm"),
-  tc.font("medium"),
-  tc.transition("all"),
-  tc.focusVisible(
-    [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-  ),
-  tc.disabled([tc.pointerEvents("none"), tc.opacity(50)].flat()),
-  tc.state(
-    [tc.bg("background"), tc.text("foreground"), tc.shadow("sm")].flat(),
-    "[data-state=active]"
-  )
-].flat();
-const tabsContentStyles = [
-  tc.mt(2),
-  tc.focusVisible(
-    [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-  )
-].flat();
-const metaTabs = {
-  category: "radix",
-  order: 2,
-  type: "container",
-  icon: import_svg.TabsIcon,
-  presetStyle,
-  description: "A set of panels with content that are displayed one at a time. Duplicate both a tab trigger and tab content to add more tabs. Triggers and content are connected according to their order in the Navigator.",
-  template: [
-    {
-      type: "instance",
-      component: "Tabs",
-      dataSources: {
-        tabsValue: { type: "variable", initialValue: "0" }
-      },
-      props: [
-        { type: "dataSource", name: "value", dataSourceName: "tabsValue" },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["value"], code: `tabsValue = value` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "TabsList",
-          // inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground
-          styles: [
-            tc.inlineFlex(),
-            tc.h(10),
-            tc.items("center"),
-            tc.justify("center"),
-            tc.rounded("md"),
-            tc.bg("muted"),
-            tc.p(1),
-            tc.text("mutedForeground")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "TabsTrigger",
-              styles: tabsTriggerStyles,
-              children: [{ type: "text", value: "Account" }]
-            },
-            {
-              type: "instance",
-              component: "TabsTrigger",
-              styles: tabsTriggerStyles,
-              children: [{ type: "text", value: "Password" }]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "TabsContent",
-          styles: tabsContentStyles,
-          children: [
-            { type: "text", value: "Make changes to your account here." }
-          ]
-        },
-        {
-          type: "instance",
-          component: "TabsContent",
-          styles: tabsContentStyles,
-          children: [{ type: "text", value: "Change your password here." }]
-        }
-      ]
-    }
-  ]
-};
-const metaTabsList = {
-  category: "hidden",
-  detachable: false,
-  type: "container",
-  icon: import_svg.HeaderIcon,
-  requiredAncestors: ["Tabs"],
-  presetStyle
-};
-const metaTabsTrigger = {
-  category: "hidden",
-  type: "container",
-  icon: import_svg.TriggerIcon,
-  requiredAncestors: ["TabsList"],
-  invalidAncestors: ["TabsTrigger"],
-  indexWithinAncestor: "Tabs",
-  label: "Tab Trigger",
-  states: [
-    ...import_react_sdk.defaultStates,
-    {
-      category: "component-states",
-      label: "Active",
-      selector: "[data-state=active]"
-    }
-  ],
-  presetStyle: {
-    button: [import_css_normalize.button, import_styles.buttonReset].flat()
-  }
-};
-const metaTabsContent = {
-  category: "hidden",
-  type: "container",
-  label: "Tab Content",
-  icon: import_svg.ContentIcon,
-  requiredAncestors: ["Tabs"],
-  indexWithinAncestor: "Tabs",
-  presetStyle
-};
-const propsMetaTabs = {
-  props: import_tabs.propsTabs
-};
-const propsMetaTabsList = {
-  props: import_tabs.propsTabsList
-};
-const propsMetaTabsTrigger = {
-  props: import_tabs.propsTabsTrigger
-};
-const propsMetaTabsContent = {
-  props: import_tabs.propsTabsContent
-};

package/lib/cjs/theme/radix-common-types.js

@@ -1,16 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 radix_common_types_exports = {};
-module.exports = __toCommonJS(radix_common_types_exports);

package/lib/cjs/theme/styles.js

@@ -1,96 +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 styles_exports = {};
-__export(styles_exports, {
-  buttonReset: () => buttonReset,
-  getButtonStyles: () => getButtonStyles
-});
-module.exports = __toCommonJS(styles_exports);
-var tc = __toESM(require("./tailwind-classes"), 1);
-const getButtonStyles = (variant, size = "default") => {
-  const 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")
-  ].flat();
-  let variantStyles = [];
-  if (variant === "ghost") {
-    variantStyles = [
-      tc.state([tc.bg("accent"), tc.text("accentForeground")].flat(), ":hover")
-    ].flat();
-  }
-  if (variant === "outline") {
-    variantStyles = [
-      tc.border(),
-      tc.border("input"),
-      tc.bg("background"),
-      tc.state(
-        [tc.bg("accent", 90), tc.text("accentForeground")].flat(),
-        ":hover"
-      )
-    ].flat();
-  }
-  let sizeStyles = [];
-  if (size === "icon") {
-    sizeStyles = [tc.h(10), tc.w(10)].flat();
-  }
-  if (size === "sm") {
-    sizeStyles = [tc.h(10), tc.px(3)].flat();
-  }
-  if (size === "default") {
-    sizeStyles = [tc.h(10), tc.px(4), tc.py(2)].flat();
-  }
-  return [...styles, ...variantStyles, ...sizeStyles];
-};
-const buttonReset = [
-  {
-    property: "backgroundColor",
-    value: { type: "keyword", value: "transparent" }
-  },
-  {
-    property: "backgroundImage",
-    value: { type: "keyword", value: "none" }
-  },
-  tc.border(0),
-  tc.p(0)
-].flat();