@webstudio-is/sdk-components-react-radix 0.195.0 → 0.197.0

package/lib/__generated__/select.props.js

@@ -19,6 +19,12 @@ const e = {
     type: "boolean",
     description: "Indicates whether the user can interact with the element."
   },
+  form: {
+    required: !1,
+    control: "text",
+    type: "string",
+    description: "Indicates the form that is the owner of the element."
+  },
   name: {
     required: !1,
     control: "text",

package/lib/__generated__/tabs.props.js

@@ -524,10 +524,10 @@ Mainly so arrow navigation is done accordingly (left & right vs. up & down)
     options: ["on", "off"]
   },
   value: {
-    description: "The value for the selected tab, if controlled",
     required: !1,
     control: "text",
-    type: "string"
+    type: "string",
+    description: "Defines a default value which will be displayed in the element on pageload."
   },
   vocab: { required: !1, control: "text", type: "string" }
 }, t = {

package/lib/accordion.template.js

@@ -0,0 +1,95 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { css as t, $ as o, PlaceholderValue as s } from "@webstudio-is/template";
+import { radix as i } from "./shared/proxy.js";
+import { borderWidth as h, colors as m, spacing as a, weights as f, height as g, width as p, transition as c, fontSize as w, fontSizeLineHeight as y } from "./shared/theme.js";
+import { ChevronDownIcon as b } from "@webstudio-is/icons/svg";
+const n = (d, l) => /* @__PURE__ */ r(
+  i.AccordionItem,
+  {
+    "ws:style": t`
+        border-bottom: ${h.DEFAULT} solid ${m.border};
+      `,
+    children: [
+      /* @__PURE__ */ e(
+        i.AccordionHeader,
+        {
+          "ws:style": t`
+          display: flex;
+        `,
+          children: /* @__PURE__ */ r(
+            i.AccordionTrigger,
+            {
+              "ws:style": t`
+            display: flex;
+            flex: 1 1 0;
+            align-items: center;
+            justify-content: between;
+            padding: ${a[4]} 0;
+            font-weight: ${f.medium};
+            --accordion-trigger-icon-transform: 0deg;
+            &:hover {
+              text-decoration-line: underline;
+            }
+            &[data-state="open"] {
+              --accordion-trigger-icon-transform: 180deg;
+            }
+          `,
+              children: [
+                /* @__PURE__ */ e(o.Text, { children: new s(d) }),
+                /* @__PURE__ */ e(
+                  o.Box,
+                  {
+                    "ws:label": "Icon Container",
+                    "ws:style": t`
+              rotate: --accordion-trigger-icon-transform;
+              height: ${g[4]};
+              width: ${p[4]};
+              flex-shrink: 0;
+              transition: ${c.all};
+              transition-duration: 200ms;
+            `,
+                    children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Chevron Icon", code: b })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        i.AccordionContent,
+        {
+          "ws:style": t`
+          overflow: hidden;
+          font-size: ${w.sm};
+          line-height: ${y.sm};
+          transition: ${c.all};
+          padding-bottom: ${a[4]};
+        `,
+          children: new s(l)
+        }
+      )
+    ]
+  }
+), v = {
+  category: "radix",
+  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.",
+  order: 3,
+  template: /* @__PURE__ */ r(i.Accordion, { collapsible: !0, defaultValue: "0", children: [
+    n(
+      "Is it accessible?",
+      "Yes. It adheres to the WAI-ARIA design pattern."
+    ),
+    n(
+      "Is it styled?",
+      "Yes. It comes with default styles that matches the other components' aesthetic."
+    ),
+    n(
+      "Is it animated?",
+      "Yes. It's animated by default, but you can disable it if you prefer."
+    )
+  ] })
+};
+export {
+  v as meta
+};

package/lib/accordion.ws.js

@@ -1,183 +1,24 @@
-import { AccordionIcon as a, ItemIcon as s, HeaderIcon as d, TriggerIcon as l, ContentIcon as p, ChevronDownIcon as m } from "@webstudio-is/icons/svg";
-import { defaultStates as y } from "@webstudio-is/react-sdk";
-import { h3 as h, button as A, div as g } from "@webstudio-is/sdk/normalize.css";
-import { borderB as u, overflow as I, text as f, pb as b, my as v, flex as e, items as C, justify as x, py as H, font as T, hover as q, underline as $, property as t, state as w, h as S, w as M, shrink as k, transition as Y, duration as B } from "./theme/tailwind-classes.js";
-import { buttonReset as P } from "./theme/styles.js";
-import { propsAccordion as R, propsAccordionItem as W, propsAccordionHeader as j, propsAccordionTrigger as D, propsAccordionContent as E } from "./__generated__/accordion.props.js";
-const r = {
-  div: g
-}, o = [u()].flat(), n = ({
-  children: i
-}) => ({
-  type: "instance",
-  component: "AccordionHeader",
-  // flex
-  styles: [e()].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: [
-        e(),
-        e(1),
-        C("center"),
-        x("between"),
-        H(4),
-        T("medium"),
-        q([$()].flat()),
-        t("--accordion-trigger-icon-transform", "0deg"),
-        w(
-          [t("--accordion-trigger-icon-transform", "180deg")],
-          "[data-state=open]"
-        )
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "Text",
-          children: i
-        },
-        {
-          type: "instance",
-          component: "Box",
-          label: "Icon Container",
-          // h-4 w-4 shrink-0 transition-transform duration-200
-          styles: [
-            t("rotate", "--accordion-trigger-icon-transform"),
-            S(4),
-            M(4),
-            k(0),
-            Y("all"),
-            B(200)
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Chevron Icon",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: m
-                }
-              ],
-              children: []
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}), c = [
-  I("hidden"),
-  f("sm"),
-  // transition does not work with display: none
-  // tc.transition("all"),
-  b(4)
-].flat(), K = {
-  category: "radix",
-  order: 3,
+import { AccordionIcon as t, ItemIcon as e, HeaderIcon as n, TriggerIcon as r, ContentIcon as c } from "@webstudio-is/icons/svg";
+import { defaultStates as i } from "@webstudio-is/sdk";
+import { h3 as a, button as p, div as s } from "@webstudio-is/sdk/normalize.css";
+import { buttonReset as d } from "./shared/preset-styles.js";
+import { propsAccordion as m, propsAccordionItem as l, propsAccordionHeader as A, propsAccordionTrigger as I, propsAccordionContent as g } from "./__generated__/accordion.props.js";
+const o = {
+  div: s
+}, f = {
   type: "container",
-  icon: a,
-  presetStyle: r,
-  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.",
+  icon: t,
+  presetStyle: o,
   constraints: [
     {
       relation: "descendant",
       component: { $eq: "AccordionItem" }
     }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Accordion",
-      props: [
-        { type: "boolean", name: "collapsible", value: !0 },
-        { type: "string", name: "defaultValue", value: "0" }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "AccordionItem",
-          styles: o,
-          children: [
-            n({
-              children: [
-                { type: "text", value: "Is it accessible?", placeholder: !0 }
-              ]
-            }),
-            {
-              type: "instance",
-              component: "AccordionContent",
-              styles: c,
-              children: [
-                {
-                  type: "text",
-                  value: "Yes. It adheres to the WAI-ARIA design pattern.",
-                  placeholder: !0
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "AccordionItem",
-          styles: o,
-          children: [
-            n({
-              children: [
-                { type: "text", value: "Is it styled?", placeholder: !0 }
-              ]
-            }),
-            {
-              type: "instance",
-              component: "AccordionContent",
-              styles: c,
-              children: [
-                {
-                  type: "text",
-                  value: "Yes. It comes with default styles that matches the other components' aesthetic.",
-                  placeholder: !0
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "AccordionItem",
-          styles: o,
-          children: [
-            n({
-              children: [
-                { type: "text", value: "Is it animated?", placeholder: !0 }
-              ]
-            }),
-            {
-              type: "instance",
-              component: "AccordionContent",
-              styles: c,
-              children: [
-                {
-                  type: "text",
-                  value: "Yes. It's animated by default, but you can disable it if you prefer.",
-                  placeholder: !0
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
   ]
-}, L = {
-  category: "hidden",
+}, v = {
   type: "container",
   label: "Item",
-  icon: s,
+  icon: e,
   constraints: [
     {
       relation: "ancestor",
@@ -193,12 +34,11 @@ const r = {
     }
   ],
   indexWithinAncestor: "Accordion",
-  presetStyle: r
-}, N = {
-  category: "hidden",
+  presetStyle: o
+}, H = {
   type: "container",
   label: "Item Header",
-  icon: d,
+  icon: n,
   constraints: [
     {
       relation: "ancestor",
@@ -210,19 +50,28 @@ const r = {
     }
   ],
   presetStyle: {
-    h3: [h, v(0)].flat()
+    h3: [
+      ...a,
+      {
+        property: "marginTop",
+        value: { type: "unit", unit: "px", value: 0 }
+      },
+      {
+        property: "marginBottom",
+        value: { type: "unit", unit: "px", value: 0 }
+      }
+    ]
   }
-}, Q = {
-  category: "hidden",
+}, T = {
   type: "container",
   label: "Item Trigger",
-  icon: l,
+  icon: r,
   constraints: {
     relation: "ancestor",
     component: { $eq: "AccordionHeader" }
   },
   states: [
-    ...y,
+    ...i,
     {
       category: "component-states",
       label: "Open",
@@ -230,40 +79,39 @@ const r = {
     }
   ],
   presetStyle: {
-    button: [A, P].flat()
+    button: [p, d].flat()
   }
-}, U = {
-  category: "hidden",
+}, C = {
   type: "container",
   label: "Item Content",
-  icon: p,
+  icon: c,
   constraints: {
     relation: "ancestor",
     component: { $eq: "AccordionItem" }
   },
-  presetStyle: r
-}, X = {
-  props: R,
+  presetStyle: o
+}, M = {
+  props: m,
   initialProps: ["value", "collapsible"]
-}, Z = {
-  props: W,
+}, x = {
+  props: l,
   initialProps: ["value"]
-}, _ = {
-  props: j
-}, ee = {
-  props: D
-}, te = {
-  props: E
+}, S = {
+  props: A
+}, h = {
+  props: I
+}, P = {
+  props: g
 };
 export {
-  K as metaAccordion,
-  U as metaAccordionContent,
-  N as metaAccordionHeader,
-  L as metaAccordionItem,
-  Q as metaAccordionTrigger,
-  X as propsMetaAccordion,
-  te as propsMetaAccordionContent,
-  _ as propsMetaAccordionHeader,
-  Z as propsMetaAccordionItem,
-  ee as propsMetaAccordionTrigger
+  f as metaAccordion,
+  C as metaAccordionContent,
+  H as metaAccordionHeader,
+  v as metaAccordionItem,
+  T as metaAccordionTrigger,
+  M as propsMetaAccordion,
+  P as propsMetaAccordionContent,
+  S as propsMetaAccordionHeader,
+  x as propsMetaAccordionItem,
+  h as propsMetaAccordionTrigger
 };

package/lib/checkbox.template.js

@@ -0,0 +1,63 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { CheckMarkIcon as a } from "@webstudio-is/icons/svg";
+import { css as o, $ as t, PlaceholderValue as l } from "@webstudio-is/template";
+import { radix as r } from "./shared/proxy.js";
+import { spacing as s, height as d, width as n, borderRadius as h, borderWidth as b, colors as i, boxShadow as m, opacity as p } from "./shared/theme.js";
+const y = {
+  category: "radix",
+  description: "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: /* @__PURE__ */ c(
+    r.Label,
+    {
+      "ws:label": "Checkbox Field",
+      "ws:style": o`
+        display: flex;
+        gap: ${s[2]};
+        align-items: center;
+      `,
+      children: [
+        /* @__PURE__ */ e(
+          r.Checkbox,
+          {
+            "ws:style": o`
+          height: ${d[4]};
+          width: ${n[4]};
+          flex-shrink: 0;
+          border-radius: ${h.sm};
+          border: ${b.DEFAULT} solid ${i.primary};
+          &:focus-visible {
+            outline: none;
+            box-shadow: ${m.ring};
+          }
+          &:disabled {
+            cursor: not-allowed;
+            opacity: ${p[50]};
+          }
+          &[data-state="checked"] {
+            background-color: ${i.primary};
+            color: ${i.primaryForeground};
+          }
+        `,
+            children: /* @__PURE__ */ e(
+              r.CheckboxIndicator,
+              {
+                "ws:style": o`
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: currentColor;
+          `,
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Indicator Icon", code: a })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(t.Text, { "ws:label": "Checkbox Label", tag: "span", children: new l("Checkbox") })
+      ]
+    }
+  )
+};
+export {
+  y as meta
+};

package/lib/checkbox.ws.js

@@ -1,21 +1,17 @@
-import { CheckboxCheckedIcon as a, CheckMarkIcon as r, TriggerIcon as s } from "@webstudio-is/icons/svg";
-import { defaultStates as n } from "@webstudio-is/react-sdk";
-import { button as i, span as p } from "@webstudio-is/sdk/normalize.css";
-import { flex as e, gap as l, items as t, h as d, w as h, shrink as k, rounded as m, border as o, focusVisible as b, outline as y, ring as u, disabled as x, cursor as C, opacity as g, state as f, bg as I, text as c, justify as v } from "./theme/tailwind-classes.js";
-import { buttonReset as w } from "./theme/styles.js";
-import { propsCheckbox as q, propsCheckboxIndicator as M } from "./__generated__/checkbox.props.js";
-const V = {
-  category: "radix",
-  order: 101,
+import { CheckboxCheckedIcon as t, TriggerIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { button as c, span as n } from "@webstudio-is/sdk/normalize.css";
+import { buttonReset as a } from "./shared/preset-styles.js";
+import { propsCheckbox as r, propsCheckboxIndicator as s } from "./__generated__/checkbox.props.js";
+const k = {
   type: "container",
   constraints: {
     relation: "descendant",
     component: { $eq: "CheckboxIndicator" }
   },
-  icon: a,
-  description: "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.",
+  icon: t,
   states: [
-    ...n,
+    ...e,
     {
       label: "Checked",
       selector: "[data-state=checked]",
@@ -28,121 +24,28 @@ const V = {
     }
   ],
   presetStyle: {
-    button: [i, w].flat()
-  },
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Checkbox Field",
-      styles: [e(), l(2), t("center")].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "Checkbox",
-          variables: {
-            checkboxChecked: { initialValue: !1 }
-          },
-          props: [
-            {
-              name: "checked",
-              type: "expression",
-              code: "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
-            d(4),
-            h(4),
-            k(0),
-            m("sm"),
-            o(),
-            o("primary"),
-            b(
-              [y(), u("ring", 2, "background", 2)].flat()
-            ),
-            x([C("not-allowed"), g(50)].flat()),
-            f(
-              [I("primary"), c("primaryForeground")].flat(),
-              "[data-state=checked]"
-            )
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "CheckboxIndicator",
-              // flex items-center justify-center text-current
-              styles: [
-                e(),
-                t("center"),
-                v("center"),
-                c("current")
-              ].flat(),
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Indicator Icon",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: r
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Checkbox Label",
-          props: [{ name: "tag", type: "string", value: "span" }],
-          children: [{ type: "text", value: "Checkbox", placeholder: !0 }]
-        }
-      ]
-    }
-  ]
-}, $ = {
-  category: "hidden",
+    button: [c, a].flat()
+  }
+}, l = {
   type: "container",
   constraints: {
     relation: "ancestor",
     component: { $eq: "Checkbox" }
   },
-  icon: s,
-  states: n,
+  icon: o,
+  states: e,
   presetStyle: {
-    span: p
+    span: n
   }
-}, j = {
-  props: q,
+}, b = {
+  props: r,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
-}, E = {
-  props: M
+}, C = {
+  props: s
 };
 export {
-  V as metaCheckbox,
-  $ as metaCheckboxIndicator,
-  j as propsMetaCheckbox,
-  E as propsMetaCheckboxIndicator
+  k as metaCheckbox,
+  l as metaCheckboxIndicator,
+  b as propsMetaCheckbox,
+  C as propsMetaCheckboxIndicator
 };

package/lib/collapsible.template.js

@@ -0,0 +1,16 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { $ as o, PlaceholderValue as l } from "@webstudio-is/template";
+import { radix as t } from "./shared/proxy.js";
+import { getButtonStyle as r } from "./shared/styles.js";
+const p = {
+  category: "radix",
+  description: "An interactive component which expands and collapses some content, triggered by a button.",
+  order: 5,
+  template: /* @__PURE__ */ n(t.Collapsible, { children: [
+    /* @__PURE__ */ e(t.CollapsibleTrigger, { children: /* @__PURE__ */ e(o.Button, { "ws:style": r("outline"), children: new l("Click to toggle content") }) }),
+    /* @__PURE__ */ e(t.CollapsibleContent, { children: /* @__PURE__ */ e(o.Text, { children: new l("Collapsible Content") }) })
+  ] })
+};
+export {
+  p as meta
+};