@webstudio-is/sdk-components-react-radix 0.0.0-021f2d4

package/lib/navigation-menu.ws.js

@@ -0,0 +1,124 @@
+import { NavigationMenuIcon as t, ListIcon as e, ListItemIcon as o, TriggerIcon as i, ContentIcon as a, BoxIcon as r, ViewportIcon as p } from "@webstudio-is/icons/svg";
+import { div as n } from "@webstudio-is/sdk/normalize.css";
+import { propsNavigationMenu as s, propsNavigationMenuItem as c, propsNavigationMenuTrigger as M, propsNavigationMenuContent as g, propsNavigationMenuLink as u, propsNavigationMenuList as v, propsNavigationMenuViewport as N } from "./__generated__/navigation-menu.props.js";
+const y = {
+  type: "container",
+  icon: t,
+  presetStyle: {
+    div: n
+  },
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "NavigationMenuList" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "NavigationMenuViewport" }
+    }
+  ]
+}, L = {
+  type: "container",
+  icon: e,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "NavigationMenu" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "NavigationMenuItem" }
+    }
+  ],
+  presetStyle: {
+    div: n
+  },
+  label: "Menu List"
+}, $ = {
+  type: "container",
+  icon: o,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenuList" }
+  },
+  presetStyle: {
+    div: n
+  },
+  indexWithinAncestor: "NavigationMenu",
+  label: "Menu Item"
+}, d = {
+  type: "container",
+  icon: i,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenuItem" }
+  },
+  label: "Menu Trigger"
+}, q = {
+  type: "container",
+  icon: a,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenuItem" }
+  },
+  indexWithinAncestor: "NavigationMenu",
+  presetStyle: {
+    div: n
+  },
+  label: "Menu Content"
+}, b = {
+  type: "container",
+  icon: r,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "NavigationMenu" }
+    },
+    {
+      relation: "ancestor",
+      component: { $in: ["NavigationMenuContent", "NavigationMenuItem"] }
+    }
+  ],
+  label: "Accessible Link Wrapper"
+}, w = {
+  type: "container",
+  icon: p,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenu" }
+  },
+  presetStyle: {
+    div: n
+  },
+  label: "Menu Viewport"
+}, C = {
+  props: s
+}, V = {
+  props: c
+}, S = {
+  props: M
+}, T = {
+  props: g
+}, k = {
+  props: u
+}, x = {
+  props: v
+}, f = {
+  props: N
+};
+export {
+  y as metaNavigationMenu,
+  q as metaNavigationMenuContent,
+  $ as metaNavigationMenuItem,
+  b as metaNavigationMenuLink,
+  L as metaNavigationMenuList,
+  d as metaNavigationMenuTrigger,
+  w as metaNavigationMenuViewport,
+  C as propsMetaNavigationMenu,
+  T as propsMetaNavigationMenuContent,
+  V as propsMetaNavigationMenuItem,
+  k as propsMetaNavigationMenuLink,
+  x as propsMetaNavigationMenuList,
+  S as propsMetaNavigationMenuTrigger,
+  f as propsMetaNavigationMenuViewport
+};

package/lib/popover.js

