sdaia-ui 1.0.1

package/src/components/FiltrationList/FiltrationList.types.ts

@@ -0,0 +1,191 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/* ── Item configs used across section types ──────────────────── */
+
+/** A single row in a checkbox / select / radio section. */
+export interface FiltrationRowItem {
+  /** Unique key for this item. */
+  id: string;
+  /** Display label. */
+  label: string;
+  /** Whether the item is currently selected / checked. */
+  selected?: boolean;
+  /** Prevents interaction and dims the row. */
+  disabled?: boolean;
+}
+
+/** A single chip in a chip section. */
+export interface FiltrationChipItem {
+  /** Unique key. */
+  id: string;
+  /** Display label. */
+  label: string;
+  /** Called when the chip's trailing close icon is activated. */
+  onRemove?: () => void;
+}
+
+/* ── Per-section config shapes ───────────────────────────────── */
+
+export interface FiltrationSearchSectionConfig {
+  type: 'search';
+  /** Section heading label. */
+  label: string;
+  /** Input placeholder. */
+  placeholder?: string;
+  /** Controlled value. */
+  value?: string;
+  /** Called on every keystroke. */
+  onChange?: (value: string) => void;
+}
+
+export interface FiltrationCheckboxSectionConfig {
+  type: 'checkbox';
+  label: string;
+  items: FiltrationRowItem[];
+  /** Called when a row is toggled. */
+  onItemChange?: (id: string, selected: boolean) => void;
+  /** When provided, a "Show N more" button is rendered below the list. */
+  showMoreLabel?: string;
+  /** Called when the show-more button is clicked. */
+  onShowMore?: () => void;
+}
+
+export interface FiltrationSelectSectionConfig {
+  type: 'select';
+  label: string;
+  items: FiltrationRowItem[];
+  /** Called when a row is activated (toggling selected state). */
+  onItemChange?: (id: string, selected: boolean) => void;
+}
+
+export interface FiltrationRadioSectionConfig {
+  type: 'radio';
+  label: string;
+  /** HTML name attribute — groups all radios for keyboard / form semantics. */
+  name?: string;
+  items: FiltrationRowItem[];
+  /** id of the currently selected item. */
+  value?: string;
+  /**
+   * Called with the id of the newly-selected item.
+   * Receives `undefined` when the currently-selected radio is clicked again
+   * (deselect / clear the radio group).
+   */
+  onChange?: (id: string | undefined) => void;
+}
+
+export interface FiltrationChipSectionConfig {
+  type: 'chip';
+  label: string;
+  items: FiltrationChipItem[];
+}
+
+export interface FiltrationRangeSliderSectionConfig {
+  type: 'range';
+  label: string;
+  /** Absolute minimum value of the slider. */
+  min: number;
+  /** Absolute maximum value of the slider. */
+  max: number;
+  /** Current [low, high] handles. */
+  value: [number, number];
+  /** Snap step. @default 1 */
+  step?: number;
+  /** Called on every drag move with updated [low, high]. */
+  onChange?: (value: [number, number]) => void;
+  /** Format a numeric value for the end labels. @default String(v) */
+  formatValue?: (value: number) => string;
+}
+
+export interface FiltrationAmountSectionConfig {
+  type: 'amount';
+  label: string;
+  /** Label for the left (min) input. @default "Min" */
+  minLabel?: string;
+  /** Label for the right (max) input. @default "Max" */
+  maxLabel?: string;
+  /** Controlled value for the min input. */
+  minValue?: string;
+  /** Controlled value for the max input. */
+  maxValue?: string;
+  /** Currency code shown in the dropdown suffix. @default "SAR" */
+  currency?: string;
+  onMinChange?: (value: string) => void;
+  onMaxChange?: (value: string) => void;
+}
+
+export interface FiltrationDateSectionConfig {
+  type: 'date';
+  label: string;
+  /** Controlled value (ISO date string or display string). */
+  value?: string;
+  onChange?: (value: string) => void;
+  /** Input placeholder. @default "DD/MM/YY" */
+  placeholder?: string;
+}
+
+export interface FiltrationCustomSectionConfig {
+  type: 'custom';
+  label: string;
+  /** Any ReactNode rendered as the section body. */
+  children: ReactNode;
+}
+
+/** Discriminated union covering every possible filter section. */
+export type FiltrationSectionConfig =
+  | FiltrationSearchSectionConfig
+  | FiltrationCheckboxSectionConfig
+  | FiltrationSelectSectionConfig
+  | FiltrationRadioSectionConfig
+  | FiltrationChipSectionConfig
+  | FiltrationRangeSliderSectionConfig
+  | FiltrationAmountSectionConfig
+  | FiltrationDateSectionConfig
+  | FiltrationCustomSectionConfig;
+
+/* ── Root component props ────────────────────────────────────── */
+
+export interface FiltrationListProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Ordered list of filter sections to render inside the panel.
+   * Each section is described by a `type`-discriminated config object.
+   */
+  sections?: FiltrationSectionConfig[];
+
+  /**
+   * When `false`, the Apply / Clear footer is hidden.
+   * @default true
+   */
+  showActions?: boolean;
+
+  /**
+   * Label for the primary "Apply" button.
+   * @default "Apply Filters"
+   */
+  applyLabel?: string;
+
+  /**
+   * Number of active filters — appended to the apply button label as "(N)".
+   * Omit or pass `0` to show no count.
+   */
+  activeFilterCount?: number;
+
+  /**
+   * Label for the secondary "Clear" button.
+   * @default "Clear"
+   */
+  clearLabel?: string;
+
+  /** Called when the "Apply" button is pressed. */
+  onApply?: () => void;
+
+  /** Called when the "Clear" button is pressed. */
+  onClear?: () => void;
+
+  /**
+   * Enables RTL layout.
+   * Also responds automatically when a parent element carries `dir="rtl"`.
+   * @default false
+   */
+  rtl?: boolean;
+}

