@sproutsocial/seeds-react-data-viz 0.16.1 → 0.17.0

package/dist/line-area/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/line-area/index.js","../../src/charts/line-area/LineAreaChart.tsx","../../src/charts/line-area/adapter.ts","../../src/charts/line-area/styles.ts"],"names":["AREA_VARIANTS","LineAreaChart"],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/line-area/index.js","sourcesContent":[null,"import { memo, useMemo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { buildLineAreaChartOptions } from \"./adapter\";\nimport { LineAreaChartContainer } from \"./styles\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\nexport const LineAreaChart = memo(function LineAreaChart(\n  props: LineAreaChartProps\n) {\n  const { colors, patterns } = useSeedsChartSetup({\n    series: props.series,\n    includePatterns: true,\n  });\n  const { options, annotationLookup, tooltipTimezone } = useMemo(\n    () => buildLineAreaChartOptions(props),\n    [props]\n  );\n  const hasOnClick = Boolean(props.onClick);\n\n  return (\n    <LineAreaChartContainer\n      $colors={colors}\n      $patterns={patterns}\n      $hasOnClick={hasOnClick}\n      $isArea={AREA_VARIANTS.has(props.variant)}\n      className={props.className}\n    >\n      <ChartRenderer\n        options={options}\n        series={props.series}\n        colors={colors}\n        tooltip={props.tooltip}\n        annotationLookup={annotationLookup}\n        hasOnClick={hasOnClick}\n        tooltipClickLabel={props.tooltipClickLabel}\n        timezone={tooltipTimezone}\n        invalidNumberLabel={props.invalidNumberLabel}\n        onReady={props.onReady}\n      />\n    </LineAreaChartContainer>\n  );\n});\n","import { buildAnnotationConfig } from \"../shared/annotations\";\nimport type { ChartAnnotationLookup } from \"../shared/annotations\";\nimport type {\n  SeedsChartDataPoint,\n  SeedsChartOptions,\n} from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n  buildDimensionalAxis,\n  resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport {\n  defaultValueAxisLabelFormatter,\n  makeValueAxisLabelFormatter,\n} from \"../shared/valueAxisLabelFormatter\";\nimport type { ChartDataPoint } from \"../shared/axis\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\n// `stacking` is meaningful only for filled variants; on `line`/`spline` it's a\n// no-op, so the adapter drops it rather than emitting a misleading option.\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\ntype SeriesPoint =\n  | number\n  | null\n  | [number, number | null]\n  | SeedsChartDataPoint;\n\nfunction pointY(point: ChartDataPoint): number | null {\n  if (point === null) return null;\n  if (typeof point === \"number\") return point;\n  if (Array.isArray(point)) return point[1];\n  return point.y;\n}\n\n// Mirrors v1's marker handling: point markers are hidden by default (set on\n// `plotOptions.series`), but an *isolated* non-null point — one with a null (or\n// the chart edge) on both sides — gets a circle marker so a point with no\n// connecting line segment stays visible. Connected points pass through\n// unchanged so the line/area renders dot-free, matching v1 and the designs.\nfunction withIsolatedPointMarkers(\n  data: ReadonlyArray<ChartDataPoint>\n): SeriesPoint[] {\n  return data.map((point, i): SeriesPoint => {\n    if (point === null) return null; // explicit gap\n    if (pointY(point) === null) return point; // tuple/object with null y — a gap\n    const prevY = i === 0 ? null : pointY(data[i - 1]!);\n    const nextY = i === data.length - 1 ? null : pointY(data[i + 1]!);\n    if (prevY !== null || nextY !== null) return point; // connected → no marker\n    const marker = { enabled: true, symbol: \"circle\" as const };\n    if (typeof point === \"number\") return { y: point, marker };\n    if (Array.isArray(point)) return { x: point[0], y: point[1], marker };\n    return { ...point, marker };\n  });\n}\n\nexport function buildLineAreaChartOptions(props: LineAreaChartProps): {\n  options: SeedsChartOptions;\n  annotationLookup: ChartAnnotationLookup | undefined;\n  /** Resolved timezone for the tooltip date formatter; undefined on category axes. */\n  tooltipTimezone: string | undefined;\n} {\n  const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);\n  const isStacked = AREA_VARIANTS.has(props.variant) && Boolean(props.stacking);\n  const { annotations, lookup: annotationLookup } = buildAnnotationConfig(\n    props.annotations\n  );\n\n  const options: SeedsChartOptions = {\n    ...buildBaseChartOptions({\n      type: props.variant,\n      description: props.description,\n      valueSuffix: props.valueSuffix,\n      reserveTopMargin: Boolean(annotations),\n      timezone: tooltipTimezone,\n    }),\n    xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n    yAxis: {\n      min: props.yAxis?.min,\n      max: props.yAxis?.max,\n      // Anchor the value axis to 0 (like v1/bar/area): line/spline otherwise\n      // auto-scale above 0, which truncates the axis and pushes the annotation\n      // anchor (y: 0) out of range. `soft` still extends for negative data.\n      softMin: 0,\n      softMax: 0,\n      gridLineWidth: props.yAxis?.showGridLines === false ? 0 : 1,\n      title: { text: props.yAxis?.title ?? \"\" },\n      // Zero-config default: abbreviate value-axis ticks (1.20K / 1.20M / 1.20B).\n      labels: {\n        // A declarative `format` drives ticks through the shared valueFormatter;\n        // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).\n        formatter: props.yAxis?.format\n          ? makeValueAxisLabelFormatter(props.yAxis.format)\n          : defaultValueAxisLabelFormatter,\n      },\n    },\n    plotOptions: {\n      series: {\n        animation: false,\n        // Hide point markers by default (matching v1 + designs); isolated points\n        // re-enable their own marker via `withIsolatedPointMarkers`.\n        marker: { enabled: false },\n        ...(props.onClick\n          ? {\n              point: {\n                events: {\n                  click: (event) => props.onClick!({ position: event.point.x }),\n                },\n              },\n            }\n          : {}),\n      },\n      // Type-scoped stacking: only the (area) variant stacks. `isStacked` already\n      // guarantees `props.variant` is an area variant here, so the computed key is\n      // always a valid plotOptions slot. Matches bar's per-type placement and keeps\n      // line/spline unstacked.\n      ...(isStacked ? { [props.variant]: { stacking: props.stacking } } : {}),\n    },\n    series: props.series.map((s) => ({\n      type: props.variant,\n      name: s.name,\n      data: withIsolatedPointMarkers(s.data),\n    })),\n    ...(annotations ? { annotations } : {}),\n  };\n\n  return { options, annotationLookup, tooltipTimezone };\n}\n","import styled from \"styled-components\";\nimport { lineChartStyles, areaChartStyles } from \"../../styles/chartStyles\";\nimport type {\n  TypeChartStyleColor,\n  TypeChartStyleHasOnClick,\n  TypeChartStylePattern,\n} from \"../../types\";\n\ntype StyleProps = Readonly<{\n  $colors: ReadonlyArray<TypeChartStyleColor>;\n  $patterns: ReadonlyArray<TypeChartStylePattern>;\n  $hasOnClick: TypeChartStyleHasOnClick;\n  /** `area`/`areaspline` fill below the line; `line`/`spline` show only the stroke. */\n  $isArea: boolean;\n}>;\n\n// Plain styled `div` — not `Box`. Per the DS Tailwind direction, components\n// render semantic elements internally (and accept `className`) rather than\n// depending on the `Box` component. The container background — previously Box's\n// `bg` prop — is set explicitly here.\n//\n// The line/area CSS is still v1's styled-components layer (`chartStyles.ts`);\n// migrating those styles to CSS modules is a tracked clean-up follow-up.\nexport const LineAreaChartContainer = styled.div<StyleProps>`\n  background-color: ${({ theme }) => theme.colors.container.background.base};\n  ${(props) => (props.$isArea ? areaChartStyles : lineChartStyles)}\n`;\n"]}
+{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/line-area/index.js","../../src/charts/line-area/LineAreaChart.tsx","../../src/charts/line-area/adapter.ts","../../src/charts/line-area/styles.ts"],"names":["AREA_VARIANTS","LineAreaChart"],"mappings":"AAAA;AACE;AACA;AACA;AACF,uDAA6B;AAC7B;AACE;AACA;AACF,uDAA6B;AAC7B;AACE;AACA;AACA;AACF,uDAA6B;AAC7B;AACE;AACA;AACF,uDAA6B;AAC7B;AACA;ACnBA,8BAA8B;ADqB9B;AACA;AEFA,IAAM,cAAA,kBAAgB,IAAI,GAAA,CAAqB,CAAC,MAAA,EAAQ,YAAY,CAAC,CAAA;AAQrE,SAAS,MAAA,CAAO,KAAA,EAAsC;AACpD,EAAA,GAAA,CAAI,MAAA,IAAU,IAAA,EAAM,OAAO,IAAA;AAC3B,EAAA,GAAA,CAAI,OAAO,MAAA,IAAU,QAAA,EAAU,OAAO,KAAA;AACtC,EAAA,GAAA,CAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG,OAAO,KAAA,CAAM,CAAC,CAAA;AACxC,EAAA,OAAO,KAAA,CAAM,CAAA;AACf;AAOA,SAAS,wBAAA,CACP,IAAA,EACe;AACf,EAAA,OAAO,IAAA,CAAK,GAAA,CAAI,CAAC,KAAA,EAAO,CAAA,EAAA,GAAmB;AACzC,IAAA,GAAA,CAAI,MAAA,IAAU,IAAA,EAAM,OAAO,IAAA;AAC3B,IAAA,GAAA,CAAI,MAAA,CAAO,KAAK,EAAA,IAAM,IAAA,EAAM,OAAO,KAAA;AACnC,IAAA,MAAM,MAAA,EAAQ,EAAA,IAAM,EAAA,EAAI,KAAA,EAAO,MAAA,CAAO,IAAA,CAAK,EAAA,EAAI,CAAC,CAAE,CAAA;AAClD,IAAA,MAAM,MAAA,EAAQ,EAAA,IAAM,IAAA,CAAK,OAAA,EAAS,EAAA,EAAI,KAAA,EAAO,MAAA,CAAO,IAAA,CAAK,EAAA,EAAI,CAAC,CAAE,CAAA;AAChE,IAAA,GAAA,CAAI,MAAA,IAAU,KAAA,GAAQ,MAAA,IAAU,IAAA,EAAM,OAAO,KAAA;AAC7C,IAAA,MAAM,OAAA,EAAS,EAAE,OAAA,EAAS,IAAA,EAAM,MAAA,EAAQ,SAAkB,CAAA;AAC1D,IAAA,GAAA,CAAI,OAAO,MAAA,IAAU,QAAA,EAAU,OAAO,EAAE,CAAA,EAAG,KAAA,EAAO,OAAO,CAAA;AACzD,IAAA,GAAA,CAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG,OAAO,EAAE,CAAA,EAAG,KAAA,CAAM,CAAC,CAAA,EAAG,CAAA,EAAG,KAAA,CAAM,CAAC,CAAA,EAAG,OAAO,CAAA;AACpE,IAAA,OAAO,EAAE,GAAG,KAAA,EAAO,OAAO,CAAA;AAAA,EAC5B,CAAC,CAAA;AACH;AAEO,SAAS,yBAAA,CAA0B,KAAA,EAKxC;AACA,EAAA,MAAM,gBAAA,EAAkB,qDAAA,KAAuB,CAAM,KAAA,EAAO,KAAA,CAAM,QAAQ,CAAA;AAC1E,EAAA,MAAM,UAAA,EAAY,aAAA,CAAc,GAAA,CAAI,KAAA,CAAM,OAAO,EAAA,GAAK,OAAA,CAAQ,KAAA,CAAM,QAAQ,CAAA;AAC5E,EAAA,MAAM,EAAE,WAAA,EAAa,MAAA,EAAQ,iBAAiB,EAAA,EAAI,oDAAA;AAAA,IAChD,KAAA,CAAM;AAAA,EACR,CAAA;AAEA,EAAA,MAAM,QAAA,EAA6B;AAAA,IACjC,GAAG,oDAAA;AAAsB,MACvB,IAAA,EAAM,KAAA,CAAM,OAAA;AAAA,MACZ,WAAA,EAAa,KAAA,CAAM,WAAA;AAAA,MACnB,WAAA,EAAa,KAAA,CAAM,WAAA;AAAA,MACnB,gBAAA,EAAkB,OAAA,CAAQ,WAAW,CAAA;AAAA,MACrC,QAAA,EAAU;AAAA,IACZ,CAAC,CAAA;AAAA,IACD,KAAA,EAAO,mDAAA,KAAqB,CAAM,KAAA,mBAAO,eAAA,UAAmB,OAAK,CAAA;AAAA,IACjE,KAAA,EAAO;AAAA,MACL,GAAA,kBAAK,KAAA,mBAAM,KAAA,6BAAO,KAAA;AAAA,MAClB,GAAA,kBAAK,KAAA,qBAAM,KAAA,6BAAO,KAAA;AAAA;AAAA;AAAA;AAAA,MAIlB,OAAA,EAAS,CAAA;AAAA,MACT,OAAA,EAAS,CAAA;AAAA,MACT,aAAA,kBAAe,KAAA,qBAAM,KAAA,6BAAO,gBAAA,IAAkB,MAAA,EAAQ,EAAA,EAAI,CAAA;AAAA,MAC1D,KAAA,EAAO,EAAE,IAAA,mCAAM,KAAA,qBAAM,KAAA,6BAAO,OAAA,UAAS,KAAG,CAAA;AAAA;AAAA,MAExC,MAAA,EAAQ;AAAA;AAAA;AAAA,QAGN,SAAA,kBAAW,KAAA,qBAAM,KAAA,+BAAO,SAAA,EACpB,0DAAA,KAA4B,CAAM,KAAA,CAAM,MAAM,EAAA,EAC9C;AAAA,MACN;AAAA,IACF,CAAA;AAAA,IACA,WAAA,EAAa;AAAA,MACX,MAAA,EAAQ;AAAA,QACN,SAAA,EAAW,KAAA;AAAA;AAAA;AAAA,QAGX,MAAA,EAAQ,EAAE,OAAA,EAAS,MAAM,CAAA;AAAA,QACzB,GAAI,KAAA,CAAM,QAAA,EACN;AAAA,UACE,KAAA,EAAO;AAAA,YACL,MAAA,EAAQ;AAAA,cACN,KAAA,EAAO,CAAC,KAAA,EAAA,GAAU,KAAA,CAAM,OAAA,CAAS,EAAE,QAAA,EAAU,KAAA,CAAM,KAAA,CAAM,EAAE,CAAC;AAAA,YAC9D;AAAA,UACF;AAAA,QACF,EAAA,EACA,CAAC;AAAA,MACP,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,GAAI,UAAA,EAAY,EAAE,CAAC,KAAA,CAAM,OAAO,CAAA,EAAG,EAAE,QAAA,EAAU,KAAA,CAAM,SAAS,EAAE,EAAA,EAAI,CAAC;AAAA,IACvE,CAAA;AAAA,IACA,MAAA,EAAQ,KAAA,CAAM,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,EAAA,GAAA,CAAO;AAAA,MAC/B,IAAA,EAAM,KAAA,CAAM,OAAA;AAAA,MACZ,IAAA,EAAM,CAAA,CAAE,IAAA;AAAA,MACR,IAAA,EAAM,wBAAA,CAAyB,CAAA,CAAE,IAAI;AAAA,IACvC,CAAA,CAAE,CAAA;AAAA,IACF,GAAI,YAAA,EAAc,EAAE,YAAY,EAAA,EAAI,CAAC;AAAA,EACvC,CAAA;AAEA,EAAA,OAAO,EAAE,OAAA,EAAS,gBAAA,EAAkB,gBAAgB,CAAA;AACtD;AFvBA;AACA;AGzGA,yHAAmB;AAuBZ,IAAM,uBAAA,EAAyB,0BAAA,CAAO,GAAA,CAAA;AAAA,oBAAA,EACvB,CAAC,EAAE,MAAM,CAAA,EAAA,GAAM,KAAA,CAAM,MAAA,CAAO,SAAA,CAAU,UAAA,CAAW,IAAI,CAAA;AAAA,EAAA,EACvE,CAAC,KAAA,EAAA,GAAW,KAAA,CAAM,QAAA,EAAU,iCAAA,EAAkB,gCAAgB,CAAA;AAAA,CAAA;AHsFlE;AACA;ACnFM,+CAAA;AAvBN,IAAMA,eAAAA,kBAAgB,IAAI,GAAA,CAAqB,CAAC,MAAA,EAAQ,YAAY,CAAC,CAAA;AAE9D,IAAM,cAAA,EAAgB,yBAAA,SAAcC,cAAAA,CACzC,KAAA,EACA;AACA,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAS,EAAA,EAAI,iDAAA;AAAmB,IAC9C,MAAA,EAAQ,KAAA,CAAM,MAAA;AAAA,IACd,eAAA,EAAiB;AAAA,EACnB,CAAC,CAAA;AACD,EAAA,MAAM,EAAE,OAAA,EAAS,gBAAA,EAAkB,gBAAgB,EAAA,EAAI,4BAAA;AAAA,IACrD,CAAA,EAAA,GAAM,yBAAA,CAA0B,KAAK,CAAA;AAAA,IACrC,CAAC,KAAK;AAAA,EACR,CAAA;AACA,EAAA,MAAM,WAAA,EAAa,OAAA,CAAQ,KAAA,CAAM,OAAO,CAAA;AAExC,EAAA,uBACE,6BAAA;AAAA,IAAC,sBAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,MAAA;AAAA,MACT,SAAA,EAAW,QAAA;AAAA,MACX,WAAA,EAAa,UAAA;AAAA,MACb,OAAA,EAASD,cAAAA,CAAc,GAAA,CAAI,KAAA,CAAM,OAAO,CAAA;AAAA,MACxC,SAAA,EAAW,KAAA,CAAM,SAAA;AAAA,MAEjB,QAAA,kBAAA,6BAAA;AAAA,QAAC,8BAAA;AAAA,QAAA;AAAA,UACC,OAAA;AAAA,UACA,MAAA,EAAQ,KAAA,CAAM,MAAA;AAAA,UACd,MAAA;AAAA,UACA,OAAA,EAAS,KAAA,CAAM,OAAA;AAAA,UACf,gBAAA;AAAA,UACA,UAAA;AAAA,UACA,iBAAA,EAAmB,KAAA,CAAM,iBAAA;AAAA,UACzB,QAAA,EAAU,eAAA;AAAA,UACV,kBAAA,EAAoB,KAAA,CAAM,kBAAA;AAAA,UAC1B,WAAA,kBAAa,KAAA,uBAAM,KAAA,+BAAO,QAAA;AAAA,UAC1B,OAAA,EAAS,KAAA,CAAM;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA;AAAA,EACF,CAAA;AAEJ,CAAC,CAAA;AD4GD;AACE;AACF,sCAAC","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/line-area/index.js","sourcesContent":[null,"import { memo, useMemo } from \"react\";\nimport { useSeedsChartSetup, ChartRenderer } from \"../shared/chartBase\";\nimport { buildLineAreaChartOptions } from \"./adapter\";\nimport { LineAreaChartContainer } from \"./styles\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\nexport const LineAreaChart = memo(function LineAreaChart(\n  props: LineAreaChartProps\n) {\n  const { colors, patterns } = useSeedsChartSetup({\n    series: props.series,\n    includePatterns: true,\n  });\n  const { options, annotationLookup, tooltipTimezone } = useMemo(\n    () => buildLineAreaChartOptions(props),\n    [props]\n  );\n  const hasOnClick = Boolean(props.onClick);\n\n  return (\n    <LineAreaChartContainer\n      $colors={colors}\n      $patterns={patterns}\n      $hasOnClick={hasOnClick}\n      $isArea={AREA_VARIANTS.has(props.variant)}\n      className={props.className}\n    >\n      <ChartRenderer\n        options={options}\n        series={props.series}\n        colors={colors}\n        tooltip={props.tooltip}\n        annotationLookup={annotationLookup}\n        hasOnClick={hasOnClick}\n        tooltipClickLabel={props.tooltipClickLabel}\n        timezone={tooltipTimezone}\n        invalidNumberLabel={props.invalidNumberLabel}\n        valueFormat={props.yAxis?.format}\n        onReady={props.onReady}\n      />\n    </LineAreaChartContainer>\n  );\n});\n","import { buildAnnotationConfig } from \"../shared/annotations\";\nimport type { ChartAnnotationLookup } from \"../shared/annotations\";\nimport type {\n  SeedsChartDataPoint,\n  SeedsChartOptions,\n} from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n  buildDimensionalAxis,\n  resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport {\n  defaultValueAxisLabelFormatter,\n  makeValueAxisLabelFormatter,\n} from \"../shared/valueAxisLabelFormatter\";\nimport type { ChartDataPoint } from \"../shared/axis\";\nimport type { LineAreaChartProps, LineAreaVariant } from \"./types\";\n\n// `stacking` is meaningful only for filled variants; on `line`/`spline` it's a\n// no-op, so the adapter drops it rather than emitting a misleading option.\nconst AREA_VARIANTS = new Set<LineAreaVariant>([\"area\", \"areaspline\"]);\n\ntype SeriesPoint =\n  | number\n  | null\n  | [number, number | null]\n  | SeedsChartDataPoint;\n\nfunction pointY(point: ChartDataPoint): number | null {\n  if (point === null) return null;\n  if (typeof point === \"number\") return point;\n  if (Array.isArray(point)) return point[1];\n  return point.y;\n}\n\n// Mirrors v1's marker handling: point markers are hidden by default (set on\n// `plotOptions.series`), but an *isolated* non-null point — one with a null (or\n// the chart edge) on both sides — gets a circle marker so a point with no\n// connecting line segment stays visible. Connected points pass through\n// unchanged so the line/area renders dot-free, matching v1 and the designs.\nfunction withIsolatedPointMarkers(\n  data: ReadonlyArray<ChartDataPoint>\n): SeriesPoint[] {\n  return data.map((point, i): SeriesPoint => {\n    if (point === null) return null; // explicit gap\n    if (pointY(point) === null) return point; // tuple/object with null y — a gap\n    const prevY = i === 0 ? null : pointY(data[i - 1]!);\n    const nextY = i === data.length - 1 ? null : pointY(data[i + 1]!);\n    if (prevY !== null || nextY !== null) return point; // connected → no marker\n    const marker = { enabled: true, symbol: \"circle\" as const };\n    if (typeof point === \"number\") return { y: point, marker };\n    if (Array.isArray(point)) return { x: point[0], y: point[1], marker };\n    return { ...point, marker };\n  });\n}\n\nexport function buildLineAreaChartOptions(props: LineAreaChartProps): {\n  options: SeedsChartOptions;\n  annotationLookup: ChartAnnotationLookup | undefined;\n  /** Resolved timezone for the tooltip date formatter; undefined on category axes. */\n  tooltipTimezone: string | undefined;\n} {\n  const tooltipTimezone = resolveTooltipTimezone(props.xAxis, props.timezone);\n  const isStacked = AREA_VARIANTS.has(props.variant) && Boolean(props.stacking);\n  const { annotations, lookup: annotationLookup } = buildAnnotationConfig(\n    props.annotations\n  );\n\n  const options: SeedsChartOptions = {\n    ...buildBaseChartOptions({\n      type: props.variant,\n      description: props.description,\n      valueSuffix: props.valueSuffix,\n      reserveTopMargin: Boolean(annotations),\n      timezone: tooltipTimezone,\n    }),\n    xAxis: buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n    yAxis: {\n      min: props.yAxis?.min,\n      max: props.yAxis?.max,\n      // Anchor the value axis to 0 (like v1/bar/area): line/spline otherwise\n      // auto-scale above 0, which truncates the axis and pushes the annotation\n      // anchor (y: 0) out of range. `soft` still extends for negative data.\n      softMin: 0,\n      softMax: 0,\n      gridLineWidth: props.yAxis?.showGridLines === false ? 0 : 1,\n      title: { text: props.yAxis?.title ?? \"\" },\n      // Zero-config default: abbreviate value-axis ticks (1.20K / 1.20M / 1.20B).\n      labels: {\n        // A declarative `format` drives ticks through the shared valueFormatter;\n        // absent it, the zero-config decimal default (1.20K / 1.20M / 1.20B).\n        formatter: props.yAxis?.format\n          ? makeValueAxisLabelFormatter(props.yAxis.format)\n          : defaultValueAxisLabelFormatter,\n      },\n    },\n    plotOptions: {\n      series: {\n        animation: false,\n        // Hide point markers by default (matching v1 + designs); isolated points\n        // re-enable their own marker via `withIsolatedPointMarkers`.\n        marker: { enabled: false },\n        ...(props.onClick\n          ? {\n              point: {\n                events: {\n                  click: (event) => props.onClick!({ position: event.point.x }),\n                },\n              },\n            }\n          : {}),\n      },\n      // Type-scoped stacking: only the (area) variant stacks. `isStacked` already\n      // guarantees `props.variant` is an area variant here, so the computed key is\n      // always a valid plotOptions slot. Matches bar's per-type placement and keeps\n      // line/spline unstacked.\n      ...(isStacked ? { [props.variant]: { stacking: props.stacking } } : {}),\n    },\n    series: props.series.map((s) => ({\n      type: props.variant,\n      name: s.name,\n      data: withIsolatedPointMarkers(s.data),\n    })),\n    ...(annotations ? { annotations } : {}),\n  };\n\n  return { options, annotationLookup, tooltipTimezone };\n}\n","import styled from \"styled-components\";\nimport { lineChartStyles, areaChartStyles } from \"../../styles/chartStyles\";\nimport type {\n  TypeChartStyleColor,\n  TypeChartStyleHasOnClick,\n  TypeChartStylePattern,\n} from \"../../types\";\n\ntype StyleProps = Readonly<{\n  $colors: ReadonlyArray<TypeChartStyleColor>;\n  $patterns: ReadonlyArray<TypeChartStylePattern>;\n  $hasOnClick: TypeChartStyleHasOnClick;\n  /** `area`/`areaspline` fill below the line; `line`/`spline` show only the stroke. */\n  $isArea: boolean;\n}>;\n\n// Plain styled `div` — not `Box`. Per the DS Tailwind direction, components\n// render semantic elements internally (and accept `className`) rather than\n// depending on the `Box` component. The container background — previously Box's\n// `bg` prop — is set explicitly here.\n//\n// The line/area CSS is still v1's styled-components layer (`chartStyles.ts`);\n// migrating those styles to CSS modules is a tracked clean-up follow-up.\nexport const LineAreaChartContainer = styled.div<StyleProps>`\n  background-color: ${({ theme }) => theme.colors.container.background.base};\n  ${(props) => (props.$isArea ? areaChartStyles : lineChartStyles)}\n`;\n"]}

