@webstudio-is/react-sdk 0.61.0 → 0.62.0

package/lib/components/form.ws.js

@@ -4,10 +4,7 @@ import { props } from "./__generated__/form.props";
 const presetStyle = {
   form: [
     ...form,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "px", value: 20 }
-    }
+    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
   ]
 };
 const meta = {
@@ -17,7 +14,28 @@ const meta = {
   Icon: FormIcon,
   presetStyle,
   children: [
-    { type: "instance", component: "Input", children: [] },
+    {
+      type: "instance",
+      component: "Label",
+      children: [{ type: "text", value: "Name" }]
+    },
+    {
+      type: "instance",
+      component: "Input",
+      props: [{ type: "string", name: "name", value: "name" }],
+      children: []
+    },
+    {
+      type: "instance",
+      component: "Label",
+      children: [{ type: "text", value: "Email" }]
+    },
+    {
+      type: "instance",
+      component: "Input",
+      props: [{ type: "string", name: "email", value: "email" }],
+      children: []
+    },
     {
       type: "instance",
       component: "Button",
@@ -26,7 +44,8 @@ const meta = {
   ]
 };
 const propsMeta = {
-  props
+  props,
+  initialProps: []
 };
 export {
   meta,

package/lib/components/index.js

@@ -23,6 +23,14 @@ import { meta as ListMeta } from "./list.ws";
 import { meta as ListItemMeta } from "./list-item.ws";
 import { meta as SeparatorMeta } from "./separator.ws";
 import { meta as CodeMeta } from "./code.ws";
+import { meta as LabelMeta } from "./label.ws";
+import { meta as SuccessMessageMeta } from "./success-message.ws";
+import { meta as ErrorMessageMeta } from "./error-message.ws";
+import { meta as TextareaMeta } from "./textarea.ws";
+import { meta as RadioButtonFieldMeta } from "./radio-button-field.ws";
+import { meta as RadioButtonMeta } from "./radio-button.ws";
+import { meta as CheckboxFieldMeta } from "./checkbox-field.ws";
+import { meta as CheckboxMeta } from "./checkbox.ws";
 import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
 import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
@@ -47,6 +55,14 @@ import { propsMeta as ListPropsMeta } from "./list.ws";
 import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
 import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
 import { propsMeta as CodePropsMeta } from "./code.ws";
+import { propsMeta as LabelPropsMeta } from "./label.ws";
+import { propsMeta as SuccessMessagePropsMeta } from "./success-message.ws";
+import { propsMeta as ErrorMessagePropsMeta } from "./error-message.ws";
+import { propsMeta as TextareaPropsMeta } from "./textarea.ws";
+import { propsMeta as RadioButtonFieldPropsMeta } from "./radio-button-field.ws";
+import { propsMeta as RadioButtonPropsMeta } from "./radio-button.ws";
+import { propsMeta as CheckboxFieldPropsMeta } from "./checkbox-field.ws";
+import { propsMeta as CheckboxPropsMeta } from "./checkbox.ws";
 const defaultMetas = {
   Slot: SlotMeta,
   Fragment: FragmentMeta,
@@ -71,7 +87,15 @@ const defaultMetas = {
   List: ListMeta,
   ListItem: ListItemMeta,
   Separator: SeparatorMeta,
-  Code: CodeMeta
+  Code: CodeMeta,
+  Label: LabelMeta,
+  SuccessMessage: SuccessMessageMeta,
+  ErrorMessage: ErrorMessageMeta,
+  Textarea: TextareaMeta,
+  RadioButtonField: RadioButtonFieldMeta,
+  RadioButton: RadioButtonMeta,
+  CheckboxField: CheckboxFieldMeta,
+  Checkbox: CheckboxMeta
 };
 let currentMetas = defaultMetas;
 const getComponentMeta = (name) => {
@@ -108,7 +132,15 @@ const defaultPropsMetasRaw = {
   List: ListPropsMeta,
   ListItem: ListItemPropsMeta,
   Separator: SeparatorPropsMeta,
-  Code: CodePropsMeta
+  Code: CodePropsMeta,
+  Label: LabelPropsMeta,
+  SuccessMessage: SuccessMessagePropsMeta,
+  ErrorMessage: ErrorMessagePropsMeta,
+  Textarea: TextareaPropsMeta,
+  RadioButtonField: RadioButtonFieldPropsMeta,
+  RadioButton: RadioButtonPropsMeta,
+  CheckboxField: CheckboxFieldPropsMeta,
+  Checkbox: CheckboxPropsMeta
 };
 const defaultPropsMetas = defaultPropsMetasRaw;
 let registeredPropsMetas = {};
@@ -163,7 +195,16 @@ const computeInitialProps = (props, defaults, overrides) => {
   ).map(([name]) => name) : [];
   return [...initialProps, ...requiredProps];
 };
+const canAcceptComponent = (parentComponent, childComponent) => {
+  const parentMeta = getComponentMeta(parentComponent);
+  const childMeta = getComponentMeta(childComponent);
+  if (parentMeta?.type !== "container" || childMeta === void 0) {
+    return false;
+  }
+  return childMeta.acceptedParents === void 0 || childMeta.acceptedParents.includes(parentComponent);
+};
 export {
+  canAcceptComponent,
   getComponentMeta,
   getComponentPropsMeta,
   registerComponentMetas,

package/lib/components/input.ws.js

@@ -7,12 +7,24 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "control",
-  label: "Input",
+  label: "Text Field",
   Icon: FormTextFieldIcon,
-  presetStyle
+  presetStyle,
+  states: [
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ]
 };
 const propsMeta = {
-  props
+  props,
+  initialProps: ["name", "type", "placeholder", "required", "autoFocus"]
 };
 export {
   meta,

package/lib/components/label.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "label";
+const Label = forwardRef((props, ref) => /* @__PURE__ */ jsx("label", { ...props, ref }));
+Label.displayName = "Label";
+export {
+  Label,
+  defaultTag
+};

package/lib/components/label.ws.js

@@ -0,0 +1,34 @@
+import { TextBlockIcon } from "@webstudio-is/icons";
+import { props } from "./__generated__/label.props";
+import { label } from "../css/normalize";
+const presetStyle = {
+  label: [
+    ...label,
+    { property: "display", value: { type: "keyword", value: "block" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "rich-text",
+  label: "Input Label",
+  Icon: TextBlockIcon,
+  presetStyle,
+  children: [{ type: "text", value: "Form Label" }]
+};
+const propsMeta = {
+  props: {
+    ...props,
+    htmlFor: {
+      required: false,
+      control: "text",
+      type: "string",
+      rows: 0,
+      label: "For"
+    }
+  },
+  initialProps: ["htmlFor"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/link-block.ws.js

@@ -1,4 +1,4 @@
-import { BoxLinkIcon } from "@webstudio-is/icons";
+import { LinkBlockIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/link-block.props";
 import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 import { a } from "../css/normalize";
@@ -15,7 +15,7 @@ const meta = {
   category: "general",
   type: "container",
   label: "Link Block",
-  Icon: BoxLinkIcon,
+  Icon: LinkBlockIcon,
   states: linkMeta.states,
   presetStyle
 };

package/lib/components/list-item.ws.js

@@ -7,6 +7,7 @@ const presetStyle = {
 const meta = {
   category: "typography",
   type: "rich-text",
+  acceptedParents: ["List"],
   label: "List Item",
   Icon: ListItemIcon,
   children: [{ type: "text", value: "List Item you can edit" }],

package/lib/components/radio-button-field.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "label";
+const RadioButtonField = forwardRef((props, ref) => /* @__PURE__ */ jsx("label", { ...props, ref }));
+RadioButtonField.displayName = "RadioButtonField";
+export {
+  RadioButtonField,
+  defaultTag
+};

package/lib/components/radio-button-field.ws.js

@@ -0,0 +1,33 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { props } from "./__generated__/radio-button-field.props";
+import { label } from "../css/normalize";
+const presetStyle = {
+  label: [
+    ...label,
+    { property: "display", value: { type: "keyword", value: "flex" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "container",
+  label: "Radio Button Field",
+  Icon: RadioCheckedIcon,
+  presetStyle,
+  children: [
+    { type: "instance", component: "RadioButton", props: [], children: [] },
+    {
+      type: "instance",
+      component: "TextBlock",
+      props: [],
+      children: [{ type: "text", value: "Radio" }]
+    }
+  ]
+};
+const propsMeta = {
+  props,
+  initialProps: []
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/radio-button.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "input";
+const RadioButton = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, type: "radio", ref }));
+RadioButton.displayName = "RadioButton";
+export {
+  RadioButton,
+  defaultTag
+};

package/lib/components/radio-button.ws.js

@@ -0,0 +1,35 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { input } from "../css/normalize";
+import { props } from "./__generated__/radio-button.props";
+const presetStyle = {
+  input: [
+    ...input,
+    {
+      property: "marginRight",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+};
+const meta = {
+  type: "control",
+  label: "Radio Button",
+  Icon: RadioCheckedIcon,
+  presetStyle,
+  states: [
+    { selector: ":checked", label: "Checked" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ]
+};
+const propsMeta = {
+  props,
+  initialProps: ["name"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/success-message.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "div";
+const SuccessMessage = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", { ...props, ref }));
+SuccessMessage.displayName = "SuccessMessage";
+export {
+  SuccessMessage,
+  defaultTag
+};

package/lib/components/success-message.ws.js

@@ -0,0 +1,20 @@
+import { BoxIcon } from "@webstudio-is/icons";
+import { props } from "./__generated__/success-message.props";
+import { div } from "../css/normalize";
+const presetStyle = {
+  div
+};
+const meta = {
+  type: "container",
+  label: "Success Message",
+  Icon: BoxIcon,
+  presetStyle
+};
+const propsMeta = {
+  props,
+  initialProps: []
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/textarea.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const defaultTag = "textarea";
+const Textarea = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("textarea", { ...props, ref }));
+Textarea.displayName = "Textarea";
+export {
+  Textarea,
+  defaultTag
+};

package/lib/components/textarea.ws.js

@@ -0,0 +1,36 @@
+import { FormTextAreaIcon } from "@webstudio-is/icons";
+import { textarea } from "../css/normalize";
+import { props } from "./__generated__/textarea.props";
+const presetStyle = {
+  textarea: [
+    ...textarea,
+    // resize doesn't work well while on canvas
+    { property: "resize", value: { type: "keyword", value: "none" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "control",
+  label: "Text Area",
+  Icon: FormTextAreaIcon,
+  presetStyle,
+  states: [
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" }
+  ]
+};
+const propsMeta = {
+  props,
+  initialProps: ["name", "placeholder", "required", "autoFocus"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/css/normalize.js

@@ -15,6 +15,7 @@ const main = baseStyle;
 const nav = baseStyle;
 const section = baseStyle;
 const form = baseStyle;
+const label = baseStyle;
 const h1 = baseStyle;
 const h2 = baseStyle;
 const h3 = baseStyle;
@@ -295,6 +296,7 @@ export {
   img,
   input,
   kbd,
+  label,
   legend,
   li,
   main,

package/lib/types/app/custom-components/__generated__/form.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/app/custom-components/__generated__/image.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/app/custom-components/__generated__/link-block.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/app/custom-components/__generated__/link.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/app/custom-components/__generated__/rich-text-link.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/app/custom-components/form.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const defaultTag = "form";
+export declare const Form: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLFormElement> & import("react").FormHTMLAttributes<HTMLFormElement> & {
+    initialState?: "error" | "initial" | "success" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLFormElement>>;

package/lib/types/app/custom-components/form.ws.d.ts

@@ -0,0 +1,3 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "../../components/component-meta";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/app/custom-components/index.d.ts

@@ -21,6 +21,11 @@ export declare const customComponents: {
         target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
         prefetch?: "none" | "intent" | "render" | undefined;
     }, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+    Form: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLFormElement> & import("react").FormHTMLAttributes<HTMLFormElement> & {
+        initialState?: "error" | "initial" | "success" | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
 };
 export declare const customComponentPropsMetas: Record<string, WsComponentPropsMeta>;
-export declare const customComponentMetas: {};
+export declare const customComponentMetas: {
+    Form: import("../../components/component-meta").WsComponentMeta;
+};

package/lib/types/components/__generated__/checkbox-field.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components/__generated__/checkbox.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components/__generated__/error-message.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components/__generated__/label.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components/__generated__/radio-button-field.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components/__generated__/radio-button.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components/__generated__/success-message.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components/__generated__/textarea.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/components/checkbox-field.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const defaultTag = "label";
+export declare const CheckboxField: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "htmlFor">, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/lib/types/components/checkbox-field.ws.d.ts

@@ -0,0 +1,3 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/checkbox.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const defaultTag = "input";
+export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type">, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/components/checkbox.ws.d.ts

@@ -0,0 +1,3 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/component-meta.d.ts

@@ -595,6 +595,7 @@ export type ComponentState = z.infer<typeof ComponentState>;
 declare const WsComponentMeta: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["general", "typography", "media", "forms"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text", "rich-text-child"]>;
+    acceptedParents: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     label: z.ZodString;
     Icon: z.ZodFunction<z.ZodTuple<[], z.ZodUnknown>, z.ZodUnknown>;
     presetStyle: z.ZodOptional<z.ZodAny>;
@@ -624,6 +625,7 @@ declare const WsComponentMeta: z.ZodObject<{
         value: string;
     } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     category?: "media" | "general" | "typography" | "forms" | undefined;
+    acceptedParents?: string[] | undefined;
     presetStyle?: any;
     states?: {
         label: string;
@@ -638,6 +640,7 @@ declare const WsComponentMeta: z.ZodObject<{
         value: string;
     } | import("../embed-template").EmbedTemplateInstance)[] | undefined;
     category?: "media" | "general" | "typography" | "forms" | undefined;
+    acceptedParents?: string[] | undefined;
     presetStyle?: any;
     states?: {
         label: string;

package/lib/types/components/components-utils.d.ts

@@ -1,34 +1,19 @@
-/// <reference types="react" />
+import type { forwardRef } from "react";
 import * as components from "./components";
 export type ComponentName = keyof typeof components;
 export declare const getComponentNames: () => ComponentName[];
+type AnyComponent = ReturnType<typeof forwardRef<any, any>>;
 /**
  * Now used only in builder app
  * @todo Consider using the same approach in the builder app as in the published apps . A dynamic import is needed
  */
-export declare const getComponent: (name: string) => undefined | (typeof components)[ComponentName];
+export declare const getComponent: (name: string) => undefined | AnyComponent;
 /**
  * The application imports only the components it uses, then pass them to createGetComponent i.e.
  * getComponent = createGetComponent({ Box, BlaBla })
  * <RootInstance data={data} getComponent={getComponent} />
  * see example /packages/sdk-size-test/app/routes/$.tsx
  **/
-export declare const createGetComponent: (comps: Partial<typeof components>) => (name: string) => import("react").ForwardRefExoticComponent<{
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>, "ref"> & import("react").RefAttributes<HTMLBodyElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    tag?: "address" | "article" | "aside" | "div" | "figure" | "footer" | "header" | "main" | "nav" | "section" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement> & {
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLHeadingElement>> | import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "target"> & {
-    href?: string | undefined;
-    target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
-    prefetch?: "none" | "intent" | "render" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
-    innerText?: string | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import("react").RefAttributes<HTMLFormElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> & import("react").RefAttributes<HTMLQuoteElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & import("react").ClassAttributes<HTMLOListElement> & import("react").OlHTMLAttributes<HTMLOListElement> & {
-    ordered?: boolean | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLUListElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>> | import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & import("react").RefAttributes<HTMLHRElement>> | import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "inline"> & {
-    inline?: boolean | undefined;
-    meta?: string | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLElement>> | undefined;
+export declare const createGetComponent: (comps: Partial<typeof components>) => (name: string) => undefined | AnyComponent;
 export type GetComponent = typeof getComponent;
+export {};

package/lib/types/components/components.d.ts

@@ -29,3 +29,11 @@ export { List } from "./list";
 export { ListItem } from "./list-item";
 export { Separator } from "./separator";
 export { Code } from "./code";
+export { Label } from "./label";
+export { SuccessMessage } from "./success-message";
+export { ErrorMessage } from "./error-message";
+export { Textarea } from "./textarea";
+export { RadioButtonField } from "./radio-button-field";
+export { RadioButton } from "./radio-button";
+export { CheckboxField } from "./checkbox-field";
+export { Checkbox } from "./checkbox";

package/lib/types/components/error-message.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const defaultTag = "div";
+export declare const ErrorMessage: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/types/components/error-message.ws.d.ts

@@ -0,0 +1,3 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/index.d.ts

@@ -14,4 +14,5 @@ export declare let registeredComponents: RegisteredComponents | undefined;
  * break otherwise, see getComponent etc. So its overwriteComponent now
  **/
 export declare const registerComponents: (components: RegisteredComponents) => void;
+export declare const canAcceptComponent: (parentComponent: string, childComponent: string) => boolean;
 export {};

package/lib/types/components/input.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
 export declare const defaultTag = "input";
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
+    type?: "number" | "text" | "email" | "url" | "tel" | "password" | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;