sdaia-ui 1.0.1 → 1.0.2

package/src/components/FiltrationItem/FiltrationItem.tsx

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

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

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

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