package/dist/sparkline/index.d.mts

@@ -0,0 +1,75 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { C as ChartTooltipProps } from '../chartBase-Cn_5CUJi.mjs';
+import { C as ChartExportHandle } from '../chartExport-CKYpuhik.mjs';
+import { C as ChartDataPoint, c as DimensionalAxis } from '../axis-WOeYkTO1.mjs';
+export { a as CategoryAxis, D as DatetimeAxis } from '../axis-WOeYkTO1.mjs';
+import '@sproutsocial/seeds-react-icon';
+import '../types-DxrhdAdn.mjs';
+import 'highcharts';
+
+/**
+ * Trend direction derived from a series (first vs. last finite value): rising →
+ * `"positive"`, falling → `"negative"`, flat → `"neutral"`.
+ */
+type Trend = "positive" | "negative" | "neutral";
+
+/** A single sparkline value, or a `[timestamp, value]` / `{ x, y }` point on a datetime axis. */
+type SparklineDataPoint = ChartDataPoint;
+/** Visual encoding of the sparkline. `"line"` draws a stroke; `"bar"` draws columns. */
+type SparklineVariant = "line" | "bar";
+/**
+ * Trend direction, derived from the data (first vs. last finite value). Drives
+ * the single color the whole sparkline renders in.
+ */
+type SparklineTrend = Trend;
+type SparklineXAxis = DimensionalAxis;
+interface SparklineChartProps {
+    /** Wired into Highcharts' `accessibility.description`. */
+    description: string;
+    /** `"line"` (stroke) or `"bar"` (columns). */
+    variant: SparklineVariant;
+    /**
+     * The single data series. Bare numbers render on an index/category axis;
+     * `[timestamp, value]` tuples (or `{ x, y }`) render on a datetime axis when
+     * `xAxis.type` is `"datetime"`.
+     */
+    data: Array<SparklineDataPoint>;
+    /**
+     * Tailwind utilities (or any class names) applied to the wrapper — the intended
+     * way to size the sparkline (e.g. `"h-6 w-32"`). Defaults come from `sparkline.css`.
+     */
+    className?: string;
+    /**
+     * Optional axis config. Omit for the default hidden index axis; pass a
+     * datetime axis to place `[timestamp, value]` points in time.
+     */
+    xAxis?: SparklineXAxis;
+    /** IANA timezone for datetime-axis tooltips. Default `"UTC"`. Ignored for category axes. */
+    timezone?: string;
+    /** Appended to each tooltip value (e.g. `"%"`, `" MT"`). */
+    valueSuffix?: string;
+    /** Override for the default hover tooltip content. */
+    tooltip?: (args: ChartTooltipProps) => ReactNode;
+    /** Override for the value shown when a data point is null. Defaults to an em-dash. */
+    invalidNumberLabel?: ReactNode;
+    /** Fired once per chart instance with a handle for PNG/SVG/PDF/CSV downloads. Re-fires only on remount. */
+    onReady?: (handle: ChartExportHandle) => void;
+}
+
+/**
+ * SparklineChart — a compact, axis-less inline micro-chart in a `"line"` or
+ * `"bar"` variant. The whole sparkline is colored by trend (auto-computed from
+ * the data): green when rising, red when falling, neutral-gray when flat.
+ *
+ * Unlike the other v2 chart families this one carries no `styled-components`:
+ * the wrapper is a plain `<div>` that accepts `className` (Tailwind sizing), and
+ * the Highcharts styling lives in `sparkline.css`. Consumers must import
+ * `@sproutsocial/seeds-react-data-viz/sparkline.css` once. The single trend
+ * color is resolved from the JS theme and passed down as the
+ * `--seeds-sparkline-color` CSS variable, so light/dark works without depending
+ * on the theme's CSS-variable stylesheet.
+ */
+declare const SparklineChart: react.NamedExoticComponent<SparklineChartProps>;
+
+export { ChartExportHandle, SparklineChart, type SparklineChartProps, type SparklineDataPoint, type SparklineTrend, type SparklineVariant, type SparklineXAxis };

