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

package/lib/theme/tailwind-classes.js

@@ -1,5 +1,9 @@
 import { theme } from "./tailwind-theme";
-import { parseCssValue, parseBoxShadow } from "@webstudio-is/css-data";
+import {
+  parseCssValue,
+  parseBoxShadow,
+  StyleValue
+} from "@webstudio-is/css-data";
 const preflight = () => {
   const borderColorValue = parseCssValue("color", theme("colors")["border"]);
   return [
@@ -75,38 +79,93 @@ const rounded = (radius) => {
     }
   ];
 };
-const border = (borderWidth) => {
-  const key = `${borderWidth ?? "DEFAULT"}`;
-  const valueString = theme("borderWidth")?.[key] ?? "1px";
-  const value = parseCssValue("borderTopWidth", valueString);
+const border = (borderWidthOrColor) => {
+  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
+    const key = `${borderWidthOrColor ?? "DEFAULT"}`;
+    const valueString = theme("borderWidth")?.[key] ?? "1px";
+    const value2 = parseCssValue("borderTopWidth", valueString);
+    return [
+      ...preflight(),
+      { property: "borderTopWidth", value: value2 },
+      { property: "borderRightWidth", value: value2 },
+      { property: "borderBottomWidth", value: value2 },
+      { property: "borderLeftWidth", value: value2 }
+    ];
+  }
+  const value = parseCssValue("color", theme("colors")[borderWidthOrColor]);
   return [
-    ...preflight(),
-    { property: "borderTopWidth", value },
-    { property: "borderRightWidth", value },
-    { property: "borderBottomWidth", value },
-    { property: "borderLeftWidth", value }
+    {
+      property: "borderTopColor",
+      value
+    },
+    {
+      property: "borderRightColor",
+      value
+    },
+    {
+      property: "borderBottomColor",
+      value
+    },
+    {
+      property: "borderLeftColor",
+      value
+    }
   ];
 };
-const px = (padding) => {
-  const key = `${padding}`;
-  const valueString = theme("padding")?.[key] ?? "0";
-  const value = parseCssValue("paddingLeft", valueString);
+const borderB = (borderWidthOrColor) => {
+  let widthValue = { type: "unit", value: 1, unit: "number" };
+  let colorValue = parseCssValue(
+    "color",
+    theme("colors")["border"]
+  );
+  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
+    const key = `${borderWidthOrColor ?? "DEFAULT"}`;
+    const valueString = theme("borderWidth")[key] ?? "1px";
+    widthValue = parseCssValue("borderTopWidth", valueString);
+  } else {
+    colorValue = parseCssValue("color", theme("colors")[borderWidthOrColor]);
+  }
   return [
-    { property: "paddingLeft", value },
-    { property: "paddingRight", value }
+    {
+      property: "borderBottomWidth",
+      value: widthValue
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderBottomColor",
+      value: colorValue
+    }
   ];
 };
-const py = (padding) => {
+const paddingProperty = (property) => (padding) => {
   const key = `${padding}`;
-  const valueString = theme("padding")[key];
-  const value = parseCssValue("paddingTop", valueString);
-  return [
-    { property: "paddingTop", value },
-    { property: "paddingBottom", value }
-  ];
+  const valueString = theme("padding")?.[key] ?? "0";
+  const value = parseCssValue(property, valueString);
+  return [{ property, value }];
+};
+const pt = (padding) => {
+  return paddingProperty("paddingTop")(padding);
+};
+const pb = (padding) => {
+  return paddingProperty("paddingBottom")(padding);
+};
+const pl = (padding) => {
+  return paddingProperty("paddingLeft")(padding);
+};
+const pr = (padding) => {
+  return paddingProperty("paddingRight")(padding);
+};
+const px = (padding) => {
+  return [pl(padding), pr(padding)].flat();
+};
+const py = (padding) => {
+  return [pt(padding), pb(padding)].flat();
 };
 const p = (padding) => {
-  return [...px(padding), ...py(padding)];
+  return [px(padding), py(padding)].flat();
 };
 const marginProperty = (property) => (margin) => {
   const key = `${margin}`;
@@ -147,6 +206,12 @@ const h = (spacing) => {
   const value = parseCssValue("height", valueString);
   return [{ property: "height", value }];
 };
+const minH = (spacing) => {
+  const key = `${spacing}`;
+  const valueString = theme("height")?.[key] ?? "0";
+  const value = parseCssValue("minHeight", valueString);
+  return [{ property: "minHeight", value }];
+};
 const opacity = (opacity2) => {
   const key = `${opacity2}`;
   const valueString = theme("opacity")?.[key] ?? "0";
@@ -158,6 +223,16 @@ const opacity = (opacity2) => {
     }
   ];
 };
+const cursor = (cursor2) => {
+  const valueString = theme("cursor")?.[cursor2] ?? "auto";
+  const value = parseCssValue("cursor", valueString);
+  return [
+    {
+      property: "cursor",
+      value
+    }
+  ];
+};
 const maxW = (spacing) => {
   const key = `${spacing}`;
   const valueString = theme("maxWidth")?.[key] ?? "0";
@@ -264,6 +339,70 @@ const flex = (flexParam) => {
   if (flexParam === void 0) {
     return [{ property: "display", value: { type: "keyword", value: "flex" } }];
   }
+  if (flexParam === 1) {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "unit", value: 0, unit: "%" }
+      }
+    ];
+  }
+  if (flexParam === "auto") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" }
+      }
+    ];
+  }
+  if (flexParam === "initial") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 0, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 1, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" }
+      }
+    ];
+  }
+  if (flexParam === "none") {
+    return [
+      {
+        property: "flexGrow",
+        value: { type: "unit", value: 0, unit: "number" }
+      },
+      {
+        property: "flexShrink",
+        value: { type: "unit", value: 0, unit: "number" }
+      },
+      {
+        property: "flexBasis",
+        value: { type: "keyword", value: "auto" }
+      }
+    ];
+  }
   return [
     {
       property: "flexDirection",
@@ -362,6 +501,25 @@ const text = (sizeOrColor) => {
     }
   ];
 };
