FAB

import { FAB } from "@nexera-ui/react";
import { LuPlus } from "react-icons/lu";

<FAB aria-label="Create request" icon={<LuPlus />} variant="regular" />;

import { FAB } from "@nexera-ui/react";
import { LuPlus } from "react-icons/lu";

export function Extended() {
  return (
    <FAB variant="extended" icon={<LuPlus />}>
      Create
    </FAB>
  );
}

import { FAB } from "@nexera-ui/react";
import { LuPlus } from "react-icons/lu";

export function DisabledAndLoading() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <FAB aria-label="Create request (disabled)" icon={<LuPlus />} isDisabled />
      <FAB aria-label="Create request (loading)" icon={<LuPlus />} variant="regular" isLoading />
      <FAB variant="extended" icon={<LuPlus />} isLoading>
        Create
      </FAB>
    </div>
  );
}

import { FAB } from "@nexera-ui/react";
import { LuPlus } from "react-icons/lu";

export function InScreen() {
  return (
    <div className="relative h-80 max-w-xs overflow-hidden rounded-lg border border-default bg-page">
      <div
        role="region"
        aria-label="Leave requests"
        // A scrollable region needs a keyboard route (axe `scrollable-region-focusable`); it is named by `aria-label`.
        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
        tabIndex={0}
        className="h-full overflow-y-auto p-4 pb-24 focus-visible:focus-ring focus-visible:-outline-offset-2"
      >
        <ul className="m-0 flex list-none flex-col gap-3 p-0">
          {Array.from({ length: 8 }, (_, index) => (
            <li
              key={index}
              className="rounded-md border border-default bg-surface p-3 text-body-default text-primary"
            >
              Leave request {index + 1}
            </li>
          ))}
        </ul>
      </div>
      <FAB variant="extended" icon={<LuPlus />} className="absolute bottom-4 end-4">
        Create request
      </FAB>
    </div>
  );
}

import { FAB } from "@nexera-ui/react";
import { LuPlus } from "react-icons/lu";

export function LongLabel() {
  return (
    <div className="max-w-xs">
      <FAB variant="extended" icon={<LuPlus />}>
        Neuen Urlaubsantrag für das gesamte Team anlegen
      </FAB>
    </div>
  );
}

import { FAB } from "@nexera-ui/react";
import { LuPlus } from "react-icons/lu";

export function RightToLeft() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <FAB aria-label="إنشاء طلب" icon={<LuPlus />} />
      <FAB variant="extended" icon={<LuPlus />}>
        إنشاء طلب
      </FAB>
    </div>
  );
}

import { IconSlot, fabStyles } from "@nexera-ui/react";
import { LuLoaderCircle, LuPlus } from "react-icons/lu";

const stateAttributes = {
  default: {},
  hover: { "data-hovered": true },
  pressed: { "data-pressed": true },
  focused: { "data-focus-visible": true },
  disabled: { "data-disabled": true, disabled: true },
  loading: { "data-pending": true, "aria-disabled": true },
} as const;

export function States() {
  return (
    <div className="flex flex-wrap items-center gap-6 p-4">
      {(Object.keys(stateAttributes) as (keyof typeof stateAttributes)[]).map((state) => (
        <button
          key={state}
          type="button"
          aria-label={`Create request (${state})`}
          className={fabStyles({ variant: "regular" })}
          {...stateAttributes[state]}
        >
          <IconSlot className={fabIconStyles({ variant: "regular" })}>
            {state === "loading" ? (
              <LuLoaderCircle className="size-full motion-safe:animate-nx-spin" />
            ) : (
              <LuPlus />
            )}
          </IconSlot>
        </button>
      ))}
    </div>
  );
}