@webstudio-is/sdk-components-react 0.83.0 → 0.84.0

package/lib/theme/tailwind-classes.js

@@ -1,419 +0,0 @@
-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 mx = (margin) => {
-  const key = `${margin}`;
-  const valueString = theme("margin")?.[key] ?? "0";
-  const value = parseCssValue("marginLeft", valueString);
-  return [
-    { property: "marginLeft", value },
-    { property: "marginRight", value }
-  ];
-};
-const my = (margin) => {
-  const key = `${margin}`;
-  const valueString = theme("margin")[key];
-  const value = parseCssValue("marginTop", valueString);
-  return [
-    { property: "marginTop", value },
-    { property: "marginBottom", value }
-  ];
-};
-const m = (margin) => {
-  return [...mx(margin), ...my(margin)];
-};
-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 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 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 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 hover = (value) => {
-  return value.map((decl) => ({
-    ...decl,
-    state: ":hover"
-  }));
-};
-const focus = (value) => {
-  return value.map((decl) => ({
-    ...decl,
-    state: ":focus"
-  }));
-};
-export {
-  absolute,
-  backdropBlur,
-  bg,
-  border,
-  bottom,
-  fixed,
-  flex,
-  focus,
-  gap,
-  grid,
-  h,
-  hover,
-  inset,
-  items,
-  justify,
-  leading,
-  left,
-  m,
-  maxW,
-  mx,
-  my,
-  opacity,
-  outline,
-  overflow,
-  p,
-  px,
-  py,
-  relative,
-  right,
-  ring,
-  rounded,
-  shadow,
-  text,
-  top,
-  tracking,
-  w,
-  z
-};

package/lib/theme/tailwind-colors.js

@@ -1,13 +0,0 @@
-const colors = {
-  transparent: "transparent",
-  current: "currentColor",
-  popover: "rgb(255, 255, 255)",
-  popoverForeground: "rgb(2, 8, 23)",
-  border: "rgb(226, 232, 240)",
-  background: "rgb(255, 255, 255)",
-  ring: "rgb(148, 163, 184)",
-  mutedForeground: "rgb(100, 116, 139)"
-};
-export {
-  colors
-};

package/lib/theme/tailwind-theme.js

@@ -1,16 +0,0 @@
-import defaultTheme from "tailwindcss/defaultTheme";
-import { colors } from "./tailwind-colors";
-const localTheme = { ...defaultTheme };
-const theme = (name) => {
-  const value = localTheme?.[name];
-  if (typeof value === "function") {
-    return value({ theme, colors, breakpoints: () => ({}) });
-  }
-  return value;
-};
-localTheme.colors = colors;
-localTheme.borderRadius = { ...theme("borderRadius") };
-localTheme.borderRadius.DEFAULT = "0.5rem";
-export {
-  theme
-};

package/lib/types/__generated__/radix-dialog.props.d.ts

@@ -1,8 +0,0 @@
-import type { PropMeta } from "@webstudio-is/generate-arg-types";
-export declare const propsDialog: Record<string, PropMeta>;
-export declare const propsDialogTrigger: Record<string, PropMeta>;
-export declare const propsDialogOverlay: Record<string, PropMeta>;
-export declare const propsDialogContent: Record<string, PropMeta>;
-export declare const propsDialogClose: Record<string, PropMeta>;
-export declare const propsDialogTitle: Record<string, PropMeta>;
-export declare const propsDialogDescription: Record<string, PropMeta>;

package/lib/types/__generated__/radix-popover.props.d.ts

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

package/lib/types/__generated__/radix-tooltip.props.d.ts

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

package/lib/types/radix-dialog.d.ts

