@webstudio-is/sdk-components-react-radix 0.87.1 → 0.89.0

package/src/button.ws.ts

@@ -1,155 +0,0 @@
-import { ButtonElementIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  EmbedTemplateInstance,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} 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,
-} satisfies PresetStyle<"button">;
-
-export const template = (props?: {
-  props?: EmbedTemplateInstance["props"];
-  children?: WsComponentMeta["template"];
-}): NonNullable<WsComponentMeta["template"]> => [
-  {
-    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: props?.children ?? [{ type: "text", value: "Button" }],
-    props: props?.props,
-  },
-];
-
-export const meta: WsComponentMeta = {
-  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(),
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id", "type", "variant", "size", "aria-label"],
-};

package/src/input.tsx

@@ -1,12 +0,0 @@
-/* eslint-disable react/display-name */
-// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
-
-import { forwardRef, type ComponentPropsWithoutRef } from "react";
-
-export const Input = forwardRef<
-  HTMLInputElement,
-  ComponentPropsWithoutRef<"input">
-  // Make sure children are not passed down to an input, because this will result in error.
->(({ children: _children, ...props }, ref) => {
-  return <input ref={ref} {...props} />;
-});

package/src/input.ws.ts

@@ -1,78 +0,0 @@
-import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { input } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/input.props";
-import * as tc from "./theme/tailwind-classes";
-
-const presetStyle = {
-  input,
-} satisfies PresetStyle<"input">;
-
-export const meta: WsComponentMeta = {
-  category: "radix",
-  type: "control",
-  invalidAncestors: ["Button"],
-  icon: FormTextFieldIcon,
-  presetStyle,
-  states: [
-    ...defaultStates,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: "::placeholder", label: "Placeholder" },
-    { selector: "::file-selector-button", label: "File Selector Button" },
-    // @todo share https://github.com/webstudio-is/webstudio-builder/issues/2102
-    { selector: ":valid", label: "Valid" },
-    { selector: ":invalid", label: "Invalid" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" },
-    { selector: ":enabled", label: "Enabled" },
-    { selector: ":read-only", label: "Read Only" },
-    { selector: ":read-write", label: "Read Write" },
-  ],
-  order: 1,
-  template: [
-    {
-      type: "instance",
-      component: "Input",
-      styles: [
-        // flex h-10 w-full rounded-md border border-input bg-background
-        // px-3 py-2 text-sm
-        // ring-offset-background
-        // file:border-0 file:bg-transparent file:text-sm file:font-medium
-        // placeholder:text-muted-foreground
-        // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-        // disabled:cursor-not-allowed disabled:opacity-50"
-        tc.flex(),
-        tc.h(10),
-        tc.w("full"),
-        tc.rounded("md"),
-        tc.border(),
-        tc.border("input"),
-        tc.bg("background"),
-        tc.px(3),
-        tc.py(2),
-        tc.text("sm"),
-        tc.state(
-          [tc.border(0), tc.bg("transparent"), tc.font("medium")].flat(),
-          "::file-selector-button"
-        ),
-        tc.state(tc.text("mutedForeground"), "::placeholder"),
-        tc.focusVisible(
-          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-        ),
-        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
-      ].flat(),
-
-      children: [],
-    },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id", "name", "type", "placeholder", "required", "autoFocus"],
-};

package/src/textarea.tsx

@@ -1,12 +0,0 @@
-/* eslint-disable react/display-name */
-// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
-
-import { forwardRef, type ComponentPropsWithoutRef } from "react";
-
-export const Textarea = forwardRef<
-  HTMLTextAreaElement,
-  ComponentPropsWithoutRef<"textarea">
-  // Make sure children are not passed down to an input, because this will result in error.
->(({ children: _children, ...props }, ref) => {
-  return <textarea ref={ref} {...props} />;
-});

package/src/textarea.ws.ts

@@ -1,74 +0,0 @@
-import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { textarea } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/textarea.props";
-import * as tc from "./theme/tailwind-classes";
-
-const presetStyle = {
-  textarea,
-} satisfies PresetStyle<"textarea">;
-
-export const meta: WsComponentMeta = {
-  category: "radix",
-  type: "control",
-  invalidAncestors: ["Button"],
-  icon: FormTextAreaIcon,
-  presetStyle,
-  states: [
-    ...defaultStates,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: "::placeholder", label: "Placeholder" },
-    // @todo share https://github.com/webstudio-is/webstudio-builder/issues/2102
-    { selector: ":valid", label: "Valid" },
-    { selector: ":invalid", label: "Invalid" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" },
-    { selector: ":enabled", label: "Enabled" },
-    { selector: ":read-only", label: "Read Only" },
-    { selector: ":read-write", label: "Read Write" },
-  ],
-  order: 1,
-  template: [
-    {
-      type: "instance",
-      component: "Textarea",
-      styles: [
-        // flex min-h-[80px] w-full rounded-md
-        // border border-input bg-background
-        // px-3 py-2 text-sm ring-offset-background
-        // placeholder:text-muted-foreground
-        // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
-        // focus-visible:ring-offset-2
-        // disabled:cursor-not-allowed disabled:opacity-50
-
-        tc.flex(),
-        tc.minH(20),
-        tc.w("full"),
-        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"), "::placeholder"),
-        tc.focusVisible(
-          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-        ),
-        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
-      ].flat(),
-
-      children: [],
-    },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id", "name", "placeholder", "required", "autoFocus"],
-};