@webstudio-is/sdk-components-react-radix 0.195.0 → 0.197.0

package/lib/types/shared/theme.d.ts

@@ -0,0 +1,212 @@
+export declare const fontSize: {
+    readonly sm: "0.875rem";
+    readonly lg: "1.125rem";
+};
+export declare const fontSizeLineHeight: {
+    readonly sm: "1.25rem";
+    readonly lg: "1.75rem";
+};
+export declare const lineHeight: {
+    readonly none: "1";
+    readonly snug: "1.375";
+};
+export declare const weights: {
+    readonly medium: "500";
+};
+export declare const letterSpacing: {
+    readonly tight: "-0.025em";
+};
+export declare const spacing: {
+    readonly "0": "0px";
+    readonly "1": "0.25rem";
+    readonly "2": "0.5rem";
+    readonly "3": "0.75rem";
+    readonly "4": "1rem";
+    readonly "5": "1.25rem";
+    readonly "6": "1.5rem";
+    readonly "7": "1.75rem";
+    readonly "8": "2rem";
+    readonly "9": "2.25rem";
+    readonly "10": "2.5rem";
+    readonly "11": "2.75rem";
+    readonly "12": "3rem";
+    readonly "14": "3.5rem";
+    readonly "16": "4rem";
+    readonly "20": "5rem";
+    readonly "24": "6rem";
+    readonly "28": "7rem";
+    readonly "32": "8rem";
+    readonly "36": "9rem";
+    readonly "40": "10rem";
+    readonly "44": "11rem";
+    readonly "48": "12rem";
+    readonly "52": "13rem";
+    readonly "56": "14rem";
+    readonly "60": "15rem";
+    readonly "64": "16rem";
+    readonly "72": "18rem";
+    readonly "80": "20rem";
+    readonly "96": "24rem";
+    readonly px: "1px";
+    readonly "0.5": "0.125rem";
+    readonly "1.5": "0.375rem";
+    readonly "2.5": "0.625rem";
+    readonly "3.5": "0.875rem";
+};
+export declare const width: {
+    readonly full: "100%";
+    readonly "0": "0px";
+    readonly "1": "0.25rem";
+    readonly "2": "0.5rem";
+    readonly "3": "0.75rem";
+    readonly "4": "1rem";
+    readonly "5": "1.25rem";
+    readonly "6": "1.5rem";
+    readonly "7": "1.75rem";
+    readonly "8": "2rem";
+    readonly "9": "2.25rem";
+    readonly "10": "2.5rem";
+    readonly "11": "2.75rem";
+    readonly "12": "3rem";
+    readonly "14": "3.5rem";
+    readonly "16": "4rem";
+    readonly "20": "5rem";
+    readonly "24": "6rem";
+    readonly "28": "7rem";
+    readonly "32": "8rem";
+    readonly "36": "9rem";
+    readonly "40": "10rem";
+    readonly "44": "11rem";
+    readonly "48": "12rem";
+    readonly "52": "13rem";
+    readonly "56": "14rem";
+    readonly "60": "15rem";
+    readonly "64": "16rem";
+    readonly "72": "18rem";
+    readonly "80": "20rem";
+    readonly "96": "24rem";
+    readonly px: "1px";
+    readonly "0.5": "0.125rem";
+    readonly "1.5": "0.375rem";
+    readonly "2.5": "0.625rem";
+    readonly "3.5": "0.875rem";
+};
+export declare const height: {
+    readonly full: "100%";
+    readonly "0": "0px";
+    readonly "1": "0.25rem";
+    readonly "2": "0.5rem";
+    readonly "3": "0.75rem";
+    readonly "4": "1rem";
+    readonly "5": "1.25rem";
+    readonly "6": "1.5rem";
+    readonly "7": "1.75rem";
+    readonly "8": "2rem";
+    readonly "9": "2.25rem";
+    readonly "10": "2.5rem";
+    readonly "11": "2.75rem";
+    readonly "12": "3rem";
+    readonly "14": "3.5rem";
+    readonly "16": "4rem";
+    readonly "20": "5rem";
+    readonly "24": "6rem";
+    readonly "28": "7rem";
+    readonly "32": "8rem";
+    readonly "36": "9rem";
+    readonly "40": "10rem";
+    readonly "44": "11rem";
+    readonly "48": "12rem";
+    readonly "52": "13rem";
+    readonly "56": "14rem";
+    readonly "60": "15rem";
+    readonly "64": "16rem";
+    readonly "72": "18rem";
+    readonly "80": "20rem";
+    readonly "96": "24rem";
+    readonly px: "1px";
+    readonly "0.5": "0.125rem";
+    readonly "1.5": "0.375rem";
+    readonly "2.5": "0.625rem";
+    readonly "3.5": "0.875rem";
+};
+export declare const maxWidth: {
+    readonly "0": "0rem";
+    readonly xs: "20rem";
+    readonly sm: "24rem";
+    readonly md: "28rem";
+    readonly lg: "32rem";
+    readonly xl: "36rem";
+    readonly prose: "65ch";
+};
+export declare const borderWidth: {
+    "0": string;
+    "2": string;
+    "4": string;
+    "8": string;
+    DEFAULT: string;
+};
+export declare const borderRadius: {
+    readonly sm: "0.125rem";
+    readonly md: "0.375rem";
+    readonly full: "9999px";
+};
+export declare const colors: {
+    readonly transparent: "transparent";
+    readonly current: "currentColor";
+    readonly inherit: "inherit";
+    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%)";
+    readonly primary: "rgb(15, 23, 42)";
+    readonly primaryForeground: "hsl(210 40% 98%)";
+    readonly destructive: "rgb(239, 68, 68)";
+    readonly destructiveForeground: "rgb(248, 250, 252)";
+    readonly accent: "rgb(241, 245, 249)";
+    readonly accentForeground: "rgb(15, 23, 42)";
+    readonly input: "rgb(226, 232, 240)";
+    readonly secondary: "rgb(241, 245, 249)";
+    readonly secondaryForeground: "rgb(15, 23, 42)";
+};
+export declare const transition: {
+    readonly all: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly transform: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)";
+};
+export declare const opacity: {
+    readonly "0": "0";
+    readonly "5": "0.05";
+    readonly "10": "0.1";
+    readonly "20": "0.2";
+    readonly "25": "0.25";
+    readonly "30": "0.3";
+    readonly "40": "0.4";
+    readonly "50": "0.5";
+    readonly "60": "0.6";
+    readonly "70": "0.7";
+    readonly "75": "0.75";
+    readonly "80": "0.8";
+    readonly "90": "0.9";
+    readonly "95": "0.95";
+    readonly "100": "1";
+};
+export declare const boxShadow: {
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly ring: string;
+};
+export declare const zIndex: {
+    readonly "0": "0";
+    readonly "10": "10";
+    readonly "20": "20";
+    readonly "30": "30";
+    readonly "40": "40";
+    readonly "50": "50";
+};
+export declare const blur: {
+    sm: string;
+};

