sdaia-ui 1.0.1

package/src/components/Extension/Extension.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import { forwardRef, type ReactNode } from 'react';
+import { cn } from '../../lib/cn';
+import LinkCircleSVG from '../../icons/LinkCircleSVG';
+import LockCircleSVG from '../../icons/LockCircleSVG';
+import type {
+  ExtensionProps,
+  ExtensionType,
+  ExtensionLocale,
+} from './Extension.types';
+import {
+  ROOT,
+  ROW,
+  ICON_WRAP,
+  TEXT_WRAP,
+  TITLE,
+  TITLE_HIGHLIGHT,
+  DESCRIPTION,
+} from './Extension.variants';
+
+/* ── Default copy per extension / locale ────────────────────────────────
+   Consumers can override any field via props; this map only provides
+   sensible defaults so the component works out-of-the-box.
+*/
+type Copy = {
+  domainTitle: ReactNode;
+  domainDescription: ReactNode;
+  httpsTitle: ReactNode;
+  httpsDescription: ReactNode;
+};
+
+function withHighlight(prefix: string, suffix: string): ReactNode {
+  return (
+    <>
+      {prefix} <span className={TITLE_HIGHLIGHT}>{suffix}</span>
+    </>
+  );
+}
+
+function httpsHighlight(prefix: string): ReactNode {
+  return (
+    <>
+      {prefix} <span className={TITLE_HIGHLIGHT}>HTTPS</span>
+    </>
+  );
+}
+
+const DEFAULT_COPY: Record<ExtensionLocale, Record<ExtensionType, Copy>> = {
+  en: {
+    'gov.sa': {
+      domainTitle: withHighlight(
+        'Official Saudi Government websites URL ends with',
+        '.gov.sa',
+      ),
+      domainDescription:
+        'Website belongs to an official government organization in the Kingdom of Saudi Arabia always ends with .gov.sa .',
+      httpsTitle: httpsHighlight('Official Reliable websites use'),
+      httpsDescription: 'Ensure the website is using the HTTPS protocol.',
+    },
+    'edu.sa': {
+      domainTitle: withHighlight(
+        'Official Saudi educational websites URL ends with',
+        '.edu.sa',
+      ),
+      domainDescription:
+        'Website belongs to an official educational in the Kingdom of Saudi Arabia always ends with .edu.sa or sch.sa .',
+      httpsTitle: httpsHighlight('Official Reliable websites use'),
+      httpsDescription: 'Ensure the website is using the HTTPS protocol.',
+    },
+    'med.sa': {
+      domainTitle: withHighlight(
+        'Official Saudi medical websites URL ends with',
+        '.med.sa',
+      ),
+      domainDescription:
+        'Website belongs to an official medical in the Kingdom of Saudi Arabia always ends with .med.sa .',
+      httpsTitle: httpsHighlight('Official Reliable websites use'),
+      httpsDescription: 'Ensure the website is using the HTTPS protocol.',
+    },
+    'org.sa': {
+      domainTitle: withHighlight(
+        'Official Saudi non-profit organizations websites URL ends with',
+        '.org.sa',
+      ),
+      domainDescription:
+        'Website belongs to an official non-profit organizations in the Kingdom of Saudi Arabia always ends with .org.sa .',
+      httpsTitle: httpsHighlight('Official Reliable websites use'),
+      httpsDescription: 'Ensure the website is using the HTTPS protocol.',
+    },
+    'sch.sa': {
+      domainTitle: withHighlight(
+        'Official Saudi educational websites URL ends with',
+        '.sch.sa',
+      ),
+      domainDescription:
+        'Website belongs to an official educational in the Kingdom of Saudi Arabia always ends with .edu.sa or sch.sa .',
+      httpsTitle: httpsHighlight('Official Reliable websites use'),
+      httpsDescription: 'Ensure the website is using the HTTPS protocol.',
+    },
+    '.sa': {
+      domainTitle: withHighlight(
+        'Official Saudi activities and initiatives websites URL ends with',
+        '.sa',
+      ),
+      domainDescription:
+        'Website belongs to an official activities and initiatives in the Kingdom of Saudi Arabia always ends with .sa .',
+      httpsTitle: httpsHighlight('Official Reliable websites use'),
+      httpsDescription: 'Ensure the website is using the HTTPS protocol.',
+    },
+  },
+  ar: {
+    'gov.sa': {
+      domainTitle: withHighlight(
+        'روابط المواقع الإلكترونية الرسمية الحكومية تنتهي بـ',
+        'gov.sa',
+      ),
+      domainDescription:
+        'جميع روابط المواقع الرسمية التابعة للجهات الحكومية في المملكة العربية السعودية تنتهي بـ .gov.sa',
+      httpsTitle: httpsHighlight('المواقع الإلكترونية الحكومية الموثوقة تستخدم بروتوكول'),
+      httpsDescription: 'تحقق من أن الموقع يستخدم بروتوكول HTTPS',
+    },
+    'edu.sa': {
+      domainTitle: withHighlight(
+        'روابط المواقع الإلكترونية الرسمية التعليمية السعودية تنتهي بـ',
+        'edu.sa',
+      ),
+      domainDescription:
+        'جميع روابط المواقع الرسمية التعليمية في المملكة العربية السعودية تنتهي بـ sch.sa أو edu.sa',
+      httpsTitle: httpsHighlight('المواقع الإلكترونية الحكومية الموثوقة تستخدم بروتوكول'),
+      httpsDescription: 'تحقق من أن الموقع يستخدم بروتوكول HTTPS',
+    },
+    'med.sa': {
+      domainTitle: withHighlight(
+        'روابط المواقع الإلكترونية الرسمية الطبية السعودية تنتهي بـ',
+        'med.sa',
+      ),
+      domainDescription:
+        'جميع روابط المواقع الرسمية الطبية في المملكة العربية السعودية تنتهي بـ med.sa',
+      httpsTitle: httpsHighlight('المواقع الإلكترونية الحكومية الموثوقة تستخدم بروتوكول'),
+      httpsDescription: 'تحقق من أن الموقع يستخدم بروتوكول HTTPS',
+    },
+    'org.sa': {
+      domainTitle: withHighlight(
+        'روابط المواقع الإلكترونية الرسمية للمؤسسات غير الربحية السعودية تنتهي بـ',
+        'org.sa',
+      ),
+      domainDescription:
+        'جميع روابط المواقع الرسمية للمؤسسات غير الربحية في المملكة العربية السعودية تنتهي بـ org.sa',
+      httpsTitle: httpsHighlight('المواقع الإلكترونية الحكومية الموثوقة تستخدم بروتوكول'),
+      httpsDescription: 'تحقق من أن الموقع يستخدم بروتوكول HTTPS',
+    },
+    'sch.sa': {
+      domainTitle: withHighlight(
+        'روابط المواقع الإلكترونية الرسمية التعليمية السعودية تنتهي بـ',
+        'sch.sa',
+      ),
+      domainDescription:
+        'جميع روابط المواقع الرسمية التعليمية في المملكة العربية السعودية تنتهي بـ sch.sa أو edu.sa',
+      httpsTitle: httpsHighlight('المواقع الإلكترونية الحكومية الموثوقة تستخدم بروتوكول'),
+      httpsDescription: 'تحقق من أن الموقع يستخدم بروتوكول HTTPS',
+    },
+    '.sa': {
+      domainTitle: withHighlight(
+        'روابط المواقع الإلكترونية الرسمية للأنشطة والمبادرات السعودية تنتهي بـ',
+        '.sa',
+      ),
+      domainDescription:
+        'جميع روابط المواقع الرسمية للأنشطة والمبادرات في المملكة العربية السعودية تنتهي بـ .sa',
+      httpsTitle: httpsHighlight('المواقع الإلكترونية الحكومية الموثوقة تستخدم بروتوكول'),
+      httpsDescription: 'تحقق من أن الموقع يستخدم بروتوكول HTTPS',
+    },
+  },
+};
+
+/**
+ * Extension — feature rows indicating domain authenticity and HTTPS usage for
+ * Saudi government-related websites. Supports 6 extension types (.gov.sa,
+ * .edu.sa, .med.sa, .org.sa, .sch.sa, .sa), EN/AR default copy, full overrides,
+ * and responsive mobile/desktop layouts. RTL-aware via ambient `dir`.
+ */
+export const Extension = forwardRef<HTMLDivElement, ExtensionProps>(
+  function Extension(
+    {
+      extension = 'gov.sa',
+      locale = 'en',
+      domainTitle,
+      domainDescription,
+      httpsTitle,
+      httpsDescription,
+      domainIcon,
+      httpsIcon,
+      hideDomain = false,
+      hideHttps = false,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const defaults = DEFAULT_COPY[locale][extension];
+
+    return (
+      <div
+        ref={ref}
+        data-slot="extension"
+        data-extension={extension}
+        className={cn(ROOT, className)}
+        {...rest}
+      >
+        {!hideDomain && (
+          <div className={ROW} data-slot="extension-domain">
+            <span className={ICON_WRAP}>
+              {domainIcon ?? <LinkCircleSVG />}
+            </span>
+            <div className={TEXT_WRAP}>
+              <p className={TITLE}>{domainTitle ?? defaults.domainTitle}</p>
+              <p className={DESCRIPTION}>
+                {domainDescription ?? defaults.domainDescription}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {!hideHttps && (
+          <div className={ROW} data-slot="extension-https">
+            <span className={ICON_WRAP}>
+              {httpsIcon ?? <LockCircleSVG />}
+            </span>
+            <div className={TEXT_WRAP}>
+              <p className={TITLE}>{httpsTitle ?? defaults.httpsTitle}</p>
+              <p className={DESCRIPTION}>
+                {httpsDescription ?? defaults.httpsDescription}
+              </p>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/Extension/Extension.types.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Supported Saudi domain extensions. */
+export type ExtensionType =
+  | 'gov.sa'
+  | 'edu.sa'
+  | 'med.sa'
+  | 'org.sa'
+  | 'sch.sa'
+  | '.sa';
+
+/** Locale used to resolve default copy (EN / AR). Consumers can also override per-field. */
+export type ExtensionLocale = 'en' | 'ar';
+
+export interface ExtensionProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Which Saudi domain extension is being verified. Defaults to `gov.sa`. */
+  extension?: ExtensionType;
+  /** Locale for default copy. Defaults to `en`. */
+  locale?: ExtensionLocale;
+
+  /** Override the domain-row title. */
+  domainTitle?: ReactNode;
+  /** Override the domain-row description. */
+  domainDescription?: ReactNode;
+  /** Override the HTTPS-row title. */
+  httpsTitle?: ReactNode;
+  /** Override the HTTPS-row description. */
+  httpsDescription?: ReactNode;
+
+  /** Override the domain circle icon. */
+  domainIcon?: ReactNode;
+  /** Override the HTTPS circle icon. */
+  httpsIcon?: ReactNode;
+
+  /** Hide the domain-verification row. */
+  hideDomain?: boolean;
+  /** Hide the HTTPS row. */
+  hideHttps?: boolean;
+}

package/src/components/Extension/Extension.variants.ts

@@ -0,0 +1,27 @@
+/* Outer wrapper: stacks on mobile, row on desktop (Figma: gap-xl) */
+export const ROOT =
+  'flex flex-col md:flex-row md:flex-wrap items-start gap-spacing-xl w-full';
+
+/* Single feature row (domain / https): Mobile gap-lg, Desktop gap-3xl */
+export const ROW =
+  'flex flex-1 items-start gap-spacing-lg md:gap-spacing-3xl min-w-0';
+
+/* Circular featured-icon wrapper (source SVG is 52×52 with viewBox) —
+   Mobile 32px, Desktop 48px. */
+export const ICON_WRAP =
+  'shrink-0 inline-flex items-center justify-center w-[32px] h-[32px] md:w-[48px] md:h-[48px] [&>svg]:w-full [&>svg]:h-full';
+
+/* Text column */
+export const TEXT_WRAP =
+  'flex flex-1 flex-col gap-spacing-lg min-w-0 rtl:text-right';
+
+/* Title (text-ig 18/28 semibold) */
+export const TITLE =
+  'text-text-lg font-semibold text-[#161616]';
+
+/* Highlight span for the extension itself — brand green, 600 weight */
+export const TITLE_HIGHLIGHT = 'font-semibold text-[rgba(27,131,84,1)]';
+
+/* Description (text-md 16/24 regular) */
+export const DESCRIPTION =
+  'text-text-md font-normal text-[#384250]';

package/src/components/Extension/index.ts

@@ -0,0 +1,6 @@
+export { Extension } from './Extension';
+export type {
+  ExtensionProps,
+  ExtensionType,
+  ExtensionLocale,
+} from './Extension.types';

package/src/components/Feedback/Feedback.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { forwardRef, useState } from 'react';
+import { cn } from '../../lib/cn';
+import { FeedbackReaction } from '../FeedbackReaction/FeedbackReaction';
+import type { FeedbackProps, FeedbackValue } from './Feedback.types';
+import { FEEDBACK_REACTIONS, FEEDBACK_ROOT } from './Feedback.variants';
+
+export const Feedback = forwardRef<HTMLDivElement, FeedbackProps>(function Feedback(
+  {
+    type = 'thumb',
+    size = 'md',
+    value,
+    defaultValue = null,
+    onValueChange,
+    disabled = false,
+    dir,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState<FeedbackValue | null>(defaultValue ?? null);
+  const currentValue = isControlled ? (value ?? null) : internalValue;
+
+  const handleToggle = (feedback: FeedbackValue) => {
+    const next = currentValue === feedback ? null : feedback;
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <div
+      ref={ref}
+      dir={dir}
+      data-slot="feedback"
+      role="group"
+      className={cn(FEEDBACK_ROOT, className)}
+      {...rest}
+    >
+      {FEEDBACK_REACTIONS[type].map((feedback) => (
+        <FeedbackReaction
+          key={feedback}
+          type={type}
+          feedback={feedback}
+          checked={currentValue === feedback}
+          size={size}
+          disabled={disabled}
+          onToggle={handleToggle}
+        />
+      ))}
+    </div>
+  );
+});

package/src/components/Feedback/Feedback.types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'react';
+import type { FeedbackValue, FeedbackType, FeedbackSize } from '../FeedbackReaction/FeedbackReaction.types';
+
+export type { FeedbackValue, FeedbackType, FeedbackSize };
+
+export interface FeedbackProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+  type?: FeedbackType;
+  size?: FeedbackSize;
+  /** Controlled value. Pass `null` to deselect. */
+  value?: FeedbackValue | null;
+  defaultValue?: FeedbackValue | null;
+  onValueChange?: (value: FeedbackValue | null) => void;
+  disabled?: boolean;
+  dir?: 'ltr' | 'rtl';
+}

package/src/components/Feedback/Feedback.variants.ts

@@ -0,0 +1,9 @@
+import type { FeedbackValue, FeedbackType } from './Feedback.types';
+
+/** Ordered reaction values per type */
+export const FEEDBACK_REACTIONS: Record<FeedbackType, FeedbackValue[]> = {
+  thumb: ['dislike', 'like'],
+  emoji: ['dislike', 'neutral', 'like'],
+};
+
+export const FEEDBACK_ROOT = 'inline-flex items-center gap-[var(--global/spacing-xs,4px)]';

package/src/components/Feedback/index.ts

@@ -0,0 +1,2 @@
+export { Feedback } from './Feedback';
+export type { FeedbackProps, FeedbackValue, FeedbackType, FeedbackSize } from './Feedback.types';

package/src/components/FeedbackOverview/FeedbackOverview.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Feedback } from '../Feedback/Feedback';
+import type { FeedbackOverviewProps } from './FeedbackOverview.types';
+import { OVERVIEW_ROOT, OVERVIEW_LABEL } from './FeedbackOverview.variants';
+
+export const FeedbackOverview = forwardRef<HTMLDivElement, FeedbackOverviewProps>(
+  function FeedbackOverview(
+    {
+      label,
+      labelPlacement = 'top',
+      type = 'emoji',
+      size = 'md',
+      value,
+      defaultValue,
+      onValueChange,
+      disabled = false,
+      dir,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const labelNode = label != null ? (
+      <span
+        data-slot="feedback-overview-label"
+        className={OVERVIEW_LABEL}
+        dir="auto"
+      >
+        {label}
+      </span>
+    ) : null;
+
+    const feedbackNode = (
+      <Feedback
+        type={type}
+        size={size}
+        value={value}
+        defaultValue={defaultValue}
+        onValueChange={onValueChange}
+        disabled={disabled}
+      />
+    );
+
+    return (
+      <div
+        ref={ref}
+        dir={dir}
+        data-slot="feedback-overview"
+        data-label-placement={labelPlacement}
+        className={cn(OVERVIEW_ROOT[labelPlacement], className)}
+        {...rest}
+      >
+        {labelPlacement === 'bottom' ? (
+          <>
+            {feedbackNode}
+            {labelNode}
+          </>
+        ) : (
+          <>
+            {labelNode}
+            {feedbackNode}
+          </>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/FeedbackOverview/FeedbackOverview.types.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { FeedbackProps } from '../Feedback/Feedback.types';
+
+export type FeedbackOverviewLabelPlacement = 'top' | 'inline' | 'bottom';
+
+export interface FeedbackOverviewProps extends FeedbackProps {
+  /** The label shown alongside the reaction buttons. */
+  label?: ReactNode;
+  /** Where the label is placed relative to the reactions. @default "top" */
+  labelPlacement?: FeedbackOverviewLabelPlacement;
+}

package/src/components/FeedbackOverview/FeedbackOverview.variants.ts

@@ -0,0 +1,17 @@
+import type { FeedbackOverviewLabelPlacement } from './FeedbackOverview.types';
+
+/** Root container direction classes per label placement */
+export const OVERVIEW_ROOT: Record<FeedbackOverviewLabelPlacement, string> = {
+  // label above reactions
+  top:    'inline-flex flex-col items-start gap-[4px]',
+  // label left of reactions (reverses in RTL automatically)
+  inline: 'inline-flex flex-row items-center gap-[4px]',
+  // label below reactions
+  bottom: 'inline-flex flex-col items-start gap-[4px]',
+};
+
+/** Label text styles matching Figma token: Text md/Medium */
+export const OVERVIEW_LABEL =
+  'text-[16px] font-medium leading-[24px] ' +
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(209,213,219,1)] ' +
+  'shrink-0';

package/src/components/FeedbackOverview/index.ts

@@ -0,0 +1,2 @@
+export { FeedbackOverview } from './FeedbackOverview';
+export type { FeedbackOverviewProps, FeedbackOverviewLabelPlacement } from './FeedbackOverview.types';

package/src/components/FeedbackReaction/FeedbackReaction.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { FeedbackThumbLikeIcon } from '../../icons/FeedbackThumbLikeIcon';
+import { FeedbackThumbDislikeIcon } from '../../icons/FeedbackThumbDislikeIcon';
+import { FeedbackThumbLikeFilledIcon } from '../../icons/FeedbackThumbLikeFilledIcon';
+import { FeedbackThumbDislikeFilledIcon } from '../../icons/FeedbackThumbDislikeFilledIcon';
+import { FeedbackEmojiLikeIcon } from '../../icons/FeedbackEmojiLikeIcon';
+import { FeedbackEmojiNeutralIcon } from '../../icons/FeedbackEmojiNeutralIcon';
+import { FeedbackEmojiDislikeIcon } from '../../icons/FeedbackEmojiDislikeIcon';
+import type { FeedbackReactionProps } from './FeedbackReaction.types';
+import {
+  REACTION_BASE,
+  REACTION_DEFAULT,
+  REACTION_CHECKED,
+  REACTION_SIZE,
+  REACTION_ICON_INSET,
+} from './FeedbackReaction.variants';
+
+function getIcon(type: 'emoji' | 'thumb', feedback: 'like' | 'neutral' | 'dislike', checked: boolean) {
+  if (type === 'emoji') {
+    if (feedback === 'like') return FeedbackEmojiLikeIcon;
+    if (feedback === 'neutral') return FeedbackEmojiNeutralIcon;
+    return FeedbackEmojiDislikeIcon;
+  }
+  if (feedback === 'like') return checked ? FeedbackThumbLikeFilledIcon : FeedbackThumbLikeIcon;
+  return checked ? FeedbackThumbDislikeFilledIcon : FeedbackThumbDislikeIcon;
+}
+
+const DEFAULT_LABELS: Record<string, Record<string, string>> = {
+  like: { emoji: 'Like', thumb: 'Thumbs up' },
+  neutral: { emoji: 'Neutral', thumb: 'Neutral' },
+  dislike: { emoji: 'Dislike', thumb: 'Thumbs down' },
+};
+
+export const FeedbackReaction = forwardRef<HTMLButtonElement, FeedbackReactionProps>(
+  function FeedbackReaction(
+    {
+      type = 'thumb',
+      feedback,
+      checked = false,
+      size = 'md',
+      disabled = false,
+      dir,
+      onToggle,
+      className,
+      'aria-label': ariaLabel,
+      ...rest
+    },
+    ref,
+  ) {
+    const Icon = getIcon(type, feedback, checked);
+    const label = ariaLabel ?? DEFAULT_LABELS[feedback]?.[type] ?? feedback;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        dir={dir}
+        data-slot="feedback-reaction"
+        aria-label={label}
+        aria-pressed={checked}
+        disabled={disabled}
+        onClick={() => onToggle?.(feedback)}
+        className={cn(
+          REACTION_BASE,
+          REACTION_SIZE[size],
+          checked ? REACTION_CHECKED[feedback] : REACTION_DEFAULT,
+          disabled && 'opacity-50 cursor-not-allowed pointer-events-none',
+          className,
+        )}
+        {...rest}
+      >
+        <span className={cn('absolute', REACTION_ICON_INSET[size])}>
+          <Icon />
+        </span>
+      </button>
+    );
+  },
+);

package/src/components/FeedbackReaction/FeedbackReaction.types.ts

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+export type FeedbackValue = 'like' | 'neutral' | 'dislike';
+export type FeedbackType = 'emoji' | 'thumb';
+export type FeedbackSize = 'sm' | 'md' | 'lg';
+
+export interface FeedbackReactionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onToggle' | 'type'> {
+  type?: FeedbackType;
+  feedback: FeedbackValue;
+  checked?: boolean;
+  size?: FeedbackSize;
+  dir?: 'ltr' | 'rtl';
+  onToggle?: (feedback: FeedbackValue) => void;
+}

package/src/components/FeedbackReaction/FeedbackReaction.variants.ts

@@ -0,0 +1,39 @@
+import type { FeedbackSize, FeedbackValue } from './FeedbackReaction.types';
+
+export const REACTION_SIZE: Record<FeedbackSize, string> = {
+  sm: 'size-8',   // 32px
+  md: 'size-10',  // 40px
+  lg: 'size-12',  // 48px
+};
+
+export const REACTION_ICON_INSET: Record<FeedbackSize, string> = {
+  sm: 'inset-[18%]',
+  md: 'inset-[20%]',
+  lg: 'inset-[20%]',
+};
+
+// Base button classes — always applied
+export const REACTION_BASE =
+  'relative shrink-0 rounded-full border cursor-pointer transition-colors outline-none ' +
+  'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[rgba(59,130,246,0.5)] ' +
+  'focus-visible:ring-offset-white dark:focus-visible:ring-offset-[rgba(17,24,39,1)]';
+
+// Unchecked state
+export const REACTION_DEFAULT =
+  'border-[rgba(229,231,235,1)] bg-[rgba(249,250,251,1)] text-[rgba(108,115,127,1)] ' +
+  'hover:border-[rgba(156,163,175,1)] hover:text-[rgba(22,22,22,1)] ' +
+  'dark:border-[rgba(44,57,79,1)] dark:bg-[rgba(30,41,59,1)] dark:text-[rgba(156,163,175,1)] ' +
+  'dark:hover:border-[rgba(75,85,99,1)] dark:hover:text-[rgba(229,231,235,1)]';
+
+// Checked state colors per feedback value
+export const REACTION_CHECKED: Record<FeedbackValue, string> = {
+  like:
+    'border-[#1B8354] bg-[#f0fdf4] text-[#1B8354] ' +
+    'dark:border-[rgba(52,211,153,0.5)] dark:bg-[rgba(20,83,45,0.3)] dark:text-[#86efac]',
+  neutral:
+    'border-[#B54708] bg-[#fffbeb] text-[#B54708] ' +
+    'dark:border-[rgba(245,158,11,0.5)] dark:bg-[rgba(120,53,15,0.3)] dark:text-[#fcd34d]',
+  dislike:
+    'border-[#B42318] bg-[#fef2f2] text-[#B42318] ' +
+    'dark:border-[rgba(239,68,68,0.5)] dark:bg-[rgba(127,29,29,0.3)] dark:text-[#fca5a5]',
+};

package/src/components/FeedbackReaction/index.ts

@@ -0,0 +1,2 @@
+export { FeedbackReaction } from './FeedbackReaction';
+export type { FeedbackReactionProps, FeedbackValue, FeedbackType, FeedbackSize } from './FeedbackReaction.types';