@regardio/react 0.6.0 → 0.7.3

package/src/list/list-item.tsx

@@ -1,12 +1,6 @@
 'use client';
 
-import {
-  type ComponentPropsWithoutRef,
-  type ElementType,
-  type ForwardedRef,
-  forwardRef,
-  type ReactNode,
-} from 'react';
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import { useListRootContext } from './list-root-context';
 
 type ListItemElement = 'li' | 'dd' | 'dt' | 'div' | 'span';
@@ -24,15 +18,18 @@ export type ListItemProps<T extends ListItemElement = 'li'> = Omit<
    * The content of the list item.
    */
   children?: ReactNode;
+  /**
+   * Ref to the root element.
+   */
+  ref?: React.Ref<HTMLElement>;
 };
 
 function ListItemImpl<T extends ListItemElement = 'li'>(
   props: ListItemProps<T>,
-  ref: ForwardedRef<HTMLElement>,
-) {
+): React.JSX.Element {
   const context = useListRootContext();
 
-  const { render, children, className, ...elementProps } = props;
+  const { render, children, className, ref, ...elementProps } = props;
 
   const resolvedElement = render ?? context?.defaultItemElement ?? 'li';
   const resolvedClassName = context?.defaultItemClassName
@@ -54,9 +51,9 @@ function ListItemImpl<T extends ListItemElement = 'li'>(
   );
 }
 
