@webstudio-is/sdk-components-react-radix 0.191.4 → 0.192.0

package/lib/accordion.ws.js

@@ -0,0 +1,250 @@
+import { AccordionIcon as i, ItemIcon as s, HeaderIcon as l, TriggerIcon as p, ContentIcon as d, 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 f, text as I, pb as b, my as v, flex as e, items as x, justify as C, py as H, font as T, hover as w, underline as S, property as t, state as M, h as q, 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: g
+}, o = [u()].flat(), n = ({
+  children: a
+}) => ({
+  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),
+        T("medium"),
+        w([S()].flat()),
+        t("--accordion-trigger-icon-transform", "0deg"),
+        M(
+          [t("--accordion-trigger-icon-transform", "180deg")],
+          "[data-state=open]"
+        )
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "Text",
+          children: a
+        },
+        {
+          type: "instance",
+          component: "Box",
+          label: "Icon Container",
+          // h-4 w-4 shrink-0 transition-transform duration-200
+          styles: [
+            t("rotate", "--accordion-trigger-icon-transform"),
+            q(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: i,
+  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,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Accordion" }
+  },
+  indexWithinAncestor: "Accordion",
+  presetStyle: r
+}, N = {
+  category: "hidden",
+  type: "container",
+  label: "Item Header",
+  icon: l,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "AccordionItem" }
+  },
+  detachable: !1,
+  presetStyle: {
+    h3: [h, v(0)].flat()
+  }
+}, Q = {
+  category: "hidden",
+  type: "container",
+  label: "Item Trigger",
+  icon: p,
+  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: d,
+  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
+};

package/lib/components.js

@@ -0,0 +1,62 @@
+import { Collapsible as t, CollapsibleContent as r, CollapsibleTrigger as i } from "./collapsible.js";
+import { Dialog as a, DialogClose as l, DialogContent as g, DialogDescription as p, DialogOverlay as c, DialogTitle as m, DialogTrigger as T } from "./dialog.js";
+import { Popover as C, PopoverContent as d, PopoverTrigger as f } from "./popover.js";
+import { Tooltip as b, TooltipContent as s, TooltipTrigger as v } from "./tooltip.js";
+import { Tabs as I, TabsContent as D, TabsList as M, TabsTrigger as N } from "./tabs.js";
+import { Label as A } from "./label.js";
+import { Accordion as L, AccordionContent as k, AccordionHeader as G, AccordionItem as P, AccordionTrigger as R } from "./accordion.js";
+import { NavigationMenu as y, NavigationMenuContent as H, NavigationMenuItem as O, NavigationMenuLink as j, NavigationMenuList as q, NavigationMenuTrigger as z, NavigationMenuViewport as B } from "./navigation-menu.js";
+import { Select as F, SelectContent as J, SelectItem as K, SelectItemIndicator as Q, SelectItemText as U, SelectTrigger as W, SelectValue as X, SelectViewport as Y } from "./select.js";
+import { Switch as _, SwitchThumb as $ } from "./switch.js";
+import { Checkbox as eo, CheckboxIndicator as to } from "./checkbox.js";
+import { RadioGroup as io, RadioGroupIndicator as no, RadioGroupItem as ao } from "./radio-group.js";
+export {
+  L as Accordion,
+  k as AccordionContent,
+  G as AccordionHeader,
+  P as AccordionItem,
+  R as AccordionTrigger,
+  eo as Checkbox,
+  to as CheckboxIndicator,
+  t as Collapsible,
+  r as CollapsibleContent,
+  i as CollapsibleTrigger,
+  a as Dialog,
+  l as DialogClose,
+  g as DialogContent,
+  p as DialogDescription,
+  c as DialogOverlay,
+  m as DialogTitle,
+  T as DialogTrigger,
+  A as Label,
+  y as NavigationMenu,
+  H as NavigationMenuContent,
+  O as NavigationMenuItem,
+  j as NavigationMenuLink,
+  q as NavigationMenuList,
+  z as NavigationMenuTrigger,
+  B as NavigationMenuViewport,
+  C as Popover,
+  d as PopoverContent,
+  f as PopoverTrigger,
+  io as RadioGroup,
+  no as RadioGroupIndicator,
+  ao as RadioGroupItem,
+  F as Select,
+  J as SelectContent,
+  K as SelectItem,
+  Q as SelectItemIndicator,
+  U as SelectItemText,
+  W as SelectTrigger,
+  X as SelectValue,
+  Y as SelectViewport,
+  _ as Switch,
+  $ as SwitchThumb,
+  I as Tabs,
+  D as TabsContent,
+  M as TabsList,
+  N as TabsTrigger,
+  b as Tooltip,
+  s as TooltipContent,
+  v as TooltipTrigger
+};

