@regardio/react 0.6.0 → 0.7.3

package/src/checkbox/checkbox.tsx

@@ -51,7 +51,11 @@ export interface CheckboxIndicatorProps
   className?: string;
 }
 
-export const CheckboxRoot = ({ className, size = 'md', ...props }: CheckboxRootProps) => {
+export const CheckboxRoot = ({
+  className,
+  size = 'md',
+  ...props
+}: CheckboxRootProps): React.JSX.Element => {
   return (
     <BaseUICheckbox.Root
       className={checkboxRoot({
@@ -63,7 +67,11 @@ export const CheckboxRoot = ({ className, size = 'md', ...props }: CheckboxRootP
   );
 };
 
-export const CheckboxIndicator = ({ className, children, ...props }: CheckboxIndicatorProps) => {
+export const CheckboxIndicator = ({
+  className,
+  children,
+  ...props
+}: CheckboxIndicatorProps): React.JSX.Element => {
   return (
     <BaseUICheckbox.Indicator
       className={checkboxIndicator({ className })}
@@ -85,7 +93,10 @@ export const CheckboxIndicator = ({ className, children, ...props }: CheckboxInd
   );
 };
 
-export const Checkbox = {
+export const Checkbox: {
+  Indicator: typeof CheckboxIndicator;
+  Root: typeof CheckboxRoot;
+} = {
   Indicator: CheckboxIndicator,
   Root: CheckboxRoot,
 };

package/src/checkbox-group/checkbox-group.tsx

@@ -27,7 +27,7 @@ export const CheckboxGroup = ({
   className,
   orientation = 'vertical',
   ...props
-}: CheckboxGroupProps) => {
+}: CheckboxGroupProps): React.JSX.Element => {
   return (
     <BaseUICheckboxGroup
       className={checkboxGroup({

package/src/countdown/countdown.tsx

@@ -3,7 +3,7 @@
 import { cn } from '@regardio/tailwind/utils';
 import { useEffect, useState } from 'react';
 
-export function Countdown() {
+export function Countdown(): React.JSX.Element {
   const [timerValue, setTimerValue] = useState(0);
   const [isMounted, setIsMounted] = useState(false);
 

package/src/field/field.stories.tsx

@@ -3,7 +3,7 @@ import { Checkbox } from '../checkbox';
 import { Input } from '../input';
 import { Field } from './field';
 
-const meta = {
+const meta: Meta<typeof Field.Root> = {
   argTypes: {
     variant: {
       control: 'select',

package/src/field/field.tsx

@@ -93,7 +93,7 @@ export interface FieldItemProps extends ComponentProps<'div'> {
   children: ReactNode;
 }
 
-export const FieldRoot = ({ className, variant, ...props }: FieldRootProps) => {
+export const FieldRoot = ({ className, variant, ...props }: FieldRootProps): React.JSX.Element => {
   return (
     <BaseUIField.Root
       className={fieldRoot({
@@ -105,7 +105,11 @@ export const FieldRoot = ({ className, variant, ...props }: FieldRootProps) => {
   );
 };
 
-export const FieldLabel = ({ className, variant, ...props }: FieldLabelProps) => {
+export const FieldLabel = ({
+  className,
+  variant,
+  ...props
+}: FieldLabelProps): React.JSX.Element => {
   return (
     <BaseUIField.Label
       className={fieldLabel({
@@ -117,7 +121,11 @@ export const FieldLabel = ({ className, variant, ...props }: FieldLabelProps) =>
   );
 };
 
-export const FieldDescription = ({ className, variant, ...props }: FieldDescriptionProps) => {
+export const FieldDescription = ({
+  className,
+  variant,
+  ...props
+}: FieldDescriptionProps): React.JSX.Element => {
   return (
     <BaseUIField.Description
       className={fieldDescription({
@@ -129,7 +137,7 @@ export const FieldDescription = ({ className, variant, ...props }: FieldDescript
   );
 };
 
-export const FieldError = ({ className, ...props }: FieldErrorProps) => {
+export const FieldError = ({ className, ...props }: FieldErrorProps): React.JSX.Element => {
   return (
     <BaseUIField.Error
       className={fieldError({
@@ -140,7 +148,12 @@ export const FieldError = ({ className, ...props }: FieldErrorProps) => {
   );
 };
 
-export const FieldItem = ({ className, layout, children, ...props }: FieldItemProps) => {
+export const FieldItem = ({
+  className,
+  layout,
+  children,
+  ...props
+}: FieldItemProps): React.JSX.Element => {
   return (
     <div
       className={fieldItem({
@@ -154,7 +167,15 @@ export const FieldItem = ({ className, layout, children, ...props }: FieldItemPr
   );
 };
 
-export const Field = {
+export const Field: {
+  Control: typeof BaseUIField.Control;
+  Description: typeof FieldDescription;
+  Error: typeof FieldError;
+  Item: typeof FieldItem;
+  Label: typeof FieldLabel;
+  Root: typeof FieldRoot;
+  Validity: typeof BaseUIField.Validity;
+} = {
   Control: BaseUIField.Control,
   Description: FieldDescription,
   Error: FieldError,

package/src/fieldset/fieldset.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../button';
 import { Fieldset } from './fieldset';
 
-const meta = {
+const meta: Meta<typeof Fieldset.Root> = {
   argTypes: {
     variant: {
       control: 'select',

package/src/fieldset/fieldset.tsx

@@ -45,7 +45,11 @@ export interface FieldsetLegendProps
   size?: FieldsetLegendSize;
 }
 
-export const FieldsetRoot = ({ className, variant, ...props }: FieldsetRootProps) => {
+export const FieldsetRoot = ({
+  className,
+  variant,
+  ...props
+}: FieldsetRootProps): React.JSX.Element => {
   return (
     <BaseUIFieldset.Root
       className={fieldsetRoot({
@@ -57,7 +61,11 @@ export const FieldsetRoot = ({ className, variant, ...props }: FieldsetRootProps
   );
 };
 
-export const FieldsetLegend = ({ className, size, ...props }: FieldsetLegendProps) => {
+export const FieldsetLegend = ({
+  className,
+  size,
+  ...props
+}: FieldsetLegendProps): React.JSX.Element => {
   return (
     <BaseUIFieldset.Legend
       className={fieldsetLegend({
@@ -69,7 +77,10 @@ export const FieldsetLegend = ({ className, size, ...props }: FieldsetLegendProp
   );
 };
 
-export const Fieldset = {
+export const Fieldset: {
+  Legend: typeof FieldsetLegend;
+  Root: typeof FieldsetRoot;
+} = {
   Legend: FieldsetLegend,
   Root: FieldsetRoot,
 };

package/src/form/form.stories.tsx

@@ -4,7 +4,7 @@ import { Field } from '../field';
 import { Input } from '../input';
 import { Form } from './form';
 
-const meta = {
+const meta: Meta<typeof Form> = {
   argTypes: {
     variant: {
       control: 'select',

package/src/form/form.tsx

@@ -25,7 +25,7 @@ export interface FormProps extends Omit<ComponentProps<typeof BaseUIForm>, 'clas
   variant?: FormVariant;
 }
 
-export const Form = ({ className, variant, ...props }: FormProps) => {
+export const Form = ({ className, variant, ...props }: FormProps): React.JSX.Element => {
   return (
     <BaseUIForm
       className={form({

package/src/generic-error/generic-error.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import type { ReactElement } from 'react';
 import { isRouteErrorResponse, useRouteError } from 'react-router';
 
 /**
@@ -73,8 +72,8 @@ export function getErrorDescriptor(error: unknown): ErrorDescriptor {
 export function GenericError({
   renderMessage,
 }: {
-  renderMessage?: (descriptor: ErrorDescriptor) => ReactElement;
-} = {}): ReactElement {
+  renderMessage?: (descriptor: ErrorDescriptor) => React.JSX.Element;
+} = {}): React.JSX.Element {
   const error = useRouteError();
   const descriptor = getErrorDescriptor(error);
 

package/src/grid/grid-item.tsx

@@ -1,5 +1,40 @@
-import { tv, type VariantProps } from '@regardio/tailwind/utils';
-import { forwardRef, type HTMLAttributes } from 'react';
+import { tv } from '@regardio/tailwind/utils';
+import type { HTMLAttributes } from 'react';
+
+const GRID_ITEM_VARIANTS = {
+  end: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 'auto'] as const,
+  rowSpan: [1, 2, 3, 4, 5, 6, 'full'] as const,
+  span: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanLg: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanMd: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanSm: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanXl: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  spanXs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'full'] as const,
+  start: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 'auto'] as const,
+} as const;
+
+interface GridItemVariantProps {
+  end?: (typeof GRID_ITEM_VARIANTS.end)[number];
+  rowSpan?: (typeof GRID_ITEM_VARIANTS.rowSpan)[number];
+  span?: (typeof GRID_ITEM_VARIANTS.span)[number];
+  spanLg?: (typeof GRID_ITEM_VARIANTS.spanLg)[number];
+  spanMd?: (typeof GRID_ITEM_VARIANTS.spanMd)[number];
+  spanSm?: (typeof GRID_ITEM_VARIANTS.spanSm)[number];
+  spanXl?: (typeof GRID_ITEM_VARIANTS.spanXl)[number];
+  spanXs?: (typeof GRID_ITEM_VARIANTS.spanXs)[number];
+  start?: (typeof GRID_ITEM_VARIANTS.start)[number];
+}
+
+interface GridItemSlotProps {
+  class?: string;
+  className?: string;
+}
+
+interface GridItemSlots {
+  root: (props?: GridItemSlotProps) => string;
+}
+
+type GridItemStyleFn = (props?: GridItemVariantProps) => GridItemSlots;
 
 const gridItem = tv({
   defaultVariants: {
@@ -141,48 +176,54 @@ const gridItem = tv({
       auto: { root: 'col-start-auto' },
     },
   },
-});
+}) as GridItemStyleFn;
 
-export type GridItemVariants = VariantProps<typeof gridItem>;
+export type GridItemVariants = GridItemVariantProps;
 
 export interface GridItemProps extends HTMLAttributes<HTMLDivElement>, GridItemVariants {
   classNames?: {
     root?: string;
   };
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
-  (
-    {
-      children,
-      className,
-      classNames,
-      span,
-      spanXs,
-      spanSm,
-      spanMd,
-      spanLg,
-      spanXl,
-      start,
-      end,
-      rowSpan,
-      ...props
-    },
-    ref,
-  ) => {
-    const styles = gridItem({ end, rowSpan, span, spanLg, spanMd, spanSm, spanXl, spanXs, start });
+export const GridItem = function GridItem({
+  children,
+  className,
+  classNames,
+  span,
+  spanXs,
+  spanSm,
+  spanMd,
+  spanLg,
+  spanXl,
+  start,
+  end,
+  rowSpan,
+  ref,
+  ...props
+}: GridItemProps): React.JSX.Element {
+  const styles = gridItem({
+    end,
+    rowSpan,
+    span,
+    spanLg,
+    spanMd,
+    spanSm,
+    spanXl,
+    spanXs,
+    start,
+  });
 
-    return (
-      <div
-        className={styles.root({ className: classNames?.root ?? className })}
-        ref={ref}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-GridItem.displayName = 'GridItem';
+  return (
+    <div
+      className={styles.root({ className: classNames?.root ?? className })}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
 
 export { gridItem };

package/src/grid/grid-root.tsx

@@ -1,5 +1,26 @@
-import { tv, type VariantProps } from '@regardio/tailwind/utils';
-import { createContext, forwardRef, type HTMLAttributes, useContext } from 'react';
+import { tv } from '@regardio/tailwind/utils';
+import { createContext, type HTMLAttributes, useContext } from 'react';
+
+const GRID_VARIANTS = {
+  align: ['center', 'end', 'start', 'stretch'] as const,
+  flow: ['column', 'dense', 'row'] as const,
+} as const;
+
+interface GridVariantProps {
+  align?: (typeof GRID_VARIANTS.align)[number];
+  flow?: (typeof GRID_VARIANTS.flow)[number];
+}
+
+interface GridSlotProps {
+  class?: string;
+  className?: string;
+}
+
+interface GridSlots {
+  root: (props?: GridSlotProps) => string;
+}
+
+type GridStyleFn = (props?: GridVariantProps) => GridSlots;
 
 const grid = tv({
   defaultVariants: {
@@ -28,9 +49,9 @@ const grid = tv({
       row: { root: 'grid-auto-flow-row' },
     },
   },
-});
+}) as GridStyleFn;
 
-type GridVariants = VariantProps<typeof grid>;
+type GridVariants = GridVariantProps;
 
 interface GridContextValue {
   styles: ReturnType<typeof grid>;
@@ -38,7 +59,7 @@ interface GridContextValue {
 
 const GridContext = createContext<GridContextValue | null>(null);
 
-export function useGrid() {
+export function useGrid(): GridContextValue {
   const context = useContext(GridContext);
   if (!context) {
     throw new Error('useGrid must be used within a <Grid.Root />');
@@ -50,23 +71,29 @@ export interface GridRootProps extends HTMLAttributes<HTMLDivElement>, GridVaria
   classNames?: {
     root?: string;
   };
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const GridRoot = forwardRef<HTMLDivElement, GridRootProps>(
-  ({ children, className, classNames, flow, align, ...props }, ref) => {
-    const styles = grid({ align, flow });
+export const GridRoot = function GridRoot({
+  children,
+  className,
+  classNames,
+  flow,
+  align,
+  ref,
+  ...props
+}: GridRootProps): React.JSX.Element {
+  const styles = grid({ align, flow });
 
-    return (
-      <GridContext.Provider value={{ styles }}>
-        <div
-          className={styles.root({ className: classNames?.root ?? className })}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      </GridContext.Provider>
-    );
-  },
-);
-GridRoot.displayName = 'GridRoot';
+  return (
+    <GridContext.Provider value={{ styles }}>
+      <div
+        className={styles.root({ className: classNames?.root ?? className })}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    </GridContext.Provider>
+  );
+};

package/src/heading/heading.tsx

@@ -30,7 +30,13 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   locale?: string;
 }
 
-export const Heading = ({ as, children, className, level = 2, ...props }: HeadingProps) => {
+export const Heading = function Heading({
+  as,
+  children,
+  className,
+  level = 2,
+  ...props
+}: HeadingProps): React.JSX.Element {
   const word = lowerCaseSzett(shy(children));
   const Component: ElementType = as || `h${level}`;
 
@@ -48,5 +54,3 @@ export const Heading = ({ as, children, className, level = 2, ...props }: Headin
     </Component>
   );
 };
-
-Heading.displayName = 'Heading';

package/src/highlight/highlight.tsx

@@ -20,7 +20,7 @@ export interface HighlightProps extends ComponentProps<'mark'> {
   variant?: HighlightVariant;
 }
 
-export const Highlight = ({ children, className, variant }: HighlightProps) => {
+export const Highlight = ({ children, className, variant }: HighlightProps): React.JSX.Element => {
   return (
     <mark
       className={highlight({

package/src/hooks/use-current-route-data.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 import { useLocation, useMatches } from 'react-router';
 
@@ -5,7 +7,7 @@ import { useLocation, useMatches } from 'react-router';
  * This base hook is used to access data related to the current route
  * @returns {JSON|undefined} The router data or undefined if not found
  */
-export function useCurrentRouteData<HeaderData>() {
+export function useCurrentRouteData<HeaderData>(): HeaderData | undefined {
   const location = useLocation();
   const matchingRoutes = useMatches();
   const route = useMemo(() => {
@@ -14,5 +16,5 @@ export function useCurrentRouteData<HeaderData>() {
     });
   }, [matchingRoutes, location]);
 
-  return route?.data || (undefined as HeaderData);
+  return (route?.loaderData as HeaderData) || undefined;
 }

package/src/hooks/use-focus-search.ts

@@ -1,8 +1,10 @@
+'use client';
+
 import type { RefObject } from 'react';
 import { useEffect } from 'react';
 
 /** Focuses on the field when user clicks cmd + k or ctrl + k */
-export function useFocusSearch(ref: RefObject<HTMLInputElement>) {
+export function useFocusSearch(ref: RefObject<HTMLInputElement>): void {
   useEffect(() => {
     function handleKeyDown(event: KeyboardEvent) {
       if ((event.metaKey || event.ctrlKey) && event.key === 'k') {

package/src/hooks/use-matches-data.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 import { useMatches } from 'react-router';
 

package/src/hooks/use-media-query.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 /**

package/src/hooks/use-mobile.ts

@@ -1,8 +1,10 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 const MOBILE_BREAKPOINT = 768;
 
-export function useIsMobile() {
+export function useIsMobile(): boolean {
   const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
 
   useEffect(() => {

package/src/hooks/use-nonce.ts

@@ -4,7 +4,7 @@
  */
 import { createContext, useContext } from 'react';
 
-export const NonceContext = createContext<string>('');
-export const NonceProvider = NonceContext.Provider;
+export const NonceContext: React.Context<string> = createContext<string>('');
+export const NonceProvider: React.Provider<string> = NonceContext.Provider;
 
-export const useNonce = () => useContext(NonceContext);
+export const useNonce = (): string => useContext(NonceContext);

package/src/hooks/use-orientation.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 /**

package/src/hooks/use-user.tsx

@@ -26,7 +26,8 @@ const defaultContextValue: UserContextType = {
 /**
  * Context for storing and accessing the current authenticated user
  */
-export const UserContext = createContext<UserContextType>(defaultContextValue);
+export const UserContext: React.Context<UserContextType> =
+  createContext<UserContextType>(defaultContextValue);
 
 /**
  * Props for the UserContextProvider component
@@ -53,7 +54,7 @@ export function UserContextProvider({
   user,
   isLoading = false,
   children,
-}: UserContextProviderProps) {
+}: UserContextProviderProps): React.JSX.Element {
   return <UserContext.Provider value={{ isLoading, user }}>{children}</UserContext.Provider>;
 }
 

package/src/icon-button/icon-button.tsx

@@ -36,7 +36,7 @@ export const IconButton = ({
   'aria-label': ariaLabel,
   className,
   ...props
-}: IconButtonProps) => {
+}: IconButtonProps): React.JSX.Element => {
   // Use title for both title and aria-label if aria-label not provided
   const finalAriaLabel = ariaLabel || title;
   const finalTitle = title || ariaLabel;

package/src/if/if.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMemo } from 'react';
 
 type Condition<Value = unknown> = Value | false | null | undefined | 0 | '';
@@ -10,7 +12,7 @@ export function If<Value = unknown>({
   condition: Condition<Value>;
   children: React.ReactNode | ((value: Value) => React.ReactNode);
   fallback?: React.ReactNode;
-}>) {
+}>): React.JSX.Element | null {
   return useMemo(() => {
     if (condition) {
       if (typeof children === 'function') {

package/src/input/input.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Input } from './input';
 
-const meta = {
+const meta: Meta<typeof Input> = {
   argTypes: {
     disabled: {
       control: 'boolean',

package/src/input/input.tsx

@@ -99,7 +99,7 @@ export interface InputProps extends Omit<ComponentProps<typeof BaseUIInput>, 'cl
   size?: InputSize;
 }
 
-export const Input = ({ className, variant, size, ...props }: InputProps) => {
+export const Input = ({ className, variant, size, ...props }: InputProps): React.JSX.Element => {
   return (
     <BaseUIInput
       className={input({

package/src/link/link.tsx

@@ -14,7 +14,8 @@ export type PathResolver = (routeKey: string) => string;
 
 const PathResolverContext = createContext<PathResolver | null>(null);
 
-export const PathResolverProvider = PathResolverContext.Provider;
+export const PathResolverProvider: React.Provider<PathResolver | null> =
+  PathResolverContext.Provider;
 
 export function usePathResolver(): PathResolver | null {
   return useContext(PathResolverContext);
@@ -34,7 +35,7 @@ export const LinkBase = ({
   onClick,
   viewTransition = true,
   ...props
-}: LinkBaseProps) => {
+}: LinkBaseProps): React.JSX.Element => {
   const pathResolver = usePathResolver();
 
   let path: string;
@@ -179,7 +180,7 @@ export const Link = ({
   variant,
   viewTransition,
   ...props
-}: LinkProps) => {
+}: LinkProps): React.JSX.Element => {
   return (
     <LinkBase
       {...props}