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

package/lib/theme/tailwind-colors.js

@@ -0,0 +1,15 @@
+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)",
+  foreground: "hsl(222.2 84% 4.9%)",
+  ring: "rgb(148, 163, 184)",
+  mutedForeground: "rgb(100, 116, 139)",
+  muted: `hsl(210 40% 96.1%)`
+};
+export {
+  colors
+};

package/lib/theme/tailwind-theme.js

@@ -0,0 +1,16 @@
+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/tooltip.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import {
+  forwardRef,
+  Children
+} from "react";
+const Tooltip = forwardRef(({ open: openProp, isOpen, ...props }, ref) => {
+  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { open, ...props }) });
+});
+const TooltipTrigger = forwardRef(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
+});
+const TooltipContent = forwardRef(({ sideOffset = 4, hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    hideWhenDetached,
+    sideOffset,
+    ...props
+  }
+) }));
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+};

package/lib/tooltip.ws.js

@@ -0,0 +1,117 @@
+import { TooltipIcon, TriggerIcon, ContentIcon } from "@webstudio-is/icons/svg";
+import {
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsTooltip,
+  propsTooltipContent,
+  propsTooltipTrigger
+} from "./__generated__/tooltip.props";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+const presetStyle = {
+  div
+};
+const metaTooltipTrigger = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  label: "Tooltip Trigger",
+  icon: TriggerIcon,
+  stylable: false
+};
+const metaTooltipContent = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  presetStyle,
+  label: "Tooltip Content",
+  icon: ContentIcon
+};
+const metaTooltip = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Tooltip",
+  icon: TooltipIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Tooltip",
+      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" }
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "isOpen",
+          dataSourceName: "isOpen"
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "TooltipTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              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
+           **/
+          styles: [
+            tc.z(50),
+            tc.overflow("hidden"),
+            tc.rounded("md"),
+            tc.border(),
+            tc.bg("popover"),
+            tc.px(3),
+            tc.py(1.5),
+            tc.text("sm"),
+            tc.text("popoverForeground"),
+            tc.shadow("md")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "The text you can edit" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const propsMetaTooltip = {
+  props: propsTooltip,
+  initialProps: ["isOpen", "delayDuration", "disableHoverableContent"]
+};
+const propsMetaTooltipTrigger = {
+  props: propsTooltipTrigger
+};
+const propsMetaTooltipContent = {
+  props: propsTooltipContent,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+};
+export {
+  metaTooltip,
+  metaTooltipContent,
+  metaTooltipTrigger,
+  propsMetaTooltip,
+  propsMetaTooltipContent,
+  propsMetaTooltipTrigger
+};

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

@@ -0,0 +1,8 @@
+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__/popover.props.d.ts

@@ -0,0 +1,4 @@
+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__/sheet.props.d.ts

@@ -0,0 +1,8 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const propsSheet: Record<string, PropMeta>;
+export declare const propsSheetTrigger: Record<string, PropMeta>;
+export declare const propsSheetOverlay: Record<string, PropMeta>;
+export declare const propsSheetClose: Record<string, PropMeta>;
+export declare const propsSheetTitle: Record<string, PropMeta>;
+export declare const propsSheetDescription: Record<string, PropMeta>;
+export declare const propsSheetContent: Record<string, PropMeta>;

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

@@ -0,0 +1,5 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const propsTabs: Record<string, PropMeta>;
+export declare const propsTabsList: Record<string, PropMeta>;
+export declare const propsTabsTrigger: Record<string, PropMeta>;
+export declare const propsTabsContent: Record<string, PropMeta>;

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

@@ -0,0 +1,4 @@
+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/collapsible.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode, type ForwardRefExoticComponent, type ComponentPropsWithRef } from "react";
 import { Root, Content } from "@radix-ui/react-collapsible";