+const underline = () => {
+  return [
+    {
+      property: "textDecorationLine",
+      value: { type: "keyword", value: "underline" }
+    }
+  ];
+};
+const underlineOffset = (offset) => {
+  const key = `${offset}`;
+  const valueString = theme("textUnderlineOffset")[key];
+  const value = parseCssValue("textUnderlineOffset", valueString);
+  return [
+    {
+      property: "textUnderlineOffset",
+      value
+    }
+  ];
+};
 const weights = {
   thin: "100",
   extralight: "200",
@@ -478,7 +636,9 @@ export {
   backdropBlur,
   bg,
   border,
+  borderB,
   bottom,
+  cursor,
   disabled,
   fixed,
   flex,
@@ -499,6 +659,7 @@ export {
   m,
   maxW,
   mb,
+  minH,
   ml,
   mr,
   mt,
@@ -508,7 +669,11 @@ export {
   outline,
   overflow,
   p,
+  pb,
+  pl,
   pointerEvents,
+  pr,
+  pt,
   px,
   py,
   relative,
@@ -521,6 +686,8 @@ export {
   top,
   tracking,
   transition,
+  underline,
+  underlineOffset,
   w,
   whitespace,
   z

package/lib/theme/tailwind-colors.js

@@ -8,7 +8,16 @@ const colors = {
   foreground: "hsl(222.2 84% 4.9%)",
   ring: "rgb(148, 163, 184)",
   mutedForeground: "rgb(100, 116, 139)",
-  muted: `hsl(210 40% 96.1%)`
+  muted: `hsl(210 40% 96.1%)`,
+  primary: "rgb(15, 23, 42)",
+  primaryForeground: "hsl(210 40% 98%)",
+  destructive: "rgb(239, 68, 68)",
+  destructiveForeground: "rgb(248, 250, 252)",
+  accent: "rgb(241, 245, 249)",
+  accentForeground: "rgb(15, 23, 42)",
+  input: "rgb(226, 232, 240)",
+  secondary: "rgb(241, 245, 249)",
+  secondaryForeground: "rgb(15, 23, 42)"
 };
 export {
   colors

package/lib/tooltip.js

@@ -1,12 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { getClosestInstance } from "@webstudio-is/react-sdk";
 import {
   forwardRef,
   Children
 } from "react";
-const Tooltip = forwardRef(({ open: openProp, isOpen, ...props }, ref) => {
-  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { open, ...props }) });
+const Tooltip = forwardRef((props, _ref) => {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { ...props }) });
 });
 const TooltipTrigger = forwardRef(({ children, ...props }, ref) => {
   const firstChild = Children.toArray(children)[0];
@@ -21,8 +21,40 @@ const TooltipContent = forwardRef(({ sideOffset = 4, hideWhenDetached = true, ..
     ...props
   }
 ) }));
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksTooltip = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:TooltipContent`) {
+        const tooltip = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Tooltip`
+        );
+        if (tooltip) {
+          context.setPropVariable(tooltip.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:TooltipContent`) {
+        const tooltip = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Tooltip`
+        );
+        if (tooltip) {
+          context.setPropVariable(tooltip.id, "open", true);
+        }
+      }
+    }
+  }
+};
 export {
   Tooltip,
   TooltipContent,
-  TooltipTrigger
+  TooltipTrigger,
+  hooksTooltip
 };

