@webstudio-is/sdk-components-react-radix 0.185.0 → 0.191.0

package/lib/accordion.ws.js

@@ -0,0 +1,254 @@
+import { AccordionIcon as a, ItemIcon as s, HeaderIcon as l, TriggerIcon as d, 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 u } from "@webstudio-is/sdk/normalize.css";
+import { borderB as g, overflow as f, text as I, pb as b, my as v, flex as e, items as x, justify as C, py as H, font as q, hover as T, underline as w, property as t, state as S, h as M, w as $, 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: u
+}, o = [g()].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),
+        x("center"),
+        C("between"),
+        H(4),
+        q("medium"),
+        T([w()].flat()),
+        t("--accordion-trigger-icon-transform", "0deg"),
+        S(
+          [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"),
+            M(4),
+            $(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 = [
+  f("hidden"),
+  I("sm"),
+  // transition does not work with display: none
+  // tc.transition("all"),
+  b(4)
+].flat(), K = {
+  category: "radix",
+  order: 3,
+  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.",
+  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",
+  type: "container",
+  label: "Item",
+  icon: s,
+  requiredAncestors: ["Accordion"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Accordion" }
+  },
+  indexWithinAncestor: "Accordion",
+  presetStyle: r
+}, N = {
+  category: "hidden",
+  type: "container",
+  label: "Item Header",
+  icon: l,
+  requiredAncestors: ["AccordionItem"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "AccordionItem" }
+  },
+  detachable: !1,
+  presetStyle: {
+    h3: [h, v(0)].flat()
+  }
+}, Q = {
+  category: "hidden",
+  type: "container",
+  label: "Item Trigger",
+  icon: d,
+  requiredAncestors: ["AccordionHeader"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "AccordionHeader" }
+  },
+  detachable: !1,
+  states: [
+    ...y,
+    {
+      category: "component-states",
+      label: "Open",
+      selector: "[data-state=open]"
+    }
+  ],
+  presetStyle: {
+    button: [A, P].flat()
+  }
+}, U = {
+  category: "hidden",
+  type: "container",
+  label: "Item Content",
+  icon: p,
+  requiredAncestors: ["AccordionItem"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "AccordionItem" }
+  },
+  detachable: !1,
+  presetStyle: r
+}, X = {
+  props: R,
+  initialProps: ["value", "collapsible"]
+}, Z = {
+  props: W,
+  initialProps: ["value"]
+}, _ = {
+  props: j
+}, ee = {
+  props: D
+}, te = {
+  props: E
+};
+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
+};

package/lib/checkbox.js

@@ -0,0 +1,8 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { Root as m, Indicator as d } from "@radix-ui/react-checkbox";
+const p = f(({ checked: o, defaultChecked: r, ...t }, e) => /* @__PURE__ */ c(m, { ...t, ref: e, defaultChecked: o ?? r })), x = d;
+export {
+  p as Checkbox,
+  x as CheckboxIndicator
+};

package/lib/checkbox.ws.js

@@ -0,0 +1,141 @@
+import { CheckboxCheckedIcon as n, CheckMarkIcon as r, TriggerIcon as s } from "@webstudio-is/icons/svg";
+import { defaultStates as a } 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 b, rounded as k, border as o, focusVisible as m, outline as y, ring as u, disabled as x, cursor as f, opacity as g, state as C, 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 M, propsCheckboxIndicator as S } from "./__generated__/checkbox.props.js";
+const j = {
+  category: "radix",
+  order: 101,
+  type: "container",
+  icon: n,
+  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.",
+  states: [
+    ...a,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  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),
+            b(0),
+            k("sm"),
+            o(),
+            o("primary"),
+            m(
+              [y(), u("ring", 2, "background", 2)].flat()
+            ),
+            x([f("not-allowed"), g(50)].flat()),
+            C(
+              [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 }]
+        }
+      ]
+    }
+  ]
+}, q = {
+  category: "hidden",
+  type: "container",
+  detachable: !1,
+  icon: s,
+  states: a,
+  presetStyle: {
+    span: p
+  }
+}, E = {
+  props: M,
+  initialProps: ["id", "className", "name", "value", "required", "checked"]
+}, G = {
+  props: S
+};
+export {
+  j as metaCheckbox,
+  q as metaCheckboxIndicator,
+  E as propsMetaCheckbox,
+  G as propsMetaCheckboxIndicator
+};

package/lib/collapsible.js

@@ -0,0 +1,26 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as i, Children as l } from "react";
+import { Root as a, Trigger as c, Content as p } from "@radix-ui/react-collapsible";
+import { getClosestInstance as C } from "@webstudio-is/react-sdk/runtime";
+const h = a, g = i(({ children: n, ...o }, t) => {
+  const e = l.toArray(n)[0];
+  return /* @__PURE__ */ r(c, { asChild: !0, ref: t, ...o, children: e ?? /* @__PURE__ */ r("button", { children: "Add button" }) });
+}), u = p, s = "@webstudio-is/sdk-components-react-radix", x = {
+  onNavigatorSelect: (n, o) => {
+    for (const t of o.instancePath)
+      if (t.component === `${s}:CollapsibleContent`) {
+        const e = C(
+          o.instancePath,
+          t,
+          `${s}:Collapsible`
+        );
+        e && n.setMemoryProp(e, "open", !0);
+      }
+  }
+};
+export {
+  h as Collapsible,
+  u as CollapsibleContent,
+  g as CollapsibleTrigger,
+  x as hooksCollapsible
+};

package/lib/collapsible.ws.js

@@ -0,0 +1,92 @@
+import { CollapsibleIcon as t, TriggerIcon as o, ContentIcon as n } from "@webstudio-is/icons/svg";
+import { div as l } from "@webstudio-is/sdk/normalize.css";
+import { propsCollapsible as p, propsCollapsibleTrigger as i, propsCollapsibleContent as a } from "./__generated__/collapsible.props.js";
+import { getButtonStyles as r } from "./theme/styles.js";
+const e = {
+  div: l
+}, g = {
+  category: "radix",
+  order: 5,
+  type: "container",
+  presetStyle: e,
+  icon: t,
+  description: "An interactive component which expands and collapses some content, triggered by a button.",
+  template: [
+    {
+      type: "instance",
+      component: "Collapsible",
+      props: [],
+      children: [
+        {
+          type: "instance",
+          component: "CollapsibleTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: r("outline"),
+              children: [
+                {
+                  type: "text",
+                  value: "Click to toggle content",
+                  placeholder: !0
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "CollapsibleContent",
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [
+                {
+                  type: "text",
+                  value: "Collapsible Content",
+                  placeholder: !0
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, b = {
+  category: "hidden",
+  type: "container",
+  icon: o,
+  stylable: !1,
+  detachable: !1
+}, m = {
+  category: "hidden",
+  type: "container",
+  presetStyle: e,
+  icon: n,
+  detachable: !1
+}, y = {
+  props: {
+    ...p,
+    onOpenChange: {
+      type: "action",
+      control: "action",
+      required: !1
+    }
+  },
+  initialProps: ["open", "onOpenChange"]
+}, h = {
+  props: i
+}, u = {
+  props: a
+};
+export {
+  g as metaCollapsible,
+  m as metaCollapsibleContent,
+  b as metaCollapsibleTrigger,
+  y as propsMetaCollapsible,
+  u as propsMetaCollapsibleContent,
+  h as propsMetaCollapsibleTrigger
+};