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

package/lib/types/popover.d.ts

@@ -1,13 +1,7 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 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 Popover in the builder
- **/
-type BuilderPopoverProps = {
-    isOpen: "initial" | "open" | "closed";
-};
-export declare const Popover: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverProps & BuilderPopoverProps & import("react").RefAttributes<HTMLDivElement>>;
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type Hook } from "@webstudio-is/react-sdk";
+export declare const Popover: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverProps, "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.
@@ -18,4 +12,4 @@ export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const PopoverContent: import("react").ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};
+export declare const hooksPopover: Hook;

package/lib/types/props.d.ts

@@ -4,3 +4,8 @@ export { propsMetaPopover as Popover, propsMetaPopoverTrigger as PopoverTrigger,
 export { propsMetaTooltip as Tooltip, propsMetaTooltipTrigger as TooltipTrigger, propsMetaTooltipContent as TooltipContent, } from "./tooltip.ws";
 export { propsMetaSheet as Sheet, propsMetaSheetTrigger as SheetTrigger, propsMetaSheetOverlay as SheetOverlay, propsMetaSheetContent as SheetContent, propsMetaSheetClose as SheetClose, propsMetaSheetTitle as SheetTitle, propsMetaSheetDescription as SheetDescription, } from "./sheet.ws";
 export { propsMetaTabs as Tabs, propsMetaTabsList as TabsList, propsMetaTabsTrigger as TabsTrigger, propsMetaTabsContent as TabsContent, } from "./tabs.ws";
+export { propsMeta as Button } from "./button.ws";
+export { propsMeta as Input } from "./input.ws";
+export { propsMeta as Textarea } from "./textarea.ws";
+export { propsMeta as Label } from "./label.ws";
+export { propsMetaAccordion as Accordion, propsMetaAccordionItem as AccordionItem, propsMetaAccordionHeader as AccordionHeader, propsMetaAccordionTrigger as AccordionTrigger, propsMetaAccordionContent as AccordionContent, } from "./accordion.ws";

package/lib/types/sheet.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
-export declare const Sheet: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogProps & {
-    isOpen: "initial" | "open" | "closed";
-} & import("react").RefAttributes<HTMLDivElement>>;
+import { type Hook } from "@webstudio-is/react-sdk";
+export declare const Sheet: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogProps, "defaultOpen"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SheetTrigger: import("react").ForwardRefExoticComponent<{
     children: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SheetOverlay: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare const SheetClose: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const SheetTitle: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
@@ -13,3 +12,4 @@ export declare const SheetContent: import("react").ForwardRefExoticComponent<Omi
     tag?: "div" | "nav" | undefined;
     side?: "top" | "right" | "bottom" | "left" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
+export declare const hooksSheet: Hook;

package/lib/types/tabs.d.ts

@@ -1,5 +1,6 @@
 import { type ForwardRefExoticComponent, type ComponentPropsWithRef, type ReactNode } from "react";
 import { Root } from "@radix-ui/react-tabs";
+import { type Hook } from "@webstudio-is/react-sdk";
 export declare const Tabs: ForwardRefExoticComponent<Omit<ComponentPropsWithRef<typeof Root>, "asChild" | "defaultValue">>;
 export declare const TabsList: ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
 /**
@@ -13,3 +14,4 @@ export declare const TabsTrigger: ForwardRefExoticComponent<{
     children: ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const TabsContent: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "asChild"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const hooksTabs: Hook;

package/lib/types/textarea.d.ts

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

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+import { Textarea as TextareaPrimitive } from "./textarea";
+declare const _default: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    argTypes: {
+        placeholder: {
+            type: "string";
+        };
+    };
+};
+export default _default;
+export declare const Textarea: StoryObj<typeof TextareaPrimitive>;

package/lib/types/textarea.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/theme/tailwind-classes.d.ts

@@ -8,10 +8,16 @@ export declare const overflow: (value: "hidden" | "visible" | "scroll" | "auto")
 export declare const rounded: (radius?: keyof EvaluatedDefaultTheme["borderRadius"]) => EmbedTemplateStyleDecl[];
 type StringEnumToNumeric<T extends string> = T extends `${infer Z extends number}` ? Z : never;
 type NonNumeric<T extends string> = T extends `${infer Z extends number}` ? never : T;
-export declare const border: (borderWidth?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["borderWidth"]>) => EmbedTemplateStyleDecl[];
-export declare const px: (padding: StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]> | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>) => EmbedTemplateStyleDecl[];
-export declare const py: (padding: StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]> | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>) => EmbedTemplateStyleDecl[];
-export declare const p: (padding: StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]> | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>) => EmbedTemplateStyleDecl[];
+export declare const border: (borderWidthOrColor?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["borderWidth"]> | keyof EvaluatedDefaultTheme["colors"]) => EmbedTemplateStyleDecl[];
+export declare const borderB: (borderWidthOrColor?: StringEnumToNumeric<keyof EvaluatedDefaultTheme["borderWidth"]> | keyof EvaluatedDefaultTheme["colors"]) => EmbedTemplateStyleDecl[];
+declare const paddingProperty: (property: "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft") => (padding: StringEnumToNumeric<keyof EvaluatedDefaultTheme["padding"]> | NonNumeric<keyof EvaluatedDefaultTheme["padding"]>) => EmbedTemplateStyleDecl[];
+export declare const pt: ReturnType<typeof paddingProperty>;
+export declare const pb: ReturnType<typeof paddingProperty>;
+export declare const pl: ReturnType<typeof paddingProperty>;
+export declare const pr: ReturnType<typeof paddingProperty>;
+export declare const px: ReturnType<typeof paddingProperty>;
+export declare const py: ReturnType<typeof paddingProperty>;
+export declare const p: ReturnType<typeof paddingProperty>;
 declare const marginProperty: (property: "marginTop" | "marginRight" | "marginBottom" | "marginLeft") => (margin: StringEnumToNumeric<keyof EvaluatedDefaultTheme["margin"]> | NonNumeric<keyof EvaluatedDefaultTheme["margin"]>) => EmbedTemplateStyleDecl[];
 export declare const ml: ReturnType<typeof marginProperty>;
 export declare const mr: ReturnType<typeof marginProperty>;
@@ -22,7 +28,9 @@ export declare const my: ReturnType<typeof marginProperty>;
 export declare const m: ReturnType<typeof marginProperty>;
 export declare const w: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["width"]> | NonNumeric<keyof EvaluatedDefaultTheme["width"]>) => EmbedTemplateStyleDecl[];
 export declare const h: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["height"]> | NonNumeric<keyof EvaluatedDefaultTheme["height"]>) => EmbedTemplateStyleDecl[];
+export declare const minH: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["height"]>) => EmbedTemplateStyleDecl[];
 export declare const opacity: (opacity: StringEnumToNumeric<keyof EvaluatedDefaultTheme["opacity"]>) => EmbedTemplateStyleDecl[];
+export declare const cursor: (cursor: keyof EvaluatedDefaultTheme["cursor"]) => EmbedTemplateStyleDecl[];
 export declare const maxW: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["maxWidth"]> | NonNumeric<keyof EvaluatedDefaultTheme["maxWidth"]>) => EmbedTemplateStyleDecl[];
 export declare const top: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
 export declare const right: (spacing: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
@@ -61,7 +69,8 @@ declare const flexDirection: {
     readonly col: "column";
 };
 type FlexDirection = keyof typeof flexDirection;
-export declare const flex: (flexParam?: FlexDirection) => EmbedTemplateStyleDecl[];
+type FlexSizing = 1 | "auto" | "initial" | "none";
+export declare const flex: (flexParam?: FlexDirection | FlexSizing) => EmbedTemplateStyleDecl[];
 export declare const grow: () => EmbedTemplateStyleDecl[];
 export declare const gap: (gapValue: StringEnumToNumeric<keyof EvaluatedDefaultTheme["spacing"]>) => EmbedTemplateStyleDecl[];
 export declare const leading: (lineHeight: StringEnumToNumeric<keyof EvaluatedDefaultTheme["lineHeight"]> | NonNumeric<keyof EvaluatedDefaultTheme["lineHeight"]>) => EmbedTemplateStyleDecl[];
@@ -69,6 +78,8 @@ export declare const tracking: (letterSpacing: StringEnumToNumeric<keyof Evaluat
 export declare const outline: (value: "none") => EmbedTemplateStyleDecl[];
 type TextSize = keyof EvaluatedDefaultTheme["fontSize"];
 export declare const text: (sizeOrColor: TextSize | keyof EvaluatedDefaultTheme["colors"]) => EmbedTemplateStyleDecl[];
+export declare const underline: () => EmbedTemplateStyleDecl[];
+export declare const underlineOffset: (offset: StringEnumToNumeric<keyof EvaluatedDefaultTheme["textUnderlineOffset"]>) => EmbedTemplateStyleDecl[];
 export declare const font: (weight: "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black") => EmbedTemplateStyleDecl[];
 export declare const whitespace: (value: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap" | "break-spaces") => EmbedTemplateStyleDecl[];
 export declare const shadow: (shadowSize: keyof EvaluatedDefaultTheme["boxShadow"]) => EmbedTemplateStyleDecl[];

package/lib/types/theme/tailwind-colors.d.ts

@@ -18,4 +18,13 @@ export declare const colors: {
     readonly ring: "rgb(148, 163, 184)";
     readonly mutedForeground: "rgb(100, 116, 139)";
     readonly muted: "hsl(210 40% 96.1%)";
+    readonly primary: "rgb(15, 23, 42)";
+    readonly primaryForeground: "hsl(210 40% 98%)";
+    readonly destructive: "rgb(239, 68, 68)";
+    readonly destructiveForeground: "rgb(248, 250, 252)";
+    readonly accent: "rgb(241, 245, 249)";
+    readonly accentForeground: "rgb(15, 23, 42)";
+    readonly input: "rgb(226, 232, 240)";
+    readonly secondary: "rgb(241, 245, 249)";
+    readonly secondaryForeground: "rgb(15, 23, 42)";
 };

package/lib/types/tooltip.d.ts

@@ -1,13 +1,7 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { type Hook } from "@webstudio-is/react-sdk";
 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 Tooltip in the builder
- **/
-type BuilderTooltipProps = {
-    isOpen: "initial" | "open" | "closed";
-};
-export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipProps & BuilderTooltipProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipProps, "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.
@@ -18,4 +12,4 @@ export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
 } & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const TooltipContent: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export {};
+export declare const hooksTooltip: Hook;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.85.0",
+  "version": "0.87.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -43,26 +43,28 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "tailwindcss": "^3.3.3",
-    "@webstudio-is/generate-arg-types": "^0.85.0",
-    "@webstudio-is/icons": "^0.85.0",
-    "@webstudio-is/css-data": "^0.85.0",
-    "@webstudio-is/react-sdk": "^0.85.0"
+    "@webstudio-is/css-data": "^0.87.0",
+    "@webstudio-is/generate-arg-types": "^0.87.0",
+    "@webstudio-is/icons": "^0.87.0",
+    "@webstudio-is/react-sdk": "^0.87.0"
   },
   "devDependencies": {
     "@storybook/react": "^7.2.1",
-    "@types/react": "^18.2.16",
+    "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.1.6",
     "@webstudio-is/scripts": "^0.0.0",
-    "@webstudio-is/sdk-components-react": "^0.85.0",
+    "@webstudio-is/sdk-components-react": "^0.87.0",
     "@webstudio-is/storybook-config": "^0.0.0",
     "@webstudio-is/tsconfig": "^1.0.7"
   },