sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,191 +0,0 @@
-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

@@ -1,283 +0,0 @@
-/**
- * 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

@@ -1,16 +0,0 @@
-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

@@ -1,89 +0,0 @@
-'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

@@ -1,29 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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',
-};