package/dist/sparkline/index.d.ts

@@ -0,0 +1,75 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { C as ChartTooltipProps } from '../chartBase-C-l7yYGx.js';
+import { C as ChartExportHandle } from '../chartExport-CKYpuhik.js';
+import { C as ChartDataPoint, c as DimensionalAxis } from '../axis-WOeYkTO1.js';
+export { a as CategoryAxis, D as DatetimeAxis } from '../axis-WOeYkTO1.js';
+import '@sproutsocial/seeds-react-icon';
+import '../types-DxrhdAdn.js';
+import 'highcharts';
+
+/**
+ * Trend direction derived from a series (first vs. last finite value): rising →
+ * `"positive"`, falling → `"negative"`, flat → `"neutral"`.
+ */
+type Trend = "positive" | "negative" | "neutral";
+
+/** A single sparkline value, or a `[timestamp, value]` / `{ x, y }` point on a datetime axis. */
+type SparklineDataPoint = ChartDataPoint;
+/** Visual encoding of the sparkline. `"line"` draws a stroke; `"bar"` draws columns. */
+type SparklineVariant = "line" | "bar";
+/**
+ * Trend direction, derived from the data (first vs. last finite value). Drives
+ * the single color the whole sparkline renders in.
+ */
+type SparklineTrend = Trend;
+type SparklineXAxis = DimensionalAxis;
+interface SparklineChartProps {
+    /** Wired into Highcharts' `accessibility.description`. */
+    description: string;
+    /** `"line"` (stroke) or `"bar"` (columns). */
+    variant: SparklineVariant;
+    /**
+     * The single data series. Bare numbers render on an index/category axis;
+     * `[timestamp, value]` tuples (or `{ x, y }`) render on a datetime axis when
+     * `xAxis.type` is `"datetime"`.
+     */
+    data: Array<SparklineDataPoint>;
+    /**
+     * Tailwind utilities (or any class names) applied to the wrapper — the intended
+     * way to size the sparkline (e.g. `"h-6 w-32"`). Defaults come from `sparkline.css`.
+     */
+    className?: string;
+    /**
+     * Optional axis config. Omit for the default hidden index axis; pass a
+     * datetime axis to place `[timestamp, value]` points in time.
+     */
+    xAxis?: SparklineXAxis;
+    /** IANA timezone for datetime-axis tooltips. Default `"UTC"`. Ignored for category axes. */
+    timezone?: string;
+    /** Appended to each tooltip value (e.g. `"%"`, `" MT"`). */
+    valueSuffix?: string;
+    /** Override for the default hover tooltip content. */
+    tooltip?: (args: ChartTooltipProps) => ReactNode;
+    /** Override for the value shown when a data point is null. Defaults to an em-dash. */
+    invalidNumberLabel?: ReactNode;
+    /** Fired once per chart instance with a handle for PNG/SVG/PDF/CSV downloads. Re-fires only on remount. */
+    onReady?: (handle: ChartExportHandle) => void;
+}
+
+/**
+ * SparklineChart — a compact, axis-less inline micro-chart in a `"line"` or
+ * `"bar"` variant. The whole sparkline is colored by trend (auto-computed from
+ * the data): green when rising, red when falling, neutral-gray when flat.
+ *
+ * Unlike the other v2 chart families this one carries no `styled-components`:
+ * the wrapper is a plain `<div>` that accepts `className` (Tailwind sizing), and
+ * the Highcharts styling lives in `sparkline.css`. Consumers must import
+ * `@sproutsocial/seeds-react-data-viz/sparkline.css` once. The single trend
+ * color is resolved from the JS theme and passed down as the
+ * `--seeds-sparkline-color` CSS variable, so light/dark works without depending
+ * on the theme's CSS-variable stylesheet.
+ */
+declare const SparklineChart: react.NamedExoticComponent<SparklineChartProps>;
+
+export { ChartExportHandle, SparklineChart, type SparklineChartProps, type SparklineDataPoint, type SparklineTrend, type SparklineVariant, type SparklineXAxis };

