@regardio/react 0.5.7 → 0.7.0

package/src/list/list-root.tsx

@@ -1,13 +1,6 @@
 'use client';
 
-import {
-  type ComponentPropsWithoutRef,
-  type ElementType,
-  type ForwardedRef,
-  forwardRef,
-  type ReactNode,
-  useMemo,
-} from 'react';
+import { type ComponentPropsWithoutRef, type ElementType, type ReactNode, useMemo } from 'react';
 import { ListRootContext, type ListRootContextValue } from './list-root-context';
 
 type ListRootElement = 'ul' | 'ol' | 'dl' | 'div' | 'menu' | 'nav';
@@ -34,17 +27,21 @@ export type ListRootProps<T extends ListRootElement = 'ul'> = Omit<
    * Default className to apply to all list items.
    */
   defaultItemClassName?: string;
+  /**
+   * Ref to the root element.
+   */
+  ref?: React.Ref<HTMLElement>;
 };
 
 function ListRootImpl<T extends ListRootElement = 'ul'>(
   props: ListRootProps<T>,
-  ref: ForwardedRef<HTMLElement>,
-) {
+): React.JSX.Element {
   const {
     render = 'ul' as T,
     children,
     defaultItemElement,
     defaultItemClassName,
+    ref,
     ...elementProps
   } = props;
 
@@ -72,9 +69,9 @@ function ListRootImpl<T extends ListRootElement = 'ul'>(
   );
 }
 
