@regardio/react 0.7.23 → 0.8.0

package/dist/fieldset/index.mjs

@@ -3,34 +3,31 @@ import { jsx } from "react/jsx-runtime";
 import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
 //#region src/fieldset/fieldset.tsx
 const fieldsetRoot = tv({
-	base: [
-		"border",
-		"border-gray-200",
-		"rounded-lg",
-		"p-4"
-	],
+	base: [],
 	defaultVariants: { variant: "default" },
 	variants: { variant: {
-		compact: ["space-y-2"],
-		default: ["space-y-4"]
+		compact: [
+			"border",
+			"border-current",
+			"rounded-lg",
+			"p-4",
+			"space-y-2"
+		],
+		default: [
+			"border",
+			"border-current",
+			"rounded-lg",
+			"p-4",
+			"space-y-4"
+		]
 	} }
 });
 const fieldsetLegend = tv({
-	base: [
-		"text-lg",
-		"font-semibold",
-		"text-gray-900",
-		"mb-2"
-	],
+	base: [],
 	defaultVariants: { size: "default" },
 	variants: { size: {
-		default: [],
-		small: [
-			"text-base",
-			"font-medium",
-			"text-gray-900",
-			"mb-1"
-		]
+		default: ["text-foreground", "mb-2"],
+		small: ["text-foreground", "mb-1"]
 	} }
 });
 const FieldsetRoot = ({ className, variant, ...props }) => {

package/dist/icon-button/index.d.mts

@@ -1,4 +1,4 @@
-import { t as Button } from "../index-DH3W0i5O.mjs";
+import { t as Button } from "../index-DEHa010W.mjs";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/icon-button/icon-button.d.ts

package/dist/icon-button/index.mjs

@@ -1,4 +1,4 @@
-import { t as Button } from "../button-wigUM1BB.mjs";
+import { t as Button } from "../button-BllZdqCA.mjs";
 import { tv } from "@regardio/tailwind/utils";
 import { jsx } from "react/jsx-runtime";
 //#region src/icon-button/icon-button.tsx

package/dist/index-BTB1biC_.d.mts

@@ -0,0 +1,19 @@
+import { ComponentProps } from "react";
+import { Input } from "@base-ui/react/input";
+
+//#region src/input/input.d.ts
+type InputVariant = "default" | "error";
+type InputSize = "sm" | "md" | "lg";
+interface InputProps extends Omit<ComponentProps<typeof Input>, "className" | "size"> {
+  className?: string;
+  size?: InputSize;
+  variant?: InputVariant;
+}
+declare const Input$1: ({
+  className,
+  variant,
+  size,
+  ...props
+}: InputProps) => React.JSX.Element;
+//#endregion
+export { InputVariant as i, InputProps as n, InputSize as r, Input$1 as t };

package/dist/index-DEHa010W.d.mts

@@ -0,0 +1,35 @@
+import { ComponentProps } from "react";
+import { tv } from "@regardio/tailwind/utils";
+import { Button } from "@base-ui/react/button";
+
+//#region src/button/button.d.ts
+declare const buttonVariants: {
+  readonly destructive: readonly ["inline-flex", "items-center", "justify-center", "transition-colors", "bg-destructive", "text-destructive-foreground", "border-destructive", "hover:bg-destructive-hover", "hover:border-destructive-hover"];
+  readonly ghost: readonly ["inline-flex", "items-center", "justify-center", "transition-colors", "bg-transparent", "text-foreground", "border-transparent", "hover:bg-muted"];
+  readonly outline: readonly ["inline-flex", "items-center", "justify-center", "transition-colors", "bg-transparent", "text-foreground", "border-current", "hover:bg-muted"];
+  readonly primary: readonly ["inline-flex", "items-center", "justify-center", "transition-colors", "bg-primary", "text-primary-foreground", "border-primary", "hover:bg-primary-hover", "hover:border-primary-hover"];
+  readonly secondary: readonly ["inline-flex", "items-center", "justify-center", "transition-colors", "bg-secondary", "text-secondary-foreground", "border-secondary", "hover:bg-secondary-hover", "hover:border-secondary-hover"];
+};
+declare const buttonSizes: {
+  readonly "2xl": readonly ["px-8", "py-4", "text-xl"];
+  readonly lg: readonly ["px-6", "py-3", "text-lg"];
+  readonly md: readonly ["px-4", "py-2", "text-base"];
+  readonly sm: readonly ["px-3", "py-1.5", "text-sm"];
+  readonly xl: readonly ["px-7", "py-3.5", "text-lg"];
+};
+type ButtonVariant = keyof typeof buttonVariants;
+type ButtonSize = keyof typeof buttonSizes;
+interface ButtonProps extends Omit<ComponentProps<typeof Button>, "className"> {
+  className?: string;
+  size?: ButtonSize;
+  variant?: ButtonVariant;
+}
+declare const Button$1: ({
+  children,
+  className,
+  size,
+  variant,
+  ...props
+}: ButtonProps) => React.JSX.Element;
+//#endregion
+export { buttonVariants as i, ButtonProps as n, ButtonVariant as r, Button$1 as t };

package/dist/input/index.d.mts

@@ -1,2 +1,2 @@
-import { i as InputVariant, n as InputProps, r as InputSize, t as Input } from "../index-B_G_f749.mjs";
+import { i as InputVariant, n as InputProps, r as InputSize, t as Input } from "../index-BTB1biC_.mjs";
 export { Input, InputProps, InputSize, InputVariant };

package/dist/input/index.mjs

@@ -1,2 +1,2 @@
-import { t as Input } from "../input-C2SM4-AB.mjs";
+import { t as Input } from "../input-BHRHF8xW.mjs";
 export { Input };

package/dist/input-BHRHF8xW.mjs

@@ -0,0 +1,62 @@
+import { tv } from "@regardio/tailwind/utils";
+import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
+//#region src/input/input.tsx
+const input = tv({
+	base: [],
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			lg: ["px-4", "py-3"],
+			md: ["px-3", "py-2"],
+			sm: ["px-2", "py-1"]
+		},
+		variant: {
+			default: [
+				"w-full",
+				"border",
+				"border-current",
+				"rounded-md",
+				"bg-background-muted",
+				"text-foreground",
+				"placeholder:text-muted-foreground",
+				"focus:outline-none",
+				"focus:ring-2",
+				"focus:ring-ring",
+				"focus:border-ring",
+				"transition-colors",
+				"duration-200"
+			],
+			error: [
+				"w-full",
+				"border",
+				"rounded-md",
+				"bg-background-muted",
+				"focus:outline-none",
+				"focus:ring-2",
+				"transition-colors",
+				"duration-200",
+				"border-destructive",
+				"text-destructive",
+				"placeholder:text-destructive",
+				"focus:ring-destructive",
+				"focus:border-destructive"
+			]
+		}
+	}
+});
+const Input$1 = ({ className, variant, size, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		className: input({
+			className,
+			size,
+			variant
+		}),
+		...props
+	});
+};
+//#endregion
+export { Input$1 as t };

