refactor: rewrite radio group and select templates with jsx

packages/sdk-components-react-radix/src/checkbox.template.tsx

@@ -23,7 +23,7 @@ export const meta: TemplateMeta = {
     "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
   order: 101,
   template: (
-    <$.Label
+    <radix.Label
       ws:label="Checkbox Field"
       ws:style={css`
         display: flex;
@@ -72,6 +72,6 @@ export const meta: TemplateMeta = {
       <$.Text ws:label="Checkbox Label" tag="span">
         {new PlaceholderValue("Checkbox")}
       </$.Text>
-    </$.Label>
+    </radix.Label>
   ),
 };

packages/sdk-components-react-radix/src/radio-group.template.tsx

@@ -0,0 +1,85 @@
+import {
+  $,
+  css,
+  PlaceholderValue,
+  type TemplateMeta,
+} from "@webstudio-is/template";
+import { DotIcon } from "@webstudio-is/icons/svg";
+import { radix } from "./shared/proxy";
+import {
+  borderRadius,
+  borderWidth,
+  boxShadow,
+  colors,
+  height,
+  opacity,
+  spacing,
+  width,
+} from "./shared/theme";
+
+const createRadioGroupItem = ({
+  value,
+  label,
+}: {
+  value: string;
+  label: string;
+}) => (
+  <radix.Label
+    // flex items-center space-x-2
+    ws:style={css`
+      display: flex;
+      align-items: center;
+      gap: ${spacing[2]};
+    `}
+  >
+    <radix.RadioGroupItem
+      value={value}
+      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
+      // focus:outline-none
+      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+      // disabled:cursor-not-allowed disabled:opacity-50
+      ws:style={css`
+        aspect-ratio: 1 / 1;
+        height: ${height[4]};
+        width: ${width[4]};
+        border-radius: ${borderRadius.full};
+        border: ${borderWidth.DEFAULT} solid ${colors.primary};
+        color: ${colors.primary};
+        &:focus-visible {
+          outline: none;
+          box-shadow: ${boxShadow.ring};
+        }
+        &:disabled {
+          cursor: not-allowed;
+          opacity: ${opacity[50]};
+        }
+      `}
+    >
+      <radix.RadioGroupIndicator>
+        <$.HtmlEmbed ws:label="Indicator Icon" code={DotIcon} />
+      </radix.RadioGroupIndicator>
+    </radix.RadioGroupItem>
+    <$.Text>{new PlaceholderValue(label)}</$.Text>
+  </radix.Label>
+);
+
+export const meta: TemplateMeta = {
+  category: "radix",
+  order: 100,
+  description:
+    "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
+  template: (
+    <radix.RadioGroup
+      // grid gap-2
+      ws:style={css`
+        display: flex;
+        flex-direction: column;
+        gap: ${spacing[2]};
+      `}
+    >
+      {createRadioGroupItem({ value: "default", label: "Default" })}
+      {createRadioGroupItem({ value: "comfortable", label: "Comfortable" })}
+      {createRadioGroupItem({ value: "compact", label: "Compact" })}
+    </radix.RadioGroup>
+  ),
+};

packages/sdk-components-react-radix/src/radio-group.ws.ts

@@ -1,97 +1,23 @@
-import {
-  ItemIcon,
-  RadioGroupIcon,
-  DotIcon,
-  TriggerIcon,
-} from "@webstudio-is/icons/svg";
+import { ItemIcon, RadioGroupIcon, TriggerIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
-  WsEmbedTemplate,
   type WsComponentMeta,
   type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
 import { button, div, span } from "@webstudio-is/sdk/normalize.css";
-import * as tc from "./theme/tailwind-classes";
 import { buttonReset } from "./theme/styles";
 import {
   propsRadioGroup,
   propsRadioGroupIndicator,
   propsRadioGroupItem,
 } from "./__generated__/radio-group.props";
 
-const createRadioGroupItem = ({
-  value,
-  label,
-}: {
-  value: string;
-  label: string;
-}): WsEmbedTemplate[number] => ({
-  type: "instance",
-  component: "Label",
-  // flex items-center space-x-2
-  styles: [tc.flex(), tc.items("center"), tc.gap(2)].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "RadioGroupItem",
-      props: [{ name: "value", type: "string", value }],
-      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
-      // focus:outline-none
-      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-      // disabled:cursor-not-allowed disabled:opacity-50
-      styles: [
-        tc.aspect("square"),
-        tc.h(4),
-        tc.w(4),
-        tc.rounded("full"),
-        tc.border(),
-        tc.border("primary"),
-        tc.text("primary"),
-        tc.focusVisible(
-          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-        ),
-        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "RadioGroupIndicator",
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Indicator Icon",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: DotIcon,
-                },
-              ],
-              children: [],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      type: "instance",
-      component: "Text",
-      children: [{ type: "text", value: label, placeholder: true }],
-    },
-  ],
-});
-
 export const metaRadioGroup: WsComponentMeta = {
-  category: "radix",
-  order: 100,
   type: "container",
   constraints: {
     relation: "descendant",
     component: { $eq: "RadioGroupItem" },
   },
-  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: RadioGroupIcon,
   states: [
     ...defaultStates,
@@ -109,44 +35,9 @@ export const metaRadioGroup: WsComponentMeta = {
   presetStyle: {
     div,
   },
-  template: [
-    {
-      type: "instance",
-      component: "RadioGroup",
-      variables: {
-        radioGroupValue: { initialValue: "" },
-      },
-      // grid gap-2
-      styles: [tc.flex(), tc.flex("col"), tc.gap(2)].flat(),
-      props: [
-        {
-          type: "expression",
-          name: "value",
-          code: "radioGroupValue",
-        },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: `radioGroupValue = value`,
-            },
-          ],
-        },
-      ],
-      children: [
-        createRadioGroupItem({ value: "default", label: "Default" }),
-        createRadioGroupItem({ value: "comfortable", label: "Comfortable" }),
-        createRadioGroupItem({ value: "compact", label: "Compact" }),
-      ],
-    },
-  ],
 };
 
 export const metaRadioGroupItem: WsComponentMeta = {
-  category: "hidden",
   type: "container",
   constraints: [
     {
@@ -166,7 +57,6 @@ export const metaRadioGroupItem: WsComponentMeta = {
 };
 
 export const metaRadioGroupIndicator: WsComponentMeta = {
-  category: "hidden",
   type: "container",
   icon: TriggerIcon,
   constraints: {