@webstudio-is/sdk-components-react-radix 0.87.1 → 0.89.0

package/lib/cjs/{input.js → switch.js}

@@ -16,13 +16,12 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var input_exports = {};
-__export(input_exports, {
-  Input: () => Input
-});
-module.exports = __toCommonJS(input_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-const Input = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ref, ...props });
+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

@@ -0,0 +1,173 @@
+"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

@@ -31,10 +31,9 @@ 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, children, ...props }, ref) => {
-  const firstChild = import_react.Children.toArray(children)[0];
+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, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button" }) });
+  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);

package/lib/cjs/tabs.ws.js

@@ -41,6 +41,7 @@ module.exports = __toCommonJS(tabs_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_styles = require("./theme/styles");
 var import_tabs = require("./__generated__/tabs.props");
 const presetStyle = {
   div: import_css_normalize.div
@@ -73,9 +74,11 @@ const tabsContentStyles = [
 ].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",
@@ -112,26 +115,14 @@ const metaTabs = {
             {
               type: "instance",
               component: "TabsTrigger",
-              children: [
-                {
-                  type: "instance",
-                  component: "Button",
-                  styles: tabsTriggerStyles,
-                  children: [{ type: "text", value: "Account" }]
-                }
-              ]
+              styles: tabsTriggerStyles,
+              children: [{ type: "text", value: "Account" }]
             },
             {
               type: "instance",
               component: "TabsTrigger",
-              children: [
-                {
-                  type: "instance",
-                  component: "Button",
-                  styles: tabsTriggerStyles,
-                  children: [{ type: "text", value: "Password" }]
-                }
-              ]
+              styles: tabsTriggerStyles,
+              children: [{ type: "text", value: "Password" }]
             }
           ]
         },
@@ -167,7 +158,11 @@ const metaTabsTrigger = {
   icon: import_svg.TriggerIcon,
   requiredAncestors: ["TabsList"],
   invalidAncestors: ["TabsTrigger"],
-  indexWithinAncestor: "Tabs"
+  indexWithinAncestor: "Tabs",
+  label: "Tab Trigger",
+  presetStyle: {
+    button: [import_css_normalize.button, import_styles.buttonReset].flat()
+  }
 };
 const metaTabsContent = {
   category: "hidden",
@@ -175,7 +170,8 @@ const metaTabsContent = {
   icon: import_svg.ContentIcon,
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
-  presetStyle
+  presetStyle,
+  label: "Tab Content"
 };
 const propsMetaTabs = {
   props: import_tabs.propsTabs

package/lib/cjs/theme/styles.js

@@ -0,0 +1,100 @@
+"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" }
+  },
+  {
+    property: "cursor",
+    value: { type: "keyword", value: "pointer" }
+  },
+  tc.border(0),
+  tc.p(0)
+].flat();

package/lib/cjs/theme/tailwind-classes.js

