sdaia-ui 1.0.1

package/src/components/Rating/Rating.types.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'react';
+
+export type RatingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type RatingStyle = 'solid' | 'outline';
+export type RatingStep = 0.5 | 1;
+export type RatingDirection = 'ltr' | 'rtl';
+
+export interface RatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'style'> {
+  /** Current value for controlled mode. */
+  value?: number;
+  /** Initial value for uncontrolled mode. */
+  defaultValue?: number;
+  /** Maximum number of stars. */
+  max?: number;
+  /** Rating size preset. */
+  size?: RatingSize;
+  /** Visual style of stars. */
+  style?: RatingStyle;
+  /** Brand palette toggle. */
+  brand?: boolean;
+  /** Step granularity; default is half star. */
+  step?: RatingStep;
+  /** Reading direction. */
+  direction?: RatingDirection;
+  /** Disables all interactions. */
+  disabled?: boolean;
+  /** Prevents update while keeping focus semantics. */
+  readOnly?: boolean;
+  /** Hover-to-preview behavior. */
+  hoverable?: boolean;
+  /** Custom active star color (applies to selected and hover preview). */
+  starColor?: string;
+  /** Custom empty star color. */
+  emptyStarColor?: string;
+  /** Callback when value changes. */
+  onValueChange?: (value: number) => void;
+}

package/src/components/Rating/Rating.variants.ts

@@ -0,0 +1,52 @@
+import type { RatingSize } from './Rating.types';
+
+export interface RatingSizeConfig {
+  star: number;
+  gapClass: string;
+}
+
+export interface RatingTone {
+  emptyVarClass: string;
+  fillVarClass: string;
+}
+
+export const RATING_SIZE_MAP: Record<RatingSize, RatingSizeConfig> = {
+  '2xs': { star: 12, gapClass: 'gap-spacing-xs' },
+  xs: { star: 14, gapClass: 'gap-spacing-xs' },
+  sm: { star: 16, gapClass: 'gap-spacing-sm' },
+  md: { star: 20, gapClass: 'gap-spacing-md' },
+  lg: { star: 24, gapClass: 'gap-spacing-md' },
+  xl: { star: 28, gapClass: 'gap-[10px]' },
+  '2xl': { star: 32, gapClass: 'gap-[10px]' },
+};
+
+export const RATING_COLOR_MAP: Record<'brand' | 'neutral', RatingTone> = {
+  brand: {
+    emptyVarClass:
+      '[--rating-empty:rgba(209,213,219,1)] dark:[--rating-empty:rgba(75,85,99,1)]',
+    fillVarClass:
+      '[--rating-fill:var(--color-border-primary,rgba(27,131,84,1))] dark:[--rating-fill:rgba(84,192,138,1)]',
+  },
+  neutral: {
+    emptyVarClass:
+      '[--rating-empty:rgba(209,213,219,1)] dark:[--rating-empty:rgba(75,85,99,1)]',
+    fillVarClass:
+      '[--rating-fill:rgba(219,161,2,1)] dark:[--rating-fill:rgba(250,204,21,1)]',
+  },
+};
+
+export const FILLED_STAR_VIEWBOX = {
+  width: 27,
+  height: 26,
+};
+
+export const OUTLINE_STAR_VIEWBOX = {
+  width: 24,
+  height: 23,
+};
+
+export const FILLED_STAR_PATH_D =
+  'M12.1685 0.719655C12.645 -0.239884 14.0217 -0.239886 14.4981 0.719653L17.6121 6.9907C17.8013 7.37174 18.167 7.63584 18.5901 7.69694L25.5531 8.70255C26.6185 8.85642 27.0439 10.1577 26.273 10.9046L21.2345 15.786C20.9284 16.0825 20.7887 16.5099 20.8609 16.9287L22.0504 23.8212C22.2324 24.8759 21.1186 25.6801 20.1657 25.1822L13.9378 21.928C13.5594 21.7302 13.1073 21.7302 12.7289 21.928L6.50099 25.1822C5.54806 25.6801 4.43431 24.8759 4.6163 23.8212L5.80572 16.9287C5.87799 16.5099 5.73829 16.0825 5.43215 15.786L0.393683 10.9046C-0.377257 10.1577 0.048156 8.85642 1.11357 8.70255L8.07657 7.69694C8.49964 7.63584 8.86538 7.37174 9.05458 6.9907L12.1685 0.719655Z';
+
+export const OUTLINE_STAR_PATH_D =
+  'M11.0957 0.852539C11.3288 0.38311 12.0052 0.383113 12.2383 0.852539L14.9629 6.33887C15.2019 6.82026 15.6635 7.15268 16.1953 7.22949L22.2871 8.10938C22.8126 8.18527 23.0138 8.82112 22.6406 9.18262L18.2324 13.4531C17.8463 13.8272 17.6693 14.3676 17.7607 14.8975L18.8018 20.9287C18.8892 21.4364 18.3499 21.8378 17.877 21.5908L12.4268 18.7441C11.9506 18.4954 11.3824 18.4954 10.9062 18.7441L5.45703 21.5908C4.98398 21.838 4.44466 21.4365 4.53223 20.9287L5.57227 14.8975C5.66368 14.3676 5.48673 13.8272 5.10059 13.4531L0.692383 9.18262C0.319248 8.82112 0.520382 8.18527 1.0459 8.10938L7.13867 7.22949C7.67043 7.15262 8.13111 6.82019 8.37012 6.33887L11.0957 0.852539Z';

