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

package/lib/accordion.ws.js

@@ -3,10 +3,12 @@ import {
   ItemIcon,
   HeaderIcon,
   TriggerIcon,
-  ContentIcon
+  ContentIcon,
+  ChevronDownIcon
 } from "@webstudio-is/icons/svg";
 import { div, h3, button } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
 import {
   propsAccordion,
   propsAccordionItem,
@@ -18,17 +20,71 @@ const presetStyle = {
   div
 };
 const accordionItemStyles = [tc.borderB()].flat();
-const accordionHeaderStyles = [tc.flex()].flat();
-const accordionTriggerStyles = [
-  tc.flex(),
-  tc.flex(1),
-  tc.items("center"),
-  tc.justify("between"),
-  tc.py(4),
-  tc.font("medium"),
-  tc.transition("all"),
-  tc.hover([tc.underline()].flat())
-].flat();
+const createAccordionTrigger = ({
+  children
+}) => ({
+  type: "instance",
+  component: "AccordionHeader",
+  // flex
+  styles: [tc.flex()].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "AccordionTrigger",
+      // flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180
+      styles: [
+        tc.flex(),
+        tc.flex(1),
+        tc.items("center"),
+        tc.justify("between"),
+        tc.py(4),
+        tc.font("medium"),
+        tc.hover([tc.underline()].flat()),
+        tc.property("--accordion-trigger-icon-transform", "0deg"),
+        tc.state(
+          [tc.property("--accordion-trigger-icon-transform", "180deg")],
+          "[data-state=open]"
+        )
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "Text",
+          children
+        },
+        {
+          type: "instance",
+          component: "Box",
+          label: "Icon Container",
+          // h-4 w-4 shrink-0 transition-transform duration-200
+          styles: [
+            tc.property("rotate", "--accordion-trigger-icon-transform"),
+            tc.h(4),
+            tc.w(4),
+            tc.shrink(0),
+            tc.transition("all"),
+            tc.duration(200)
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              label: "Chevron Icon",
+              props: [
+                {
+                  type: "string",
+                  name: "code",
+                  value: ChevronDownIcon
+                }
+              ],
+              children: []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+});
 const accordionContentStyles = [
   tc.overflow("hidden"),
   tc.text("sm"),
@@ -38,9 +94,11 @@ const accordionContentStyles = [
 ].flat();
 const metaAccordion = {
   category: "radix",
+  order: 3,
   type: "container",
   icon: AccordionIcon,
   presetStyle,
+  description: "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
   template: [
     {
       type: "instance",
@@ -69,19 +127,9 @@ const metaAccordion = {
           component: "AccordionItem",
           styles: accordionItemStyles,
           children: [
-            {
-              type: "instance",
-              component: "AccordionHeader",
-              styles: accordionHeaderStyles,
-              children: [
-                {
-                  type: "instance",
-                  component: "AccordionTrigger",
-                  styles: accordionTriggerStyles,
-                  children: [{ type: "text", value: "Is it accessible?" }]
-                }
-              ]
-            },
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it accessible?" }]
+            }),
             {
               type: "instance",
               component: "AccordionContent",
@@ -100,19 +148,9 @@ const metaAccordion = {
           component: "AccordionItem",
           styles: accordionItemStyles,
           children: [
-            {
-              type: "instance",
-              component: "AccordionHeader",
-              styles: accordionHeaderStyles,
-              children: [
-                {
-                  type: "instance",
-                  component: "AccordionTrigger",
-                  styles: accordionTriggerStyles,
-                  children: [{ type: "text", value: "Is it styled?" }]
-                }
-              ]
-            },
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it styled?" }]
+            }),
             {
               type: "instance",
               component: "AccordionContent",
@@ -131,19 +169,9 @@ const metaAccordion = {
           component: "AccordionItem",
           styles: accordionItemStyles,
           children: [
-            {
-              type: "instance",
-              component: "AccordionHeader",
-              styles: accordionHeaderStyles,
-              children: [
-                {
-                  type: "instance",
-                  component: "AccordionTrigger",
-                  styles: accordionTriggerStyles,
-                  children: [{ type: "text", value: "Is it animated?" }]
-                }
-              ]
-            },
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it animated?" }]
+            }),
             {
               type: "instance",
               component: "AccordionContent",
@@ -167,7 +195,8 @@ const metaAccordionItem = {
   icon: ItemIcon,
   requiredAncestors: ["Accordion"],
   indexWithinAncestor: "Accordion",
-  presetStyle
+  presetStyle,
+  label: "Item"
 };
 const metaAccordionHeader = {
   category: "hidden",
@@ -177,7 +206,8 @@ const metaAccordionHeader = {
   detachable: false,
   presetStyle: {
     h3: [h3, tc.my(0)].flat()
-  }
+  },
+  label: "Item Header"
 };
 const metaAccordionTrigger = {
   category: "hidden",
@@ -186,24 +216,9 @@ const metaAccordionTrigger = {
   requiredAncestors: ["AccordionHeader"],
   detachable: false,
   presetStyle: {
-    button: [
-      button,
-      {
-        property: "backgroundColor",
-        value: { type: "keyword", value: "transparent" }
-      },
-      {
-        property: "backgroundImage",
-        value: { type: "keyword", value: "none" }
-      },
-      {
-        property: "cursor",
-        value: { type: "keyword", value: "pointer" }
-      },
-      tc.px(0),
-      tc.border(0)
-    ].flat()
-  }
+    button: [button, buttonReset].flat()
+  },
+  label: "Item Trigger"
 };
 const metaAccordionContent = {
   category: "hidden",
@@ -211,7 +226,8 @@ const metaAccordionContent = {
   icon: ContentIcon,
   requiredAncestors: ["AccordionItem"],
   detachable: false,
-  presetStyle
+  presetStyle,
+  label: "Item Content"
 };
 const propsMetaAccordion = {
   props: propsAccordion,

package/lib/checkbox.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { Root, Indicator } from "@radix-ui/react-checkbox";
+const Checkbox = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Root, { ref, ...props });
+});
+const CheckboxIndicator = Indicator;
+export {
+  Checkbox,
+  CheckboxIndicator
+};

package/lib/checkbox.ws.js

@@ -0,0 +1,153 @@
+import {
+  CheckMarkIcon,
+  CheckboxCheckedIcon,
+  TriggerIcon
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { button, span } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
+import {
+  propsCheckbox,
+  propsCheckboxIndicator
+} from "./__generated__/checkbox.props";
+const metaCheckbox = {
+  category: "radix",
+  order: 101,
+  type: "container",
+  icon: CheckboxCheckedIcon,
+  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
+  states: [
+    ...defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  },
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      label: "Checkbox Field",
+      styles: [tc.flex(), tc.gap(2), tc.items("center")].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "Checkbox",
+          dataSources: {
+            checkboxChecked: { type: "variable", initialValue: false }
+          },
+          props: [
+            {
+              name: "checked",
+              type: "dataSource",
+              dataSourceName: "checkboxChecked"
+            },
+            {
+              name: "onCheckedChange",
+              type: "action",
+              value: [
+                {
+                  type: "execute",
+                  args: ["checked"],
+                  code: `checkboxChecked = checked`
+                }
+              ]
+            }
+          ],
+          // peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background
+          // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+          // disabled:cursor-not-allowed disabled:opacity-50
+          // data-[state=checked]:bg-primary
+          // data-[state=checked]:text-primary-foreground",
+          styles: [
+            // We are not supporting peer like styles yet
+            tc.h(4),
+            tc.w(4),
+            tc.shrink(0),
+            tc.rounded("sm"),
+            tc.border(),
+            tc.border("primary"),
+            tc.focusVisible(
+              [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+            ),
+            tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
+            tc.state(
+              [tc.bg("primary"), tc.text("primaryForeground")].flat(),
+              "[data-state=checked]"
+            )
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "CheckboxIndicator",
+              // flex items-center justify-center text-current
+              styles: [
+                tc.flex(),
+                tc.items("center"),
+                tc.justify("center"),
+                tc.text("current")
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "HtmlEmbed",
+                  label: "Indicator Icon",
+                  props: [
+                    {
+                      type: "string",
+                      name: "code",
+                      value: CheckMarkIcon
+                    }
+                  ],
+                  children: []
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "Text",
+          label: "Checkbox Label",
+          props: [{ name: "tag", type: "string", value: "span" }],
+          children: [{ type: "text", value: "Checkbox" }]
+        }
+      ]
+    }
+  ]
+};
+const metaCheckboxIndicator = {
+  category: "hidden",
+  type: "container",
+  detachable: false,
+  icon: TriggerIcon,
+  states: defaultStates,
+  presetStyle: {
+    span
+  }
+};
+const propsMetaCheckbox = {
+  props: propsCheckbox,
+  initialProps: ["id", "checked", "name", "required"]
+};
+const propsMetaCheckboxIndicator = {
+  props: propsCheckboxIndicator
+};
+export {
+  metaCheckbox,
+  metaCheckboxIndicator,
+  propsMetaCheckbox,
+  propsMetaCheckboxIndicator
+};