@webstudio-is/sdk-components-react-radix 0.89.0 → 0.91.0

package/lib/accordion.ws.js

@@ -6,6 +6,9 @@ import {
   ContentIcon,
   ChevronDownIcon
 } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
 import { div, h3, button } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
 import { buttonReset } from "./theme/styles";
@@ -192,46 +195,54 @@ const metaAccordion = {
 const metaAccordionItem = {
   category: "hidden",
   type: "container",
+  label: "Item",
   icon: ItemIcon,
   requiredAncestors: ["Accordion"],
   indexWithinAncestor: "Accordion",
-  presetStyle,
-  label: "Item"
+  presetStyle
 };
 const metaAccordionHeader = {
   category: "hidden",
   type: "container",
+  label: "Item Header",
   icon: HeaderIcon,
   requiredAncestors: ["AccordionItem"],
   detachable: false,
   presetStyle: {
     h3: [h3, tc.my(0)].flat()
-  },
-  label: "Item Header"
+  }
 };
 const metaAccordionTrigger = {
   category: "hidden",
   type: "container",
+  label: "Item Trigger",
   icon: TriggerIcon,
   requiredAncestors: ["AccordionHeader"],
   detachable: false,
+  states: [
+    ...defaultStates,
+    {
+      category: "component-states",
+      label: "Open",
+      selector: "[data-state=open]"
+    }
+  ],
   presetStyle: {
     button: [button, buttonReset].flat()
-  },
-  label: "Item Trigger"
+  }
 };
 const metaAccordionContent = {
   category: "hidden",
   type: "container",
+  label: "Item Content",
   icon: ContentIcon,
   requiredAncestors: ["AccordionItem"],
   detachable: false,
-  presetStyle,
-  label: "Item Content"
+  presetStyle
 };
 const propsMetaAccordion = {
   props: propsAccordion,
-  initialProps: ["value", "collapsible", "dir", "orientation"]
+  initialProps: ["value", "collapsible"]
 };
 const propsMetaAccordionItem = {
   props: propsAccordionItem

package/lib/cjs/accordion.ws.js

@@ -41,6 +41,7 @@ __export(accordion_ws_exports, {
 });
 module.exports = __toCommonJS(accordion_ws_exports);
 var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
 var tc = __toESM(require("./theme/tailwind-classes"), 1);
 var import_styles = require("./theme/styles");
@@ -221,46 +222,54 @@ const metaAccordion = {
 const metaAccordionItem = {
   category: "hidden",
   type: "container",
+  label: "Item",
   icon: import_svg.ItemIcon,
   requiredAncestors: ["Accordion"],
   indexWithinAncestor: "Accordion",
-  presetStyle,
-  label: "Item"
+  presetStyle
 };
 const metaAccordionHeader = {
   category: "hidden",
   type: "container",
+  label: "Item Header",
   icon: import_svg.HeaderIcon,
   requiredAncestors: ["AccordionItem"],
   detachable: false,
   presetStyle: {
     h3: [import_css_normalize.h3, tc.my(0)].flat()
-  },
-  label: "Item Header"
+  }
 };
 const metaAccordionTrigger = {
   category: "hidden",
   type: "container",
+  label: "Item Trigger",
   icon: import_svg.TriggerIcon,
   requiredAncestors: ["AccordionHeader"],
   detachable: false,
+  states: [
+    ...import_react_sdk.defaultStates,
+    {
+      category: "component-states",
+      label: "Open",
+      selector: "[data-state=open]"
+    }
+  ],
   presetStyle: {
     button: [import_css_normalize.button, import_styles.buttonReset].flat()
-  },
-  label: "Item Trigger"
+  }
 };
 const metaAccordionContent = {
   category: "hidden",
   type: "container",
+  label: "Item Content",
   icon: import_svg.ContentIcon,
   requiredAncestors: ["AccordionItem"],
   detachable: false,
-  presetStyle,
-  label: "Item Content"
+  presetStyle
 };
 const propsMetaAccordion = {
   props: import_accordion.propsAccordion,
-  initialProps: ["value", "collapsible", "dir", "orientation"]
+  initialProps: ["value", "collapsible"]
 };
 const propsMetaAccordionItem = {
   props: import_accordion.propsAccordionItem

package/lib/cjs/dialog.ws.js

@@ -53,9 +53,6 @@ var import_styles = require("./theme/styles");
 const presetStyle = {
   div: import_css_normalize.div
 };
-const buttonPresetStyle = {
-  button: import_css_normalize.button
-};
 const titlePresetStyle = {
   h2: import_css_normalize.h2
 };
@@ -98,7 +95,10 @@ const metaDialogDescription = {
 const metaDialogClose = {
   category: "hidden",
   type: "container",
-  presetStyle: buttonPresetStyle,
+  presetStyle: {
+    button: [import_styles.buttonReset, import_css_normalize.button].flat()
+  },
+  states: import_react_sdk.defaultStates,
   icon: import_svg.ButtonElementIcon,
   label: "Close Button"
 };
@@ -262,7 +262,21 @@ const metaDialog = {
                     tc.hover(tc.opacity(100)),
                     tc.focus(tc.ring("ring", 2, "background", 2))
                   ].flat(),
-                  children: [{ type: "text", value: "\u2715" }]
+                  children: [
+                    {
+                      type: "instance",
+                      component: "HtmlEmbed",
+                      label: "Close Icon",
+                      props: [
+                        {
+                          type: "string",
+                          name: "code",
+                          value: import_svg.LargeXIcon
+                        }
+                      ],
+                      children: []
+                    }
+                  ]
                 }
               ]
             }

