@webstudio-is/sdk-components-react-radix 0.90.0 → 0.92.0

package/lib/accordion.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import {
   AccordionIcon,
   ItemIcon,
@@ -95,7 +96,7 @@ const accordionContentStyles = [
   // tc.transition("all"),
   tc.pb(4)
 ].flat();
-const metaAccordion = {
+export const metaAccordion = {
   category: "radix",
   order: 3,
   type: "container",
@@ -192,7 +193,7 @@ const metaAccordion = {
     }
   ]
 };
-const metaAccordionItem = {
+export const metaAccordionItem = {
   category: "hidden",
   type: "container",
   label: "Item",
@@ -201,7 +202,7 @@ const metaAccordionItem = {
   indexWithinAncestor: "Accordion",
   presetStyle
 };
-const metaAccordionHeader = {
+export const metaAccordionHeader = {
   category: "hidden",
   type: "container",
   label: "Item Header",
@@ -212,7 +213,7 @@ const metaAccordionHeader = {
     h3: [h3, tc.my(0)].flat()
   }
 };
-const metaAccordionTrigger = {
+export const metaAccordionTrigger = {
   category: "hidden",
   type: "container",
   label: "Item Trigger",
@@ -231,7 +232,7 @@ const metaAccordionTrigger = {
     button: [button, buttonReset].flat()
   }
 };
-const metaAccordionContent = {
+export const metaAccordionContent = {
   category: "hidden",
   type: "container",
   label: "Item Content",
@@ -240,31 +241,19 @@ const metaAccordionContent = {
   detachable: false,
   presetStyle
 };
-const propsMetaAccordion = {
+export const propsMetaAccordion = {
   props: propsAccordion,
   initialProps: ["value", "collapsible"]
 };
-const propsMetaAccordionItem = {
+export const propsMetaAccordionItem = {
   props: propsAccordionItem
 };
-const propsMetaAccordionHeader = {
+export const propsMetaAccordionHeader = {
   props: propsAccordionHeader
 };
-const propsMetaAccordionTrigger = {
+export const propsMetaAccordionTrigger = {
   props: propsAccordionTrigger
 };
-const propsMetaAccordionContent = {
+export const propsMetaAccordionContent = {
   props: propsAccordionContent
 };
-export {
-  metaAccordion,
-  metaAccordionContent,
-  metaAccordionHeader,
-  metaAccordionItem,
-  metaAccordionTrigger,
-  propsMetaAccordion,
-  propsMetaAccordionContent,
-  propsMetaAccordionHeader,
-  propsMetaAccordionItem,
-  propsMetaAccordionTrigger
-};

package/lib/checkbox.js

@@ -1,13 +1,10 @@
+"use strict";
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef
 } from "react";
 import { Root, Indicator } from "@radix-ui/react-checkbox";
-const Checkbox = forwardRef((props, ref) => {
+export const Checkbox = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(Root, { ref, ...props });
 });
-const CheckboxIndicator = Indicator;
-export {
-  Checkbox,
-  CheckboxIndicator
-};
+export const CheckboxIndicator = Indicator;

package/lib/checkbox.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+import { renderComponentTemplate } from "@webstudio-is/react-sdk";
+import * as baseComponents from "@webstudio-is/sdk-components-react";
+import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
+import * as radixComponents from "./components";
+import * as radixMetas from "./metas";
+import { Checkbox as CheckboxPrimitive } from "./checkbox";
+export default {
+  title: "Components/Checkbox",
+  component: CheckboxPrimitive
+};
+export const Checkbox = {
+  render: (props) => renderComponentTemplate({
+    name: "Checkbox",
+    props: { ...props },
+    components: { ...baseComponents, ...radixComponents },
+    metas: { ...baseMetas, ...radixMetas }
+  })
+};

package/lib/checkbox.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import {
   CheckMarkIcon,
   CheckboxCheckedIcon,
@@ -13,7 +14,7 @@ import {
   propsCheckbox,
   propsCheckboxIndicator
 } from "./__generated__/checkbox.props";
-const metaCheckbox = {
+export const metaCheckbox = {
   category: "radix",
   order: 101,
   type: "container",
@@ -128,7 +129,7 @@ const metaCheckbox = {
     }
   ]
 };
-const metaCheckboxIndicator = {
+export const metaCheckboxIndicator = {
   category: "hidden",
   type: "container",
   detachable: false,
@@ -138,16 +139,10 @@ const metaCheckboxIndicator = {
     span
   }
 };
-const propsMetaCheckbox = {
+export const propsMetaCheckbox = {
   props: propsCheckbox,
   initialProps: ["id", "checked", "name", "required"]
 };
-const propsMetaCheckboxIndicator = {
+export const propsMetaCheckboxIndicator = {
   props: propsCheckboxIndicator
 };
-export {
-  metaCheckbox,
-  metaCheckboxIndicator,
-  propsMetaCheckbox,
-  propsMetaCheckboxIndicator
-};

package/lib/collapsible.js

@@ -1,3 +1,4 @@
+"use strict";
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
@@ -5,14 +6,14 @@ import {
 } from "react";
 import { Root, Trigger, Content } from "@radix-ui/react-collapsible";
 import { getClosestInstance } from "@webstudio-is/react-sdk";
-const Collapsible = Root;
-const CollapsibleTrigger = forwardRef(({ children, ...props }, ref) => {
+export const Collapsible = Root;
+export const 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" }) });
 });
-const CollapsibleContent = Content;
+export const CollapsibleContent = Content;
 const namespace = "@webstudio-is/sdk-components-react-radix";
-const hooksCollapsible = {
+export const hooksCollapsible = {
   onNavigatorSelect: (context, event) => {
     for (const instance of event.instancePath) {
       if (instance.component === `${namespace}:CollapsibleContent`) {
@@ -28,9 +29,3 @@ const hooksCollapsible = {
     }
   }
 };
-export {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  hooksCollapsible
-};

package/{src/collapsible.stories.tsx → lib/collapsible.stories.js}

@@ -1,21 +1,18 @@
-import type { Meta, StoryObj } from "@storybook/react";
+"use strict";
 import { renderComponentTemplate } from "@webstudio-is/react-sdk";
 import { Collapsible as CollapsiblePrimitive } from "./collapsible";
 import * as baseComponents from "@webstudio-is/sdk-components-react";
 import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
 import * as radixComponents from "./components";
 import * as radixMetas from "./metas";
-
 export default {
   title: "Components/Collapsible",
-  component: CollapsiblePrimitive,
-} satisfies Meta<typeof CollapsiblePrimitive>;
-
-export const Collapsible: StoryObj<typeof CollapsiblePrimitive> = {
-  render: () =>
-    renderComponentTemplate({
-      name: "Collapsible",
-      components: { ...baseComponents, ...radixComponents },
-      metas: { ...baseMetas, ...radixMetas },
-    }),
+  component: CollapsiblePrimitive
+};
+export const Collapsible = {
+  render: () => renderComponentTemplate({
+    name: "Collapsible",
+    components: { ...baseComponents, ...radixComponents },
+    metas: { ...baseMetas, ...radixMetas }
+  })
 };

package/lib/collapsible.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import {
   CollapsibleIcon,
   TriggerIcon,
@@ -13,7 +14,7 @@ import { getButtonStyles } from "./theme/styles";
 const presetStyle = {
   div
 };
-const metaCollapsible = {
+export const metaCollapsible = {
   category: "radix",
   order: 5,
   type: "container",
@@ -69,21 +70,21 @@ const metaCollapsible = {
     }
   ]
 };
-const metaCollapsibleTrigger = {
+export const metaCollapsibleTrigger = {
   category: "hidden",
   type: "container",
   icon: TriggerIcon,
   stylable: false,
   detachable: false
 };
-const metaCollapsibleContent = {
+export const metaCollapsibleContent = {
   category: "hidden",
   type: "container",
   presetStyle,
   icon: ContentIcon,
   detachable: false
 };
-const propsMetaCollapsible = {
+export const propsMetaCollapsible = {
   props: {
     ...propsCollapsible,
     onOpenChange: {
@@ -94,17 +95,9 @@ const propsMetaCollapsible = {
   },
   initialProps: ["open", "onOpenChange"]
 };
-const propsMetaCollapsibleTrigger = {
+export const propsMetaCollapsibleTrigger = {
   props: propsCollapsibleTrigger
 };
-const propsMetaCollapsibleContent = {
+export const propsMetaCollapsibleContent = {
   props: propsCollapsibleContent
 };
-export {
-  metaCollapsible,
-  metaCollapsibleContent,
-  metaCollapsibleTrigger,
-  propsMetaCollapsible,
-  propsMetaCollapsibleContent,
-  propsMetaCollapsibleTrigger
-};

package/lib/components.js

@@ -1,9 +1,10 @@
-import {
+"use strict";
+export {
   Collapsible,
   CollapsibleTrigger,
   CollapsibleContent
 } from "./collapsible";
-import {
+export {
   Dialog,
   DialogTrigger,
   DialogOverlay,
@@ -12,18 +13,18 @@ import {
   DialogTitle,
   DialogDescription
 } from "./dialog";
-import { Popover, PopoverTrigger, PopoverContent } from "./popover";
-import { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
-import { Label } from "./label";
-import {
+export { Popover, PopoverTrigger, PopoverContent } from "./popover";
+export { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export { Label } from "./label";
+export {
   Accordion,
   AccordionItem,
   AccordionHeader,
   AccordionTrigger,
   AccordionContent
 } from "./accordion";
-import {
+export {
   NavigationMenu,
   NavigationMenuList,
   NavigationMenuItem,
@@ -32,7 +33,7 @@ import {
   NavigationMenuLink,
   NavigationMenuViewport
 } from "./navigation-menu";
-import {
+export {
   Select,
   SelectTrigger,
   SelectValue,
@@ -42,56 +43,6 @@ import {
   SelectItemIndicator,
   SelectItemText
 } from "./select";
-import { Switch, SwitchThumb } from "./switch";
-import { Checkbox, CheckboxIndicator } from "./checkbox";
-import { RadioGroup, RadioGroupItem, RadioGroupIndicator } from "./radio-group";
-export {
-  Accordion,
-  AccordionContent,
-  AccordionHeader,
-  AccordionItem,
-  AccordionTrigger,
-  Checkbox,
-  CheckboxIndicator,
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogOverlay,
-  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
-};
+export { Switch, SwitchThumb } from "./switch";
+export { Checkbox, CheckboxIndicator } from "./checkbox";
+export { RadioGroup, RadioGroupItem, RadioGroupIndicator } from "./radio-group";

package/lib/dialog.js

@@ -1,3 +1,4 @@
+"use strict";
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
@@ -5,22 +6,22 @@ import {
 } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { getClosestInstance } from "@webstudio-is/react-sdk";
-const Dialog = forwardRef((props, _ref) => {
+export const Dialog = forwardRef((props, _ref) => {
   return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
 });
-const DialogTrigger = forwardRef(({ children, ...props }, ref) => {
+export const DialogTrigger = forwardRef(({ children, ...props }, ref) => {
   const firstChild = Children.toArray(children)[0];
   return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
 });
-const DialogOverlay = forwardRef((props, ref) => {
+export const DialogOverlay = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { ref, ...props }) });
 });
-const DialogContent = DialogPrimitive.Content;
-const DialogClose = DialogPrimitive.Close;
-const DialogTitle = DialogPrimitive.Title;
-const DialogDescription = DialogPrimitive.Description;
+export const DialogContent = DialogPrimitive.Content;
+export const DialogClose = DialogPrimitive.Close;
+export const DialogTitle = DialogPrimitive.Title;
+export const DialogDescription = DialogPrimitive.Description;
 const namespace = "@webstudio-is/sdk-components-react-radix";
-const hooksDialog = {
+export const hooksDialog = {
   onNavigatorUnselect: (context, event) => {
     for (const instance of event.instancePath) {
       if (instance.component === `${namespace}:DialogOverlay`) {
@@ -50,13 +51,3 @@ const hooksDialog = {
     }
   }
 };
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogOverlay,
-  DialogTitle,
-  DialogTrigger,
-  hooksDialog
-};

package/{src/dialog.stories.tsx → lib/dialog.stories.js}

@@ -1,21 +1,18 @@
-import type { Meta, StoryObj } from "@storybook/react";
+"use strict";
 import { renderComponentTemplate } from "@webstudio-is/react-sdk";
 import { Dialog as DialogPrimitive } from "./dialog";
 import * as baseComponents from "@webstudio-is/sdk-components-react";
 import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
 import * as radixComponents from "./components";
 import * as radixMetas from "./metas";
-
 export default {
   title: "Components/Dialog",
-  component: DialogPrimitive,
-} satisfies Meta<typeof DialogPrimitive>;
-
-export const Dialog: StoryObj<typeof DialogPrimitive> = {
-  render: () =>
-    renderComponentTemplate({
-      name: "Dialog",
-      components: { ...baseComponents, ...radixComponents },
-      metas: { ...baseMetas, ...radixMetas },
-    }),
+  component: DialogPrimitive
+};
+export const Dialog = {
+  render: () => renderComponentTemplate({
+    name: "Dialog",
+    components: { ...baseComponents, ...radixComponents },
+    metas: { ...baseMetas, ...radixMetas }
+  })
 };

package/lib/dialog.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import {
   DialogIcon,
   TriggerIcon,
@@ -9,6 +10,7 @@ import {
   LargeXIcon
 } from "@webstudio-is/icons/svg";
 import {
+  defaultStates
 } from "@webstudio-is/react-sdk";
 import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
@@ -31,49 +33,50 @@ const titlePresetStyle = {
 const descriptionPresetStyle = {
   p
 };
-const metaDialogTrigger = {
+export const metaDialogTrigger = {
   category: "hidden",
   type: "container",
   icon: TriggerIcon,
   stylable: false,
   detachable: false
 };
-const metaDialogContent = {
+export const metaDialogContent = {
   category: "hidden",
   type: "container",
   presetStyle,
   icon: ContentIcon,
   detachable: false
 };
-const metaDialogOverlay = {
+export const metaDialogOverlay = {
   category: "hidden",
   type: "container",
   presetStyle,
   icon: OverlayIcon,
   detachable: false
 };
-const metaDialogTitle = {
+export const metaDialogTitle = {
   category: "hidden",
   type: "container",
   presetStyle: titlePresetStyle,
   icon: HeadingIcon
 };
-const metaDialogDescription = {
+export const metaDialogDescription = {
   category: "hidden",
   type: "container",
   presetStyle: descriptionPresetStyle,
   icon: TextIcon
 };
-const metaDialogClose = {
+export const metaDialogClose = {
   category: "hidden",
   type: "container",
   presetStyle: {
     button: [buttonReset, button].flat()
   },
+  states: defaultStates,
   icon: ButtonElementIcon,
   label: "Close Button"
 };
-const metaDialog = {
+export const metaDialog = {
   category: "radix",
   order: 4,
   type: "container",
@@ -257,46 +260,30 @@ const metaDialog = {
     }
   ]
 };
-const propsMetaDialog = {
+export const propsMetaDialog = {
   props: propsDialog,
   initialProps: ["open"]
 };
-const propsMetaDialogTrigger = {
+export const propsMetaDialogTrigger = {
   props: propsDialogTrigger
 };
-const propsMetaDialogContent = {
+export const propsMetaDialogContent = {
   props: propsDialogContent,
   initialProps: []
 };
-const propsMetaDialogOverlay = {
+export const propsMetaDialogOverlay = {
   props: propsDialogOverlay,
   initialProps: []
 };
-const propsMetaDialogClose = {
+export const propsMetaDialogClose = {
   props: propsDialogClose,
   initialProps: []
 };
-const propsMetaDialogTitle = {
+export const propsMetaDialogTitle = {
   props: propsDialogTitle,
   initialProps: []
 };
-const propsMetaDialogDescription = {
+export const propsMetaDialogDescription = {
   props: propsDialogDescription,
   initialProps: []
 };
-export {
-  metaDialog,
-  metaDialogClose,
-  metaDialogContent,
-  metaDialogDescription,
-  metaDialogOverlay,
-  metaDialogTitle,
-  metaDialogTrigger,
-  propsMetaDialog,
-  propsMetaDialogClose,
-  propsMetaDialogContent,
-  propsMetaDialogDescription,
-  propsMetaDialogOverlay,
-  propsMetaDialogTitle,
-  propsMetaDialogTrigger
-};

package/lib/hooks.js

@@ -1,3 +1,4 @@
+"use strict";
 import { hooksCollapsible } from "./collapsible";
 import { hooksTabs } from "./tabs";
 import { hooksDialog } from "./dialog";
@@ -7,7 +8,7 @@ import { hooksTooltip } from "./tooltip";
 import { hooksAccordion } from "./accordion";
 import { hooksNavigationMenu } from "./navigation-menu";
 import { hooksSelect } from "./select";
-const hooks = [
+export const hooks = [
   hooksCollapsible,
   hooksTabs,
   hooksDialog,
@@ -18,6 +19,3 @@ const hooks = [
   hooksNavigationMenu,
   hooksSelect
 ];
-export {
-  hooks
-};

package/lib/label.js

@@ -1,9 +1,7 @@
+"use strict";
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef
 } from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-const Label = forwardRef((props, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, ...props }));
-export {
-  Label
-};
+export const Label = forwardRef((props, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, ...props }));

package/lib/label.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+import { renderComponentTemplate } from "@webstudio-is/react-sdk";
+import { Label as LabelPrimitive } from "./label";
+import * as baseComponents from "@webstudio-is/sdk-components-react";
+import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
+import * as radixComponents from "./components";
+import * as radixMetas from "./metas";
+export default {
+  title: "Components/Label",
+  component: LabelPrimitive
+};
+export const Label = {
+  render: (props) => renderComponentTemplate({
+    name: "Label",
+    props: { ...props },
+    components: { ...baseComponents, ...radixComponents },
+    metas: { ...baseMetas, ...radixMetas }
+  })
+};

package/lib/label.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import { LabelIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -8,7 +9,7 @@ import * as tc from "./theme/tailwind-classes";
 const presetStyle = {
   label
 };
-const meta = {
+export const meta = {
   category: "radix",
   order: 102,
   type: "container",
@@ -31,7 +32,7 @@ const meta = {
     }
   ]
 };
-const propsMeta = {
+export const propsMeta = {
   props: {
     ...props,
     htmlFor: {
@@ -41,7 +42,3 @@ const propsMeta = {
   },
   initialProps: ["id", "htmlFor"]
 };
-export {
-  meta,
-  propsMeta
-};