package/lib/types/{sheet.ws.d.ts → sheet.template.d.ts}

@@ -1,4 +1,4 @@
-import type { WsComponentMeta } from "@webstudio-is/react-sdk";
+import { type TemplateMeta } from "@webstudio-is/template";
 /**
  * Styles source without animations:
  * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/sheet.tsx
@@ -7,4 +7,4 @@ import type { WsComponentMeta } from "@webstudio-is/react-sdk";
  * MIT License
  * Copyright (c) 2023 shadcn
  **/
-export declare const meta: WsComponentMeta;
+export declare const meta: TemplateMeta;

package/lib/types/switch.template.d.ts

@@ -0,0 +1,2 @@
+import { type TemplateMeta } from "@webstudio-is/template";
+export declare const meta: TemplateMeta;

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

@@ -1,4 +1,4 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
 export declare const metaSwitch: WsComponentMeta;
 export declare const metaSwitchThumb: WsComponentMeta;
 export declare const propsMetaSwitch: WsComponentPropsMeta;

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

@@ -0,0 +1,2 @@
+import { type TemplateMeta } from "@webstudio-is/template";
+export declare const meta: TemplateMeta;

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

@@ -1,4 +1,4 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
 export declare const metaTabs: WsComponentMeta;
 export declare const metaTabsList: WsComponentMeta;
 export declare const metaTabsTrigger: WsComponentMeta;

