@webstudio-is/sdk-components-react-radix 0.218.0 → 0.220.0

package/lib/components.js

@@ -1,23 +1,23 @@
 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";
+import { Popover as C, PopoverClose as d, PopoverContent as f, PopoverTrigger as s } from "./popover.js";
+import { Tooltip as v, TooltipContent as b, TooltipTrigger as S } from "./tooltip.js";
+import { Tabs as D, TabsContent as M, TabsList as N, TabsTrigger as h } from "./tabs.js";
+import { Label as w } from "./label.js";
+import { Accordion as P, AccordionContent as k, AccordionHeader as G, AccordionItem as R, AccordionTrigger as V } from "./accordion.js";
+import { NavigationMenu as H, NavigationMenuContent as O, NavigationMenuItem as j, NavigationMenuLink as q, NavigationMenuList as z, NavigationMenuTrigger as B, NavigationMenuViewport as E } from "./navigation-menu.js";
+import { Select as J, SelectContent as K, SelectItem as Q, SelectItemIndicator as U, SelectItemText as W, SelectTrigger as X, SelectValue as Y, SelectViewport as Z } from "./select.js";
+import { Switch as $, SwitchThumb as oo } from "./switch.js";
+import { Checkbox as to, CheckboxIndicator as ro } from "./checkbox.js";
+import { RadioGroup as no, RadioGroupIndicator as ao, RadioGroupItem as lo } from "./radio-group.js";
 export {
-  L as Accordion,
+  P as Accordion,
   k as AccordionContent,
   G as AccordionHeader,
-  P as AccordionItem,
-  R as AccordionTrigger,
-  eo as Checkbox,
-  to as CheckboxIndicator,
+  R as AccordionItem,
+  V as AccordionTrigger,
+  to as Checkbox,
+  ro as CheckboxIndicator,
   t as Collapsible,
   r as CollapsibleContent,
   i as CollapsibleTrigger,
@@ -28,35 +28,36 @@ export {
   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,
+  w as Label,
+  H as NavigationMenu,
+  O as NavigationMenuContent,
+  j as NavigationMenuItem,
+  q as NavigationMenuLink,
+  z as NavigationMenuList,
+  B as NavigationMenuTrigger,
+  E 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
+  d as PopoverClose,
+  f as PopoverContent,
+  s as PopoverTrigger,
+  no as RadioGroup,
+  ao as RadioGroupIndicator,
+  lo as RadioGroupItem,
+  J as Select,
+  K as SelectContent,
+  Q as SelectItem,
+  U as SelectItemIndicator,
+  W as SelectItemText,
+  X as SelectTrigger,
+  Y as SelectValue,
+  Z as SelectViewport,
+  $ as Switch,
+  oo as SwitchThumb,
+  D as Tabs,
+  M as TabsContent,
+  N as TabsList,
+  h as TabsTrigger,
+  v as Tooltip,
+  b as TooltipContent,
+  S as TooltipTrigger
 };

package/lib/dialog.template.js

@@ -2,7 +2,7 @@ import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { LargeXIcon as p } from "@webstudio-is/icons/svg";
 import { $ as l, PlaceholderValue as r, css as i } from "@webstudio-is/template";
 import { radix as o } from "./shared/proxy.js";
-import { zIndex as d, blur as m, width as u, spacing as t, maxWidth as w, borderWidth as $, colors as a, boxShadow as s, fontSize as c, lineHeight as y, letterSpacing as b, fontSizeLineHeight as x, borderRadius as f, opacity as g, height as h } from "./shared/theme.js";
+import { fontSize as d, lineHeight as m, letterSpacing as u, fontSizeLineHeight as w, colors as a, spacing as t, borderRadius as $, opacity as s, height as c, boxShadow as g, width as y, zIndex as h, maxWidth as b, borderWidth as x, blur as f } from "./shared/theme.js";
 import { getButtonStyle as D } from "./shared/styles.js";
 const S = {
   category: "radix",
@@ -16,9 +16,9 @@ const S = {
         "ws:style": i`
           position: fixed;
           inset: 0;
-          z-index: ${d[50]};
+          z-index: ${h[50]};
           background-color: rgb(255 255 255 / 0.8);
-          backdrop-filter: ${m.sm};
+          backdrop-filter: ${f.sm};
           /* To allow positioning Content */
           display: flex;
           overflow: auto;
@@ -27,17 +27,17 @@ const S = {
           o.DialogContent,
           {
             "ws:style": i`
-            width: ${u.full};
-            z-index: ${d[50]};
+            width: ${y.full};
+            z-index: ${h[50]};
             display: flex;
             flex-direction: column;
             gap: ${t[4]};
             margin: auto;
-            max-width: ${w.lg};
-            border: ${$.DEFAULT} solid ${a.border};
+            max-width: ${b.lg};
+            border: ${x.DEFAULT} solid ${a.border};
             background-color: ${a.background};
             padding: ${t[6]};
-            box-shadow: ${s.lg};
+            box-shadow: ${g.lg};
             position: relative;
           `,
             children: [
@@ -55,9 +55,9 @@ const S = {
                       o.DialogTitle,
                       {
                         "ws:style": i`
-                font-size: ${c.lg};
-                line-height: ${y.none};
-                letter-spacing: ${b.tight};
+                font-size: ${d.lg};
+                line-height: ${m.none};
+                letter-spacing: ${u.tight};
                 margin: 0;
               `,
                         children: new r("Dialog Title you can edit")
@@ -67,8 +67,8 @@ const S = {
                       o.DialogDescription,
                       {
                         "ws:style": i`
-                font-size: ${c.sm};
-                line-height: ${x.sm};
+                font-size: ${d.sm};
+                line-height: ${w.sm};
                 color: ${a.mutedForeground};
                 margin: 0;
               `,
@@ -87,21 +87,21 @@ const S = {
               position: absolute;
               right: ${t[4]};
               top: ${t[4]};
-              border-radius: ${f.sm};
-              opacity: ${g[70]};
+              border-radius: ${$.sm};
+              opacity: ${s[70]};
               display: flex;
               align-items: center;
               justify-content: center;
-              height: ${h[4]};
-              width: ${h[4]};
+              height: ${c[4]};
+              width: ${c[4]};
               border: 0;
               background-color: transparent;
               outline: none;
               &:hover {
-                opacity: ${g[100]};
+                opacity: ${s[100]};
               }
               &:focus-visible {
-                box-shadow: ${s.ring};
+                box-shadow: ${g.ring};
               }
             `,
                   children: /* @__PURE__ */ e(l.HtmlEmbed, { "ws:label": "Close Icon", code: p })

package/lib/dialog.ws.js

@@ -1,27 +1,27 @@
-import { TriggerIcon as e, OverlayIcon as n, ContentIcon as i, HeadingIcon as r, TextIcon as a, ButtonElementIcon as s, DialogIcon as l } from "@webstudio-is/icons/svg";
-import { defaultStates as c } from "@webstudio-is/sdk";
-import { div as t, h2 as p, p as g, button as D } from "@webstudio-is/sdk/normalize.css";
+import { DialogIcon as t, TriggerIcon as n, OverlayIcon as i, ContentIcon as r, ButtonElementIcon as c, HeadingIcon as a, TextIcon as l } from "@webstudio-is/icons/svg";
+import { defaultStates as s } from "@webstudio-is/sdk";
+import { div as e, button as p, h2 as g, p as d } from "@webstudio-is/sdk/normalize.css";
 import { radix as o } from "./shared/meta.js";
-import { propsDialog as d, propsDialogTrigger as m, propsDialogContent as y, propsDialogOverlay as M, propsDialogClose as h, propsDialogTitle as C, propsDialogDescription as T } from "./__generated__/dialog.props.js";
-import { buttonReset as f } from "./shared/preset-styles.js";
+import { propsDialog as D, propsDialogTrigger as m, propsDialogOverlay as y, propsDialogContent as h, propsDialogClose as f, propsDialogTitle as C, propsDialogDescription as T } from "./__generated__/dialog.props.js";
+import { buttonReset as I } from "./shared/preset-styles.js";
 const O = {
-  icon: e,
+  icon: n,
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
-}, b = {
-  icon: n,
+  },
+  props: m
+}, B = {
+  icon: i,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [o.DialogContent]
   },
-  presetStyle: {
-    div: t
-  }
-}, B = {
-  icon: i,
+  presetStyle: { div: e },
+  props: y
+}, E = {
+  icon: r,
   contentModel: {
     category: "none",
     children: ["instance"],
@@ -31,79 +31,51 @@ const O = {
       o.DialogClose
     ]
   },
-  presetStyle: {
-    div: t
-  }
-}, E = {
-  icon: r,
+  presetStyle: { div: e },
+  props: h
+}, H = {
+  icon: a,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: {
-    h2: p
-  }
-}, H = {
-  icon: a,
+  presetStyle: { h2: g },
+  props: C
+}, R = {
+  icon: l,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: {
-    p: g
-  }
-}, R = {
-  icon: s,
+  presetStyle: { p: d },
+  props: T
+}, j = {
+  icon: c,
   label: "Close Button",
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: c,
+  states: s,
   presetStyle: {
-    button: [f, D].flat()
-  }
-}, j = {
-  icon: l,
+    button: [I, p].flat()
+  },
+  props: f
+}, k = {
+  icon: t,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [o.DialogTrigger, o.DialogOverlay]
-  }
-}, k = {
-  props: d,
-  initialProps: []
-}, q = {
-  props: m
-}, w = {
-  props: y,
-  initialProps: []
-}, z = {
-  props: M,
-  initialProps: []
-}, A = {
-  props: h,
-  initialProps: []
-}, F = {
-  props: C,
-  initialProps: []
-}, G = {
-  props: T,
-  initialProps: []
+  },
+  props: D
 };
 export {
-  j as metaDialog,
-  R as metaDialogClose,
-  B as metaDialogContent,
-  H as metaDialogDescription,
-  b as metaDialogOverlay,
-  E as metaDialogTitle,
-  O as metaDialogTrigger,
-  k as propsMetaDialog,
-  A as propsMetaDialogClose,
-  w as propsMetaDialogContent,
-  G as propsMetaDialogDescription,
-  z as propsMetaDialogOverlay,
-  F as propsMetaDialogTitle,
-  q as propsMetaDialogTrigger
+  k as metaDialog,
+  j as metaDialogClose,
+  E as metaDialogContent,
+  R as metaDialogDescription,
+  B as metaDialogOverlay,
+  H as metaDialogTitle,
+  O as metaDialogTrigger
 };

