@webstudio-is/sdk-components-react-radix 0.0.0-017f1bd

package/lib/types/shared/theme.d.ts

@@ -0,0 +1,212 @@
+export declare const fontSize: {
+    readonly sm: "0.875rem";
+    readonly lg: "1.125rem";
+};
+export declare const fontSizeLineHeight: {
+    readonly sm: "1.25rem";
+    readonly lg: "1.75rem";
+};
+export declare const lineHeight: {
+    readonly none: "1";
+    readonly snug: "1.375";
+};
+export declare const weights: {
+    readonly medium: "500";
+};
+export declare const letterSpacing: {
+    readonly tight: "-0.025em";
+};
+export declare const spacing: {
+    readonly "0": "0px";
+    readonly "1": "0.25rem";
+    readonly "2": "0.5rem";
+    readonly "3": "0.75rem";
+    readonly "4": "1rem";
+    readonly "5": "1.25rem";
+    readonly "6": "1.5rem";
+    readonly "7": "1.75rem";
+    readonly "8": "2rem";
+    readonly "9": "2.25rem";
+    readonly "10": "2.5rem";
+    readonly "11": "2.75rem";
+    readonly "12": "3rem";
+    readonly "14": "3.5rem";
+    readonly "16": "4rem";
+    readonly "20": "5rem";
+    readonly "24": "6rem";
+    readonly "28": "7rem";
+    readonly "32": "8rem";
+    readonly "36": "9rem";
+    readonly "40": "10rem";
+    readonly "44": "11rem";
+    readonly "48": "12rem";
+    readonly "52": "13rem";
+    readonly "56": "14rem";
+    readonly "60": "15rem";
+    readonly "64": "16rem";
+    readonly "72": "18rem";
+    readonly "80": "20rem";
+    readonly "96": "24rem";
+    readonly px: "1px";
+    readonly "0.5": "0.125rem";
+    readonly "1.5": "0.375rem";
+    readonly "2.5": "0.625rem";
+    readonly "3.5": "0.875rem";
+};
+export declare const width: {
+    readonly full: "100%";
+    readonly "0": "0px";
+    readonly "1": "0.25rem";
+    readonly "2": "0.5rem";
+    readonly "3": "0.75rem";
+    readonly "4": "1rem";
+    readonly "5": "1.25rem";
+    readonly "6": "1.5rem";
+    readonly "7": "1.75rem";
+    readonly "8": "2rem";
+    readonly "9": "2.25rem";
+    readonly "10": "2.5rem";
+    readonly "11": "2.75rem";
+    readonly "12": "3rem";
+    readonly "14": "3.5rem";
+    readonly "16": "4rem";
+    readonly "20": "5rem";
+    readonly "24": "6rem";
+    readonly "28": "7rem";
+    readonly "32": "8rem";
+    readonly "36": "9rem";
+    readonly "40": "10rem";
+    readonly "44": "11rem";
+    readonly "48": "12rem";
+    readonly "52": "13rem";
+    readonly "56": "14rem";
+    readonly "60": "15rem";
+    readonly "64": "16rem";
+    readonly "72": "18rem";
+    readonly "80": "20rem";
+    readonly "96": "24rem";
+    readonly px: "1px";
+    readonly "0.5": "0.125rem";
+    readonly "1.5": "0.375rem";
+    readonly "2.5": "0.625rem";
+    readonly "3.5": "0.875rem";
+};
+export declare const height: {
+    readonly full: "100%";
+    readonly "0": "0px";
+    readonly "1": "0.25rem";
+    readonly "2": "0.5rem";
+    readonly "3": "0.75rem";
+    readonly "4": "1rem";
+    readonly "5": "1.25rem";
+    readonly "6": "1.5rem";
+    readonly "7": "1.75rem";
+    readonly "8": "2rem";
+    readonly "9": "2.25rem";
+    readonly "10": "2.5rem";
+    readonly "11": "2.75rem";
+    readonly "12": "3rem";
+    readonly "14": "3.5rem";
+    readonly "16": "4rem";
+    readonly "20": "5rem";
+    readonly "24": "6rem";
+    readonly "28": "7rem";
+    readonly "32": "8rem";
+    readonly "36": "9rem";
+    readonly "40": "10rem";
+    readonly "44": "11rem";
+    readonly "48": "12rem";
+    readonly "52": "13rem";
+    readonly "56": "14rem";
+    readonly "60": "15rem";
+    readonly "64": "16rem";
+    readonly "72": "18rem";
+    readonly "80": "20rem";
+    readonly "96": "24rem";
+    readonly px: "1px";
+    readonly "0.5": "0.125rem";
+    readonly "1.5": "0.375rem";
+    readonly "2.5": "0.625rem";
+    readonly "3.5": "0.875rem";
+};
+export declare const maxWidth: {
+    readonly "0": "0rem";
+    readonly xs: "20rem";
+    readonly sm: "24rem";
+    readonly md: "28rem";
+    readonly lg: "32rem";
+    readonly xl: "36rem";
+    readonly prose: "65ch";
+};
+export declare const borderWidth: {
+    "0": string;
+    "2": string;
+    "4": string;
+    "8": string;
+    DEFAULT: string;
+};
+export declare const borderRadius: {
+    readonly sm: "0.125rem";
+    readonly md: "0.375rem";
+    readonly full: "9999px";
+};
+export declare const colors: {
+    readonly transparent: "transparent";
+    readonly current: "currentColor";
+    readonly inherit: "inherit";
+    readonly popover: "rgb(255, 255, 255)";
+    readonly popoverForeground: "rgb(2, 8, 23)";
+    readonly border: "rgb(226, 232, 240)";
+    readonly background: "rgb(255, 255, 255)";
+    readonly foreground: "hsl(222.2 84% 4.9%)";
+    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)";
+};
+export declare const transition: {
+    readonly all: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly transform: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)";
+};
+export declare const opacity: {
+    readonly "0": "0";
+    readonly "5": "0.05";
+    readonly "10": "0.1";
+    readonly "20": "0.2";
+    readonly "25": "0.25";
+    readonly "30": "0.3";
+    readonly "40": "0.4";
+    readonly "50": "0.5";
+    readonly "60": "0.6";
+    readonly "70": "0.7";
+    readonly "75": "0.75";
+    readonly "80": "0.8";
+    readonly "90": "0.9";
+    readonly "95": "0.95";
+    readonly "100": "1";
+};
+export declare const boxShadow: {
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly ring: string;
+};
+export declare const zIndex: {
+    readonly "0": "0";
+    readonly "10": "10";
+    readonly "20": "20";
+    readonly "30": "30";
+    readonly "40": "40";
+    readonly "50": "50";
+};
+export declare const blur: {
+    sm: string;
+};

