@webstudio-is/sdk-components-react-radix 0.95.0 → 0.97.0

package/lib/sheet.ws.js

@@ -1,225 +0,0 @@
-"use strict";
-import { HamburgerMenuIcon, LargeXIcon } from "@webstudio-is/icons/svg";
-import * as tc from "./theme/tailwind-classes";
-import { getButtonStyles } from "./theme/styles";
-export const meta = {
-  category: "radix",
-  order: 1,
-  type: "container",
-  icon: HamburgerMenuIcon,
-  stylable: false,
-  description: "Displays content in a menu that slides out from the side of the screen, triggered by a button. Use this component for a typical mobile hamburger menu.",
-  template: [
-    {
-      type: "instance",
-      component: "Dialog",
-      label: "Sheet",
-      dataSources: {
-        sheetOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "sheetOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `sheetOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "DialogTrigger",
-          label: "Sheet Trigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: getButtonStyles("ghost", "icon"),
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Hamburger Menu Svg",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: HamburgerMenuIcon
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "DialogOverlay",
-          label: "Sheet Overlay",
-          /**
-           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
-           * flex
-           **/
-          styles: [
-            tc.fixed(),
-            tc.inset(0),
-            tc.z(50),
-            tc.bg("background", 80),
-            tc.backdropBlur("sm"),
-            // To allow positioning Content
-            tc.flex(),
-            tc.flex("col"),
-            tc.overflow("auto")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "DialogContent",
-              label: "Sheet Content",
-              /**
-               * fixed w-full z-50
-               * grid gap-4 max-w-lg
-               * m-auto
-               * border bg-background p-6 shadow-lg
-               **/
-              styles: [
-                tc.w("full"),
-                tc.z(50),
-                tc.flex(),
-                tc.flex("col"),
-                tc.gap(4),
-                tc.border(),
-                tc.bg("background"),
-                tc.p(6),
-                tc.shadow("lg"),
-                tc.relative(),
-                // side=left
-                tc.mr("auto"),
-                tc.maxW("sm"),
-                tc.grow()
-              ].flat(),
-              children: [
-                {
-                  type: "instance",
-                  component: "Box",
-                  label: "Navigation",
-                  props: [
-                    { name: "tag", type: "string", value: "nav" },
-                    { name: "role", type: "string", value: "navigation" }
-                  ],
-                  children: [
-                    {
-                      type: "instance",
-                      component: "Box",
-                      label: "Sheet Header",
-                      styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
-                      children: [
-                        {
-                          type: "instance",
-                          component: "DialogTitle",
-                          label: "Sheet Title",
-                          /**
-                           * text-lg leading-none tracking-tight
-                           **/
-                          styles: [
-                            tc.my(0),
-                            tc.leading("none"),
-                            tc.text("lg"),
-                            tc.tracking("tight")
-                          ].flat(),
-                          children: [
-                            {
-                              type: "text",
-                              value: "Sheet Title"
-                            }
-                          ]
-                        },
-                        {
-                          type: "instance",
-                          component: "DialogDescription",
-                          label: "Sheet Description",
-                          /**
-                           * text-sm text-muted-foreground
-                           **/
-                          styles: [
-                            tc.my(0),
-                            tc.text("sm"),
-                            tc.text("mutedForeground")
-                          ].flat(),
-                          children: [
-                            {
-                              type: "text",
-                              value: "Sheet description text you can edit"
-                            }
-                          ]
-                        }
-                      ]
-                    },
-                    {
-                      type: "instance",
-                      component: "Text",
-                      children: [
-                        { type: "text", value: "The text you can edit" }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  type: "instance",
-                  component: "DialogClose",
-                  label: "Close Button",
-                  /**
-                   * 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: [
-                    tc.absolute(),
-                    tc.right(4),
-                    tc.top(4),
-                    tc.rounded("sm"),
-                    tc.opacity(70),
-                    tc.flex(),
-                    tc.items("center"),
-                    tc.justify("center"),
-                    tc.h(4),
-                    tc.w(4),
-                    tc.border(0),
-                    tc.bg("transparent"),
-                    tc.outline("none"),
-                    tc.hover(tc.opacity(100)),
-                    tc.focus(tc.ring("ring", 2, "background", 2))
-                  ].flat(),
-                  children: [
-                    {
-                      type: "instance",
-                      component: "HtmlEmbed",
-                      label: "Close Icon",
-                      props: [
-                        {
-                          type: "string",
-                          name: "code",
-                          value: LargeXIcon
-                        }
-                      ],
-                      children: []
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};

package/lib/switch.js

@@ -1,4 +0,0 @@
-"use strict";
-import { Root, Thumb } from "@radix-ui/react-switch";
-export const Switch = Root;
-export const SwitchThumb = Thumb;

package/lib/switch.stories.js

@@ -1,19 +0,0 @@
-"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 { Switch as SwitchPrimitive } from "./switch";
-export default {
-  title: "Components/Switch",
-  component: SwitchPrimitive
-};
-export const Switch = {
-  render: (props) => renderComponentTemplate({
-    name: "Switch",
-    props: { ...props },
-    components: { ...baseComponents, ...radixComponents },
-    metas: { ...baseMetas, ...radixMetas }
-  })
-};

package/lib/switch.ws.js

@@ -1,140 +0,0 @@
-"use strict";
-import { SwitchIcon, TriggerIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { button, span } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { buttonReset } from "./theme/styles";
-import { propsSwitch, propsSwitchThumb } from "./__generated__/switch.props";
-export const metaSwitch = {
-  category: "radix",
-  order: 11,
-  type: "container",
-  description: "A control that allows the user to toggle between checked and not checked.",
-  icon: SwitchIcon,
-  states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
-  ],
-  presetStyle: {
-    button: [button, buttonReset].flat()
-  },
-  template: [
-    {
-      type: "instance",
-      component: "Switch",
-      dataSources: {
-        switchChecked: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          name: "checked",
-          type: "dataSource",
-          dataSourceName: "switchChecked"
-        },
-        {
-          name: "onCheckedChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["checked"],
-              code: `switchChecked = checked`
-            }
-          ]
-        }
-      ],
-      // peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors
-      // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
-      // disabled:cursor-not-allowed disabled:opacity-50
-      // data-[state=checked]:bg-primary
-      // data-[state=unchecked]:bg-input
-      styles: [
-        // We are not supporting peer like styles yet
-        tc.inlineFlex(),
-        tc.property("height", "24px"),
-        tc.property("width", "44px"),
-        tc.shrink(0),
-        tc.cursor("pointer"),
-        tc.items("center"),
-        tc.rounded("full"),
-        tc.border(2),
-        tc.border("transparent"),
-        tc.transition("all"),
-        tc.focusVisible(
-          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-        ),
-        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
-        tc.state([tc.bg("primary")].flat(), "[data-state=checked]"),
-        tc.state([tc.bg("input")].flat(), "[data-state=unchecked]")
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "SwitchThumb",
-          // pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
-          // data-[state=checked]:translate-x-5
-          // data-[state=unchecked]:translate-x-0
-          styles: [
-            tc.pointerEvents("none"),
-            tc.block(),
-            tc.h(5),
-            tc.w(5),
-            tc.rounded("full"),
-            tc.bg("background"),
-            tc.shadow("lg"),
-            tc.transition("transform"),
-            tc.state(
-              [tc.property("transform", "translateX(20px)")].flat(),
-              "[data-state=checked]"
-            ),
-            tc.state(
-              [tc.property("transform", "translateX(0px)")].flat(),
-              "[data-state=unchecked]"
-            )
-          ].flat(),
-          children: []
-        }
-      ]
-    }
-  ]
-};
-export const metaSwitchThumb = {
-  category: "hidden",
-  type: "container",
-  detachable: false,
-  icon: TriggerIcon,
-  states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
-  ],
-  presetStyle: {
-    span
-  }
-};
-export const propsMetaSwitch = {
-  props: propsSwitch,
-  initialProps: ["id", "checked", "name", "required"]
-};
-export const propsMetaSwitchThumb = {
-  props: propsSwitchThumb
-};

package/lib/tabs.js

@@ -1,38 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
-import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
-import {
-  getClosestInstance,
-  getIndexWithinAncestorFromComponentProps
-} from "@webstudio-is/react-sdk";
-export const Tabs = Root;
-export const TabsList = List;
-export const TabsTrigger = forwardRef(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
-  return /* @__PURE__ */ jsx(Trigger, { ref, value: value ?? index, ...props });
-});
-export const TabsContent = forwardRef(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
-  return /* @__PURE__ */ jsx(Content, { ref, value: value ?? index, ...props });
-});
-const namespace = "@webstudio-is/sdk-components-react-radix";
-export const hooksTabs = {
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:TabsContent`) {
-        const tabs = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Tabs`
-        );
-        const contentValue = context.getPropValue(instance.id, "value") ?? context.indexesWithinAncestors.get(instance.id)?.toString();
-        if (tabs && contentValue) {
-          context.setPropVariable(tabs.id, "value", contentValue);
-        }
-      }
-    }
-  }
-};

package/lib/tabs.stories.js

@@ -1,18 +0,0 @@
-"use strict";
-import { renderComponentTemplate } from "@webstudio-is/react-sdk";
-import { Tabs as TabsPrimitive } from "./tabs";
-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/Tabs",
-  component: TabsPrimitive
-};
-export const Tabs = {
-  render: () => renderComponentTemplate({
-    name: "Tabs",
-    components: { ...baseComponents, ...radixComponents },
-    metas: { ...baseMetas, ...radixMetas }
-  })
-};

package/lib/tabs.ws.js

@@ -1,169 +0,0 @@
-"use strict";
-import {
-  ContentIcon,
-  HeaderIcon,
-  TabsIcon,
-  TriggerIcon
-} from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { button, div } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { buttonReset } from "./theme/styles";
-import {
-  propsTabs,
-  propsTabsList,
-  propsTabsTrigger,
-  propsTabsContent
-} from "./__generated__/tabs.props";
-const presetStyle = {
-  div
-};
-const tabsTriggerStyles = [
-  tc.inlineFlex(),
-  tc.items("center"),
-  tc.justify("center"),
-  tc.whitespace("nowrap"),
-  tc.rounded("md"),
-  tc.px(3),
-  tc.py(1.5),
-  tc.text("sm"),
-  tc.font("medium"),
-  tc.transition("all"),
-  tc.focusVisible(
-    [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-  ),
-  tc.disabled([tc.pointerEvents("none"), tc.opacity(50)].flat()),
-  tc.state(
-    [tc.bg("background"), tc.text("foreground"), tc.shadow("sm")].flat(),
-    "[data-state=active]"
-  )
-].flat();
-const tabsContentStyles = [
-  tc.mt(2),
-  tc.focusVisible(
-    [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-  )
-].flat();
-export const metaTabs = {
-  category: "radix",
-  order: 2,
-  type: "container",
-  icon: TabsIcon,
-  presetStyle,
-  description: "A set of panels with content that are displayed one at a time. Duplicate both a tab trigger and tab content to add more tabs. Triggers and content are connected according to their order in the Navigator.",
-  template: [
-    {
-      type: "instance",
-      component: "Tabs",
-      dataSources: {
-        tabsValue: { type: "variable", initialValue: "0" }
-      },
-      props: [
-        { type: "dataSource", name: "value", dataSourceName: "tabsValue" },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["value"], code: `tabsValue = value` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "TabsList",
-          // inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground
-          styles: [
-            tc.inlineFlex(),
-            tc.h(10),
-            tc.items("center"),
-            tc.justify("center"),
-            tc.rounded("md"),
-            tc.bg("muted"),
-            tc.p(1),
-            tc.text("mutedForeground")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "TabsTrigger",
-              styles: tabsTriggerStyles,
-              children: [{ type: "text", value: "Account" }]
-            },
-            {
-              type: "instance",
-              component: "TabsTrigger",
-              styles: tabsTriggerStyles,
-              children: [{ type: "text", value: "Password" }]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "TabsContent",
-          styles: tabsContentStyles,
-          children: [
-            { type: "text", value: "Make changes to your account here." }
-          ]
-        },
-        {
-          type: "instance",
-          component: "TabsContent",
-          styles: tabsContentStyles,
-          children: [{ type: "text", value: "Change your password here." }]
-        }
-      ]
-    }
-  ]
-};
-export const metaTabsList = {
-  category: "hidden",
-  detachable: false,
-  type: "container",
-  icon: HeaderIcon,
-  requiredAncestors: ["Tabs"],
-  presetStyle
-};
-export const metaTabsTrigger = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  requiredAncestors: ["TabsList"],
-  invalidAncestors: ["TabsTrigger"],
-  indexWithinAncestor: "Tabs",
-  label: "Tab Trigger",
-  states: [
-    ...defaultStates,
-    {
-      category: "component-states",
-      label: "Active",
-      selector: "[data-state=active]"
-    }
-  ],
-  presetStyle: {
-    button: [button, buttonReset].flat()
-  }
-};
-export const metaTabsContent = {
-  category: "hidden",
-  type: "container",
-  label: "Tab Content",
-  icon: ContentIcon,
-  requiredAncestors: ["Tabs"],
-  indexWithinAncestor: "Tabs",
-  presetStyle
-};
-export const propsMetaTabs = {
-  props: propsTabs
-};
-export const propsMetaTabsList = {
-  props: propsTabsList
-};
-export const propsMetaTabsTrigger = {
-  props: propsTabsTrigger
-};
-export const propsMetaTabsContent = {
-  props: propsTabsContent
-};