package/lib/types/templates.d.ts

@@ -0,0 +1,13 @@
+export { meta as Label } from "./label.template";
+export { meta as Tabs } from "./tabs.template";
+export { meta as Sheet } from "./sheet.template";
+export { meta as Dialog } from "./dialog.template";
+export { meta as Switch } from "./switch.template";
+export { meta as Checkbox } from "./checkbox.template";
+export { meta as Collapsible } from "./collapsible.template";
+export { meta as Accordion } from "./accordion.template";
+export { meta as Tooltip } from "./tooltip.template";
+export { meta as Popover } from "./popover.template";
+export { meta as RadioGroup } from "./radio-group.template";
+export { meta as Select } from "./select.template";
+export { meta as NavigationMenu } from "./navigation-menu.template";

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

@@ -0,0 +1,10 @@
+import { type TemplateMeta } from "@webstudio-is/template";
+/**
+ * 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 meta: TemplateMeta;

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

@@ -1,14 +1,6 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.195.0",
+  "version": "0.197.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -32,6 +32,11 @@
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",
       "import": "./lib/hooks.js"
+    },
+    "./templates": {
+      "webstudio": "./src/templates.ts",
+      "types": "./lib/types/templates.d.ts",
+      "import": "./lib/templates.js"
     }
   },
   "peerDependencies": {
@@ -39,42 +44,40 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.1",
-    "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-navigation-menu": "^1.2.1",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.4",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.6",
     "@radix-ui/react-use-controllable-state": "^1.1.0",
     "await-interaction-response": "^0.0.2",
-    "@webstudio-is/icons": "0.195.0",
-    "@webstudio-is/react-sdk": "0.195.0",
-    "@webstudio-is/css-engine": "0.195.0",
-    "@webstudio-is/sdk": "0.195.0"
+    "@webstudio-is/css-engine": "0.197.0",
+    "@webstudio-is/icons": "0.197.0",
+    "@webstudio-is/react-sdk": "0.197.0",
+    "@webstudio-is/sdk": "0.197.0"
   },
   "devDependencies": {
-    "@types/node": "^22.9.3",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "tailwindcss": "^3.3.3",
     "@webstudio-is/css-data": "0.0.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk-components-react": "0.195.0"
+    "@webstudio-is/sdk-components-react": "0.197.0",
+    "@webstudio-is/template": "0.197.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",
-    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
-    "build:tailwind": "tsx scripts/generate-tailwind-theme.ts && prettier --write src/theme/__generated__",
+    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.template.tsx !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc"

package/lib/sheet.ws.js

@@ -1,217 +0,0 @@
-import { HamburgerMenuIcon as o, LargeXIcon as p } from "@webstudio-is/icons/svg";
-import { fixed as m, inset as g, z as l, bg as t, backdropBlur as d, flex as e, overflow as y, w as a, gap as r, border as i, p as u, shadow as h, relative as b, mr as f, maxW as v, grow as x, my as c, leading as S, text as n, tracking as D, absolute as T, right as B, top as k, rounded as C, opacity as s, items as H, justify as w, h as I, outline as E, hover as M, focus as O, ring as j } from "./theme/tailwind-classes.js";
-import { getButtonStyles as z } from "./theme/styles.js";
-const U = {
-  category: "radix",
-  order: 1,
-  type: "container",
-  icon: o,
-  stylable: !1,
-  description: "Displays content in a menu that slides out from the side of the screen, triggered by a button. Use this component for a typical mobile hamburger menu.",
-  template: [
-    {
-      type: "instance",
-      component: "Dialog",
-      label: "Sheet",
-      props: [],
-      children: [
-        {
-          type: "instance",
-          component: "DialogTrigger",
-          label: "Sheet Trigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: z("ghost", "icon"),
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Hamburger Menu Svg",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: o
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "DialogOverlay",
-          label: "Sheet Overlay",
-          /**
-           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
-           * flex
-           **/
-          styles: [
-            m(),
-            g(0),
-            l(50),
-            t("background", 80),
-            d("sm"),
-            // To allow positioning Content
-            e(),
-            e("col"),
-            y("auto")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "DialogContent",
-              label: "Sheet Content",
-              /**
-               * fixed w-full z-50
-               * grid gap-4 max-w-lg
-               * m-auto
-               * border bg-background p-6 shadow-lg
-               **/
-              styles: [
-                a("full"),
-                l(50),
-                e(),
-                e("col"),
-                r(4),
-                i(),
-                t("background"),
-                u(6),
-                h("lg"),
-                b(),
-                // side=left
-                f("auto"),
-                v("sm"),
-                x()
-              ].flat(),
-              children: [
-                {
-                  type: "instance",
-                  component: "Box",
-                  label: "Navigation",
-                  props: [
-                    { name: "tag", type: "string", value: "nav" },
-                    { name: "role", type: "string", value: "navigation" }
-                  ],
-                  children: [
-                    {
-                      type: "instance",
-                      component: "Box",
-                      label: "Sheet Header",
-                      styles: [e(), e("col"), r(1)].flat(),
-                      children: [
-                        {
-                          type: "instance",
-                          component: "DialogTitle",
-                          label: "Sheet Title",
-                          /**
-                           * text-lg leading-none tracking-tight
-                           **/
-                          styles: [
-                            c(0),
-                            S("none"),
-                            n("lg"),
-                            D("tight")
-                          ].flat(),
-                          children: [
-                            {
-                              type: "text",
-                              value: "Sheet Title",
-                              placeholder: !0
-                            }
-                          ]
-                        },
-                        {
-                          type: "instance",
-                          component: "DialogDescription",
-                          label: "Sheet Description",
-                          /**
-                           * text-sm text-muted-foreground
-                           **/
-                          styles: [
-                            c(0),
-                            n("sm"),
-                            n("mutedForeground")
-                          ].flat(),
-                          children: [
-                            {
-                              type: "text",
-                              value: "Sheet description text you can edit",
-                              placeholder: !0
-                            }
-                          ]
-                        }
-                      ]
-                    },
-                    {
-                      type: "instance",
-                      component: "Text",
-                      children: [
-                        {
-                          type: "text",
-                          value: "The text you can edit",
-                          placeholder: !0
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  type: "instance",
-                  component: "DialogClose",
-                  label: "Close Button",
-                  /**
-                   * absolute right-4 top-4
-                   * rounded-sm opacity-70
-                   * ring-offset-background
-                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
-                   * flex items-center justify-center h-4 w-4
-                   **/
-                  styles: [
-                    T(),
-                    B(4),
-                    k(4),
-                    C("sm"),
-                    s(70),
-                    e(),
-                    H("center"),
-                    w("center"),
-                    I(4),
-                    a(4),
-                    i(0),
-                    t("transparent"),
-                    E(),
-                    M(s(100)),
-                    O(j("ring", 2, "background", 2))
-                  ].flat(),
-                  children: [
-                    {
-                      type: "instance",
-                      component: "HtmlEmbed",
-                      label: "Close Icon",
-                      props: [
-                        {
-                          type: "string",
-                          name: "code",
-                          value: p
-                        }
-                      ],
-                      children: []
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-export {
-  U as meta
-};