@@ -1,26 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { type WebstudioAttributes } from "@webstudio-is/react-sdk";
-import { type ReactNode } from "react";
-/**
- * We don't have support for boolean or undefined nor in UI not at Data variables,
- * instead of binding on "open" prop we bind variable on a isOpen prop to be able to show Dialog in the builder
- **/
-type BuilderDialogProps = {
-    isOpen: "initial" | "open" | "closed";
-};
-export declare const Dialog: import("react").ForwardRefExoticComponent<WebstudioAttributes & DialogPrimitive.DialogProps & BuilderDialogProps & import("react").RefAttributes<HTMLDivElement>>;
-/**
- * We're not exposing the 'asChild' property for the Trigger.
- * Instead, we're enforcing 'asChild=true' for the Trigger and making it style-less.
- * This avoids situations where the Trigger inadvertently passes all styles to its child,
- * which would prevent us from displaying styles properly in the builder.
- */
-export declare const DialogTrigger: import("react").ForwardRefExoticComponent<WebstudioAttributes & {
-    children: ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DialogOverlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const DialogDescription: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
-export {};

package/lib/types/radix-dialog.ws.d.ts

@@ -1,23 +0,0 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
-export declare const metaDialogTrigger: WsComponentMeta;
-export declare const metaDialogContent: WsComponentMeta;
-export declare const metaDialogOverlay: WsComponentMeta;
-export declare const metaDialogTitle: WsComponentMeta;
-export declare const metaDialogDescription: WsComponentMeta;
-export declare const metaDialogClose: WsComponentMeta;
-/**
- * Styles source without animations:
- * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/dialog.tsx
- *
- * Attributions
- * MIT License
- * Copyright (c) 2023 shadcn
- **/
-export declare const metaDialog: WsComponentMeta;
-export declare const propsMetaDialog: WsComponentPropsMeta;
-export declare const propsMetaDialogTrigger: WsComponentPropsMeta;
-export declare const propsMetaDialogContent: WsComponentPropsMeta;
-export declare const propsMetaDialogOverlay: WsComponentPropsMeta;
-export declare const propsMetaDialogClose: WsComponentPropsMeta;
-export declare const propsMetaDialogTitle: WsComponentPropsMeta;
-export declare const propsMetaDialogDescription: WsComponentPropsMeta;

package/lib/types/radix-popover.d.ts

@@ -1,22 +0,0 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { type WebstudioAttributes } from "@webstudio-is/react-sdk";
-import { type ReactNode } from "react";
-/**
- * We don't have support for boolean or undefined nor in UI not at Data variables,
- * instead of binding on "open" prop we bind variable on a isOpen prop to be able to show Popover in the builder
- **/
-type BuilderPopoverProps = {
-    isOpen: "initial" | "open" | "closed";
-};
-export declare const Popover: import("react").ForwardRefExoticComponent<WebstudioAttributes & PopoverPrimitive.PopoverProps & BuilderPopoverProps & import("react").RefAttributes<HTMLDivElement>>;
-/**
- * We're not exposing the 'asChild' property for the Trigger.
- * Instead, we're enforcing 'asChild=true' for the Trigger and making it style-less.
- * This avoids situations where the Trigger inadvertently passes all styles to its child,
- * which would prevent us from displaying styles properly in the builder.
- */
-export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<WebstudioAttributes & {
-    children: ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/lib/types/radix-popover.ws.d.ts

@@ -1,15 +0,0 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
-export declare const metaPopoverTrigger: WsComponentMeta;
-export declare const metaPopoverContent: WsComponentMeta;
-/**
- * Styles source without animations:
- * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/popover.tsx
- *
- * Attributions
- * MIT License
- * Copyright (c) 2023 shadcn
- **/
-export declare const metaPopover: WsComponentMeta;
-export declare const propsMetaPopover: WsComponentPropsMeta;
-export declare const propsMetaPopoverTrigger: WsComponentPropsMeta;
-export declare const propsMetaPopoverContent: WsComponentPropsMeta;

package/lib/types/radix-tooltip.d.ts

@@ -1,22 +0,0 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { type WebstudioAttributes } from "@webstudio-is/react-sdk";
-import { type ReactNode } from "react";
-/**
- * We don't have support for boolean or undefined nor in UI not at Data variables,
- * instead of binding on "open" prop we bind variable on a isOpen prop to be able to show Tooltip in the builder
- **/
-type BuilderTooltipProps = {
-    isOpen: "initial" | "open" | "closed";
-};
-export declare const Tooltip: import("react").ForwardRefExoticComponent<WebstudioAttributes & TooltipPrimitive.TooltipProps & BuilderTooltipProps & import("react").RefAttributes<HTMLDivElement>>;
-/**
- * We're not exposing the 'asChild' property for the Trigger.
- * Instead, we're enforcing 'asChild=true' for the Trigger and making it style-less.
- * This avoids situations where the Trigger inadvertently passes all styles to its child,
- * which would prevent us from displaying styles properly in the builder.
- */
-export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<WebstudioAttributes & {
-    children: ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TooltipContent: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/lib/types/radix-tooltip.ws.d.ts

@@ -1,15 +0,0 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
-export declare const metaTooltipTrigger: WsComponentMeta;
-export declare const metaTooltipContent: WsComponentMeta;
-/**
- * Styles source without animations:
- * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/tooltip.tsx
- *
- * Attributions
- * MIT License
- * Copyright (c) 2023 shadcn
- **/
-export declare const metaTooltip: WsComponentMeta;
-export declare const propsMetaTooltip: WsComponentPropsMeta;
-export declare const propsMetaTooltipTrigger: WsComponentPropsMeta;
-export declare const propsMetaTooltipContent: WsComponentPropsMeta;