@webstudio-is/sdk-components-react-radix 0.85.0 → 0.87.0

package/lib/accordion.ws.js

@@ -0,0 +1,243 @@
+import {
+  AccordionIcon,
+  ItemIcon,
+  HeaderIcon,
+  TriggerIcon,
+  ContentIcon
+} from "@webstudio-is/icons/svg";
+import { div, h3, button } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsAccordion,
+  propsAccordionItem,
+  propsAccordionHeader,
+  propsAccordionTrigger,
+  propsAccordionContent
+} from "./__generated__/accordion.props";
+const presetStyle = {
+  div
+};
+const accordionItemStyles = [tc.borderB()].flat();
+const accordionHeaderStyles = [tc.flex()].flat();
+const accordionTriggerStyles = [
+  tc.flex(),
+  tc.flex(1),
+  tc.items("center"),
+  tc.justify("between"),
+  tc.py(4),
+  tc.font("medium"),
+  tc.transition("all"),
+  tc.hover([tc.underline()].flat())
+].flat();
+const accordionContentStyles = [
+  tc.overflow("hidden"),
+  tc.text("sm"),
+  // transition does not work with display: none
+  // tc.transition("all"),
+  tc.pb(4)
+].flat();
+const metaAccordion = {
+  category: "radix",
+  type: "container",
+  icon: AccordionIcon,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Accordion",
+      dataSources: {
+        accordionValue: { type: "variable", initialValue: "0" }
+      },
+      props: [
+        { type: "boolean", name: "collapsible", value: true },
+        { type: "dataSource", name: "value", dataSourceName: "accordionValue" },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: `accordionValue = value`
+            }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "AccordionItem",
+          styles: accordionItemStyles,
+          children: [
+            {
+              type: "instance",
+              component: "AccordionHeader",
+              styles: accordionHeaderStyles,
+              children: [
+                {
+                  type: "instance",
+                  component: "AccordionTrigger",
+                  styles: accordionTriggerStyles,
+                  children: [{ type: "text", value: "Is it accessible?" }]
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "AccordionContent",
+              styles: accordionContentStyles,
+              children: [
+                {
+                  type: "text",
+                  value: "Yes. It adheres to the WAI-ARIA design pattern."
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "AccordionItem",
+          styles: accordionItemStyles,
+          children: [
+            {
+              type: "instance",
+              component: "AccordionHeader",
+              styles: accordionHeaderStyles,
+              children: [
+                {
+                  type: "instance",
+                  component: "AccordionTrigger",
+                  styles: accordionTriggerStyles,
+                  children: [{ type: "text", value: "Is it styled?" }]
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "AccordionContent",
+              styles: accordionContentStyles,
+              children: [
+                {
+                  type: "text",
+                  value: "Yes. It comes with default styles that matches the other components' aesthetic."
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "AccordionItem",
+          styles: accordionItemStyles,
+          children: [
+            {
+              type: "instance",
+              component: "AccordionHeader",
+              styles: accordionHeaderStyles,
+              children: [
+                {
+                  type: "instance",
+                  component: "AccordionTrigger",
+                  styles: accordionTriggerStyles,
+                  children: [{ type: "text", value: "Is it animated?" }]
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "AccordionContent",
+              styles: accordionContentStyles,
+              children: [
+                {
+                  type: "text",
+                  value: "Yes. It's animated by default, but you can disable it if you prefer."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const metaAccordionItem = {
+  category: "hidden",
+  type: "container",
+  icon: ItemIcon,
+  requiredAncestors: ["Accordion"],
+  indexWithinAncestor: "Accordion",
+  presetStyle
+};
+const metaAccordionHeader = {
+  category: "hidden",
+  type: "container",
+  icon: HeaderIcon,
+  requiredAncestors: ["AccordionItem"],
+  detachable: false,
+  presetStyle: {
+    h3: [h3, tc.my(0)].flat()
+  }
+};
+const metaAccordionTrigger = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon,
+  requiredAncestors: ["AccordionHeader"],
+  detachable: false,
+  presetStyle: {
+    button: [
+      button,
+      {
+        property: "backgroundColor",
+        value: { type: "keyword", value: "transparent" }
+      },
+      {
+        property: "backgroundImage",
+        value: { type: "keyword", value: "none" }
+      },
+      {
+        property: "cursor",
+        value: { type: "keyword", value: "pointer" }
+      },
+      tc.px(0),
+      tc.border(0)
+    ].flat()
+  }
+};
+const metaAccordionContent = {
+  category: "hidden",
+  type: "container",
+  icon: ContentIcon,
+  requiredAncestors: ["AccordionItem"],
+  detachable: false,
+  presetStyle
+};
+const propsMetaAccordion = {
+  props: propsAccordion,
+  initialProps: ["value", "collapsible", "dir", "orientation"]
+};
+const propsMetaAccordionItem = {
+  props: propsAccordionItem
+};
+const propsMetaAccordionHeader = {
+  props: propsAccordionHeader
+};
+const propsMetaAccordionTrigger = {
+  props: propsAccordionTrigger
+};
+const propsMetaAccordionContent = {
+  props: propsAccordionContent
+};
+export {
+  metaAccordion,
+  metaAccordionContent,
+  metaAccordionHeader,
+  metaAccordionItem,
+  metaAccordionTrigger,
+  propsMetaAccordion,
+  propsMetaAccordionContent,
+  propsMetaAccordionHeader,
+  propsMetaAccordionItem,
+  propsMetaAccordionTrigger
+};

package/lib/button.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Button = forwardRef(({ variant = "default", size = "default", ...props }, ref) => {
+  return /* @__PURE__ */ jsx("button", { ref, "data-size": size, "data-variant": variant, ...props });
+});
+export {
+  Button
+};

package/lib/button.ws.js

@@ -0,0 +1,133 @@
+import { ButtonElementIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  EmbedTemplateInstance
+} from "@webstudio-is/react-sdk";
+import { button } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/button.props";
+import * as tc from "./theme/tailwind-classes";
+const presetStyle = {
+  button
+};
+const template = (props2) => [
+  {
+    type: "instance",
+    component: "Button",
+    styles: [
+      // 'inline-flex items-center justify-center rounded-md text-sm font-medium
+      // ring-offset-background transition-colors
+      // focus-visible:outline-none focus-visible:ring-2
+      // focus-visible:ring-ring focus-visible:ring-offset-2
+      // disabled:pointer-events-none disabled:opacity-50'
+      tc.border(0),
+      tc.bg("transparent"),
+      tc.inlineFlex(),
+      tc.items("center"),
+      tc.justify("center"),
+      tc.rounded("md"),
+      tc.text("sm"),
+      tc.font("medium"),
+      tc.focusVisible(
+        [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+      ),
+      tc.state([tc.pointerEvents("none"), tc.opacity(50)].flat(), ":disabled"),
+      // VARIANT
+      // default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      tc.state(
+        [tc.bg("primary"), tc.text("primaryForeground")].flat(),
+        "[data-variant=default]"
+      ),
+      tc.state(
+        [[tc.bg("primary", 90)].flat()].flat(),
+        "[data-variant=default]:hover"
+      ),
+      // destructive:'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      tc.state(
+        [tc.bg("destructive"), tc.text("destructiveForeground")].flat(),
+        "[data-variant=destructive]"
+      ),
+      tc.state(
+        [[tc.bg("destructive", 90)].flat()].flat(),
+        "[data-variant=destructive]:hover"
+      ),
+      // outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      tc.state(
+        [tc.border(), tc.border("input"), tc.bg("background")].flat(),
+        "[data-variant=outline]"
+      ),
+      tc.state(
+        [[tc.bg("accent", 90), tc.text("accentForeground")].flat()].flat(),
+        "[data-variant=outline]:hover"
+      ),
+      // secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      tc.state(
+        [tc.bg("secondary"), tc.text("secondaryForeground")].flat(),
+        "[data-variant=secondary]"
+      ),
+      tc.state(
+        [[tc.bg("secondary", 80)].flat()].flat(),
+        "[data-variant=secondary]:hover"
+      ),
+      // ghost: 'hover:bg-accent hover:text-accent-foreground',
+      tc.state(
+        [[tc.bg("accent"), tc.text("accentForeground")].flat()].flat(),
+        "[data-variant=ghost]:hover"
+      ),
+      // link: 'text-primary underline-offset-4 hover:underline',
+      tc.state(
+        [tc.text("primary"), tc.underlineOffset(4)].flat(),
+        "[data-variant=link]"
+      ),
+      tc.state([[tc.underline()].flat()].flat(), "[data-variant=link]:hover"),
+      // SIZE
+      // default: 'h-10 px-4 py-2',
+      tc.state([tc.h(10), tc.px(4), tc.py(2)].flat(), "[data-size=default]"),
+      // sm: 'h-9 rounded-md px-3',
+      tc.state([tc.h(10), tc.px(3)].flat(), "[data-size=sm]"),
+      // lg: 'h-11 rounded-md px-8',
+      tc.state([tc.h(11), tc.px(8)].flat(), "[data-size=lg]"),
+      // icon: 'h-10 w-10',
+      tc.state([tc.h(10), tc.w(10)].flat(), "[data-size=icon]")
+    ].flat(),
+    children: props2?.children ?? [{ type: "text", value: "Button" }],
+    props: props2?.props
+  }
+];
+const meta = {
+  category: "radix",
+  type: "container",
+  invalidAncestors: ["Button"],
+  icon: ButtonElementIcon,
+  presetStyle,
+  states: [
+    ...defaultStates,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: "[data-variant=default]", label: "Default" },
+    { selector: "[data-variant=default]:hover", label: "Default Hover" },
+    { selector: "[data-variant=destructive]", label: "Destructive" },
+    {
+      selector: "[data-variant=destructive]:hover",
+      label: "Destructive Hover"
+    },
+    { selector: "[data-variant=outline]", label: "Outline" },
+    { selector: "[data-variant=outline]:hover", label: "Outline Hover" },
+    { selector: "[data-variant=secondary]", label: "Secondary" },
+    { selector: "[data-variant=secondary]:hover", label: "Secondary Hover" },
+    { selector: "[data-variant=ghost]", label: "Ghost" },
+    { selector: "[data-variant=ghost]:hover", label: "Ghost Hover" },
+    { selector: "[data-variant=link]", label: "Link" },
+    { selector: "[data-variant=link]:hover", label: "Link Hover" }
+  ],
+  order: 1,
+  template: template()
+};
+const propsMeta = {
+  props,
+  initialProps: ["id", "type", "variant", "size", "aria-label"]
+};
+export {
+  meta,
+  propsMeta,
+  template
+};