package/dist/sparkline/index.js

@@ -0,0 +1,123 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+
+var _chunk6D7P3IOTjs = require('../chunk-6D7P3IOT.js');
+
+
+
+var _chunk2K7PFHIMjs = require('../chunk-2K7PFHIM.js');
+require('../chunk-WEKDYQ4T.js');
+
+// src/charts/sparkline/SparklineChart.tsx
+var _react = require('react');
+var _styledcomponents = require('styled-components');
+
+// src/charts/sparkline/adapter.ts
+function highchartsType(variant) {
+  return variant === "bar" ? "column" : "line";
+}
+var SPARKLINE_SERIES_NAME = "sparkline";
+function buildSparklineChartOptions(props) {
+  const type = highchartsType(props.variant);
+  const tooltipTimezone = props.xAxis ? _chunk6D7P3IOTjs.resolveTooltipTimezone.call(void 0, props.xAxis, props.timezone) : void 0;
+  const xAxis = props.xAxis ? {
+    ..._chunk6D7P3IOTjs.buildDimensionalAxis.call(void 0, props.xAxis, _nullishCoalesce(tooltipTimezone, () => ( "UTC"))),
+    visible: false
+  } : { type: "linear", visible: false };
+  const base = _chunk2K7PFHIMjs.buildBaseChartOptions.call(void 0, {
+    type,
+    description: props.description,
+    valueSuffix: props.valueSuffix,
+    timezone: tooltipTimezone
+  });
+  const options = {
+    ...base,
+    // Zero the outer spacing so the plot fills the (consumer-sized) wrapper.
+    chart: { type, styledMode: true, animation: false, spacing: [0, 0, 0, 0] },
+    xAxis,
+    yAxis: { visible: false },
+    plotOptions: {
+      series: {
+        animation: false,
+        // Decorative micro-chart: no per-point markers on the line.
+        marker: { enabled: false }
+      },
+      // Tight padding so bars read as a compact cluster.
+      column: {
+        pointPadding: 0.05,
+        groupPadding: 0.05,
+        borderWidth: 0,
+        borderRadius: 3
+      }
+    },
+    series: [
+      {
+        type,
+        name: SPARKLINE_SERIES_NAME,
+        data: [...props.data]
+      }
+    ]
+  };
+  return { options, tooltipTimezone };
+}
+
+// src/charts/shared/trend.ts
+function yValue(point) {
+  if (point == null) return null;
+  if (typeof point === "number") return point;
+  if (Array.isArray(point)) return point[1];
+  return point.y;
+}
+function computeTrend(data) {
+  const finite = data.map(yValue).filter((v) => v != null && Number.isFinite(v));
+  if (finite.length < 2) return "neutral";
+  const first = finite[0];
+  const last = finite[finite.length - 1];
+  if (last > first) return "positive";
+  if (last < first) return "negative";
+  return "neutral";
+}
+function resolveTrendColor(theme, trend) {
+  const decorative = theme.colors.container.border.decorative;
+  if (trend === "positive") return decorative.green;
+  if (trend === "negative") return decorative.red;
+  return decorative.neutral;
+}
+
+// src/charts/sparkline/SparklineChart.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var SparklineChart = _react.memo.call(void 0, function SparklineChart2(props) {
+  const theme = _styledcomponents.useTheme.call(void 0, );
+  const trend = computeTrend(props.data);
+  const trendColor = resolveTrendColor(theme, trend);
+  const { options, tooltipTimezone } = buildSparklineChartOptions(props);
+  const className = [
+    "seeds-sparkline",
+    `seeds-sparkline-${props.variant}`,
+    props.className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className,
+      style: { "--seeds-sparkline-color": trendColor },
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunk2K7PFHIMjs.ChartRenderer,
+        {
+          options,
+          series: [{ name: SPARKLINE_SERIES_NAME, color: trendColor }],
+          colors: [trendColor],
+          tooltip: props.tooltip,
+          timezone: tooltipTimezone,
+          invalidNumberLabel: props.invalidNumberLabel,
+          hideLegend: true,
+          onReady: props.onReady
+        }
+      )
+    }
+  );
+});
+
+
+exports.SparklineChart = SparklineChart;
+//# sourceMappingURL=index.js.map