package/lib/cjs/sheet.ws.js

@@ -231,7 +231,21 @@ const meta = {
                     tc.hover(tc.opacity(100)),
                     tc.focus(tc.ring("ring", 2, "background", 2))
                   ].flat(),
-                  children: [{ type: "text", value: "\u2715" }]
+                  children: [
+                    {
+                      type: "instance",
+                      component: "HtmlEmbed",
+                      label: "Close Icon",
+                      props: [
+                        {
+                          type: "string",
+                          name: "code",
+                          value: import_svg.LargeXIcon
+                        }
+                      ],
+                      children: []
+                    }
+                  ]
                 }
               ]
             }

package/lib/cjs/tabs.ws.js

@@ -39,6 +39,7 @@ __export(tabs_ws_exports, {
 });
 module.exports = __toCommonJS(tabs_ws_exports);
 var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
 var tc = __toESM(require("./theme/tailwind-classes"), 1);
 var import_styles = require("./theme/styles");
@@ -160,6 +161,14 @@ const metaTabsTrigger = {
   invalidAncestors: ["TabsTrigger"],
   indexWithinAncestor: "Tabs",
   label: "Tab Trigger",
+  states: [
+    ...import_react_sdk.defaultStates,
+    {
+      category: "component-states",
+      label: "Active",
+      selector: "[data-state=active]"
+    }
+  ],
   presetStyle: {
     button: [import_css_normalize.button, import_styles.buttonReset].flat()
   }
@@ -167,11 +176,11 @@ const metaTabsTrigger = {
 const metaTabsContent = {
   category: "hidden",
   type: "container",
+  label: "Tab Content",
   icon: import_svg.ContentIcon,
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
-  presetStyle,
-  label: "Tab Content"
+  presetStyle
 };
 const propsMetaTabs = {
   props: import_tabs.propsTabs

package/lib/cjs/theme/styles.js

@@ -91,10 +91,6 @@ const buttonReset = [
     property: "backgroundImage",
     value: { type: "keyword", value: "none" }
   },
-  {
-    property: "cursor",
-    value: { type: "keyword", value: "pointer" }
-  },
   tc.border(0),
   tc.p(0)
 ].flat();

package/lib/dialog.ws.js

@@ -5,9 +5,11 @@ import {
   OverlayIcon,
   HeadingIcon,
   TextIcon,
-  ButtonElementIcon
+  ButtonElementIcon,
+  LargeXIcon
 } from "@webstudio-is/icons/svg";
 import {
+  defaultStates
 } from "@webstudio-is/react-sdk";
 import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
@@ -20,13 +22,10 @@ import {
   propsDialogTitle,
   propsDialogDescription
 } from "./__generated__/dialog.props";
-import { getButtonStyles } from "./theme/styles";
+import { buttonReset, getButtonStyles } from "./theme/styles";
 const presetStyle = {
   div
 };
-const buttonPresetStyle = {
-  button
-};
 const titlePresetStyle = {
   h2
 };
@@ -69,7 +68,10 @@ const metaDialogDescription = {
 const metaDialogClose = {
   category: "hidden",
   type: "container",
-  presetStyle: buttonPresetStyle,
+  presetStyle: {
+    button: [buttonReset, button].flat()
+  },
+  states: defaultStates,
   icon: ButtonElementIcon,
   label: "Close Button"
 };
@@ -233,7 +235,21 @@ const metaDialog = {
                     tc.hover(tc.opacity(100)),
                     tc.focus(tc.ring("ring", 2, "background", 2))
                   ].flat(),
-                  children: [{ type: "text", value: "\u2715" }]
+                  children: [
+                    {
+                      type: "instance",
+                      component: "HtmlEmbed",
+                      label: "Close Icon",
+                      props: [
+                        {
+                          type: "string",
+                          name: "code",
+                          value: LargeXIcon
+                        }
+                      ],
+                      children: []
+                    }
+                  ]
                 }
               ]
             }