package/lib/label.template.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { css as t, PlaceholderValue as o } from "@webstudio-is/template";
+import { PlaceholderValue as t, css as o } from "@webstudio-is/template";
 import { radix as i } from "./shared/proxy.js";
 import { fontSize as r, lineHeight as n, weights as h } from "./shared/theme.js";
 const p = {
@@ -9,12 +9,12 @@ const p = {
   template: /* @__PURE__ */ e(
     i.Label,
     {
-      "ws:style": t`
+      "ws:style": o`
         font-size: ${r.sm};
         line-height: ${n.none};
         font-weight: ${h.medium};
       `,
-      children: new o("Form Label")
+      children: new t("Form Label")
     }
   )
 };

package/lib/label.ws.js

@@ -1,18 +1,16 @@
-import { LabelIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
+import { LabelIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
 import { label as r } from "@webstudio-is/sdk/normalize.css";
 import { props as e } from "./__generated__/label.props.js";
-const i = {
-  icon: t,
-  states: o,
+const a = {
+  icon: o,
+  states: t,
   presetStyle: {
     label: r
-  }
-}, l = {
-  props: e,
-  initialProps: ["id", "className", "htmlFor"]
+  },
+  initialProps: ["id", "class", "for"],
+  props: e
 };
 export {
-  i as meta,
-  l as propsMeta
+  a as meta
 };

package/lib/metas.js

@@ -1,23 +1,23 @@
 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 { metaPopover as C, metaPopoverContent as d, metaPopoverTrigger as u } from "./popover.ws.js";
-import { metaTooltip as b, metaTooltipContent as S, metaTooltipTrigger as x } from "./tooltip.ws.js";
-import { metaTabs as D, metaTabsContent as M, metaTabsList as N, metaTabsTrigger as f } from "./tabs.ws.js";
-import { meta as A } from "./label.ws.js";
-import { metaAccordion as L, metaAccordionContent as k, metaAccordionHeader as G, metaAccordionItem as P, metaAccordionTrigger as R } from "./accordion.ws.js";
-import { metaNavigationMenu as y, metaNavigationMenuContent as H, metaNavigationMenuItem as O, metaNavigationMenuLink as j, metaNavigationMenuList as q, metaNavigationMenuTrigger as z, metaNavigationMenuViewport as B } from "./navigation-menu.ws.js";
-import { metaSelect as F, metaSelectContent as J, metaSelectItem as K, metaSelectItemIndicator as Q, metaSelectItemText as U, metaSelectTrigger as W, metaSelectValue as X, metaSelectViewport as Y } from "./select.ws.js";
-import { metaSwitch as _, metaSwitchThumb as $ } from "./switch.ws.js";
-import { metaCheckbox as ae, metaCheckboxIndicator as te } from "./checkbox.ws.js";
-import { metaRadioGroup as ie, metaRadioGroupIndicator as re, metaRadioGroupItem as ne } from "./radio-group.ws.js";
+import { metaPopover as C, metaPopoverClose as d, metaPopoverContent as u, metaPopoverTrigger as v } from "./popover.ws.js";
+import { metaTooltip as S, metaTooltipContent as x, metaTooltipTrigger as I } from "./tooltip.ws.js";
+import { metaTabs as M, metaTabsContent as N, metaTabsList as f, metaTabsTrigger as h } from "./tabs.ws.js";
+import { meta as w } from "./label.ws.js";
+import { metaAccordion as L, metaAccordionContent as k, metaAccordionHeader as G, metaAccordionItem as R, metaAccordionTrigger as V } from "./accordion.ws.js";
+import { metaNavigationMenu as H, metaNavigationMenuContent as O, metaNavigationMenuItem as j, metaNavigationMenuLink as q, metaNavigationMenuList as z, metaNavigationMenuTrigger as B, metaNavigationMenuViewport as E } from "./navigation-menu.ws.js";
+import { metaSelect as J, metaSelectContent as K, metaSelectItem as Q, metaSelectItemIndicator as U, metaSelectItemText as W, metaSelectTrigger as X, metaSelectValue as Y, metaSelectViewport as Z } from "./select.ws.js";
+import { metaSwitch as $, metaSwitchThumb as ee } from "./switch.ws.js";
+import { metaCheckbox as te, metaCheckboxIndicator as oe } from "./checkbox.ws.js";
+import { metaRadioGroup as re, metaRadioGroupIndicator as ne, metaRadioGroupItem as me } from "./radio-group.ws.js";
 export {
   L as Accordion,
   k as AccordionContent,
   G as AccordionHeader,
-  P as AccordionItem,
-  R as AccordionTrigger,
-  ae as Checkbox,
-  te as CheckboxIndicator,
+  R as AccordionItem,
+  V as AccordionTrigger,
+  te as Checkbox,
+  oe as CheckboxIndicator,
   t as Collapsible,
   o as CollapsibleContent,
   i as CollapsibleTrigger,
@@ -28,35 +28,36 @@ export {
   g as DialogOverlay,
   c as DialogTitle,
   p 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,
+  w as Label,
+  H as NavigationMenu,
+  O as NavigationMenuContent,
+  j as NavigationMenuItem,
+  q as NavigationMenuLink,
+  z as NavigationMenuList,
+  B as NavigationMenuTrigger,
+  E as NavigationMenuViewport,
   C as Popover,
-  d as PopoverContent,
-  u as PopoverTrigger,
-  ie as RadioGroup,
-  re as RadioGroupIndicator,
-  ne 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,
-  D as Tabs,
-  M as TabsContent,
-  N as TabsList,
-  f as TabsTrigger,
-  b as Tooltip,
-  S as TooltipContent,
-  x as TooltipTrigger
+  d as PopoverClose,
+  u as PopoverContent,
+  v as PopoverTrigger,
+  re as RadioGroup,
+  ne as RadioGroupIndicator,
+  me as RadioGroupItem,
+  J as Select,
+  K as SelectContent,
+  Q as SelectItem,
+  U as SelectItemIndicator,
+  W as SelectItemText,
+  X as SelectTrigger,
+  Y as SelectValue,
+  Z as SelectViewport,
+  $ as Switch,
+  ee as SwitchThumb,
+  M as Tabs,
+  N as TabsContent,
+  f as TabsList,
+  h as TabsTrigger,
+  S as Tooltip,
+  x as TooltipContent,
+  I as TooltipTrigger
 };

package/lib/navigation-menu.template.js

@@ -1,9 +1,9 @@
 import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import { ChevronDownIcon as w } from "@webstudio-is/icons/svg";
-import { $ as n, css as t, PlaceholderValue as l } from "@webstudio-is/template";
+import { css as t, $ as n, PlaceholderValue as l } from "@webstudio-is/template";
 import { radix as r } from "./shared/proxy.js";
 import { getButtonStyle as u } from "./shared/styles.js";
-import { spacing as i, colors as a, width as h, borderRadius as p, borderWidth as v, boxShadow as b, height as y, transition as x, lineHeight as c, fontSize as m, weights as $ } from "./shared/theme.js";
+import { spacing as i, borderRadius as h, borderWidth as v, colors as a, boxShadow as b, height as y, width as p, transition as x, fontSize as m, weights as $, lineHeight as c } from "./shared/theme.js";
 const k = [
   {
     title: "Sheet",
@@ -60,7 +60,7 @@ const k = [
         flex-direction: column;
         user-select: none;
         gap: ${i[1]};
-        border-radius: ${p.md};
+        border-radius: ${h.md};
         padding: ${i[3]};
         line-height: ${c.none};
         text-decoration-line: none;
@@ -106,7 +106,7 @@ const k = [
   {
     "ws:label": "Flex Column",
     "ws:style": t`
-      width: ${h[64]};
+      width: ${p[64]};
       display: flex;
       gap: ${i[4]};
       flex-direction: column;
@@ -129,8 +129,8 @@ const k = [
           "ws:style": t`
         background-color: ${a.border};
         padding: ${i[4]};
-        width: ${h[48]};
-        border-radius: ${p.md};
+        width: ${p[48]};
+        border-radius: ${h.md};
       `,
           children: new l("")
         }
@@ -174,7 +174,7 @@ const k = [
               margin-left: ${i[1]};
               rotate: var(--navigation-menu-trigger-icon-transform);
               height: ${y[4]};
-              width: ${h[4]};
+              width: ${p[4]};
               flex-shrink: 0;
               transition: ${x.all};
               transition-duration: 200ms;
@@ -262,7 +262,7 @@ const k = [
             position: relative;
             margin-top: ${i[1.5]};
             overflow: hidden;
-            border-radius: ${p.md};
+            border-radius: ${h.md};
             border: ${v.DEFAULT} solid ${a.border};
             background-color: ${a.popover};
             color: ${a.popoverForeground};