@webstudio-is/sdk-components-react-radix 0.85.0 → 0.87.0

package/lib/cjs/sheet.ws.js

@@ -49,6 +49,7 @@ var import_react_sdk = require("@webstudio-is/react-sdk");
 var tc = __toESM(require("./theme/tailwind-classes"), 1);
 var import_sheet = require("./__generated__/sheet.props");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_button = require("./button.ws");
 const contentPresetStyle = {
   div: import_css_normalize.div,
   nav: import_css_normalize.nav
@@ -68,7 +69,6 @@ const descriptionPresetStyle = {
 const metaSheetTrigger = {
   category: "hidden",
   type: "container",
-  label: "Sheet Trigger",
   icon: import_svg.TriggerIcon,
   stylable: false,
   detachable: false
@@ -76,7 +76,6 @@ const metaSheetTrigger = {
 const metaSheetContent = {
   category: "hidden",
   type: "container",
-  label: "Sheet Content",
   icon: import_svg.ContentIcon,
   detachable: false,
   presetStyle: contentPresetStyle,
@@ -91,7 +90,6 @@ const metaSheetOverlay = {
   category: "hidden",
   type: "container",
   presetStyle,
-  label: "Sheet Overlay",
   icon: import_svg.OverlayIcon,
   detachable: false
 };
@@ -99,27 +97,23 @@ const metaSheetTitle = {
   category: "hidden",
   type: "container",
   presetStyle: titlePresetStyle,
-  label: "Sheet Title",
   icon: import_svg.HeadingIcon
 };
 const metaSheetDescription = {
   category: "hidden",
   type: "container",
   presetStyle: descriptionPresetStyle,
-  label: "Sheet Description",
   icon: import_svg.TextIcon
 };
 const metaSheetClose = {
   category: "hidden",
   type: "container",
   presetStyle: buttonPresetStyle,
-  label: "Sheet Close",
   icon: import_svg.ButtonElementIcon
 };
 const metaSheet = {
   category: "radix",
   type: "container",
-  label: "Sheet",
   icon: import_svg.HamburgerMenuIcon,
   order: 15,
   stylable: false,
@@ -128,27 +122,47 @@ const metaSheet = {
       type: "instance",
       component: "Sheet",
       dataSources: {
-        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
-        isOpen: { type: "variable", initialValue: "initial" }
+        sheetOpen: { type: "variable", initialValue: false }
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen"
+          name: "open",
+          dataSourceName: "sheetOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `sheetOpen = open` }
+          ]
         }
       ],
       children: [
         {
           type: "instance",
           component: "SheetTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
+          children: (0, import_button.template)({
+            props: [
+              { name: "variant", type: "string", value: "ghost" },
+              { name: "size", type: "string", value: "icon" }
+            ],
+            children: [
+              {
+                type: "instance",
+                component: "HtmlEmbed",
+                label: "Hamburger Menu Svg",
+                props: [
+                  {
+                    type: "string",
+                    name: "code",
+                    value: import_svg.HamburgerMenuIcon
+                  }
+                ],
+                children: []
+              }
+            ]
+          })
         },
         {
           type: "instance",
@@ -290,7 +304,7 @@ const metaSheet = {
 };
 const propsMetaSheet = {
   props: import_sheet.propsSheet,
-  initialProps: ["isOpen", "modal"]
+  initialProps: ["open", "modal"]
 };
 const propsMetaSheetTrigger = {
   props: import_sheet.propsSheetTrigger

package/lib/cjs/tabs.js

@@ -21,7 +21,8 @@ __export(tabs_exports, {
   Tabs: () => Tabs,
   TabsContent: () => TabsContent,
   TabsList: () => TabsList,
-  TabsTrigger: () => TabsTrigger
+  TabsTrigger: () => TabsTrigger,
+  hooksTabs: () => hooksTabs
 });
 module.exports = __toCommonJS(tabs_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -39,3 +40,21 @@ 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

@@ -74,7 +74,6 @@ const tabsContentStyles = [
 const metaTabs = {
   category: "radix",
   type: "container",
-  label: "Tabs",
   icon: import_svg.TabsIcon,
   presetStyle,
   template: [
@@ -90,11 +89,7 @@ const metaTabs = {
           name: "onValueChange",
           type: "action",
           value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: `tabsValue = value`
-            }
+            { type: "execute", args: ["value"], code: `tabsValue = value` }
           ]
         }
       ],
@@ -162,7 +157,6 @@ const metaTabsList = {
   category: "hidden",
   detachable: false,
   type: "container",
-  label: "Tabs List",
   icon: import_svg.HeaderIcon,
   requiredAncestors: ["Tabs"],
   presetStyle
@@ -170,34 +164,18 @@ const metaTabsList = {
 const metaTabsTrigger = {
   category: "hidden",
   type: "container",
-  label: "Tabs Trigger",
   icon: import_svg.TriggerIcon,
   requiredAncestors: ["TabsList"],
   invalidAncestors: ["TabsTrigger"],
-  indexWithinAncestor: "Tabs",
-  template: [
-    {
-      type: "instance",
-      component: "TabsTrigger",
-      children: [{ type: "text", value: "New Tab" }]
-    }
-  ]
+  indexWithinAncestor: "Tabs"
 };
 const metaTabsContent = {
   category: "hidden",
   type: "container",
-  label: "Tabs Content",
   icon: import_svg.ContentIcon,
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "TabsContent",
-      children: [{ type: "text", value: "New Tab Content" }]
-    }
-  ]
+  presetStyle
 };
 const propsMetaTabs = {
   props: import_tabs.propsTabs

package/lib/cjs/textarea.js

@@ -0,0 +1,28 @@
+"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 textarea_exports = {};
+__export(textarea_exports, {
+  Textarea: () => Textarea
+});
+module.exports = __toCommonJS(textarea_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const Textarea = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { ref, ...props });
+});

package/lib/cjs/textarea.ws.js

@@ -0,0 +1,98 @@
+"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 textarea_ws_exports = {};
+__export(textarea_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(textarea_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 import_textarea = require("./__generated__/textarea.props");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+const presetStyle = {
+  textarea: import_css_normalize.textarea
+};
+const meta = {
+  category: "radix",
+  type: "control",
+  invalidAncestors: ["Button"],
+  icon: import_svg.FormTextAreaIcon,
+  presetStyle,
+  states: [
+    ...import_react_sdk.defaultStates,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: "::placeholder", label: "Placeholder" },
+    // @todo share https://github.com/webstudio-is/webstudio-builder/issues/2102
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ],
+  order: 1,
+  template: [
+    {
+      type: "instance",
+      component: "Textarea",
+      styles: [
+        // flex min-h-[80px] w-full rounded-md
+        // border border-input bg-background
+        // px-3 py-2 text-sm ring-offset-background
+        // placeholder:text-muted-foreground
+        // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+        // focus-visible:ring-offset-2
+        // disabled:cursor-not-allowed disabled:opacity-50
+        tc.flex(),
+        tc.minH(20),
+        tc.w("full"),
+        tc.rounded("md"),
+        tc.border(),
+        tc.border("input"),
+        tc.bg("background"),
+        tc.px(3),
+        tc.py(2),
+        tc.text("sm"),
+        tc.state(tc.text("mutedForeground"), "::placeholder"),
+        tc.focusVisible(
+          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+        ),
+        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat())
+      ].flat(),
+      children: []
+    }
+  ]
+};
+const propsMeta = {
+  props: import_textarea.props,
+  initialProps: ["id", "name", "placeholder", "required", "autoFocus"]
+};

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

@@ -22,7 +22,9 @@ __export(tailwind_classes_exports, {
   backdropBlur: () => backdropBlur,
   bg: () => bg,
   border: () => border,
+  borderB: () => borderB,
   bottom: () => bottom,
+  cursor: () => cursor,
   disabled: () => disabled,
   fixed: () => fixed,
   flex: () => flex,
@@ -43,6 +45,7 @@ __export(tailwind_classes_exports, {
   m: () => m,
   maxW: () => maxW,
   mb: () => mb,
+  minH: () => minH,
   ml: () => ml,
   mr: () => mr,
   mt: () => mt,
@@ -52,7 +55,11 @@ __export(tailwind_classes_exports, {
   outline: () => outline,
   overflow: () => overflow,
   p: () => p,
+  pb: () => pb,
+  pl: () => pl,
   pointerEvents: () => pointerEvents,
+  pr: () => pr,
+  pt: () => pt,
   px: () => px,
   py: () => py,
   relative: () => relative,
@@ -65,6 +72,8 @@ __export(tailwind_classes_exports, {
   top: () => top,
   tracking: () => tracking,
   transition: () => transition,
+  underline: () => underline,
+  underlineOffset: () => underlineOffset,
   w: () => w,
   whitespace: () => whitespace,
   z: () => z
@@ -147,38 +156,93 @@ const rounded = (radius) => {
     }
   ];
 };
-const border = (borderWidth) => {
-  const key = `${borderWidth ?? "DEFAULT"}`;
-  const valueString = (0, import_tailwind_theme.theme)("borderWidth")?.[key] ?? "1px";
-  const value = (0, import_css_data.parseCssValue)("borderTopWidth", valueString);
+const border = (borderWidthOrColor) => {
+  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
+    const key = `${borderWidthOrColor ?? "DEFAULT"}`;
+    const valueString = (0, import_tailwind_theme.theme)("borderWidth")?.[key] ?? "1px";
+    const value2 = (0, import_css_data.parseCssValue)("borderTopWidth", valueString);
+    return [
+      ...preflight(),
+      { property: "borderTopWidth", value: value2 },
+      { property: "borderRightWidth", value: value2 },
+      { property: "borderBottomWidth", value: value2 },
+      { property: "borderLeftWidth", value: value2 }
+    ];
+  }
+  const value = (0, import_css_data.parseCssValue)("color", (0, import_tailwind_theme.theme)("colors")[borderWidthOrColor]);
   return [
-    ...preflight(),
-    { property: "borderTopWidth", value },
-    { property: "borderRightWidth", value },
-    { property: "borderBottomWidth", value },
-    { property: "borderLeftWidth", value }
+    {
+      property: "borderTopColor",
+      value
+    },
+    {
+      property: "borderRightColor",
+      value
+    },
+    {
+      property: "borderBottomColor",
+      value
+    },
+    {
+      property: "borderLeftColor",
+      value
+    }
   ];
 };
-const px = (padding) => {
-  const key = `${padding}`;
-  const valueString = (0, import_tailwind_theme.theme)("padding")?.[key] ?? "0";
-  const value = (0, import_css_data.parseCssValue)("paddingLeft", valueString);
+const borderB = (borderWidthOrColor) => {
+  let widthValue = { type: "unit", value: 1, unit: "number" };
+  let colorValue = (0, import_css_data.parseCssValue)(
+    "color",
+    (0, import_tailwind_theme.theme)("colors")["border"]
+  );
+  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
+    const key = `${borderWidthOrColor ?? "DEFAULT"}`;
+    const valueString = (0, import_tailwind_theme.theme)("borderWidth")[key] ?? "1px";
+    widthValue = (0, import_css_data.parseCssValue)("borderTopWidth", valueString);
+  } else {
+    colorValue = (0, import_css_data.parseCssValue)("color", (0, import_tailwind_theme.theme)("colors")[borderWidthOrColor]);
+  }
   return [
-    { property: "paddingLeft", value },
-    { property: "paddingRight", value }
+    {
+      property: "borderBottomWidth",
+      value: widthValue
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderBottomColor",
+      value: colorValue
+    }
   ];
 };
-const py = (padding) => {
+const paddingProperty = (property) => (padding) => {
   const key = `${padding}`;
-  const valueString = (0, import_tailwind_theme.theme)("padding")[key];
-  const value = (0, import_css_data.parseCssValue)("paddingTop", valueString);
-  return [
-    { property: "paddingTop", value },
-    { property: "paddingBottom", value }
-  ];
+  const valueString = (0, import_tailwind_theme.theme)("padding")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)(property, valueString);
+  return [{ property, value }];
+};
+const pt = (padding) => {
+  return paddingProperty("paddingTop")(padding);
+};
+const pb = (padding) => {
+  return paddingProperty("paddingBottom")(padding);
+};
+const pl = (padding) => {
+  return paddingProperty("paddingLeft")(padding);
+};
+const pr = (padding) => {
+  return paddingProperty("paddingRight")(padding);
+};
+const px = (padding) => {
+  return [pl(padding), pr(padding)].flat();
+};
+const py = (padding) => {
+  return [pt(padding), pb(padding)].flat();
 };
 const p = (padding) => {
-  return [...px(padding), ...py(padding)];
+  return [px(padding), py(padding)].flat();
 };
 const marginProperty = (property) => (margin) => {
   const key = `${margin}`;
@@ -219,6 +283,12 @@ const h = (spacing) => {
   const value = (0, import_css_data.parseCssValue)("height", valueString);
   return [{ property: "height", value }];
 };
+const minH = (spacing) => {
+  const key = `${spacing}`;
+  const valueString = (0, import_tailwind_theme.theme)("height")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)("minHeight", valueString);
+  return [{ property: "minHeight", value }];
+};
 const opacity = (opacity2) => {
   const key = `${opacity2}`;
   const valueString = (0, import_tailwind_theme.theme)("opacity")?.[key] ?? "0";
@@ -230,6 +300,16 @@ const opacity = (opacity2) => {
     }
   ];
 };
+const cursor = (cursor2) => {
+  const valueString = (0, import_tailwind_theme.theme)("cursor")?.[cursor2] ?? "auto";
+  const value = (0, import_css_data.parseCssValue)("cursor", valueString);
+  return [
+    {
+      property: "cursor",
+      value
+    }
+  ];
+};
 const maxW = (spacing) => {
   const key = `${spacing}`;
   const valueString = (0, import_tailwind_theme.theme)("maxWidth")?.[key] ?? "0";
@@ -336,6 +416,70 @@ const flex = (flexParam) => {
   if (flexParam === void 0) {
     return [{ property: "display", value: { type: "keyword", value: "flex" } }];
   }
+  if (flexParam === 1) {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "unit", value: 0, unit: "%" }
+      }
+    ];
+  }
+  if (flexParam === "auto") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" }
+      }
+    ];
+  }
+  if (flexParam === "initial") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 0, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" }
+      }
+    ];
+  }
+  if (flexParam === "none") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 0, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 0, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" }
+      }
+    ];
+  }
   return [
     {
       property: "flexDirection",
@@ -434,6 +578,25 @@ const text = (sizeOrColor) => {
     }
   ];
 };
+const underline = () => {
+  return [
+    {
+      property: "textDecorationLine",
+      value: { type: "keyword", value: "underline" }
+    }
+  ];
+};
+const underlineOffset = (offset) => {
+  const key = `${offset}`;
+  const valueString = (0, import_tailwind_theme.theme)("textUnderlineOffset")[key];
+  const value = (0, import_css_data.parseCssValue)("textUnderlineOffset", valueString);
+  return [
+    {
+      property: "textUnderlineOffset",
+      value
+    }
+  ];
+};
 const weights = {
   thin: "100",
   extralight: "200",

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

@@ -31,5 +31,14 @@ const colors = {
   foreground: "hsl(222.2 84% 4.9%)",
   ring: "rgb(148, 163, 184)",
   mutedForeground: "rgb(100, 116, 139)",
-  muted: `hsl(210 40% 96.1%)`
+  muted: `hsl(210 40% 96.1%)`,
+  primary: "rgb(15, 23, 42)",
+  primaryForeground: "hsl(210 40% 98%)",
+  destructive: "rgb(239, 68, 68)",
+  destructiveForeground: "rgb(248, 250, 252)",
+  accent: "rgb(241, 245, 249)",
+  accentForeground: "rgb(15, 23, 42)",
+  input: "rgb(226, 232, 240)",
+  secondary: "rgb(241, 245, 249)",
+  secondaryForeground: "rgb(15, 23, 42)"
 };