@webstudio-is/sdk-components-react-radix 0.90.0 → 0.92.0

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

@@ -2,17 +2,17 @@
  * Quik and dirty implementation of tailwind classes conversion to webstudio styles.
  */
 import type { EmbedTemplateStyleDecl } from "@webstudio-is/react-sdk";
-import { type StyleProperty } from "@webstudio-is/css-data";
-import type { EvaluatedDefaultTheme } from "./radix-common-types";
+import type { StyleProperty } from "@webstudio-is/css-engine";
+import * as theme from "./__generated__/tailwind-theme";
 export declare const property: (property: StyleProperty, value: string) => EmbedTemplateStyleDecl;
-export declare const z: (zIndex?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["zIndex"]>) => EmbedTemplateStyleDecl[];
+export declare const z: (value: StringEnumToNumeric<keyof typeof theme.zIndex>) => EmbedTemplateStyleDecl[];
 export declare const overflow: (value: "hidden" | "visible" | "scroll" | "auto") => EmbedTemplateStyleDecl[];
-export declare const rounded: (radius?: keyof EvaluatedDefaultTheme["borderRadius"]) => EmbedTemplateStyleDecl[];
+export declare const rounded: (value?: keyof typeof theme.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: (borderWidthOrColor?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["borderWidth"]> | keyof EvaluatedDefaultTheme["colors"]) => EmbedTemplateStyleDecl[];
-export declare const borderB: (borderWidthOrColor?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["borderWidth"]> | keyof EvaluatedDefaultTheme["colors"]) => EmbedTemplateStyleDecl[];
-declare const paddingProperty: (property: "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft") => (padding: StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]> | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>) => EmbedTemplateStyleDecl[];
+export declare const border: (borderWidthOrColor?: StringEnumToNumeric<keyof typeof theme.borderWidth> | keyof typeof theme.colors) => EmbedTemplateStyleDecl[];
+export declare const borderB: (borderWidthOrColor?: StringEnumToNumeric<keyof typeof theme.borderWidth> | keyof typeof theme.colors) => EmbedTemplateStyleDecl[];
+declare const paddingProperty: (property: "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft") => (padding: 0 | "px" | 2 | 4 | 6 | 8 | 1 | 14 | 3 | 5 | 7 | 9 | 10 | 11 | 12 | 16 | 32 | 80 | 0.5 | 1.5 | 2.5 | 3.5 | 20 | 24 | 40 | 60 | 28 | 36 | 48 | 56 | 64 | 72 | 44 | 52 | 96) => EmbedTemplateStyleDecl[];
 export declare const pt: ReturnType<typeof paddingProperty>;
 export declare const pb: ReturnType<typeof paddingProperty>;
 export declare const pl: ReturnType<typeof paddingProperty>;
@@ -20,7 +20,7 @@ export declare const pr: ReturnType<typeof paddingProperty>;
 export declare const px: ReturnType<typeof paddingProperty>;
 export declare const py: ReturnType<typeof paddingProperty>;
 export declare const p: ReturnType<typeof paddingProperty>;
-declare const marginProperty: (property: "marginTop" | "marginRight" | "marginBottom" | "marginLeft") => (margin: StringEnumToNumeric<keyof EvaluatedDefaultTheme["margin"]> | NonNumeric<keyof EvaluatedDefaultTheme["margin"]>) => EmbedTemplateStyleDecl[];
+declare const marginProperty: (property: "marginTop" | "marginRight" | "marginBottom" | "marginLeft") => (margin: 0 | "px" | 2 | 4 | 6 | 8 | 1 | 14 | 3 | "auto" | 5 | 7 | 9 | 10 | 11 | 12 | 16 | 32 | 80 | 0.5 | 1.5 | 2.5 | 3.5 | 20 | 24 | 40 | 60 | 28 | 36 | 48 | 56 | 64 | 72 | 44 | 52 | 96) => EmbedTemplateStyleDecl[];
 export declare const ml: ReturnType<typeof marginProperty>;
 export declare const mr: ReturnType<typeof marginProperty>;
 export declare const mt: ReturnType<typeof marginProperty>;
