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

package/lib/cjs/navigation-menu.ws.js

@@ -304,6 +304,7 @@ const metaNavigationMenu = {
   category: "radix",
   order: 2,
   type: "container",
+  description: "A collection of links for navigating websites.",
   icon: import_svg.NavigationMenuIcon,
   presetStyle,
   template: [

package/lib/cjs/popover.ws.js

@@ -65,6 +65,7 @@ const metaPopover = {
   type: "container",
   icon: import_svg.PopoverIcon,
   stylable: false,
+  description: "Displays rich content in a portal, triggered by a button.",
   template: [
     {
       type: "instance",

package/lib/cjs/props-descriptions.js

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var props_descriptions_exports = {};
+__export(props_descriptions_exports, {
+  propsDescriptions: () => propsDescriptions
+});
+module.exports = __toCommonJS(props_descriptions_exports);
+const open = "Show or hide the content of this component on the canvas. This will not affect the initial state of the component.";
+const alignOffset = "The offset in pixels from the \u201Cstart\u201C or \u201Cend\u201C alignment options.";
+const sideOffset = "The distance in pixels between the Content and the Trigger.";
+const side = "The preferred alignment against the Trigger. May change when collisions occur.";
+const propsDescriptions = {
+  Dialog: {
+    open
+  },
+  Sheet: {
+    open
+  },
+  Collapsible: {
+    open
+  },
+  Popover: {
+    open
+  },
+  PopoverContent: {
+    alignOffset,
+    sideOffset,
+    side
+  },
+  Tooltip: {
+    open,
+    delayDuration: "The delay before the Tooltip shows after the Trigger is hovered, in milliseconds. If no value is specified, the default is 700ms",
+    disableHoverableContent: "When toggled, prevents the Tooltip content from showing when the Trigger is hovered."
+  },
+  TooltipContent: {
+    alignOffset,
+    sideOffset,
+    side
+  }
+};

package/lib/cjs/radio-group.ws.js

@@ -105,6 +105,7 @@ const metaRadioGroup = {
   category: "radix",
   order: 100,
   type: "container",
+  description: "A set of checkable buttons\u2014known as radio buttons\u2014where no more than one of the buttons can be checked at a time.",
   icon: import_svg.RadioCheckedIcon,
   states: [
     ...import_react_sdk.defaultStates,
@@ -160,6 +161,7 @@ const metaRadioGroup = {
 const metaRadioGroupItem = {
   category: "hidden",
   type: "container",
+  requiredAncestors: ["RadioGroup"],
   icon: import_svg.ItemIcon,
   states: import_react_sdk.defaultStates,
   presetStyle: {
@@ -169,6 +171,7 @@ const metaRadioGroupItem = {
 const metaRadioGroupIndicator = {
   category: "hidden",
   type: "container",
+  detachable: false,
   icon: import_svg.TriggerIcon,
   states: import_react_sdk.defaultStates,
   presetStyle: {

package/lib/cjs/select.js

@@ -40,7 +40,9 @@ const Select = (0, import_react.forwardRef)(({ value, ...props }, _ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Root, { value, ...props });
 });
 const SelectTrigger = import_react_select.Trigger;
-const SelectValue = import_react_select.Value;
+const SelectValue = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Value, { ref, ...props });
+});
 const SelectContent = (0, import_react.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Content, { ref, ...props, position: "popper" }) });
 });

package/lib/cjs/select.ws.js

@@ -125,6 +125,7 @@ const metaSelect = {
   type: "container",
   icon: import_svg.SelectIcon,
   stylable: false,
+  description: "Use within a form to give your users a list of options to choose from.",
   template: [
     {
       type: "instance",

package/lib/cjs/sheet.ws.js

@@ -40,6 +40,7 @@ const meta = {
   type: "container",
   icon: import_svg.HamburgerMenuIcon,
   stylable: false,
+  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",
@@ -230,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/switch.ws.js

@@ -44,6 +44,7 @@ const metaSwitch = {
   category: "radix",
   order: 11,
   type: "container",
+  description: "A control that allows the user to toggle between checked and not checked.",
   icon: import_svg.SwitchIcon,
   states: [
     ...import_react_sdk.defaultStates,
@@ -144,6 +145,7 @@ const metaSwitch = {
 const metaSwitchThumb = {
   category: "hidden",
   type: "container",
+  detachable: false,
   icon: import_svg.TriggerIcon,
   states: [
     ...import_react_sdk.defaultStates,

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");
@@ -78,6 +79,7 @@ const metaTabs = {
   type: "container",
   icon: import_svg.TabsIcon,
   presetStyle,
+  description: "A set of panels with content that are displayed one at a time. Duplicate both a tab trigger and tab content to add more tabs. Triggers and content are connected according to their order in the Navigator.",
   template: [
     {
       type: "instance",
@@ -159,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()
   }
@@ -166,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/cjs/tooltip.ws.js

@@ -65,6 +65,7 @@ const metaTooltip = {
   type: "container",
   icon: import_svg.TooltipIcon,
   stylable: false,
+  description: "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
   template: [
     {
       type: "instance",

package/lib/collapsible.ws.js

@@ -19,6 +19,7 @@ const metaCollapsible = {
   type: "container",
   presetStyle,
   icon: CollapsibleIcon,
+  description: "An interactive component which expands and collapses some content, triggered by a button.",
   template: [
     {
       type: "instance",

package/lib/dialog.ws.js

@@ -5,7 +5,8 @@ import {
   OverlayIcon,
   HeadingIcon,
   TextIcon,
-  ButtonElementIcon
+  ButtonElementIcon,
+  LargeXIcon
 } from "@webstudio-is/icons/svg";
 import {
 } from "@webstudio-is/react-sdk";
@@ -20,13 +21,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 +67,9 @@ const metaDialogDescription = {
 const metaDialogClose = {
   category: "hidden",
   type: "container",
-  presetStyle: buttonPresetStyle,
+  presetStyle: {
+    button: [buttonReset, button].flat()
+  },
   icon: ButtonElementIcon,
   label: "Close Button"
 };
@@ -79,6 +79,7 @@ const metaDialog = {
   type: "container",
   icon: DialogIcon,
   stylable: false,
+  description: "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
   template: [
     {
       type: "instance",
@@ -232,7 +233,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/label.ws.js

@@ -15,6 +15,7 @@ const meta = {
   icon: LabelIcon,
   presetStyle,
   states: defaultStates,
+  description: "An accessible label to describe the purpose of an input. Match the \u201CFor\u201D property on the label with the \u201CID\u201D of the input to connect them.",
   template: [
     {
       type: "instance",

package/lib/navigation-menu.ws.js

@@ -275,6 +275,7 @@ const metaNavigationMenu = {
   category: "radix",
   order: 2,
   type: "container",
+  description: "A collection of links for navigating websites.",
   icon: NavigationMenuIcon,
   presetStyle,
   template: [

package/lib/popover.ws.js

@@ -32,6 +32,7 @@ const metaPopover = {
   type: "container",
   icon: PopoverIcon,
   stylable: false,
+  description: "Displays rich content in a portal, triggered by a button.",
   template: [
     {
       type: "instance",

package/lib/props-descriptions.js

@@ -0,0 +1,36 @@
+const open = "Show or hide the content of this component on the canvas. This will not affect the initial state of the component.";
+const alignOffset = "The offset in pixels from the \u201Cstart\u201C or \u201Cend\u201C alignment options.";
+const sideOffset = "The distance in pixels between the Content and the Trigger.";
+const side = "The preferred alignment against the Trigger. May change when collisions occur.";
+const propsDescriptions = {
+  Dialog: {
+    open
+  },
+  Sheet: {
+    open
+  },
+  Collapsible: {
+    open
+  },
+  Popover: {
+    open
+  },
+  PopoverContent: {
+    alignOffset,
+    sideOffset,
+    side
+  },
+  Tooltip: {
+    open,
+    delayDuration: "The delay before the Tooltip shows after the Trigger is hovered, in milliseconds. If no value is specified, the default is 700ms",
+    disableHoverableContent: "When toggled, prevents the Tooltip content from showing when the Trigger is hovered."
+  },
+  TooltipContent: {
+    alignOffset,
+    sideOffset,
+    side
+  }
+};
+export {
+  propsDescriptions
+};

package/lib/radio-group.ws.js

@@ -79,6 +79,7 @@ const metaRadioGroup = {
   category: "radix",
   order: 100,
   type: "container",
+  description: "A set of checkable buttons\u2014known as radio buttons\u2014where no more than one of the buttons can be checked at a time.",
   icon: RadioCheckedIcon,
   states: [
     ...defaultStates,
@@ -134,6 +135,7 @@ const metaRadioGroup = {
 const metaRadioGroupItem = {
   category: "hidden",
   type: "container",
+  requiredAncestors: ["RadioGroup"],
   icon: ItemIcon,
   states: defaultStates,
   presetStyle: {
@@ -143,6 +145,7 @@ const metaRadioGroupItem = {
 const metaRadioGroupIndicator = {
   category: "hidden",
   type: "container",
+  detachable: false,
   icon: TriggerIcon,
   states: defaultStates,
   presetStyle: {

package/lib/select.js

@@ -21,7 +21,9 @@ const Select = forwardRef(({ value, ...props }, _ref) => {
   return /* @__PURE__ */ jsx(Root, { value, ...props });
 });
 const SelectTrigger = Trigger;
-const SelectValue = Value;
+const SelectValue = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Value, { ref, ...props });
+});
 const SelectContent = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { ref, ...props, position: "popper" }) });
 });

package/lib/select.ws.js

@@ -95,6 +95,7 @@ const metaSelect = {
   type: "container",
   icon: SelectIcon,
   stylable: false,
+  description: "Use within a form to give your users a list of options to choose from.",
   template: [
     {
       type: "instance",

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 = {
@@ -7,6 +7,7 @@ const meta = {
   type: "container",
   icon: HamburgerMenuIcon,
   stylable: false,
+  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",
@@ -197,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/switch.ws.js

@@ -10,6 +10,7 @@ const metaSwitch = {
   category: "radix",
   order: 11,
   type: "container",
+  description: "A control that allows the user to toggle between checked and not checked.",
   icon: SwitchIcon,
   states: [
     ...defaultStates,
@@ -110,6 +111,7 @@ const metaSwitch = {
 const metaSwitchThumb = {
   category: "hidden",
   type: "container",
+  detachable: false,
   icon: TriggerIcon,
   states: [
     ...defaultStates,

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";
@@ -48,6 +51,7 @@ const metaTabs = {
   type: "container",
   icon: TabsIcon,
   presetStyle,
+  description: "A set of panels with content that are displayed one at a time. Duplicate both a tab trigger and tab content to add more tabs. Triggers and content are connected according to their order in the Navigator.",
   template: [
     {
       type: "instance",
@@ -129,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()
   }
@@ -136,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/tooltip.ws.js

@@ -32,6 +32,7 @@ const metaTooltip = {
   type: "container",
   icon: TooltipIcon,
   stylable: false,
+  description: "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
   template: [
     {
       type: "instance",

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/props-descriptions.d.ts

@@ -0,0 +1,29 @@
+export declare const propsDescriptions: {
+    Dialog: {
+        open: string;
+    };
+    Sheet: {
+        open: string;
+    };
+    Collapsible: {
+        open: string;
+    };
+    Popover: {
+        open: string;
+    };
+    PopoverContent: {
+        alignOffset: string;
+        sideOffset: string;
+        side: string;
+    };
+    Tooltip: {
+        open: string;
+        delayDuration: string;
+        disableHoverableContent: string;
+    };
+    TooltipContent: {
+        alignOffset: string;
+        sideOffset: string;
+        side: string;
+    };
+};

package/lib/types/select.d.ts

@@ -1,9 +1,11 @@
 import { type ForwardRefExoticComponent, type ComponentPropsWithRef } from "react";
-import { Value, Trigger, Item, ItemIndicator, ItemText, Viewport } from "@radix-ui/react-select";
+import { Trigger, Item, ItemIndicator, ItemText, Viewport } from "@radix-ui/react-select";
 import { type Hook } from "@webstudio-is/react-sdk";
 export declare const Select: ForwardRefExoticComponent<import("@radix-ui/react-select").SelectProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectTrigger: ForwardRefExoticComponent<ComponentPropsWithRef<typeof Trigger>>;
-export declare const SelectValue: ForwardRefExoticComponent<ComponentPropsWithRef<typeof Value>>;
+export declare const SelectValue: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-select").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>, "ref">, "placeholder"> & {
+    placeholder?: string | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectContent: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-select").SelectContentProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "position" | "side"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SelectViewport: ForwardRefExoticComponent<ComponentPropsWithRef<typeof Viewport>>;
 export declare const SelectItem: ForwardRefExoticComponent<ComponentPropsWithRef<typeof Item>>;

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.88.0",
+  "version": "0.90.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.88.0",
-    "@webstudio-is/generate-arg-types": "^0.88.0",
-    "@webstudio-is/icons": "^0.88.0",
-    "@webstudio-is/react-sdk": "^0.88.0"
+    "@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"
   },
   "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.88.0",
+    "@webstudio-is/sdk-components-react": "^0.90.0",
     "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.7"
   },