-import { type WebstudioAttributes } from "@webstudio-is/react-sdk";
+import { type Hook } from "@webstudio-is/react-sdk";
 export declare const Collapsible: ForwardRefExoticComponent<Omit<ComponentPropsWithRef<typeof Root>, "defaultOpen" | "asChild">>;
 /**
  * We're not exposing the 'asChild' property for the Trigger.
@@ -8,7 +8,8 @@ export declare const Collapsible: ForwardRefExoticComponent<Omit<ComponentPropsW
  * 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 CollapsibleTrigger: ForwardRefExoticComponent<WebstudioAttributes & {
+export declare const CollapsibleTrigger: ForwardRefExoticComponent<{
     children: ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const CollapsibleContent: ForwardRefExoticComponent<Omit<ComponentPropsWithRef<typeof Content>, "asChild">>;
+export declare const hooksCollapsible: Hook;

package/lib/types/components.d.ts

@@ -1 +1,6 @@
 export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "./collapsible";
+export { Dialog, DialogTrigger, DialogOverlay, DialogContent, DialogClose, DialogTitle, DialogDescription, } from "./dialog";
+export { Popover, PopoverTrigger, PopoverContent } from "./popover";
+export { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
+export { Sheet, SheetTrigger, SheetOverlay, SheetContent, SheetClose, SheetTitle, SheetDescription, } from "./sheet";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";

package/lib/types/dialog.d.ts

@@ -0,0 +1,25 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+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<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<{
+    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/dialog.ws.d.ts

@@ -0,0 +1,23 @@
+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/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { Hook } from "@webstudio-is/react-sdk";
+export declare const hooks: Hook[];

package/lib/types/metas.d.ts

@@ -1 +1,6 @@
 export { metaCollapsible as Collapsible, metaCollapsibleTrigger as CollapsibleTrigger, metaCollapsibleContent as CollapsibleContent, } from "./collapsible.ws";
+export { metaDialog as Dialog, metaDialogTrigger as DialogTrigger, metaDialogOverlay as DialogOverlay, metaDialogContent as DialogContent, metaDialogClose as DialogClose, metaDialogTitle as DialogTitle, metaDialogDescription as DialogDescription, } from "./dialog.ws";
+export { metaPopover as Popover, metaPopoverTrigger as PopoverTrigger, metaPopoverContent as PopoverContent, } from "./popover.ws";
+export { metaTooltip as Tooltip, metaTooltipTrigger as TooltipTrigger, metaTooltipContent as TooltipContent, } from "./tooltip.ws";
+export { metaSheet as Sheet, metaSheetTrigger as SheetTrigger, metaSheetOverlay as SheetOverlay, metaSheetContent as SheetContent, metaSheetClose as SheetClose, metaSheetTitle as SheetTitle, metaSheetDescription as SheetDescription, } from "./sheet.ws";
+export { metaTabs as Tabs, metaTabsList as TabsList, metaTabsTrigger as TabsTrigger, metaTabsContent as TabsContent, } from "./tabs.ws";

package/lib/types/popover.d.ts

@@ -0,0 +1,21 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+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<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<{
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,15 @@
+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/props.d.ts

@@ -1 +1,6 @@
 export { propsMetaCollapsible as Collapsible, propsMetaCollapsibleTrigger as CollapsibleTrigger, propsMetaCollapsibleContent as CollapsibleContent, } from "./collapsible.ws";
+export { propsMetaDialog as Dialog, propsMetaDialogTrigger as DialogTrigger, propsMetaDialogOverlay as DialogOverlay, propsMetaDialogContent as DialogContent, propsMetaDialogClose as DialogClose, propsMetaDialogTitle as DialogTitle, propsMetaDialogDescription as DialogDescription, } from "./dialog.ws";
+export { propsMetaPopover as Popover, propsMetaPopoverTrigger as PopoverTrigger, propsMetaPopoverContent as PopoverContent, } from "./popover.ws";
+export { propsMetaTooltip as Tooltip, propsMetaTooltipTrigger as TooltipTrigger, propsMetaTooltipContent as TooltipContent, } from "./tooltip.ws";
+export { propsMetaSheet as Sheet, propsMetaSheetTrigger as SheetTrigger, propsMetaSheetOverlay as SheetOverlay, propsMetaSheetContent as SheetContent, propsMetaSheetClose as SheetClose, propsMetaSheetTitle as SheetTitle, propsMetaSheetDescription as SheetDescription, } from "./sheet.ws";
+export { propsMetaTabs as Tabs, propsMetaTabsList as TabsList, propsMetaTabsTrigger as TabsTrigger, propsMetaTabsContent as TabsContent, } from "./tabs.ws";

package/lib/types/sheet.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const Sheet: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogProps & {
+    isOpen: "initial" | "open" | "closed";
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SheetTrigger: import("react").ForwardRefExoticComponent<{
+    children: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SheetOverlay: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SheetClose: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SheetTitle: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const SheetDescription: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const SheetContent: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    tag?: "div" | "nav" | undefined;
+    side?: "top" | "right" | "bottom" | "left" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/lib/types/sheet.ws.d.ts

@@ -0,0 +1,23 @@
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const metaSheetTrigger: WsComponentMeta;
+export declare const metaSheetContent: WsComponentMeta;
+export declare const metaSheetOverlay: WsComponentMeta;
+export declare const metaSheetTitle: WsComponentMeta;
+export declare const metaSheetDescription: WsComponentMeta;
+export declare const metaSheetClose: WsComponentMeta;
+/**
+ * Styles source without animations:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/sheet.tsx
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+export declare const metaSheet: WsComponentMeta;
+export declare const propsMetaSheet: WsComponentPropsMeta;
+export declare const propsMetaSheetTrigger: WsComponentPropsMeta;
+export declare const propsMetaSheetContent: WsComponentPropsMeta;
+export declare const propsMetaSheetOverlay: WsComponentPropsMeta;
+export declare const propsMetaSheetClose: WsComponentPropsMeta;
+export declare const propsMetaSheetTitle: WsComponentPropsMeta;
+export declare const propsMetaSheetDescription: WsComponentPropsMeta;

package/lib/types/tabs.d.ts

@@ -0,0 +1,15 @@
+import { type ForwardRefExoticComponent, type ComponentPropsWithRef, type ReactNode } from "react";
+import { Root } from "@radix-ui/react-tabs";
+export declare const Tabs: ForwardRefExoticComponent<Omit<ComponentPropsWithRef<typeof Root>, "asChild" | "defaultValue">>;
+export declare const TabsList: ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & 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 TabsTrigger: ForwardRefExoticComponent<{
+    value: string;
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "asChild"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/types/tabs.ws.d.ts

@@ -0,0 +1,9 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const metaTabs: WsComponentMeta;
+export declare const metaTabsList: WsComponentMeta;
+export declare const metaTabsTrigger: WsComponentMeta;
+export declare const metaTabsContent: WsComponentMeta;
+export declare const propsMetaTabs: WsComponentPropsMeta;
+export declare const propsMetaTabsList: WsComponentPropsMeta;
+export declare const propsMetaTabsTrigger: WsComponentPropsMeta;
+export declare const propsMetaTabsContent: WsComponentPropsMeta;

package/lib/types/theme/radix-common-types.d.ts

@@ -0,0 +1,84 @@
+import type { colors } from "./tailwind-colors";
+type DefaultTheme = {
+    animation: Record<"none" | "spin" | "ping" | "pulse" | "bounce", string>;
+    aria: Record<"busy" | "checked" | "disabled" | "expanded" | "hidden" | "pressed" | "readonly" | "required" | "selected", string>;
+    aspectRatio: Record<"auto" | "square" | "video", string>;
+    backgroundImage: Record<"none" | "gradient-to-t" | "gradient-to-tr" | "gradient-to-r" | "gradient-to-br" | "gradient-to-b" | "gradient-to-bl" | "gradient-to-l" | "gradient-to-tl", string>;
+    backgroundPosition: Record<"bottom" | "center" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top", string>;
+    backgroundSize: Record<"auto" | "cover" | "contain", string>;
+    blur: Record<"0" | "none" | "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "3xl", string>;
+    borderRadius: Record<"none" | "sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full", string>;
+    borderWidth: Record<"0" | "2" | "4" | "8" | "DEFAULT", string>;
+    boxShadow: Record<"sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "inner" | "none", string>;
+    brightness: Record<"0" | "50" | "75" | "90" | "95" | "100" | "105" | "110" | "125" | "150" | "200", string>;
+    columns: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "auto" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl", string>;
+    content: Record<"none", string>;
+    contrast: Record<"0" | "50" | "75" | "100" | "125" | "150" | "200", string>;
+    cursor: Record<"auto" | "default" | "pointer" | "wait" | "text" | "move" | "help" | "not-allowed" | "none" | "context-menu" | "progress" | "cell" | "crosshair" | "vertical-text" | "alias" | "copy" | "no-drop" | "grab" | "grabbing" | "all-scroll" | "col-resize" | "row-resize" | "n-resize" | "e-resize" | "s-resize" | "w-resize" | "ne-resize" | "nw-resize" | "se-resize" | "sw-resize" | "ew-resize" | "ns-resize" | "nesw-resize" | "nwse-resize" | "zoom-in" | "zoom-out", string>;
+    dropShadow: Record<"sm" | "DEFAULT" | "md" | "lg" | "xl" | "2xl" | "none", string | string[]>;
+    flex: Record<"1" | "auto" | "initial" | "none", string>;
+    flexGrow: Record<"0" | "DEFAULT", string>;
+    flexShrink: Record<"0" | "DEFAULT", string>;
+    fontFamily: Record<"sans" | "serif" | "mono", string[]>;
+    fontSize: Record<"xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl", [
+        string,
+        {
+            lineHeight: string;
+        }
+    ]>;
+    fontWeight: Record<"thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black", string>;
+    gradientColorStopPositions: Record<"0%" | "5%" | "10%" | "15%" | "20%" | "25%" | "30%" | "35%" | "40%" | "45%" | "50%" | "55%" | "60%" | "65%" | "70%" | "75%" | "80%" | "85%" | "90%" | "95%" | "100%", string>;
+    grayscale: Record<"0" | "DEFAULT", string>;
+    gridAutoColumns: Record<"auto" | "min" | "max" | "fr", string>;
+    gridAutoRows: Record<"auto" | "min" | "max" | "fr", string>;
+    gridColumn: Record<"auto" | "span-1" | "span-2" | "span-3" | "span-4" | "span-5" | "span-6" | "span-7" | "span-8" | "span-9" | "span-10" | "span-11" | "span-12" | "span-full", string>;
+    gridColumnEnd: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "auto", string>;
+    gridColumnStart: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "auto", string>;
+    gridRow: Record<"auto" | "span-1" | "span-2" | "span-3" | "span-4" | "span-5" | "span-6" | "span-full", string>;
+    gridRowEnd: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "auto", string>;
+    gridRowStart: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "auto", string>;
+    gridTemplateColumns: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "none", string>;
+    gridTemplateRows: Record<"1" | "2" | "3" | "4" | "5" | "6" | "none", string>;
+    hueRotate: Record<"0" | "15" | "30" | "60" | "90" | "180", string>;
+    invert: Record<"0" | "DEFAULT", string>;
+    letterSpacing: Record<"tighter" | "tight" | "normal" | "wide" | "wider" | "widest", string>;
+    lineHeight: Record<"3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "none" | "tight" | "snug" | "normal" | "relaxed" | "loose", string>;
+    listStyleType: Record<"none" | "disc" | "decimal", string>;
+    listStyleImage: Record<"none", string>;
+    lineClamp: Record<"1" | "2" | "3" | "4" | "5" | "6", string>;
+    minHeight: Record<"0" | "full" | "screen" | "min" | "max" | "fit", string>;
+    minWidth: Record<"0" | "full" | "min" | "max" | "fit", string>;
+    objectPosition: Record<"bottom" | "center" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top", string>;
+    opacity: Record<"0" | "5" | "10" | "20" | "25" | "30" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "95" | "100", string>;
+    order: Record<"1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "first" | "last" | "none", string>;
+    outlineOffset: Record<"0" | "1" | "2" | "4" | "8", string>;
+    outlineWidth: Record<"0" | "1" | "2" | "4" | "8", string>;
+    ringOffsetWidth: Record<"0" | "1" | "2" | "4" | "8", string>;
+    ringWidth: Record<"0" | "1" | "2" | "4" | "8" | "DEFAULT", string>;
+    rotate: Record<"0" | "1" | "2" | "3" | "6" | "12" | "45" | "90" | "180", string>;
+    saturate: Record<"0" | "50" | "100" | "150" | "200", string>;
+    scale: Record<"0" | "50" | "75" | "90" | "95" | "100" | "105" | "110" | "125" | "150", string>;
+    screens: Record<"sm" | "md" | "lg" | "xl" | "2xl", string>;
+    sepia: Record<"0" | "DEFAULT", string>;
+    skew: Record<"0" | "1" | "2" | "3" | "6" | "12", string>;
+    spacing: Record<"0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "px" | "0.5" | "1.5" | "2.5" | "3.5", string>;
+    strokeWidth: Record<"0" | "1" | "2", string>;
+    textDecorationThickness: Record<"0" | "1" | "2" | "4" | "8" | "auto" | "from-font", string>;
+    textUnderlineOffset: Record<"0" | "1" | "2" | "4" | "8" | "auto", string>;
+    transformOrigin: Record<"center" | "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left", string>;
+    transitionDelay: Record<"0" | "75" | "100" | "150" | "200" | "300" | "500" | "700" | "1000", string>;
+    transitionDuration: Record<"0" | "75" | "100" | "150" | "200" | "300" | "500" | "700" | "1000" | "DEFAULT", string>;
+    transitionProperty: Record<"none" | "all" | "DEFAULT" | "colors" | "opacity" | "shadow" | "transform", string>;
+    transitionTimingFunction: Record<"DEFAULT" | "linear" | "in" | "out" | "in-out", string>;
+    willChange: Record<"auto" | "scroll" | "contents" | "transform", string>;
+    zIndex: Record<"0" | "10" | "20" | "30" | "40" | "50" | "auto", string>;
+};
+export type EvaluatedDefaultTheme = DefaultTheme & {
+    padding: DefaultTheme["spacing"];
+    colors: typeof colors;
+    width: DefaultTheme["spacing"] & Record<"full", string>;
+    height: DefaultTheme["spacing"];
+    margin: DefaultTheme["spacing"] & Record<"auto", string>;
+    maxWidth: DefaultTheme["spacing"] & Record<"none" | "0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | "min" | "max" | "fit" | "prose", string>;
+};
+export {};

package/lib/types/theme/tailwind-classes.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Quik and dirty implementation of tailwind classes conversion to webstudio styles.
+ */
+import type { EmbedTemplateStyleDecl } from "@webstudio-is/react-sdk";
+import type { EvaluatedDefaultTheme } from "./radix-common-types";
+export declare const z: (zIndex?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["zIndex"]>) => EmbedTemplateStyleDecl[];
+export declare const overflow: (value: "hidden" | "visible" | "scroll" | "auto") => EmbedTemplateStyleDecl[];
+export declare const rounded: (radius?: keyof EvaluatedDefaultTheme["borderRadius"]) => EmbedTemplateStyleDecl[];
+type StringEnumToNumeric<T extends string> = T extends `${infer Z extends number}` ? Z : never;
+type NonNumeric<T extends string> = T extends `${infer Z extends number}` ? never : T;
+export declare const border: (borderWidth?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["borderWidth"]>) => EmbedTemplateStyleDecl[];
+export declare const px: (padding: StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]> | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>) => EmbedTemplateStyleDecl[];
+export declare const py: (padding: StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]> | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>) => EmbedTemplateStyleDecl[];
+export declare const p: (padding: StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]> | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>) => EmbedTemplateStyleDecl[];
+declare const marginProperty: (property: "marginTop" | "marginRight" | "marginBottom" | "marginLeft") => (margin: StringEnumToNumeric<keyof EvaluatedDefaultTheme["margin"]> | NonNumeric<keyof EvaluatedDefaultTheme["margin"]>) => EmbedTemplateStyleDecl[];
+export declare const ml: ReturnType<typeof marginProperty>;
+export declare const mr: ReturnType<typeof marginProperty>;
+export declare const mt: ReturnType<typeof marginProperty>;
+export declare const mb: ReturnType<typeof marginProperty>;
+export declare const mx: ReturnType<typeof marginProperty>;
+export declare const my: ReturnType<typeof marginProperty>;
+export declare const m: ReturnType<typeof marginProperty>;
+export declare const w: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["width"]> | NonNumeric<keyof EvaluatedDefaultTheme["width"]>) => EmbedTemplateStyleDecl[];
+export declare const h: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["height"]> | NonNumeric<keyof EvaluatedDefaultTheme["height"]>) => EmbedTemplateStyleDecl[];
+export declare const opacity: (opacity: StringEnumToNumeric<keyof EvaluatedDefaultTheme["opacity"]>) => EmbedTemplateStyleDecl[];
+export declare const maxW: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["maxWidth"]> | NonNumeric<keyof EvaluatedDefaultTheme["maxWidth"]>) => EmbedTemplateStyleDecl[];
+export declare const top: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
+export declare const right: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
+export declare const bottom: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
+export declare const left: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
+export declare const inset: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
+export declare const backdropBlur: (blur: keyof EvaluatedDefaultTheme["blur"]) => EmbedTemplateStyleDecl[];
+export declare const bg: (color: keyof EvaluatedDefaultTheme["colors"], alpha?: number) => EmbedTemplateStyleDecl[];
+export declare const fixed: () => EmbedTemplateStyleDecl[];
+export declare const relative: () => EmbedTemplateStyleDecl[];
+export declare const absolute: () => EmbedTemplateStyleDecl[];
+export declare const grid: () => EmbedTemplateStyleDecl[];
+declare const alignItems: {
+    readonly start: "flex-start";
+    readonly end: "flex-end";
+    readonly center: "center";
+    readonly baseline: "baseline";
+    readonly stretch: "stretch";
+};
+type AlignItems = keyof typeof alignItems;
+export declare const items: (alignItemsParam: AlignItems) => EmbedTemplateStyleDecl[];
+declare const justifyContent: {
+    readonly start: "flex-start";
+    readonly end: "flex-end";
+    readonly center: "center";
+    readonly between: "space-between";
+    readonly around: "space-around";
+    readonly evenly: "space-evenly";
+    readonly stretch: "stretch";
+};
+type JustifyContent = keyof typeof justifyContent;
+export declare const justify: (justifyContentParam: JustifyContent) => EmbedTemplateStyleDecl[];
+export declare const inlineFlex: () => EmbedTemplateStyleDecl[];
+declare const flexDirection: {
+    readonly row: "row";
+    readonly col: "column";
+};
+type FlexDirection = keyof typeof flexDirection;
+export declare const flex: (flexParam?: FlexDirection) => EmbedTemplateStyleDecl[];
+export declare const grow: () => EmbedTemplateStyleDecl[];
+export declare const gap: (gapValue: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
+export declare const leading: (lineHeight: StringEnumToNumeric<keyof EvaluatedDefaultTheme["lineHeight"]> | NonNumeric<keyof EvaluatedDefaultTheme["lineHeight"]>) => EmbedTemplateStyleDecl[];
+export declare const tracking: (letterSpacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["letterSpacing"]> | NonNumeric<keyof EvaluatedDefaultTheme["letterSpacing"]>) => EmbedTemplateStyleDecl[];
+export declare const outline: (value: "none") => EmbedTemplateStyleDecl[];
+type TextSize = keyof EvaluatedDefaultTheme["fontSize"];
+export declare const text: (sizeOrColor: TextSize | keyof EvaluatedDefaultTheme["colors"]) => EmbedTemplateStyleDecl[];
+export declare const font: (weight: "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black") => EmbedTemplateStyleDecl[];
+export declare const whitespace: (value: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" | "break-spaces") => EmbedTemplateStyleDecl[];
+export declare const shadow: (shadowSize: keyof EvaluatedDefaultTheme["boxShadow"]) => EmbedTemplateStyleDecl[];
+export declare const ring: (ringColor: keyof EvaluatedDefaultTheme["colors"], ringWidth: StringEnumToNumeric<keyof EvaluatedDefaultTheme["ringWidth"]>, ringOffsetColor?: keyof EvaluatedDefaultTheme["colors"], ringOffsetWidth?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["ringOffsetWidth"]>, inset?: "inset" | "") => EmbedTemplateStyleDecl[];
+export declare const pointerEvents: (value: "none" | "auto") => EmbedTemplateStyleDecl[];
+export declare const transition: (value: "none" | "all") => EmbedTemplateStyleDecl[];
+export declare const hover: (value: EmbedTemplateStyleDecl[]) => EmbedTemplateStyleDecl[];
+export declare const focus: (value: EmbedTemplateStyleDecl[]) => EmbedTemplateStyleDecl[];
+export declare const focusVisible: (value: EmbedTemplateStyleDecl[]) => EmbedTemplateStyleDecl[];
+export declare const disabled: (value: EmbedTemplateStyleDecl[]) => EmbedTemplateStyleDecl[];
+export declare const state: (value: EmbedTemplateStyleDecl[], state: string) => EmbedTemplateStyleDecl[];
+export {};