package/src/components/Rating/index.ts

@@ -0,0 +1,8 @@
+export { Rating } from './Rating';
+export type {
+  RatingProps,
+  RatingSize,
+  RatingStyle,
+  RatingStep,
+  RatingDirection,
+} from './Rating.types';

package/src/components/RatingOverview/RatingOverview.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { forwardRef, useMemo } from 'react';
+import { cn } from '../../lib/cn';
+import { RatingStar } from '../RatingStar';
+import type { RatingStarState } from '../RatingStar/RatingStar.types';
+import type { RatingOverviewProps } from './RatingOverview.types';
+import {
+  LABEL_PLACEMENT_LAYOUT,
+  RATING_OVERVIEW_HELPER_CLASS,
+  RATING_OVERVIEW_OF_MAX_CLASS,
+  RATING_OVERVIEW_SCORE_CLASS,
+  RATING_OVERVIEW_TITLE_CLASS,
+} from './RatingOverview.variants';
+
+function formatScoreValue(value: number): string {
+  if (Number.isInteger(value)) {
+    return String(value);
+  }
+  return value.toFixed(1);
+}
+
+function getStarStateForIndex(ratingValue: number, starIndex: number): RatingStarState {
+  const threshold = starIndex + 1;
+  if (ratingValue >= threshold) {
+    return 'filled';
+  }
+  if (ratingValue >= threshold - 0.5) {
+    return 'half';
+  }
+  return 'empty';
+}
+
+export const RatingOverview = forwardRef<HTMLDivElement, RatingOverviewProps>(
+  function RatingOverview(
+    {
+      value = 3.5,
+      max = 5,
+      label,
+      labelPlacement = 'top-left',
+      stacked = false,
+      showHelperText = true,
+      helperText,
+      starStyle = 'solid',
+      direction = 'ltr',
+      starSize = 24,
+      className,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const safeMax = Math.max(1, Math.floor(max));
+    const clampedValue = Math.min(safeMax, Math.max(0, value));
+
+    const stars = useMemo(
+      () =>
+        Array.from({ length: safeMax }, (_, starIndex) => (
+          <RatingStar
+            key={`rating-overview-star-${starIndex}`}
+            style={starStyle}
+            state={getStarStateForIndex(clampedValue, starIndex)}
+            brand={false}
+            direction={direction}
+            size={starSize}
+          />
+        )),
+      [safeMax, clampedValue, starStyle, direction, starSize],
+    );
+
+    const starsRow = (
+      <div
+        className="flex flex-row items-center gap-spacing-xs"
+        role="img"
+        aria-label={`${formatScoreValue(clampedValue)} out of ${safeMax} stars`}
+      >
+        {stars}
+      </div>
+    );
+
+    const labelNode =
+      label != null && label !== '' ? (
+        <div className={cn(RATING_OVERVIEW_TITLE_CLASS)}>{label}</div>
+      ) : null;
+
+    const helperNode =
+      showHelperText && helperText != null && helperText !== '' ? (
+        <p className={cn(RATING_OVERVIEW_HELPER_CLASS, stacked && 'text-center')}>{helperText}</p>
+      ) : null;
+
+    if (stacked) {
+      return (
+        <div
+          ref={forwardedRef}
+          dir={direction}
+          data-slot="rating-overview"
+          className={cn('flex flex-col items-center gap-spacing-md', className)}
+          {...rest}
+        >
+          {labelNode && <div className="w-full text-center">{labelNode}</div>}
+          <div className="flex flex-row flex-wrap items-baseline justify-center gap-[4px] text-center">
+            <span className={RATING_OVERVIEW_SCORE_CLASS}>{formatScoreValue(clampedValue)}</span>
+            <span className={RATING_OVERVIEW_OF_MAX_CLASS}>of {safeMax}</span>
+          </div>
+          {starsRow}
+          {helperNode}
+        </div>
+      );
+    }
+
+    const placement = LABEL_PLACEMENT_LAYOUT[labelPlacement];
+    const helperAlignmentClass =
+      labelPlacement === 'top-right' ||
+      labelPlacement === 'bottom-right' ||
+      labelPlacement === 'end'
+        ? 'self-end text-end'
+        : 'self-center text-center';
+
+    if (labelPlacement === 'start') {
+      return (
+        <div
+          ref={forwardedRef}
+          dir={direction}
+          data-slot="rating-overview"
+          className={cn('flex flex-col gap-spacing-md', className)}
+          {...rest}
+        >
+          <div className={placement.root}>
+            {labelNode && <div className={placement.label}>{labelNode}</div>}
+            <div className={placement.row}>{starsRow}</div>
+          </div>
+          {helperNode && <div className={helperAlignmentClass}>{helperNode}</div>}
+        </div>
+      );
+    }
+
+    if (labelPlacement === 'end') {
+      return (
+        <div
+          ref={forwardedRef}
+          dir={direction}
+          data-slot="rating-overview"
+          className={cn('flex flex-col gap-spacing-md', className)}
+          {...rest}
+        >
+          <div className={placement.root}>
+            <div className={placement.row}>{starsRow}</div>
+            {labelNode && <div className={placement.label}>{labelNode}</div>}
+          </div>
+          {helperNode && <div className={helperAlignmentClass}>{helperNode}</div>}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={forwardedRef}
+        dir={direction}
+        data-slot="rating-overview"
+        className={cn('flex flex-col gap-spacing-md', className)}
+        {...rest}
+      >
+        <div className={placement.root}>
+          {labelNode && <div className={placement.label}>{labelNode}</div>}
+          <div className={placement.row}>{starsRow}</div>
+        </div>
+        {helperNode && <div className={helperAlignmentClass}>{helperNode}</div>}
+      </div>
+    );
+  },
+);

package/src/components/RatingOverview/RatingOverview.types.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { RatingStarStyle } from '../RatingStar/RatingStar.types';
+
+/** Label position relative to the star row when `stacked` is false. */
+export type RatingOverviewLabelPlacement =
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'start'
+  | 'end';
+
+export interface RatingOverviewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Average rating value (supports half steps). */
+  value?: number;
+  /** Scale maximum (number of stars). */
+  max?: number;
+  /** Section label (e.g. "Ratings"). */
+  label?: ReactNode;
+  /** Where the label sits relative to the stars when not stacked. */
+  labelPlacement?: RatingOverviewLabelPlacement;
+  /** Vertical stacked layout (score + stars + helper). */
+  stacked?: boolean;
+  /** Show the helper line under the stars (e.g. total count). */
+  showHelperText?: boolean;
+  /**
+   * Helper line below the stars (e.g. total count). Fully customizable string.
+   * @default "123 ratings"
+   */
+  helperText?: string;
+  /** Star visual style passed to `RatingStar`. */
+  starStyle?: RatingStarStyle;
+  /** Reading direction for star half-fill and layout. */
+  direction?: 'ltr' | 'rtl';
+  /** Pixel size for each `RatingStar`. */
+  starSize?: number;
+}

package/src/components/RatingOverview/RatingOverview.variants.ts

@@ -0,0 +1,50 @@
+import type { RatingOverviewLabelPlacement } from './RatingOverview.types';
+
+/** Typography matches Figma; colors use literals already used elsewhere in the DS. */
+export const RATING_OVERVIEW_TITLE_CLASS =
+  'text-text-md font-[400] text-[color:var(--Text-text-primary-paragraph,#384250)] dark:text-[rgba(210,214,219,1)]';
+
+export const RATING_OVERVIEW_SCORE_CLASS =
+  'text-display-xs font-[500] text-[color:var(--Text-text-display,#1F2A37)] dark:text-[rgba(243,244,246,1)]';
+
+export const RATING_OVERVIEW_OF_MAX_CLASS =
+  'text-text-sm font-[400] text-[color:var(--Global-text-default-disabled,#9DA4AE)]';
+
+export const RATING_OVERVIEW_HELPER_CLASS =
+  'text-text-xs font-[400] text-[color:var(--Text-text-secondary-paragraph,#6C737F)] dark:text-[rgba(156,163,175,1)]';
+
+export const LABEL_PLACEMENT_LAYOUT: Record<
+  RatingOverviewLabelPlacement,
+  { root: string; label: string; row: string }
+> = {
+  'top-left': {
+    root: 'flex flex-col items-start gap-spacing-md',
+    label: 'text-start',
+    row: 'flex flex-row items-center gap-spacing-md',
+  },
+  'top-right': {
+    root: 'flex flex-col items-end gap-spacing-md',
+    label: 'text-end',
+    row: 'flex flex-row items-center justify-end gap-spacing-md',
+  },
+  'bottom-left': {
+    root: 'flex flex-col items-start gap-spacing-md',
+    label: 'order-2 text-start',
+    row: 'order-1 flex flex-row items-center gap-spacing-md',
+  },
+  'bottom-right': {
+    root: 'flex flex-col items-end gap-spacing-md',
+    label: 'order-2 text-end',
+    row: 'order-1 flex flex-row items-center justify-end gap-spacing-md',
+  },
+  start: {
+    root: 'flex flex-row flex-wrap items-center gap-spacing-md',
+    label: 'text-start',
+    row: 'flex flex-row items-center gap-spacing-md',
+  },
+  end: {
+    root: 'flex flex-row flex-wrap items-center justify-end gap-spacing-md',
+    label: 'text-end',
+    row: 'flex flex-row items-center gap-spacing-md',
+  },
+};

package/src/components/RatingOverview/index.ts

@@ -0,0 +1,2 @@
+export { RatingOverview } from './RatingOverview';
+export type { RatingOverviewProps, RatingOverviewLabelPlacement } from './RatingOverview.types';

package/src/components/RatingStar/RatingStar.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { forwardRef, useId } from 'react';
+import { cn } from '../../lib/cn';
+import type { RatingStarProps } from './RatingStar.types';
+import { RATING_STAR_TONE_MAP, RATING_STAR_VIEWBOX } from './RatingStar.variants';
+
+function clampValue(value: number, minimum: number, maximum: number) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+export const RatingStar = forwardRef<HTMLDivElement, RatingStarProps>(function RatingStar(
+  {
+    style = 'solid',
+    state = 'filled',
+    brand = true,
+    direction = 'ltr',
+    size = 32,
+    className,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const tone = brand ? RATING_STAR_TONE_MAP.brand : RATING_STAR_TONE_MAP.neutral;
+  const shape = RATING_STAR_VIEWBOX[style];
+  const fillPercent = state === 'empty' ? 0 : state === 'half' ? 50 : 100;
+  const clipPathId = useId();
+  const clipWidth = clampValue((fillPercent / 100) * shape.width, 0, shape.width);
+  const clipX = direction === 'rtl' ? shape.width - clipWidth : 0;
+
+  return (
+    <div
+      ref={forwardedRef}
+      dir={direction}
+      data-slot="rating-star"
+      className={cn('inline-flex items-center justify-center', tone.fillVarClass, tone.emptyVarClass, className)}
+      {...rest}
+    >
+      <svg
+        width={size}
+        height={size}
+        viewBox={`0 0 ${shape.width} ${shape.height}`}
+        fill="none"
+        aria-hidden="true"
+        className="block"
+      >
+        {style === 'solid' && (
+          <path d={shape.path} fill="var(--rating-star-empty)" />
+        )}
+        <defs>
+          <clipPath id={clipPathId}>
+            <rect x={clipX} y="0" width={clipWidth} height={shape.height} />
+          </clipPath>
+        </defs>
+        {style === 'outline' ? (
+          <>
+            <path d={shape.path} fill="none" stroke="var(--rating-star-empty)" strokeWidth={1} />
+            <path
+              d={shape.path}
+              fill="var(--rating-star-fill)"
+              stroke="var(--rating-star-fill)"
+              strokeWidth={1}
+              clipPath={`url(#${clipPathId})`}
+            />
+          </>
+        ) : (
+          <path
+            d={shape.path}
+            fill="var(--rating-star-fill)"
+            clipPath={`url(#${clipPathId})`}
+          />
+        )}
+      </svg>
+    </div>
+  );
+});

package/src/components/RatingStar/RatingStar.types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'react';
+
+export type RatingStarStyle = 'solid' | 'outline';
+export type RatingStarState = 'empty' | 'half' | 'filled';
+export type RatingStarDirection = 'ltr' | 'rtl';
+
+export interface RatingStarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+  /** Visual style. */
+  style?: RatingStarStyle;
+  /** Display state of a single star. */
+  state?: RatingStarState;
+  /** Brand color mode: true => green, false => orange. */
+  brand?: boolean;
+  /** Rendering direction for half state. */
+  direction?: RatingStarDirection;
+  /** Visual size in pixels. */
+  size?: number;
+}

package/src/components/RatingStar/RatingStar.variants.ts

@@ -0,0 +1,34 @@
+import type { RatingStarStyle } from './RatingStar.types';
+
+export interface RatingStarTone {
+  fillVarClass: string;
+  emptyVarClass: string;
+}
+
+export const RATING_STAR_TONE_MAP: Record<'brand' | 'neutral', RatingStarTone> = {
+  brand: {
+    fillVarClass:
+      '[--rating-star-fill:var(--color-border-primary,rgba(27,131,84,1))] dark:[--rating-star-fill:rgba(84,192,138,1)]',
+    emptyVarClass:
+      '[--rating-star-empty:rgba(229,231,235,1)] dark:[--rating-star-empty:rgba(75,85,99,1)]',
+  },
+  neutral: {
+    fillVarClass:
+      '[--rating-star-fill:rgba(219,161,2,1)] dark:[--rating-star-fill:rgba(250,204,21,1)]',
+    emptyVarClass:
+      '[--rating-star-empty:rgba(229,231,235,1)] dark:[--rating-star-empty:rgba(75,85,99,1)]',
+  },
+};
+
+export const RATING_STAR_VIEWBOX: Record<RatingStarStyle, { width: number; height: number; path: string }> = {
+  solid: {
+    width: 27,
+    height: 26,
+    path: 'M12.1685 0.719655C12.645 -0.239884 14.0217 -0.239886 14.4981 0.719653L17.6121 6.9907C17.8013 7.37174 18.167 7.63584 18.5901 7.69694L25.5531 8.70255C26.6185 8.85642 27.0439 10.1577 26.273 10.9046L21.2345 15.786C20.9284 16.0825 20.7887 16.5099 20.8609 16.9287L22.0504 23.8212C22.2324 24.8759 21.1186 25.6801 20.1657 25.1822L13.9378 21.928C13.5594 21.7302 13.1073 21.7302 12.7289 21.928L6.50099 25.1822C5.54806 25.6801 4.43431 24.8759 4.6163 23.8212L5.80572 16.9287C5.87799 16.5099 5.73829 16.0825 5.43215 15.786L0.393683 10.9046C-0.377257 10.1577 0.048156 8.85642 1.11357 8.70255L8.07657 7.69694C8.49964 7.63584 8.86538 7.37174 9.05458 6.9907L12.1685 0.719655Z',
+  },
+  outline: {
+    width: 24,
+    height: 23,
+    path: 'M11.0957 0.852539C11.3288 0.38311 12.0052 0.383113 12.2383 0.852539L14.9629 6.33887C15.2019 6.82026 15.6635 7.15268 16.1953 7.22949L22.2871 8.10938C22.8126 8.18527 23.0138 8.82112 22.6406 9.18262L18.2324 13.4531C17.8463 13.8272 17.6693 14.3676 17.7607 14.8975L18.8018 20.9287C18.8892 21.4364 18.3499 21.8378 17.877 21.5908L12.4268 18.7441C11.9506 18.4954 11.3824 18.4954 10.9062 18.7441L5.45703 21.5908C4.98398 21.838 4.44466 21.4365 4.53223 20.9287L5.57227 14.8975C5.66368 14.3676 5.48673 13.8272 5.10059 13.4531L0.692383 9.18262C0.319248 8.82112 0.520382 8.18527 1.0459 8.10938L7.13867 7.22949C7.67043 7.15262 8.13111 6.82019 8.37012 6.33887L11.0957 0.852539Z',
+  },
+};

package/src/components/RatingStar/index.ts

@@ -0,0 +1,7 @@
+export { RatingStar } from './RatingStar';
+export type {
+  RatingStarProps,
+  RatingStarStyle,
+  RatingStarState,
+  RatingStarDirection,
+} from './RatingStar.types';