-export const ListItem = forwardRef(ListItemImpl) as <T extends ListItemElement = 'li'>(
-  props: ListItemProps<T> & { ref?: ForwardedRef<HTMLElement> },
-) => ReturnType<typeof ListItemImpl>;
+export const ListItem = ListItemImpl as <T extends ListItemElement = 'li'>(
+  props: ListItemProps<T>,
+) => React.JSX.Element;
 
 export namespace ListItem {
   export type Props<T extends ListItemElement = 'li'> = ListItemProps<T>;

package/src/list/list-root-context.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { createContext, useContext } from 'react';
 
 export interface ListRootContextValue {
@@ -14,7 +12,9 @@ export interface ListRootContextValue {
   defaultItemClassName?: string;
 }
 
-export const ListRootContext = createContext<ListRootContextValue | undefined>(undefined);
+export const ListRootContext: React.Context<ListRootContextValue | undefined> = createContext<
+  ListRootContextValue | undefined
+>(undefined);
 
 export function useListRootContext(): ListRootContextValue | undefined {
   return useContext(ListRootContext);

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/password-input.tsx

@@ -60,7 +60,7 @@ export const PasswordInput = ({
   inputVariant = 'default',
   showToggle = true,
   ...props
-}: PasswordInputProps) => {
+}: PasswordInputProps): React.JSX.Element => {
   const [showPassword, setShowPassword] = useState(false);
 
   const togglePasswordVisibility = () => {

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/radio.tsx

@@ -50,7 +50,11 @@ export interface RadioIndicatorProps
   className?: string;
 }
 
-export const RadioRoot = ({ className, size = 'md', ...props }: RadioRootProps) => {
+export const RadioRoot = ({
+  className,
+  size = 'md',
+  ...props
+}: RadioRootProps): React.JSX.Element => {
   return (
     <BaseUIRadio.Root
       className={radioRoot({
@@ -62,7 +66,11 @@ export const RadioRoot = ({ className, size = 'md', ...props }: RadioRootProps)
   );
 };
 
-export const RadioIndicator = ({ className, children, ...props }: RadioIndicatorProps) => {
+export const RadioIndicator = ({
+  className,
+  children,
+  ...props
+}: RadioIndicatorProps): React.JSX.Element => {
   return (
     <BaseUIRadio.Indicator
       className={radioIndicator({ className })}
@@ -86,7 +94,10 @@ export const RadioIndicator = ({ className, children, ...props }: RadioIndicator
   );
 };
 
-export const Radio = {
+export const Radio: {
+  Indicator: typeof RadioIndicator;
+  Root: typeof RadioRoot;
+} = {
   Indicator: RadioIndicator,
   Root: RadioRoot,
 };

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

@@ -23,7 +23,11 @@ export interface RadioGroupProps
   orientation?: RadioGroupOrientation;
 }
 
-export const RadioGroup = ({ className, orientation = 'vertical', ...props }: RadioGroupProps) => {
+export const RadioGroup = ({
+  className,
+  orientation = 'vertical',
+  ...props
+}: RadioGroupProps): React.JSX.Element => {
   return (
     <BaseUIRadioGroup
       className={radioGroup({

package/src/slider/slider.tsx

@@ -106,7 +106,11 @@ export interface SliderValueProps
   className?: string;
 }
 
-export const SliderRoot = ({ className, size = 'md', ...props }: SliderRootProps) => {
+export const SliderRoot = ({
+  className,
+  size = 'md',
+  ...props
+}: SliderRootProps): React.JSX.Element => {
   return (
     <BaseUISlider.Root
       className={sliderRoot({
@@ -118,7 +122,7 @@ export const SliderRoot = ({ className, size = 'md', ...props }: SliderRootProps
   );
 };
 
-export const SliderControl = ({ className, ...props }: SliderControlProps) => {
+export const SliderControl = ({ className, ...props }: SliderControlProps): React.JSX.Element => {
   return (
     <BaseUISlider.Control
       className={sliderControl({ className })}
@@ -127,7 +131,11 @@ export const SliderControl = ({ className, ...props }: SliderControlProps) => {
   );
 };
 
-export const SliderTrack = ({ className, size = 'md', ...props }: SliderTrackProps) => {
+export const SliderTrack = ({
+  className,
+  size = 'md',
+  ...props
+}: SliderTrackProps): React.JSX.Element => {
   return (
     <BaseUISlider.Track
       className={sliderTrack({
@@ -139,7 +147,10 @@ export const SliderTrack = ({ className, size = 'md', ...props }: SliderTrackPro
   );
 };
 
-export const SliderIndicator = ({ className, ...props }: SliderIndicatorProps) => {
+export const SliderIndicator = ({
+  className,
+  ...props
+}: SliderIndicatorProps): React.JSX.Element => {
   return (
     <BaseUISlider.Indicator
       className={sliderIndicator({ className })}
@@ -148,7 +159,11 @@ export const SliderIndicator = ({ className, ...props }: SliderIndicatorProps) =
   );
 };
 
-export const SliderThumb = ({ className, size = 'md', ...props }: SliderThumbProps) => {
+export const SliderThumb = ({
+  className,
+  size = 'md',
+  ...props
+}: SliderThumbProps): React.JSX.Element => {
   return (
     <BaseUISlider.Thumb
       className={sliderThumb({
@@ -160,7 +175,7 @@ export const SliderThumb = ({ className, size = 'md', ...props }: SliderThumbPro
   );
 };
 
-export const SliderValue = ({ className, ...props }: SliderValueProps) => {
+export const SliderValue = ({ className, ...props }: SliderValueProps): React.JSX.Element => {
   return (
     <BaseUISlider.Value
       className={sliderValue({ className })}
@@ -169,7 +184,14 @@ export const SliderValue = ({ className, ...props }: SliderValueProps) => {
   );
 };
 
-export const Slider = {
+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,

package/src/switch/switch.tsx

@@ -71,7 +71,11 @@ export interface SwitchThumbProps
   size?: SwitchSize;
 }
 
-export const SwitchRoot = ({ className, size = 'md', ...props }: SwitchRootProps) => {
+export const SwitchRoot = ({
+  className,
+  size = 'md',
+  ...props
+}: SwitchRootProps): React.JSX.Element => {
   return (
     <BaseUISwitch.Root
       className={switchRoot({
@@ -83,7 +87,11 @@ export const SwitchRoot = ({ className, size = 'md', ...props }: SwitchRootProps
   );
 };
 
-export const SwitchThumb = ({ className, size = 'md', ...props }: SwitchThumbProps) => {
+export const SwitchThumb = ({
+  className,
+  size = 'md',
+  ...props
+}: SwitchThumbProps): React.JSX.Element => {
   return (
     <BaseUISwitch.Thumb
       className={switchThumb({
@@ -95,7 +103,10 @@ export const SwitchThumb = ({ className, size = 'md', ...props }: SwitchThumbPro
   );
 };
 
-export const Switch = {
+export const Switch: {
+  Root: typeof SwitchRoot;
+  Thumb: typeof SwitchThumb;
+} = {
   Root: SwitchRoot,
   Thumb: SwitchThumb,
 };

package/src/text/text.tsx

@@ -31,7 +31,12 @@ export interface TextProps extends ComponentProps<'p'> {
   variant?: TextVariant;
 }
 
-export const Text = ({ children, className, variant, themeColor }: TextProps) => {
+export const Text = ({
+  children,
+  className,
+  variant,
+  themeColor,
+}: TextProps): React.JSX.Element => {
   return (
     <div
       className={text({

package/src/toggle/toggle.tsx

@@ -2,7 +2,7 @@ import { Toggle as BaseUIToggle } from '@base-ui/react/toggle';
 import { tv } from '@regardio/tailwind/utils';
 import type { ComponentProps, ReactNode } from 'react';
 
-const toggle = tv({
+const toggle: ReturnType<typeof tv> = tv({
   base: [
     'inline-flex',
     'items-center',
@@ -51,7 +51,7 @@ const toggle = tv({
       ],
     },
   },
-});
+} as const);
 
 export type ToggleVariant = keyof typeof toggle.variants.variant;
 export type ToggleSize = keyof typeof toggle.variants.size;
@@ -71,7 +71,7 @@ export const Toggle = ({
   title,
   children,
   ...props
-}: ToggleProps) => {
+}: ToggleProps): React.JSX.Element => {
   return (
     <BaseUIToggle
       className={toggle({

package/src/utils/text/text.tsx

@@ -1,5 +1,5 @@
 import { replaceShyInString, splitIntoSentences, typographicQuotes } from '@regardio/js/text';
-import React, { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';
+import { cloneElement, Fragment, isValidElement, type ReactElement, type ReactNode } from 'react';
 
 export const lowerCaseSzett = (text: ReactNode | string, _returnType?: 'string'): ReactNode => {
   // Helper function to process strings
@@ -24,21 +24,18 @@ export const lowerCaseSzett = (text: ReactNode | string, _returnType?: 'string')
     return processString(text);
   }
 
-  // Handle valid React elements with correct type assertion
+  // Handle valid React elements
   if (isValidElement(text)) {
     const element = text as ReactElement<{ children?: ReactNode }>;
-    const { children, ...props } = element.props;
+    const { children } = element.props;
 
-    return cloneElement(element, {
-      ...props,
-      children: lowerCaseSzett(children),
-    });
+    return cloneElement(element, element.props, lowerCaseSzett(children));
   }
 
   // Handle arrays
   if (Array.isArray(text)) {
     return text.map((child, index) => (
-      <React.Fragment key={index.toString()}>{lowerCaseSzett(child as ReactNode)}</React.Fragment>
+      <Fragment key={index.toString()}>{lowerCaseSzett(child as ReactNode)}</Fragment>
     ));
   }
 
@@ -55,19 +52,14 @@ function replaceShyInReactNode(node: ReactNode): ReactNode {
 
   if (isValidElement(node)) {
     const element = node as ReactElement<{ children?: ReactNode }>;
-    const { children, ...props } = element.props;
+    const { children } = element.props;
 
-    return cloneElement(element, {
-      ...props,
-      children: replaceShyInReactNode(children),
-    });
+    return cloneElement(element, element.props, replaceShyInReactNode(children));
   }
 
   if (Array.isArray(node)) {
     return node.map((child, index) => (
-      <React.Fragment key={index.toString()}>
-        {replaceShyInReactNode(child as ReactNode)}
-      </React.Fragment>
+      <Fragment key={index.toString()}>{replaceShyInReactNode(child as ReactNode)}</Fragment>
     ));
   }