-export const ListRoot = forwardRef(ListRootImpl) as <T extends ListRootElement = 'ul'>(
-  props: ListRootProps<T> & { ref?: ForwardedRef<HTMLElement> },
-) => ReturnType<typeof ListRootImpl>;
+export const ListRoot = ListRootImpl as <T extends ListRootElement = 'ul'>(
+  props: ListRootProps<T>,
+) => React.JSX.Element;
 
 export namespace ListRoot {
   export type Props<T extends ListRootElement = 'ul'> = ListRootProps<T>;

package/src/password-input/index.ts

@@ -1,2 +1,2 @@
-export type { InputProps, PasswordInputProps } from './password-input';
+export type { PasswordInputProps } from './password-input';
 export { PasswordInput } from './password-input';

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

@@ -1,17 +1,66 @@
 'use client';
 
-import { Button } from '@base-ui/react/button';
-import { Input } from '@base-ui/react/input';
-import { cn } from '@regardio/tailwind/utils';
+import { tv } from '@regardio/tailwind/utils';
 import { useState } from 'react';
+import { Button } from '../button';
+import { Input } from '../input';
 
-export interface InputProps extends React.ComponentPropsWithoutRef<typeof Input> {}
+const passwordInputVariants = {
+  default: [],
+  withToggle: [],
+} as const;
 
-export interface PasswordInputProps extends InputProps {
+const passwordInput = tv({
+  base: ['relative'],
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: passwordInputVariants,
+  },
+});
+
+const toggleButton = tv({
+  base: [
+    'absolute',
+    'right-3',
+    'top-1/2',
+    '-translate-y-1/2',
+    'flex',
+    'h-5',
+    'w-5',
+    'cursor-pointer',
+    'items-center',
+    'justify-center',
+    'text-gray-500',
+    'hover:text-gray-700',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:ring-offset-2',
+    'rounded',
+    'transition-colors',
+    'duration-200',
+  ],
+});
+
+export type PasswordInputVariant = keyof typeof passwordInputVariants;
+
+export interface PasswordInputProps
+  extends Omit<React.ComponentProps<typeof Input>, 'type' | 'variant'> {
   className?: string;
+  variant?: PasswordInputVariant;
+  inputVariant?: 'default' | 'error' | 'success';
+  showToggle?: boolean;
 }
 
-export const PasswordInput = ({ className, ...props }: PasswordInputProps) => {
+export const PasswordInput = ({
+  className,
+  variant = 'default',
+  inputVariant = 'default',
+  showToggle = true,
+  ...props
+}: PasswordInputProps): React.JSX.Element => {
   const [showPassword, setShowPassword] = useState(false);
 
   const togglePasswordVisibility = () => {
@@ -19,31 +68,59 @@ export const PasswordInput = ({ className, ...props }: PasswordInputProps) => {
   };
 
   return (
-    <div className={'relative'}>
+    <div className={passwordInput({ className, variant })}>
       <Input
-        autoComplete={'off'}
-        className={cn(className)}
+        autoComplete="off"
+        className={showToggle ? 'pr-10' : ''}
         type={showPassword ? 'text' : 'password'}
+        variant={inputVariant}
         {...props}
       />
-      <Button
-        className={cn(
-          'absolute',
-          'right-[14px]',
-          'top-[35px]',
-          'flex',
-          'h-6',
-          'w-[20px]',
-          'cursor-pointer',
-          'flex-col',
-          'items-end',
-          'justify-center',
-          'text-gray-500',
-        )}
-        onClick={togglePasswordVisibility}
-      >
-        {showPassword ? 'Off' : 'On'}
-      </Button>
+      {showToggle && (
+        <Button
+          aria-label={showPassword ? 'Hide password' : 'Show password'}
+          className={toggleButton()}
+          onClick={togglePasswordVisibility}
+          size="sm"
+          variant="ghost"
+        >
+          {showPassword ? (
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          ) : (
+            <svg
+              className="h-4 w-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+              <path
+                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          )}
+        </Button>
+      )}
     </div>
   );
 };

package/src/protected-email/protected-email.tsx

@@ -18,7 +18,12 @@ export interface ProtectedEmailProps {
  * @param text - Optional display text (defaults to username(at)domain)
  * @param className - Optional CSS class name
  */
-export function ProtectedEmail({ username, domain, text, className }: ProtectedEmailProps) {
+export function ProtectedEmail({
+  username,
+  domain,
+  text,
+  className,
+}: ProtectedEmailProps): React.JSX.Element {
   const [mounted, setMounted] = useState(false);
 
   // Only assemble the email on the client side

package/src/radio/index.ts

@@ -0,0 +1,2 @@
+export type { RadioIndicatorProps, RadioRootProps, RadioSize } from './radio';
+export { Radio, RadioIndicator, RadioRoot } from './radio';

package/src/radio/radio.tsx

@@ -0,0 +1,103 @@
+import { Radio as BaseUIRadio } from '@base-ui/react/radio';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const radioRoot = tv({
+  base: [
+    'h-4',
+    'w-4',
+    'rounded-full',
+    'border',
+    'border-gray-300',
+    'bg-white',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:ring-offset-2',
+    'disabled:cursor-not-allowed',
+    'disabled:opacity-50',
+    'data-[checked]:bg-blue-600',
+    'data-[checked]:border-blue-600',
+    'transition-colors',
+    'duration-200',
+    'cursor-pointer',
+  ],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-5', 'w-5'],
+      md: ['h-4', 'w-4'],
+      sm: ['h-3', 'w-3'],
+    },
+  },
+});
+
+const radioIndicator = tv({
+  base: ['flex', 'items-center', 'justify-center', 'text-white', 'data-[unchecked]:invisible'],
+});
+
+export type RadioSize = 'sm' | 'md' | 'lg';
+
+export interface RadioRootProps extends Omit<ComponentProps<typeof BaseUIRadio.Root>, 'className'> {
+  className?: string;
+  size?: RadioSize;
+}
+
+export interface RadioIndicatorProps
+  extends Omit<ComponentProps<typeof BaseUIRadio.Indicator>, 'className'> {
+  className?: string;
+}
+
+export const RadioRoot = ({
+  className,
+  size = 'md',
+  ...props
+}: RadioRootProps): React.JSX.Element => {
+  return (
+    <BaseUIRadio.Root
+      className={radioRoot({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const RadioIndicator = ({
+  className,
+  children,
+  ...props
+}: RadioIndicatorProps): React.JSX.Element => {
+  return (
+    <BaseUIRadio.Indicator
+      className={radioIndicator({ className })}
+      {...props}
+    >
+      {children || (
+        <svg
+          fill="currentColor"
+          height="8"
+          viewBox="0 0 8 8"
+          width="8"
+        >
+          <circle
+            cx="4"
+            cy="4"
+            r="3"
+          />
+        </svg>
+      )}
+    </BaseUIRadio.Indicator>
+  );
+};
+
+export const Radio: {
+  Indicator: typeof RadioIndicator;
+  Root: typeof RadioRoot;
+} = {
+  Indicator: RadioIndicator,
+  Root: RadioRoot,
+};

package/src/radio-group/index.ts

@@ -0,0 +1,2 @@
+export type { RadioGroupOrientation, RadioGroupProps } from './radio-group';
+export { RadioGroup } from './radio-group';

package/src/radio-group/radio-group.tsx

@@ -0,0 +1,40 @@
+import { RadioGroup as BaseUIRadioGroup } from '@base-ui/react/radio-group';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const radioGroup = tv({
+  base: ['flex', 'flex-col', 'gap-2'],
+  defaultVariants: {
+    orientation: 'vertical',
+  },
+  variants: {
+    orientation: {
+      horizontal: ['flex-row', 'gap-4'],
+      vertical: ['flex-col', 'gap-2'],
+    },
+  },
+});
+
+export type RadioGroupOrientation = 'horizontal' | 'vertical';
+
+export interface RadioGroupProps
+  extends Omit<ComponentProps<typeof BaseUIRadioGroup>, 'className'> {
+  className?: string;
+  orientation?: RadioGroupOrientation;
+}
+
+export const RadioGroup = ({
+  className,
+  orientation = 'vertical',
+  ...props
+}: RadioGroupProps): React.JSX.Element => {
+  return (
+    <BaseUIRadioGroup
+      className={radioGroup({
+        className,
+        orientation,
+      })}
+      {...props}
+    />
+  );
+};

package/src/slider/index.ts

@@ -0,0 +1,18 @@
+export type {
+  SliderControlProps,
+  SliderIndicatorProps,
+  SliderRootProps,
+  SliderSize,
+  SliderThumbProps,
+  SliderTrackProps,
+  SliderValueProps,
+} from './slider';
+export {
+  Slider,
+  SliderControl,
+  SliderIndicator,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderValue,
+} from './slider';

package/src/slider/slider.tsx

@@ -0,0 +1,201 @@
+import { Slider as BaseUISlider } from '@base-ui/react/slider';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const sliderRoot = tv({
+  base: ['relative', 'flex', 'items-center', 'w-full'],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-8'],
+      md: ['h-6'],
+      sm: ['h-4'],
+    },
+  },
+});
+
+const sliderControl = tv({
+  base: ['relative', 'flex', 'items-center', 'w-full', 'touch-none'],
+});
+
+const sliderTrack = tv({
+  base: ['relative', 'w-full', 'rounded-full', 'bg-gray-200', 'overflow-hidden'],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-3'],
+      md: ['h-2'],
+      sm: ['h-1'],
+    },
+  },
+});
+
+const sliderIndicator = tv({
+  base: ['absolute', 'h-full', 'bg-blue-600', 'rounded-full'],
+});
+
+const sliderThumb = tv({
+  base: [
+    'block',
+    'rounded-full',
+    'bg-white',
+    'border-2',
+    'border-blue-600',
+    'shadow-lg',
+    'focus:outline-none',
+    'focus:ring-2',
+    'focus:ring-blue-500',
+    'focus:ring-offset-2',
+    'disabled:cursor-not-allowed',
+    'disabled:opacity-50',
+    'cursor-grab',
+    'active:cursor-grabbing',
+  ],
+  defaultVariants: {
+    size: 'md',
+  },
+  variants: {
+    size: {
+      lg: ['h-6', 'w-6'],
+      md: ['h-5', 'w-5'],
+      sm: ['h-3', 'w-3'],
+    },
+  },
+});
+
+const sliderValue = tv({
+  base: ['text-sm', 'font-medium', 'text-gray-700', 'mb-2'],
+});
+
+export type SliderSize = 'sm' | 'md' | 'lg';
+
+export interface SliderRootProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Root>, 'className'> {
+  className?: string;
+  size?: SliderSize;
+}
+
+export interface SliderControlProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Control>, 'className'> {
+  className?: string;
+}
+
+export interface SliderTrackProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Track>, 'className'> {
+  className?: string;
+  size?: SliderSize;
+}
+
+export interface SliderIndicatorProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Indicator>, 'className'> {
+  className?: string;
+}
+
+export interface SliderThumbProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Thumb>, 'className'> {
+  className?: string;
+  size?: SliderSize;
+}
+
+export interface SliderValueProps
+  extends Omit<ComponentProps<typeof BaseUISlider.Value>, 'className'> {
+  className?: string;
+}
+
+export const SliderRoot = ({
+  className,
+  size = 'md',
+  ...props
+}: SliderRootProps): React.JSX.Element => {
+  return (
+    <BaseUISlider.Root
+      className={sliderRoot({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const SliderControl = ({ className, ...props }: SliderControlProps): React.JSX.Element => {
+  return (
+    <BaseUISlider.Control
+      className={sliderControl({ className })}
+      {...props}
+    />
+  );
+};
+
+export const SliderTrack = ({
+  className,
+  size = 'md',
+  ...props
+}: SliderTrackProps): React.JSX.Element => {
+  return (
+    <BaseUISlider.Track
+      className={sliderTrack({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const SliderIndicator = ({
+  className,
+  ...props
+}: SliderIndicatorProps): React.JSX.Element => {
+  return (
+    <BaseUISlider.Indicator
+      className={sliderIndicator({ className })}
+      {...props}
+    />
+  );
+};
+
+export const SliderThumb = ({
+  className,
+  size = 'md',
+  ...props
+}: SliderThumbProps): React.JSX.Element => {
+  return (
+    <BaseUISlider.Thumb
+      className={sliderThumb({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const SliderValue = ({ className, ...props }: SliderValueProps): React.JSX.Element => {
+  return (
+    <BaseUISlider.Value
+      className={sliderValue({ className })}
+      {...props}
+    />
+  );
+};
+
+export const Slider: {
+  Control: typeof SliderControl;
+  Indicator: typeof SliderIndicator;
+  Root: typeof SliderRoot;
+  Thumb: typeof SliderThumb;
+  Track: typeof SliderTrack;
+  Value: typeof SliderValue;
+} = {
+  Control: SliderControl,
+  Indicator: SliderIndicator,
+  Root: SliderRoot,
+  Thumb: SliderThumb,
+  Track: SliderTrack,
+  Value: SliderValue,
+};

package/src/switch/index.ts

@@ -0,0 +1,2 @@
+export type { SwitchRootProps, SwitchSize, SwitchThumbProps } from './switch';
+export { Switch, SwitchRoot, SwitchThumb } from './switch';