@@ -0,0 +1,48 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as c, Children as P } from "react";
+import * as s from "@radix-ui/react-popover";
+import { getClosestInstance as a } from "@webstudio-is/react-sdk/runtime";
+const l = c((o, t) => /* @__PURE__ */ n(s.Root, { ...o })), v = c(({ children: o, ...t }, e) => {
+  const r = P.toArray(o)[0];
+  return /* @__PURE__ */ n(s.Trigger, { asChild: !0, ref: e, ...t, children: r ?? /* @__PURE__ */ n("button", { children: "Add button or link" }) });
+}), h = c(
+  ({ sideOffset: o = 4, align: t = "center", hideWhenDetached: e = !0, ...r }, p) => /* @__PURE__ */ n(s.Portal, { children: /* @__PURE__ */ n(
+    s.Content,
+    {
+      ref: p,
+      align: "center",
+      sideOffset: o,
+      hideWhenDetached: e,
+      ...r
+    }
+  ) })
+), i = "@webstudio-is/sdk-components-react-radix", g = {
+  onNavigatorUnselect: (o, t) => {
+    for (const e of t.instancePath)
+      if (e.component === `${i}:PopoverContent`) {
+        const r = a(
+          t.instancePath,
+          e,
+          `${i}:Popover`
+        );
+        r && o.setMemoryProp(r, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (o, t) => {
+    for (const e of t.instancePath)
+      if (e.component === `${i}:PopoverContent`) {
+        const r = a(
+          t.instancePath,
+          e,
+          `${i}:Popover`
+        );
+        r && o.setMemoryProp(r, "open", !0);
+      }
+  }
+};
+export {
+  l as Popover,
+  h as PopoverContent,
+  v as PopoverTrigger,
+  g as hooksPopover
+};

package/lib/popover.template.js

@@ -0,0 +1,33 @@
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { $ as t, PlaceholderValue as d, css as n } from "@webstudio-is/template";
+import { radix as r } from "./shared/proxy.js";
+import { getButtonStyle as l } from "./shared/styles.js";
+import { zIndex as a, width as p, borderRadius as s, borderWidth as c, colors as e, spacing as m, boxShadow as h } from "./shared/theme.js";
+const w = {
+  category: "radix",
+  description: "Displays rich content in a portal, triggered by a button.",
+  order: 6,
+  template: /* @__PURE__ */ i(r.Popover, { children: [
+    /* @__PURE__ */ o(r.PopoverTrigger, { children: /* @__PURE__ */ o(t.Button, { "ws:style": l("outline"), children: new d("Button") }) }),
+    /* @__PURE__ */ o(
+      r.PopoverContent,
+      {
+        "ws:style": n`
+          z-index: ${a[50]};
+          width: ${p[72]};
+          border-radius: ${s.md};
+          border: ${c.DEFAULT} solid ${e.border};
+          background-color: ${e.popover};
+          padding: ${m[4]};
+          color: ${e.popoverForeground};
+          box-shadow: ${h.md};
+          outline: none;
+        `,
+        children: /* @__PURE__ */ o(t.Text, { children: new d("The text you can edit") })
+      }
+    )
+  ] })
+};
+export {
+  w as meta
+};

package/lib/popover.ws.js

@@ -0,0 +1,50 @@
+import { TriggerIcon as o, ContentIcon as e, PopoverIcon as n } from "@webstudio-is/icons/svg";
+import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { propsPopover as r, propsPopoverTrigger as p, propsPopoverContent as i } from "./__generated__/popover.props.js";
+const P = {
+  type: "container",
+  icon: o,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Popover" }
+  }
+}, v = {
+  type: "container",
+  presetStyle: {
+    div: t
+  },
+  icon: e,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Popover" }
+  }
+}, m = {
+  type: "container",
+  icon: n,
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "PopoverTrigger" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "PopoverContent" }
+    }
+  ]
+}, g = {
+  props: r,
+  initialProps: ["open"]
+}, l = {
+  props: p
+}, d = {
+  props: i,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+};
+export {
+  m as metaPopover,
+  v as metaPopoverContent,
+  P as metaPopoverTrigger,
+  g as propsMetaPopover,
+  d as propsMetaPopoverContent,
+  l as propsMetaPopoverTrigger
+};

package/lib/props.js