package/lib/types/sheet.template.d.ts

@@ -0,0 +1,10 @@
+import { type TemplateMeta } from "@webstudio-is/template";
+/**
+ * Styles source without animations:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/sheet.tsx
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+export declare const meta: TemplateMeta;

package/lib/types/switch.d.ts

@@ -0,0 +1,4 @@
+import { type ForwardRefExoticComponent, type ComponentProps, type RefAttributes } from "react";
+import { Thumb } from "@radix-ui/react-switch";
+export declare const Switch: ForwardRefExoticComponent<Omit<import("@radix-ui/react-switch").SwitchProps & RefAttributes<HTMLButtonElement>, "ref"> & RefAttributes<HTMLButtonElement>>;
+export declare const SwitchThumb: ForwardRefExoticComponent<ComponentProps<typeof Thumb> & RefAttributes<HTMLSpanElement>>;

package/lib/types/switch.template.d.ts

@@ -0,0 +1,2 @@
+import { type TemplateMeta } from "@webstudio-is/template";
+export declare const meta: TemplateMeta;

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

@@ -0,0 +1,3 @@
+import type { WsComponentMeta } from "@webstudio-is/sdk";
+export declare const metaSwitch: WsComponentMeta;
+export declare const metaSwitchThumb: WsComponentMeta;

package/lib/types/tabs.d.ts

@@ -0,0 +1,10 @@
+import { type Hook } from "@webstudio-is/react-sdk/runtime";
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsList: import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "value"> & {
+    value?: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "value"> & {
+    value?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const hooksTabs: Hook;

package/lib/types/tabs.template.d.ts

@@ -0,0 +1,2 @@
+import { type TemplateMeta } from "@webstudio-is/template";
+export declare const meta: TemplateMeta;

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

@@ -0,0 +1,5 @@
+import type { WsComponentMeta } from "@webstudio-is/sdk";
+export declare const metaTabs: WsComponentMeta;
+export declare const metaTabsList: WsComponentMeta;
+export declare const metaTabsTrigger: WsComponentMeta;
+export declare const metaTabsContent: WsComponentMeta;

package/lib/types/templates.d.ts

@@ -0,0 +1,13 @@
+export { meta as Label } from "./label.template";
+export { meta as Tabs } from "./tabs.template";
+export { meta as Sheet } from "./sheet.template";
+export { meta as Dialog } from "./dialog.template";
+export { meta as Switch } from "./switch.template";
+export { meta as Checkbox } from "./checkbox.template";
+export { meta as Collapsible } from "./collapsible.template";
+export { meta as Accordion } from "./accordion.template";
+export { meta as Tooltip } from "./tooltip.template";
+export { meta as Popover } from "./popover.template";
+export { meta as RadioGroup } from "./radio-group.template";
+export { meta as Select } from "./select.template";
+export { meta as NavigationMenu } from "./navigation-menu.template";

package/lib/types/tooltip.d.ts

@@ -0,0 +1,15 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { type Hook } from "@webstudio-is/react-sdk/runtime";
+import { type ReactNode } from "react";
+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.
+ * This avoids situations where the Trigger inadvertently passes all styles to its child,
+ * which would prevent us from displaying styles properly in the builder.
+ */
+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 declare const hooksTooltip: Hook;

