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

package/lib/radio-group.js

@@ -1,7 +0,0 @@
-"use strict";
-import {
-} from "react";
-import { Root, Item, Indicator } from "@radix-ui/react-radio-group";
-export const RadioGroup = Root;
-export const RadioGroupItem = Item;
-export const RadioGroupIndicator = Indicator;

package/lib/radio-group.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 { RadioGroup as RadioGroupPrimitive } from "./radio-group";
-export default {
-  title: "Components/RadioGroup",
-  component: RadioGroupPrimitive
-};
-export const RadioGroup = {
-  render: (props) => renderComponentTemplate({
-    name: "RadioGroup",
-    props: { ...props },
-    components: { ...baseComponents, ...radixComponents },
-    metas: { ...baseMetas, ...radixMetas }
-  })
-};

package/lib/radio-group.ws.js

@@ -1,166 +0,0 @@
-"use strict";
-import {
-  ItemIcon,
-  RadioCheckedIcon,
-  RadioDotIcon,
-  TriggerIcon
-} from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  WsEmbedTemplate
-} from "@webstudio-is/react-sdk";
-import { button, div, span } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { buttonReset } from "./theme/styles";
-import {
-  propsRadioGroup,
-  propsRadioGroupIndicator,
-  propsRadioGroupItem
-} from "./__generated__/radio-group.props";
-const createRadioGroupItem = ({
-  value,
-  label
-}) => ({
-  type: "instance",
-  component: "Label",
-  // flex items-center space-x-2
-  styles: [tc.flex(), tc.items("center"), tc.gap(2)].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "RadioGroupItem",
-      props: [{ name: "value", type: "string", value }],
-      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
-      // focus:outline-none
-      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-      // disabled:cursor-not-allowed disabled:opacity-50
-      styles: [
-        tc.aspect("square"),
-        tc.h(4),
-        tc.w(4),
-        tc.rounded("full"),
-        tc.border(),
-        tc.border("primary"),
-        tc.text("primary"),
-        tc.focusVisible(
-          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-        ),
-        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat())
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "RadioGroupIndicator",
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Indicator Icon",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: RadioDotIcon
-                }
-              ],
-              children: []
-            }
-          ]
-        }
-      ]
-    },
-    {
-      type: "instance",
-      component: "Text",
-      children: [{ type: "text", value: label }]
-    }
-  ]
-});
-export const metaRadioGroup = {
-  category: "radix",
-  order: 100,
-  type: "container",
-  description: "A set of checkable buttons\u2014known as radio buttons\u2014where no more than one of the buttons can be checked at a time.",
-  icon: RadioCheckedIcon,
-  states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
-  ],
-  presetStyle: {
-    div
-  },
-  template: [
-    {
-      type: "instance",
-      component: "RadioGroup",
-      dataSources: {
-        radioGroupValue: { type: "variable", initialValue: "" }
-      },
-      // grid gap-2
-      styles: [tc.flex(), tc.flex("col"), tc.gap(2)].flat(),
-      props: [
-        {
-          type: "dataSource",
-          name: "value",
-          dataSourceName: "radioGroupValue"
-        },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: `radioGroupValue = value`
-            }
-          ]
-        }
-      ],
-      children: [
-        createRadioGroupItem({ value: "default", label: "Default" }),
-        createRadioGroupItem({ value: "comfortable", label: "Comfortable" }),
-        createRadioGroupItem({ value: "compact", label: "Compact" })
-      ]
-    }
-  ]
-};
-export const metaRadioGroupItem = {
-  category: "hidden",
-  type: "container",
-  requiredAncestors: ["RadioGroup"],
-  icon: ItemIcon,
-  states: defaultStates,
-  presetStyle: {
-    button: [button, buttonReset].flat()
-  }
-};
-export const metaRadioGroupIndicator = {
-  category: "hidden",
-  type: "container",
-  detachable: false,
-  icon: TriggerIcon,
-  states: defaultStates,
-  presetStyle: {
-    span
-  }
-};
-export const propsMetaRadioGroup = {
-  props: propsRadioGroup,
-  initialProps: ["id", "value", "name", "required"]
-};
-export const propsMetaRadioGroupItem = {
-  props: propsRadioGroupItem,
-  initialProps: ["value"]
-};
-export const propsMetaRadioGroupIndicator = {
-  props: propsRadioGroupIndicator
-};

package/lib/select.js