@@ -0,0 +1,62 @@
+import { propsMetaCollapsible as a, propsMetaCollapsibleContent as t, propsMetaCollapsibleTrigger as r } from "./collapsible.ws.js";
+import { propsMetaDialog as s, propsMetaDialogClose as i, propsMetaDialogContent as n, propsMetaDialogDescription as l, propsMetaDialogOverlay as M, propsMetaDialogTitle as g, propsMetaDialogTrigger as c } from "./dialog.ws.js";
+import { propsMetaPopover as C, propsMetaPopoverContent as m, propsMetaPopoverTrigger as d } from "./popover.ws.js";
+import { propsMetaTooltip as v, propsMetaTooltipContent as b, propsMetaTooltipTrigger as S } from "./tooltip.ws.js";
+import { propsMetaTabs as I, propsMetaTabsContent as D, propsMetaTabsList as N, propsMetaTabsTrigger as f } from "./tabs.ws.js";
+import { propsMeta as A } from "./label.ws.js";
+import { propsMetaAccordion as L, propsMetaAccordionContent as k, propsMetaAccordionHeader as G, propsMetaAccordionItem as P, propsMetaAccordionTrigger as R } from "./accordion.ws.js";
+import { propsMetaNavigationMenu as y, propsMetaNavigationMenuContent as H, propsMetaNavigationMenuItem as O, propsMetaNavigationMenuLink as j, propsMetaNavigationMenuList as q, propsMetaNavigationMenuTrigger as z, propsMetaNavigationMenuViewport as B } from "./navigation-menu.ws.js";
+import { propsMetaSelect as F, propsMetaSelectContent as J, propsMetaSelectItem as K, propsMetaSelectItemIndicator as Q, propsMetaSelectItemText as U, propsMetaSelectTrigger as W, propsMetaSelectValue as X, propsMetaSelectViewport as Y } from "./select.ws.js";
+import { propsMetaSwitch as _, propsMetaSwitchThumb as $ } from "./switch.ws.js";
+import { propsMetaCheckbox as eo, propsMetaCheckboxIndicator as ao } from "./checkbox.ws.js";
+import { propsMetaRadioGroup as ro, propsMetaRadioGroupIndicator as po, propsMetaRadioGroupItem as so } from "./radio-group.ws.js";
+export {
+  L as Accordion,
+  k as AccordionContent,
+  G as AccordionHeader,
+  P as AccordionItem,
+  R as AccordionTrigger,
+  eo as Checkbox,
+  ao as CheckboxIndicator,
+  a as Collapsible,
+  t as CollapsibleContent,
+  r as CollapsibleTrigger,
+  s as Dialog,
+  i as DialogClose,
+  n as DialogContent,
+  l as DialogDescription,
+  M as DialogOverlay,
+  g as DialogTitle,
+  c 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,
+  m as PopoverContent,
+  d as PopoverTrigger,
+  ro as RadioGroup,
+  po as RadioGroupIndicator,
+  so 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,
+  N as TabsList,
+  f as TabsTrigger,
+  v as Tooltip,
+  b as TooltipContent,
+  S as TooltipTrigger
+};

package/lib/radio-group.js

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Root as d, Item as p, Indicator as e } from "@radix-ui/react-radio-group";
+const u = m(({ value: o, defaultValue: r, ...t }, a) => /* @__PURE__ */ i(d, { ...t, defaultValue: o ?? r, ref: a })), R = p, s = e;
+export {
+  u as RadioGroup,
+  s as RadioGroupIndicator,
+  R as RadioGroupItem
+};

package/lib/radio-group.template.js

@@ -0,0 +1,66 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { css as t, $ as a, PlaceholderValue as n } from "@webstudio-is/template";
+import { DotIcon as m } from "@webstudio-is/icons/svg";
+import { radix as e } from "./shared/proxy.js";
+import { spacing as d, height as p, width as b, borderRadius as h, borderWidth as u, colors as i, boxShadow as f, opacity as w } from "./shared/theme.js";
+const r = ({
+  value: c,
+  label: s
+}) => /* @__PURE__ */ l(
+  e.Label,
+  {
+    "ws:style": t`
+      display: flex;
+      align-items: center;
+      gap: ${d[2]};
+    `,
+    children: [
+      /* @__PURE__ */ o(
+        e.RadioGroupItem,
+        {
+          value: c,
+          "ws:style": t`
+        aspect-ratio: 1 / 1;
+        height: ${p[4]};
+        width: ${b[4]};
+        border-radius: ${h.full};
+        border: ${u.DEFAULT} solid ${i.primary};
+        color: ${i.primary};
+        &:focus-visible {
+          outline: none;
+          box-shadow: ${f.ring};
+        }
+        &:disabled {
+          cursor: not-allowed;
+          opacity: ${w[50]};
+        }
+      `,
+          children: /* @__PURE__ */ o(e.RadioGroupIndicator, { children: /* @__PURE__ */ o(a.HtmlEmbed, { "ws:label": "Indicator Icon", code: m }) })
+        }
+      ),
+      /* @__PURE__ */ o(a.Text, { children: new n(s) })
+    ]
+  }
+), R = {
+  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: /* @__PURE__ */ l(
+    e.RadioGroup,
+    {
+      "ws:style": t`
+        display: flex;
+        flex-direction: column;
+        gap: ${d[2]};
+      `,
+      children: [
+        r({ value: "default", label: "Default" }),
+        r({ value: "comfortable", label: "Comfortable" }),
+        r({ value: "compact", label: "Compact" })
+      ]
+    }
+  )
+};
+export {
+  R as meta
+};