package/src/components/FiltrationList/FiltrationList.variants.ts

@@ -0,0 +1,283 @@
+/**
+ * FiltrationList.variants.ts
+ *
+ * All class-name constants mapped from Figma node 5273:79626 (Filtration List).
+ *
+ * Color sources (Section 0 mapping):
+ *   Background/background-white          → bg-white / dark:bg-[rgba(17,25,39,1)]
+ *   Border/border-neutral-primary        → border-[rgba(210,214,219,1)] / dark:border-[rgba(44,57,79,1)]
+ *   Border/border-neutral-secondary      → bg-[rgba(229,231,235,1)] / dark:bg-[rgba(44,57,79,1)]
+ *   Text/text-default                    → text-[rgba(22,22,22,1)] / dark:text-[rgba(229,231,235,1)]
+ *   Form/field-background-default        → bg-white / dark:bg-[rgba(17,25,39,1)]
+ *   Form/field-text-placeholder          → text-[rgba(108,115,127,1)]
+ *   Form/field-text-label                → text-[rgba(22,22,22,1)] / dark:text-[rgba(229,231,235,1)]
+ *   Background/background-primary-50     → bg-[rgba(243,252,246,1)] / dark:bg-[rgba(6,118,71,0.1)]
+ *   Background/background-primary        → bg-[rgba(27,131,84,1)]
+ *   Background/background-neutral-100   → bg-[rgba(243,244,246,1)] / dark:bg-[rgba(31,41,55,1)]
+ *   Text/text-primary-sa-flag            → text-[rgba(20,87,58,1)] / dark:text-[rgba(52,211,153,1)]
+ *   Text/text-primary-paragraph          → text-[rgba(56,66,80,1)] / dark:text-[rgba(156,163,175,1)]
+ *   Text/text-display                    → text-[rgba(31,42,55,1)] / dark:text-[rgba(229,231,235,1)]
+ *   Text/text-oncolor-primary            → text-white
+ *   Button/button-background-primary     → bg-[rgba(27,131,84,1)]
+ *   Button/button-background-neutral     → bg-[rgba(243,244,246,1)] / dark:bg-[rgba(31,41,55,1)]
+ *   Shadow/shadow-xl                     → shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),0px_8px_8px_-4px_rgba(16,24,40,0.03)]
+ */
+
+/* ── Panel root ─────────────────────────────────────────────── */
+
+/**
+ * Outer card wrapper for the full filtration panel.
+ * width=350px (Figma fixed desktop width); use w-full when embedding in a sidebar.
+ */
+export const PANEL_ROOT = [
+  'flex flex-col',
+  'gap-spacing-3xl',
+  'p-spacing-lg',
+  'w-full',
+  'rounded-[8px]',
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]',
+  'bg-white dark:bg-[rgba(17,25,39,1)]',
+  /* Figma shadow-xl */
+  'shadow-[0px_20px_24px_-4px_rgba(16,24,40,0.08),0px_8px_8px_-4px_rgba(16,24,40,0.03)]',
+].join(' ');
+
+/* ── Section wrapper (label + content) ─────────────────────── */
+
+/** Container for each section — label stacked above content. */
+export const SECTION_WRAPPER = 'flex flex-col gap-spacing-xl w-full shrink-0';
+
+/** Section heading label. Text sm/Semibold — Figma Text/text-default. */
+export const SECTION_LABEL = [
+  'text-text-sm font-[600]',
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+  'w-full shrink-0',
+].join(' ');
+
+/* ── Search section ─────────────────────────────────────────── */
+
+/** Input pill wrapper — field-background-default border-neutral-primary */
+export const SEARCH_INPUT_WRAP = [
+  'flex items-center gap-spacing-md',
+  'px-spacing-lg py-spacing-md',
+  'w-full rounded-[8px]',
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]',
+  'bg-white dark:bg-[rgba(17,25,39,1)]',
+  'focus-within:border-[rgba(27,131,84,1)] dark:focus-within:border-[rgba(27,131,84,1)]',
+  'motion-feedback',
+].join(' ');
+
+/** Native input inside the search pill. */
+export const SEARCH_INPUT = [
+  'flex-1 min-w-0 bg-transparent outline-none',
+  'text-text-md font-[400]',
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+  'placeholder:text-[rgba(108,115,127,1)]',
+].join(' ');
+
+/** Mic / trailing icon color inside search. */
+export const SEARCH_ICON_COLOR = 'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)] shrink-0 size-icon-md';
+
+/* ── Item list (checkbox / select / radio rows) ─────────────── */
+
+/** Gap between FiltrationItem rows inside a section. */
+export const ITEM_LIST = 'flex flex-col gap-spacing-lg w-full';
+
+/* ── "Show N more" toggle ────────────────────────────────────── */
+
+export const SHOW_MORE_BTN = [
+  'inline-flex items-center gap-spacing-xs',
+  'px-spacing-md py-spacing-md',
+  'rounded-[8px]',
+  'cursor-pointer select-none',
+  'text-text-xs font-[400]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,41,55,0.5)]',
+  'motion-feedback',
+].join(' ');
+
+/* ── Chip section ────────────────────────────────────────────── */
+
+/** Wrapping flex row for chip tags. */
+export const CHIP_WRAP = 'flex flex-wrap gap-spacing-md w-full';
+
+/** Individual chip pill. */
+export const CHIP_PILL = [
+  'inline-flex items-center gap-spacing-xs',
+  'px-spacing-lg py-spacing-xs',
+  'max-h-[24px] rounded-full',
+  'bg-[rgba(243,252,246,1)] dark:bg-[rgba(6,118,71,0.1)]',
+  'cursor-pointer select-none',
+  'motion-feedback',
+  'hover:bg-[rgba(220,248,234,1)] dark:hover:bg-[rgba(6,118,71,0.2)]',
+].join(' ');
+
+/** Chip label text. */
+export const CHIP_LABEL = [
+  'text-text-xs font-[500] whitespace-nowrap',
+  'text-[rgba(20,87,58,1)] dark:text-[rgba(52,211,153,1)]',
+].join(' ');
+
+/** Chip icon (alert-circle — leading and trailing). */
+export const CHIP_ICON = 'shrink-0 size-icon-sm text-[rgba(20,87,58,1)] dark:text-[rgba(52,211,153,1)]';
+
+/* ── Range slider section ────────────────────────────────────── */
+
+/** Row containing min label, track, max label. */
+export const RANGE_ROW = 'flex items-center gap-spacing-md w-full';
+
+/** Value label at each end of the range slider. */
+export const RANGE_LABEL = [
+  'shrink-0 text-text-xs font-[400] whitespace-nowrap',
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+].join(' ');
+
+/** Outer track container — positions the inputs and fill track. */
+export const RANGE_TRACK_WRAP = 'relative flex-1 h-[20px] min-w-0';
+
+/** Background track bar (neutral). */
+export const RANGE_TRACK_BG = [
+  'absolute top-1/2 -translate-y-1/2 left-0 right-0',
+  'h-[4px] rounded-[2px]',
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(55,65,81,1)]',
+].join(' ');
+
+/** Active fill between the two handles. */
+export const RANGE_TRACK_FILL = [
+  'absolute top-1/2 -translate-y-1/2',
+  'h-[4px] rounded-[2px]',
+  'bg-[rgba(27,131,84,1)]',
+].join(' ');
+
+/** Native range input — thumbs styled, track hidden. */
+export const RANGE_INPUT = [
+  'absolute top-0 left-0 w-full h-full',
+  'appearance-none bg-transparent pointer-events-none',
+  '[&::-webkit-slider-thumb]:appearance-none',
+  '[&::-webkit-slider-thumb]:pointer-events-auto',
+  '[&::-webkit-slider-thumb]:size-[16px]',
+  '[&::-webkit-slider-thumb]:rounded-full',
+  '[&::-webkit-slider-thumb]:bg-[rgba(27,131,84,1)]',
+  '[&::-webkit-slider-thumb]:cursor-pointer',
+  '[&::-webkit-slider-thumb]:shadow-[0px_1px_3px_0px_rgba(16,24,40,0.05),0px_1px_2px_0px_rgba(16,24,40,0.05)]',
+  '[&::-moz-range-thumb]:size-[16px]',
+  '[&::-moz-range-thumb]:rounded-full',
+  '[&::-moz-range-thumb]:border-none',
+  '[&::-moz-range-thumb]:bg-[rgba(27,131,84,1)]',
+  '[&::-moz-range-thumb]:pointer-events-auto',
+  '[&::-moz-range-thumb]:cursor-pointer',
+  '[&::-webkit-slider-runnable-track]:bg-transparent',
+  '[&::-moz-range-track]:bg-transparent',
+  'outline-none',
+].join(' ');
+
+/* ── Amount section (min/max currency inputs) ────────────────── */
+
+/** Two inputs side by side. */
+export const AMOUNT_ROW = 'flex gap-spacing-xl w-full';
+
+/** One label + input column. */
+export const AMOUNT_COL = 'flex flex-col gap-spacing-sm flex-1 min-w-0';
+
+/** Input field label (Min / Max). Text sm/Regular — field-text-label. */
+export const AMOUNT_FIELD_LABEL = [
+  'text-text-sm font-[400] whitespace-nowrap shrink-0',
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+].join(' ');
+
+/** Outer border wrapper for amount input. */
+export const AMOUNT_INPUT_WRAP = [
+  'flex items-center rounded-[8px] w-full overflow-hidden',
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]',
+  'bg-white dark:bg-[rgba(17,25,39,1)]',
+  'focus-within:border-[rgba(27,131,84,1)] dark:focus-within:border-[rgba(27,131,84,1)]',
+  'motion-feedback',
+].join(' ');
+
+/** Number field inside the amount input. */
+export const AMOUNT_FIELD = [
+  'flex-1 min-w-0 bg-transparent outline-none',
+  'ps-spacing-lg pe-spacing-sm py-spacing-md',
+  'text-text-md font-[400]',
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]',
+  'placeholder:text-[rgba(108,115,127,1)]',
+].join(' ');
+
+/** Vertical divider between amount field and currency dropdown. */
+export const AMOUNT_DIVIDER = 'w-px self-stretch bg-[rgba(229,231,235,1)] dark:bg-[rgba(44,57,79,1)]';
+
+/** Currency dropdown (SAR + arrow). */
+export const AMOUNT_CURRENCY_BTN = [
+  'flex items-center gap-spacing-xxs shrink-0',
+  'ps-spacing-sm pe-spacing-lg py-spacing-md',
+  'cursor-pointer select-none',
+  'text-text-md font-[400] whitespace-nowrap',
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]',
+].join(' ');
+
+/* ── Date section ────────────────────────────────────────────── */
+
+/** Date input pill (same style as search). */
+export const DATE_INPUT_WRAP = [
+  'flex items-center gap-spacing-md',
+  'px-spacing-lg py-spacing-md',
+  'w-full rounded-[8px]',
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]',
+  'bg-white dark:bg-[rgba(17,25,39,1)]',
+  'focus-within:border-[rgba(27,131,84,1)] dark:focus-within:border-[rgba(27,131,84,1)]',
+  'motion-feedback',
+].join(' ');
+
+export const DATE_INPUT = [
+  'flex-1 min-w-0 bg-transparent outline-none',
+  'text-text-md font-[400]',
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+  'placeholder:text-[rgba(108,115,127,1)]',
+].join(' ');
+
+export const DATE_ICON_COLOR = 'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)] shrink-0 size-icon-sm';
+
+/* ── Custom slot ─────────────────────────────────────────────── */
+
+/** Dashed purple placeholder border (Figma Instance Slot 1 style). */
+export const CUSTOM_SLOT = [
+  'w-full min-h-[40px]',
+  'flex items-center justify-center',
+  'border border-dashed border-[#9747ff]',
+  'bg-[rgba(151,71,255,0.05)]',
+  'rounded-[4px]',
+].join(' ');
+
+/* ── Actions footer ─────────────────────────────────────────── */
+
+/** Row holding both action buttons. */
+export const ACTIONS_ROW = 'flex gap-spacing-lg w-full';
+
+/** Primary "Apply" button. Button/button-background-primary-default. */
+export const APPLY_BTN = [
+  'flex-1 flex items-center justify-center',
+  'px-spacing-xl py-spacing-md',
+  'rounded-[8px]',
+  'bg-[rgba(27,131,84,1)]',
+  'cursor-pointer',
+  'text-text-md font-[500] whitespace-nowrap',
+  'text-white',
+  'hover:bg-[rgba(20,87,58,1)]',
+  'active:bg-[rgba(16,70,49,1)]',
+  'motion-feedback',
+  'focus-visible:outline-2 focus-visible:outline-[rgba(27,131,84,1)] focus-visible:outline-offset-2',
+].join(' ');
+
+/** Secondary "Clear" button. Button/button-background-neutral-default. */
+export const CLEAR_BTN = [
+  'flex-1 flex items-center justify-center',
+  'px-spacing-xl py-spacing-md',
+  'rounded-[8px]',
+  'bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,41,55,1)]',
+  'cursor-pointer',
+  'text-text-md font-[500] whitespace-nowrap',
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+  'hover:bg-[rgba(229,231,235,1)] dark:hover:bg-[rgba(55,65,81,1)]',
+  'active:bg-[rgba(210,214,219,1)] dark:active:bg-[rgba(75,85,99,1)]',
+  'motion-feedback',
+  'focus-visible:outline-2 focus-visible:outline-[rgba(108,115,127,1)] focus-visible:outline-offset-2',
+].join(' ');

