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

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",

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

@@ -78,6 +78,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",

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

@@ -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",

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

@@ -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",

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

@@ -48,6 +48,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",

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.88.0",
+  "version": "0.89.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.89.0",
+    "@webstudio-is/generate-arg-types": "^0.89.0",
+    "@webstudio-is/icons": "^0.89.0",
+    "@webstudio-is/react-sdk": "^0.89.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.89.0",
     "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.7"
   },