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

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,69 @@
+/**
+ * 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[];
+export declare const mx: (margin: StringEnumToNumeric<keyof EvaluatedDefaultTheme["margin"]> | NonNumeric<keyof EvaluatedDefaultTheme["margin"]>) => EmbedTemplateStyleDecl[];
+export declare const my: (margin: StringEnumToNumeric<keyof EvaluatedDefaultTheme["margin"]> | NonNumeric<keyof EvaluatedDefaultTheme["margin"]>) => EmbedTemplateStyleDecl[];
+export declare const m: (margin: StringEnumToNumeric<keyof EvaluatedDefaultTheme["margin"]> | NonNumeric<keyof EvaluatedDefaultTheme["margin"]>) => EmbedTemplateStyleDecl[];
+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[];
+declare const flexDirection: {
+    readonly row: "row";
+    readonly col: "column";
+};
+type FlexDirection = keyof typeof flexDirection;
+export declare const flex: (flexParam?: FlexDirection) => 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 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 hover: (value: EmbedTemplateStyleDecl[]) => EmbedTemplateStyleDecl[];
+export declare const focus: (value: EmbedTemplateStyleDecl[]) => EmbedTemplateStyleDecl[];
+export {};

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

@@ -0,0 +1,19 @@
+/**
+ * Variables source:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/themes.ts#L1
+ * https://github.com/shadcn-ui/ui/blob/5e172fc34fdf015aa0d141f52cc8c082b8ae6613/apps/www/scripts/build-registry.ts#L220
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+export declare const colors: {
+    readonly transparent: "transparent";
+    readonly current: "currentColor";
+    readonly popover: "rgb(255, 255, 255)";
+    readonly popoverForeground: "rgb(2, 8, 23)";
+    readonly border: "rgb(226, 232, 240)";
+    readonly background: "rgb(255, 255, 255)";
+    readonly ring: "rgb(148, 163, 184)";
+    readonly mutedForeground: "rgb(100, 116, 139)";
+};

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

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

package/lib/types/vimeo-preview-image.d.ts

@@ -49,19 +49,23 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+    'aria-braillelabel'?: string | undefined;
+    'aria-brailleroledescription'?: string | undefined;
     'aria-busy'?: (boolean | "true" | "false") | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
+    'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
     'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined;
+    'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
     'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
@@ -91,6 +95,7 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
+    'aria-rowindextext'?: string | undefined;
     'aria-rowspan'?: number | undefined;
     'aria-selected'?: (boolean | "true" | "false") | undefined;
     'aria-setsize'?: number | undefined;

package/lib/vimeo-play-button.ws.js

@@ -4,6 +4,7 @@ import {
 import { props } from "./__generated__/vimeo-play-button.props";
 import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import { button } from "@webstudio-is/react-sdk/css-normalize";
+import { defaultTag } from "./vimeo-play-button";
 const presetStyle = {
   button
 };

package/lib/vimeo-preview-image.js

@@ -3,7 +3,7 @@ import {
   forwardRef,
   useContext
 } from "react";
-import { Image } from "./image";
+import { Image, defaultTag } from "./image";
 import { VimeoContext } from "./vimeo";
 const base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
 const VimeoPreviewImage = forwardRef(({ src, ...rest }, ref) => {

package/lib/vimeo-preview-image.ws.js

@@ -1,3 +1,5 @@
+import {
+} from "@webstudio-is/react-sdk";
 import {
   propsOverrides as imagePropsOverrides,
   propsMeta as imagePropsMeta,

package/lib/vimeo.ws.js

@@ -4,6 +4,7 @@ import {
 } from "@webstudio-is/react-sdk";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
 import { props } from "./__generated__/vimeo.props";
+import { Vimeo } from "./vimeo";
 const presetStyle = {
   div
 };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.82.0",
+  "version": "0.83.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
-  "license": "MIT",
+  "license": "AGPL-3.0-or-later",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -37,22 +37,27 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@react-aria/utils": "^3.13.3",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "@react-aria/utils": "^3.18.0",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-vars": "^0.82.0",
-    "@webstudio-is/generate-arg-types": "^0.82.0",
-    "@webstudio-is/icons": "^0.82.0",
-    "@webstudio-is/image": "^0.82.0",
-    "@webstudio-is/react-sdk": "^0.82.0"
+    "tailwindcss": "^3.3.3",
+    "@webstudio-is/css-data": "^0.83.0",
+    "@webstudio-is/css-vars": "^0.83.0",
+    "@webstudio-is/generate-arg-types": "^0.83.0",
+    "@webstudio-is/icons": "^0.83.0",
+    "@webstudio-is/image": "^0.83.0",
+    "@webstudio-is/react-sdk": "^0.83.0"
   },
   "devDependencies": {
-    "@storybook/react": "^7.0.26",
-    "@types/react": "^18.0.35",
-    "@types/react-dom": "^18.0.11",
+    "@storybook/react": "^7.1.0",
+    "@types/react": "^18.2.16",
+    "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "5.1.3",
+    "typescript": "5.1.6",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.6"
@@ -62,7 +67,7 @@
     "build": "build-package",
     "build:args": "generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
+    "typecheck": "tsc",
     "checks": "pnpm typecheck",
     "storybook:dev": "storybook dev -p 6006",
     "storybook:build": "storybook build"