package/dist/password-input/index.d.mts

@@ -1,4 +1,4 @@
-import { t as Input } from "../index-B_G_f749.mjs";
+import { t as Input } from "../index-BTB1biC_.mjs";
 
 //#region src/password-input/password-input.d.ts
 declare const passwordInputVariants: {
@@ -8,7 +8,7 @@ declare const passwordInputVariants: {
 type PasswordInputVariant = keyof typeof passwordInputVariants;
 interface PasswordInputProps extends Omit<React.ComponentProps<typeof Input>, "type" | "variant"> {
   className?: string;
-  inputVariant?: "default" | "error" | "success";
+  inputVariant?: "default" | "error";
   showToggle?: boolean;
   variant?: PasswordInputVariant;
 }

package/dist/password-input/index.mjs

@@ -1,5 +1,5 @@
-import { t as Button } from "../button-wigUM1BB.mjs";
-import { t as Input } from "../input-C2SM4-AB.mjs";
+import { t as Button } from "../button-BllZdqCA.mjs";
+import { t as Input } from "../input-BHRHF8xW.mjs";
 import { useState } from "react";
 import { tv } from "@regardio/tailwind/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -23,11 +23,11 @@ const toggleButton = tv({ base: [
 	"cursor-pointer",
 	"items-center",
 	"justify-center",
-	"text-gray-500",
-	"hover:text-gray-700",
+	"text-muted-foreground",
+	"hover:text-foreground",
 	"focus:outline-none",
 	"focus:ring-2",
-	"focus:ring-blue-500",
+	"focus:ring-ring",
 	"focus:ring-offset-2",
 	"rounded",
 	"transition-colors",
@@ -53,7 +53,6 @@ const PasswordInput = ({ className, variant = "default", inputVariant = "default
 			"aria-label": showPassword ? "Hide password" : "Show password",
 			className: toggleButton(),
 			onClick: togglePasswordVisibility,
-			size: "sm",
 			variant: "ghost",
 			children: showPassword ? /* @__PURE__ */ jsx("svg", {
 				className: "h-4 w-4",

package/dist/radio/index.mjs

@@ -4,22 +4,19 @@ import { Radio as Radio$1 } from "@base-ui/react/radio";
 //#region src/radio/radio.tsx
 const radioRoot = tv({
 	base: [
-		"h-4",
-		"w-4",
+		"flex",
+		"items-center",
+		"justify-center",
 		"rounded-full",
-		"border",
-		"border-gray-300",
-		"bg-white",
-		"focus:outline-none",
-		"focus:ring-2",
-		"focus:ring-blue-500",
-		"focus:ring-offset-2",
+		"focus-visible:outline-2",
+		"focus-visible:outline-offset-2",
+		"focus-visible:outline-ring",
 		"disabled:cursor-not-allowed",
-		"disabled:opacity-50",
-		"data-[checked]:bg-blue-600",
-		"data-[checked]:border-blue-600",
+		"data-[checked]:bg-primary",
+		"data-[unchecked]:border",
+		"data-[unchecked]:border-current",
+		"data-[unchecked]:bg-background-muted",
 		"transition-colors",
-		"duration-200",
 		"cursor-pointer"
 	],
 	defaultVariants: { size: "md" },
@@ -31,10 +28,8 @@ const radioRoot = tv({
 });
 const radioIndicator = tv({ base: [
 	"flex",
-	"items-center",
-	"justify-center",
-	"text-white",
-	"data-[unchecked]:invisible"
+	"text-primary-foreground",
+	"data-[unchecked]:hidden"
 ] });
 const RadioRoot = ({ className, size = "md", ...props }) => {
 	return /* @__PURE__ */ jsx(Radio$1.Root, {

package/dist/slider/index.mjs

@@ -28,7 +28,7 @@ const sliderTrack = tv({
 		"relative",
 		"w-full",
 		"rounded-full",
-		"bg-gray-200",
+		"bg-muted",
 		"overflow-hidden"
 	],
 	defaultVariants: { size: "md" },
@@ -41,23 +41,21 @@ const sliderTrack = tv({
 const sliderIndicator = tv({ base: [
 	"absolute",
 	"h-full",
-	"bg-blue-600",
+	"bg-primary",
 	"rounded-full"
 ] });
 const sliderThumb = tv({
 	base: [
 		"block",
 		"rounded-full",
-		"bg-white",
+		"bg-background-muted",
 		"border-2",
-		"border-blue-600",
-		"shadow-lg",
+		"border-primary",
 		"focus:outline-none",
 		"focus:ring-2",
-		"focus:ring-blue-500",
+		"focus:ring-ring",
 		"focus:ring-offset-2",
 		"disabled:cursor-not-allowed",
-		"disabled:opacity-50",
 		"cursor-grab",
 		"active:cursor-grabbing"
 	],
@@ -68,12 +66,7 @@ const sliderThumb = tv({
 		sm: ["h-3", "w-3"]
 	} }
 });
-const sliderValue = tv({ base: [
-	"text-sm",
-	"font-medium",
-	"text-gray-700",
-	"mb-2"
-] });
+const sliderValue = tv({ base: ["text-foreground", "mb-2"] });
 const SliderRoot = ({ className, size = "md", ...props }) => {
 	return /* @__PURE__ */ jsx(Slider$1.Root, {
 		className: sliderRoot({

package/dist/switch/index.mjs

@@ -9,16 +9,13 @@ const switchRoot = tv({
 		"items-center",
 		"rounded-full",
 		"transition-colors",
-		"duration-200",
-		"focus:outline-none",
-		"focus:ring-2",
-		"focus:ring-blue-500",
-		"focus:ring-offset-2",
+		"focus-visible:outline-2",
+		"focus-visible:outline-offset-2",
+		"focus-visible:outline-ring",
 		"disabled:cursor-not-allowed",
-		"disabled:opacity-50",
 		"cursor-pointer",
-		"bg-gray-300",
-		"data-[checked]:bg-blue-600"
+		"bg-muted",
+		"data-[checked]:bg-primary"
 	],
 	defaultVariants: { size: "md" },
 	variants: { size: {
@@ -32,13 +29,11 @@ const switchThumb = tv({
 		"pointer-events-none",
 		"inline-block",
 		"rounded-full",
-		"bg-white",
-		"shadow-lg",
+		"bg-background-muted",
 		"ring-0",
 		"transition-transform",
 		"duration-200",
-		"translate-x-0",
-		"data-[checked]:translate-x-full"
+		"translate-x-0"
 	],
 	defaultVariants: { size: "md" },
 	variants: { size: {

package/dist/text/index.d.mts

@@ -5,9 +5,12 @@ declare const themeColorVariants: {
   readonly primary: readonly [];
 };
 declare const textVariants: {
-  readonly code: readonly ["font-light", "font-monospace"];
-  readonly primary: readonly [];
-  readonly subtitle: readonly ["text-lg"];
+  readonly code: readonly ["font-mono", "text-sm"];
+  readonly muted: readonly ["text-muted-foreground"];
+  readonly primary: readonly ["text-foreground"];
+  readonly secondary: readonly ["text-muted-foreground"];
+  readonly subtitle: readonly ["text-muted-foreground"];
+  readonly supertitle: readonly ["text-foreground", "font-semibold"];
 };
 type TextThemeColor = keyof typeof themeColorVariants;
 type TextVariant = keyof typeof textVariants;

package/dist/text/index.mjs

@@ -10,9 +10,12 @@ const text = tv({
 	variants: {
 		themeColor: { primary: [] },
 		variant: {
-			code: ["font-light", "font-monospace"],
-			primary: [],
-			subtitle: ["text-lg"]
+			code: ["font-mono", "text-sm"],
+			muted: ["text-muted-foreground"],
+			primary: ["text-foreground"],
+			secondary: ["text-muted-foreground"],
+			subtitle: ["text-muted-foreground"],
+			supertitle: ["text-foreground", "font-semibold"]
 		}
 	}
 });

package/dist/toggle/index.mjs

@@ -3,22 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 //#region src/toggle/toggle.tsx
 const toggle = tv({
-	base: [
-		"inline-flex",
-		"items-center",
-		"justify-center",
-		"rounded-md",
-		"text-sm",
-		"font-medium",
-		"transition-colors",
-		"duration-200",
-		"focus:outline-none",
-		"focus:ring-2",
-		"focus:ring-blue-500",
-		"focus:ring-offset-2",
-		"disabled:pointer-events-none",
-		"disabled:opacity-50"
-	],
+	base: [],
 	defaultVariants: {
 		size: "md",
 		variant: "outline"
@@ -42,24 +27,54 @@ const toggle = tv({
 			]
 		},
 		variant: {
-			default: [],
+			default: [
+				"inline-flex",
+				"items-center",
+				"justify-center",
+				"rounded-md",
+				"transition-colors",
+				"duration-200",
+				"focus:outline-none",
+				"focus:ring-2",
+				"focus:ring-ring",
+				"focus:ring-offset-2",
+				"disabled:pointer-events-none"
+			],
 			ghost: [
+				"inline-flex",
+				"items-center",
+				"justify-center",
+				"rounded-md",
+				"transition-colors",
+				"duration-200",
+				"focus:outline-none",
+				"focus:ring-2",
+				"focus:ring-ring",
+				"focus:ring-offset-2",
+				"disabled:pointer-events-none",
 				"bg-transparent",
-				"text-gray-700",
-				"hover:bg-gray-100",
-				"hover:text-gray-900",
-				"data-[pressed]:bg-gray-200",
-				"data-[pressed]:text-gray-900"
+				"text-foreground",
+				"hover:bg-muted",
+				"data-[pressed]:bg-muted"
 			],
 			outline: [
+				"inline-flex",
+				"items-center",
+				"justify-center",
+				"rounded-md",
+				"transition-colors",
+				"duration-200",
+				"focus:outline-none",
+				"focus:ring-2",
+				"focus:ring-ring",
+				"focus:ring-offset-2",
+				"disabled:pointer-events-none",
 				"border",
-				"border-gray-300",
-				"bg-white",
-				"text-gray-700",
-				"hover:bg-gray-50",
-				"hover:text-gray-900",
-				"data-[pressed]:bg-gray-100",
-				"data-[pressed]:text-gray-900"
+				"border-current",
+				"bg-background-muted",
+				"text-foreground",
+				"hover:bg-muted",
+				"data-[pressed]:bg-muted"
 			]
 		}
 	}

package/package.json

@@ -1,10 +1,16 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/react",
-  "version": "0.7.23",
+  "version": "0.8.0",
   "private": false,
   "description": "Regardio React UI components",
-  "keywords": ["react", "components", "ui", "regardio", "tailwindcss"],
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "regardio",
+    "tailwindcss"
+  ],
   "homepage": "https://github.com/regardio/react/blob/main/README.md",
   "bugs": {
     "url": "https://github.com/regardio/react/issues"
@@ -15,7 +21,9 @@
   },
   "license": "MIT",
   "author": "Bernd Matzner <bernd.matzner@regard.io>",
-  "sideEffects": ["./src/tailwind.css"],
+  "sideEffects": [
+    "./src/tailwind.css"
+  ],
   "type": "module",
   "exports": {
     "./background-slideshow": {
@@ -180,7 +188,10 @@
       "types": "./dist/utils/text/index.d.mts"
     }
   },
-  "files": ["dist", "src"],
+  "files": [
+    "dist",
+    "src"
+  ],
   "scripts": {
     "build": "tsdown",
     "clean": "exec-clean .turbo dist",
@@ -206,12 +217,12 @@
     "typecheck": "exec-tsc --noEmit"
   },
   "dependencies": {
-    "@base-ui/react": "1.2.0",
+    "@base-ui/react": "1.3.0",
     "@maptiler/sdk": "3.11.1",
     "@mdx-js/react": "3.1.1",
-    "@regardio/js": "0.8.2",
-    "@regardio/tailwind": "0.3.10",
-    "@supabase/supabase-js": "2.99.0",
+    "@regardio/js": "^0.9.2",
+    "@regardio/tailwind": "^0.3.12",
+    "@supabase/supabase-js": "2.99.2",
     "cmdk": "1.1.1",
     "embla-carousel": "8.6.0",
     "embla-carousel-react": "8.6.0",
@@ -224,40 +235,41 @@
     "react-day-picker": "9.14.0",
     "react-dom": "19.2.4",
     "react-hook-form": "7.71.2",
-    "react-resizable-panels": "4.7.2",
+    "react-resizable-panels": "4.7.3",
     "react-router": "7.13.1",
     "tailwind-variants": "3.2.2",
     "vaul": "1.1.2",
     "zod": "4.3.6"
   },
   "devDependencies": {
-    "@regardio/dev": "1.16.2",
-    "@storybook/addon-a11y": "10.2.17",
-    "@storybook/addon-docs": "10.2.17",
-    "@storybook/addon-vitest": "10.2.17",
-    "@storybook/react-vite": "10.2.17",
-    "@tailwindcss/vite": "4.2.1",
+    "@regardio/dev": "^1.18.0",
+    "@storybook/addon-a11y": "10.3.0",
+    "@storybook/addon-docs": "10.3.0",
+    "@storybook/addon-vitest": "10.3.0",
+    "@storybook/react": "^10.3.0",
+    "@storybook/react-vite": "10.3.0",
+    "@tailwindcss/vite": "4.2.2",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/leaflet": "1.9.21",
-    "@types/node": "25.4.0",
+    "@types/node": "25.5.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.1.4",
-    "@vitest/browser-playwright": "4.0.18",
-    "@vitest/coverage-v8": "4.0.18",
-    "@vitest/ui": "4.0.18",
-    "jsdom": "28.1.0",
+    "@vitejs/plugin-react": "6.0.1",
+    "@vitest/browser-playwright": "4.1.0",
+    "@vitest/coverage-v8": "4.1.0",
+    "@vitest/ui": "4.1.0",
+    "jsdom": "29.0.0",
     "playwright": "1.58.2",
-    "storybook": "10.2.17",
-    "tailwindcss": "4.2.1",
-    "tsdown": "0.21.1",
+    "storybook": "10.3.0",
+    "tailwindcss": "4.2.2",
+    "tsdown": "0.21.4",
     "typescript": "5.9.3",
-    "vite": "7.3.1",
-    "vitest": "4.0.18"
+    "vite": "8.0.0",
+    "vitest": "4.1.0"
   },
   "engines": {
     "node": ">=18"
   }
-}
+}

package/src/button/button.test.tsx

@@ -8,22 +8,27 @@ describe('Button', () => {
     expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
   });
 
-  it('applies default variant and size classes', () => {
+  it('applies default variant classes', () => {
     render(<Button>Default button</Button>);
     const button = screen.getByRole('button', { name: 'Default button' });
-    expect(button).toHaveClass('bg-blue-600', 'text-white', 'px-4', 'py-2');
+    expect(button).toHaveClass('bg-primary', 'text-primary-foreground');
   });
 
   it('applies variant classes correctly', () => {
     render(<Button variant="secondary">Secondary button</Button>);
     const button = screen.getByRole('button', { name: 'Secondary button' });
-    expect(button).toHaveClass('bg-gray-100', 'text-gray-900');
+    expect(button).toHaveClass('bg-secondary', 'text-secondary-foreground');
   });
 
-  it('applies size classes correctly', () => {
-    render(<Button size="lg">Large button</Button>);
-    const button = screen.getByRole('button', { name: 'Large button' });
-    expect(button).toHaveClass('px-6', 'py-3', 'text-lg');
+  it('applies base structural classes', () => {
+    render(<Button>Button</Button>);
+    const button = screen.getByRole('button', { name: 'Button' });
+    expect(button).toHaveClass(
+      'inline-flex',
+      'items-center',
+      'justify-center',
+      'transition-colors',
+    );
   });
 
   it('applies custom className', () => {
@@ -36,7 +41,6 @@ describe('Button', () => {
     render(<Button disabled>Disabled button</Button>);
     const button = screen.getByRole('button', { name: 'Disabled button' });
     expect(button).toBeDisabled();
-    expect(button).toHaveClass('disabled:opacity-50', 'disabled:cursor-not-allowed');
   });
 
   it('passes through other props', () => {