@@ -1,65 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
-import {
-  Root,
-  Value,
-  Trigger,
-  Content,
-  Item,
-  ItemIndicator,
-  ItemText,
-  Portal,
-  Viewport
-} from "@radix-ui/react-select";
-import { getClosestInstance } from "@webstudio-is/react-sdk";
-export const Select = forwardRef(({ value, ...props }, _ref) => {
-  if (value === "") {
-    value = void 0;
-  }
-  return /* @__PURE__ */ jsx(Root, { value, ...props });
-});
-export const SelectTrigger = Trigger;
-export const SelectValue = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Value, { ref, ...props });
-});
-export const SelectContent = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { ref, ...props, position: "popper" }) });
-});
-export const SelectViewport = Viewport;
-export const SelectItem = Item;
-export const SelectItemIndicator = ItemIndicator;
-export const SelectItemText = ItemText;
-const namespace = "@webstudio-is/sdk-components-react-radix";
-export const hooksSelect = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SelectContent`) {
-        const select = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Select`
-        );
-        if (select) {
-          context.setPropVariable(select.id, "open", false);
-        }
-      }
-    }
-  },
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SelectContent`) {
-        const select = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Select`
-        );
-        if (select) {
-          context.setPropVariable(select.id, "open", true);
-        }
-      }
-    }
-  }
-};

package/lib/select.stories.js

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

package/lib/select.ws.js