@@ -28,22 +28,22 @@ 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 minH: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["height"]>) => EmbedTemplateStyleDecl[];
-export declare const opacity: (opacity: StringEnumToNumeric<keyof EvaluatedDefaultTheme["opacity"]>) => EmbedTemplateStyleDecl[];
-export declare const cursor: (cursor: keyof EvaluatedDefaultTheme["cursor"]) => EmbedTemplateStyleDecl[];
-export declare const maxW: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["maxWidth"]> | NonNumeric<keyof EvaluatedDefaultTheme["maxWidth"]>) => EmbedTemplateStyleDecl[];
-export declare const top: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]> | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>) => EmbedTemplateStyleDecl[];
-export declare const right: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]> | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>) => EmbedTemplateStyleDecl[];
-export declare const bottom: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]> | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>) => EmbedTemplateStyleDecl[];
-export declare const left: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]> | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>) => EmbedTemplateStyleDecl[];
-export declare const inset: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["inset"]> | NonNumeric<keyof EvaluatedDefaultTheme["inset"]>) => EmbedTemplateStyleDecl[];
+export declare const w: (spacing: StringEnumToNumeric<keyof typeof theme.width> | NonNumeric<keyof typeof theme.width>) => EmbedTemplateStyleDecl[];
+export declare const h: (spacing: StringEnumToNumeric<keyof typeof theme.height> | NonNumeric<keyof typeof theme.height>) => EmbedTemplateStyleDecl[];
+export declare const minH: (spacing: StringEnumToNumeric<keyof typeof theme.minHeight>) => EmbedTemplateStyleDecl[];
+export declare const opacity: (opacity: 0 | 5 | 10 | 100 | 80 | 75 | 20 | 50 | 25 | 40 | 60 | 30 | 70 | 90 | 95) => EmbedTemplateStyleDecl[];
+export declare const cursor: (cursor: "default" | "auto" | "none" | "progress" | "text" | "copy" | "cell" | "move" | "pointer" | "wait" | "help" | "not-allowed" | "context-menu" | "crosshair" | "vertical-text" | "alias" | "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") => EmbedTemplateStyleDecl[];
+export declare const maxW: (spacing: StringEnumToNumeric<keyof typeof theme.maxWidth> | NonNumeric<keyof typeof theme.maxWidth>) => EmbedTemplateStyleDecl[];
+export declare const top: (spacing: StringEnumToNumeric<keyof typeof theme.inset> | NonNumeric<keyof typeof theme.inset>) => EmbedTemplateStyleDecl[];
+export declare const right: (spacing: StringEnumToNumeric<keyof typeof theme.inset> | NonNumeric<keyof typeof theme.inset>) => EmbedTemplateStyleDecl[];
+export declare const bottom: (spacing: StringEnumToNumeric<keyof typeof theme.inset> | NonNumeric<keyof typeof theme.inset>) => EmbedTemplateStyleDecl[];
+export declare const left: (spacing: StringEnumToNumeric<keyof typeof theme.inset> | NonNumeric<keyof typeof theme.inset>) => EmbedTemplateStyleDecl[];
+export declare const inset: (spacing: StringEnumToNumeric<keyof typeof theme.inset> | NonNumeric<keyof typeof theme.inset>) => EmbedTemplateStyleDecl[];
 export declare const aspect: (value: "auto" | "square" | "video") => EmbedTemplateStyleDecl[];
-export declare const backdropBlur: (blur: keyof EvaluatedDefaultTheme["blur"]) => EmbedTemplateStyleDecl[];
-export declare const list: (listStyle: keyof EvaluatedDefaultTheme["listStyleType"]) => EmbedTemplateStyleDecl[];
-export declare const select: (selectValue: "none") => EmbedTemplateStyleDecl[];
-export declare const bg: (color: keyof EvaluatedDefaultTheme["colors"], alpha?: number) => EmbedTemplateStyleDecl[];
+export declare const backdropBlur: (blur: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "DEFAULT" | "inner") => EmbedTemplateStyleDecl[];
+export declare const list: (listStyle: keyof typeof theme.listStyleType) => EmbedTemplateStyleDecl[];
+export declare const select: (_selectValue: "none") => EmbedTemplateStyleDecl[];
+export declare const bg: (color: keyof typeof theme.colors, alpha?: number) => EmbedTemplateStyleDecl[];
 export declare const fixed: () => EmbedTemplateStyleDecl[];
 export declare const relative: () => EmbedTemplateStyleDecl[];
 export declare const absolute: () => EmbedTemplateStyleDecl[];
@@ -79,20 +79,20 @@ type FlexSizing = 1 | "auto" | "initial" | "none";
 export declare const flex: (flexParam?: FlexDirection | FlexSizing) => EmbedTemplateStyleDecl[];
 export declare const grow: () => EmbedTemplateStyleDecl[];
 export declare const shrink: (value: number) => EmbedTemplateStyleDecl[];
