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

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

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

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

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

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