sdaia-ui 1.0.1 → 1.0.2

package/src/components/Extension/Extension.tsx

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

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

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

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

package/src/components/Feedback/Feedback.tsx

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

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

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

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

package/src/components/FeedbackOverview/FeedbackOverview.tsx

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

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

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

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

package/src/components/FeedbackReaction/FeedbackReaction.tsx

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

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

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

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