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

package/lib/switch.ws.js

@@ -0,0 +1,145 @@
+import { SwitchIcon, TriggerIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { button, span } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
+import { propsSwitch, propsSwitchThumb } from "./__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: SwitchIcon,
+  states: [
+    ...defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    button: [button, 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: TriggerIcon,
+  states: [
+    ...defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    span
+  }
+};
+const propsMetaSwitch = {
+  props: propsSwitch,
+  initialProps: ["id", "checked", "name", "required"]
+};
+const propsMetaSwitchThumb = {
+  props: propsSwitchThumb
+};
+export {
+  metaSwitch,
+  metaSwitchThumb,
+  propsMetaSwitch,
+  propsMetaSwitchThumb
+};

package/lib/tabs.js

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import {
-  forwardRef,
-  Children
+  forwardRef
 } from "react";
 import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
 import {
@@ -10,10 +9,9 @@ import {
 } from "@webstudio-is/react-sdk";
 const Tabs = Root;
 const TabsList = List;
-const TabsTrigger = forwardRef(({ value, children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
+const TabsTrigger = forwardRef(({ value, ...props }, ref) => {
   const index = getIndexWithinAncestorFromComponentProps(props);
-  return /* @__PURE__ */ jsx(Trigger, { ref, value: value ?? index, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button" }) });
+  return /* @__PURE__ */ jsx(Trigger, { ref, value: value ?? index, ...props });
 });
 const TabsContent = forwardRef(({ value, ...props }, ref) => {
   const index = getIndexWithinAncestorFromComponentProps(props);

package/lib/tabs.ws.js

@@ -4,8 +4,9 @@ import {
   TabsIcon,
   TriggerIcon
 } from "@webstudio-is/icons/svg";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { button, div } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
 import {
   propsTabs,
   propsTabsList,
@@ -43,9 +44,11 @@ const tabsContentStyles = [
 ].flat();
 const metaTabs = {
   category: "radix",
+  order: 2,
   type: "container",
   icon: 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",
@@ -82,26 +85,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" }]
             }
           ]
         },
@@ -137,7 +128,11 @@ const metaTabsTrigger = {
   icon: TriggerIcon,
   requiredAncestors: ["TabsList"],
   invalidAncestors: ["TabsTrigger"],
-  indexWithinAncestor: "Tabs"
+  indexWithinAncestor: "Tabs",
+  label: "Tab Trigger",
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  }
 };
 const metaTabsContent = {
   category: "hidden",
@@ -145,7 +140,8 @@ const metaTabsContent = {
   icon: ContentIcon,
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
-  presetStyle
+  presetStyle,
+  label: "Tab Content"
 };
 const propsMetaTabs = {
   props: propsTabs

package/lib/theme/styles.js

@@ -0,0 +1,70 @@
+import * as tc from "./tailwind-classes";
+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();
+export {
+  buttonReset,
+  getButtonStyles
+};

package/lib/theme/tailwind-classes.js

@@ -4,6 +4,18 @@ import {
   parseBoxShadow,
   StyleValue
 } from "@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 = parseCssValue("color", theme("colors")["border"]);
   return [
@@ -140,11 +152,11 @@ const borderB = (borderWidthOrColor) => {
     }
   ];
 };
-const paddingProperty = (property) => (padding) => {
+const paddingProperty = (property2) => (padding) => {
   const key = `${padding}`;
   const valueString = theme("padding")?.[key] ?? "0";
-  const value = parseCssValue(property, valueString);
-  return [{ property, value }];
+  const value = parseCssValue(property2, valueString);
+  return [{ property: property2, value }];
 };
 const pt = (padding) => {
   return paddingProperty("paddingTop")(padding);
@@ -167,11 +179,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 = theme("margin")?.[key] ?? "0";
-  const value = parseCssValue(property, valueString);
-  return [{ property, value }];
+  const value = parseCssValue(property2, valueString);
+  return [{ property: property2, value }];
 };
 const ml = (margin) => {
   return marginProperty("marginLeft")(margin);
@@ -239,11 +251,11 @@ const maxW = (spacing) => {
   const value = parseCssValue("width", valueString);
   return [{ property: "maxWidth", value }];
 };
-const positionStyle = (property, spacing) => {
+const positionStyle = (property2, spacing) => {
   const key = `${spacing}`;
-  const valueString = theme("spacing")?.[key] ?? "0";
-  const value = parseCssValue(property, valueString);
-  return { property, value };
+  const valueString = theme("inset")?.[key] ?? "0";
+  const value = parseCssValue(property2, valueString);
+  return { property: property2, value };
 };
 const top = (spacing) => [positionStyle("top", spacing)];
 const right = (spacing) => [positionStyle("right", spacing)];
@@ -255,6 +267,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 = theme("blur")[blur];
   const value = {
@@ -263,6 +290,22 @@ const backdropBlur = (blur) => {
   };
   return [{ property: "backdropFilter", value }];
 };
+const list = (listStyle) => {
+  const valueString = theme("listStyleType")[listStyle];
+  const value = parseCssValue("listStyleType", valueString);
+  return [{ property: "listStyleType", value }];
+};
+const select = (selectValue) => {
+  return [
+    {
+      property: "userSelect",
+      value: {
+        type: "keyword",
+        value: "none"
+      }
+    }
+  ];
+};
 const bg = (color, alpha) => {
   const value = parseCssValue("backgroundColor", theme("colors")[color]);
   if (alpha !== void 0 && value.type === "rgb") {
@@ -334,6 +377,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) {
@@ -417,11 +463,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" }
     }
   ];
 };
@@ -434,6 +484,40 @@ const gap = (gapValue) => {
     { property: "columnGap", value }
   ];
 };
+const lineClamp = (lineClampValue) => {
+  const key = `${lineClampValue}`;
+  const valueString = 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 = theme("lineHeight")[key];
@@ -501,6 +585,14 @@ const text = (sizeOrColor) => {
     }
   ];
 };
+const noUnderline = () => {
+  return [
+    {
+      property: "textDecorationLine",
+      value: { type: "keyword", value: "none" }
+    }
+  ];
+};
 const underline = () => {
   return [
     {
@@ -589,7 +681,7 @@ const transition = (value) => {
   return [
     {
       property: "transitionProperty",
-      value: { type: "keyword", value: "all" }
+      value: { type: "keyword", value }
     },
     {
       property: "transitionTimingFunction",
@@ -601,6 +693,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,
@@ -633,13 +733,16 @@ const state = (value, state2) => {
 };
 export {
   absolute,
+  aspect,
   backdropBlur,
   bg,
+  block,
   border,
   borderB,
   bottom,
   cursor,
   disabled,
+  duration,
   fixed,
   flex,
   focus,
@@ -656,6 +759,8 @@ export {
   justify,
   leading,
   left,
+  lineClamp,
+  list,
   m,
   maxW,
   mb,
@@ -665,6 +770,7 @@ export {
   mt,
   mx,
   my,
+  noUnderline,
   opacity,
   outline,
   overflow,
@@ -673,6 +779,7 @@ export {
   pl,
   pointerEvents,
   pr,
+  property,
   pt,
   px,
   py,
@@ -680,7 +787,9 @@ export {
   right,
   ring,
   rounded,
+  select,
   shadow,
+  shrink,
   state,
   text,
   top,

package/lib/theme/tailwind-colors.js

@@ -1,6 +1,7 @@
 const colors = {
   transparent: "transparent",
   current: "currentColor",
+  inherit: "inherit",
   popover: "rgb(255, 255, 255)",
   popoverForeground: "rgb(2, 8, 23)",
   border: "rgb(226, 232, 240)",

package/lib/tooltip.ws.js

@@ -1,14 +1,14 @@
 import { TooltipIcon, TriggerIcon, ContentIcon } from "@webstudio-is/icons/svg";
 import {
 } from "@webstudio-is/react-sdk";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
 import {
   propsTooltip,
   propsTooltipContent,
   propsTooltipTrigger
 } from "./__generated__/tooltip.props";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import { template as buttonTemplate } from "./button.ws";
+import { getButtonStyles } from "./theme/styles";
 const presetStyle = {
   div
 };
@@ -28,10 +28,11 @@ const metaTooltipContent = {
 };
 const metaTooltip = {
   category: "radix",
+  order: 7,
   type: "container",
   icon: TooltipIcon,
-  order: 15,
   stylable: false,
+  description: "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
   template: [
     {
       type: "instance",
@@ -57,15 +58,18 @@ const metaTooltip = {
         {
           type: "instance",
           component: "TooltipTrigger",
-          props: [],
-          children: buttonTemplate({
-            children: [{ type: "text", value: "Button" }]
-          })
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("outline"),
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
         },
         {
           type: "instance",
           component: "TooltipContent",
-          props: [],
           /**
            *  z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md
            **/

package/lib/types/__generated__/checkbox.props.d.ts

@@ -0,0 +1,3 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const propsCheckbox: Record<string, PropMeta>;
+export declare const propsCheckboxIndicator: Record<string, PropMeta>;

package/lib/types/__generated__/navigation-menu.props.d.ts

@@ -0,0 +1,8 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const propsNavigationMenu: Record<string, PropMeta>;
+export declare const propsNavigationMenuList: Record<string, PropMeta>;
+export declare const propsNavigationMenuViewport: Record<string, PropMeta>;
+export declare const propsNavigationMenuContent: Record<string, PropMeta>;
+export declare const propsNavigationMenuItem: Record<string, PropMeta>;
+export declare const propsNavigationMenuLink: Record<string, PropMeta>;
+export declare const propsNavigationMenuTrigger: Record<string, PropMeta>;

package/lib/types/__generated__/radio-group.props.d.ts

@@ -0,0 +1,4 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const propsRadioGroup: Record<string, PropMeta>;
+export declare const propsRadioGroupItem: Record<string, PropMeta>;
+export declare const propsRadioGroupIndicator: Record<string, PropMeta>;

package/lib/types/__generated__/select.props.d.ts

@@ -0,0 +1,9 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const propsSelect: Record<string, PropMeta>;
+export declare const propsSelectTrigger: Record<string, PropMeta>;
+export declare const propsSelectValue: Record<string, PropMeta>;
+export declare const propsSelectContent: Record<string, PropMeta>;
+export declare const propsSelectViewport: Record<string, PropMeta>;
+export declare const propsSelectItem: Record<string, PropMeta>;
+export declare const propsSelectItemIndicator: Record<string, PropMeta>;
+export declare const propsSelectItemText: Record<string, PropMeta>;

package/lib/types/__generated__/switch.props.d.ts

@@ -0,0 +1,3 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const propsSwitch: Record<string, PropMeta>;
+export declare const propsSwitchThumb: Record<string, PropMeta>;

package/lib/types/checkbox.d.ts

@@ -0,0 +1,6 @@
+import { type ForwardRefExoticComponent, type ComponentPropsWithRef } from "react";
+import { Indicator } from "@radix-ui/react-checkbox";
+export declare const Checkbox: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-checkbox").CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, "checked"> & {
+    checked: boolean;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const CheckboxIndicator: ForwardRefExoticComponent<ComponentPropsWithRef<typeof Indicator>>;