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

package/src/theme/radix-common-types.ts

@@ -467,8 +467,9 @@ type DefaultTheme = {
 export type EvaluatedDefaultTheme = DefaultTheme & {
   padding: DefaultTheme["spacing"];
   colors: typeof colors;
-  width: DefaultTheme["spacing"] & Record<"full", string>;
-  height: DefaultTheme["spacing"];
+  inset: DefaultTheme["spacing"] & Record<"full", string>;
+  width: DefaultTheme["spacing"] & Record<"full" | "max", string>;
+  height: DefaultTheme["spacing"] & Record<"max", string>;
   margin: DefaultTheme["spacing"] & Record<"auto", string>;
   maxWidth: DefaultTheme["spacing"] &
     Record<

package/src/theme/styles.ts

@@ -0,0 +1,80 @@
+import type { EmbedTemplateStyleDecl } from "@webstudio-is/react-sdk";
+import * as tc from "./tailwind-classes";
+
+export const getButtonStyles = (
+  variant: "outline" | "ghost",
+  size: "default" | "sm" | "icon" = "default"
+) => {
+  const styles: EmbedTemplateStyleDecl[] = [
+    // '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: EmbedTemplateStyleDecl[] = [];
+  if (variant === "ghost") {
+    // hover:bg-accent hover:text-accent-foreground
+    variantStyles = [
+      tc.state([tc.bg("accent"), tc.text("accentForeground")].flat(), ":hover"),
+    ].flat();
+  }
+  if (variant === "outline") {
+    // border border-input bg-background hover:bg-accent hover:text-accent-foreground
+    variantStyles = [
+      tc.border(),
+      tc.border("input"),
+      tc.bg("background"),
+      tc.state(
+        [tc.bg("accent", 90), tc.text("accentForeground")].flat(),
+        ":hover"
+      ),
+    ].flat();
+  }
+
+  let sizeStyles: EmbedTemplateStyleDecl[] = [];
+  if (size === "icon") {
+    // h-10 w-10
+    sizeStyles = [tc.h(10), tc.w(10)].flat();
+  }
+  if (size === "sm") {
+    // h-9 rounded-md px-3
+    sizeStyles = [tc.h(10), tc.px(3)].flat();
+  }
+  if (size === "default") {
+    // h-10 px-4 py-2
+    sizeStyles = [tc.h(10), tc.px(4), tc.py(2)].flat();
+  }
+
+  return [...styles, ...variantStyles, ...sizeStyles];
+};
+
+export const buttonReset: EmbedTemplateStyleDecl[] = [
+  {
+    property: "backgroundColor",
+    value: { type: "keyword", value: "transparent" },
+  } as const,
+  {
+    property: "backgroundImage",
+    value: { type: "keyword", value: "none" },
+  } as const,
+  {
+    property: "cursor",
+    value: { type: "keyword", value: "pointer" },
+  } as const,
+  tc.border(0),
+  tc.p(0),
+].flat();

package/src/theme/tailwind-classes.ts

@@ -7,9 +7,26 @@ import {
   parseCssValue,
   parseBoxShadow,
   StyleValue,
+  type StyleProperty,
 } from "@webstudio-is/css-data";
 import type { EvaluatedDefaultTheme } from "./radix-common-types";
 
+export const property = (
+  property: StyleProperty,
+  value: string
+): EmbedTemplateStyleDecl => {
+  if (value.startsWith("--")) {
+    return {
+      property,
+      value: { type: "var", value: value.slice(2), fallbacks: [] },
+    };
+  }
+  return {
+    property,
+    value: { type: "unparsed", value },
+  };
+};
+
 // https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css
 const preflight = (): EmbedTemplateStyleDecl[] => {
   const borderColorValue = parseCssValue("color", theme("colors")["border"]);
@@ -352,33 +369,45 @@ export const maxW = (
 
 const positionStyle = (
   property: "left" | "right" | "top" | "bottom",
-  spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>
+  spacing:
+    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]>
+    | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>
 ): EmbedTemplateStyleDecl => {
   const key = `${spacing}` as const;
-  const valueString = theme("spacing")?.[key] ?? "0";
+  const valueString = theme("inset")?.[key] ?? "0";
   const value = parseCssValue(property, valueString);
 
   return { property, value };
 };
 
 export const top = (
-  spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>
+  spacing:
+    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]>
+    | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>
 ): EmbedTemplateStyleDecl[] => [positionStyle("top", spacing)];
 
 export const right = (
-  spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>
+  spacing:
+    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]>
+    | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>
 ): EmbedTemplateStyleDecl[] => [positionStyle("right", spacing)];
 
 export const bottom = (
-  spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>
+  spacing:
+    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]>
+    | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>
 ): EmbedTemplateStyleDecl[] => [positionStyle("bottom", spacing)];
 
 export const left = (
-  spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>
+  spacing:
+    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]>
+    | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>
 ): EmbedTemplateStyleDecl[] => [positionStyle("left", spacing)];
 
 export const inset = (
-  spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>
+  spacing:
+    | StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]>
+    | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>
 ): EmbedTemplateStyleDecl[] => [
   positionStyle("left", spacing),
   positionStyle("right", spacing),
@@ -386,6 +415,24 @@ export const inset = (
   positionStyle("bottom", spacing),
 ];
 
+export const aspect = (
+  value: "auto" | "square" | "video"
+): EmbedTemplateStyleDecl[] => {
+  let unparsed: string = value;
+  if (value === "square") {
+    unparsed = "1 / 1";
+  }
+  if (value === "video") {
+    unparsed = "16 / 9";
+  }
+  return [
+    {
+      property: "aspectRatio",
+      value: { type: "unparsed", value: unparsed },
+    },
+  ];
+};
+
 export const backdropBlur = (
   blur: keyof EvaluatedDefaultTheme["blur"]
 ): EmbedTemplateStyleDecl[] => {
@@ -398,6 +445,27 @@ export const backdropBlur = (
   return [{ property: "backdropFilter", value }];
 };
 
+export const list = (
+  listStyle: keyof EvaluatedDefaultTheme["listStyleType"]
+): EmbedTemplateStyleDecl[] => {
+  const valueString = theme("listStyleType")[listStyle];
+  const value = parseCssValue("listStyleType", valueString);
+
+  return [{ property: "listStyleType", value }];
+};
+
+export const select = (selectValue: "none"): EmbedTemplateStyleDecl[] => {
+  return [
+    {
+      property: "userSelect",
+      value: {
+        type: "keyword",
+        value: "none",
+      },
+    },
+  ];
+};
+
 export const bg = (
   color: keyof EvaluatedDefaultTheme["colors"],
   alpha?: number
@@ -490,6 +558,10 @@ export const inlineFlex = (): EmbedTemplateStyleDecl[] => {
   ];
 };
 
+export const block = (): EmbedTemplateStyleDecl[] => {
+  return [{ property: "display", value: { type: "keyword", value: "block" } }];
+};
+
 const flexDirection = { row: "row", col: "column" } as const;
 type FlexDirection = keyof typeof flexDirection;
 
@@ -585,11 +657,16 @@ export const grow = (): EmbedTemplateStyleDecl[] => {
   return [
     {
       property: "flexGrow",
-      value: {
-        type: "unit",
-        value: 1,
-        unit: "number",
-      },
+      value: { type: "unit", value: 1, unit: "number" },
+    },
+  ];
+};
+
+export const shrink = (value: number): EmbedTemplateStyleDecl[] => {
+  return [
+    {
+      property: "flexGrow",
+      value: { type: "unit", value, unit: "number" },
     },
   ];
 };
@@ -607,6 +684,45 @@ export const gap = (
   ];
 };
 
+export const lineClamp = (
+  lineClampValue: StringEnumToNumeric<keyof EvaluatedDefaultTheme["lineClamp"]>
+): EmbedTemplateStyleDecl[] => {
+  const key = `${lineClampValue}` as const;
+  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" as "display",
+      value: {
+        type: "keyword",
+        value: "vertical",
+      },
+    },
+    {
+      property: "-webkit-line-clamp" as "display",
+      value: {
+        type: "keyword",
+        value: valueString,
+      },
+    },
+  ];
+};
+
 export const leading = (
   lineHeight:
     | StringEnumToNumeric<keyof EvaluatedDefaultTheme["lineHeight"]>
@@ -697,6 +813,15 @@ export const text = (
   ];
 };
 
