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

package/lib/tabs.ws.js

@@ -0,0 +1,193 @@
+import {
+  ContentIcon,
+  HeaderIcon,
+  TabsIcon,
+  TriggerIcon
+} from "@webstudio-is/icons/svg";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsTabs,
+  propsTabsList,
+  propsTabsTrigger,
+  propsTabsContent
+} from "./__generated__/tabs.props";
+const presetStyle = {
+  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",
+  type: "container",
+  label: "Tabs",
+  icon: TabsIcon,
+  presetStyle,
+  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",
+              children: [
+                {
+                  type: "instance",
+                  component: "Button",
+                  styles: tabsTriggerStyles,
+                  children: [{ type: "text", value: "Account" }]
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "TabsTrigger",
+              children: [
+                {
+                  type: "instance",
+                  component: "Button",
+                  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",
+  label: "Tabs List",
+  icon: HeaderIcon,
+  requiredAncestors: ["Tabs"],
+  presetStyle
+};
+const metaTabsTrigger = {
+  category: "hidden",
+  type: "container",
+  label: "Tabs Trigger",
+  icon: TriggerIcon,
+  requiredAncestors: ["TabsList"],
+  invalidAncestors: ["TabsTrigger"],
+  indexWithinAncestor: "Tabs",
+  template: [
+    {
+      type: "instance",
+      component: "TabsTrigger",
+      children: [{ type: "text", value: "New Tab" }]
+    }
+  ]
+};
+const metaTabsContent = {
+  category: "hidden",
+  type: "container",
+  label: "Tabs Content",
+  icon: ContentIcon,
+  requiredAncestors: ["Tabs"],
+  indexWithinAncestor: "Tabs",
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "TabsContent",
+      children: [{ type: "text", value: "New Tab Content" }]
+    }
+  ]
+};
+const propsMetaTabs = {
+  props: propsTabs
+};
+const propsMetaTabsList = {
+  props: propsTabsList
+};
+const propsMetaTabsTrigger = {
+  props: propsTabsTrigger
+};
+const propsMetaTabsContent = {
+  props: propsTabsContent
+};
+export {
+  metaTabs,
+  metaTabsContent,
+  metaTabsList,
+  metaTabsTrigger,
+  propsMetaTabs,
+  propsMetaTabsContent,
+  propsMetaTabsList,
+  propsMetaTabsTrigger
+};

package/lib/theme/tailwind-classes.js

@@ -0,0 +1,527 @@
+import { theme } from "./tailwind-theme";
+import { parseCssValue, parseBoxShadow } from "@webstudio-is/css-data";
+const preflight = () => {
+  const borderColorValue = parseCssValue("color", theme("colors")["border"]);
+  return [
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderTopColor",
+      value: borderColorValue
+    },
+    {
+      property: "borderRightColor",
+      value: borderColorValue
+    },
+    {
+      property: "borderBottomColor",
+      value: borderColorValue
+    },
+    {
+      property: "borderLeftColor",
+      value: borderColorValue
+    }
+  ];
+};
+const z = (zIndex) => {
+  const valueString = theme("zIndex")[zIndex ?? "auto"];
+  const value = parseCssValue("zIndex", valueString);
+  return [
+    {
+      property: "zIndex",
+      value
+    }
+  ];
+};
+const overflow = (value) => [
+  {
+    property: "overflow",
+    value: { type: "keyword", value }
+  }
+];
+const rounded = (radius) => {
+  const valueString = theme("borderRadius")[radius ?? "DEFAULT"];
+  const value = parseCssValue("borderTopWidth", valueString);
+  return [
+    {
+      property: "borderTopLeftRadius",
+      value
+    },
+    {
+      property: "borderTopRightRadius",
+      value
+    },
+    {
+      property: "borderBottomRightRadius",
+      value
+    },
+    {
+      property: "borderBottomLeftRadius",
+      value
+    }
+  ];
+};
+const border = (borderWidth) => {
+  const key = `${borderWidth ?? "DEFAULT"}`;
+  const valueString = theme("borderWidth")?.[key] ?? "1px";
+  const value = parseCssValue("borderTopWidth", valueString);
+  return [
+    ...preflight(),
+    { property: "borderTopWidth", value },
+    { property: "borderRightWidth", value },
+    { property: "borderBottomWidth", value },
+    { property: "borderLeftWidth", value }
+  ];
+};
+const px = (padding) => {
+  const key = `${padding}`;
+  const valueString = theme("padding")?.[key] ?? "0";
+  const value = parseCssValue("paddingLeft", valueString);
+  return [
+    { property: "paddingLeft", value },
+    { property: "paddingRight", value }
+  ];
+};
+const py = (padding) => {
+  const key = `${padding}`;
+  const valueString = theme("padding")[key];
+  const value = parseCssValue("paddingTop", valueString);
+  return [
+    { property: "paddingTop", value },
+    { property: "paddingBottom", value }
+  ];
+};
+const p = (padding) => {
+  return [...px(padding), ...py(padding)];
+};
+const marginProperty = (property) => (margin) => {
+  const key = `${margin}`;
+  const valueString = theme("margin")?.[key] ?? "0";
+  const value = parseCssValue(property, valueString);
+  return [{ property, value }];
+};
+const ml = (margin) => {
+  return marginProperty("marginLeft")(margin);
+};
+const mr = (margin) => {
+  return marginProperty("marginRight")(margin);
+};
+const mt = (margin) => {
+  return marginProperty("marginTop")(margin);
+};
+const mb = (margin) => {
+  return marginProperty("marginBottom")(margin);
+};
+const mx = (margin) => {
+  return [ml(margin), mr(margin)].flat();
+};
+const my = (margin) => {
+  return [mt(margin), mb(margin)].flat();
+};
+const m = (margin) => {
+  return [mx(margin), my(margin)].flat();
+};
+const w = (spacing) => {
+  const key = `${spacing}`;
+  const valueString = theme("width")?.[key] ?? "0";
+  const value = parseCssValue("width", valueString);
+  return [{ property: "width", value }];
+};
+const h = (spacing) => {
+  const key = `${spacing}`;
+  const valueString = theme("height")?.[key] ?? "0";
+  const value = parseCssValue("height", valueString);
+  return [{ property: "height", value }];
+};
+const opacity = (opacity2) => {
+  const key = `${opacity2}`;
+  const valueString = theme("opacity")?.[key] ?? "0";
+  const value = parseCssValue("opacity", valueString);
+  return [
+    {
+      property: "opacity",
+      value
+    }
+  ];
+};
+const maxW = (spacing) => {
+  const key = `${spacing}`;
+  const valueString = theme("maxWidth")?.[key] ?? "0";
+  const value = parseCssValue("width", valueString);
+  return [{ property: "maxWidth", value }];
+};
+const positionStyle = (property, spacing) => {
+  const key = `${spacing}`;
+  const valueString = theme("spacing")?.[key] ?? "0";
+  const value = parseCssValue(property, valueString);
+  return { property, value };
+};
+const top = (spacing) => [positionStyle("top", spacing)];
+const right = (spacing) => [positionStyle("right", spacing)];
+const bottom = (spacing) => [positionStyle("bottom", spacing)];
+const left = (spacing) => [positionStyle("left", spacing)];
+const inset = (spacing) => [
+  positionStyle("left", spacing),
+  positionStyle("right", spacing),
+  positionStyle("top", spacing),
+  positionStyle("bottom", spacing)
+];
+const backdropBlur = (blur) => {
+  const valueString = theme("blur")[blur];
+  const value = {
+    type: "unparsed",
+    value: `blur(${valueString})`
+  };
+  return [{ property: "backdropFilter", value }];
+};
+const bg = (color, alpha) => {
+  const value = parseCssValue("backgroundColor", theme("colors")[color]);
+  if (alpha !== void 0 && value.type === "rgb") {
+    value.alpha = alpha / 100;
+  }
+  return [
+    {
+      property: "backgroundColor",
+      value
+    }
+  ];
+};
+const fixed = () => {
+  return [{ property: "position", value: { type: "keyword", value: "fixed" } }];
+};
+const relative = () => {
+  return [
+    { property: "position", value: { type: "keyword", value: "relative" } }
+  ];
+};
+const absolute = () => {
+  return [
+    { property: "position", value: { type: "keyword", value: "absolute" } }
+  ];
+};
+const grid = () => {
+  return [{ property: "display", value: { type: "keyword", value: "grid" } }];
+};
+const alignItems = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  baseline: "baseline",
+  stretch: "stretch"
+};
+const items = (alignItemsParam) => {
+  return [
+    {
+      property: "alignItems",
+      value: {
+        type: "keyword",
+        value: alignItems[alignItemsParam]
+      }
+    }
+  ];
+};
+const justifyContent = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+  stretch: "stretch"
+};
+const justify = (justifyContentParam) => {
+  return [
+    {
+      property: "justifyContent",
+      value: {
+        type: "keyword",
+        value: justifyContent[justifyContentParam]
+      }
+    }
+  ];
+};
+const inlineFlex = () => {
+  return [
+    { property: "display", value: { type: "keyword", value: "inline-flex" } }
+  ];
+};
+const flexDirection = { row: "row", col: "column" };
+const flex = (flexParam) => {
+  if (flexParam === void 0) {
+    return [{ property: "display", value: { type: "keyword", value: "flex" } }];
+  }
+  return [
+    {
+      property: "flexDirection",
+      value: {
+        type: "keyword",
+        value: flexDirection[flexParam]
+      }
+    }
+  ];
+};
+const grow = () => {
+  return [
+    {
+      property: "flexGrow",
+      value: {
+        type: "unit",
+        value: 1,
+        unit: "number"
+      }
+    }
+  ];
+};
+const gap = (gapValue) => {
+  const key = `${gapValue}`;
+  const valueString = theme("spacing")?.[key] ?? "0";
+  const value = parseCssValue("rowGap", valueString);
+  return [
+    { property: "rowGap", value },
+    { property: "columnGap", value }
+  ];
+};
+const leading = (lineHeight) => {
+  const key = `${lineHeight}`;
+  const valueString = theme("lineHeight")[key];
+  const value = parseCssValue("lineHeight", valueString);
+  return [{ property: "lineHeight", value }];
+};
+const tracking = (letterSpacing) => {
+  const key = `${letterSpacing}`;
+  const valueString = theme("letterSpacing")[key];
+  const value = parseCssValue("letterSpacing", valueString);
+  return [{ property: "letterSpacing", value }];
+};
+const outline = (value) => {
+  return [
+    {
+      property: "outlineWidth",
+      value: { type: "unit", value: 2, unit: "px" }
+    },
+    {
+      property: "outlineStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "outlineColor",
+      value: { type: "keyword", value: "transparent" }
+    },
+    {
+      property: "outlineOffset",
+      value: { type: "unit", value: 2, unit: "px" }
+    }
+  ];
+};
+const textSizes = [
+  "sm",
+  "base",
+  "lg",
+  "xs",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl"
+];
+const isTextSize = (value) => textSizes.includes(value);
+const text = (sizeOrColor) => {
+  if (isTextSize(sizeOrColor)) {
+    const valueArr = theme("fontSize")[sizeOrColor];
+    const [fontSizeString, { lineHeight: lineHeightString }] = valueArr;
+    const fontSize = parseCssValue("fontSize", fontSizeString);
+    const lineHeight = parseCssValue("lineHeight", lineHeightString);
+    return [
+      { property: "fontSize", value: fontSize },
+      { property: "lineHeight", value: lineHeight }
+    ];
+  }
+  const value = parseCssValue("color", theme("colors")[sizeOrColor]);
+  return [
+    {
+      property: "color",
+      value
+    }
+  ];
+};
+const weights = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+const font = (weight) => {
+  return [
+    {
+      property: "fontWeight",
+      value: { type: "keyword", value: weights[weight] }
+    }
+  ];
+};
+const whitespace = (value) => {
+  return [
+    {
+      property: "whiteSpace",
+      value: { type: "keyword", value }
+    }
+  ];
+};
+const shadow = (shadowSize) => {
+  const valueString = theme("boxShadow")[shadowSize];
+  const value = parseBoxShadow(valueString);
+  return [
+    {
+      property: "boxShadow",
+      value
+    }
+  ];
+};
+const ring = (ringColor, ringWidth, ringOffsetColor = "background", ringOffsetWidth = 0, inset2 = "") => {
+  const ringWidthUnits = theme("ringWidth")[ringWidth];
+  const ringOffsetWidthUnits = theme("ringOffsetWidth")[ringOffsetWidth];
+  const ringColorRgb = theme("colors")[ringColor];
+  const ringOffsetColorRgb = theme("colors")[ringOffsetColor];
+  const ringOffsetShadow = `${inset2} 0 0 0 ${ringOffsetWidthUnits} ${ringOffsetColorRgb}`;
+  const ringWidthParsed = parseFloat(ringWidthUnits);
+  const ringOffsetWidthParsed = parseFloat(ringOffsetWidthUnits);
+  const ringShadow = `${inset2} 0 0 0 ${ringWidthParsed + ringOffsetWidthParsed}px ${ringColorRgb}`;
+  const value = parseBoxShadow(`${ringOffsetShadow}, ${ringShadow}`);
+  return [
+    {
+      property: "boxShadow",
+      value
+    }
+  ];
+};
+const pointerEvents = (value) => {
+  return [{ property: "pointerEvents", value: { type: "keyword", value } }];
+};
+const transition = (value) => {
+  if (value === "none") {
+    return [
+      {
+        property: "transitionProperty",
+        value: { type: "keyword", value: "all" }
+      }
+    ];
+  }
+  return [
+    {
+      property: "transitionProperty",
+      value: { type: "keyword", value: "all" }
+    },
+    {
+      property: "transitionTimingFunction",
+      value: { type: "unparsed", value: "cubic-bezier(0.4, 0, 0.2, 1)" }
+    },
+    {
+      property: "transitionDuration",
+      value: { type: "unparsed", value: "150ms" }
+    }
+  ];
+};
+const hover = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":hover"
+  }));
+};
+const focus = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":focus"
+  }));
+};
+const focusVisible = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":focus-visible"
+  }));
+};
+const disabled = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":disabled"
+  }));
+};
+const state = (value, state2) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: state2
+  }));
+};
+export {
+  absolute,
+  backdropBlur,
+  bg,
+  border,
+  bottom,
+  disabled,
+  fixed,
+  flex,
+  focus,
+  focusVisible,
+  font,
+  gap,
+  grid,
+  grow,
+  h,
+  hover,
+  inlineFlex,
+  inset,
+  items,
+  justify,
+  leading,
+  left,
+  m,
+  maxW,
+  mb,
+  ml,
+  mr,
+  mt,
+  mx,
+  my,
+  opacity,
+  outline,
+  overflow,
+  p,
+  pointerEvents,
+  px,
+  py,
+  relative,
+  right,
+  ring,
+  rounded,
+  shadow,
+  state,
+  text,
+  top,
+  tracking,
+  transition,
+  w,
+  whitespace,
+  z
+};