@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/input/Rating.item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.item.cjs","names":["unwrapButtonGlyph","slotRendersContent","React","renderSlot","cn","StarIcon","ratingItemClassNames","ratingDisplayClassNames","ratingClassNames","getDirection","composeEventHandlers","isOwnEvent","focusRing","materialiseSlotContent","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_direction","require_styles","require_Button_slots","require_icons","require_events","react","react_jsx_runtime","FILLED_COLOR","UNFILLED_COLOR","resolveRatingColor","color","sizeMap","targetPaddingMap","DEFAULT_GLYPHS","resolveGlyph","slot","renders","glyph","button","useGlyphWarnings","empty","component","name","useStarGlyphs","filled","iconFilled","outline","iconOutline","onlyOne","filledGlyph","outlineGlyph","starLook","glyphs","GlyphLayer","className","StarGlyph","rest","percent","fraction","starSize","size","unfilled","starClassName","iconClassName","look","noop","INERT_RATING_CONTEXT","RatingContext","useRatingContext","useRatingItemRegistry","registry","counts","value","count","useRatingItemChecks","max","hasItems","RatingItem","ctx","registerItem","ownGlyphs","starProps","half","drawn","pick","rect","event","onClick","radio","onPointerMove","radioKey","radioValue","index","radioProps","key","onMouseEnter","ratingItems","items","children","i"],"sources":["../../../src/components/input/Rating.item.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ratingClassNames,\n  ratingDisplayClassNames,\n  ratingItemClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { reportMissingContext, warnOnce } from '../../lib/dev';\nimport { getDirection } from '../../lib/direction';\nimport { isOwnEvent } from '../../lib/events';\nimport { StarIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { unwrapButtonGlyph, type UnwrappedButton } from '../button/Button.slots';\n\n/** Color of a rating's filled stars. */\nexport type RatingColor = 'neutral' | 'brand' | 'marigold';\n\n/** Filled-star color of each `color` (unfilled stars keep {@link UNFILLED_COLOR}). */\nexport const FILLED_COLOR: Readonly<Record<RatingColor, string>> = {\n  marigold: 'text-rating',\n  brand: 'text-primary',\n  neutral: 'text-foreground',\n};\n\n/** Unfilled-star color in every `color`: the outline token, with a 3:1 non-text contrast. */\nconst UNFILLED_COLOR = 'text-stroke-accessible';\n\n/**\n * The color a root draws (Phase 4 D24): `color` itself, or `'marigold'` (the default) for\n * `undefined` and for a value outside the union from untyped code.\n */\nexport function resolveRatingColor(color: RatingColor | undefined): RatingColor {\n  return color === 'brand' || color === 'neutral' ? color : 'marigold';\n}\n\n/** Icon size of each star size. */\nconst sizeMap: Record<Size, string> = {\n  'extra-small': 'h-3 w-3',\n  small: 'h-4 w-4',\n  medium: 'h-5 w-5',\n  large: 'h-6 w-6',\n  'extra-large': 'h-8 w-8',\n};\n\n/** Padding that gives every interactive star a target of at least 24×24px (WCAG 2.5.8). */\nconst targetPaddingMap: Record<Size, string> = {\n  'extra-small': 'p-1.5', // 12px icon + 12px\n  small: 'p-1', // 16px icon + 8px\n  medium: 'p-0.5', // 20px icon + 4px\n  large: 'p-0.5',\n  'extra-large': 'p-0.5',\n};\n\n/**\n * The glyphs a star draws, from an `iconFilled`/`iconOutline` pair resolved by\n * {@link useStarGlyphs}: `null` draws the default star.\n */\nexport interface StarGlyphs {\n  /** The glyph of a filled star, or `null` for the default star. */\n  filled: Slot<'span'> | null;\n  /** The glyph of an unfilled star, or `null` for the default star. */\n  outline: Slot<'span'> | null;\n}\n\n/** The default stars: what a rating without an icon pair draws. */\nconst DEFAULT_GLYPHS: StarGlyphs = { filled: null, outline: null };\n\n/** One glyph of an icon pair, resolved, with what its development warnings need. */\ninterface ResolvedGlyph {\n  /** What the star draws: the glyph, or `null` for the default star. */\n  glyph: Slot<'span'> | null;\n  /** The button unwrapped from the slot, if any. */\n  button: UnwrappedButton | null;\n  /** The slot is set but renders nothing (an unwrapped button warns about itself instead). */\n  empty: boolean;\n}\n\n/**\n * One glyph of an icon pair (C-SLOTS: a required indicator, and a glyph inside a wired button,\n * the radio of a Rating): a button passed as the glyph is unwrapped, its children becoming the\n * glyph, and `null`, `undefined` and a value that renders nothing keep the default star.\n */\nfunction resolveGlyph(slot: Slot<'span'> | undefined): ResolvedGlyph {\n  const { glyph, button } = unwrapButtonGlyph(slot);\n  const renders = slotRendersContent(glyph);\n  return {\n    glyph: renders ? glyph : null,\n    button,\n    empty: slot != null && button === null && !renders,\n  };\n}\n\n/** The development warnings of one glyph of a pair (C-DEV: from an effect, once per key). */\nfunction useGlyphWarnings(\n  component: string,\n  name: 'iconFilled' | 'iconOutline',\n  { button, empty }: ResolvedGlyph,\n) {\n  React.useEffect(() => {\n    if (empty) {\n      warnOnce(\n        `${component}:${name}-empty`,\n        `${component}: \\`${name}\\` renders nothing, so the default star is used.`,\n      );\n    }\n    if (button) {\n      warnOnce(\n        `${component}:${name}-button`,\n        `${component}: \\`${name}\\` received ${button}; its children render as the glyph of the ` +\n          'star and its props were dropped (buttons cannot be nested). Pass icon content ' +\n          `instead, e.g. \\`${name}={<MyIcon />}\\`.`,\n      );\n    }\n  }, [component, name, empty, button]);\n}\n\n/**\n * The glyphs of a component's `iconFilled`/`iconOutline` pair (Phase 4 D25), with the pair's\n * development warnings, each from an effect and once per key (C-DEV): only one of the two set\n * (`<component>:icon-pair`), a glyph that renders nothing (`<component>:iconFilled-empty`,\n * `<component>:iconOutline-empty`) and a button unwrapped (`<component>:iconFilled-button`,\n * `<component>:iconOutline-button`). The result keeps its identity while the glyphs do.\n *\n * @param component The public name that starts the keys and messages: `'Rating'`,\n *   `'RatingDisplay'` or `'Rating.Item'`.\n */\nexport function useStarGlyphs(\n  component: string,\n  iconFilled: Slot<'span'> | undefined,\n  iconOutline: Slot<'span'> | undefined,\n): StarGlyphs {\n  const filled = resolveGlyph(iconFilled);\n  const outline = resolveGlyph(iconOutline);\n  // A custom glyph next to the default star mixes shapes.\n  const onlyOne = (iconFilled === undefined) !== (iconOutline === undefined);\n  React.useEffect(() => {\n    if (onlyOne) {\n      warnOnce(\n        `${component}:icon-pair`,\n        `${component}: pass both \\`iconFilled\\` and \\`iconOutline\\`: with only one of them, the ` +\n          'other is the default star.',\n      );\n    }\n  }, [component, onlyOne]);\n  useGlyphWarnings(component, 'iconFilled', filled);\n  useGlyphWarnings(component, 'iconOutline', outline);\n  const filledGlyph = filled.glyph;\n  const outlineGlyph = outline.glyph;\n  return React.useMemo(\n    () => ({ filled: filledGlyph, outline: outlineGlyph }),\n    [filledGlyph, outlineGlyph],\n  );\n}\n\n/** How a whole star looks, filled or unfilled: see {@link starLook}. */\ninterface StarLook {\n  /** The color class: the rating color when filled, else the outline token. */\n  colorClass: string;\n  /** The glyph of the pair to draw (`null`: the default star). */\n  glyph: Slot<'span'> | null;\n}\n\n/**\n * The one look of a star (every star kind draws through it): a filled star takes the rating\n * color and the filled glyph of the pair, an unfilled star the outline token and the outline\n * glyph.\n */\nfunction starLook(filled: boolean, color: RatingColor, glyphs: StarGlyphs): StarLook {\n  return filled\n    ? { colorClass: FILLED_COLOR[color], glyph: glyphs.filled }\n    : { colorClass: UNFILLED_COLOR, glyph: glyphs.outline };\n}\n\n/**\n * Draws only the glyph of a star, in the color its box sets: the custom `glyph` when there is\n * one, in a decorative span of the star's size (an SVG child fills it), else the default star,\n * filled or outlined. The box around it (a {@link StarGlyph}, or the radio of a whole star)\n * carries the color.\n */\nfunction GlyphLayer({\n  filled,\n  glyph,\n  className,\n}: {\n  filled: boolean;\n  glyph: Slot<'span'> | null;\n  className: string;\n}) {\n  if (glyph != null) {\n    return renderSlot(glyph, 'span', cn('inline-flex shrink-0 [&>svg]:size-full', className), {\n      'aria-hidden': true,\n    });\n  }\n  return filled ? (\n    <StarIcon className={className} />\n  ) : (\n    <StarIcon className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.5} />\n  );\n}\nGlyphLayer.displayName = 'GlyphLayer';\n\n/** Properties of {@link StarGlyph}. */\nexport interface StarGlyphProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /**\n   * How much of the star is filled: `1` filled, `0` unfilled, and a partly filled star in between\n   * (clamped to 0…1, drawn to the whole percent).\n   */\n  fraction: number;\n  /** The star size. */\n  size: Size;\n  /** The color of the filled glyph; the unfilled glyph keeps the 3:1 outline token. */\n  color: RatingColor;\n  /** The glyphs to draw, from {@link useStarGlyphs}. */\n  glyphs: StarGlyphs;\n  /**\n   * The stable classes of the star's `<span>` (P3-00), first in its class list, before\n   * `className`: a star part, and a RatingItem's root.\n   */\n  starClassName?: string;\n  /** The stable classes of every glyph it draws (P3-00): the icon parts. */\n  iconClassName?: string;\n  /** Ref to the star's `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/**\n * One star drawn filled to `fraction`, in a `<span>` that is the star's own box, so it draws the\n * same wherever it is placed: at 1 the filled glyph in the rating color, at 0 the unfilled glyph\n * in the outline color, and in between the unfilled glyph with the filled glyph clipped over it\n * from the inline start to the fraction (the reading direction of the stars, also under RTL).\n * The stars of a RatingDisplay (each item, and the compact star) and the half stars of a Rating\n * draw through it; a whole radio star is a box itself (its button carries the color) and draws\n * its glyph with {@link GlyphLayer}.\n */\nexport const StarGlyph = ({\n  fraction,\n  size,\n  color,\n  glyphs,\n  starClassName,\n  iconClassName,\n  className,\n  ref,\n  ...rest\n}: StarGlyphProps) => {\n  const percent = Math.round(Math.min(1, Math.max(0, fraction)) * 100);\n  const starSize = sizeMap[size];\n  if (percent > 0 && percent < 100) {\n    const unfilled = starLook(false, color, glyphs);\n    const filled = starLook(true, color, glyphs);\n    return (\n      <span\n        {...rest}\n        ref={ref}\n        className={cn(starClassName, 'relative inline-flex', unfilled.colorClass, className)}\n      >\n        <GlyphLayer filled={false} glyph={unfilled.glyph} className={cn(iconClassName, starSize)} />\n        <span\n          className={cn('absolute inset-y-0 start-0 flex overflow-hidden', filled.colorClass)}\n          style={{ width: `${percent}%` }}\n        >\n          <GlyphLayer\n            filled\n            glyph={filled.glyph}\n            className={cn(iconClassName, starSize, 'shrink-0')}\n          />\n        </span>\n      </span>\n    );\n  }\n  const filled = percent === 100;\n  const look = starLook(filled, color, glyphs);\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={cn(starClassName, 'inline-flex', look.colorClass, className)}\n    >\n      <GlyphLayer filled={filled} glyph={look.glyph} className={cn(iconClassName, starSize)} />\n    </span>\n  );\n};\nStarGlyph.displayName = 'StarGlyph';\n\n/**\n * What a Rating or a RatingDisplay tells its items: the stars render from it, whether the root\n * generated them or the consumer passed them as children.\n */\nexport interface RatingContextValue {\n  /** `'input'`: the items are the radios of a Rating; `'display'`: the drawn stars of a RatingDisplay. */\n  kind: 'input' | 'display';\n  /** The chosen rating (a Rating) or the displayed value (a RatingDisplay). */\n  value: number;\n  /** The value the stars draw: a Rating's hover preview while there is one, else `value`. */\n  drawnValue: number;\n  /** The grain of the values a star chooses. */\n  step: 0.5 | 1;\n  /** The number of stars: the key range, and the second argument of `starLabel`. */\n  max: number;\n  /** The star size. */\n  size: Size;\n  /** The color of the filled stars (resolved: a value outside the union is `'marigold'`). */\n  color: RatingColor;\n  /**\n   * The glyphs of the root's `iconFilled`/`iconOutline` pair, for every item (an item that sets\n   * its own pair draws that one instead).\n   */\n  glyphs: StarGlyphs;\n  /** The stars cannot be chosen or previewed (a disabled Rating, and every RatingDisplay). */\n  disabled: boolean;\n  /** The accessible name of the radio that chooses `value` (the root's `labels.star`). */\n  starLabel: (value: number, max: number) => string;\n  /** The roving `tabIndex` of the radio whose `data-roving-value` is `key`. */\n  getTabIndex: (key: string) => number;\n  /**\n   * Chooses `value`; with `focus`, the radio of `value` also takes focus, without scrolling (a\n   * pointer click on a half star).\n   */\n  choose: (value: number, focus: boolean) => void;\n  /** Previews `value` under the mouse (`0` clears the preview). */\n  preview: (value: number) => void;\n  /** Counts a mounted item's value; returns the cleanup that uncounts it. */\n  registerItem: (value: number) => () => void;\n}\n\nconst noop = () => {};\n\n/**\n * The context of an item outside a rating (production; development throws there): an empty,\n * read-only star. RatingDisplay starts from it, since its stars choose, preview and rove nothing.\n */\nexport const INERT_RATING_CONTEXT: RatingContextValue = {\n  kind: 'display',\n  value: 0,\n  drawnValue: 0,\n  step: 1,\n  max: 5,\n  size: 'medium',\n  color: 'marigold',\n  glyphs: DEFAULT_GLYPHS,\n  disabled: true,\n  starLabel: () => '',\n  getTabIndex: () => -1,\n  choose: noop,\n  preview: noop,\n  registerItem: () => noop,\n};\n\n/** Provided by Rating and RatingDisplay to their items; `null` outside them. */\nexport const RatingContext = React.createContext<RatingContextValue | null>(null);\nRatingContext.displayName = 'RatingContext';\n\n/** C-CONTEXT: throws in development, logs once and returns the inert value in production. */\nexport function useRatingContext(): RatingContextValue {\n  const context = React.useContext(RatingContext);\n  if (context) return context;\n  reportMissingContext('Rating.Item', 'a rating (Rating or RatingDisplay)');\n  return INERT_RATING_CONTEXT;\n}\n\n/** The item registry of a rating root: the values of its mounted items, counted. */\nexport interface RatingItemRegistry {\n  /**\n   * Counts a mounted item's value and returns the cleanup that uncounts it. Items call it from a\n   * layout effect.\n   */\n  registerItem: (value: number) => () => void;\n  /**\n   * How many mounted items have each value. The items change it in their layout effects, so read\n   * it in an effect of the root (a passive effect runs after every layout effect of the commit),\n   * never during render.\n   */\n  counts: ReadonlyMap<number, number>;\n}\n\n/**\n * A rating root's item registry: one object, with the same `registerItem` and `counts`, for the\n * root's lifetime, so the memoized context keeps its identity.\n */\nexport function useRatingItemRegistry(): RatingItemRegistry {\n  const [registry] = React.useState<RatingItemRegistry>(() => {\n    const counts = new Map<number, number>();\n    return {\n      counts,\n      registerItem: (value) => {\n        counts.set(value, (counts.get(value) ?? 0) + 1);\n        return () => {\n          const count = (counts.get(value) ?? 1) - 1;\n          if (count > 0) counts.set(value, count);\n          else counts.delete(value);\n        };\n      },\n    };\n  });\n  return registry;\n}\n\n/**\n * The item value checks of a rating root (Phase 4 D26, C-DEV): a passive effect, run after every\n * layout effect of the commit (so every item's own layout effect has already registered its\n * value, C-HOOKS: `counts` is never read during render), that warns once per problem found. No\n * dependency array: `counts` keeps its identity for the root's lifetime (`useRatingItemRegistry`)\n * and only its entries change in place, so the effect must re-run on every commit to see a later\n * change, exactly as the registration effects of `useListbox` do.\n *\n * - A value more than one item registers is not unique (`Rating.Item:duplicate:<value>`).\n * - A value that is not a whole number from 1 to `max` — untyped code, or a mistake — is not one\n *   of the star positions the root can draw (`Rating.Item:value:<value>`).\n * - `hasItems`: the root draws its own children instead of the `max` generated stars, which\n *   always cover every value on their own; only then can a value from 1 to `max` be left without\n *   an item, and only the first one found is named (`Rating.Item:missing`).\n */\nexport function useRatingItemChecks(\n  counts: ReadonlyMap<number, number>,\n  max: number,\n  hasItems: boolean,\n): void {\n  React.useEffect(() => {\n    for (const [value, count] of counts) {\n      if (count > 1) {\n        warnOnce(\n          `Rating.Item:duplicate:${value}`,\n          `Rating.Item: two items have the value ${value}; give each star a unique value from 1 ` +\n            'to max.',\n        );\n      }\n      if (!Number.isInteger(value) || value < 1 || value > max) {\n        warnOnce(\n          `Rating.Item:value:${value}`,\n          `Rating.Item: the value ${value} is not a whole number from 1 to ${max}.`,\n        );\n      }\n    }\n    if (!hasItems) return;\n    for (let value = 1; value <= max; value++) {\n      if (!counts.has(value)) {\n        warnOnce(\n          'Rating.Item:missing',\n          `Rating.Item: no item has the value ${value}; pass one Rating.Item per value from 1 to ` +\n            'max.',\n        );\n        return;\n      }\n    }\n  });\n}\n\n/** Properties for the RatingItem component (`Rating.Item`, `RatingDisplay.Item`). */\nexport interface RatingItemProps extends Omit<\n  React.HTMLAttributes<HTMLElement>,\n  'role' | 'aria-checked' | 'aria-label' | 'aria-labelledby' | 'tabIndex' | 'children' | 'onChange'\n> {\n  /**\n   * The star's full value, from 1 to the root's `max`: the rating it chooses (with the root's\n   * `step={0.5}` also its half, `value - 0.5`), or shows.\n   */\n  value: number;\n  /**\n   * The glyph of this star when filled, as a pair with `iconOutline`, following the rules of the\n   * root's `iconFilled` (a button is unwrapped, its children becoming the glyph, and a value or\n   * button children that render nothing draw the default star). An item that sets either glyph\n   * of the pair (`null` included) draws its own pair instead of its root's, and a glyph it leaves\n   * unset is the default star (a development warning says so).\n   */\n  iconFilled?: Slot<'span'>;\n  /**\n   * The glyph of this star when unfilled, as a pair with `iconFilled`, following the rules of the\n   * root's `iconOutline` (a button is unwrapped, its children becoming the glyph, and a value or\n   * button children that render nothing draw the default star). An item that sets either glyph\n   * of the pair (`null` included) draws its own pair instead of its root's, and a glyph it leaves\n   * unset is the default star (a development warning says so).\n   */\n  iconOutline?: Slot<'span'>;\n  /**\n   * Ref to the star element: the `role=\"radio\"` button in a Rating, the star `<span>` in a Rating\n   * with `step={0.5}` and in a RatingDisplay.\n   */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * One star of a `Rating` or a `RatingDisplay`, drawn from its root: pass one per value from 1 to\n * `max` as the root's children, in place of the stars it generates.\n *\n * - In a `Rating` it is a `role=\"radio\"` button named by the root's `labels.star` (\"2 stars\"),\n *   chosen, previewed and roved as a generated star is. With the root's `step={0.5}` it is a star\n *   `<span>`, one pointer target that chooses by the pointer's position, holding two transparent\n *   radios: its half value, then its full value (\"1.5 stars\", \"2 stars\"). In a `RatingDisplay` it\n *   is a star filled, partly filled or empty by the root's value.\n * - It draws the root's `color` and glyph pair, or its own `iconFilled`/`iconOutline` pair when it\n *   sets one.\n * - `className`, `style`, `data-*`, the other attributes, the handlers and `ref` go to that star\n *   element, the consumer's handlers first. The role, name, checked state and tab stop of its\n *   radio (or radios) come from the root.\n * - At `step={1}` the consumer's `onClick` and `onMouseEnter` compose onto the radio itself, so a\n *   `preventDefault()` in either vetoes that star's own activation or hover preview. At\n *   `step={0.5}` `onClick` and `onPointerMove` compose onto the star `<span>` instead: its two\n *   radios run their own `onClick` first and choose their own value directly (Space, Enter, a\n *   screen reader, or `radio.click()`), before the click bubbles to the span's composed handler,\n *   so a `preventDefault()` there vetoes only a pointer-chosen value, never a keyboard or\n *   assistive-technology activation.\n * - Outside a `Rating` or `RatingDisplay` it throws in development.\n */\nexport const RatingItem = ({\n  value,\n  iconFilled,\n  iconOutline,\n  className,\n  ref,\n  ...rest\n}: RatingItemProps) => {\n  const ctx = useRatingContext();\n  const { registerItem } = ctx;\n  React.useLayoutEffect(() => registerItem(value), [registerItem, value]);\n  // The item's own pair, when it sets either glyph, replaces its root's pair as a whole.\n  const ownGlyphs = useStarGlyphs('Rating.Item', iconFilled, iconOutline);\n  const glyphs = iconFilled !== undefined || iconOutline !== undefined ? ownGlyphs : ctx.glyphs;\n  // Stable classes (P3-00): the item's own, then its rating's part classes (a public component\n  // rendered inside another, D5), whether the root generated the item or the consumer passed it.\n  const starClassName =\n    ctx.kind === 'display'\n      ? cn(ratingItemClassNames.root, ratingDisplayClassNames.star)\n      : cn(ratingItemClassNames.root, ratingClassNames.star);\n  const iconClassName =\n    ctx.kind === 'display'\n      ? cn(ratingItemClassNames.icon, ratingDisplayClassNames.icon)\n      : cn(ratingItemClassNames.icon, ratingClassNames.icon);\n\n  // `rest` keeps every consumer handler: a star without handlers of its own (a display star)\n  // spreads them all, and a star that composes one takes that one out of `rest` itself.\n  if (ctx.kind === 'display') {\n    // Filled by the share of this star that the drawn value covers.\n    return (\n      <StarGlyph\n        {...rest}\n        ref={ref as React.Ref<HTMLSpanElement>}\n        starClassName={starClassName}\n        iconClassName={iconClassName}\n        className={className}\n        fraction={ctx.drawnValue - (value - 1)}\n        size={ctx.size}\n        color={ctx.color}\n        glyphs={glyphs}\n      />\n    );\n  }\n\n  if (ctx.step === 0.5) {\n    // A half star (D22): one pointer target (a span with the padding of a whole star) holding two\n    // transparent radios over its halves, the half value first. The pointer chooses by its\n    // position over the star; the keyboard and screen readers use the radios. The span composes\n    // the consumer's click and pointer-move handlers with its own.\n    const { onClick, onPointerMove, ...starProps } = rest;\n    const half = value - 0.5;\n    const drawn = ctx.drawnValue;\n    const fraction = drawn >= value ? 1 : drawn >= half ? 0.5 : 0;\n    // The value under the pointer: the half from the inline start (mirrored under RTL), else the\n    // full value.\n    const pick = (event: React.MouseEvent<HTMLElement>) => {\n      const rect = event.currentTarget.getBoundingClientRect();\n      const fromStart =\n        getDirection(event.currentTarget) === 'rtl'\n          ? rect.right - event.clientX\n          : event.clientX - rect.left;\n      return fromStart < rect.width / 2 ? half : value;\n    };\n    return (\n      <span\n        {...starProps}\n        ref={ref as React.Ref<HTMLSpanElement>}\n        className={cn(\n          starClassName,\n          'relative inline-flex cursor-pointer rounded',\n          targetPaddingMap[ctx.size],\n          'has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-ring',\n          ctx.disabled && 'cursor-not-allowed',\n          className,\n        )}\n        onClick={composeEventHandlers(onClick, (event) => {\n          // A click on a radio (Space, Enter, a screen reader, `click()`) chose its own value, and\n          // a click without a press (`detail` 0) or from a portal inside the star is not the\n          // pointer's to place. The radio search is bounded to this star: an unrelated\n          // `role=\"radio\"` ancestor elsewhere in the document (the star's own radios have no\n          // children, so a pointer click's target is never one of them, `pointer-events-none`)\n          // must not silence every pointer pick.\n          if (ctx.disabled || event.detail === 0 || !isOwnEvent(event)) return;\n          const radio = (event.target as Element).closest('[role=\"radio\"]');\n          if (radio && event.currentTarget.contains(radio)) return;\n          ctx.choose(pick(event), true);\n        })}\n        onPointerMove={composeEventHandlers(onPointerMove, (event) => {\n          if (!ctx.disabled && event.pointerType === 'mouse' && isOwnEvent(event)) {\n            ctx.preview(pick(event));\n          }\n        })}\n      >\n        <StarGlyph\n          iconClassName={iconClassName}\n          fraction={fraction}\n          size={ctx.size}\n          color={ctx.color}\n          glyphs={glyphs}\n        />\n        {[half, value].map((radioValue, index) => {\n          const radioKey = String(radioValue);\n          return (\n            <button\n              key={radioKey}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={ctx.value === radioValue}\n              aria-label={ctx.starLabel(radioValue, ctx.max)}\n              data-roving-value={radioKey}\n              tabIndex={ctx.disabled ? -1 : ctx.getTabIndex(radioKey)}\n              disabled={ctx.disabled}\n              className={cn(\n                'pointer-events-none absolute inset-y-0 w-1/2 border-0 bg-transparent p-0 opacity-0',\n                index === 0 ? 'start-0' : 'end-0',\n              )}\n              onClick={() => {\n                // Choosing the current value again is a no-op for both callbacks (useControllable).\n                if (!ctx.disabled) ctx.choose(radioValue, false);\n              }}\n            />\n          );\n        })}\n      </span>\n    );\n  }\n\n  // The radio composes the consumer's click and mouse-enter handlers with its own. It is the\n  // star's box itself (the button carries the color), so it draws only the glyph.\n  const { onClick, onMouseEnter, ...radioProps } = rest;\n  const key = String(value);\n  const filled = ctx.drawnValue >= value;\n  const look = starLook(filled, ctx.color, glyphs);\n  return (\n    <button\n      type=\"button\"\n      {...radioProps}\n      ref={ref as React.Ref<HTMLButtonElement>}\n      role=\"radio\"\n      aria-checked={ctx.value === value}\n      aria-label={ctx.starLabel(value, ctx.max)}\n      data-roving-value={key}\n      tabIndex={ctx.disabled ? -1 : ctx.getTabIndex(key)}\n      disabled={ctx.disabled}\n      className={cn(\n        starClassName,\n        'inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed',\n        targetPaddingMap[ctx.size],\n        focusRing,\n        look.colorClass,\n        className,\n      )}\n      onClick={composeEventHandlers(onClick, (event) => {\n        // Choosing the current star again is a no-op for both callbacks (useControllable). A click\n        // from a portal rendered inside the star (a custom glyph's popup) is not the star's.\n        if (!ctx.disabled && isOwnEvent(event)) ctx.choose(value, false);\n      })}\n      onMouseEnter={composeEventHandlers(onMouseEnter, (event) => {\n        if (!ctx.disabled && isOwnEvent(event)) ctx.preview(value);\n      })}\n    >\n      <GlyphLayer\n        filled={filled}\n        glyph={look.glyph}\n        className={cn(iconClassName, sizeMap[ctx.size])}\n      />\n    </button>\n  );\n};\nRatingItem.displayName = 'RatingItem';\n\n/**\n * A root's stars: its `children` when they render content, else one generated item per value\n * from 1 to `max`.\n */\nexport function ratingItems(children: React.ReactNode, max: number): React.ReactNode {\n  const items = materialiseSlotContent(children);\n  return slotRendersContent(items)\n    ? items\n    : Array.from({ length: max }, (_, i) => <RatingItem key={i + 1} value={i + 1} />);\n}\n"],"mappings":"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"}

package/dist/components/input/Rating.item.mjs

@@ -0,0 +1,255 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { reportMissingContext as t, warnOnce as n } from "../../lib/dev.mjs";
+import { materialiseSlotContent as r, renderSlot as i, slotRendersContent as a } from "../../lib/slot.mjs";
+import { composeEventHandlers as o } from "../../lib/composeEventHandlers.mjs";
+import { ratingClassNames as s, ratingDisplayClassNames as c, ratingItemClassNames as l } from "../../lib/classNames.mjs";
+import { getDirection as u } from "../../lib/direction.mjs";
+import { focusRing as d } from "../../lib/styles.mjs";
+import { unwrapButtonGlyph as f } from "../button/Button.slots.mjs";
+import { StarIcon as p } from "../../lib/icons.mjs";
+import { isOwnEvent as m } from "../../lib/events.mjs";
+import * as h from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/input/Rating.item.tsx
+var v = {
+	marigold: "text-rating",
+	brand: "text-primary",
+	neutral: "text-foreground"
+}, y = "text-stroke-accessible";
+function b(e) {
+	return e === "brand" || e === "neutral" ? e : "marigold";
+}
+var x = {
+	"extra-small": "h-3 w-3",
+	small: "h-4 w-4",
+	medium: "h-5 w-5",
+	large: "h-6 w-6",
+	"extra-large": "h-8 w-8"
+}, S = {
+	"extra-small": "p-1.5",
+	small: "p-1",
+	medium: "p-0.5",
+	large: "p-0.5",
+	"extra-large": "p-0.5"
+}, C = {
+	filled: null,
+	outline: null
+};
+function w(e) {
+	let { glyph: t, button: n } = f(e), r = a(t);
+	return {
+		glyph: r ? t : null,
+		button: n,
+		empty: e != null && n === null && !r
+	};
+}
+function T(e, t, { button: r, empty: i }) {
+	h.useEffect(() => {
+		i && n(`${e}:${t}-empty`, `${e}: \`${t}\` renders nothing, so the default star is used.`), r && n(`${e}:${t}-button`, `${e}: \`${t}\` received ${r}; its children render as the glyph of the star and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`${t}={<MyIcon />}\`.`);
+	}, [
+		e,
+		t,
+		i,
+		r
+	]);
+}
+function E(e, t, r) {
+	let i = w(t), a = w(r), o = t === void 0 != (r === void 0);
+	h.useEffect(() => {
+		o && n(`${e}:icon-pair`, `${e}: pass both \`iconFilled\` and \`iconOutline\`: with only one of them, the other is the default star.`);
+	}, [e, o]), T(e, "iconFilled", i), T(e, "iconOutline", a);
+	let s = i.glyph, c = a.glyph;
+	return h.useMemo(() => ({
+		filled: s,
+		outline: c
+	}), [s, c]);
+}
+function D(e, t, n) {
+	return e ? {
+		colorClass: v[t],
+		glyph: n.filled
+	} : {
+		colorClass: y,
+		glyph: n.outline
+	};
+}
+function O({ filled: t, glyph: n, className: r }) {
+	return n == null ? t ? /* @__PURE__ */ g(p, { className: r }) : /* @__PURE__ */ g(p, {
+		className: r,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5
+	}) : i(n, "span", e("inline-flex shrink-0 [&>svg]:size-full", r), { "aria-hidden": !0 });
+}
+O.displayName = "GlyphLayer";
+var k = ({ fraction: t, size: n, color: r, glyphs: i, starClassName: a, iconClassName: o, className: s, ref: c, ...l }) => {
+	let u = Math.round(Math.min(1, Math.max(0, t)) * 100), d = x[n];
+	if (u > 0 && u < 100) {
+		let t = D(!1, r, i), n = D(!0, r, i);
+		return /* @__PURE__ */ _("span", {
+			...l,
+			ref: c,
+			className: e(a, "relative inline-flex", t.colorClass, s),
+			children: [/* @__PURE__ */ g(O, {
+				filled: !1,
+				glyph: t.glyph,
+				className: e(o, d)
+			}), /* @__PURE__ */ g("span", {
+				className: e("absolute inset-y-0 start-0 flex overflow-hidden", n.colorClass),
+				style: { width: `${u}%` },
+				children: /* @__PURE__ */ g(O, {
+					filled: !0,
+					glyph: n.glyph,
+					className: e(o, d, "shrink-0")
+				})
+			})]
+		});
+	}
+	let f = u === 100, p = D(f, r, i);
+	return /* @__PURE__ */ g("span", {
+		...l,
+		ref: c,
+		className: e(a, "inline-flex", p.colorClass, s),
+		children: /* @__PURE__ */ g(O, {
+			filled: f,
+			glyph: p.glyph,
+			className: e(o, d)
+		})
+	});
+};
+k.displayName = "StarGlyph";
+var A = () => {}, j = {
+	kind: "display",
+	value: 0,
+	drawnValue: 0,
+	step: 1,
+	max: 5,
+	size: "medium",
+	color: "marigold",
+	glyphs: C,
+	disabled: !0,
+	starLabel: () => "",
+	getTabIndex: () => -1,
+	choose: A,
+	preview: A,
+	registerItem: () => A
+}, M = h.createContext(null);
+M.displayName = "RatingContext";
+function N() {
+	return h.useContext(M) || (t("Rating.Item", "a rating (Rating or RatingDisplay)"), j);
+}
+function P() {
+	let [e] = h.useState(() => {
+		let e = /* @__PURE__ */ new Map();
+		return {
+			counts: e,
+			registerItem: (t) => (e.set(t, (e.get(t) ?? 0) + 1), () => {
+				let n = (e.get(t) ?? 1) - 1;
+				n > 0 ? e.set(t, n) : e.delete(t);
+			})
+		};
+	});
+	return e;
+}
+function F(e, t, r) {
+	h.useEffect(() => {
+		for (let [r, i] of e) i > 1 && n(`Rating.Item:duplicate:${r}`, `Rating.Item: two items have the value ${r}; give each star a unique value from 1 to max.`), (!Number.isInteger(r) || r < 1 || r > t) && n(`Rating.Item:value:${r}`, `Rating.Item: the value ${r} is not a whole number from 1 to ${t}.`);
+		if (r) {
+			for (let r = 1; r <= t; r++) if (!e.has(r)) {
+				n("Rating.Item:missing", `Rating.Item: no item has the value ${r}; pass one Rating.Item per value from 1 to max.`);
+				return;
+			}
+		}
+	});
+}
+var I = ({ value: t, iconFilled: n, iconOutline: r, className: i, ref: a, ...f }) => {
+	let p = N(), { registerItem: v } = p;
+	h.useLayoutEffect(() => v(t), [v, t]);
+	let y = E("Rating.Item", n, r), b = n !== void 0 || r !== void 0 ? y : p.glyphs, C = p.kind === "display" ? e(l.root, c.star) : e(l.root, s.star), w = p.kind === "display" ? e(l.icon, c.icon) : e(l.icon, s.icon);
+	if (p.kind === "display") return /* @__PURE__ */ g(k, {
+		...f,
+		ref: a,
+		starClassName: C,
+		iconClassName: w,
+		className: i,
+		fraction: p.drawnValue - (t - 1),
+		size: p.size,
+		color: p.color,
+		glyphs: b
+	});
+	if (p.step === .5) {
+		let { onClick: n, onPointerMove: r, ...s } = f, c = t - .5, l = p.drawnValue, d = l >= t ? 1 : l >= c ? .5 : 0, h = (e) => {
+			let n = e.currentTarget.getBoundingClientRect();
+			return (u(e.currentTarget) === "rtl" ? n.right - e.clientX : e.clientX - n.left) < n.width / 2 ? c : t;
+		};
+		return /* @__PURE__ */ _("span", {
+			...s,
+			ref: a,
+			className: e(C, "relative inline-flex cursor-pointer rounded", S[p.size], "has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-ring", p.disabled && "cursor-not-allowed", i),
+			onClick: o(n, (e) => {
+				if (p.disabled || e.detail === 0 || !m(e)) return;
+				let t = e.target.closest("[role=\"radio\"]");
+				t && e.currentTarget.contains(t) || p.choose(h(e), !0);
+			}),
+			onPointerMove: o(r, (e) => {
+				!p.disabled && e.pointerType === "mouse" && m(e) && p.preview(h(e));
+			}),
+			children: [/* @__PURE__ */ g(k, {
+				iconClassName: w,
+				fraction: d,
+				size: p.size,
+				color: p.color,
+				glyphs: b
+			}), [c, t].map((t, n) => {
+				let r = String(t);
+				return /* @__PURE__ */ g("button", {
+					type: "button",
+					role: "radio",
+					"aria-checked": p.value === t,
+					"aria-label": p.starLabel(t, p.max),
+					"data-roving-value": r,
+					tabIndex: p.disabled ? -1 : p.getTabIndex(r),
+					disabled: p.disabled,
+					className: e("pointer-events-none absolute inset-y-0 w-1/2 border-0 bg-transparent p-0 opacity-0", n === 0 ? "start-0" : "end-0"),
+					onClick: () => {
+						p.disabled || p.choose(t, !1);
+					}
+				}, r);
+			})]
+		});
+	}
+	let { onClick: T, onMouseEnter: A, ...j } = f, M = String(t), P = p.drawnValue >= t, F = D(P, p.color, b);
+	return /* @__PURE__ */ g("button", {
+		type: "button",
+		...j,
+		ref: a,
+		role: "radio",
+		"aria-checked": p.value === t,
+		"aria-label": p.starLabel(t, p.max),
+		"data-roving-value": M,
+		tabIndex: p.disabled ? -1 : p.getTabIndex(M),
+		disabled: p.disabled,
+		className: e(C, "inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed", S[p.size], d, F.colorClass, i),
+		onClick: o(T, (e) => {
+			!p.disabled && m(e) && p.choose(t, !1);
+		}),
+		onMouseEnter: o(A, (e) => {
+			!p.disabled && m(e) && p.preview(t);
+		}),
+		children: /* @__PURE__ */ g(O, {
+			filled: P,
+			glyph: F.glyph,
+			className: e(w, x[p.size])
+		})
+	});
+};
+I.displayName = "RatingItem";
+function L(e, t) {
+	let n = r(e);
+	return a(n) ? n : Array.from({ length: t }, (e, t) => /* @__PURE__ */ g(I, { value: t + 1 }, t + 1));
+}
+//#endregion
+export { v as FILLED_COLOR, j as INERT_RATING_CONTEXT, M as RatingContext, I as RatingItem, k as StarGlyph, L as ratingItems, b as resolveRatingColor, N as useRatingContext, F as useRatingItemChecks, P as useRatingItemRegistry, E as useStarGlyphs };
+
+//# sourceMappingURL=Rating.item.mjs.map

package/dist/components/input/Rating.item.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.item.mjs","names":["React","FILLED_COLOR","UNFILLED_COLOR","resolveRatingColor","color","sizeMap","targetPaddingMap","DEFAULT_GLYPHS","resolveGlyph","unwrapButtonGlyph","slot","renders","slotRendersContent","glyph","button","useGlyphWarnings","empty","warnOnce","component","name","useStarGlyphs","filled","iconFilled","outline","iconOutline","onlyOne","filledGlyph","outlineGlyph","starLook","glyphs","GlyphLayer","StarIcon","renderSlot","cn","className","StarGlyph","rest","percent","fraction","starSize","size","unfilled","starClassName","iconClassName","look","noop","INERT_RATING_CONTEXT","RatingContext","useRatingContext","reportMissingContext","useRatingItemRegistry","registry","counts","value","count","useRatingItemChecks","max","hasItems","RatingItem","ctx","registerItem","ownGlyphs","ratingItemClassNames","ratingDisplayClassNames","ratingClassNames","starProps","half","drawn","pick","rect","event","getDirection","composeEventHandlers","onClick","isOwnEvent","radio","onPointerMove","radioKey","radioValue","index","radioProps","key","focusRing","onMouseEnter","ratingItems","items","materialiseSlotContent","children","i"],"sources":["../../../src/components/input/Rating.item.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  ratingClassNames,\n  ratingDisplayClassNames,\n  ratingItemClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { reportMissingContext, warnOnce } from '../../lib/dev';\nimport { getDirection } from '../../lib/direction';\nimport { isOwnEvent } from '../../lib/events';\nimport { StarIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { unwrapButtonGlyph, type UnwrappedButton } from '../button/Button.slots';\n\n/** Color of a rating's filled stars. */\nexport type RatingColor = 'neutral' | 'brand' | 'marigold';\n\n/** Filled-star color of each `color` (unfilled stars keep {@link UNFILLED_COLOR}). */\nexport const FILLED_COLOR: Readonly<Record<RatingColor, string>> = {\n  marigold: 'text-rating',\n  brand: 'text-primary',\n  neutral: 'text-foreground',\n};\n\n/** Unfilled-star color in every `color`: the outline token, with a 3:1 non-text contrast. */\nconst UNFILLED_COLOR = 'text-stroke-accessible';\n\n/**\n * The color a root draws (Phase 4 D24): `color` itself, or `'marigold'` (the default) for\n * `undefined` and for a value outside the union from untyped code.\n */\nexport function resolveRatingColor(color: RatingColor | undefined): RatingColor {\n  return color === 'brand' || color === 'neutral' ? color : 'marigold';\n}\n\n/** Icon size of each star size. */\nconst sizeMap: Record<Size, string> = {\n  'extra-small': 'h-3 w-3',\n  small: 'h-4 w-4',\n  medium: 'h-5 w-5',\n  large: 'h-6 w-6',\n  'extra-large': 'h-8 w-8',\n};\n\n/** Padding that gives every interactive star a target of at least 24×24px (WCAG 2.5.8). */\nconst targetPaddingMap: Record<Size, string> = {\n  'extra-small': 'p-1.5', // 12px icon + 12px\n  small: 'p-1', // 16px icon + 8px\n  medium: 'p-0.5', // 20px icon + 4px\n  large: 'p-0.5',\n  'extra-large': 'p-0.5',\n};\n\n/**\n * The glyphs a star draws, from an `iconFilled`/`iconOutline` pair resolved by\n * {@link useStarGlyphs}: `null` draws the default star.\n */\nexport interface StarGlyphs {\n  /** The glyph of a filled star, or `null` for the default star. */\n  filled: Slot<'span'> | null;\n  /** The glyph of an unfilled star, or `null` for the default star. */\n  outline: Slot<'span'> | null;\n}\n\n/** The default stars: what a rating without an icon pair draws. */\nconst DEFAULT_GLYPHS: StarGlyphs = { filled: null, outline: null };\n\n/** One glyph of an icon pair, resolved, with what its development warnings need. */\ninterface ResolvedGlyph {\n  /** What the star draws: the glyph, or `null` for the default star. */\n  glyph: Slot<'span'> | null;\n  /** The button unwrapped from the slot, if any. */\n  button: UnwrappedButton | null;\n  /** The slot is set but renders nothing (an unwrapped button warns about itself instead). */\n  empty: boolean;\n}\n\n/**\n * One glyph of an icon pair (C-SLOTS: a required indicator, and a glyph inside a wired button,\n * the radio of a Rating): a button passed as the glyph is unwrapped, its children becoming the\n * glyph, and `null`, `undefined` and a value that renders nothing keep the default star.\n */\nfunction resolveGlyph(slot: Slot<'span'> | undefined): ResolvedGlyph {\n  const { glyph, button } = unwrapButtonGlyph(slot);\n  const renders = slotRendersContent(glyph);\n  return {\n    glyph: renders ? glyph : null,\n    button,\n    empty: slot != null && button === null && !renders,\n  };\n}\n\n/** The development warnings of one glyph of a pair (C-DEV: from an effect, once per key). */\nfunction useGlyphWarnings(\n  component: string,\n  name: 'iconFilled' | 'iconOutline',\n  { button, empty }: ResolvedGlyph,\n) {\n  React.useEffect(() => {\n    if (empty) {\n      warnOnce(\n        `${component}:${name}-empty`,\n        `${component}: \\`${name}\\` renders nothing, so the default star is used.`,\n      );\n    }\n    if (button) {\n      warnOnce(\n        `${component}:${name}-button`,\n        `${component}: \\`${name}\\` received ${button}; its children render as the glyph of the ` +\n          'star and its props were dropped (buttons cannot be nested). Pass icon content ' +\n          `instead, e.g. \\`${name}={<MyIcon />}\\`.`,\n      );\n    }\n  }, [component, name, empty, button]);\n}\n\n/**\n * The glyphs of a component's `iconFilled`/`iconOutline` pair (Phase 4 D25), with the pair's\n * development warnings, each from an effect and once per key (C-DEV): only one of the two set\n * (`<component>:icon-pair`), a glyph that renders nothing (`<component>:iconFilled-empty`,\n * `<component>:iconOutline-empty`) and a button unwrapped (`<component>:iconFilled-button`,\n * `<component>:iconOutline-button`). The result keeps its identity while the glyphs do.\n *\n * @param component The public name that starts the keys and messages: `'Rating'`,\n *   `'RatingDisplay'` or `'Rating.Item'`.\n */\nexport function useStarGlyphs(\n  component: string,\n  iconFilled: Slot<'span'> | undefined,\n  iconOutline: Slot<'span'> | undefined,\n): StarGlyphs {\n  const filled = resolveGlyph(iconFilled);\n  const outline = resolveGlyph(iconOutline);\n  // A custom glyph next to the default star mixes shapes.\n  const onlyOne = (iconFilled === undefined) !== (iconOutline === undefined);\n  React.useEffect(() => {\n    if (onlyOne) {\n      warnOnce(\n        `${component}:icon-pair`,\n        `${component}: pass both \\`iconFilled\\` and \\`iconOutline\\`: with only one of them, the ` +\n          'other is the default star.',\n      );\n    }\n  }, [component, onlyOne]);\n  useGlyphWarnings(component, 'iconFilled', filled);\n  useGlyphWarnings(component, 'iconOutline', outline);\n  const filledGlyph = filled.glyph;\n  const outlineGlyph = outline.glyph;\n  return React.useMemo(\n    () => ({ filled: filledGlyph, outline: outlineGlyph }),\n    [filledGlyph, outlineGlyph],\n  );\n}\n\n/** How a whole star looks, filled or unfilled: see {@link starLook}. */\ninterface StarLook {\n  /** The color class: the rating color when filled, else the outline token. */\n  colorClass: string;\n  /** The glyph of the pair to draw (`null`: the default star). */\n  glyph: Slot<'span'> | null;\n}\n\n/**\n * The one look of a star (every star kind draws through it): a filled star takes the rating\n * color and the filled glyph of the pair, an unfilled star the outline token and the outline\n * glyph.\n */\nfunction starLook(filled: boolean, color: RatingColor, glyphs: StarGlyphs): StarLook {\n  return filled\n    ? { colorClass: FILLED_COLOR[color], glyph: glyphs.filled }\n    : { colorClass: UNFILLED_COLOR, glyph: glyphs.outline };\n}\n\n/**\n * Draws only the glyph of a star, in the color its box sets: the custom `glyph` when there is\n * one, in a decorative span of the star's size (an SVG child fills it), else the default star,\n * filled or outlined. The box around it (a {@link StarGlyph}, or the radio of a whole star)\n * carries the color.\n */\nfunction GlyphLayer({\n  filled,\n  glyph,\n  className,\n}: {\n  filled: boolean;\n  glyph: Slot<'span'> | null;\n  className: string;\n}) {\n  if (glyph != null) {\n    return renderSlot(glyph, 'span', cn('inline-flex shrink-0 [&>svg]:size-full', className), {\n      'aria-hidden': true,\n    });\n  }\n  return filled ? (\n    <StarIcon className={className} />\n  ) : (\n    <StarIcon className={className} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.5} />\n  );\n}\nGlyphLayer.displayName = 'GlyphLayer';\n\n/** Properties of {@link StarGlyph}. */\nexport interface StarGlyphProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /**\n   * How much of the star is filled: `1` filled, `0` unfilled, and a partly filled star in between\n   * (clamped to 0…1, drawn to the whole percent).\n   */\n  fraction: number;\n  /** The star size. */\n  size: Size;\n  /** The color of the filled glyph; the unfilled glyph keeps the 3:1 outline token. */\n  color: RatingColor;\n  /** The glyphs to draw, from {@link useStarGlyphs}. */\n  glyphs: StarGlyphs;\n  /**\n   * The stable classes of the star's `<span>` (P3-00), first in its class list, before\n   * `className`: a star part, and a RatingItem's root.\n   */\n  starClassName?: string;\n  /** The stable classes of every glyph it draws (P3-00): the icon parts. */\n  iconClassName?: string;\n  /** Ref to the star's `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/**\n * One star drawn filled to `fraction`, in a `<span>` that is the star's own box, so it draws the\n * same wherever it is placed: at 1 the filled glyph in the rating color, at 0 the unfilled glyph\n * in the outline color, and in between the unfilled glyph with the filled glyph clipped over it\n * from the inline start to the fraction (the reading direction of the stars, also under RTL).\n * The stars of a RatingDisplay (each item, and the compact star) and the half stars of a Rating\n * draw through it; a whole radio star is a box itself (its button carries the color) and draws\n * its glyph with {@link GlyphLayer}.\n */\nexport const StarGlyph = ({\n  fraction,\n  size,\n  color,\n  glyphs,\n  starClassName,\n  iconClassName,\n  className,\n  ref,\n  ...rest\n}: StarGlyphProps) => {\n  const percent = Math.round(Math.min(1, Math.max(0, fraction)) * 100);\n  const starSize = sizeMap[size];\n  if (percent > 0 && percent < 100) {\n    const unfilled = starLook(false, color, glyphs);\n    const filled = starLook(true, color, glyphs);\n    return (\n      <span\n        {...rest}\n        ref={ref}\n        className={cn(starClassName, 'relative inline-flex', unfilled.colorClass, className)}\n      >\n        <GlyphLayer filled={false} glyph={unfilled.glyph} className={cn(iconClassName, starSize)} />\n        <span\n          className={cn('absolute inset-y-0 start-0 flex overflow-hidden', filled.colorClass)}\n          style={{ width: `${percent}%` }}\n        >\n          <GlyphLayer\n            filled\n            glyph={filled.glyph}\n            className={cn(iconClassName, starSize, 'shrink-0')}\n          />\n        </span>\n      </span>\n    );\n  }\n  const filled = percent === 100;\n  const look = starLook(filled, color, glyphs);\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={cn(starClassName, 'inline-flex', look.colorClass, className)}\n    >\n      <GlyphLayer filled={filled} glyph={look.glyph} className={cn(iconClassName, starSize)} />\n    </span>\n  );\n};\nStarGlyph.displayName = 'StarGlyph';\n\n/**\n * What a Rating or a RatingDisplay tells its items: the stars render from it, whether the root\n * generated them or the consumer passed them as children.\n */\nexport interface RatingContextValue {\n  /** `'input'`: the items are the radios of a Rating; `'display'`: the drawn stars of a RatingDisplay. */\n  kind: 'input' | 'display';\n  /** The chosen rating (a Rating) or the displayed value (a RatingDisplay). */\n  value: number;\n  /** The value the stars draw: a Rating's hover preview while there is one, else `value`. */\n  drawnValue: number;\n  /** The grain of the values a star chooses. */\n  step: 0.5 | 1;\n  /** The number of stars: the key range, and the second argument of `starLabel`. */\n  max: number;\n  /** The star size. */\n  size: Size;\n  /** The color of the filled stars (resolved: a value outside the union is `'marigold'`). */\n  color: RatingColor;\n  /**\n   * The glyphs of the root's `iconFilled`/`iconOutline` pair, for every item (an item that sets\n   * its own pair draws that one instead).\n   */\n  glyphs: StarGlyphs;\n  /** The stars cannot be chosen or previewed (a disabled Rating, and every RatingDisplay). */\n  disabled: boolean;\n  /** The accessible name of the radio that chooses `value` (the root's `labels.star`). */\n  starLabel: (value: number, max: number) => string;\n  /** The roving `tabIndex` of the radio whose `data-roving-value` is `key`. */\n  getTabIndex: (key: string) => number;\n  /**\n   * Chooses `value`; with `focus`, the radio of `value` also takes focus, without scrolling (a\n   * pointer click on a half star).\n   */\n  choose: (value: number, focus: boolean) => void;\n  /** Previews `value` under the mouse (`0` clears the preview). */\n  preview: (value: number) => void;\n  /** Counts a mounted item's value; returns the cleanup that uncounts it. */\n  registerItem: (value: number) => () => void;\n}\n\nconst noop = () => {};\n\n/**\n * The context of an item outside a rating (production; development throws there): an empty,\n * read-only star. RatingDisplay starts from it, since its stars choose, preview and rove nothing.\n */\nexport const INERT_RATING_CONTEXT: RatingContextValue = {\n  kind: 'display',\n  value: 0,\n  drawnValue: 0,\n  step: 1,\n  max: 5,\n  size: 'medium',\n  color: 'marigold',\n  glyphs: DEFAULT_GLYPHS,\n  disabled: true,\n  starLabel: () => '',\n  getTabIndex: () => -1,\n  choose: noop,\n  preview: noop,\n  registerItem: () => noop,\n};\n\n/** Provided by Rating and RatingDisplay to their items; `null` outside them. */\nexport const RatingContext = React.createContext<RatingContextValue | null>(null);\nRatingContext.displayName = 'RatingContext';\n\n/** C-CONTEXT: throws in development, logs once and returns the inert value in production. */\nexport function useRatingContext(): RatingContextValue {\n  const context = React.useContext(RatingContext);\n  if (context) return context;\n  reportMissingContext('Rating.Item', 'a rating (Rating or RatingDisplay)');\n  return INERT_RATING_CONTEXT;\n}\n\n/** The item registry of a rating root: the values of its mounted items, counted. */\nexport interface RatingItemRegistry {\n  /**\n   * Counts a mounted item's value and returns the cleanup that uncounts it. Items call it from a\n   * layout effect.\n   */\n  registerItem: (value: number) => () => void;\n  /**\n   * How many mounted items have each value. The items change it in their layout effects, so read\n   * it in an effect of the root (a passive effect runs after every layout effect of the commit),\n   * never during render.\n   */\n  counts: ReadonlyMap<number, number>;\n}\n\n/**\n * A rating root's item registry: one object, with the same `registerItem` and `counts`, for the\n * root's lifetime, so the memoized context keeps its identity.\n */\nexport function useRatingItemRegistry(): RatingItemRegistry {\n  const [registry] = React.useState<RatingItemRegistry>(() => {\n    const counts = new Map<number, number>();\n    return {\n      counts,\n      registerItem: (value) => {\n        counts.set(value, (counts.get(value) ?? 0) + 1);\n        return () => {\n          const count = (counts.get(value) ?? 1) - 1;\n          if (count > 0) counts.set(value, count);\n          else counts.delete(value);\n        };\n      },\n    };\n  });\n  return registry;\n}\n\n/**\n * The item value checks of a rating root (Phase 4 D26, C-DEV): a passive effect, run after every\n * layout effect of the commit (so every item's own layout effect has already registered its\n * value, C-HOOKS: `counts` is never read during render), that warns once per problem found. No\n * dependency array: `counts` keeps its identity for the root's lifetime (`useRatingItemRegistry`)\n * and only its entries change in place, so the effect must re-run on every commit to see a later\n * change, exactly as the registration effects of `useListbox` do.\n *\n * - A value more than one item registers is not unique (`Rating.Item:duplicate:<value>`).\n * - A value that is not a whole number from 1 to `max` — untyped code, or a mistake — is not one\n *   of the star positions the root can draw (`Rating.Item:value:<value>`).\n * - `hasItems`: the root draws its own children instead of the `max` generated stars, which\n *   always cover every value on their own; only then can a value from 1 to `max` be left without\n *   an item, and only the first one found is named (`Rating.Item:missing`).\n */\nexport function useRatingItemChecks(\n  counts: ReadonlyMap<number, number>,\n  max: number,\n  hasItems: boolean,\n): void {\n  React.useEffect(() => {\n    for (const [value, count] of counts) {\n      if (count > 1) {\n        warnOnce(\n          `Rating.Item:duplicate:${value}`,\n          `Rating.Item: two items have the value ${value}; give each star a unique value from 1 ` +\n            'to max.',\n        );\n      }\n      if (!Number.isInteger(value) || value < 1 || value > max) {\n        warnOnce(\n          `Rating.Item:value:${value}`,\n          `Rating.Item: the value ${value} is not a whole number from 1 to ${max}.`,\n        );\n      }\n    }\n    if (!hasItems) return;\n    for (let value = 1; value <= max; value++) {\n      if (!counts.has(value)) {\n        warnOnce(\n          'Rating.Item:missing',\n          `Rating.Item: no item has the value ${value}; pass one Rating.Item per value from 1 to ` +\n            'max.',\n        );\n        return;\n      }\n    }\n  });\n}\n\n/** Properties for the RatingItem component (`Rating.Item`, `RatingDisplay.Item`). */\nexport interface RatingItemProps extends Omit<\n  React.HTMLAttributes<HTMLElement>,\n  'role' | 'aria-checked' | 'aria-label' | 'aria-labelledby' | 'tabIndex' | 'children' | 'onChange'\n> {\n  /**\n   * The star's full value, from 1 to the root's `max`: the rating it chooses (with the root's\n   * `step={0.5}` also its half, `value - 0.5`), or shows.\n   */\n  value: number;\n  /**\n   * The glyph of this star when filled, as a pair with `iconOutline`, following the rules of the\n   * root's `iconFilled` (a button is unwrapped, its children becoming the glyph, and a value or\n   * button children that render nothing draw the default star). An item that sets either glyph\n   * of the pair (`null` included) draws its own pair instead of its root's, and a glyph it leaves\n   * unset is the default star (a development warning says so).\n   */\n  iconFilled?: Slot<'span'>;\n  /**\n   * The glyph of this star when unfilled, as a pair with `iconFilled`, following the rules of the\n   * root's `iconOutline` (a button is unwrapped, its children becoming the glyph, and a value or\n   * button children that render nothing draw the default star). An item that sets either glyph\n   * of the pair (`null` included) draws its own pair instead of its root's, and a glyph it leaves\n   * unset is the default star (a development warning says so).\n   */\n  iconOutline?: Slot<'span'>;\n  /**\n   * Ref to the star element: the `role=\"radio\"` button in a Rating, the star `<span>` in a Rating\n   * with `step={0.5}` and in a RatingDisplay.\n   */\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * One star of a `Rating` or a `RatingDisplay`, drawn from its root: pass one per value from 1 to\n * `max` as the root's children, in place of the stars it generates.\n *\n * - In a `Rating` it is a `role=\"radio\"` button named by the root's `labels.star` (\"2 stars\"),\n *   chosen, previewed and roved as a generated star is. With the root's `step={0.5}` it is a star\n *   `<span>`, one pointer target that chooses by the pointer's position, holding two transparent\n *   radios: its half value, then its full value (\"1.5 stars\", \"2 stars\"). In a `RatingDisplay` it\n *   is a star filled, partly filled or empty by the root's value.\n * - It draws the root's `color` and glyph pair, or its own `iconFilled`/`iconOutline` pair when it\n *   sets one.\n * - `className`, `style`, `data-*`, the other attributes, the handlers and `ref` go to that star\n *   element, the consumer's handlers first. The role, name, checked state and tab stop of its\n *   radio (or radios) come from the root.\n * - At `step={1}` the consumer's `onClick` and `onMouseEnter` compose onto the radio itself, so a\n *   `preventDefault()` in either vetoes that star's own activation or hover preview. At\n *   `step={0.5}` `onClick` and `onPointerMove` compose onto the star `<span>` instead: its two\n *   radios run their own `onClick` first and choose their own value directly (Space, Enter, a\n *   screen reader, or `radio.click()`), before the click bubbles to the span's composed handler,\n *   so a `preventDefault()` there vetoes only a pointer-chosen value, never a keyboard or\n *   assistive-technology activation.\n * - Outside a `Rating` or `RatingDisplay` it throws in development.\n */\nexport const RatingItem = ({\n  value,\n  iconFilled,\n  iconOutline,\n  className,\n  ref,\n  ...rest\n}: RatingItemProps) => {\n  const ctx = useRatingContext();\n  const { registerItem } = ctx;\n  React.useLayoutEffect(() => registerItem(value), [registerItem, value]);\n  // The item's own pair, when it sets either glyph, replaces its root's pair as a whole.\n  const ownGlyphs = useStarGlyphs('Rating.Item', iconFilled, iconOutline);\n  const glyphs = iconFilled !== undefined || iconOutline !== undefined ? ownGlyphs : ctx.glyphs;\n  // Stable classes (P3-00): the item's own, then its rating's part classes (a public component\n  // rendered inside another, D5), whether the root generated the item or the consumer passed it.\n  const starClassName =\n    ctx.kind === 'display'\n      ? cn(ratingItemClassNames.root, ratingDisplayClassNames.star)\n      : cn(ratingItemClassNames.root, ratingClassNames.star);\n  const iconClassName =\n    ctx.kind === 'display'\n      ? cn(ratingItemClassNames.icon, ratingDisplayClassNames.icon)\n      : cn(ratingItemClassNames.icon, ratingClassNames.icon);\n\n  // `rest` keeps every consumer handler: a star without handlers of its own (a display star)\n  // spreads them all, and a star that composes one takes that one out of `rest` itself.\n  if (ctx.kind === 'display') {\n    // Filled by the share of this star that the drawn value covers.\n    return (\n      <StarGlyph\n        {...rest}\n        ref={ref as React.Ref<HTMLSpanElement>}\n        starClassName={starClassName}\n        iconClassName={iconClassName}\n        className={className}\n        fraction={ctx.drawnValue - (value - 1)}\n        size={ctx.size}\n        color={ctx.color}\n        glyphs={glyphs}\n      />\n    );\n  }\n\n  if (ctx.step === 0.5) {\n    // A half star (D22): one pointer target (a span with the padding of a whole star) holding two\n    // transparent radios over its halves, the half value first. The pointer chooses by its\n    // position over the star; the keyboard and screen readers use the radios. The span composes\n    // the consumer's click and pointer-move handlers with its own.\n    const { onClick, onPointerMove, ...starProps } = rest;\n    const half = value - 0.5;\n    const drawn = ctx.drawnValue;\n    const fraction = drawn >= value ? 1 : drawn >= half ? 0.5 : 0;\n    // The value under the pointer: the half from the inline start (mirrored under RTL), else the\n    // full value.\n    const pick = (event: React.MouseEvent<HTMLElement>) => {\n      const rect = event.currentTarget.getBoundingClientRect();\n      const fromStart =\n        getDirection(event.currentTarget) === 'rtl'\n          ? rect.right - event.clientX\n          : event.clientX - rect.left;\n      return fromStart < rect.width / 2 ? half : value;\n    };\n    return (\n      <span\n        {...starProps}\n        ref={ref as React.Ref<HTMLSpanElement>}\n        className={cn(\n          starClassName,\n          'relative inline-flex cursor-pointer rounded',\n          targetPaddingMap[ctx.size],\n          'has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-ring',\n          ctx.disabled && 'cursor-not-allowed',\n          className,\n        )}\n        onClick={composeEventHandlers(onClick, (event) => {\n          // A click on a radio (Space, Enter, a screen reader, `click()`) chose its own value, and\n          // a click without a press (`detail` 0) or from a portal inside the star is not the\n          // pointer's to place. The radio search is bounded to this star: an unrelated\n          // `role=\"radio\"` ancestor elsewhere in the document (the star's own radios have no\n          // children, so a pointer click's target is never one of them, `pointer-events-none`)\n          // must not silence every pointer pick.\n          if (ctx.disabled || event.detail === 0 || !isOwnEvent(event)) return;\n          const radio = (event.target as Element).closest('[role=\"radio\"]');\n          if (radio && event.currentTarget.contains(radio)) return;\n          ctx.choose(pick(event), true);\n        })}\n        onPointerMove={composeEventHandlers(onPointerMove, (event) => {\n          if (!ctx.disabled && event.pointerType === 'mouse' && isOwnEvent(event)) {\n            ctx.preview(pick(event));\n          }\n        })}\n      >\n        <StarGlyph\n          iconClassName={iconClassName}\n          fraction={fraction}\n          size={ctx.size}\n          color={ctx.color}\n          glyphs={glyphs}\n        />\n        {[half, value].map((radioValue, index) => {\n          const radioKey = String(radioValue);\n          return (\n            <button\n              key={radioKey}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={ctx.value === radioValue}\n              aria-label={ctx.starLabel(radioValue, ctx.max)}\n              data-roving-value={radioKey}\n              tabIndex={ctx.disabled ? -1 : ctx.getTabIndex(radioKey)}\n              disabled={ctx.disabled}\n              className={cn(\n                'pointer-events-none absolute inset-y-0 w-1/2 border-0 bg-transparent p-0 opacity-0',\n                index === 0 ? 'start-0' : 'end-0',\n              )}\n              onClick={() => {\n                // Choosing the current value again is a no-op for both callbacks (useControllable).\n                if (!ctx.disabled) ctx.choose(radioValue, false);\n              }}\n            />\n          );\n        })}\n      </span>\n    );\n  }\n\n  // The radio composes the consumer's click and mouse-enter handlers with its own. It is the\n  // star's box itself (the button carries the color), so it draws only the glyph.\n  const { onClick, onMouseEnter, ...radioProps } = rest;\n  const key = String(value);\n  const filled = ctx.drawnValue >= value;\n  const look = starLook(filled, ctx.color, glyphs);\n  return (\n    <button\n      type=\"button\"\n      {...radioProps}\n      ref={ref as React.Ref<HTMLButtonElement>}\n      role=\"radio\"\n      aria-checked={ctx.value === value}\n      aria-label={ctx.starLabel(value, ctx.max)}\n      data-roving-value={key}\n      tabIndex={ctx.disabled ? -1 : ctx.getTabIndex(key)}\n      disabled={ctx.disabled}\n      className={cn(\n        starClassName,\n        'inline-flex cursor-pointer rounded border-0 bg-transparent transition-colors motion-reduce:transition-none disabled:cursor-not-allowed',\n        targetPaddingMap[ctx.size],\n        focusRing,\n        look.colorClass,\n        className,\n      )}\n      onClick={composeEventHandlers(onClick, (event) => {\n        // Choosing the current star again is a no-op for both callbacks (useControllable). A click\n        // from a portal rendered inside the star (a custom glyph's popup) is not the star's.\n        if (!ctx.disabled && isOwnEvent(event)) ctx.choose(value, false);\n      })}\n      onMouseEnter={composeEventHandlers(onMouseEnter, (event) => {\n        if (!ctx.disabled && isOwnEvent(event)) ctx.preview(value);\n      })}\n    >\n      <GlyphLayer\n        filled={filled}\n        glyph={look.glyph}\n        className={cn(iconClassName, sizeMap[ctx.size])}\n      />\n    </button>\n  );\n};\nRatingItem.displayName = 'RatingItem';\n\n/**\n * A root's stars: its `children` when they render content, else one generated item per value\n * from 1 to `max`.\n */\nexport function ratingItems(children: React.ReactNode, max: number): React.ReactNode {\n  const items = materialiseSlotContent(children);\n  return slotRendersContent(items)\n    ? items\n    : Array.from({ length: max }, (_, i) => <RatingItem key={i + 1} value={i + 1} />);\n}\n"],"mappings":"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"}