-export declare const gap: (gapValue: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
-export declare const lineClamp: (lineClampValue: StringEnumToNumeric<keyof EvaluatedDefaultTheme["lineClamp"]>) => 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 gap: (gapValue: StringEnumToNumeric<keyof typeof theme.spacing>) => EmbedTemplateStyleDecl[];
+export declare const lineClamp: (lineClampValue: StringEnumToNumeric<keyof typeof theme.lineClamp>) => EmbedTemplateStyleDecl[];
+export declare const leading: (lineHeight: 4 | 6 | 8 | "normal" | 3 | "none" | 5 | 7 | 9 | 10 | "tight" | "snug" | "relaxed" | "loose") => EmbedTemplateStyleDecl[];
+export declare const tracking: (letterSpacing: "normal" | "tight" | "tighter" | "wide" | "wider" | "widest") => EmbedTemplateStyleDecl[];
+export declare const outline: (_value: "none") => EmbedTemplateStyleDecl[];
+type TextSize = keyof typeof theme.fontSize;
+export declare const text: (sizeOrColor: TextSize | keyof typeof theme.colors) => EmbedTemplateStyleDecl[];
 export declare const noUnderline: () => EmbedTemplateStyleDecl[];
 export declare const underline: () => EmbedTemplateStyleDecl[];
-export declare const underlineOffset: (offset: StringEnumToNumeric<keyof EvaluatedDefaultTheme["textUnderlineOffset"]>) => EmbedTemplateStyleDecl[];
+export declare const underlineOffset: (offset: StringEnumToNumeric<keyof typeof theme.textUnderlineOffset>) => 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 shadow: (shadowSize: keyof typeof theme.boxShadow) => EmbedTemplateStyleDecl[];
+export declare const ring: (ringColor: keyof typeof theme.colors, ringWidth: 0 | 2 | 4 | 8 | 1, ringOffsetColor?: keyof typeof theme.colors, ringOffsetWidth?: 0 | 2 | 4 | 8 | 1) => EmbedTemplateStyleDecl[];
 export declare const pointerEvents: (value: "none" | "auto") => EmbedTemplateStyleDecl[];
 export declare const transition: (value: "none" | "all" | "transform") => EmbedTemplateStyleDecl[];
 export declare const duration: (ms: number) => EmbedTemplateStyleDecl[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.90.0",
+  "version": "0.92.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -10,32 +10,28 @@
   "sideEffects": false,
   "files": [
     "lib/*",
-    "src/*"
+    "!*.{test,stories}.*"
   ],
   "exports": {
     ".": {
       "source": "./src/components.ts",
       "types": "./lib/types/components.d.ts",
-      "import": "./lib/components.js",
-      "require": "./lib/cjs/components.js"
+      "import": "./lib/components.js"
     },
     "./metas": {
       "source": "./src/metas.ts",
       "types": "./lib/types/metas.d.ts",
-      "import": "./lib/metas.js",
-      "require": "./lib/cjs/metas.js"
+      "import": "./lib/metas.js"
     },
     "./props": {
       "source": "./src/props.ts",
       "types": "./lib/types/props.d.ts",
-      "import": "./lib/props.js",
-      "require": "./lib/cjs/props.js"
+      "import": "./lib/props.js"
     },
     "./hooks": {
       "source": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",
-      "import": "./lib/hooks.js",
-      "require": "./lib/cjs/hooks.js"
+      "import": "./lib/hooks.js"
     }
   },
   "peerDependencies": {
@@ -55,28 +51,29 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "tailwindcss": "^3.3.3",
-    "@webstudio-is/css-data": "^0.90.0",
-    "@webstudio-is/generate-arg-types": "^0.90.0",
-    "@webstudio-is/icons": "^0.90.0",
-    "@webstudio-is/react-sdk": "^0.90.0"
+    "@webstudio-is/css-engine": "^0.92.0",
+    "@webstudio-is/icons": "^0.92.0",
+    "@webstudio-is/react-sdk": "^0.92.0"
   },
   "devDependencies": {
-    "@storybook/react": "^7.2.1",
-    "@types/react": "^18.2.20",
+    "@storybook/react": "^7.4.0",
+    "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.1.6",
-    "@webstudio-is/scripts": "^0.0.0",
-    "@webstudio-is/sdk-components-react": "^0.90.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2",
+    "@webstudio-is/css-data": "^0.92.0",
+    "@webstudio-is/generate-arg-types": "^0.92.0",
+    "@webstudio-is/sdk-components-react": "^0.92.0",
     "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.7"
   },
   "scripts": {
-    "dev": "build-package --watch",
-    "build": "build-package",
-    "build:args": "generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' -e asChild -e modal -e defaultValue -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
+    "dev": "pnpm build --watch",
+    "build": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib",
+    "build:args": "NODE_OPTIONS=--conditions=source generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' -e asChild -e modal -e defaultValue -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
+    "build:tailwind": "tsx scripts/generate-tailwind-theme.ts && prettier --write src/theme/__generated__",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc",
     "checks": "pnpm typecheck",