@rjsf/daisyui 6.0.0-beta.2

package/src/DaisyUIFrameProvider.tsx

@@ -0,0 +1,107 @@
+/**
+ * __createDaisyUIFrameProvider is used to ensure that DaisyUI styles
+ * can be rendered within an iframe without affecting the parent page.
+ * Required for using DaisyUI in the playground.
+ *
+ * We have to define DaisyUIFrameProvider in this library, as opposed to the playground,
+ * to ensure consistent styling and proper theme management across frames.
+ *
+ * This provider:
+ * - Injects Tailwind CSS and DaisyUI stylesheets into the iframe
+ * - Configures Tailwind with DaisyUI themes
+ * - Manages theme persistence through localStorage
+ * - Wraps content in a themed container
+ *
+ * NOTE: This is an internal component only used by @rjsf/playground (no
+ * backwards compatibility guarantees!)
+ */
+
+import { useEffect, ReactNode } from 'react';
+
+interface DaisyUIFrameProviderProps {
+  children: ReactNode;
+  subtheme?: { dataTheme?: string } | null;
+}
+
+/** This component has a useEffect with a cleanup function to remove the tailwind stylesheets loads upon unmount so
+ * that the styles are removed when the theme in the playground is switched to something else
+ *
+ * @param props - The component props
+ */
+function DaisyUIFrameComponent(props: DaisyUIFrameProviderProps & { document?: Document }) {
+  const { children, subtheme = {}, document } = props;
+  const theme = (() => {
+    try {
+      if (subtheme?.dataTheme) {
+        localStorage.setItem('daisyui-theme', subtheme.dataTheme);
+        return subtheme.dataTheme;
+      }
+      return localStorage.getItem('daisyui-theme') || 'cupcake';
+    } catch {
+      return 'cupcake';
+    }
+  })();
+
+  useEffect(() => {
+    if (document) {
+      // Configure Tailwind first to ensure config is available before script loads
+      const configScript = document.createElement('script');
+      configScript.textContent = `
+        window.tailwind = window.tailwind || {};
+        window.tailwind.config = {
+          daisyui: {
+            themes: true,
+          },
+          future: {
+            disableProductionWarning: true
+          }
+        }
+      `;
+      document.head.appendChild(configScript);
+
+      // Add Tailwind
+      const tailwindScript = document.createElement('script');
+      tailwindScript.src = 'https://unpkg.com/@tailwindcss/browser@4.1.3';
+      document.head.appendChild(tailwindScript);
+
+      // Add DaisyUI CSS
+      const daisyLink = document.createElement('link');
+      daisyLink.rel = 'stylesheet';
+      daisyLink.href = 'https://cdn.jsdelivr.net/npm/daisyui@5.0.20';
+      document.head.appendChild(daisyLink);
+
+      // Add all themes
+      const daisyLinkAllThemes = document.createElement('link');
+      daisyLinkAllThemes.rel = 'stylesheet';
+      daisyLinkAllThemes.href = 'https://cdn.jsdelivr.net/npm/daisyui@5.0.20/themes.css';
+      document.head.appendChild(daisyLinkAllThemes);
+      return () => {
+        configScript.remove();
+        tailwindScript.remove();
+        daisyLink.remove();
+        daisyLinkAllThemes.remove();
+      };
+    }
+    return undefined;
+  }, [document]);
+
+  return (
+    <div data-theme={theme} className='daisy-ui-theme'>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Creates a DaisyUI frame provider component that can be used within an iframe
+ * to properly render DaisyUI styles without affecting the parent document.
+ *
+ * @param props - The component props
+ * @returns A component that sets up DaisyUI within an iframe context
+ */
+export const __createDaisyUIFrameProvider = (props: DaisyUIFrameProviderProps) => {
+  return function DaisyUIFrame({ document }: { document?: Document }) {
+    // Get theme from localStorage or use default
+    return <DaisyUIFrameComponent document={document} {...props} />;
+  };
+};

package/src/daisyForm/DaisyForm.tsx

@@ -0,0 +1,20 @@
+import { withTheme } from '@rjsf/core';
+import { RJSFSchema, StrictRJSFSchema, FormContextType } from '@rjsf/utils';
+
+import { generateTheme } from '../theme/Theme';
+
+/**
+ * Generate a form with the DaisyUI theme
+ */
+export function generateForm<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>() {
+  return withTheme(generateTheme<T, S, F>());
+}
+
+/**
+ * Form component with DaisyUI theme
+ */
+const Form = generateForm();
+
+export { Form, generateTheme };
+
+export default Form;

package/src/daisyForm/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DaisyForm';
+export * from './DaisyForm';

package/src/index.ts

@@ -0,0 +1,13 @@
+import { withTheme } from '@rjsf/core';
+
+import Theme, { ThemeProvider, useTheme } from './theme';
+
+export { default as Form } from './DaisyUIForm';
+export { __createDaisyUIFrameProvider } from './DaisyUIFrameProvider';
+export { default as GridTemplate } from './templates/GridTemplate/GridTemplate';
+export { default as Templates } from './templates/Templates';
+export { default as Theme } from './theme';
+export { default as Widgets } from './widgets/Widgets';
+export { ThemeProvider, useTheme };
+
+export default withTheme(Theme);

package/src/styles.css

@@ -0,0 +1,9 @@
+@import "tailwindcss/preflight";
+@import "tailwindcss/utilities";
+
+@layer base {
+  :root {
+    --color-primary: 255 115 179;
+    --color-secondary: 111 114 185;
+  }
+} 

package/src/templates/ArrayFieldDescriptionTemplate/ArrayFieldDescriptionTemplate.tsx

@@ -0,0 +1,19 @@
+import { FormContextType, StrictRJSFSchema, RJSFSchema, ArrayFieldDescriptionProps } from '@rjsf/utils';
+
+/** The `ArrayFieldDescriptionTemplate` component renders the description for an array field
+ * with DaisyUI styling, displaying it as a small text with accent color.
+ *
+ * @param props - The `ArrayFieldDescriptionProps` for the component
+ */
+export default function ArrayFieldDescriptionTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldDescriptionProps<T, S, F>) {
+  const { description } = props;
+  return (
+    <div>
+      <div className='text-sm text-accent'>{description}</div>
+    </div>
+  );
+}

package/src/templates/ArrayFieldDescriptionTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldDescriptionTemplate';
+export * from './ArrayFieldDescriptionTemplate';

package/src/templates/ArrayFieldItemButtonsTemplate/ArrayFieldItemButtonsTemplate.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  ArrayFieldItemButtonsTemplateType,
+  buttonId,
+} from '@rjsf/utils';
+
+/** The `ArrayFieldItemButtonsTemplate` component renders the action buttons for an array field item
+ * using DaisyUI's join component when multiple buttons are present.
+ */
+export default function ArrayFieldItemButtonsTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldItemButtonsTemplateType<T, S, F>) {
+  const {
+    disabled,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    idSchema,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+    uiSchema,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+  const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
+  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+
+  const renderMany = [hasMoveUp || hasMoveDown, hasCopy, hasRemove].filter(Boolean).length > 1;
+  const btnClass = renderMany ? 'join-item btn btn-sm px-2' : 'btn btn-sm px-2 rounded-sm';
+  const removeBtnClass = renderMany ? 'join-item btn btn-sm btn-error px-2' : 'btn btn-sm btn-error px-2 rounded-sm';
+
+  const buttons = (
+    <>
+      {(hasMoveUp || hasMoveDown) && (
+        <>
+          <MoveUpButton
+            id={buttonId<T>(idSchema, 'moveUp')}
+            className={`rjsf-array-item-move-up ${btnClass}`}
+            disabled={disabled || readonly || !hasMoveUp}
+            onClick={onArrowUpClick}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+          <MoveDownButton
+            id={buttonId<T>(idSchema, 'moveDown')}
+            className={`rjsf-array-item-move-down ${btnClass}`}
+            disabled={disabled || readonly || !hasMoveDown}
+            onClick={onArrowDownClick}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        </>
+      )}
+      {hasCopy && (
+        <CopyButton
+          id={buttonId<T>(idSchema, 'copy')}
+          className={`rjsf-array-item-copy ${btnClass}`}
+          disabled={disabled || readonly}
+          onClick={onCopyClick}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {hasRemove && (
+        <RemoveButton
+          id={buttonId<T>(idSchema, 'remove')}
+          className={`rjsf-array-item-remove ${removeBtnClass}`}
+          disabled={disabled || readonly}
+          onClick={onRemoveClick}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+    </>
+  );
+
+  return renderMany ? <div className='join'>{buttons}</div> : buttons;
+}

package/src/templates/ArrayFieldItemButtonsTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldItemButtonsTemplate';
+export * from './ArrayFieldItemButtonsTemplate';

package/src/templates/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -0,0 +1,55 @@
+import {
+  ArrayFieldItemTemplateType,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+
+/** The `ArrayFieldItemTemplate` component is the template used to render an item of an array.
+ *
+ * This DaisyUI implementation:
+ * - Uses the fieldset component for proper form grouping
+ * - Maintains connected appearance for multiple items
+ * - Positions items with z-index to create a stacked effect
+ * - Places action buttons in an easily accessible location
+ *
+ * @param props - The `ArrayFieldItemTemplateType` props for the component with additional properties:
+ * @param props.index - The position of this item in the array (optional)
+ * @param props.totalItems - The total number of items in the array (optional)
+ */
+export default function ArrayFieldItemTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldItemTemplateType<T, S, F>) {
+  const { children, buttonsProps, hasToolbar, registry, uiSchema, index, totalItems } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>(
+    'ArrayFieldItemButtonsTemplate',
+    registry,
+    uiOptions,
+  );
+
+  // Different styling for first, middle, and last items to create connected feel
+  const isFirstItem = index === 0;
+  const isLastItem = index === totalItems - 1;
+  const borderRadius = isFirstItem ? 'rounded-t-lg' : isLastItem ? 'rounded-b-lg' : '';
+  const marginBottom = isLastItem ? '' : 'mb-[-1px]';
+  const zIndex = index === undefined ? '' : 'z-' + (10 - Math.min(index, 9));
+
+  return (
+    <fieldset className={`fieldset bg-base-100 border border-base-300 p-4 ${borderRadius} ${marginBottom} ${zIndex}`}>
+      {/* Main content area */}
+      {children}
+
+      {/* Action buttons */}
+      {hasToolbar && (
+        <div className='flex justify-end mt-2'>
+          <ArrayFieldItemButtonsTemplate {...buttonsProps} />
+        </div>
+      )}
+    </fieldset>
+  );
+}

package/src/templates/ArrayFieldItemTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldItemTemplate';
+export * from './ArrayFieldItemTemplate';

package/src/templates/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import {
+  ArrayFieldTemplateProps,
+  getTemplate,
+  getUiOptions,
+  Registry,
+  RJSFSchema,
+  FormContextType,
+  TranslatableString,
+  buttonId,
+} from '@rjsf/utils';
+
+/** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+ *
+ * This DaisyUI implementation:
+ * - Renders the entire array in a rounded container with base-200 background
+ * - Uses custom ArrayFieldTitleTemplate and ArrayFieldDescriptionTemplate
+ * - Displays an info alert when the array is empty
+ * - Renders each array item using ArrayFieldItemTemplate with additional props
+ * - Positions the add button at the bottom right using flexbox
+ * - Uses DaisyUI's button styling for the add button
+ * - Maintains proper spacing with margin and padding utilities
+ *
+ * @param props - The `ArrayFieldTemplateProps` for the component
+ */
+export default function ArrayFieldTemplate<T = any, S extends RJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: ArrayFieldTemplateProps<T, S, F>,
+) {
+  const {
+    canAdd,
+    className,
+    disabled,
+    idSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+    uiSchema,
+  } = props;
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+    'ArrayFieldDescriptionTemplate',
+    registry as Registry<T, S, F>,
+    uiOptions,
+  );
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry as Registry<T, S, F>,
+    uiOptions,
+  );
+  const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry as Registry<T, S, F>,
+    uiOptions,
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+
+  /** Handle the add button click
+   *
+   * @param e - The click event
+   */
+  const handleAddClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onAddClick(e);
+    },
+    [onAddClick],
+  );
+
+  return (
+    <div className={`array-field-template ${className}`}>
+      <ArrayFieldTitleTemplate
+        idSchema={idSchema}
+        title={uiOptions.title || title}
+        schema={schema}
+        uiSchema={uiSchema}
+        required={required}
+        registry={registry}
+      />
+      <ArrayFieldDescriptionTemplate
+        idSchema={idSchema}
+        description={uiOptions.description || schema.description}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
+      <div className='flex flex-col gap-4'>
+        <div className='rjsf-array-item-list'>
+          {items &&
+            items.map(({ key, ...itemProps }, index) => (
+              <ArrayFieldItemTemplate key={key} {...itemProps} index={index} totalItems={items.length} />
+            ))}
+          {items && items.length === 0 && canAdd && (
+            <div className='text-center italic text-base-content/70'>{TranslatableString.EmptyArray}</div>
+          )}
+        </div>
+        {canAdd && (
+          <div className='flex justify-end'>
+            <AddButton
+              id={buttonId<T>(idSchema, 'add')}
+              className='rjsf-array-item-add btn btn-primary btn-sm'
+              onClick={handleAddClick}
+              disabled={disabled || readonly}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/templates/ArrayFieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldTemplate';
+export * from './ArrayFieldTemplate';

package/src/templates/ArrayFieldTitleTemplate/ArrayFieldTitleTemplate.tsx

@@ -0,0 +1,15 @@
+import { ArrayFieldTitleProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+
+/** The `ArrayFieldTitleTemplate` component renders the title for an array field
+ * using DaisyUI styling with large bold text.
+ *
+ * @param props - The `ArrayFieldTitleProps` for the component
+ */
+export default function ArrayFieldTitleTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ArrayFieldTitleProps<T, S, F>) {
+  const { title } = props;
+  return <h3 className='text-2xl font-bold'>{title}</h3>;
+}

package/src/templates/ArrayFieldTitleTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldTitleTemplate';
+export * from './ArrayFieldTitleTemplate';

package/src/templates/BaseInputTemplate/BaseInputTemplate.tsx

@@ -0,0 +1,104 @@
+import { ChangeEvent, FocusEvent, useCallback } from 'react';
+import {
+  WidgetProps,
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+  getInputProps,
+  ariaDescribedByIds,
+  examplesId,
+} from '@rjsf/utils';
+
+/** The `BaseInputTemplate` component is a template for rendering basic input elements
+ * with DaisyUI styling. It's used as the foundation for various input types in forms.
+ *
+ * Features:
+ * - Wraps input in DaisyUI's form-control for proper spacing
+ * - Uses DaisyUI's input and input-bordered classes for styling
+ * - Includes a hidden label for accessibility
+ * - Handles common input properties like disabled and readonly states
+ * - Processes input props based on schema type and options
+ * - Supports schema examples with datalist
+ * - Handles onChange, onBlur, and onFocus events
+ *
+ * @param props - The `WidgetProps` for the component
+ */
+export default function BaseInputTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    value,
+    required,
+    disabled,
+    readonly,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    onChangeOverride,
+    options,
+    schema,
+    type,
+    label,
+    placeholder,
+  } = props;
+
+  const inputProps = getInputProps<T, S, F>(schema, type, options);
+
+  // Extract step, min, max, accept from inputProps
+  const { step, min, max, accept, ...rest } = inputProps;
+  const htmlInputProps = { step, min, max, accept, ...(schema.examples ? { list: examplesId<T>(id) } : undefined) };
+
+  const _onChange = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(value === '' ? options.emptyValue : value),
+    [onChange, options],
+  );
+
+  const _onBlur = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => onBlur && onBlur(id, target.value),
+    [onBlur, id],
+  );
+
+  const _onFocus = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => onFocus && onFocus(id, target.value),
+    [onFocus, id],
+  );
+
+  return (
+    <>
+      <div className='form-control'>
+        <label htmlFor={id} className='label hidden' style={{ display: 'none' }}>
+          <span className='label-text'>{label}</span>
+        </label>
+        <input
+          id={id}
+          name={id}
+          value={value || value === 0 ? value : ''}
+          placeholder={placeholder}
+          required={required}
+          disabled={disabled || readonly}
+          autoFocus={autofocus}
+          className='input input-bordered'
+          {...rest}
+          {...htmlInputProps}
+          onChange={onChangeOverride || _onChange}
+          onBlur={_onBlur}
+          onFocus={_onFocus}
+          aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        />
+      </div>
+      {Array.isArray(schema.examples) && (
+        <datalist id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
+            .map((example: any) => {
+              return <option key={example} value={example} />;
+            })}
+        </datalist>
+      )}
+    </>
+  );
+}