package/lib/sheet.ws.js

@@ -1,4 +1,4 @@
-import { HamburgerMenuIcon } from "@webstudio-is/icons/svg";
+import { HamburgerMenuIcon, LargeXIcon } from "@webstudio-is/icons/svg";
 import * as tc from "./theme/tailwind-classes";
 import { getButtonStyles } from "./theme/styles";
 const meta = {
@@ -198,7 +198,21 @@ const meta = {
                     tc.hover(tc.opacity(100)),
                     tc.focus(tc.ring("ring", 2, "background", 2))
                   ].flat(),
-                  children: [{ type: "text", value: "\u2715" }]
+                  children: [
+                    {
+                      type: "instance",
+                      component: "HtmlEmbed",
+                      label: "Close Icon",
+                      props: [
+                        {
+                          type: "string",
+                          name: "code",
+                          value: LargeXIcon
+                        }
+                      ],
+                      children: []
+                    }
+                  ]
                 }
               ]
             }

package/lib/tabs.ws.js

@@ -4,6 +4,9 @@ import {
   TabsIcon,
   TriggerIcon
 } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
 import { button, div } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
 import { buttonReset } from "./theme/styles";
@@ -130,6 +133,14 @@ const metaTabsTrigger = {
   invalidAncestors: ["TabsTrigger"],
   indexWithinAncestor: "Tabs",
   label: "Tab Trigger",
+  states: [
+    ...defaultStates,
+    {
+      category: "component-states",
+      label: "Active",
+      selector: "[data-state=active]"
+    }
+  ],
   presetStyle: {
     button: [button, buttonReset].flat()
   }
@@ -137,11 +148,11 @@ const metaTabsTrigger = {
 const metaTabsContent = {
   category: "hidden",
   type: "container",
+  label: "Tab Content",
   icon: ContentIcon,
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
-  presetStyle,
-  label: "Tab Content"
+  presetStyle
 };
 const propsMetaTabs = {
   props: propsTabs

package/lib/theme/styles.js

@@ -57,10 +57,6 @@ const buttonReset = [
     property: "backgroundImage",
     value: { type: "keyword", value: "none" }
   },
-  {
-    property: "cursor",
-    value: { type: "keyword", value: "pointer" }
-  },
   tc.border(0),
   tc.p(0)
 ].flat();

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.89.0",
+  "version": "0.91.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -56,10 +56,10 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "tailwindcss": "^3.3.3",
-    "@webstudio-is/css-data": "^0.89.0",
-    "@webstudio-is/generate-arg-types": "^0.89.0",
-    "@webstudio-is/icons": "^0.89.0",
-    "@webstudio-is/react-sdk": "^0.89.0"
+    "@webstudio-is/css-data": "^0.91.0",
+    "@webstudio-is/generate-arg-types": "^0.91.0",
+    "@webstudio-is/icons": "^0.91.0",
+    "@webstudio-is/react-sdk": "^0.91.0"
   },
   "devDependencies": {
     "@storybook/react": "^7.2.1",
@@ -69,7 +69,7 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.1.6",
     "@webstudio-is/scripts": "^0.0.0",
-    "@webstudio-is/sdk-components-react": "^0.89.0",
+    "@webstudio-is/sdk-components-react": "^0.91.0",
     "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.7"
   },

package/src/accordion.ws.ts

@@ -6,12 +6,13 @@ import {
   ContentIcon,
   ChevronDownIcon,
 } from "@webstudio-is/icons/svg";
-import type {
-  EmbedTemplateStyleDecl,
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
-  WsEmbedTemplate,
+import {
+  defaultStates,
+  type EmbedTemplateStyleDecl,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  type WsEmbedTemplate,
 } from "@webstudio-is/react-sdk";
 import { div, h3, button } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
@@ -224,50 +225,58 @@ export const metaAccordion: WsComponentMeta = {
 export const metaAccordionItem: WsComponentMeta = {
   category: "hidden",
   type: "container",
+  label: "Item",
   icon: ItemIcon,
   requiredAncestors: ["Accordion"],
   indexWithinAncestor: "Accordion",
   presetStyle,
-  label: "Item",
 };
 
 export const metaAccordionHeader: WsComponentMeta = {
   category: "hidden",
   type: "container",
+  label: "Item Header",
   icon: HeaderIcon,
   requiredAncestors: ["AccordionItem"],
   detachable: false,
   presetStyle: {
     h3: [h3, tc.my(0)].flat(),
   },
-  label: "Item Header",
 };
 
 export const metaAccordionTrigger: WsComponentMeta = {
   category: "hidden",
   type: "container",
+  label: "Item Trigger",
   icon: TriggerIcon,
   requiredAncestors: ["AccordionHeader"],
   detachable: false,
+  states: [
+    ...defaultStates,
+    {
+      category: "component-states",
+      label: "Open",
+      selector: "[data-state=open]",
+    },
+  ],
   presetStyle: {
     button: [button, buttonReset].flat(),
   },
-  label: "Item Trigger",
 };
 
 export const metaAccordionContent: WsComponentMeta = {
   category: "hidden",
   type: "container",
+  label: "Item Content",
   icon: ContentIcon,
   requiredAncestors: ["AccordionItem"],
   detachable: false,
   presetStyle,
-  label: "Item Content",
 };
 
 export const propsMetaAccordion: WsComponentPropsMeta = {
   props: propsAccordion,
-  initialProps: ["value", "collapsible", "dir", "orientation"],
+  initialProps: ["value", "collapsible"],
 };
 
 export const propsMetaAccordionItem: WsComponentPropsMeta = {

package/src/dialog.ws.tsx

@@ -6,8 +6,10 @@ import {
   HeadingIcon,
   TextIcon,
   ButtonElementIcon,
+  LargeXIcon,
 } from "@webstudio-is/icons/svg";
 import {
+  defaultStates,
   type PresetStyle,
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -23,16 +25,12 @@ import {
   propsDialogTitle,
   propsDialogDescription,
 } from "./__generated__/dialog.props";
-import { getButtonStyles } from "./theme/styles";
+import { buttonReset, getButtonStyles } from "./theme/styles";
 
 const presetStyle = {
   div,
 } satisfies PresetStyle<"div">;
 
-const buttonPresetStyle = {
-  button,
-} satisfies PresetStyle<"button">;
-
 const titlePresetStyle = {
   h2,
 } satisfies PresetStyle<"h2">;
@@ -83,7 +81,10 @@ export const metaDialogDescription: WsComponentMeta = {
 export const metaDialogClose: WsComponentMeta = {
   category: "hidden",
   type: "container",
-  presetStyle: buttonPresetStyle,
+  presetStyle: {
+    button: [buttonReset, button].flat(),
+  },
+  states: defaultStates,
   icon: ButtonElementIcon,
   label: "Close Button",
 };
@@ -259,7 +260,21 @@ export const metaDialog: WsComponentMeta = {
                     tc.hover(tc.opacity(100)),
                     tc.focus(tc.ring("ring", 2, "background", 2)),
                   ].flat(),
-                  children: [{ type: "text", value: "✕" }],
+                  children: [
+                    {
+                      type: "instance",
+                      component: "HtmlEmbed",
+                      label: "Close Icon",
+                      props: [
+                        {
+                          type: "string",
+                          name: "code",
+                          value: LargeXIcon,
+                        },
+                      ],
+                      children: [],
+                    },
+                  ],
                 },
               ],
             },

package/src/sheet.ws.tsx

@@ -1,4 +1,4 @@
-import { HamburgerMenuIcon } from "@webstudio-is/icons/svg";
+import { HamburgerMenuIcon, LargeXIcon } from "@webstudio-is/icons/svg";
 import type { WsComponentMeta } from "@webstudio-is/react-sdk";
 import * as tc from "./theme/tailwind-classes";
 import { getButtonStyles } from "./theme/styles";
@@ -210,7 +210,21 @@ export const meta: WsComponentMeta = {
                     tc.hover(tc.opacity(100)),
                     tc.focus(tc.ring("ring", 2, "background", 2)),
                   ].flat(),
-                  children: [{ type: "text", value: "✕" }],
+                  children: [
+                    {
+                      type: "instance",
+                      component: "HtmlEmbed",
+                      label: "Close Icon",
+                      props: [
+                        {
+                          type: "string",
+                          name: "code",
+                          value: LargeXIcon,
+                        },
+                      ],
+                      children: [],
+                    },
+                  ],
                 },
               ],
             },