@@ -19,13 +19,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var tailwind_classes_exports = {};
 __export(tailwind_classes_exports, {
   absolute: () => absolute,
+  aspect: () => aspect,
   backdropBlur: () => backdropBlur,
   bg: () => bg,
+  block: () => block,
   border: () => border,
   borderB: () => borderB,
   bottom: () => bottom,
   cursor: () => cursor,
   disabled: () => disabled,
+  duration: () => duration,
   fixed: () => fixed,
   flex: () => flex,
   focus: () => focus,
@@ -42,6 +45,8 @@ __export(tailwind_classes_exports, {
   justify: () => justify,
   leading: () => leading,
   left: () => left,
+  lineClamp: () => lineClamp,
+  list: () => list,
   m: () => m,
   maxW: () => maxW,
   mb: () => mb,
@@ -51,6 +56,7 @@ __export(tailwind_classes_exports, {
   mt: () => mt,
   mx: () => mx,
   my: () => my,
+  noUnderline: () => noUnderline,
   opacity: () => opacity,
   outline: () => outline,
   overflow: () => overflow,
@@ -59,6 +65,7 @@ __export(tailwind_classes_exports, {
   pl: () => pl,
   pointerEvents: () => pointerEvents,
   pr: () => pr,
+  property: () => property,
   pt: () => pt,
   px: () => px,
   py: () => py,
@@ -66,7 +73,9 @@ __export(tailwind_classes_exports, {
   right: () => right,
   ring: () => ring,
   rounded: () => rounded,
+  select: () => select,
   shadow: () => shadow,
+  shrink: () => shrink,
   state: () => state,
   text: () => text,
   top: () => top,
@@ -81,6 +90,18 @@ __export(tailwind_classes_exports, {
 module.exports = __toCommonJS(tailwind_classes_exports);
 var import_tailwind_theme = require("./tailwind-theme");
 var import_css_data = require("@webstudio-is/css-data");
+const property = (property2, value) => {
+  if (value.startsWith("--")) {
+    return {
+      property: property2,
+      value: { type: "var", value: value.slice(2), fallbacks: [] }
+    };
+  }
+  return {
+    property: property2,
+    value: { type: "unparsed", value }
+  };
+};
 const preflight = () => {
   const borderColorValue = (0, import_css_data.parseCssValue)("color", (0, import_tailwind_theme.theme)("colors")["border"]);
   return [
@@ -217,11 +238,11 @@ const borderB = (borderWidthOrColor) => {
     }
   ];
 };
-const paddingProperty = (property) => (padding) => {
+const paddingProperty = (property2) => (padding) => {
   const key = `${padding}`;
   const valueString = (0, import_tailwind_theme.theme)("padding")?.[key] ?? "0";
-  const value = (0, import_css_data.parseCssValue)(property, valueString);
-  return [{ property, value }];
+  const value = (0, import_css_data.parseCssValue)(property2, valueString);
+  return [{ property: property2, value }];
 };
 const pt = (padding) => {
   return paddingProperty("paddingTop")(padding);
@@ -244,11 +265,11 @@ const py = (padding) => {
 const p = (padding) => {
   return [px(padding), py(padding)].flat();
 };
-const marginProperty = (property) => (margin) => {
+const marginProperty = (property2) => (margin) => {
   const key = `${margin}`;
   const valueString = (0, import_tailwind_theme.theme)("margin")?.[key] ?? "0";
-  const value = (0, import_css_data.parseCssValue)(property, valueString);
-  return [{ property, value }];
+  const value = (0, import_css_data.parseCssValue)(property2, valueString);
+  return [{ property: property2, value }];
 };
 const ml = (margin) => {
   return marginProperty("marginLeft")(margin);
@@ -316,11 +337,11 @@ const maxW = (spacing) => {
   const value = (0, import_css_data.parseCssValue)("width", valueString);
   return [{ property: "maxWidth", value }];
 };
-const positionStyle = (property, spacing) => {
+const positionStyle = (property2, spacing) => {
   const key = `${spacing}`;
-  const valueString = (0, import_tailwind_theme.theme)("spacing")?.[key] ?? "0";
-  const value = (0, import_css_data.parseCssValue)(property, valueString);
-  return { property, value };
+  const valueString = (0, import_tailwind_theme.theme)("inset")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)(property2, valueString);
+  return { property: property2, value };
 };
 const top = (spacing) => [positionStyle("top", spacing)];
 const right = (spacing) => [positionStyle("right", spacing)];
@@ -332,6 +353,21 @@ const inset = (spacing) => [
   positionStyle("top", spacing),
   positionStyle("bottom", spacing)
 ];
+const aspect = (value) => {
+  let unparsed = value;
+  if (value === "square") {
+    unparsed = "1 / 1";
+  }
+  if (value === "video") {
+    unparsed = "16 / 9";
+  }
+  return [
+    {
+      property: "aspectRatio",
+      value: { type: "unparsed", value: unparsed }
+    }
+  ];
+};
 const backdropBlur = (blur) => {
   const valueString = (0, import_tailwind_theme.theme)("blur")[blur];
   const value = {
@@ -340,6 +376,22 @@ const backdropBlur = (blur) => {
   };
   return [{ property: "backdropFilter", value }];
 };
+const list = (listStyle) => {
+  const valueString = (0, import_tailwind_theme.theme)("listStyleType")[listStyle];
+  const value = (0, import_css_data.parseCssValue)("listStyleType", valueString);
+  return [{ property: "listStyleType", value }];
+};
+const select = (selectValue) => {
+  return [
+    {
+      property: "userSelect",
+      value: {
+        type: "keyword",
+        value: "none"
+      }
+    }
+  ];
+};
 const bg = (color, alpha) => {
   const value = (0, import_css_data.parseCssValue)("backgroundColor", (0, import_tailwind_theme.theme)("colors")[color]);
   if (alpha !== void 0 && value.type === "rgb") {
@@ -411,6 +463,9 @@ const inlineFlex = () => {
     { property: "display", value: { type: "keyword", value: "inline-flex" } }
   ];
 };
+const block = () => {
+  return [{ property: "display", value: { type: "keyword", value: "block" } }];
+};
 const flexDirection = { row: "row", col: "column" };
 const flex = (flexParam) => {
   if (flexParam === void 0) {
@@ -494,11 +549,15 @@ const grow = () => {
   return [
     {
       property: "flexGrow",
-      value: {
-        type: "unit",
-        value: 1,
-        unit: "number"
-      }
+      value: { type: "unit", value: 1, unit: "number" }
+    }
+  ];
+};
+const shrink = (value) => {
+  return [
+    {
+      property: "flexGrow",
+      value: { type: "unit", value, unit: "number" }
     }
   ];
 };
@@ -511,6 +570,40 @@ const gap = (gapValue) => {
     { property: "columnGap", value }
   ];
 };
+const lineClamp = (lineClampValue) => {
+  const key = `${lineClampValue}`;
+  const valueString = (0, import_tailwind_theme.theme)("lineClamp")?.[key];
+  return [
+    {
+      property: "overflow",
+      value: {
+        type: "keyword",
+        value: "hidden"
+      }
+    },
+    {
+      property: "display",
+      value: {
+        type: "keyword",
+        value: "-webkit-box"
+      }
+    },
+    {
+      property: "-webkit-box-orient",
+      value: {
+        type: "keyword",
+        value: "vertical"
+      }
+    },
+    {
+      property: "-webkit-line-clamp",
+      value: {
+        type: "keyword",
+        value: valueString
+      }
+    }
+  ];
+};
 const leading = (lineHeight) => {
   const key = `${lineHeight}`;
   const valueString = (0, import_tailwind_theme.theme)("lineHeight")[key];
@@ -578,6 +671,14 @@ const text = (sizeOrColor) => {
     }
   ];
 };
+const noUnderline = () => {
+  return [
+    {
+      property: "textDecorationLine",
+      value: { type: "keyword", value: "none" }
+    }
+  ];
+};
 const underline = () => {
   return [
     {
@@ -666,7 +767,7 @@ const transition = (value) => {
   return [
     {
       property: "transitionProperty",
-      value: { type: "keyword", value: "all" }
+      value: { type: "keyword", value }
     },
     {
       property: "transitionTimingFunction",
@@ -678,6 +779,14 @@ const transition = (value) => {
     }
   ];
 };
+const duration = (ms) => {
+  return [
+    {
+      property: "transitionDuration",
+      value: { type: "unit", value: ms, unit: "ms" }
+    }
+  ];
+};
 const hover = (value) => {
   return value.map((decl) => ({
     ...decl,

package/lib/cjs/theme/tailwind-colors.js

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(tailwind_colors_exports);
 const colors = {
   transparent: "transparent",
   current: "currentColor",
+  inherit: "inherit",
   popover: "rgb(255, 255, 255)",
   popoverForeground: "rgb(2, 8, 23)",
   border: "rgb(226, 232, 240)",