package/lib/types/tooltip.template.d.ts

@@ -0,0 +1,10 @@
+import { type TemplateMeta } from "@webstudio-is/template";
+/**
+ * Styles source without animations:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/tooltip.tsx
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+export declare const meta: TemplateMeta;

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

@@ -0,0 +1,4 @@
+import type { WsComponentMeta } from "@webstudio-is/sdk";
+export declare const metaTooltipTrigger: WsComponentMeta;
+export declare const metaTooltipContent: WsComponentMeta;
+export declare const metaTooltip: WsComponentMeta;

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@webstudio-is/sdk-components-react-radix",
+  "version": "0.0.0-017f1bd",
+  "description": "Webstudio wrapper for radix library",
+  "author": "Webstudio <github@webstudio.is>",
+  "homepage": "https://webstudio.is",
+  "license": "AGPL-3.0-or-later",
+  "private": false,
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "lib/*",
+    "!*.{test,stories}.*"
+  ],
+  "exports": {
+    ".": {
+      "webstudio": "./src/components.ts",
+      "types": "./lib/types/components.d.ts",
+      "import": "./lib/components.js"
+    },
+    "./metas": {
+      "webstudio": "./src/metas.ts",
+      "types": "./lib/types/metas.d.ts",
+      "import": "./lib/metas.js"
+    },
+    "./hooks": {
+      "webstudio": "./src/hooks.ts",
+      "types": "./lib/types/hooks.d.ts",
+      "import": "./lib/hooks.js"
+    },
+    "./templates": {
+      "webstudio": "./src/templates.ts",
+      "types": "./lib/types/templates.d.ts",
+      "import": "./lib/templates.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-checkbox": "^1.2.3",
+    "@radix-ui/react-collapsible": "^1.1.8",
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.10",
+    "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.3.4",
+    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-tooltip": "^1.2.4",
+    "await-interaction-response": "^0.0.2",
+    "@webstudio-is/css-engine": "0.0.0-017f1bd",
+    "@webstudio-is/icons": "0.0.0-017f1bd",
+    "@webstudio-is/react-sdk": "0.0.0-017f1bd",
+    "@webstudio-is/sdk": "0.0.0-017f1bd"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.70",
+    "@types/react-dom": "^18.2.25",
+    "react": "18.3.0-canary-14898b6a9-20240318",
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/css-data": "0.0.0",
+    "@webstudio-is/sdk-cli": "^0.94.0",
+    "@webstudio-is/template": "0.0.0-017f1bd",
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/sdk-components-react": "0.0.0-017f1bd"
+  },
+  "scripts": {
+    "build": "vite build --config ../../vite.sdk-components.config.ts",
+    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.template.tsx !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
+    "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
+    "dts": "tsc --project tsconfig.dts.json",
+    "typecheck": "tsc"
+  }
+}