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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.189.0",
+  "version": "0.191.4",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -50,28 +50,27 @@
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.3",
-    "@webstudio-is/css-engine": "0.189.0",
-    "@webstudio-is/react-sdk": "0.189.0",
-    "@webstudio-is/icons": "0.189.0",
-    "@webstudio-is/sdk": "0.189.0"
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "@webstudio-is/react-sdk": "0.191.4",
+    "@webstudio-is/css-engine": "0.191.4",
+    "@webstudio-is/icons": "0.191.4",
+    "@webstudio-is/sdk": "0.191.4"
   },
   "devDependencies": {
-    "@types/node": "^22.8.1",
+    "@types/node": "^22.9.3",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "tailwindcss": "^3.3.3",
-    "typescript": "^5.6.3",
-    "@webstudio-is/css-data": "0.0.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk-components-react": "0.189.0"
+    "@webstudio-is/css-data": "0.0.0",
+    "@webstudio-is/sdk-components-react": "0.191.4",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
-    "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts src/hooks.ts --outdir=lib --bundle --format=esm --packages=external",
+    "build": "vite build --config ../../vite.sdk-components.config.ts",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
     "build:tailwind": "tsx scripts/generate-tailwind-theme.ts && prettier --write src/theme/__generated__",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",

package/lib/components.js

@@ -1,408 +0,0 @@
-// src/collapsible.tsx
-import {
-  forwardRef,
-  Children
-} from "react";
-import { Root, Trigger, Content } from "@radix-ui/react-collapsible";
-import {
-  getClosestInstance,
-  getInstanceSelectorById
-} from "@webstudio-is/react-sdk/runtime";
-import { jsx } from "react/jsx-runtime";
-var Collapsible = Root;
-var CollapsibleTrigger = forwardRef(({ children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
-  return /* @__PURE__ */ jsx(Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button" }) });
-});
-var CollapsibleContent = Content;
-
-// src/dialog.tsx
-import {
-  forwardRef as forwardRef2,
-  Children as Children2,
-  useEffect,
-  useRef,
-  useContext
-} from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import {
-  ReactSdkContext,
-  getClosestInstance as getClosestInstance2,
-  getInstanceSelectorById as getInstanceSelectorById2
-} from "@webstudio-is/react-sdk/runtime";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var willNavigate = (event) => {
-  const { target } = event;
-  if (target instanceof HTMLAnchorElement === false) {
-    return false;
-  }
-  if (target.hasAttribute("href") === false) {
-    return false;
-  }
-  if (target.href === "#") {
-    return false;
-  }
-  if (target.hasAttribute("target") && target.target === "_blank") {
-    return false;
-  }
-  if (event.ctrlKey || event.metaKey) {
-    return false;
-  }
-  return true;
-};
-var Dialog = forwardRef2((props, _ref) => {
-  const { open, onOpenChange } = props;
-  const { renderer } = useContext(ReactSdkContext);
-  useEffect(() => {
-    if (renderer !== void 0) {
-      return;
-    }
-    if (open === false) {
-      return;
-    }
-    const handleClick = (event) => {
-      const { target } = event;
-      if (willNavigate(event) === false) {
-        return;
-      }
-      if (target instanceof HTMLAnchorElement === false) {
-        return false;
-      }
-      if (target.closest('[role="dialog"]')) {
-        onOpenChange?.(false);
-      }
-    };
-    window.addEventListener("click", handleClick);
-    return () => window.removeEventListener("click", handleClick);
-  }, [open, onOpenChange, renderer]);
-  return /* @__PURE__ */ jsx2(DialogPrimitive.Root, { ...props });
-});
-var DialogTrigger = forwardRef2(({ children, ...props }, ref) => {
-  const firstChild = Children2.toArray(children)[0];
-  return /* @__PURE__ */ jsx2(DialogPrimitive.Trigger, { ref, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ jsx2("button", { children: "Add button or link" }) });
-});
-var DialogOverlay = forwardRef2((props, ref) => {
-  return /* @__PURE__ */ jsx2(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ jsx2(DialogPrimitive.Overlay, { ref, ...props }) });
-});
-var DialogContent = forwardRef2((props, ref) => {
-  const preventAutoFocusOnClose = useRef(false);
-  const { renderer } = useContext(ReactSdkContext);
-  useEffect(() => {
-    if (renderer !== void 0) {
-      return;
-    }
-    preventAutoFocusOnClose.current = false;
-    const handleClick = (event) => {
-      const { target } = event;
-      if (willNavigate(event) === false) {
-        return;
-      }
-      if (target instanceof HTMLAnchorElement === false) {
-        return false;
-      }
-      if (target.closest('[role="dialog"]')) {
-        preventAutoFocusOnClose.current = true;
-      }
-    };
-    window.addEventListener("click", handleClick);
-    return () => window.removeEventListener("click", handleClick);
-  }, [renderer]);
-  return /* @__PURE__ */ jsx2(
-    DialogPrimitive.Content,
-    {
-      ref,
-      ...props,
-      onCloseAutoFocus: (event) => {
-        if (preventAutoFocusOnClose.current) {
-          event.preventDefault();
-        }
-      }
-    }
-  );
-});
-var DialogClose = DialogPrimitive.Close;
-var defaultTag = "h1";
-var DialogTitle2 = forwardRef2(({ tag: Tag = defaultTag, children, ...props }, ref) => /* @__PURE__ */ jsx2(DialogPrimitive.DialogTitle, { asChild: true, children: /* @__PURE__ */ jsx2(Tag, { ref, ...props, children }) }));
-var DialogDescription = DialogPrimitive.Description;
-
-// src/popover.tsx
-import {
-  forwardRef as forwardRef3,
-  Children as Children3
-} from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import {
-  getClosestInstance as getClosestInstance3,
-  getInstanceSelectorById as getInstanceSelectorById3
-} from "@webstudio-is/react-sdk/runtime";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Popover = forwardRef3((props, _ref) => {
-  return /* @__PURE__ */ jsx3(PopoverPrimitive.Root, { ...props });
-});
-var PopoverTrigger = forwardRef3(({ children, ...props }, ref) => {
-  const firstChild = Children3.toArray(children)[0];
-  return /* @__PURE__ */ jsx3(PopoverPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx3("button", { children: "Add button or link" }) });
-});
-var PopoverContent = forwardRef3(
-  ({ sideOffset = 4, align = "center", hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ jsx3(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
-    PopoverPrimitive.Content,
-    {
-      ref,
-      align: "center",
-      sideOffset,
-      hideWhenDetached,
-      ...props
-    }
-  ) })
-);
-
-// src/tooltip.tsx
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import {
-  getClosestInstance as getClosestInstance4,
-  getInstanceSelectorById as getInstanceSelectorById4
-} from "@webstudio-is/react-sdk/runtime";
-import {
-  forwardRef as forwardRef4,
-  Children as Children4
-} from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Tooltip = forwardRef4((props, _ref) => {
-  return /* @__PURE__ */ jsx4(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx4(TooltipPrimitive.Root, { ...props }) });
-});
-var TooltipTrigger = forwardRef4(({ children, ...props }, ref) => {
-  const firstChild = Children4.toArray(children)[0];
-  return /* @__PURE__ */ jsx4(TooltipPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx4("button", { children: "Add button or link" }) });
-});
-var TooltipContent = forwardRef4(({ sideOffset = 4, hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ jsx4(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    hideWhenDetached,
-    sideOffset,
-    ...props
-  }
-) }));
-
-// src/tabs.tsx
-import {
-  forwardRef as forwardRef5
-} from "react";
-import { Root as Root5, List, Trigger as Trigger5, Content as Content5 } from "@radix-ui/react-tabs";
-import {
-  getClosestInstance as getClosestInstance5,
-  getIndexWithinAncestorFromComponentProps,
-  getInstanceSelectorById as getInstanceSelectorById5
-} from "@webstudio-is/react-sdk/runtime";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Tabs = Root5;
-var TabsList = List;
-var TabsTrigger = forwardRef5(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
-  return /* @__PURE__ */ jsx5(Trigger5, { ref, value: value ?? index ?? "", ...props });
-});
-var TabsContent = forwardRef5(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
-  return /* @__PURE__ */ jsx5(Content5, { ref, value: value ?? index ?? "", ...props });
-});
-
-// src/label.tsx
-import {
-  forwardRef as forwardRef6
-} from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Label = forwardRef6((props, ref) => /* @__PURE__ */ jsx6(LabelPrimitive.Root, { ref, ...props }));
-
-// src/accordion.tsx
-import {
-  forwardRef as forwardRef7
-} from "react";
-import {
-  Root as Root7,
-  Item,
-  Header,
-  Trigger as Trigger6,
-  Content as Content6
-} from "@radix-ui/react-accordion";
-import {
-  getClosestInstance as getClosestInstance6,
-  getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps2,
-  getInstanceSelectorById as getInstanceSelectorById6
-} from "@webstudio-is/react-sdk/runtime";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Accordion = forwardRef7((props, ref) => {
-  return /* @__PURE__ */ jsx7(Root7, { ref, type: "single", ...props });
-});
-var AccordionItem = forwardRef7(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps2(props);
-  return /* @__PURE__ */ jsx7(Item, { ref, value: value ?? index ?? "", ...props });
-});
-var AccordionHeader = Header;
-var AccordionTrigger = Trigger6;
-var AccordionContent = Content6;
-
-// src/navigation-menu.tsx
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import {
-  getClosestInstance as getClosestInstance7,
-  getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps3,
-  getInstanceSelectorById as getInstanceSelectorById7,
-  ReactSdkContext as ReactSdkContext2
-} from "@webstudio-is/react-sdk/runtime";
-import {
-  Children as Children5,
-  forwardRef as forwardRef8,
-  useContext as useContext2
-} from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var NavigationMenu = forwardRef8(({ value: propsValue, ...props }, ref) => {
-  const { renderer } = useContext2(ReactSdkContext2);
-  let value = propsValue;
-  if (renderer === "canvas") {
-    value = value === "" ? "-1" : value;
-  }
-  return /* @__PURE__ */ jsx8(NavigationMenuPrimitive.Root, { ref, value, ...props });
-});
-var NavigationMenuList = NavigationMenuPrimitive.List;
-var NavigationMenuViewport = NavigationMenuPrimitive.Viewport;
-var NavigationMenuContent = NavigationMenuPrimitive.Content;
-var NavigationMenuItem = forwardRef8(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps3(props);
-  return /* @__PURE__ */ jsx8(NavigationMenuPrimitive.Item, { ref, value: value ?? index, ...props });
-});
-var NavigationMenuLink = forwardRef8(({ children, ...props }, ref) => {
-  const firstChild = Children5.toArray(children)[0];
-  return /* @__PURE__ */ jsx8(NavigationMenuPrimitive.Link, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx8("a", { children: "Add link component" }) });
-});
-var NavigationMenuTrigger = forwardRef8(({ children, ...props }, ref) => {
-  const firstChild = Children5.toArray(children)[0];
-  return /* @__PURE__ */ jsx8(NavigationMenuPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx8("button", { children: "Add button or link" }) });
-});
-
-// src/select.tsx
-import {
-  forwardRef as forwardRef9,
-  useContext as useContext3
-} from "react";
-import {
-  Root as Root9,
-  Value,
-  Trigger as Trigger8,
-  Content as Content8,
-  Item as Item3,
-  ItemIndicator,
-  ItemText,
-  Portal as Portal3,
-  Viewport as Viewport2
-} from "@radix-ui/react-select";
-import {
-  getClosestInstance as getClosestInstance8,
-  getInstanceSelectorById as getInstanceSelectorById8,
-  ReactSdkContext as ReactSdkContext3
-} from "@webstudio-is/react-sdk/runtime";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Select = forwardRef9(
-  ({ value, defaultValue, ...props }, _ref) => {
-    return /* @__PURE__ */ jsx9(Root9, { ...props, defaultValue: value ?? defaultValue });
-  }
-);
-var SelectTrigger = forwardRef9((props, ref) => {
-  const { renderer } = useContext3(ReactSdkContext3);
-  const onPointerDown = renderer === "canvas" ? (event) => {
-    event.preventDefault();
-  } : void 0;
-  return /* @__PURE__ */ jsx9(Trigger8, { onPointerDown, ref, ...props });
-});
-var SelectValue = forwardRef9((props, ref) => {
-  return /* @__PURE__ */ jsx9(Value, { ref, ...props });
-});
-var SelectContent = forwardRef9((props, ref) => {
-  return /* @__PURE__ */ jsx9(Portal3, { children: /* @__PURE__ */ jsx9(Content8, { ref, ...props, position: "popper" }) });
-});
-var SelectViewport = Viewport2;
-var SelectItem = Item3;
-var SelectItemIndicator = ItemIndicator;
-var SelectItemText = ItemText;
-
-// src/switch.tsx
-import {
-  forwardRef as forwardRef10
-} from "react";
-import { Root as Root10, Thumb } from "@radix-ui/react-switch";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Switch = forwardRef10(({ checked, defaultChecked, ...props }, ref) => {
-  return /* @__PURE__ */ jsx10(Root10, { ...props, ref, defaultChecked: checked ?? defaultChecked });
-});
-var SwitchThumb = Thumb;
-
-// src/checkbox.tsx
-import {
-  forwardRef as forwardRef11
-} from "react";
-import { Root as Root11, Indicator } from "@radix-ui/react-checkbox";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Checkbox = forwardRef11(({ checked, defaultChecked, ...props }, ref) => {
-  return /* @__PURE__ */ jsx11(Root11, { ...props, ref, defaultChecked: checked ?? defaultChecked });
-});
-var CheckboxIndicator = Indicator;
-
-// src/radio-group.tsx
-import {
-  forwardRef as forwardRef12
-} from "react";
-import { Root as Root12, Item as Item4, Indicator as Indicator2 } from "@radix-ui/react-radio-group";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var RadioGroup = forwardRef12(({ value, defaultValue, ...props }, ref) => /* @__PURE__ */ jsx12(Root12, { ...props, defaultValue: value ?? defaultValue, ref }));
-var RadioGroupItem = Item4;
-var RadioGroupIndicator = Indicator2;
-export {
-  Accordion,
-  AccordionContent,
-  AccordionHeader,
-  AccordionItem,
-  AccordionTrigger,
-  Checkbox,
-  CheckboxIndicator,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogOverlay,
-  DialogTitle2 as DialogTitle,
-  DialogTrigger,
-  Label,
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  RadioGroup,
-  RadioGroupIndicator,
-  RadioGroupItem,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-  SelectTrigger,
-  SelectValue,
-  SelectViewport,
-  Switch,
-  SwitchThumb,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-};