package/src/templates/BaseInputTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BaseInputTemplate';
+export * from './BaseInputTemplate';

package/src/templates/ButtonTemplates/AddButton.tsx

@@ -0,0 +1,38 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faArrowDown, faArrowUp, faCopy, faTrash, faPlus } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+import DaisyUIButton from './DaisyUIButton';
+
+library.add(faPlus, faCopy, faArrowDown, faArrowUp, faTrash);
+
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ *
+ * @param props - The props for the component
+ */
+export default function AddButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  className,
+  onClick,
+  disabled,
+  registry,
+  ...otherProps
+}: IconButtonProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <div className='row'>
+      <p className={`col-xs-3 col-xs-offset-9 text-right ${className}`}>
+        <DaisyUIButton
+          {...otherProps}
+          iconType='info'
+          icon={faPlus as IconDefinition}
+          className='btn-add col-xs-12 btn-primary btn-primary-content'
+          title={translateString(TranslatableString.AddButton)}
+          onClick={onClick}
+          disabled={disabled}
+          registry={registry}
+        />
+      </p>
+    </div>
+  );
+}

package/src/templates/ButtonTemplates/DaisyUIButton.tsx

@@ -0,0 +1,31 @@
+import { memo } from 'react';
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+/** Interface for props specific to DaisyUIButton, extending IconButtonProps but with stricter icon typing */
+interface DaisyUIButtonProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>
+  extends Omit<IconButtonProps<T, S, F>, 'icon'> {
+  /** The FontAwesome icon to display in the button */
+  icon: IconDefinition;
+}
+
+/** The `DaisyUIButton` component renders a button with an icon using DaisyUI styling.
+ * It's used as the base for various button components like add, remove, copy, move up/down.
+ *
+ * @param props - The component props
+ */
+function DaisyUIButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: DaisyUIButtonProps<T, S, F>,
+) {
+  const { icon, iconType, uiSchema, registry, className, ...otherProps } = props;
+  return (
+    <button type='button' className={className} aria-label={props.title!} {...otherProps}>
+      <FontAwesomeIcon icon={icon} className='h-5 w-5' />
+    </button>
+  );
+}
+
+DaisyUIButton.displayName = 'DaisyUIButton';
+
+export default memo(DaisyUIButton) as typeof DaisyUIButton;