package/lib/dialog.js

@@ -0,0 +1,84 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as c, useContext as g, useEffect as h, Children as p, useRef as C } from "react";
+import * as i from "@radix-ui/react-dialog";
+import { ReactSdkContext as m, getClosestInstance as d } from "@webstudio-is/react-sdk/runtime";
+const D = (t) => {
+  const { target: e } = t;
+  return !(!(e instanceof HTMLAnchorElement) || e.hasAttribute("href") === !1 || e.href === "#" || e.hasAttribute("target") && e.target === "_blank" || t.ctrlKey || t.metaKey);
+}, A = c((t, e) => {
+  const { open: o, onOpenChange: r } = t, { renderer: s } = g(m);
+  return h(() => {
+    if (s !== void 0 || o === !1)
+      return;
+    const a = (l) => {
+      const { target: u } = l;
+      if (D(l) !== !1) {
+        if (!(u instanceof HTMLAnchorElement))
+          return !1;
+        u.closest('[role="dialog"]') && (r == null || r(!1));
+      }
+    };
+    return window.addEventListener("click", a), () => window.removeEventListener("click", a);
+  }, [o, r, s]), /* @__PURE__ */ n(i.Root, { ...t });
+}), E = c(({ children: t, ...e }, o) => {
+  const r = p.toArray(t)[0];
+  return /* @__PURE__ */ n(i.Trigger, { ref: o, asChild: !0, ...e, children: r ?? /* @__PURE__ */ n("button", { children: "Add button or link" }) });
+}), P = c((t, e) => /* @__PURE__ */ n(i.DialogPortal, { children: /* @__PURE__ */ n(i.Overlay, { ref: e, ...t }) })), T = c((t, e) => {
+  const o = C(!1), { renderer: r } = g(m);
+  return h(() => {
+    if (r !== void 0)
+      return;
+    o.current = !1;
+    const s = (a) => {
+      const { target: l } = a;
+      if (D(a) !== !1) {
+        if (!(l instanceof HTMLAnchorElement))
+          return !1;
+        l.closest('[role="dialog"]') && (o.current = !0);
+      }
+    };
+    return window.addEventListener("click", s), () => window.removeEventListener("click", s);
+  }, [r]), /* @__PURE__ */ n(
+    i.Content,
+    {
+      ref: e,
+      ...t,
+      onCloseAutoFocus: (s) => {
+        o.current && s.preventDefault();
+      }
+    }
+  );
+}), L = i.Close, v = "h1", b = c(({ tag: t = v, children: e, ...o }, r) => /* @__PURE__ */ n(i.DialogTitle, { asChild: !0, children: /* @__PURE__ */ n(t, { ref: r, ...o, children: e }) })), x = i.Description, f = "@webstudio-is/sdk-components-react-radix", M = {
+  onNavigatorUnselect: (t, e) => {
+    for (const o of e.instancePath)
+      if (o.component === `${f}:DialogOverlay`) {
+        const r = d(
+          e.instancePath,
+          o,
+          `${f}:Dialog`
+        );
+        r && t.setMemoryProp(r, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (t, e) => {
+    for (const o of e.instancePath)
+      if (o.component === `${f}:DialogOverlay`) {
+        const r = d(
+          e.instancePath,
+          o,
+          `${f}:Dialog`
+        );
+        r && t.setMemoryProp(r, "open", !0);
+      }
+  }
+};
+export {
+  A as Dialog,
+  L as DialogClose,
+  T as DialogContent,
+  x as DialogDescription,
+  P as DialogOverlay,
+  b as DialogTitle,
+  E as DialogTrigger,
+  M as hooksDialog
+};