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

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

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

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" | "colors" | "margin" | "padding" | keyof {
+    animation: Record<"none" | "spin" | "ping" | "pulse" | "bounce", string>;
+    aria: Record<"hidden" | "expanded" | "required" | "disabled" | "busy" | "checked" | "pressed" | "readonly" | "selected", string>;
+    aspectRatio: Record<"auto" | "video" | "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<"top" | "center" | "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<"auto" | "none" | "progress" | "pointer" | "default" | "text" | "context-menu" | "help" | "wait" | "cell" | "crosshair" | "vertical-text" | "alias" | "copy" | "move" | "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<"auto" | "none" | "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<"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<"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<"normal" | "none" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "loose" | "tight" | "snug" | "relaxed", string>;
+    listStyleType: Record<"none" | "disc" | "decimal", 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<"top" | "center" | "right" | "bottom" | "left" | "left-bottom" | "left-top" | "right-bottom" | "right-top", string>;
+    opacity: Record<"0" | "5" | "10" | "100" | "50" | "75" | "90" | "95" | "30" | "60" | "20" | "25" | "40" | "70" | "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" | "60" | "20" | "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<"top" | "center" | "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" | "30" | "20" | "40", string>;
+}>(name: T) => EvaluatedDefaultTheme[T];

package/lib/types/tooltip.d.ts

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

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

@@ -0,0 +1,15 @@
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.83.0",
+  "version": "0.85.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -30,6 +30,12 @@
       "types": "./lib/types/props.d.ts",
       "import": "./lib/props.js",
       "require": "./lib/cjs/props.js"
+    },
+    "./hooks": {
+      "source": "./src/hooks.ts",
+      "types": "./lib/types/hooks.d.ts",
+      "import": "./lib/hooks.js",
+      "require": "./lib/cjs/hooks.js"
     }
   },
   "peerDependencies": {
@@ -38,18 +44,27 @@
   },
   "dependencies": {
     "@radix-ui/react-collapsible": "^1.0.3",
-    "@webstudio-is/generate-arg-types": "^0.83.0",
-    "@webstudio-is/icons": "^0.83.0",
-    "@webstudio-is/react-sdk": "^0.83.0"
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-tooltip": "^1.0.6",
+    "tailwindcss": "^3.3.3",
+    "@webstudio-is/generate-arg-types": "^0.85.0",
+    "@webstudio-is/icons": "^0.85.0",
+    "@webstudio-is/css-data": "^0.85.0",
+    "@webstudio-is/react-sdk": "^0.85.0"
   },
   "devDependencies": {
+    "@storybook/react": "^7.2.1",
     "@types/react": "^18.2.16",
     "@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/tsconfig": "^1.0.6"
+    "@webstudio-is/sdk-components-react": "^0.85.0",
+    "@webstudio-is/storybook-config": "^0.0.0",
+    "@webstudio-is/tsconfig": "^1.0.7"
   },
   "scripts": {
     "dev": "build-package --watch",
@@ -57,6 +72,8 @@
     "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",
-    "checks": "pnpm typecheck"
+    "checks": "pnpm typecheck",
+    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
   }
 }