package/lib/tooltip.ws.js

@@ -8,32 +8,27 @@ import {
   propsTooltipTrigger
 } from "./__generated__/tooltip.props";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { template as buttonTemplate } from "./button.ws";
 const presetStyle = {
   div
 };
 const metaTooltipTrigger = {
   category: "hidden",
   detachable: false,
-  invalidAncestors: [],
   type: "container",
-  label: "Tooltip Trigger",
   icon: TriggerIcon,
   stylable: false
 };
 const metaTooltipContent = {
   category: "hidden",
   detachable: false,
-  invalidAncestors: [],
   type: "container",
   presetStyle,
-  label: "Tooltip Content",
   icon: ContentIcon
 };
 const metaTooltip = {
   category: "radix",
-  invalidAncestors: [],
   type: "container",
-  label: "Tooltip",
   icon: TooltipIcon,
   order: 15,
   stylable: false,
@@ -42,14 +37,20 @@ const metaTooltip = {
       type: "instance",
       component: "Tooltip",
       dataSources: {
-        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
-        isOpen: { type: "variable", initialValue: "initial" }
+        tooltipOpen: { type: "variable", initialValue: false }
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen"
+          name: "open",
+          dataSourceName: "tooltipOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `tooltipOpen = open` }
+          ]
         }
       ],
       children: [
@@ -57,13 +58,9 @@ const metaTooltip = {
           type: "instance",
           component: "TooltipTrigger",
           props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
+          children: buttonTemplate({
+            children: [{ type: "text", value: "Button" }]
+          })
         },
         {
           type: "instance",
@@ -98,7 +95,7 @@ const metaTooltip = {
 };
 const propsMetaTooltip = {
   props: propsTooltip,
-  initialProps: ["isOpen", "delayDuration", "disableHoverableContent"]
+  initialProps: ["open", "delayDuration", "disableHoverableContent"]
 };
 const propsMetaTooltipTrigger = {
   props: propsTooltipTrigger

package/lib/types/__generated__/accordion.props.d.ts

@@ -0,0 +1,6 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const propsAccordion: Record<string, PropMeta>;
+export declare const propsAccordionItem: Record<string, PropMeta>;
+export declare const propsAccordionHeader: Record<string, PropMeta>;
+export declare const propsAccordionTrigger: Record<string, PropMeta>;
+export declare const propsAccordionContent: Record<string, PropMeta>;

package/lib/types/__generated__/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/__generated__/input.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/__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/__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/accordion.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentPropsWithoutRef, type ForwardRefExoticComponent, type ComponentPropsWithRef } from "react";
+import { Header, Trigger, Content } from "@radix-ui/react-accordion";
+import { type Hook } from "@webstudio-is/react-sdk";
+export declare const Accordion: ForwardRefExoticComponent<Omit<ComponentPropsWithoutRef<ForwardRefExoticComponent<(import("@radix-ui/react-accordion").AccordionSingleProps | import("@radix-ui/react-accordion").AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>>, "value" | "type" | "defaultValue" | "asChild" | "onValueChange"> & {
+    value: string;
+    onValueChange: (value: string) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-accordion").AccordionItemProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "asChild"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionHeader: ForwardRefExoticComponent<Omit<ComponentPropsWithRef<typeof Header>, "asChild">>;
+export declare const AccordionTrigger: ForwardRefExoticComponent<Omit<ComponentPropsWithRef<typeof Trigger>, "asChild">>;
+export declare const AccordionContent: ForwardRefExoticComponent<Omit<ComponentPropsWithRef<typeof Content>, "asChild">>;
+export declare const hooksAccordion: Hook;

package/lib/types/accordion.ws.d.ts

@@ -0,0 +1,11 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const metaAccordion: WsComponentMeta;
+export declare const metaAccordionItem: WsComponentMeta;
+export declare const metaAccordionHeader: WsComponentMeta;
+export declare const metaAccordionTrigger: WsComponentMeta;
+export declare const metaAccordionContent: WsComponentMeta;
+export declare const propsMetaAccordion: WsComponentPropsMeta;
+export declare const propsMetaAccordionItem: WsComponentPropsMeta;
+export declare const propsMetaAccordionHeader: WsComponentPropsMeta;
+export declare const propsMetaAccordionTrigger: WsComponentPropsMeta;
+export declare const propsMetaAccordionContent: WsComponentPropsMeta;

package/lib/types/button.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type ButtonVariants = {
+    variant: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+    size: "default" | "sm" | "lg" | "icon";
+};
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & ButtonVariants & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/types/button.stories.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { Button as ButtonPrimitive } from "./button";
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        variant: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost";
+        size: "default" | "icon" | "sm" | "lg";
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    argTypes: {
+        variant: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Button: StoryObj<typeof ButtonPrimitive>;

package/lib/types/button.ws.d.ts

@@ -0,0 +1,7 @@
+import { EmbedTemplateInstance, type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const template: (props?: {
+    props?: EmbedTemplateInstance["props"];
+    children?: WsComponentMeta["template"];
+} | undefined) => NonNullable<WsComponentMeta["template"]>;
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components.d.ts

@@ -4,3 +4,8 @@ export { Popover, PopoverTrigger, PopoverContent } from "./popover";
 export { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
 export { Sheet, SheetTrigger, SheetOverlay, SheetContent, SheetClose, SheetTitle, SheetDescription, } from "./sheet";
 export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export { Button } from "./button";
+export { Input } from "./input";
+export { Textarea } from "./textarea";
+export { Label } from "./label";
+export { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, } from "./accordion";

package/lib/types/dialog.d.ts

@@ -1,13 +1,7 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { type ReactNode } from "react";
-/**
- * We don't have support for boolean or undefined nor in UI not at Data variables,
- * instead of binding on "open" prop we bind variable on a isOpen prop to be able to show Dialog in the builder
- **/
-type BuilderDialogProps = {
-    isOpen: "initial" | "open" | "closed";
-};
-export declare const Dialog: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogProps & BuilderDialogProps & import("react").RefAttributes<HTMLDivElement>>;
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type Hook } from "@webstudio-is/react-sdk";
+export declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogProps, "defaultOpen"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * We're not exposing the 'asChild' property for the Trigger.
  * Instead, we're enforcing 'asChild=true' for the Trigger and making it style-less.
@@ -16,10 +10,10 @@ export declare const Dialog: import("react").ForwardRefExoticComponent<DialogPri
  */
 export declare const DialogTrigger: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DialogOverlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
 export declare const DialogDescription: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
-export {};
+export declare const hooksDialog: Hook;

package/lib/types/input.d.ts

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

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { Input as InputPrimitive } from "./input";
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    argTypes: {
+        placeholder: {
+            type: "string";
+        };
+        type: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Input: StoryObj<typeof InputPrimitive>;

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

@@ -0,0 +1,3 @@
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/label.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as LabelPrimitive from "@radix-ui/react-label";
+export declare const Label: import("react").ForwardRefExoticComponent<Omit<Omit<LabelPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref">, "asChild"> & import("react").RefAttributes<HTMLLabelElement>>;

package/lib/types/label.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { Label as LabelPrimitive } from "./label";
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-label").LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref">, "asChild"> & import("react").RefAttributes<HTMLLabelElement>>;
+};
+export default _default;
+export declare const Label: StoryObj<typeof LabelPrimitive>;

package/lib/types/label.ws.d.ts

@@ -0,0 +1,3 @@
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/metas.d.ts

@@ -4,3 +4,8 @@ export { metaPopover as Popover, metaPopoverTrigger as PopoverTrigger, metaPopov
 export { metaTooltip as Tooltip, metaTooltipTrigger as TooltipTrigger, metaTooltipContent as TooltipContent, } from "./tooltip.ws";
 export { metaSheet as Sheet, metaSheetTrigger as SheetTrigger, metaSheetOverlay as SheetOverlay, metaSheetContent as SheetContent, metaSheetClose as SheetClose, metaSheetTitle as SheetTitle, metaSheetDescription as SheetDescription, } from "./sheet.ws";
 export { metaTabs as Tabs, metaTabsList as TabsList, metaTabsTrigger as TabsTrigger, metaTabsContent as TabsContent, } from "./tabs.ws";
+export { meta as Button } from "./button.ws";
+export { meta as Input } from "./input.ws";
+export { meta as Textarea } from "./textarea.ws";
+export { meta as Label } from "./label.ws";
+export { metaAccordion as Accordion, metaAccordionItem as AccordionItem, metaAccordionHeader as AccordionHeader, metaAccordionTrigger as AccordionTrigger, metaAccordionContent as AccordionContent, } from "./accordion.ws";