@regardio/react 0.3.2

package/src/components/generic-error.tsx

@@ -0,0 +1,104 @@
+import type { ReactElement } from 'react';
+import { isRouteErrorResponse, useRouteError } from 'react-router';
+
+/**
+ * Descriptor returned from getErrorDescriptor to help apps localize messages.
+ */
+export type ErrorDescriptor =
+  | {
+      type: 'http';
+      status: number;
+      statusText: string;
+      defaultId: string; // e.g. "errors.http"
+      defaultMessage: string; // e.g. "Error {status}"
+    }
+  | {
+      type: 'error';
+      defaultId: string; // e.g. "errors.runtime"
+      defaultMessage: string; // e.g. "An unexpected error occurred."
+      message?: string;
+      stack?: string;
+    }
+  | {
+      type: 'unknown';
+      defaultId: string; // e.g. "errors.unknown"
+      defaultMessage: string; // e.g. "An unexpected error occurred."
+    };
+
+/**
+ * Compute a normalized error descriptor from a React Router error.
+ * Apps can use this to map to i18n keys.
+ */
+export function getErrorDescriptor(error: unknown): ErrorDescriptor {
+  if (isRouteErrorResponse(error)) {
+    const status = error.status;
+    const statusText = error.statusText || 'Error';
+    return {
+      defaultId: status === 404 ? 'errors.404' : 'errors.http',
+      defaultMessage: status === 404 ? 'Not found' : `Error ${status}`,
+      status,
+      statusText,
+      type: 'http',
+    };
+  }
+  if (error instanceof Error) {
+    return {
+      defaultId: 'errors.runtime',
+      defaultMessage: 'An unexpected error occurred.',
+      message: error.message,
+      type: 'error',
+      ...(error.stack ? { stack: error.stack } : {}),
+    };
+  }
+  return {
+    defaultId: 'errors.unknown',
+    defaultMessage: 'An unexpected error occurred.',
+    type: 'unknown',
+  };
+}
+
+/**
+ * GenericError
+ *
+ * A reusable error boundary component for React Router apps.
+ * - Displays status-based messages for route responses
+ * - Shows stack traces in development for non-response errors
+ *
+ * For localization, apps may either:
+ * - Wrap this component and use `getErrorDescriptor(useRouteError())` to map to i18n keys
+ * - Or provide a custom `renderMessage` to override the displayed details
+ */
+export function GenericError({
+  renderMessage,
+}: {
+  renderMessage?: (descriptor: ErrorDescriptor) => ReactElement;
+} = {}): ReactElement {
+  const error = useRouteError();
+  const descriptor = getErrorDescriptor(error);
+
+  const title = descriptor.type === 'http' ? `Error ${descriptor.status}` : 'Error';
+
+  return (
+    <main className="pt-2xl p-sm container mx-auto">
+      <h1>{title}</h1>
+      {renderMessage ? (
+        renderMessage(descriptor)
+      ) : (
+        <>
+          <p>
+            {descriptor.type === 'http'
+              ? descriptor.defaultMessage
+              : descriptor.type === 'error'
+                ? descriptor.message || descriptor.defaultMessage
+                : descriptor.defaultMessage}
+          </p>
+          {import.meta.env.DEV && descriptor.type === 'error' && descriptor.stack && (
+            <pre className="w-full p-sm overflow-x-auto">
+              <code>{descriptor.stack}</code>
+            </pre>
+          )}
+        </>
+      )}
+    </main>
+  );
+}

package/src/components/heading.tsx

