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

package/src/dialog.ws.tsx

@@ -6,6 +6,7 @@ import {
   HeadingIcon,
   TextIcon,
   ButtonElementIcon,
+  LargeXIcon,
 } from "@webstudio-is/icons/svg";
 import {
   type PresetStyle,
@@ -23,16 +24,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 +80,9 @@ export const metaDialogDescription: WsComponentMeta = {
 export const metaDialogClose: WsComponentMeta = {
   category: "hidden",
   type: "container",
-  presetStyle: buttonPresetStyle,
+  presetStyle: {
+    button: [buttonReset, button].flat(),
+  },
   icon: ButtonElementIcon,
   label: "Close Button",
 };
@@ -102,6 +101,8 @@ export const metaDialog: WsComponentMeta = {
   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",
@@ -257,7 +258,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/label.ws.ts

@@ -20,6 +20,8 @@ export const meta: WsComponentMeta = {
   icon: LabelIcon,
   presetStyle,
   states: defaultStates,
+  description:
+    "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
   template: [
     {
       type: "instance",

package/src/navigation-menu.ws.ts

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

package/src/popover.ws.tsx

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

package/src/props-descriptions.ts

@@ -0,0 +1,43 @@
+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 “start“ or “end“ 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.";
+
+export 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/src/radio-group.ws.ts

@@ -86,6 +86,8 @@ export const metaRadioGroup: WsComponentMeta = {
   category: "radix",
   order: 100,
   type: "container",
+  description:
+    "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
   icon: RadioCheckedIcon,
   states: [
     ...defaultStates,
@@ -142,6 +144,7 @@ export const metaRadioGroup: WsComponentMeta = {
 export const metaRadioGroupItem: WsComponentMeta = {
   category: "hidden",
   type: "container",
+  requiredAncestors: ["RadioGroup"],
   icon: ItemIcon,
   states: defaultStates,
   presetStyle: {
@@ -152,6 +155,7 @@ export const metaRadioGroupItem: WsComponentMeta = {
 export const metaRadioGroupIndicator: WsComponentMeta = {
   category: "hidden",
   type: "container",
+  detachable: false,
   icon: TriggerIcon,
   states: defaultStates,
   presetStyle: {

package/src/select.tsx

@@ -37,9 +37,14 @@ export const SelectTrigger: ForwardRefExoticComponent<
   ComponentPropsWithRef<typeof Trigger>
 > = Trigger;
 
-export const SelectValue: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof Value>
-> = Value;
+export const SelectValue = forwardRef<
+  HTMLDivElement,
+  Omit<ComponentPropsWithoutRef<typeof Value>, "placeholder"> & {
+    placeholder?: string;
+  }
+>((props, ref) => {
+  return <Value ref={ref} {...props} />;
+});
 
 export const SelectContent = forwardRef<
   HTMLDivElement,

package/src/select.ws.ts

@@ -108,6 +108,8 @@ export const metaSelect: WsComponentMeta = {
   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/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";
@@ -17,6 +17,8 @@ export const meta: WsComponentMeta = {
   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",
@@ -208,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/switch.ws.ts

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

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";
@@ -72,6 +73,8 @@ export const metaTabs: WsComponentMeta = {
   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",
@@ -155,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(),
   },
@@ -163,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();

package/src/tooltip.ws.tsx

@@ -48,6 +48,8 @@ export const metaTooltip: WsComponentMeta = {
   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",