sdaia-ui 1.0.1

package/src/components/FiltrationItem/FiltrationItem.tsx

@@ -0,0 +1,200 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { FiltrationItemProps } from './FiltrationItem.types';
+import { Checkbox } from '../Checkbox';
+import { RadioButton } from '../RadioButton';
+import {
+  ROOT,
+  STATE_INTERACTIVE,
+  STATE_DISABLED,
+  LABEL_BASE,
+  LABEL_NORMAL,
+  LABEL_DISABLED,
+  CHECK_ICON_WRAP,
+  CHECK_ICON_NORMAL,
+  CHECK_ICON_DISABLED,
+} from './FiltrationItem.variants';
+import { TickIcon } from '../../icons/IconFactory';
+
+/**
+ * FiltrationItem — a single row inside a filter panel or dropdown filter list.
+ *
+ * Supports three control types:
+ *
+ *   `'select'`   — label on the start side, optional trailing checkmark when selected.
+ *                  Suited for single-select filter lists.
+ *   `'checkbox'` — composes the design system `<Checkbox size="sm">` component.
+ *                  Suited for multi-select filter lists.
+ *   `'radio'`    — composes the design system `<RadioButton size="sm">` component.
+ *                  Suited for single-select filter lists with radio semantics.
+ *
+ * Focus behaviour:
+ *   The row wrapper uses `focus-within:` for the focus border so it activates
+ *   on **both mouse click and keyboard navigation**. When a user clicks, the
+ *   hidden native `<input>` inside Checkbox/RadioButton receives focus and
+ *   triggers `focus-within` on the wrapper row.
+ *
+ * RTL:
+ *   Pass `rtl` to set `dir="rtl"` on the row, OR let an ancestor element
+ *   carry `dir="rtl"` — flex direction mirrors automatically in both cases.
+ *
+ * Accessibility:
+ *   - `'checkbox'` / `'radio'` types: ARIA roles/states are handled by the
+ *     native `<input>` inside the composed components.
+ *   - `'select'` type: the row is `role="option"` with `aria-selected`,
+ *     `tabIndex={0}` so it is keyboard-reachable directly.
+ *   Wrap multiple rows in `<ul role="listbox">` or `<div role="group">` as
+ *   appropriate for the filter panel's semantic context.
+ *
+ * Figma source: node 5268:77903 (FIltrationItem)
+ */
+export const FiltrationItem = forwardRef<HTMLDivElement, FiltrationItemProps>(
+  function FiltrationItem(
+    {
+      type = 'select',
+      selected = false,
+      label = 'Option',
+      disabled = false,
+      rtl = false,
+      onSelectedChange,
+      name,
+      className,
+      onClick,
+      // Prevent onChange from spreading onto the wrapper div (it belongs on
+      // the inner <input> via onSelectedChange for checkbox/radio types).
+      onChange: _onChange,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Shared row class ──────────────────────────────────────── */
+    const rowClass = cn(
+      ROOT,
+      disabled ? STATE_DISABLED : STATE_INTERACTIVE,
+      className,
+    );
+
+    /* ── Shared data attrs ─────────────────────────────────────── */
+    const dataAttrs = {
+      'data-slot': 'filtration-item',
+      'data-type': type,
+      'data-selected': selected,
+      'data-disabled': disabled,
+    } as const;
+
+    /*
+     * Label node shared by Checkbox and RadioButton types.
+     *
+     * Checkbox/RadioButton render the label prop inside their own
+     * `<span className="text-[13px] …">` — a hardcoded size that does NOT
+     * use the responsive design token. By passing a ReactNode instead of a
+     * plain string we inject our own `<span>` whose `text-text-sm` class
+     * (a CSS-variable utility) overrides the outer hardcoded size and gives
+     * us the correct responsive scale:
+     *   mobile  → 10 px  (--ds-typo-text-sm at :root)
+     *   tablet  → 12 px  (--ds-typo-text-sm at ≥768 px)
+     *   desktop → 14 px  (--ds-typo-text-sm at ≥1280 px)
+     *
+     * The inner span also applies the correct color (normal / disabled) so
+     * the outer wrapper's fixed Checkbox color is overridden too.
+     */
+    const controlLabel = (
+      <span className={cn(LABEL_BASE, disabled ? LABEL_DISABLED : LABEL_NORMAL)}>
+        {label}
+      </span>
+    );
+
+    /* ── Checkbox type ─────────────────────────────────────────── */
+    if (type === 'checkbox') {
+      return (
+        <div
+          ref={ref}
+          {...dataAttrs}
+          dir={rtl ? 'rtl' : undefined}
+          className={rowClass}
+          {...rest}
+        >
+          <Checkbox
+            checked={selected}
+            disabled={disabled}
+            onChange={(e) => onSelectedChange?.(e.target.checked)}
+            label={controlLabel}
+            size="sm"
+            name={name}
+            /* w-full makes the outer div fill the row;
+             * [&_label]:w-full makes the inner <label> fill that div so
+             * the entire row area is a valid click target. */
+            className="w-full [&_label]:w-full"
+          />
+        </div>
+      );
+    }
+
+    /* ── Radio type ────────────────────────────────────────────── */
+    if (type === 'radio') {
+      return (
+        <div
+          ref={ref}
+          {...dataAttrs}
+          dir={rtl ? 'rtl' : undefined}
+          className={rowClass}
+          {...rest}
+        >
+          <RadioButton
+            checked={selected}
+            disabled={disabled}
+            onChange={(e) => onSelectedChange?.(e.target.checked)}
+            label={controlLabel}
+            size="sm"
+            name={name}
+            className="w-full [&_label]:w-full"
+          />
+        </div>
+      );
+    }
+
+    /* ── Select type (default) ─────────────────────────────────── */
+    return (
+      <div
+        ref={ref}
+        role="option"
+        aria-selected={selected}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? -1 : 0}
+        {...dataAttrs}
+        dir={rtl ? 'rtl' : undefined}
+        onClick={
+          disabled
+            ? undefined
+            : (e) => {
+                onSelectedChange?.(!selected);
+                onClick?.(e);
+              }
+        }
+        className={rowClass}
+        {...rest}
+      >
+        {/* Label — flex-1 pushes the trailing checkmark to the end */}
+        <span
+          data-slot="filtration-item-label"
+          className={cn(LABEL_BASE, disabled ? LABEL_DISABLED : LABEL_NORMAL)}
+        >
+          {label}
+        </span>
+
+        {/* Trailing checkmark visible when selected */}
+        {selected && (
+          <span
+            data-slot="filtration-item-check"
+            aria-hidden="true"
+            className={cn(CHECK_ICON_WRAP, disabled ? CHECK_ICON_DISABLED : CHECK_ICON_NORMAL)}
+          >
+            <TickIcon />
+          </span>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/FiltrationItem/FiltrationItem.types.ts

@@ -0,0 +1,57 @@
+import type { HTMLAttributes } from 'react';
+
+/**
+ * Visual control type shown in the filtration row.
+ *
+ * - `'select'`   — trailing checkmark appears when `selected` is true (single-select style)
+ * - `'checkbox'` — leading checkbox control; filled when `selected` is true (multi-select style)
+ * - `'radio'`    — leading radio control; filled dot when `selected` is true (single-select style)
+ */
+export type FiltrationItemType = 'select' | 'checkbox' | 'radio';
+
+export interface FiltrationItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Visual control type of the row.
+   * @default 'select'
+   */
+  type?: FiltrationItemType;
+
+  /**
+   * Whether this item is currently selected / checked.
+   *
+   * - `'select'`   → shows the trailing checkmark icon
+   * - `'checkbox'` → renders the checkbox control as checked (green fill + tick)
+   * - `'radio'`    → renders the radio control as selected (green border + center dot)
+   */
+  selected?: boolean;
+
+  /** Text label displayed in the row. */
+  label?: string;
+
+  /**
+   * Disables the item — removes hover/press/focus interactions and dims
+   * the label and control.
+   */
+  disabled?: boolean;
+
+  /**
+   * Renders the row in RTL (right-to-left) layout.
+   * Also responds automatically when a parent element has `dir="rtl"`.
+   */
+  rtl?: boolean;
+
+  /**
+   * Called when the user toggles the item's selected state.
+   * Receives the new boolean value (`true` = selected/checked).
+   *
+   * For `'checkbox'` and `'radio'` types this fires via the native input's
+   * `onChange` event; for `'select'` it fires on row click.
+   */
+  onSelectedChange?: (selected: boolean) => void;
+
+  /**
+   * HTML `name` attribute forwarded to the underlying `<input>` for
+   * `'checkbox'` and `'radio'` types. Used to group radio buttons in a form.
+   */
+  name?: string;
+}

package/src/components/FiltrationItem/FiltrationItem.variants.ts

@@ -0,0 +1,81 @@
+/**
+ * FiltrationItem.variants.ts
+ *
+ * Class-name maps for the FiltrationItem component.
+ * All values are mapped from Figma node 5268:77903 (FIltrationItem).
+ *
+ * Color sources:
+ *   text-default            → Figma Text/text-default (#161616)
+ *   text-default-disabled   → Figma Global/text-default-disabled (#9da4ae)
+ *   border-black            → Figma Border/border-black (#161616)
+ *   option-bg-hover         → Figma Form/option-background-hover (#f3f4f6)
+ *   option-bg-pressed       → Figma Form/option-background-pressed (#e5e7eb)
+ *
+ * Note: Checkbox and Radio visual styles are now delegated to the existing
+ * <Checkbox> and <RadioButton> design system components.
+ */
+
+/* ── Row root ──────────────────────────────────────────────────── */
+
+/**
+ * Base classes applied to every row regardless of type/state.
+ * A transparent border is pre-reserved so the focus border never causes
+ * a layout shift when its colour activates via focus-within.
+ */
+export const ROOT = [
+  'flex items-center',
+  'gap-spacing-md p-spacing-md',
+  'rounded-[8px]',
+  'w-full',
+  'border border-transparent',
+  'select-none',
+  'motion-feedback',
+  'outline-none',
+].join(' ');
+
+/* ── Interactive state (applied when NOT disabled) ─────────────── */
+export const STATE_INTERACTIVE = [
+  'cursor-pointer',
+  /* hover — Figma Form/option-background-hover */
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(31,41,55,0.5)]',
+  /* pressed — Figma Form/option-background-pressed */
+  'active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(55,65,81,0.7)]',
+  /* focused — fires on BOTH mouse click and keyboard because focus-within
+   * triggers whenever any descendant (including native <input>) is focused.
+   * For the select type the div itself becomes focused on click (tabIndex=0). */
+  'focus-within:border-[rgba(22,22,22,1)] dark:focus-within:border-[rgba(229,231,235,1)]',
+].join(' ');
+
+/* ── Disabled row ──────────────────────────────────────────────── */
+export const STATE_DISABLED = 'cursor-not-allowed';
+
+/* ── Label (Select type only) ──────────────────────────────────── */
+
+/** Structural label classes for the Select-type row */
+export const LABEL_BASE = [
+  'flex-1 min-w-0 min-h-px',
+  'text-text-sm font-[400]',
+  'truncate',
+].join(' ');
+
+/** Label color — normal (Figma Text/text-default) */
+export const LABEL_NORMAL = 'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+/** Label color — disabled (Figma Global/text-default-disabled) */
+export const LABEL_DISABLED = 'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Trailing checkmark slot (Select type) ─────────────────────── */
+
+/**
+ * Wrapper for the trailing checkmark icon.
+ * `size-icon-md` = 16 px (mobile/tablet) → 20 px (desktop ≥1280px),
+ * which matches the Figma 20 px spec at desktop while scaling down on
+ * smaller viewports. Using `size-icon-lg` would be 20 → 24 px (too large).
+ */
+export const CHECK_ICON_WRAP = 'shrink-0 size-icon-md flex items-center justify-center';
+
+/** Checkmark color — normal (Figma Icon/icon-default = #161616) */
+export const CHECK_ICON_NORMAL = 'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+/** Checkmark color — disabled (Figma Global/icon-default-disabled = #9da4ae) */
+export const CHECK_ICON_DISABLED = 'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';

package/src/components/FiltrationItem/index.ts

@@ -0,0 +1,2 @@
+export { FiltrationItem } from './FiltrationItem';
+export type { FiltrationItemProps, FiltrationItemType } from './FiltrationItem.types';