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

package/lib/dialog.ws.js

@@ -0,0 +1,260 @@
+import { TriggerIcon as c, ContentIcon as g, OverlayIcon as y, HeadingIcon as d, TextIcon as m, ButtonElementIcon as u, DialogIcon as D, LargeXIcon as h } from "@webstudio-is/icons/svg";
+import { defaultStates as f } from "@webstudio-is/react-sdk";
+import { button as b, div as v, h2 as x, p as T } from "@webstudio-is/sdk/normalize.css";
+import { fixed as C, inset as I, z as n, bg as t, backdropBlur as P, flex as e, overflow as S, w as i, gap as a, m as w, maxW as B, border as l, p as M, shadow as k, relative as O, my as r, leading as H, text as o, tracking as E, absolute as j, right as z, top as F, rounded as L, opacity as p, items as R, justify as W, h as X, outline as $, hover as q, focus as A, ring as G } from "./theme/tailwind-classes.js";
+import { propsDialog as J, propsDialogTrigger as K, propsDialogContent as N, propsDialogOverlay as Q, propsDialogClose as U, propsDialogTitle as V, propsDialogDescription as Y } from "./__generated__/dialog.props.js";
+import { buttonReset as Z, getButtonStyles as _ } from "./theme/styles.js";
+const s = {
+  div: v
+}, ee = {
+  h2: x
+}, te = {
+  p: T
+}, pe = {
+  category: "hidden",
+  type: "container",
+  icon: c,
+  stylable: !1,
+  detachable: !1
+}, se = {
+  category: "hidden",
+  type: "container",
+  presetStyle: s,
+  icon: g,
+  detachable: !1
+}, ce = {
+  category: "hidden",
+  type: "container",
+  presetStyle: s,
+  icon: y,
+  detachable: !1
+}, ge = {
+  category: "hidden",
+  type: "container",
+  presetStyle: ee,
+  icon: d
+}, ye = {
+  category: "hidden",
+  type: "container",
+  presetStyle: te,
+  icon: m
+}, de = {
+  category: "hidden",
+  type: "container",
+  presetStyle: {
+    button: [Z, b].flat()
+  },
+  states: f,
+  icon: u,
+  label: "Close Button"
+}, me = {
+  category: "radix",
+  order: 4,
+  type: "container",
+  icon: D,
+  stylable: !1,
+  description: "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
+  template: [
+    {
+      type: "instance",
+      component: "Dialog",
+      children: [
+        {
+          type: "instance",
+          component: "DialogTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: _("outline"),
+              children: [{ type: "text", value: "Button", placeholder: !0 }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "DialogOverlay",
+          /**
+           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
+           * flex
+           **/
+          styles: [
+            C(),
+            I(0),
+            n(50),
+            t("background", 80),
+            P("sm"),
+            // To allow positioning Content
+            e(),
+            S("auto")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "DialogContent",
+              /**
+               * fixed w-full z-50
+               * grid gap-4 max-w-lg
+               * m-auto
+               * border bg-background p-6 shadow-lg
+               **/
+              styles: [
+                i("full"),
+                n(50),
+                e(),
+                e("col"),
+                a(4),
+                w("auto"),
+                B("lg"),
+                l(),
+                t("background"),
+                M(6),
+                k("lg"),
+                O()
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  label: "Dialog Header",
+                  styles: [e(), e("col"), a(1)].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "DialogTitle",
+                      /**
+                       * text-lg leading-none tracking-tight
+                       **/
+                      styles: [
+                        r(0),
+                        H("none"),
+                        o("lg"),
+                        E("tight")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Dialog Title you can edit",
+                          placeholder: !0
+                        }
+                      ]
+                    },
+                    {
+                      type: "instance",
+                      component: "DialogDescription",
+                      /**
+                       * text-sm text-muted-foreground
+                       **/
+                      styles: [
+                        r(0),
+                        o("sm"),
+                        o("mutedForeground")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Dialog description text you can edit",
+                          placeholder: !0
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "Text",
+                  children: [
+                    {
+                      type: "text",
+                      value: "The text you can edit",
+                      placeholder: !0
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "DialogClose",
+                  /**
+                   * absolute right-4 top-4
+                   * rounded-sm opacity-70
+                   * ring-offset-background
+                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+                   * flex items-center justify-center h-4 w-4
+                   **/
+                  styles: [
+                    j(),
+                    z(4),
+                    F(4),
+                    L("sm"),
+                    p(70),
+                    e(),
+                    R("center"),
+                    W("center"),
+                    X(4),
+                    i(4),
+                    l(0),
+                    t("transparent"),
+                    $(),
+                    q(p(100)),
+                    A(G("ring", 2, "background", 2))
+                  ].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "HtmlEmbed",
+                      label: "Close Icon",
+                      props: [
+                        {
+                          type: "string",
+                          name: "code",
+                          value: h
+                        }
+                      ],
+                      children: []
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, ue = {
+  props: J,
+  initialProps: []
+}, De = {
+  props: K
+}, he = {
+  props: N,
+  initialProps: []
+}, fe = {
+  props: Q,
+  initialProps: []
+}, be = {
+  props: U,
+  initialProps: []
+}, ve = {
+  props: V,
+  initialProps: []
+}, xe = {
+  props: Y,
+  initialProps: []
+};
+export {
+  me as metaDialog,
+  de as metaDialogClose,
+  se as metaDialogContent,
+  ye as metaDialogDescription,
+  ce as metaDialogOverlay,
+  ge as metaDialogTitle,
+  pe as metaDialogTrigger,
+  ue as propsMetaDialog,
+  be as propsMetaDialogClose,
+  he as propsMetaDialogContent,
+  xe as propsMetaDialogDescription,
+  fe as propsMetaDialogOverlay,
+  ve as propsMetaDialogTitle,
+  De as propsMetaDialogTrigger
+};

package/lib/hooks.js

@@ -0,0 +1,23 @@
+import { hooksCollapsible as o } from "./collapsible.js";
+import { hooksTabs as r } from "./tabs.js";
+import { hooksDialog as m } from "./dialog.js";
+import { hooksPopover as i } from "./popover.js";
+import { hooksSheet as t } from "./sheet.js";
+import { hooksTooltip as p } from "./tooltip.js";
+import { hooksAccordion as s } from "./accordion.js";
+import { hooksNavigationMenu as h } from "./navigation-menu.js";
+import { hooksSelect as k } from "./select.js";
+const S = [
+  o,
+  r,
+  m,
+  i,
+  t,
+  p,
+  s,
+  h,
+  k
+];
+export {
+  S as hooks
+};

package/lib/label.js

@@ -0,0 +1,7 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import * as i from "@radix-ui/react-label";
+const a = t((o, r) => /* @__PURE__ */ m(i.Root, { ref: r, ...o }));
+export {
+  a as Label
+};

package/lib/label.ws.js

@@ -0,0 +1,43 @@
+import { LabelIcon as e } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { label as r } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/label.props.js";
+import { text as a, font as l, leading as p } from "./theme/tailwind-classes.js";
+const n = {
+  label: r
+}, d = {
+  category: "radix",
+  order: 102,
+  type: "container",
+  icon: e,
+  presetStyle: n,
+  states: o,
+  description: "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      styles: [
+        // text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
+        a("sm"),
+        l("medium"),
+        p("none")
+        // We are not supporting peer like styles yet
+      ].flat(),
+      children: [{ type: "text", value: "Form Label", placeholder: !0 }]
+    }
+  ]
+}, f = {
+  props: {
+    ...t,
+    htmlFor: {
+      ...t.htmlFor,
+      label: "For"
+    }
+  },
+  initialProps: ["id", "className", "htmlFor"]
+};
+export {
+  d as meta,
+  f as propsMeta
+};

package/lib/metas.js

@@ -0,0 +1,64 @@
+import { metaCollapsible as t, metaCollapsibleContent as o, metaCollapsibleTrigger as i } from "./collapsible.ws.js";
+import { metaDialog as n, metaDialogClose as m, metaDialogContent as s, metaDialogDescription as l, metaDialogOverlay as g, metaDialogTitle as c, metaDialogTrigger as p } from "./dialog.ws.js";
+import { meta as C } from "./sheet.ws.js";
+import { metaPopover as u, metaPopoverContent as v, metaPopoverTrigger as b } from "./popover.ws.js";
+import { metaTooltip as x, metaTooltipContent as I, metaTooltipTrigger as D } from "./tooltip.ws.js";
+import { metaTabs as N, metaTabsContent as f, metaTabsList as h, metaTabsTrigger as A } from "./tabs.ws.js";
+import { meta as L } from "./label.ws.js";
+import { metaAccordion as G, metaAccordionContent as P, metaAccordionHeader as R, metaAccordionItem as V, metaAccordionTrigger as y } from "./accordion.ws.js";
+import { metaNavigationMenu as O, metaNavigationMenuContent as j, metaNavigationMenuItem as q, metaNavigationMenuLink as z, metaNavigationMenuList as B, metaNavigationMenuTrigger as E, metaNavigationMenuViewport as F } from "./navigation-menu.ws.js";
+import { metaSelect as K, metaSelectContent as Q, metaSelectItem as U, metaSelectItemIndicator as W, metaSelectItemText as X, metaSelectTrigger as Y, metaSelectValue as Z, metaSelectViewport as _ } from "./select.ws.js";
+import { metaSwitch as ee, metaSwitchThumb as ae } from "./switch.ws.js";
+import { metaCheckbox as oe, metaCheckboxIndicator as ie } from "./checkbox.ws.js";
+import { metaRadioGroup as ne, metaRadioGroupIndicator as me, metaRadioGroupItem as se } from "./radio-group.ws.js";
+export {
+  G as Accordion,
+  P as AccordionContent,
+  R as AccordionHeader,
+  V as AccordionItem,
+  y as AccordionTrigger,
+  oe as Checkbox,
+  ie as CheckboxIndicator,
+  t as Collapsible,
+  o as CollapsibleContent,
+  i as CollapsibleTrigger,
+  n as Dialog,
+  m as DialogClose,
+  s as DialogContent,
+  l as DialogDescription,
+  g as DialogOverlay,
+  c as DialogTitle,
+  p as DialogTrigger,
+  L as Label,
+  O as NavigationMenu,
+  j as NavigationMenuContent,
+  q as NavigationMenuItem,
+  z as NavigationMenuLink,
+  B as NavigationMenuList,
+  E as NavigationMenuTrigger,
+  F as NavigationMenuViewport,
+  u as Popover,
+  v as PopoverContent,
+  b as PopoverTrigger,
+  ne as RadioGroup,
+  me as RadioGroupIndicator,
+  se as RadioGroupItem,
+  K as Select,
+  Q as SelectContent,
+  U as SelectItem,
+  W as SelectItemIndicator,
+  X as SelectItemText,
+  Y as SelectTrigger,
+  Z as SelectValue,
+  _ as SelectViewport,
+  C as Sheet,
+  ee as Switch,
+  ae as SwitchThumb,
+  N as Tabs,
+  f as TabsContent,
+  h as TabsList,
+  A as TabsTrigger,
+  x as Tooltip,
+  I as TooltipContent,
+  D as TooltipTrigger
+};

package/lib/navigation-menu.js

@@ -0,0 +1,59 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-navigation-menu";
+import { ReactSdkContext as v, getIndexWithinAncestorFromComponentProps as l, getClosestInstance as d } from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as c, useContext as f, Children as m } from "react";
+const p = c(({ value: o, ...n }, e) => {
+  const { renderer: t } = f(v);
+  let i = o;
+  return t === "canvas" && (i = i === "" ? "-1" : i), /* @__PURE__ */ r(a.Root, { ref: e, value: i, ...n });
+}), C = a.List, P = a.Viewport, k = a.Content, x = c(({ value: o, ...n }, e) => {
+  const t = l(n);
+  return /* @__PURE__ */ r(a.Item, { ref: e, value: o ?? t, ...n });
+}), A = c(({ children: o, ...n }, e) => {
+  const t = m.toArray(o)[0];
+  return /* @__PURE__ */ r(a.Link, { asChild: !0, ref: e, ...n, children: t ?? /* @__PURE__ */ r("a", { children: "Add link component" }) });
+}), I = c(({ children: o, ...n }, e) => {
+  const t = m.toArray(o)[0];
+  return /* @__PURE__ */ r(a.Trigger, { asChild: !0, ref: e, ...n, children: t ?? /* @__PURE__ */ r("button", { children: "Add button or link" }) });
+}), s = "@webstudio-is/sdk-components-react-radix", $ = {
+  onNavigatorUnselect: (o, n) => {
+    for (const e of n.instancePath)
+      if (e.component === `${s}:NavigationMenuContent`) {
+        const t = d(
+          n.instancePath,
+          e,
+          `${s}:NavigationMenu`
+        );
+        t && o.setMemoryProp(t, "value", void 0);
+      }
+  },
+  onNavigatorSelect: (o, n) => {
+    var e;
+    for (const t of n.instancePath)
+      if (t.component === `${s}:NavigationMenuContent`) {
+        const i = d(
+          n.instancePath,
+          t,
+          `${s}:NavigationMenu`
+        ), u = d(
+          n.instancePath,
+          t,
+          `${s}:NavigationMenuItem`
+        );
+        if (u === void 0 || i === void 0)
+          return;
+        const g = o.getPropValue(u, "value") ?? ((e = o.indexesWithinAncestors.get(u.id)) == null ? void 0 : e.toString());
+        g && o.setMemoryProp(i, "value", g);
+      }
+  }
+};
+export {
+  p as NavigationMenu,
+  k as NavigationMenuContent,
+  x as NavigationMenuItem,
+  A as NavigationMenuLink,
+  C as NavigationMenuList,
+  I as NavigationMenuTrigger,
+  P as NavigationMenuViewport,
+  $ as hooksNavigationMenu
+};