@regardio/react 0.7.24 → 0.8.1

package/src/input/input.tsx

@@ -2,96 +2,55 @@ import { Input as BaseUIInput } from '@base-ui/react/input';
 import { tv } from '@regardio/tailwind/utils';
 import type { ComponentProps } from 'react';
 
-const inputVariants = {
-  default: [
-    'w-full',
-    'px-3',
-    'py-2',
-    'border',
-    'border-gray-300',
-    'rounded-md',
-    'bg-white',
-    'text-gray-900',
-    'placeholder-gray-500',
-    'focus:outline-none',
-    'focus:ring-2',
-    'focus:ring-blue-500',
-    'focus:border-blue-500',
-    'transition-colors',
-    'duration-200',
-  ],
-  error: [
-    'border-red-300',
-    'text-red-900',
-    'placeholder-red-500',
-    'focus:ring-red-500',
-    'focus:border-red-500',
-  ],
-  success: [
-    'border-green-300',
-    'text-green-900',
-    'placeholder-green-500',
-    'focus:ring-green-500',
-    'focus:border-green-500',
-  ],
-} as const;
-
-const inputSizes = {
-  lg: ['px-4', 'py-3', 'text-lg'],
-  md: ['px-3', 'py-2', 'text-base'],
-  sm: ['px-2', 'py-1', 'text-sm'],
-} as const;
-
 const input = tv({
-  base: [
-    'w-full',
-    'px-3',
-    'py-2',
-    'border',
-    'border-gray-300',
-    'rounded-md',
-    'bg-white',
-    'text-gray-900',
-    'placeholder-gray-500',
-    'focus:outline-none',
-    'focus:ring-2',
-    'focus:ring-blue-500',
-    'focus:border-blue-500',
-    'transition-colors',
-    'duration-200',
-  ],
+  base: [],
   defaultVariants: {
     size: 'md',
     variant: 'default',
   },
   variants: {
     size: {
-      lg: ['px-4', 'py-3', 'text-lg'],
-      md: [],
-      sm: ['px-2', 'py-1', 'text-sm'],
+      lg: ['px-4', 'py-3'],
+      md: ['px-3', 'py-2'],
+      sm: ['px-2', 'py-1'],
     },
     variant: {
-      default: [],
-      error: [
-        'border-red-300',
-        'text-red-900',
-        'placeholder-red-500',
-        'focus:ring-red-500',
-        'focus:border-red-500',
+      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',
       ],
-      success: [
-        'border-green-300',
-        'text-green-900',
-        'placeholder-green-500',
-        'focus:ring-green-500',
-        'focus:border-green-500',
+      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',
       ],
     },
   },
 });
 