package/src/tabs.ws.ts

@@ -4,11 +4,12 @@ import {
   TabsIcon,
   TriggerIcon,
 } from "@webstudio-is/icons/svg";
-import type {
-  EmbedTemplateStyleDecl,
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  defaultStates,
+  type EmbedTemplateStyleDecl,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
 import { button, div } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
@@ -157,6 +158,14 @@ export const metaTabsTrigger: WsComponentMeta = {
   invalidAncestors: ["TabsTrigger"],
   indexWithinAncestor: "Tabs",
   label: "Tab Trigger",
+  states: [
+    ...defaultStates,
+    {
+      category: "component-states",
+      label: "Active",
+      selector: "[data-state=active]",
+    },
+  ],
   presetStyle: {
     button: [button, buttonReset].flat(),
   },
@@ -165,11 +174,11 @@ export const metaTabsTrigger: WsComponentMeta = {
 export const metaTabsContent: WsComponentMeta = {
   category: "hidden",
   type: "container",
+  label: "Tab Content",
   icon: ContentIcon,
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
   presetStyle,
-  label: "Tab Content",
 };
 
 export const propsMetaTabs: WsComponentPropsMeta = {

package/src/theme/styles.ts

@@ -71,10 +71,6 @@ export const buttonReset: EmbedTemplateStyleDecl[] = [
     property: "backgroundImage",
     value: { type: "keyword", value: "none" },
   } as const,
-  {
-    property: "cursor",
-    value: { type: "keyword", value: "pointer" },
-  } as const,
   tc.border(0),
   tc.p(0),
 ].flat();