package/dist/sparkline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/sparkline/index.js","../../src/charts/sparkline/SparklineChart.tsx","../../src/charts/sparkline/adapter.ts","../../src/charts/shared/trend.ts"],"names":["SparklineChart"],"mappings":"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","file":"/home/runner/_work/seeds/seeds/seeds-react/seeds-react-data-viz/dist/sparkline/index.js","sourcesContent":[null,"import { memo, type CSSProperties } from \"react\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport { ChartRenderer } from \"../shared/chartBase\";\nimport { buildSparklineChartOptions, SPARKLINE_SERIES_NAME } from \"./adapter\";\nimport { computeTrend, resolveTrendColor } from \"./trend\";\nimport type { SparklineChartProps } from \"./types\";\n\n/**\n * SparklineChart — a compact, axis-less inline micro-chart in a `\"line\"` or\n * `\"bar\"` variant. The whole sparkline is colored by trend (auto-computed from\n * the data): green when rising, red when falling, neutral-gray when flat.\n *\n * Unlike the other v2 chart families this one carries no `styled-components`:\n * the wrapper is a plain `<div>` that accepts `className` (Tailwind sizing), and\n * the Highcharts styling lives in `sparkline.css`. Consumers must import\n * `@sproutsocial/seeds-react-data-viz/sparkline.css` once. The single trend\n * color is resolved from the JS theme and passed down as the\n * `--seeds-sparkline-color` CSS variable, so light/dark works without depending\n * on the theme's CSS-variable stylesheet.\n */\nexport const SparklineChart = memo(function SparklineChart(\n  props: SparklineChartProps\n) {\n  // The active theme resolves the single trend color. We read it directly rather\n  // than via useSeedsChartSetup — the sparkline has no categorical palette or\n  // series-limit concerns, so the hook's series machinery (and its dummy series\n  // input) would be dead weight. ChartRenderer below is itself a styled-\n  // component, so this adds no new dependency; the \"no styled-components\" trait\n  // of this family is about the wrapper being a plain <div> + static CSS.\n  const theme = useTheme() as TypeTheme;\n\n  const trend = computeTrend(props.data);\n  const trendColor = resolveTrendColor(theme, trend);\n\n  const { options, tooltipTimezone } = buildSparklineChartOptions(props);\n\n  const className = [\n    \"seeds-sparkline\",\n    `seeds-sparkline-${props.variant}`,\n    props.className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={className}\n      style={{ \"--seeds-sparkline-color\": trendColor } as CSSProperties}\n    >\n      <ChartRenderer\n        options={options}\n        series={[{ name: SPARKLINE_SERIES_NAME, color: trendColor }]}\n        colors={[trendColor]}\n        tooltip={props.tooltip}\n        timezone={tooltipTimezone}\n        invalidNumberLabel={props.invalidNumberLabel}\n        hideLegend\n        onReady={props.onReady}\n      />\n    </div>\n  );\n});\n","import type { SeedsChartOptions, SeedsChartType } from \"../shared/chartBase\";\nimport { buildBaseChartOptions } from \"../shared/baseChartOptions\";\nimport {\n  buildDimensionalAxis,\n  resolveTooltipTimezone,\n} from \"../shared/axisOptions\";\nimport type { SparklineChartProps, SparklineVariant } from \"./types\";\n\n// A sparkline line is a `line`; a sparkline bar is a `column` (vertical bars).\nfunction highchartsType(variant: SparklineVariant): SeedsChartType {\n  return variant === \"bar\" ? \"column\" : \"line\";\n}\n\nconst SPARKLINE_SERIES_NAME = \"sparkline\";\n\nexport function buildSparklineChartOptions(props: SparklineChartProps): {\n  options: SeedsChartOptions;\n  /** Resolved timezone for the tooltip date formatter; undefined without a datetime axis. */\n  tooltipTimezone: string | undefined;\n} {\n  const type = highchartsType(props.variant);\n  const tooltipTimezone = props.xAxis\n    ? resolveTooltipTimezone(props.xAxis, props.timezone)\n    : undefined;\n\n  // A configured axis is placed but hidden (labels/line/ticks off). Without one\n  // we fall back to a hidden linear index axis.\n  const xAxis = props.xAxis\n    ? {\n        ...buildDimensionalAxis(props.xAxis, tooltipTimezone ?? \"UTC\"),\n        visible: false,\n      }\n    : { type: \"linear\" as const, visible: false };\n\n  const base = buildBaseChartOptions({\n    type,\n    description: props.description,\n    valueSuffix: props.valueSuffix,\n    timezone: tooltipTimezone,\n  });\n\n  const options: SeedsChartOptions = {\n    ...base,\n    // Zero the outer spacing so the plot fills the (consumer-sized) wrapper.\n    chart: { type, styledMode: true, animation: false, spacing: [0, 0, 0, 0] },\n    xAxis,\n    yAxis: { visible: false },\n    plotOptions: {\n      series: {\n        animation: false,\n        // Decorative micro-chart: no per-point markers on the line.\n        marker: { enabled: false },\n      },\n      // Tight padding so bars read as a compact cluster.\n      column: {\n        pointPadding: 0.05,\n        groupPadding: 0.05,\n        borderWidth: 0,\n        borderRadius: 3,\n      },\n    },\n    series: [\n      {\n        type,\n        name: SPARKLINE_SERIES_NAME,\n        data: [...props.data],\n      },\n    ],\n  };\n\n  return { options, tooltipTimezone };\n}\n\nexport { SPARKLINE_SERIES_NAME };\n","import type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\nimport type { ChartDataPoint } from \"./axis\";\n\n// Family-agnostic trend helpers, shared across chart families. First used by the\n// sparkline (colored entirely by its trend direction); reusable by any chart\n// that wants a sentiment/directional color from a single series (e.g. a\n// sentiment chart).\n\n/**\n * Trend direction derived from a series (first vs. last finite value): rising →\n * `\"positive\"`, falling → `\"negative\"`, flat → `\"neutral\"`.\n */\nexport type Trend = \"positive\" | \"negative\" | \"neutral\";\n\n/** Extract the numeric y-value from a bare number, tuple, or `{ x, y }` point. */\nfunction yValue(point: ChartDataPoint): number | null {\n  if (point == null) return null;\n  if (typeof point === \"number\") return point;\n  if (Array.isArray(point)) return point[1];\n  return point.y;\n}\n\n/**\n * Derive the trend from the series by comparing the first finite value to the\n * last finite value: rising → `\"positive\"`, falling → `\"negative\"`, equal (or\n * fewer than two finite values) → `\"neutral\"`.\n */\nexport function computeTrend(data: ReadonlyArray<ChartDataPoint>): Trend {\n  const finite = data\n    .map(yValue)\n    .filter((v): v is number => v != null && Number.isFinite(v));\n\n  if (finite.length < 2) return \"neutral\";\n\n  const first = finite[0]!;\n  const last = finite[finite.length - 1]!;\n\n  if (last > first) return \"positive\";\n  if (last < first) return \"negative\";\n  return \"neutral\";\n}\n\n/**\n * Resolve the trend to a Seeds decorative highlight/accent color: positive →\n * vibrant green (green-500), negative → vibrant red (red-600), neutral → middle\n * gray (neutral-600). These highlight tones are theme-stable — the same value in\n * light and dark — and are designed to read as accents on either surface.\n */\nexport function resolveTrendColor(theme: TypeTheme, trend: Trend): string {\n  const decorative = theme.colors.container.border.decorative;\n  if (trend === \"positive\") return decorative.green;\n  if (trend === \"negative\") return decorative.red;\n  return decorative.neutral;\n}\n"]}