-export type InputVariant = keyof typeof inputVariants;
-export type InputSize = keyof typeof inputSizes;
+export type InputVariant = 'default' | 'error';
+export type InputSize = 'sm' | 'md' | 'lg';
 
 export interface InputProps extends Omit<ComponentProps<typeof BaseUIInput>, 'className' | 'size'> {
   className?: string;

package/src/password-input/password-input.tsx

@@ -32,11 +32,11 @@ const toggleButton = tv({
     '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',
@@ -49,7 +49,7 @@ export type PasswordInputVariant = keyof typeof passwordInputVariants;
 export interface PasswordInputProps
   extends Omit<React.ComponentProps<typeof Input>, 'type' | 'variant'> {
   className?: string;
-  inputVariant?: 'default' | 'error' | 'success';
+  inputVariant?: 'default' | 'error';
   showToggle?: boolean;
   variant?: PasswordInputVariant;
 }
@@ -81,7 +81,6 @@ export const PasswordInput = ({
           aria-label={showPassword ? 'Hide password' : 'Show password'}
           className={toggleButton()}
           onClick={togglePasswordVisibility}
-          size="sm"
           variant="ghost"
         >
           {showPassword ? (

package/src/radio/radio.tsx

@@ -4,22 +4,19 @@ import type { ComponentProps } from 'react';
 
 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: {
@@ -35,7 +32,7 @@ const radioRoot = tv({
 });
 
 const radioIndicator = tv({
-  base: ['flex', 'items-center', 'justify-center', 'text-white', 'data-[unchecked]:invisible'],
+  base: ['flex', 'text-primary-foreground', 'data-[unchecked]:hidden'],
 });
 
 export type RadioSize = 'sm' | 'md' | 'lg';

package/src/slider/slider.tsx

@@ -21,7 +21,7 @@ const sliderControl = tv({
 });
 
 const sliderTrack = tv({
-  base: ['relative', 'w-full', 'rounded-full', 'bg-gray-200', 'overflow-hidden'],
+  base: ['relative', 'w-full', 'rounded-full', 'bg-muted', 'overflow-hidden'],
   defaultVariants: {
     size: 'md',
   },
@@ -35,23 +35,21 @@ const sliderTrack = tv({
 });
 
 const sliderIndicator = tv({
-  base: ['absolute', 'h-full', 'bg-blue-600', 'rounded-full'],
+  base: ['absolute', 'h-full', '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,7 +66,7 @@ const sliderThumb = tv({
 });
 
 const sliderValue = tv({
-  base: ['text-sm', 'font-medium', 'text-gray-700', 'mb-2'],
+  base: ['text-foreground', 'mb-2'],
 });
 
 export type SliderSize = 'sm' | 'md' | 'lg';

package/src/storybook.css

@@ -1 +1,28 @@
 @import "tailwindcss";
+@import "@regardio/tailwind/styles/index.css";
+
+/* Sample semantic color tokens for Storybook testing */
+/* Applications should define their own tokens or use @regardio/brand */
+@theme {
+  --color-foreground: oklch(25.3% 0.015 254.6);
+  --color-muted-foreground: oklch(53.4% 0.013 254.6);
+  --color-background: oklch(97.3% 0.003 254.6);
+  --color-background-muted: oklch(100% 0 0);
+  --color-background-subtle: oklch(95.5% 0.006 254.6);
+  --color-border: oklch(85.5% 0.006 254.6);
+  --color-border-muted: oklch(91.9% 0.004 254.6);
+  --color-ring: oklch(69.8% 0.088 192.3);
+  --color-primary: oklch(63.2% 0.096 192.3);
+  --color-primary-foreground: oklch(100% 0 0);
+  --color-primary-hover: oklch(56.6% 0.089 192.3);
+  --color-secondary: oklch(64.8% 0.142 154.5);
+  --color-secondary-foreground: oklch(100% 0 0);
+  --color-secondary-hover: oklch(58.1% 0.132 154.5);
+  --color-accent: oklch(85.2% 0.151 130.4);
+  --color-accent-foreground: oklch(25.3% 0.015 254.6);
+  --color-accent-hover: oklch(78.9% 0.148 130.4);
+  --color-muted: oklch(95.5% 0.006 254.6);
+  --color-destructive: oklch(62.8% 0.258 27.3);
+  --color-destructive-foreground: oklch(100% 0 0);
+  --color-destructive-hover: oklch(55.5% 0.24 27.3);
+}

package/src/switch/switch.tsx

@@ -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',
@@ -37,13 +34,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',
   ],
   defaultVariants: {
     size: 'md',

package/src/text/text.tsx

@@ -6,9 +6,12 @@ const themeColorVariants = {
 } as const;
 
 const textVariants = {
-  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'],
 } as const;
 
 const text = tv({

package/src/toggle/toggle.test.tsx

@@ -37,7 +37,7 @@ describe('Toggle', () => {
       </Toggle>,
     );
     const toggle = screen.getByTestId('variant-toggle');
-    expect(toggle).toHaveClass('bg-transparent', 'text-gray-700');
+    expect(toggle).toHaveClass('bg-transparent', 'text-foreground');
   });
 
   it('applies size styles', () => {
@@ -90,7 +90,6 @@ describe('Toggle', () => {
     );
     const toggle = screen.getByTestId('disabled-toggle');
     expect(toggle).toBeDisabled();
-    expect(toggle).toHaveClass('disabled:opacity-50');
   });
 
   it('applies custom className', () => {

package/src/toggle/toggle.tsx

@@ -3,22 +3,7 @@ import { tv } from '@regardio/tailwind/utils';
 import type { ComponentProps, ReactNode } from 'react';
 
 const toggle: ReturnType<typeof tv> = 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',
@@ -30,24 +15,54 @@ const toggle: ReturnType<typeof tv> = tv({
       sm: ['h-8', 'w-8', 'p-1'],
     },
     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/dist/button-wigUM1BB.mjs

@@ -1,127 +0,0 @@
-import { tv } from "@regardio/tailwind/utils";
-import { jsx } from "react/jsx-runtime";
-import { Button } from "@base-ui/react/button";
-//#region src/button/button.tsx
-const buttonVariants = {
-	destructive: [
-		"bg-red-600",
-		"text-white",
-		"border-red-600",
-		"hover:bg-red-700",
-		"hover:border-red-700",
-		"focus-visible:ring-2",
-		"focus-visible:ring-red-500",
-		"focus-visible:ring-offset-2"
-	],
-	ghost: [
-		"bg-transparent",
-		"text-gray-900",
-		"border-transparent",
-		"hover:bg-gray-100",
-		"hover:border-transparent",
-		"focus-visible:ring-2",
-		"focus-visible:ring-gray-500",
-		"focus-visible:ring-offset-2"
-	],
-	outline: [
-		"bg-transparent",
-		"text-gray-900",
-		"border-gray-300",
-		"hover:bg-gray-50",
-		"hover:border-gray-400",
-		"focus-visible:ring-2",
-		"focus-visible:ring-gray-500",
-		"focus-visible:ring-offset-2"
-	],
-	primary: [
-		"bg-blue-600",
-		"text-white",
-		"border-blue-600",
-		"hover:bg-blue-700",
-		"hover:border-blue-700",
-		"focus-visible:ring-2",
-		"focus-visible:ring-blue-500",
-		"focus-visible:ring-offset-2"
-	],
-	secondary: [
-		"bg-gray-100",
-		"text-gray-900",
-		"border-gray-300",
-		"hover:bg-gray-200",
-		"hover:border-gray-400",
-		"focus-visible:ring-2",
-		"focus-visible:ring-gray-500",
-		"focus-visible:ring-offset-2"
-	]
-};
-const button = tv({
-	base: [
-		"inline-flex",
-		"items-center",
-		"justify-center",
-		"border",
-		"transition-colors",
-		"duration-200",
-		"ease-in-out",
-		"disabled:opacity-50",
-		"disabled:cursor-not-allowed",
-		"disabled:pointer-events-none"
-	],
-	defaultVariants: {
-		size: "md",
-		variant: "primary"
-	},
-	variants: {
-		size: {
-			"2xl": [
-				"px-10",
-				"py-5",
-				"text-2xl",
-				"font-medium",
-				"rounded-lg"
-			],
-			lg: [
-				"px-6",
-				"py-3",
-				"text-lg",
-				"font-medium",
-				"rounded-lg"
-			],
-			md: [
-				"px-4",
-				"py-2",
-				"text-base",
-				"font-medium",
-				"rounded-md"
-			],
-			sm: [
-				"px-3",
-				"py-1.5",
-				"text-sm",
-				"font-medium",
-				"rounded-md"
-			],
-			xl: [
-				"px-8",
-				"py-4",
-				"text-xl",
-				"font-medium",
-				"rounded-lg"
-			]
-		},
-		variant: buttonVariants
-	}
-});
-const Button$1 = ({ children, className, variant, size, ...props }) => {
-	return /* @__PURE__ */ jsx(Button, {
-		className: button({
-			className,
-			size,
-			variant
-		}),
-		...props,
-		children
-	});
-};
-//#endregion
-export { Button$1 as t };

package/dist/index-B_G_f749.d.mts

@@ -1,29 +0,0 @@
-import { ComponentProps } from "react";
-import { Input } from "@base-ui/react/input";
-
-//#region src/input/input.d.ts
-declare const inputVariants: {
-  readonly default: readonly ["w-full", "px-3", "py-2", "border", "border-gray-300", "rounded-md", "bg-white", "text-gray-900", "placeholder-gray-500", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-blue-500", "transition-colors", "duration-200"];
-  readonly error: readonly ["border-red-300", "text-red-900", "placeholder-red-500", "focus:ring-red-500", "focus:border-red-500"];
-  readonly success: readonly ["border-green-300", "text-green-900", "placeholder-green-500", "focus:ring-green-500", "focus:border-green-500"];
-};
-declare const inputSizes: {
-  readonly lg: readonly ["px-4", "py-3", "text-lg"];
-  readonly md: readonly ["px-3", "py-2", "text-base"];
-  readonly sm: readonly ["px-2", "py-1", "text-sm"];
-};
-type InputVariant = keyof typeof inputVariants;
-type InputSize = keyof typeof inputSizes;
-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-DH3W0i5O.d.mts

@@ -1,35 +0,0 @@
-import { ComponentProps } from "react";
-import { Button } from "@base-ui/react/button";
-
-//#region src/button/button.d.ts
-declare const buttonVariants: {
-  readonly destructive: readonly ["bg-red-600", "text-white", "border-red-600", "hover:bg-red-700", "hover:border-red-700", "focus-visible:ring-2", "focus-visible:ring-red-500", "focus-visible:ring-offset-2"];
-  readonly ghost: readonly ["bg-transparent", "text-gray-900", "border-transparent", "hover:bg-gray-100", "hover:border-transparent", "focus-visible:ring-2", "focus-visible:ring-gray-500", "focus-visible:ring-offset-2"];
-  readonly outline: readonly ["bg-transparent", "text-gray-900", "border-gray-300", "hover:bg-gray-50", "hover:border-gray-400", "focus-visible:ring-2", "focus-visible:ring-gray-500", "focus-visible:ring-offset-2"];
-  readonly primary: readonly ["bg-blue-600", "text-white", "border-blue-600", "hover:bg-blue-700", "hover:border-blue-700", "focus-visible:ring-2", "focus-visible:ring-blue-500", "focus-visible:ring-offset-2"];
-  readonly secondary: readonly ["bg-gray-100", "text-gray-900", "border-gray-300", "hover:bg-gray-200", "hover:border-gray-400", "focus-visible:ring-2", "focus-visible:ring-gray-500", "focus-visible:ring-offset-2"];
-};
-declare const buttonSizes: {
-  readonly "2xl": readonly ["px-10", "py-5", "text-2xl", "font-medium", "rounded-lg"];
-  readonly lg: readonly ["px-6", "py-3", "text-lg", "font-medium", "rounded-lg"];
-  readonly md: readonly ["px-4", "py-2", "text-base", "font-medium", "rounded-md"];
-  readonly sm: readonly ["px-3", "py-1.5", "text-sm", "font-medium", "rounded-md"];
-  readonly xl: readonly ["px-8", "py-4", "text-xl", "font-medium", "rounded-lg"];
-};
-type ButtonVariant = keyof typeof buttonVariants;
-type ButtonSize = keyof typeof buttonSizes;
-interface ButtonProps extends Omit<ComponentProps<typeof Button>, "className"> {
-  className?: string;
-  size?: ButtonSize;
-  type?: "button" | "submit" | "reset";
-  variant?: ButtonVariant;
-}
-declare const Button$1: ({
-  children,
-  className,
-  variant,
-  size,
-  ...props
-}: ButtonProps) => React.JSX.Element;
-//#endregion
-export { ButtonVariant as i, ButtonProps as n, ButtonSize as r, Button$1 as t };