package/src/components/FiltrationList/index.ts

@@ -0,0 +1,16 @@
+export { FiltrationList } from './FiltrationList';
+export type {
+  FiltrationListProps,
+  FiltrationSectionConfig,
+  FiltrationRowItem,
+  FiltrationChipItem,
+  FiltrationSearchSectionConfig,
+  FiltrationCheckboxSectionConfig,
+  FiltrationSelectSectionConfig,
+  FiltrationRadioSectionConfig,
+  FiltrationChipSectionConfig,
+  FiltrationRangeSliderSectionConfig,
+  FiltrationAmountSectionConfig,
+  FiltrationDateSectionConfig,
+  FiltrationCustomSectionConfig,
+} from './FiltrationList.types';

package/src/components/FloatingButton/FloatingButton.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { FloatingButtonProps } from './FloatingButton.types';
+import {
+  VARIANT_CLASSES,
+  SELECTED_CLASSES,
+  DISABLED_CLASSES,
+  SIZE_CLASSES,
+  ICON_ONLY_SIZE_CLASSES,
+  ICON_SIZE_CLASSES,
+  FOCUS_RING,
+} from './FloatingButton.variants';
+
+/* ── Component ────────────────────────────────────────────────── */
+export const FloatingButton = forwardRef<HTMLButtonElement, FloatingButtonProps>(
+  function FloatingButton(
+    {
+      variant = 'primary',
+      size = 'md',
+      disabled = false,
+      leadingIcon,
+      trailingIcon,
+      iconOnly = false,
+      selected = false,
+      as,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const Comp = as ?? 'button';
+    const isDisabled = disabled;
+
+    /* State priority: disabled > selected > default */
+    let variantClass: string;
+    if (isDisabled) {
+      variantClass = DISABLED_CLASSES[variant];
+    } else if (selected) {
+      variantClass = SELECTED_CLASSES[variant];
+    } else {
+      variantClass = VARIANT_CLASSES[variant];
+    }
+
+    /* Size classes: icon-only uses square padding */
+    const sizeClass = iconOnly ? ICON_ONLY_SIZE_CLASSES[size] : SIZE_CLASSES[size];
+    const iconSizeClass = ICON_SIZE_CLASSES[size];
+
+    return (
+      <Comp
+        ref={ref}
+        data-slot="floating-button"
+        data-anatomy="1"
+        disabled={isDisabled}
+        aria-pressed={selected ? true : undefined}
+        className={cn(
+          'inline-flex items-center justify-center font-[500] rounded-full motion-feedback cursor-pointer',
+          sizeClass,
+          variantClass,
+          !isDisabled && FOCUS_RING,
+          className,
+        )}
+        {...rest}
+      >
+        {leadingIcon ? (
+          <span
+            data-slot="leading-icon"
+            data-anatomy="3"
+            className={cn('inline-flex items-center justify-center flex-shrink-0', iconSizeClass)}
+          >
+            {leadingIcon}
+          </span>
+        ) : null}
+        {!iconOnly && <span data-anatomy="2">{children}</span>}
+        {trailingIcon && !iconOnly ? (
+          <span
+            data-slot="trailing-icon"
+            data-anatomy="4"
+            className={cn('inline-flex items-center justify-center flex-shrink-0', iconSizeClass)}
+          >
+            {trailingIcon}
+          </span>
+        ) : null}
+      </Comp>
+    );
+  },
+);

package/src/components/FloatingButton/FloatingButton.types.ts

@@ -0,0 +1,29 @@
+import type { ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
+
+/** Visual style of the floating button */
+export type FloatingButtonVariant = 'neutral' | 'primary' | 'secondary-solid';
+
+/** Size of the floating button */
+export type FloatingButtonSize = 'sm' | 'md' | 'lg';
+
+export interface FloatingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Layout direction for RTL support. */
+  dir?: 'ltr' | 'rtl';
+  /** Visual style of the button */
+  variant?: FloatingButtonVariant;
+  /** Size of the button */
+  size?: FloatingButtonSize;
+  /** Disables the button and prevents interaction */
+  disabled?: boolean;
+  /** Icon displayed before the button label (direction-aware) */
+  leadingIcon?: ReactNode;
+  /** Icon displayed after the button label (direction-aware) */
+  trailingIcon?: ReactNode;
+  /** Renders the button as a square icon-only floating button */
+  iconOnly?: boolean;
+  /** Marks the button as selected (toggled on) */
+  selected?: boolean;
+  /** Override the rendered HTML element */
+  as?: ElementType;
+  children?: ReactNode;
+}

package/src/components/FloatingButton/FloatingButton.variants.ts

@@ -0,0 +1,79 @@
+import type { FloatingButtonVariant, FloatingButtonSize } from './FloatingButton.types';
+
+/* ── Focus ring (shared across all variants) ──────────────────── */
+export const FOCUS_RING =
+  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgba(22,22,22,1)] focus-visible:ring-offset-2 dark:focus-visible:ring-[rgba(210,214,219,1)] dark:focus-visible:ring-offset-[rgba(17,25,39,1)]';
+
+/* ── Variant classes (default + hover + active states) ────────── */
+export const VARIANT_CLASSES: Record<FloatingButtonVariant, string> = {
+  neutral: [
+    'bg-[rgba(13,18,28,1)] text-white',
+    'hover:bg-[rgba(31,42,55,1)]',
+    'active:bg-[rgba(77,87,97,1)]',
+    'dark:bg-[rgba(243,244,246,1)] dark:text-[rgba(13,18,28,1)]',
+    'dark:hover:bg-[rgba(229,231,235,1)]',
+    'dark:active:bg-[rgba(210,214,219,1)]',
+  ].join(' '),
+
+  primary: [
+    'bg-[rgba(27,131,84,1)] text-white',
+    'hover:bg-[rgba(22,106,69,1)]',
+    'active:bg-[rgba(16,70,49,1)]',
+    'dark:bg-[rgba(27,131,84,1)] dark:text-white',
+    'dark:hover:bg-[rgba(22,106,69,1)]',
+    'dark:active:bg-[rgba(16,70,49,1)]',
+  ].join(' '),
+
+  'secondary-solid': [
+    'bg-[rgba(243,244,246,1)] text-[rgba(22,22,22,1)]',
+    'hover:bg-[rgba(243,244,246,1)]',
+    'active:bg-[rgba(229,231,235,1)]',
+    'dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(243,244,246,1)]',
+    'dark:hover:bg-[rgba(56,66,80,1)]',
+    'dark:active:bg-[rgba(77,87,97,1)]',
+  ].join(' '),
+};
+
+/* ── Selected state overrides ─────────────────────────────────── */
+export const SELECTED_CLASSES: Record<FloatingButtonVariant, string> = {
+  neutral:
+    'bg-[rgba(56,66,80,1)] text-white dark:bg-[rgba(210,214,219,1)] dark:text-[rgba(13,18,28,1)]',
+  primary:
+    'bg-[rgba(20,87,58,1)] text-white dark:bg-[rgba(20,87,58,1)] dark:text-white', // #14573a — Figma: button/button-background-primary-selected
+  'secondary-solid':
+    'bg-[rgba(229,231,235,1)] text-[rgba(22,22,22,1)] dark:bg-[rgba(56,66,80,1)] dark:text-[rgba(243,244,246,1)]',
+};
+
+/* ── Disabled state overrides ─────────────────────────────────── */
+export const DISABLED_CLASSES: Record<FloatingButtonVariant, string> = {
+  neutral:
+    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
+  primary:
+    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
+  'secondary-solid':
+    'bg-[rgba(229,231,235,1)] text-[rgba(157,164,174,1)] pointer-events-none dark:bg-[rgba(31,42,55,1)] dark:text-[rgba(75,85,99,1)]',
+};
+
+/* ── Size classes — text + leading/trailing icon variants ────── */
+/* Pill shape (rounded-full). Text always text-md medium per Figma. */
+export const SIZE_CLASSES: Record<FloatingButtonSize, string> = {
+  sm: 'px-spacing-lg py-spacing-lg text-text-md gap-spacing-md font-medium',
+  md: 'px-spacing-xl py-spacing-xl text-text-md gap-spacing-md font-medium',
+  lg: 'px-spacing-2xl py-spacing-2xl text-text-md gap-spacing-md font-medium',
+};
+
+/* ── Icon-only size classes (square pill) ─────────────────────── */
+export const ICON_ONLY_SIZE_CLASSES: Record<FloatingButtonSize, string> = {
+  sm: 'p-spacing-lg',
+  md: 'p-spacing-xl',
+  lg: 'p-spacing-2xl',
+};
+
+/* ── Icon size classes ────────────────────────────────────────── */
+/* Figma uses a fixed 24px icon at every size (icon-xl=24). size-icon-lg
+ * resolves to 24px at desktop, which matches. All sizes share the same class. */
+export const ICON_SIZE_CLASSES: Record<FloatingButtonSize, string> = {
+  sm: 'size-icon-lg',
+  md: 'size-icon-lg',
+  lg: 'size-icon-lg',
+};