package/lib/radio-group.ws.js

@@ -0,0 +1,73 @@
+import { RadioGroupIcon as t, ItemIcon as e, TriggerIcon as a } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { div as r, button as n, span as p } from "@webstudio-is/sdk/normalize.css";
+import { buttonReset as s } from "./shared/preset-styles.js";
+import { propsRadioGroup as i, propsRadioGroupItem as c, propsRadioGroupIndicator as d } from "./__generated__/radio-group.props.js";
+const I = {
+  type: "container",
+  constraints: {
+    relation: "descendant",
+    component: { $eq: "RadioGroupItem" }
+  },
+  icon: t,
+  states: [
+    ...o,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    div: r
+  }
+}, y = {
+  type: "container",
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "RadioGroup" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "RadioGroupIndicator" }
+    }
+  ],
+  icon: e,
+  states: o,
+  presetStyle: {
+    button: [n, s].flat()
+  }
+}, f = {
+  type: "container",
+  icon: a,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "RadioGroupItem" }
+  },
+  states: o,
+  presetStyle: {
+    span: p
+  }
+}, b = {
+  props: i,
+  initialProps: ["id", "className", "name", "value", "required"]
+}, q = {
+  props: c,
+  initialProps: ["value"]
+}, g = {
+  props: d
+};
+export {
+  I as metaRadioGroup,
+  f as metaRadioGroupIndicator,
+  y as metaRadioGroupItem,
+  b as propsMetaRadioGroup,
+  g as propsMetaRadioGroupIndicator,
+  q as propsMetaRadioGroupItem
+};

package/lib/select.js

