@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["Slider","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderThumb"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Label as AriaLabel,\n  Slider as AriaSlider,\n  SliderOutput as AriaSliderOutput,\n  SliderThumb as AriaSliderThumb,\n  SliderTrack as AriaSliderTrack,\n  type SliderProps as AriaSliderProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\n\n/**\n * Slider, ported from the legacy shadcn/Radix component.\n *\n * Census: 4 call sites, all single-thumb, none of them named. Radix only\n * generates thumb labels at two or more thumbs, so all four are announced\n * as an unnamed slider -- `AudioSettings.tsx` even renders a\n * `<Label>Input Volume</Label>` directly above one, with no `htmlFor` and\n * no `id`, so it is associated with nothing at all.\n *\n * `label` IS REQUIRED here, the same answer Progress and Dialog give.\n *\n * THE PALETTE DELIBERATELY DOES NOT MATCH SWITCH, and the reason is worth\n * stating because the two look like the same problem. A Switch has no\n * fill: its track is one colour and the thumb tells you the state, so\n * `border` unchecked and `primary-strong` checked works. A Slider has a\n * filled portion whose LENGTH is the value -- and `primary-strong` on a\n * `border` track is 1.01:1. The two halves would be the same grey and the\n * value would be invisible to anyone not reading the thumb position.\n *\n * So the track is `muted` with a `border` boundary and the fill is\n * `primary-strong`: fill against track 4.61:1, track against page 5.25:1,\n * thumb against fill 5.20:1, thumb edge against track 4.65:1. All four\n * pairs are in the build-failing contrast contract.\n *\n * Three legacy defects go with it: the focus ring was `ring-1`, a 1px\n * box-shadow that forced-colors discards entirely; the thumb border was\n * `border-primary/50`, an alpha edge with no measurable contrast; and the\n * disabled styling used `disabled:`, a pseudo-class that only applies to\n * form elements -- Radix renders a `<span role=\"slider\">`, so a disabled\n * slider looked exactly like an enabled one.\n */\nexport const sliderVariants = cva([\"flex w-full flex-col gap-2 box-border font-sans\"]);\n\nexport const sliderTrackVariants = cva([\n  \"relative flex w-full items-center\",\n  // h-6 is the TRACK ROW, not the visible bar -- it gives the 24px\n  // pointer target WCAG 2.5.8 wants. The bar itself is drawn inside.\n  \"h-6\",\n]);\n\nexport const sliderBarVariants = cva([\n  \"absolute h-2 w-full rounded-pill box-border\",\n  \"bg-muted border-(length:--border-width) border-border\",\n]);\n\nexport const sliderFillVariants = cva([\"absolute h-2 rounded-pill bg-primary-strong\"]);\n\nexport const sliderThumbVariants = cva([\n  // size-6 is 24px: WCAG 2.5.8 target size. The legacy thumb was 16px at\n  // all four call sites, and one of them crams the whole control into 80px.\n  \"size-6 rounded-full box-border\",\n  \"bg-background border-(length:--border-width) border-border shadow-surface\",\n  \"cursor-grab data-[dragging]:cursor-grabbing\",\n  // A real outline, not the legacy ring-1 box-shadow.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  // data-[disabled], NOT disabled:. The legacy used the CSS :disabled\n  // pseudo-class, which applies only to form elements -- React Aria and\n  // Radix both render a span, so that styling never fired.\n  \"data-[disabled]:cursor-not-allowed\",\n]);\n\n/**\n * A value along a range.\n *\n * @example\n * <Slider label=\"Input volume\" defaultValue={40} />\n * <Slider label=\"Playback position\" value={t} onChange={seek} formatOptions={{ style: \"percent\" }} />\n */\nexport interface SliderProps\n  extends Omit<AriaSliderProps<number>, \"className\" | \"style\" | \"children\"> {\n  /**\n   * What the slider controls, and its accessible name.\n   *\n   * **Required.** All four legacy call sites are unnamed sliders.\n   */\n  label: ReactNode;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /**\n   * Show the current value as text beside the label.\n   *\n   * On by default. It is the text equivalent of the fill length, which\n   * matters because in greyscale the filled and unfilled halves are\n   * distinguishable only by the thumb.\n   */\n  showValue?: boolean;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  { label, labelHidden, showValue = true, className, ...props },\n  ref,\n) {\n  return (\n    <AriaSlider\n      ref={ref}\n      {...props}\n      data-slot=\"slider\"\n      className={cn(sliderVariants(), className)}\n    >\n      <div className={cnAll(\"flex items-center justify-between gap-2\", labelHidden && \"sr-only\")}>\n        <AriaLabel\n          data-slot=\"slider-label\"\n          className=\"text-sm leading-(--leading-normal) text-foreground\"\n        >\n          {label}\n        </AriaLabel>\n        {showValue ? (\n          <AriaSliderOutput\n            data-slot=\"slider-output\"\n            className=\"text-sm leading-(--leading-normal) text-muted-foreground\"\n          />\n        ) : null}\n      </div>\n\n      <AriaSliderTrack data-slot=\"slider-track\" className={sliderTrackVariants()}>\n        {({ state }) => (\n          <>\n            <div data-slot=\"slider-bar\" className={sliderBarVariants()} />\n            <div\n              data-slot=\"slider-fill\"\n              className={sliderFillVariants()}\n              style={{ width: `${state.getThumbPercent(0) * 100}%` }}\n            />\n            <AriaSliderThumb data-slot=\"slider-thumb\" className={sliderThumbVariants()} />\n          </>\n        )}\n      </AriaSliderTrack>\n    </AriaSlider>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,iBAAiB,IAAI,CAAC,iDAAiD,CAAC;AAErF,MAAa,sBAAsB,IAAI,CACrC,qCAGA,KACF,CAAC;AAED,MAAa,oBAAoB,IAAI,CACnC,+CACA,uDACF,CAAC;AAED,MAAa,qBAAqB,IAAI,CAAC,6CAA6C,CAAC;AAErF,MAAa,sBAAsB,IAAI;CAGrC;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAIA;AACF,CAAC;AA+BD,MAAaA,WAAS,WAAwC,SAASA,SACrE,EAAE,OAAO,aAAa,YAAY,MAAM,WAAW,GAAG,SACtD,KACA;CACA,OACE,qBAACC,QAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,eAAe,GAAG,SAAS;EAJ3C,UAAA,CAME,qBAAC,OAAD;GAAK,WAAW,MAAM,2CAA2C,eAAe,SAAS;GAAzF,UAAA,CACE,oBAACC,OAAD;IACE,aAAU;IACV,WAAU;IAET,UAAA;GACQ,CAAA,GACV,YACC,oBAACC,cAAD;IACE,aAAU;IACV,WAAU;GACX,CAAA,IACC,IACD;EAEL,CAAA,GAAA,oBAACC,aAAD;GAAiB,aAAU;GAAe,WAAW,oBAAoB;GACrE,WAAA,EAAE,YACF,qBAAA,UAAA,EAAA,UAAA;IACE,oBAAC,OAAD;KAAK,aAAU;KAAa,WAAW,kBAAkB;IAAI,CAAA;IAC7D,oBAAC,OAAD;KACE,aAAU;KACV,WAAW,mBAAmB;KAC9B,OAAO,EAAE,OAAO,GAAG,MAAM,gBAAgB,CAAC,IAAI,IAAI,GAAG;IACtD,CAAA;IACD,oBAACC,aAAD;KAAiB,aAAU;KAAe,WAAW,oBAAoB;IAAI,CAAA;GAC7E,EAAA,CAAA;EAEW,CAAA,CACP;;AAEhB,CAAC"}
+{"version":3,"file":"slider.js","names":["Slider","AriaSlider","AriaLabel","AriaSliderOutput","AriaSliderTrack","AriaSliderThumb"],"sources":["../../src/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport {\n  Fragment,\n  forwardRef,\n  useContext,\n  useId,\n  useState,\n  type ReactElement,\n  type ReactNode,\n  type RefAttributes,\n} from \"react\";\nimport {\n  Label as AriaLabel,\n  Slider as AriaSlider,\n  SliderOutput as AriaSliderOutput,\n  SliderStateContext,\n  SliderThumb as AriaSliderThumb,\n  SliderTrack as AriaSliderTrack,\n  type SliderProps as AriaSliderProps,\n} from \"react-aria-components\";\n\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Slider, ported from the legacy shadcn/Radix component.\n *\n * Census: 4 call sites, all single-thumb, none of them named. Radix only\n * generates thumb labels at two or more thumbs, so all four are announced\n * as an unnamed slider -- `AudioSettings.tsx` even renders a\n * `<Label>Input Volume</Label>` directly above one, with no `htmlFor` and\n * no `id`, so it is associated with nothing at all.\n *\n * `label` IS REQUIRED here, the same answer Progress and Dialog give.\n *\n * LOOK (UX owner's colours): a thin, rounded track in primary 200 (light\n * #FEEAE0, dark #441B00, role `slider-track`, no outline) with a fill in\n * `primary-strong` (the dark orange, so it reads against the pale track) and a\n * solid light thumb (`slider-thumb`) with a soft shadow. The label sits left\n * and the value right. The fill's LENGTH is the value.\n *\n * Contrast, from contrast-pairs.json (build-failing): fill against the track\n * 4.9:1 light / 8.3:1 dark; thumb against what it meets at its edge (the fill in\n * light, a 2px ring in the page colour in dark -- see `shadow.slider-thumb`)\n * 5.7:1 / 18.6:1. A near-white thumb on a light fill (dark) would otherwise\n * melt into it, and the old dark thumb (the card colour) all but vanished on the\n * page. The pale track is 1.12:1 / 1.3:1 on the page, under the 3:1 non-text\n * floor, by the same accepted trade-off as `--border`; the state is the EDGE OF\n * THE FILL (>= 4.9:1) plus the value text beside the label. The thumb is a 24px\n * target and rests on the track with a shadow.\n *\n * Three legacy defects go with it: the focus ring was `ring-1`, a 1px\n * box-shadow that forced-colors discards entirely; the thumb border was\n * `border-primary/50`, an alpha edge with no measurable contrast; and the\n * disabled styling used `disabled:`, a pseudo-class that only applies to\n * form elements -- Radix renders a `<span role=\"slider\">`, so a disabled\n * slider looked exactly like an enabled one.\n */\nexport const sliderVariants = cva([\n  \"flex w-full flex-col gap-2 box-border font-sans\",\n  \"data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n\nexport const sliderTrackVariants = cva([\n  // The track is inset by half a thumb (mx-3), so a thumb at either limit stays\n  // inside the component and mark labels at the ends have room.\n  \"relative mx-3 flex items-center\",\n  // h-6 is the TRACK ROW, not the visible bar -- it gives the 24px\n  // pointer target WCAG 2.5.8 wants. The bar itself is drawn inside.\n  \"h-6\",\n  // A size container, so the value bubble can hold inside it (styles.css).\n  \"slider-track\",\n]);\n\nexport const sliderBarVariants = cva([\"absolute h-1.5 w-full rounded-pill bg-slider-track\"]);\n\nexport const sliderFillVariants = cva([\"absolute h-1.5 rounded-pill bg-primary-strong\", \"slider-fill\"]);\n\nexport const sliderThumbVariants = cva([\n  // size-6 is 24px: WCAG 2.5.8 target size. The legacy thumb was 16px at\n  // all four call sites, and one of them crams the whole control into 80px.\n  \"size-6 rounded-circle box-border\",\n  // React Aria sets translate(-50%, -50%) and leaves `top` to us: without it the thumb sits on the track's top edge.\n  \"top-1/2\",\n  // A solid white circle with a soft shadow (the slider-thumb utility; in dark also a ring), no outline.\n  \"bg-slider-thumb\",\n  \"cursor-grab data-[dragging]:cursor-grabbing\",\n  // Follows an outside value on a spring, swells while held (styles.css).\n  \"slider-thumb\",\n  // A real outline, not the legacy ring-1 box-shadow.\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  // data-[disabled], NOT disabled:. The legacy used the CSS :disabled\n  // pseudo-class, which applies only to form elements -- React Aria and\n  // Radix both render a span, so that styling never fired.\n  \"data-[disabled]:cursor-not-allowed\",\n]);\n\n/** A tick dot on the track: dim on the unfilled side, light where the fill passes under it. */\nconst sliderTickClasses =\n  \"pointer-events-none absolute top-1/2 size-1 -translate-1/2 rounded-pill bg-foreground/30 data-[on]:bg-background/60 motion-safe:transition-colors motion-safe:duration-(--duration-quick)\";\n\n/** A step label under its tick. */\nconst sliderMarkLabelClasses =\n  \"slider-mark-label absolute top-0 whitespace-nowrap text-xs leading-(--leading-normal) text-text-secondary tabular-nums data-[on]:text-foreground motion-safe:transition-colors motion-safe:duration-(--duration-quick)\";\n\n/**\n * Text that rolls when its value changes: a larger value rises in from below, a\n * smaller one drops in from above. The caller's own text stays for a screen\n * reader; the copy the eye sees is aria-hidden.\n */\nfunction RollingText({ value, text }: { value: number; text: string }) {\n  const [trail, setTrail] = useState({ value, dir: 1 });\n  if (trail.value !== value) setTrail({ value, dir: value > trail.value ? 1 : -1 });\n  const dir = trail.value === value ? trail.dir : value > trail.value ? 1 : -1;\n  return (\n    <>\n      <span className=\"sr-only\">{text}</span>\n      <span aria-hidden=\"true\">\n        <SwapText swapKey={text} dir={dir} motion=\"roll\" className=\"inline-block\">\n          {text}\n        </SwapText>\n      </span>\n    </>\n  );\n}\n\n/** One thumb is a number; two thumbs are a `[low, high]` pair. */\nexport type SliderValue = number | [number, number];\n\n/** A tick on the track, with an optional label printed under it. */\nexport interface SliderMark {\n  value: number;\n  label?: ReactNode;\n}\n\n/**\n * A value along a range.\n *\n * @example\n * <Slider label=\"Input volume\" defaultValue={40} />\n * <Slider label=\"Playback position\" value={t} onChange={seek} formatOptions={{ style: \"percent\" }} />\n * <Slider label=\"Budget\" defaultValue={[2200, 8000]} minValue={0} maxValue={10000} step={100} />\n */\nexport interface SliderProps<T extends SliderValue = number>\n  extends Omit<\n    AriaSliderProps<number | number[]>,\n    \"className\" | \"style\" | \"children\" | \"value\" | \"defaultValue\" | \"onChange\" | \"onChangeEnd\"\n  > {\n  /**\n   * What the slider controls, and its accessible name.\n   *\n   * **Required.** All four legacy call sites are unnamed sliders.\n   */\n  label: ReactNode;\n  /** Render the label for screen readers only. */\n  labelHidden?: boolean;\n  /**\n   * Show the current value as text beside the label.\n   *\n   * On by default. It is the text equivalent of the fill length, which\n   * matters because in greyscale the filled and unfilled halves are\n   * distinguishable only by the thumb.\n   */\n  showValue?: boolean;\n  /** A number for one thumb, a `[low, high]` pair for a range with two thumbs. */\n  value?: T;\n  /** The uncontrolled value; its shape (a number or a pair) also picks one or two thumbs. */\n  defaultValue?: T;\n  onChange?: (value: T) => void;\n  /** Runs once a drag is released or a key changes the value, for work too heavy for every step. */\n  onChangeEnd?: (value: T) => void;\n  /** Grey helper text under the control. It also describes the slider to a screen reader. */\n  description?: ReactNode;\n  /**\n   * Tick dots on the track. A number draws a tick; a mark with a `label` also\n   * prints it under the track. Marks are decoration: the slider still reads out\n   * its own value, so pair them with `step` to make the ticks reachable.\n   */\n  marks?: (number | SliderMark)[];\n  /** Accessible names for the two range thumbs. @default [\"Minimum\", \"Maximum\"] */\n  thumbLabels?: [string, string];\n  /** Content before the track, such as an icon button that mutes. */\n  start?: ReactNode;\n  /** Content after the track. */\n  end?: ReactNode;\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst RANGE_DASH = \" – \";\n\n/** Step labels under the track, each centred on its tick (the end ones hold inside the component). */\nfunction SliderMarkLabels({\n  marks,\n  percentOf,\n  minValue,\n  maxValue,\n}: {\n  marks: SliderMark[];\n  percentOf: (value: number) => number;\n  minValue: number;\n  maxValue: number;\n}) {\n  const state = useContext(SliderStateContext);\n  const values = state?.values ?? [];\n  const isOn = (v: number) =>\n    values.length > 1 ? v >= values[0]! && v <= values[values.length - 1]! : v <= (values[0] ?? minValue);\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"slider-marks\"\n      className=\"relative col-start-2 row-start-2 mx-3 mt-1 h-5\"\n    >\n      {marks.map((mark) =>\n        mark.label == null ? null : (\n          <span\n            key={mark.value}\n            data-slot=\"slider-mark-label\"\n            data-on={isOn(mark.value) || undefined}\n            data-edge={mark.value <= minValue ? \"start\" : mark.value >= maxValue ? \"end\" : undefined}\n            className={sliderMarkLabelClasses}\n            style={{ left: `${percentOf(mark.value)}%` }}\n          >\n            {mark.label}\n          </span>\n        ),\n      )}\n    </div>\n  );\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps<SliderValue>>(function Slider(\n  {\n    label,\n    labelHidden,\n    showValue = true,\n    description,\n    marks,\n    thumbLabels = [\"Minimum\", \"Maximum\"],\n    start,\n    end,\n    className,\n    \"aria-describedby\": describedByProp,\n    ...props\n  },\n  ref,\n) {\n  const descriptionId = useId();\n  const describedBy = [describedByProp, description == null ? null : descriptionId]\n    .filter(Boolean)\n    .join(\" \");\n  const minValue = props.minValue ?? 0;\n  const maxValue = props.maxValue ?? 100;\n  const markList = (marks ?? []).map((mark) => (typeof mark === \"number\" ? { value: mark } : mark));\n  const percentOf = (v: number) =>\n    maxValue === minValue ? 0 : ((v - minValue) / (maxValue - minValue)) * 100;\n\n  return (\n    <AriaSlider\n      ref={ref}\n      {...(props as AriaSliderProps<number | number[]>)}\n      data-slot=\"slider\"\n      className={cn(sliderVariants(), className)}\n    >\n      <div className={cnAll(\"flex items-baseline justify-between gap-4\", labelHidden && \"sr-only\")}>\n        <AriaLabel\n          data-slot=\"slider-label\"\n          className=\"text-sm leading-(--leading-normal) font-medium text-foreground\"\n        >\n          {label}\n        </AriaLabel>\n        {showValue ? (\n          <AriaSliderOutput\n            data-slot=\"slider-output\"\n            className=\"text-sm leading-(--leading-normal) whitespace-nowrap text-text-secondary tabular-nums\"\n          >\n            {({ state }) =>\n              state.values.map((_, i) => (\n                <Fragment key={i}>\n                  {i > 0 ? <span aria-hidden=\"true\">{RANGE_DASH}</span> : null}\n                  <RollingText value={state.getThumbValue(i)} text={state.getThumbValueLabel(i)} />\n                </Fragment>\n              ))\n            }\n          </AriaSliderOutput>\n        ) : null}\n      </div>\n\n      <div className=\"grid grid-cols-[auto_minmax(0,1fr)_auto] items-center\">\n        {start ? <div className=\"col-start-1 row-start-1 me-3 flex\">{start}</div> : null}\n\n        <AriaSliderTrack\n          data-slot=\"slider-track\"\n          className={cnAll(sliderTrackVariants(), \"col-start-2 row-start-1\")}\n        >\n          {({ state }) => {\n            const count = state.values.length;\n            const low = count > 1 ? state.getThumbPercent(0) * 100 : 0;\n            const high = state.getThumbPercent(count - 1) * 100;\n            const dragging = state.values.some((_, i) => state.isThumbDragging(i));\n            const isOn = (v: number) =>\n              count > 1 ? v >= state.values[0]! && v <= state.values[count - 1]! : v <= state.values[0]!;\n            return (\n              <>\n                <div data-slot=\"slider-bar\" className={sliderBarVariants()} />\n                <div\n                  data-slot=\"slider-fill\"\n                  className={sliderFillVariants()}\n                  data-dragging={dragging || undefined}\n                  style={{ left: `${low}%`, width: `${high - low}%` }}\n                />\n                {markList.map((mark) => (\n                  <span\n                    key={mark.value}\n                    aria-hidden=\"true\"\n                    data-slot=\"slider-tick\"\n                    data-on={isOn(mark.value) || undefined}\n                    className={sliderTickClasses}\n                    style={{ left: `${percentOf(mark.value)}%` }}\n                  />\n                ))}\n                {state.values.map((_, i) => (\n                  <AriaSliderThumb\n                    key={i}\n                    index={i}\n                    aria-label={count > 1 ? thumbLabels[i] : undefined}\n                    // On the focusable inputs: the group element does not carry it.\n                    aria-describedby={describedBy || undefined}\n                    data-slot=\"slider-thumb\"\n                    className={sliderThumbVariants()}\n                  >\n                    {({ isDragging, isFocusVisible, state: thumbState }) => (\n                      // Decorative: the output beside the label already carries the value.\n                      <span\n                        aria-hidden=\"true\"\n                        className=\"slider-bubble-anchor pointer-events-none absolute bottom-full left-1/2 mb-2\"\n                        style={{ \"--at\": thumbState.getThumbPercent(i) * 100 } as React.CSSProperties}\n                      >\n                        <span\n                          data-slot=\"slider-bubble\"\n                          data-shown={isDragging || isFocusVisible || undefined}\n                          className=\"slider-bubble block whitespace-nowrap rounded-pill bg-foreground px-3 py-1 text-sm leading-none font-medium text-background shadow-surface\"\n                        >\n                          <RollingText\n                            value={thumbState.getThumbValue(i)}\n                            text={thumbState.getThumbValueLabel(i)}\n                          />\n                        </span>\n                      </span>\n                    )}\n                  </AriaSliderThumb>\n                ))}\n              </>\n            );\n          }}\n        </AriaSliderTrack>\n\n        {end ? <div className=\"col-start-3 row-start-1 ms-3 flex\">{end}</div> : null}\n\n        {markList.some((mark) => mark.label != null) ? (\n          <SliderMarkLabels\n            marks={markList}\n            percentOf={percentOf}\n            minValue={minValue}\n            maxValue={maxValue}\n          />\n        ) : null}\n      </div>\n\n      {description != null ? (\n        <p\n          id={descriptionId}\n          data-slot=\"slider-description\"\n          className=\"m-0 text-sm leading-(--leading-normal) text-text-secondary\"\n        >\n          {description}\n        </p>\n      ) : null}\n    </AriaSlider>\n  );\n}) as <T extends SliderValue = number>(\n  props: SliderProps<T> & RefAttributes<HTMLDivElement>,\n) => ReactElement | null;\n"],"mappings":"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"}

package/dist/slope-chart/index.d.ts

@@ -0,0 +1,2 @@
+import { SlopeChart, SlopeChartProps, SlopeItem } from "./slope-chart.js";
+export { SlopeChart, type SlopeChartProps, type SlopeItem };

package/dist/slope-chart/index.js

@@ -0,0 +1,2 @@
+import { SlopeChart } from "./slope-chart.js";
+export { SlopeChart };

package/dist/slope-chart/slope-chart.d.ts

@@ -0,0 +1,54 @@
+//#region src/slope-chart/slope-chart.d.ts
+/**
+ * SlopeChart: how several items changed between exactly two moments, and how
+ * their order changed. Each item is one line from its first value to its second
+ * on a shared axis, with its name and value at each end and the change in rank
+ * beside the second value.
+ *
+ * The lines draw left to right once the chart is in view (a beat apart), the end
+ * dots land as each pen arrives, and the labels fade in behind them. New data
+ * moves every line, dot, leader and label from where it is on screen. Hovering,
+ * touching or the arrow keys bring one item forward, fade the others' lines and
+ * show its numbers; the arrow keys walk the items in the second period's order.
+ *
+ * Plain SVG written straight to the DOM by one small spring tween; labels are
+ * real text (they truncate), so they sit beside the SVG and move with it.
+ */
+export interface SlopeItem {
+  /** Stable identity. An item keeps its line across datasets, so switching morphs it. */
+  key: string;
+  /** Name beside the start value, in the tooltip and in the table. */
+  label: string;
+  /** Value in the first period. */
+  start: number;
+  /** Value in the second period. */
+  end: number;
+}
+export interface SlopeChartProps {
+  data: SlopeItem[];
+  /** What is measured, such as "Conversion rate by channel". Names the chart for assistive technology. */
+  label: string;
+  /** Heading of the first column, such as "Q1". */
+  startLabel: string;
+  /** Heading of the second column, such as "Q2". */
+  endLabel: string;
+  formatValue?: (value: number) => string;
+  /** Formats the change in the tooltip. Defaults to the difference, in formatValue's terms. */
+  formatChange?: (change: number, item: SlopeItem) => string;
+  /** Plot height in pixels. Defaults to 44 pixels per item, and at least 200. */
+  height?: number;
+  /** The item drawn in the accent, such as the one the story is about. */
+  highlightKey?: string | null;
+  /** Controlled item in focus. The others' lines fade while one is in focus. */
+  activeKey?: string | null;
+  onActiveChange?: (key: string | null) => void;
+  /** Rank movement beside each end value. @default true */
+  ranks?: boolean;
+  /** @default "No data" */
+  emptyLabel?: string;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+export declare const SlopeChart: import("react").ForwardRefExoticComponent<SlopeChartProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=slope-chart.d.ts.map