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

package/lib/radio-group.ws.js

@@ -0,0 +1,159 @@
+import { RadioCheckedIcon as c, ItemIcon as i, TriggerIcon as s, RadioDotIcon as l } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { div as d, button as u, span as m } from "@webstudio-is/sdk/normalize.css";
+import { flex as t, gap as r, items as y, aspect as b, h as f, w as h, rounded as G, border as a, text as R, focusVisible as I, outline as g, ring as v, disabled as k, cursor as x, opacity as V } from "./theme/tailwind-classes.js";
+import { buttonReset as C } from "./theme/styles.js";
+import { propsRadioGroup as q, propsRadioGroupItem as w, propsRadioGroupIndicator as S } from "./__generated__/radio-group.props.js";
+const e = ({
+  value: n,
+  label: p
+}) => ({
+  type: "instance",
+  component: "Label",
+  // flex items-center space-x-2
+  styles: [t(), y("center"), r(2)].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "RadioGroupItem",
+      props: [{ name: "value", type: "string", value: n }],
+      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
+      // focus:outline-none
+      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+      // disabled:cursor-not-allowed disabled:opacity-50
+      styles: [
+        b("square"),
+        f(4),
+        h(4),
+        G("full"),
+        a(),
+        a("primary"),
+        R("primary"),
+        I(
+          [g(), v("ring", 2, "background", 2)].flat()
+        ),
+        k([x("not-allowed"), V(50)].flat())
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "RadioGroupIndicator",
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              label: "Indicator Icon",
+              props: [
+                {
+                  type: "string",
+                  name: "code",
+                  value: l
+                }
+              ],
+              children: []
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: "instance",
+      component: "Text",
+      children: [{ type: "text", value: p, placeholder: !0 }]
+    }
+  ]
+}), H = {
+  category: "radix",
+  order: 100,
+  type: "container",
+  description: "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
+  icon: c,
+  states: [
+    ...o,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    div: d
+  },
+  template: [
+    {
+      type: "instance",
+      component: "RadioGroup",
+      variables: {
+        radioGroupValue: { initialValue: "" }
+      },
+      // grid gap-2
+      styles: [t(), t("col"), r(2)].flat(),
+      props: [
+        {
+          type: "expression",
+          name: "value",
+          code: "radioGroupValue"
+        },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: "radioGroupValue = value"
+            }
+          ]
+        }
+      ],
+      children: [
+        e({ value: "default", label: "Default" }),
+        e({ value: "comfortable", label: "Comfortable" }),
+        e({ value: "compact", label: "Compact" })
+      ]
+    }
+  ]
+}, L = {
+  category: "hidden",
+  type: "container",
+  requiredAncestors: ["RadioGroup"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "RadioGroup" }
+  },
+  icon: i,
+  states: o,
+  presetStyle: {
+    button: [u, C].flat()
+  }
+}, N = {
+  category: "hidden",
+  type: "container",
+  detachable: !1,
+  icon: s,
+  states: o,
+  presetStyle: {
+    span: m
+  }
+}, U = {
+  props: q,
+  initialProps: ["id", "className", "name", "value", "required"]
+}, $ = {
+  props: w,
+  initialProps: ["value"]
+}, j = {
+  props: S
+};
+export {
+  H as metaRadioGroup,
+  N as metaRadioGroupIndicator,
+  L as metaRadioGroupItem,
+  U as propsMetaRadioGroup,
+  j as propsMetaRadioGroupIndicator,
+  $ 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.ws.js

@@ -0,0 +1,308 @@
+import { SelectIcon as V, TriggerIcon as w, FormTextFieldIcon as T, ContentIcon as M, ViewportIcon as q, ItemIcon as C, CheckMarkIcon as d, TextIcon as k } from "@webstudio-is/icons/svg";
+import { button as F, span as s, div as A } from "@webstudio-is/sdk/normalize.css";
+import { flex as c, h as m, w as t, items as l, justify as u, rounded as a, border as o, bg as p, px as P, py as y, text as e, state as h, focus as S, outline as g, ring as $, disabled as E, cursor as I, opacity as f, relative as v, z as W, property as n, overflow as j, shadow as z, p as D, select as H, pl as L, pr as U, pointerEvents as B, absolute as G, left as J } from "./theme/tailwind-classes.js";
+import { propsSelect as K, propsSelectTrigger as N, propsSelectValue as O, propsSelectContent as Q, propsSelectViewport as R, propsSelectItem as X, propsSelectItemIndicator as Y, propsSelectItemText as Z } from "./__generated__/select.props.js";
+const i = {
+  div: A
+}, r = ({
+  props: b,
+  children: x
+}) => ({
+  type: "instance",
+  component: "SelectItem",
+  props: b,
+  // relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none
+  // focus:bg-accent focus:text-accent-foreground
+  // data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+  styles: [
+    v(),
+    c(),
+    t("full"),
+    I("default"),
+    H(),
+    l("center"),
+    a("md"),
+    y(1.5),
+    L(8),
+    U(2),
+    e("sm"),
+    g(),
+    S([p("accent"), e("accentForeground")].flat()),
+    h(
+      [B("none"), f(50)].flat(),
+      "[data-disabled]"
+    )
+  ].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "SelectItemIndicator",
+      // absolute left-2 flex h-3.5 w-3.5 items-center justify-center
+      styles: [
+        G(),
+        J(2),
+        c(),
+        m(3.5),
+        t(3.5),
+        l("center"),
+        u("center")
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "HtmlEmbed",
+          label: "Indicator Icon",
+          props: [
+            {
+              type: "string",
+              name: "code",
+              value: d
+            }
+          ],
+          children: []
+        }
+      ]
+    },
+    {
+      type: "instance",
+      component: "SelectItemText",
+      children: x
+    }
+  ]
+}), ne = {
+  category: "radix",
+  order: 10,
+  type: "container",
+  icon: V,
+  stylable: !1,
+  description: "Use within a form to give your users a list of options to choose from.",
+  template: [
+    {
+      type: "instance",
+      component: "Select",
+      variables: {
+        selectValue: { initialValue: "" }
+      },
+      props: [
+        {
+          name: "value",
+          type: "expression",
+          code: "selectValue"
+        },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["value"], code: "selectValue = value" }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "SelectTrigger",
+          // flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background
+          // placeholder:text-muted-foreground
+          // focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+          // disabled:cursor-not-allowed disabled:opacity-50
+          styles: [
+            c(),
+            m(10),
+            t("full"),
+            l("center"),
+            u("between"),
+            a("md"),
+            o(),
+            o("input"),
+            p("background"),
+            P(3),
+            y(2),
+            e("sm"),
+            h([e("mutedForeground")].flat(), "::placeholder"),
+            S(
+              [g(), $("ring", 2, "background", 2)].flat()
+            ),
+            E([I("not-allowed"), f(50)].flat())
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "SelectValue",
+              props: [{ name: "placeholder", type: "string", value: "Theme" }],
+              children: []
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "SelectContent",
+          // relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md
+          // data-[state=open]:animate-in
+          // data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+          // data-[state=open]:fade-in-0
+          // data-[state=closed]:zoom-out-95
+          // data-[state=open]:zoom-in-95
+          // data-[side=bottom]:slide-in-from-top-2
+          // data-[side=left]:slide-in-from-right-2
+          // data-[side=right]:slide-in-from-left-2
+          // data-[side=top]:slide-in-from-bottom-2
+          // position=popper
+          // data-[side=bottom]:translate-y-1
+          // data-[side=left]:-translate-x-1
+          // data-[side=right]:translate-x-1
+          // data-[side=top]:-translate-y-1
+          styles: [
+            v(),
+            W(50),
+            n("minWidth", "8rem"),
+            j("hidden"),
+            a("md"),
+            o(),
+            p("popover"),
+            e("popoverForeground"),
+            z("md")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "SelectViewport",
+              // p-1
+              // position=popper
+              // h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]
+              styles: [
+                D(1),
+                n("height", "--radix-select-trigger-height"),
+                t("full"),
+                n("minWidth", "--radix-select-trigger-width")
+              ].flat(),
+              children: [
+                r({
+                  props: [{ name: "value", type: "string", value: "light" }],
+                  children: [
+                    { type: "text", value: "Light", placeholder: !0 }
+                  ]
+                }),
+                r({
+                  props: [{ name: "value", type: "string", value: "dark" }],
+                  children: [
+                    { type: "text", value: "Dark", placeholder: !0 }
+                  ]
+                }),
+                r({
+                  props: [{ name: "value", type: "string", value: "system" }],
+                  children: [
+                    { type: "text", value: "System", placeholder: !0 }
+                  ]
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, re = {
+  category: "hidden",
+  type: "container",
+  icon: w,
+  detachable: !1,
+  presetStyle: {
+    button: F
+  }
+}, ce = {
+  category: "hidden",
+  type: "container",
+  label: "Value",
+  icon: T,
+  detachable: !1,
+  presetStyle: {
+    span: s
+  }
+}, le = {
+  category: "hidden",
+  type: "container",
+  icon: M,
+  detachable: !1,
+  presetStyle: i
+}, ae = {
+  category: "hidden",
+  type: "container",
+  icon: q,
+  detachable: !1,
+  presetStyle: i
+}, pe = {
+  category: "hidden",
+  type: "container",
+  icon: C,
+  requiredAncestors: ["SelectViewport"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "SelectViewport" }
+  },
+  presetStyle: i
+}, se = {
+  category: "hidden",
+  type: "container",
+  label: "Indicator",
+  icon: d,
+  detachable: !1,
+  requiredAncestors: ["SelectItem"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "SelectItem" }
+  },
+  presetStyle: {
+    span: s
+  }
+}, ie = {
+  category: "hidden",
+  type: "container",
+  label: "Item Text",
+  icon: k,
+  detachable: !1,
+  requiredAncestors: ["SelectItem"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "SelectItem" }
+  },
+  presetStyle: {
+    span: s
+  }
+}, de = {
+  props: K,
+  initialProps: ["name", "value", "open", "required"]
+}, me = {
+  props: N
+}, ue = {
+  props: O,
+  initialProps: ["placeholder"]
+}, ye = {
+  props: Q
+}, he = {
+  props: R
+}, Se = {
+  props: X,
+  initialProps: ["value"]
+}, ge = {
+  props: Y
+}, Ie = {
+  props: Z
+};
+export {
+  ne as metaSelect,
+  le as metaSelectContent,
+  pe as metaSelectItem,
+  se as metaSelectItemIndicator,
+  ie as metaSelectItemText,
+  re as metaSelectTrigger,
+  ce as metaSelectValue,
+  ae as metaSelectViewport,
+  de as propsMetaSelect,
+  ye as propsMetaSelectContent,
+  Se as propsMetaSelectItem,
+  ge as propsMetaSelectItemIndicator,
+  Ie as propsMetaSelectItemText,
+  me as propsMetaSelectTrigger,
+  ue as propsMetaSelectValue,
+  he as propsMetaSelectViewport
+};

package/lib/sheet.js

@@ -0,0 +1,43 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { getClosestInstance as r } from "@webstudio-is/react-sdk/runtime";
+import { DialogContent as h } from "./dialog.js";
+f(
+  ({ tag: n = "nav", side: t = "left", role: e = "navigation", children: o, ...i }, c) => /* @__PURE__ */ s(
+    h,
+    {
+      asChild: !0,
+      "data-side": t,
+      role: e,
+      ...i,
+      children: /* @__PURE__ */ s(n, { ref: c, children: o })
+    }
+  )
+);
+const a = "@webstudio-is/sdk-components-react-radix", P = {
+  onNavigatorUnselect: (n, t) => {
+    for (const e of t.instancePath)
+      if (e.component === `${a}:SheetOverlay`) {
+        const o = r(
+          t.instancePath,
+          e,
+          `${a}:Sheet`
+        );
+        o && n.setMemoryProp(o, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (n, t) => {
+    for (const e of t.instancePath)
+      if (e.component === `${a}:SheetOverlay`) {
+        const o = r(
+          t.instancePath,
+          e,
+          `${a}:Sheet`
+        );
+        o && n.setMemoryProp(o, "open", !0);
+      }
+  }
+};
+export {
+  P as hooksSheet
+};