+export const noUnderline = (): EmbedTemplateStyleDecl[] => {
+  return [
+    {
+      property: "textDecorationLine",
+      value: { type: "keyword", value: "none" },
+    },
+  ];
+};
+
 export const underline = (): EmbedTemplateStyleDecl[] => {
   return [
     {
@@ -818,7 +943,9 @@ export const pointerEvents = (
   return [{ property: "pointerEvents", value: { type: "keyword", value } }];
 };
 
-export const transition = (value: "none" | "all"): EmbedTemplateStyleDecl[] => {
+export const transition = (
+  value: "none" | "all" | "transform"
+): EmbedTemplateStyleDecl[] => {
   if (value === "none") {
     return [
       {
@@ -830,7 +957,7 @@ export const transition = (value: "none" | "all"): EmbedTemplateStyleDecl[] => {
   return [
     {
       property: "transitionProperty",
-      value: { type: "keyword", value: "all" },
+      value: { type: "keyword", value },
     },
     {
       property: "transitionTimingFunction",
@@ -843,6 +970,15 @@ export const transition = (value: "none" | "all"): EmbedTemplateStyleDecl[] => {
   ];
 };
 
+export const duration = (ms: number): EmbedTemplateStyleDecl[] => {
+  return [
+    {
+      property: "transitionDuration",
+      value: { type: "unit", value: ms, unit: "ms" },
+    },
+  ];
+};
+
 export const hover = (
   value: EmbedTemplateStyleDecl[]
 ): EmbedTemplateStyleDecl[] => {

package/src/theme/tailwind-colors.ts

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

package/src/tooltip.ws.tsx

@@ -4,14 +4,14 @@ import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
 } 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,
@@ -44,10 +44,12 @@ export const metaTooltipContent: WsComponentMeta = {
  **/
 export const metaTooltip: WsComponentMeta = {
   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",
@@ -73,15 +75,18 @@ export const metaTooltip: WsComponentMeta = {
         {
           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/button.js

@@ -1,8 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const Button = forwardRef(({ variant = "default", size = "default", ...props }, ref) => {
-  return /* @__PURE__ */ jsx("button", { ref, "data-size": size, "data-variant": variant, ...props });
-});
-export {
-  Button
-};

package/lib/button.ws.js

@@ -1,133 +0,0 @@
-import { ButtonElementIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  EmbedTemplateInstance
-} from "@webstudio-is/react-sdk";
-import { button } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/button.props";
-import * as tc from "./theme/tailwind-classes";
-const presetStyle = {
-  button
-};
-const template = (props2) => [
-  {
-    type: "instance",
-    component: "Button",
-    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"),
-      // VARIANT
-      // default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-      tc.state(
-        [tc.bg("primary"), tc.text("primaryForeground")].flat(),
-        "[data-variant=default]"
-      ),
-      tc.state(
-        [[tc.bg("primary", 90)].flat()].flat(),
-        "[data-variant=default]:hover"
-      ),
-      // destructive:'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-      tc.state(
-        [tc.bg("destructive"), tc.text("destructiveForeground")].flat(),
-        "[data-variant=destructive]"
-      ),
-      tc.state(
-        [[tc.bg("destructive", 90)].flat()].flat(),
-        "[data-variant=destructive]:hover"
-      ),
-      // outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-      tc.state(
-        [tc.border(), tc.border("input"), tc.bg("background")].flat(),
-        "[data-variant=outline]"
-      ),
-      tc.state(
-        [[tc.bg("accent", 90), tc.text("accentForeground")].flat()].flat(),
-        "[data-variant=outline]:hover"
-      ),
-      // secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-      tc.state(
-        [tc.bg("secondary"), tc.text("secondaryForeground")].flat(),
-        "[data-variant=secondary]"
-      ),
-      tc.state(
-        [[tc.bg("secondary", 80)].flat()].flat(),
-        "[data-variant=secondary]:hover"
-      ),
-      // ghost: 'hover:bg-accent hover:text-accent-foreground',
-      tc.state(
-        [[tc.bg("accent"), tc.text("accentForeground")].flat()].flat(),
-        "[data-variant=ghost]:hover"
-      ),
-      // link: 'text-primary underline-offset-4 hover:underline',
-      tc.state(
-        [tc.text("primary"), tc.underlineOffset(4)].flat(),
-        "[data-variant=link]"
-      ),
-      tc.state([[tc.underline()].flat()].flat(), "[data-variant=link]:hover"),
-      // SIZE
-      // default: 'h-10 px-4 py-2',
-      tc.state([tc.h(10), tc.px(4), tc.py(2)].flat(), "[data-size=default]"),
-      // sm: 'h-9 rounded-md px-3',
-      tc.state([tc.h(10), tc.px(3)].flat(), "[data-size=sm]"),
-      // lg: 'h-11 rounded-md px-8',
-      tc.state([tc.h(11), tc.px(8)].flat(), "[data-size=lg]"),
-      // icon: 'h-10 w-10',
-      tc.state([tc.h(10), tc.w(10)].flat(), "[data-size=icon]")
-    ].flat(),
-    children: props2?.children ?? [{ type: "text", value: "Button" }],
-    props: props2?.props
-  }
-];
-const meta = {
-  category: "radix",
-  type: "container",
-  invalidAncestors: ["Button"],
-  icon: ButtonElementIcon,
-  presetStyle,
-  states: [
-    ...defaultStates,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" },
-    { selector: "[data-variant=default]", label: "Default" },
-    { selector: "[data-variant=default]:hover", label: "Default Hover" },
-    { selector: "[data-variant=destructive]", label: "Destructive" },
-    {
-      selector: "[data-variant=destructive]:hover",
-      label: "Destructive Hover"
-    },
-    { selector: "[data-variant=outline]", label: "Outline" },
-    { selector: "[data-variant=outline]:hover", label: "Outline Hover" },
-    { selector: "[data-variant=secondary]", label: "Secondary" },
-    { selector: "[data-variant=secondary]:hover", label: "Secondary Hover" },
-    { selector: "[data-variant=ghost]", label: "Ghost" },
-    { selector: "[data-variant=ghost]:hover", label: "Ghost Hover" },
-    { selector: "[data-variant=link]", label: "Link" },
-    { selector: "[data-variant=link]:hover", label: "Link Hover" }
-  ],
-  order: 1,
-  template: template()
-};
-const propsMeta = {
-  props,
-  initialProps: ["id", "type", "variant", "size", "aria-label"]
-};
-export {
-  meta,
-  propsMeta,
-  template
-};