@@ -1,321 +0,0 @@
-"use strict";
-import {
-  SelectIcon,
-  TriggerIcon,
-  FormTextFieldIcon,
-  ContentIcon,
-  ItemIcon,
-  ViewportIcon,
-  TextIcon,
-  CheckMarkIcon
-} from "@webstudio-is/icons/svg";
-import { button, div, span } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import {
-  propsSelect,
-  propsSelectContent,
-  propsSelectItem,
-  propsSelectItemIndicator,
-  propsSelectItemText,
-  propsSelectTrigger,
-  propsSelectValue,
-  propsSelectViewport
-} from "./__generated__/select.props";
-const presetStyle = {
-  div
-};
-const createSelectItem = ({
-  props,
-  children
-}) => ({
-  type: "instance",
-  component: "SelectItem",
-  props,
-  // relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none
-  // focus:bg-accent focus:text-accent-foreground
-  // data-[disabled]:pointer-events-none data-[disabled]:opacity-50
-  styles: [
-    tc.relative(),
-    tc.flex(),
-    tc.w("full"),
-    tc.cursor("default"),
-    tc.select("none"),
-    tc.items("center"),
-    tc.rounded("md"),
-    tc.py(1.5),
-    tc.pl(8),
-    tc.pr(2),
-    tc.text("sm"),
-    tc.outline("none"),
-    tc.focus([tc.bg("accent"), tc.text("accentForeground")].flat()),
-    tc.state(
-      [tc.pointerEvents("none"), tc.opacity(50)].flat(),
-      "[data-disabled]"
-    )
-  ].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "SelectItemIndicator",
-      // absolute left-2 flex h-3.5 w-3.5 items-center justify-center
-      styles: [
-        tc.absolute(),
-        tc.left(2),
-        tc.flex(),
-        tc.h(3.5),
-        tc.w(3.5),
-        tc.items("center"),
-        tc.justify("center")
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "HtmlEmbed",
-          label: "Indicator Icon",
-          props: [
-            {
-              type: "string",
-              name: "code",
-              value: CheckMarkIcon
-            }
-          ],
-          children: []
-        }
-      ]
-    },
-    {
-      type: "instance",
-      component: "SelectItemText",
-      children
-    }
-  ]
-});
-export const metaSelect = {
-  category: "radix",
-  order: 10,
-  type: "container",
-  icon: SelectIcon,
-  stylable: false,
-  description: "Use within a form to give your users a list of options to choose from.",
-  template: [
-    {
-      type: "instance",
-      component: "Select",
-      dataSources: {
-        selectValue: { type: "variable", initialValue: "" },
-        selectOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          name: "value",
-          type: "dataSource",
-          dataSourceName: "selectValue"
-        },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["value"], code: `selectValue = value` }
-          ]
-        },
-        {
-          name: "open",
-          type: "dataSource",
-          dataSourceName: "selectOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `selectOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "SelectTrigger",
-          // flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background
-          // placeholder:text-muted-foreground
-          // focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
-          // disabled:cursor-not-allowed disabled:opacity-50
-          styles: [
-            tc.flex(),
-            tc.h(10),
-            tc.w("full"),
-            tc.items("center"),
-            tc.justify("between"),
-            tc.rounded("md"),
-            tc.border(),
-            tc.border("input"),
-            tc.bg("background"),
-            tc.px(3),
-            tc.py(2),
-            tc.text("sm"),
-            tc.state([tc.text("mutedForeground")].flat(), "::placeholder"),
-            tc.focus(
-              [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-            ),
-            tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat())
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "SelectValue",
-              props: [{ name: "placeholder", type: "string", value: "Theme" }],
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "SelectContent",
-          // relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md
-          // data-[state=open]:animate-in
-          // data-[state=closed]:animate-out data-[state=closed]:fade-out-0
-          // data-[state=open]:fade-in-0
-          // data-[state=closed]:zoom-out-95
-          // data-[state=open]:zoom-in-95
-          // data-[side=bottom]:slide-in-from-top-2
-          // data-[side=left]:slide-in-from-right-2
-          // data-[side=right]:slide-in-from-left-2
-          // data-[side=top]:slide-in-from-bottom-2
-          // position=popper
-          // data-[side=bottom]:translate-y-1
-          // data-[side=left]:-translate-x-1
-          // data-[side=right]:translate-x-1
-          // data-[side=top]:-translate-y-1
-          styles: [
-            tc.relative(),
-            tc.z(50),
-            tc.property("minWidth", "8rem"),
-            tc.overflow("hidden"),
-            tc.rounded("md"),
-            tc.border(),
-            tc.bg("popover"),
-            tc.text("popoverForeground"),
-            tc.shadow("md")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "SelectViewport",
-              // p-1
-              // position=popper
-              // h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]
-              styles: [
-                tc.p(1),
-                tc.property("height", "--radix-select-trigger-height"),
-                tc.w("full"),
-                tc.property("minWidth", "--radix-select-trigger-width")
-              ].flat(),
-              children: [
-                createSelectItem({
-                  props: [{ name: "value", type: "string", value: "light" }],
-                  children: [{ type: "text", value: "Light" }]
-                }),
-                createSelectItem({
-                  props: [{ name: "value", type: "string", value: "dark" }],
-                  children: [{ type: "text", value: "Dark" }]
-                }),
-                createSelectItem({
-                  props: [{ name: "value", type: "string", value: "system" }],
-                  children: [{ type: "text", value: "System" }]
-                })
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-export const metaSelectTrigger = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  detachable: false,
-  presetStyle: {
-    button
-  }
-};
-export const metaSelectValue = {
-  category: "hidden",
-  type: "container",
-  label: "Value",
-  icon: FormTextFieldIcon,
-  detachable: false,
-  presetStyle: {
-    span
-  }
-};
-export const metaSelectContent = {
-  category: "hidden",
-  type: "container",
-  icon: ContentIcon,
-  detachable: false,
-  presetStyle
-};
-export const metaSelectViewport = {
-  category: "hidden",
-  type: "container",
-  icon: ViewportIcon,
-  detachable: false,
-  presetStyle
-};
-export const metaSelectItem = {
-  category: "hidden",
-  type: "container",
-  icon: ItemIcon,
-  requiredAncestors: ["SelectViewport"],
-  presetStyle
-};
-export const metaSelectItemIndicator = {
-  category: "hidden",
-  type: "container",
-  label: "Indicator",
-  icon: CheckMarkIcon,
-  detachable: false,
-  requiredAncestors: ["SelectItem"],
-  presetStyle: {
-    span
-  }
-};
-export const metaSelectItemText = {
-  category: "hidden",
-  type: "container",
-  label: "Item Text",
-  icon: TextIcon,
-  detachable: false,
-  requiredAncestors: ["SelectItem"],
-  presetStyle: {
-    span
-  }
-};
-export const propsMetaSelect = {
-  props: propsSelect,
-  initialProps: ["value", "open", "name", "required"]
-};
-export const propsMetaSelectTrigger = {
-  props: propsSelectTrigger
-};
-export const propsMetaSelectValue = {
-  props: propsSelectValue,
-  initialProps: ["placeholder"]
-};
-export const propsMetaSelectContent = {
-  props: propsSelectContent
-};
-export const propsMetaSelectViewport = {
-  props: propsSelectViewport
-};
-export const propsMetaSelectItem = {
-  props: propsSelectItem,
-  initialProps: ["value"]
-};
-export const propsMetaSelectItemIndicator = {
-  props: propsSelectItemIndicator
-};
-export const propsMetaSelectItemText = {
-  props: propsSelectItemText
-};

package/lib/sheet.js

@@ -1,59 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
-import { getClosestInstance } from "@webstudio-is/react-sdk";
-import * as Dialog from "./dialog";
-export const Sheet = Dialog.Dialog;
-export const SheetTrigger = Dialog.DialogTrigger;
-export const SheetOverlay = Dialog.DialogOverlay;
-export const SheetClose = Dialog.DialogClose;
-export const SheetTitle = Dialog.DialogTitle;
-export const SheetDescription = Dialog.DialogDescription;
-export const SheetContent = forwardRef(
-  ({ tag = "nav", side = "left", role = "navigation", children, ...props }, ref) => {
-    const Tag = tag;
-    return /* @__PURE__ */ jsx(
-      Dialog.DialogContent,
-      {
-        asChild: true,
-        "data-side": side,
-        role,
-        ...props,
-        children: /* @__PURE__ */ jsx(Tag, { ref, children })
-      }
-    );
-  }
-);
-const namespace = "@webstudio-is/sdk-components-react-radix";
-export const hooksSheet = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SheetOverlay`) {
-        const sheet = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Sheet`
-        );
-        if (sheet) {
-          context.setPropVariable(sheet.id, "open", false);
-        }
-      }
-    }
-  },
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SheetOverlay`) {
-        const sheet = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Sheet`
-        );
-        if (sheet) {
-          context.setPropVariable(sheet.id, "open", true);
-        }
-      }
-    }
-  }
-};

package/lib/sheet.stories.js

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