@@ -0,0 +1,46 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as s, useContext as l } from "react";
+import { Root as m, Trigger as p, Value as f, Portal as S, Content as d, Viewport as u, Item as I, ItemIndicator as P, ItemText as g } from "@radix-ui/react-select";
+import { ReactSdkContext as x, getClosestInstance as i } from "@webstudio-is/react-sdk/runtime";
+const v = s(
+  ({ value: e, defaultValue: t, ...o }, n) => /* @__PURE__ */ c(m, { ...o, defaultValue: e ?? t })
+), T = s((e, t) => {
+  const { renderer: o } = l(x);
+  return /* @__PURE__ */ c(p, { onPointerDown: o === "canvas" ? (a) => {
+    a.preventDefault();
+  } : void 0, ref: t, ...e });
+}), $ = s((e, t) => /* @__PURE__ */ c(f, { ref: t, ...e })), k = s((e, t) => /* @__PURE__ */ c(S, { children: /* @__PURE__ */ c(d, { ref: t, ...e, position: "popper" }) })), D = u, R = I, y = P, M = g, r = "@webstudio-is/sdk-components-react-radix", N = {
+  onNavigatorUnselect: (e, t) => {
+    for (const o of t.instancePath)
+      if (o.component === `${r}:SelectContent`) {
+        const n = i(
+          t.instancePath,
+          o,
+          `${r}:Select`
+        );
+        n && e.setMemoryProp(n, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (e, t) => {
+    for (const o of t.instancePath)
+      if (o.component === `${r}:SelectContent`) {
+        const n = i(
+          t.instancePath,
+          o,
+          `${r}:Select`
+        );
+        n && e.setMemoryProp(n, "open", !0);
+      }
+  }
+};
+export {
+  v as Select,
+  k as SelectContent,
+  R as SelectItem,
+  y as SelectItemIndicator,
+  M as SelectItemText,
+  T as SelectTrigger,
+  $ as SelectValue,
+  D as SelectViewport,
+  N as hooksSelect
+};

package/lib/select.template.js

@@ -0,0 +1,121 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { css as i, $ as f, PlaceholderValue as w } from "@webstudio-is/template";
+import { radix as o } from "./shared/proxy.js";
+import { height as h, width as d, borderRadius as s, borderWidth as c, colors as e, spacing as t, fontSize as m, fontSizeLineHeight as $, boxShadow as a, opacity as g, zIndex as b } from "./shared/theme.js";
+import { CheckMarkIcon as y } from "@webstudio-is/icons/svg";
+const l = (u, p) => /* @__PURE__ */ n(
+  o.SelectItem,
+  {
+    value: u,
+    "ws:style": i`
+        position: relative;
+        display: flex;
+        width: ${d.full};
+        cursor: default;
+        user-select: none;
+        align-items: center;
+        border-radius: ${s.md};
+        padding: ${t[1.5]} ${t[2]} ${t[1.5]} ${t[8]};
+        font-size: ${m.sm};
+        line-height: ${$.sm};
+        outline: none;
+        &:focus {
+          background-color: ${e.accent};
+          color: ${e.accentForeground};
+        }
+        &[data-disabled] {
+          pointer-events: none;
+          opacity: ${g[50]};
+        }
+      `,
+    children: [
+      /* @__PURE__ */ r(
+        o.SelectItemIndicator,
+        {
+          "ws:style": i`
+          position: absolute;
+          left: ${t[2]};
+          display: flex;
+          height: ${h[3.5]};
+          width: ${d[3.5]};
+          align-items: center;
+          justify-content: center;
+        `,
+          children: /* @__PURE__ */ r(f.HtmlEmbed, { "ws:label": "Indicator Icon", code: y })
+        }
+      ),
+      /* @__PURE__ */ r(o.SelectItemText, { children: new w(p) })
+    ]
+  }
+), z = {
+  category: "radix",
+  description: "Use within a form to give your users a list of options to choose from.",
+  order: 10,
+  template: /* @__PURE__ */ n(o.Select, { children: [
+    /* @__PURE__ */ r(
+      o.SelectTrigger,
+      {
+        "ws:style": i`
+          display: flex;
+          height: ${h[10]};
+          width: ${d.full};
+          align-items: center;
+          justify-content: between;
+          border-radius: ${s.md};
+          border: ${c.DEFAULT} solid ${e.input};
+          background-color: ${e.background};
+          padding: ${t[2]} ${t[3]};
+          font-size: ${m.sm};
+          line-height: ${$.sm};
+          &::placeholder {
+            color: ${e.mutedForeground};
+          }
+          &:focus-visible {
+            outline: none;
+            box-shadow: ${a.ring};
+          }
+          &:disabled {
+            cursor: not-allowed;
+            opacity: ${g[50]};
+          }
+        `,
+        children: /* @__PURE__ */ r(o.SelectValue, { placeholder: "Theme" })
+      }
+    ),
+    /* @__PURE__ */ r(
+      o.SelectContent,
+      {
+        "ws:style": i`
+          position: relative;
+          z-index: ${b[50]};
+          min-width: 8rem;
+          overflow: hidden;
+          border-radius: ${s.md};
+          border: ${c.DEFAULT} solid ${e.border};
+          background-color: ${e.popover};
+          color: ${e.popoverForeground};
+          box-shadow: ${a.md};
+        `,
+        children: /* @__PURE__ */ n(
+          o.SelectViewport,
+          {
+            "ws:style": i`
+            padding: ${t[1]};
+            height: var(--radix-select-trigger-height);
+            width: ${d.full};
+            min-width: var(--radix-select-trigger-width);
+          `,
+            children: [
+              l("light", "Light"),
+              l("dark", "Dark"),
+              l("system", "System")
+            ]
+          }
+        )
+      }
+    )
+  ] })
+};
+export {
+  z as meta
+};