@@ -0,0 +1,60 @@
+import type { ElementType, HTMLAttributes } from 'react';
+import { cn, cva, type VariantProps } from '../utils/cn';
+import { lowerCaseSzett, shy } from '../utils/text';
+
+const heading = cva({
+  base: [],
+  defaultVariants: {
+    level: 3,
+  },
+  variants: {
+    level: {
+      1: ['text-2xl'],
+      2: ['text-xl'],
+      3: ['text-lg'],
+      4: ['text-md'],
+      5: ['text-sm'],
+      6: ['text-xs'],
+    },
+    variant: {},
+  },
+});
+
+export interface HeadingProps
+  extends HTMLAttributes<HTMLHeadingElement>,
+    VariantProps<typeof heading> {
+  as?: ElementType;
+  className?: string;
+  locale?: string;
+}
+
+export type HeadingLevel = HeadingProps['level'];
+
+export const Heading = ({
+  as,
+  children,
+  className,
+  level = 2,
+  variant,
+  ...props
+}: HeadingProps) => {
+  const word = lowerCaseSzett(shy(children));
+  const Component: ElementType = as || `h${level}`;
+
+  return (
+    <Component
+      className={cn(
+        heading({
+          level,
+          variant,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {word}
+    </Component>
+  );
+};
+
+Heading.displayName = 'Heading';

package/src/components/highlight.tsx

@@ -0,0 +1,53 @@
+import type { ComponentProps } from 'react';
+import { cva, type VariantProps } from '../utils/cn';
+
+const li = cva({
+  defaultVariants: {
+    variant: 'primary',
+  },
+  variants: {
+    variant: {
+      primary: ['highlight'],
+    },
+  },
+});
+
+export interface HighlightProps extends ComponentProps<'mark'>, VariantProps<typeof li> {}
+
+export const Highlight = (props: HighlightProps) => {
+  const { children, className, variant } = props;
+
+  return (
+    <mark
+      className={li({
+        className,
+        variant,
+      })}
+    >
+      {children}
+
+      <svg
+        aria-label="!"
+        role="img"
+      >
+        <defs>
+          <filter>
+            <feTurbulence
+              baseFrequency="0 0.2"
+              numOctaves="5"
+              result="warp"
+              type="fractalNoise"
+            />
+            <feDisplacementMap
+              in="SourceGraphic"
+              in2="warp"
+              scale="30"
+              xChannelSelector="R"
+              yChannelSelector="G"
+            />
+          </filter>
+        </defs>
+      </svg>
+    </mark>
+  );
+};

package/src/components/icon-button.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps, ReactNode } from 'react';
+
+export interface IconButtonProps extends ComponentProps<'button'> {
+  icon: ReactNode;
+}
+
+export const IconButton = (props: IconButtonProps) => {
+  const { className, icon } = props;
+
+  const defaultClassName = 'p-0';
+
+  return (
+    <button
+      className={className ? className : defaultClassName}
+      type={'button'}
+    >
+      {icon}
+    </button>
+  );
+};

package/src/components/if.tsx

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+
+type Condition<Value = unknown> = Value | false | null | undefined | 0 | '';
+
+export function If<Value = unknown>({
+  condition,
+  children,
+  fallback,
+}: React.PropsWithoutRef<{
+  condition: Condition<Value>;
+  children: React.ReactNode | ((value: Value) => React.ReactNode);
+  fallback?: React.ReactNode;
+}>) {
+  return useMemo(() => {
+    if (condition) {
+      if (typeof children === 'function') {
+        return <>{children(condition)}</>;
+      }
+
+      return <>{children}</>;
+    }
+
+    if (fallback) {
+      return <>{fallback}</>;
+    }
+
+    return null;
+  }, [condition, fallback, children]);
+}

package/src/components/iframe.tsx

@@ -0,0 +1,19 @@
+import type React from 'react';
+import { cn } from '../utils/cn';
+
+export type IframeProps = {
+  src: string;
+  title: string;
+  className?: string;
+};
+
+export const Iframe: React.FC<IframeProps> = ({ src, title, className }) => (
+  <iframe
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowFullScreen
+    className={cn('w-full aspect-video border-0', className)}
+    loading="lazy"
+    src={src}
+    title={title}
+  />
+);

package/src/components/item.tsx

@@ -0,0 +1,340 @@
+import type { ComponentProps, ElementType } from 'react';
+import { cva, type VariantProps } from '../utils/cn';
+import { Link } from './link';
+
+export const priorities = {
+  high: [],
+  low: [],
+  medium: [],
+};
+
+export const paddingValues = {
+  default: '',
+  gutter: 'p-grid-gutter',
+};
+
+export const width = {
+  full: ['col-span-12'],
+  lg: ['col-span-12', '@xs:col-span-8', '@md:col-span-8', '@xl:col-span-8'],
+  md: ['col-span-12', '@xs:col-span-6', '@md:col-span-6', '@xl:col-span-6'],
+  sm: ['col-span-6', '@xs:col-span-6', '@md:col-span-4', '@xl:col-span-4'],
+  xl: ['col-span-12', '@xs:col-span-8', '@md:col-span-9', '@xl:col-span-10'],
+  xs: ['col-span-6', '@xs:col-span-4', '@md:col-span-3', '@xl:col-span-2'],
+};
+
+export const height = {
+  1: ['row-span-1'],
+  2: ['row-span-2'],
+  3: ['row-span-3'],
+  4: ['row-span-4'],
+  5: ['row-span-5'],
+  6: ['row-span-6'],
+};
+
+export const themeColors = {
+  black: [],
+  blue: [],
+  coral: [],
+  cyan: [],
+  gray: [],
+  green: [],
+  lime: [],
+  neutral: [],
+  olive: [],
+  orange: [],
+  pink: [],
+  purple: [],
+  red: [],
+  teal: [],
+  unstyled: [],
+  white: [],
+  yellow: [],
+};
+
+const item = cva({
+  base: ['relative'],
+  compoundVariants: [
+    {
+      className: ['bg-gray-300/20', 'black:bg-black/20'],
+      priority: 'low',
+      themeColor: 'black',
+    },
+    {
+      className: ['bg-gray-300/50', 'black:bg-black/50'],
+      priority: 'medium',
+      themeColor: 'black',
+    },
+    {
+      className: ['bg-gray-300/90', 'black:bg-black/90'],
+      priority: 'high',
+      themeColor: 'black',
+    },
+    {
+      className: ['bg-blue-300/20', 'black:bg-blue-500/20'],
+      priority: 'low',
+      themeColor: 'blue',
+    },
+    {
+      className: ['bg-blue-300/50', 'black:bg-blue-500/50'],
+      priority: 'medium',
+      themeColor: 'blue',
+    },
+    {
+      className: ['bg-blue-300/90', 'black:bg-blue-500/80'],
+      priority: 'high',
+      themeColor: 'blue',
+    },
+    {
+      className: ['bg-coral-300/20', 'black:bg-coral-500/20'],
+      priority: 'low',
+      themeColor: 'coral',
+    },
+    {
+      className: ['bg-coral-300/50', 'black:bg-coral-500/50'],
+      priority: 'medium',
+      themeColor: 'coral',
+    },
+    {
+      className: ['bg-coral-300/90', 'black:bg-coral-500/80'],
+      priority: 'high',
+      themeColor: 'coral',
+    },
+    {
+      className: ['bg-cyan-300/20', 'black:bg-cyan-500/20'],
+      priority: 'low',
+      themeColor: 'cyan',
+    },
+    {
+      className: ['bg-cyan-300/50', 'black:bg-cyan-500/50'],
+      priority: 'medium',
+      themeColor: 'cyan',
+    },
+    {
+      className: ['bg-cyan-300/90', 'black:bg-cyan-500/80'],
+      priority: 'high',
+      themeColor: 'cyan',
+    },
+    {
+      className: ['bg-green-300/20', 'black:bg-green-500/20'],
+      priority: 'low',
+      themeColor: 'green',
+    },
+    {
+      className: ['bg-green-300/50', 'black:bg-green-500/50'],
+      priority: 'medium',
+      themeColor: 'green',
+    },
+    {
+      className: ['bg-green-300/90', 'black:bg-green-500/80'],
+      priority: 'high',
+      themeColor: 'green',
+    },
+    {
+      className: ['bg-lime-300/20', 'black:bg-lime-500/20'],
+      priority: 'low',
+      themeColor: 'lime',
+    },
+    {
+      className: ['bg-lime-300/50', 'black:bg-lime-500/50'],
+      priority: 'medium',
+      themeColor: 'lime',
+    },
+    {
+      className: ['bg-lime-300/90', 'black:bg-lime-500/80'],
+      priority: 'high',
+      themeColor: 'lime',
+    },
+    {
+      className: ['bg-gray-100/40', 'black:bg-gray-500/5'],
+      priority: 'low',
+      themeColor: 'neutral',
+    },
+    {
+      className: ['bg-gray-200/30', 'black:bg-gray-500/20'],
+      priority: 'medium',
+      themeColor: 'neutral',
+    },
+    {
+      className: ['bg-gray-300/70', 'black:bg-gray-500/50'],
+      priority: 'high',
+      themeColor: 'neutral',
+    },
+    {
+      className: ['bg-olive-300/20', 'black:bg-olive-500/20'],
+      priority: 'low',
+      themeColor: 'olive',
+    },
+    {
+      className: ['bg-olive-300/50', 'black:bg-olive-500/50'],
+      priority: 'medium',
+      themeColor: 'olive',
+    },
+    {
+      className: ['bg-olive-300/90', 'black:bg-olive-500/80'],
+      priority: 'high',
+      themeColor: 'olive',
+    },
+    {
+      className: ['bg-orange-300/20', 'black:bg-orange-500/20'],
+      priority: 'low',
+      themeColor: 'orange',
+    },
+    {
+      className: ['bg-orange-300/50', 'black:bg-orange-500/50'],
+      priority: 'medium',
+      themeColor: 'orange',
+    },
+    {
+      className: ['bg-orange-300/90', 'black:bg-orange-500/80'],
+      priority: 'high',
+      themeColor: 'orange',
+    },
+    {
+      className: ['bg-pink-300/20', 'black:bg-pink-500/20'],
+      priority: 'low',
+      themeColor: 'pink',
+    },
+    {
+      className: ['bg-pink-300/50', 'black:bg-pink-500/50'],
+      priority: 'medium',
+      themeColor: 'pink',
+    },
+    {
+      className: ['bg-pink-300/90', 'black:bg-pink-500/80'],
+      priority: 'high',
+      themeColor: 'pink',
+    },
+    {
+      className: ['bg-purple-300/20', 'black:bg-purple-500/20'],
+      priority: 'low',
+      themeColor: 'purple',
+    },
+    {
+      className: ['bg-purple-300/50', 'black:bg-purple-500/50'],
+      priority: 'medium',
+      themeColor: 'purple',
+    },
+    {
+      className: ['bg-purple-300/90', 'black:bg-purple-500/80'],
+      priority: 'high',
+      themeColor: 'purple',
+    },
+    {
+      className: ['bg-red-300/20', 'black:bg-red-500/20'],
+      priority: 'low',
+      themeColor: 'red',
+    },
+    {
+      className: ['bg-red-300/50', 'black:bg-red-500/50'],
+      priority: 'medium',
+      themeColor: 'red',
+    },
+    {
+      className: ['bg-red-300/90', 'black:bg-red-500/80'],
+      priority: 'high',
+      themeColor: 'red',
+    },
+    {
+      className: ['bg-teal-300/20', 'black:bg-teal-500/20'],
+      priority: 'low',
+      themeColor: 'teal',
+    },
+    {
+      className: ['bg-teal-300/50', 'black:bg-teal-500/50'],
+      priority: 'medium',
+      themeColor: 'teal',
+    },
+    {
+      className: ['bg-teal-300/90', 'black:bg-teal-500/80'],
+      priority: 'high',
+      themeColor: 'teal',
+    },
+    {
+      className: ['bg-yellow-300/20', 'black:bg-yellow-500/20'],
+      priority: 'low',
+      themeColor: 'yellow',
+    },
+    {
+      className: ['bg-yellow-300/50', 'black:bg-yellow-500/50'],
+      priority: 'medium',
+      themeColor: 'yellow',
+    },
+    {
+      className: ['bg-yellow-300/90', 'black:bg-yellow-500/80'],
+      priority: 'high',
+      themeColor: 'yellow',
+    },
+    {
+      className: ['bg-white/20', 'black:bg-white/20'],
+      priority: 'low',
+      themeColor: 'white',
+    },
+    {
+      className: ['bg-white/50', 'black:bg-white/50', 'black:text-black'],
+      priority: 'medium',
+      themeColor: 'white',
+    },
+    {
+      className: ['bg-white/90', 'black:bg-white/80', 'black:text-black'],
+      priority: 'high',
+      themeColor: 'white',
+    },
+  ],
+  defaultVariants: {
+    height: 1,
+    padding: 'default',
+    priority: 'medium',
+    themeColor: 'unstyled',
+    variant: 'primary',
+    width: 'full',
+  },
+  variants: {
+    height: height,
+    padding: paddingValues,
+    priority: priorities,
+    themeColor: themeColors,
+    variant: {
+      primary: [],
+      reset: ['bg-transparent', 'rounded-none'],
+      spacer: ['hidden'],
+      unstyled: [],
+    },
+    width: width,
+  },
+});
+
+export interface ItemProps extends ComponentProps<'div'>, VariantProps<typeof item> {
+  as?: ElementType;
+  link?: string;
+}
+
+export const Item = ({
+  as: Component = 'div',
+  children,
+  className,
+  height,
+  link,
+  padding,
+  priority,
+  themeColor,
+  variant,
+  width,
+  ...props
+}: ItemProps) => {
+  return (
+    <Component
+      className={item({
+        className,
+        height,
+        padding,
+        priority,
+        themeColor,
+        variant,
+        width,
+      })}
+      {...props}
+    >
+      {link ? <Link to={link}>{children}</Link> : children}
+    </Component>
+  );
+};