package/dist/sparkline.css

@@ -0,0 +1,76 @@
+/**
+ * Seeds SparklineChart styles.
+ *
+ * Unlike the other seeds-react-data-viz charts (which inject styles at runtime
+ * via styled-components), SparklineChart ships its styling as this plain CSS
+ * file. Consumers must import it once:
+ *
+ *   import "@sproutsocial/seeds-react-data-viz/sparkline.css";
+ *
+ * The single trend color is provided by the component as the
+ * `--seeds-sparkline-color` custom property (set inline from the JS theme, so it
+ * follows light/dark without depending on the theme CSS-variable stylesheet).
+ * Size the chart by passing Tailwind utilities (or any class names) via
+ * `className` — the defaults below are overridable.
+ */
+
+.seeds-sparkline {
+  /* Compact inline micro-chart by default (matching the Highcharts sparkline
+     demo). Reach for the line/bar chart families when a full-size chart is
+     needed; override these with `className` for anything in between. */
+  display: inline-block;
+  width: 120px;
+  height: 24px;
+  vertical-align: middle;
+  /* Safety net: a chart that mis-measures its container never spills past the
+     sized wrapper. */
+  overflow: hidden;
+}
+
+/* highcharts-react-official renders the chart into a bare <div> with no
+   intrinsic size, and Highcharts measures that element to size the chart. Left
+   at its default `height: auto` the measured height collapses to 0, so
+   Highcharts falls back to its built-in 400px default and overflows the
+   wrapper. Force the render container (and the chart's own inner container +
+   root svg) to fill the sized `.seeds-sparkline` wrapper so Highcharts measures
+   a concrete height instead. */
+.seeds-sparkline > div,
+.seeds-sparkline .highcharts-container,
+.seeds-sparkline .highcharts-root {
+  width: 100%;
+  height: 100%;
+}
+
+/* A sparkline is a decorative overlay — no chart/plot background or border, so
+   it sits transparently on any surface. */
+.seeds-sparkline .highcharts-background,
+.seeds-sparkline .highcharts-plot-background {
+  fill: transparent;
+}
+
+.seeds-sparkline .highcharts-plot-border,
+.seeds-sparkline .highcharts-plot-line {
+  stroke: none;
+}
+
+/* Highcharts renders in styledMode, so fills/strokes come from CSS. Everything
+   in a sparkline is the one trend color. Rounded joins/caps give the line a
+   slightly smoother, softer read. */
+.seeds-sparkline .highcharts-graph {
+  stroke: var(--seeds-sparkline-color);
+  stroke-width: 2px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+/* Bars/points carry no border — the fill alone is the trend color. */
+.seeds-sparkline .highcharts-point {
+  fill: var(--seeds-sparkline-color);
+  stroke: none;
+  stroke-width: 0;
+}
+
+/* Decorative micro-chart: no data-point markers on the line. */
+.seeds-sparkline .highcharts-markers {
+  display: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-data-viz",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "Seeds React Data Viz Components",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -23,6 +23,17 @@
       "import": "./dist/esm/line-area/index.js",
       "require": "./dist/line-area/index.js"
     },
+    "./donut": {
+      "types": "./dist/donut/index.d.ts",
+      "import": "./dist/esm/donut/index.js",
+      "require": "./dist/donut/index.js"
+    },
+    "./sparkline": {
+      "types": "./dist/sparkline/index.d.ts",
+      "import": "./dist/esm/sparkline/index.js",
+      "require": "./dist/sparkline/index.js"
+    },
+    "./sparkline.css": "./dist/sparkline.css",
     "./export": {
       "types": "./dist/export/index.d.ts",
       "import": "./dist/esm/export/index.js",
@@ -33,7 +44,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup --dts",
+    "build": "tsup --dts && cp src/charts/sparkline/sparkline.css dist/sparkline.css",
     "build:debug": "tsup --dts --metafile",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",