@epilot/spark-ui 0.21.0 → 0.22.1

package/dist/components/sankey-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sankey-chart.cjs","names":["SectionTitle","Sankey","Group","NumberFlow"],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\nconst LABEL_STACK_HEIGHT = 26\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n  const halfLabelStack = LABEL_STACK_HEIGHT / 2\n  const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <Sankey<SankeyDatumNode, SankeyDatumLink>\n            root={graph}\n            size={[innerWidth, innerHeight]}\n            nodeWidth={nodeWidth}\n            nodePadding={nodePadding}\n            nodeAlign={nodeAlign}\n            nodeId={(node) => node.id}\n            nodeSort={nodeSort}\n          >\n            {({ graph: laidOut, createPath }) => (\n              <>\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"block\"\n                  height={height}\n                  width={width}\n                >\n                  <Group left={LEFT_INSET} top={TOP_INSET}>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node, index) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        return (\n                          <rect\n                            key={`sankey-node-${index}`}\n                            x={node.x0}\n                            y={node.y0}\n                            width={w}\n                            height={Math.max(1, h)}\n                            fill={fill}\n                            rx={2}\n                          />\n                        )\n                      })}\n                    </Group>\n                  </Group>\n                </svg>\n\n                <div className=\"pointer-events-none absolute inset-0 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]\">\n                  {laidOut.nodes.map((node, index) => {\n                    if (\n                      node.x0 === undefined ||\n                      node.x1 === undefined ||\n                      node.y0 === undefined ||\n                      node.y1 === undefined\n                    ) {\n                      return null\n                    }\n\n                    const h = node.y1 - node.y0\n                    const nodeCenterY = TOP_INSET + node.y0 + h / 2\n                    const labelCenterY = Math.min(\n                      Math.max(nodeCenterY, halfLabelStack),\n                      height - halfLabelStack,\n                    )\n\n                    return (\n                      <div\n                        key={`sankey-label-${node.id ?? index}`}\n                        className=\"absolute flex -translate-y-1/2 flex-col items-start gap-1\"\n                        style={{\n                          left: LEFT_INSET + node.x1 + LABEL_GAP,\n                          top: labelCenterY,\n                          width: labelWidth,\n                        }}\n                      >\n                        <span className=\"text-[11px] leading-none font-semibold whitespace-nowrap text-gray\">\n                          {node.label}\n                        </span>\n                        <NumberFlow\n                          value={node.value ?? 0}\n                          {...(valueSuffix !== undefined && {\n                            suffix: valueSuffix,\n                          })}\n                          {...(valueFormat !== undefined && {\n                            format: valueFormat,\n                          })}\n                          className=\"block min-h-[10px] text-[10px] leading-none text-gray-light tabular-nums\"\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n              </>\n            )}\n          </Sankey>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":"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"}
+{"version":3,"file":"sankey-chart.cjs","names":["SectionTitle","Sankey","Group","NumberFlow"],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\nconst LABEL_STACK_HEIGHT = 26\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n  const halfLabelStack = LABEL_STACK_HEIGHT / 2\n  const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <Sankey<SankeyDatumNode, SankeyDatumLink>\n            root={graph}\n            size={[innerWidth, innerHeight]}\n            nodeWidth={nodeWidth}\n            nodePadding={nodePadding}\n            nodeAlign={nodeAlign}\n            nodeId={(node) => node.id}\n            nodeSort={nodeSort}\n          >\n            {({ graph: laidOut, createPath }) => (\n              <>\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"block\"\n                  height={height}\n                  width={width}\n                >\n                  <Group left={LEFT_INSET} top={TOP_INSET}>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            // oxlint-disable-next-line react/no-array-index-key -- stateless SVG paths; source/target pairs may repeat\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        return (\n                          <rect\n                            key={node.id}\n                            x={node.x0}\n                            y={node.y0}\n                            width={w}\n                            height={Math.max(1, h)}\n                            fill={fill}\n                            rx={2}\n                          />\n                        )\n                      })}\n                    </Group>\n                  </Group>\n                </svg>\n\n                <div className=\"pointer-events-none absolute inset-0 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]\">\n                  {laidOut.nodes.map((node, index) => {\n                    if (\n                      node.x0 === undefined ||\n                      node.x1 === undefined ||\n                      node.y0 === undefined ||\n                      node.y1 === undefined\n                    ) {\n                      return null\n                    }\n\n                    const h = node.y1 - node.y0\n                    const nodeCenterY = TOP_INSET + node.y0 + h / 2\n                    const labelCenterY = Math.min(\n                      Math.max(nodeCenterY, halfLabelStack),\n                      height - halfLabelStack,\n                    )\n\n                    return (\n                      <div\n                        key={`sankey-label-${node.id ?? index}`}\n                        className=\"absolute flex -translate-y-1/2 flex-col items-start gap-1\"\n                        style={{\n                          left: LEFT_INSET + node.x1 + LABEL_GAP,\n                          top: labelCenterY,\n                          width: labelWidth,\n                        }}\n                      >\n                        <span className=\"text-[11px] leading-none font-semibold whitespace-nowrap text-gray\">\n                          {node.label}\n                        </span>\n                        <NumberFlow\n                          value={node.value ?? 0}\n                          {...(valueSuffix !== undefined && {\n                            suffix: valueSuffix,\n                          })}\n                          {...(valueFormat !== undefined && {\n                            format: valueFormat,\n                          })}\n                          className=\"block min-h-[10px] text-[10px] leading-none text-gray-light tabular-nums\"\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n              </>\n            )}\n          </Sankey>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":";;;;;;;;;;AAYA,MAAM,yBAAiD;CACrD,OAAO;CACP,SAAS;CACT,MAAM;CACN,YAAY;CACZ,MAAM;CACN,OAAO;CACP,QAAQ;AACV;AAoDA,MAAM,iBAAiB;AACvB,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,wBAAwB;AAC9B,MAAM,aAAa;AACnB,MAAM,YAAY;AAClB,MAAM,YAAY;AAClB,MAAM,qBAAqB;AAC3B,MAAM,gBAAgB;AAEtB,SAAS,iBACP,MACA,gBACA,cACA;CACA,IAAI,KAAK,OAAO,OAAO,KAAK;CAC5B,IAAI,KAAK,YAAY,iBAAiB,KAAK,WACzC,OAAO,eAAe,KAAK;CAE7B,OAAO;AACT;AAEA,SAAS,YAAY,EACnB,OACA,OACA,iBAAiB,wBACjB,eAAe,eACf,aACA,aACA,SAAS,gBACT,YAAY,oBACZ,cAAc,sBACd,eAAe,uBACf,gBACA,OACA,aACuC;CACvC,MAAM,gBAAA,GAAA,MAAA,QAAsC,IAAI;CAChD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,CAAC;CAEpC,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,UAAU,aAAa;EAC7B,IAAI,CAAC,SAAS;EAEd,MAAM,iBAAiB,IAAI,gBAAgB,YAAY;GACrD,MAAM,QAAQ,QAAQ;GACtB,IAAI,CAAC,OAAO;GACZ,SAAS,MAAM,YAAY,KAAK;EAClC,CAAC;EAED,eAAe,QAAQ,OAAO;EAC9B,aAAa,eAAe,WAAW;CACzC,GAAG,CAAC,CAAC;CAEL,MAAM,WAAA,GAAA,MAAA,eAAwB,IAAI,IAAI,MAAM,KAAK,SAAS,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC;CAK5E,MAAM,gBAAA,GAAA,MAAA,eAEF,MAAM,QACH,SACC,KAAK,QAAQ,KACb,QAAQ,IAAI,KAAK,MAAM,KACvB,QAAQ,IAAI,KAAK,MAAM,CAC3B,GACF,CAAC,OAAO,OAAO,CACjB;CAEA,MAAM,gBAAA,GAAA,MAAA,eAA6B;EACjC,MAAM,gCAAgB,IAAI,IAAY;EACtC,KAAK,MAAM,QAAQ,cAAc;GAC/B,cAAc,IAAI,KAAK,MAAM;GAC7B,cAAc,IAAI,KAAK,MAAM;EAC/B;EACA,OAAO,MAAM,QAAQ,SAAS,cAAc,IAAI,KAAK,EAAE,CAAC;CAC1D,GAAG,CAAC,OAAO,YAAY,CAAC;CAExB,MAAM,aAAA,GAAA,MAAA,eAA0B;EAC9B,MAAM,sBAAM,IAAI,IAAoB;EACpC,KAAK,MAAM,QAAQ,OACjB,IAAI,IAAI,KAAK,IAAI,iBAAiB,MAAM,gBAAgB,YAAY,CAAC;EAEvE,OAAO;CACT,GAAG;EAAC;EAAgB;EAAc;CAAK,CAAC;CAExC,MAAM,aAAA,GAAA,MAAA,eAA0B;EAC9B,MAAM,sBAAM,IAAI,IAAoB;EACpC,aAAa,SAAS,MAAM,UAAU,IAAI,IAAI,KAAK,IAAI,KAAK,CAAC;EAC7D,OAAO;CACT,GAAG,CAAC,YAAY,CAAC;CAEjB,MAAM,YAAA,GAAA,MAAA,gBAGA,GACA,OAEC,UAAU,IAAI,EAAE,EAAE,KAAK,MAAM,UAAU,IAAI,EAAE,EAAE,KAAK,IACzD,CAAC,SAAS,CACZ;CAEA,MAAM,SAAA,GAAA,MAAA,gBACG;EACL,OAAO,aAAa,KAAK,UAAU,EAAE,GAAG,KAAK,EAAE;EAC/C,OAAO,aAAa,KAAK,UAAU,EAAE,GAAG,KAAK,EAAE;CACjD,IACA,CAAC,cAAc,YAAY,CAC7B;CAEA,MAAM,aAAA,GAAA,MAAA,eAA0B;EAC9B,MAAM,OAAO,IAAI,IAAI,cAAc;EACnC,QAAQ,MAAoD,MAC1D,KAAK,IAAI,KAAK,EAAE,IAAK,KAAK,SAAS,KAAA,GAAA,aAAA,eAAmB,MAAM,CAAC;CACjE,GAAG,CAAC,cAAc,CAAC;CAEnB,MAAM,aAAa,KAAK,IAAI,GAAG,QAAQ,eAAe,UAAU;CAChE,MAAM,cAAc,KAAK,IAAI,GAAG,SAAS,YAAY,CAAC;CACtD,MAAM,iBAAiB,qBAAqB;CAC5C,MAAM,aAAa,KAAK,IAAI,IAAI,eAAe,YAAY,CAAC;CAE5D,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,YAAA,GAAA,GAAA,IAAc,mCAAmC,SAAS;YAA/D,CACG,SAAS,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,cAAD,EAAA,UAAe,MAAoB,CAAA,GAE7C,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,KAAK;GAAc,WAAU;GAAkB,OAAO,EAAE,OAAO;aACjE,QAAQ,KAAK,aAAa,KACzB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,QAAD;IACE,MAAM;IACN,MAAM,CAAC,YAAY,WAAW;IACnB;IACE;IACF;IACX,SAAS,SAAS,KAAK;IACb;eAER,EAAE,OAAO,SAAS,iBAClB,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;KACE,eAAY;KACZ,WAAU;KACF;KACD;eAEP,iBAAA,GAAA,kBAAA,MAACC,YAAAA,OAAD;MAAO,MAAM;MAAY,KAAK;gBAA9B,CACE,iBAAA,GAAA,kBAAA,KAACA,YAAAA,OAAD;OAAO,WAAU;iBACd,QAAQ,MAAM,KAAK,MAAM,UAAU;QAClC,MAAM,WACJ,OAAO,KAAK,WAAW,WAEjB,KAAK,OAIL,KACF,OAAO,KAAK,MAAM;QACxB,MAAM,SACJ,KAAK,SAAS,UAAU,IAAI,QAAQ,KAAK;QAE3C,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAGE,GAAG,WAAW,IAAI,KAAK;SACvB,MAAK;SACG;SACR,eAAe;SACf,aAAa,KAAK,IAAI,GAAG,KAAK,SAAS,CAAC;QACzC,GANM,eAAe,OAMrB;OAEL,CAAC;MACI,CAAA,GAEP,iBAAA,GAAA,kBAAA,KAACA,YAAAA,OAAD;OAAO,WAAU;iBACd,QAAQ,MAAM,KAAK,SAAS;QAC3B,IACE,KAAK,OAAO,KAAA,KACZ,KAAK,OAAO,KAAA,KACZ,KAAK,OAAO,KAAA,KACZ,KAAK,OAAO,KAAA,GAEZ,OAAO;QAGT,MAAM,IAAI,KAAK,KAAK,KAAK;QACzB,MAAM,IAAI,KAAK,KAAK,KAAK;QACzB,MAAM,OAAO,UAAU,IAAI,KAAK,EAAE,KAAK;QAEvC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAEE,GAAG,KAAK;SACR,GAAG,KAAK;SACR,OAAO;SACP,QAAQ,KAAK,IAAI,GAAG,CAAC;SACf;SACN,IAAI;QACL,GAPM,KAAK,EAOX;OAEL,CAAC;MACI,CAAA,CACF;;IACJ,CAAA,GAEL,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAU;eACZ,QAAQ,MAAM,KAAK,MAAM,UAAU;MAClC,IACE,KAAK,OAAO,KAAA,KACZ,KAAK,OAAO,KAAA,KACZ,KAAK,OAAO,KAAA,KACZ,KAAK,OAAO,KAAA,GAEZ,OAAO;MAGT,MAAM,IAAI,KAAK,KAAK,KAAK;MACzB,MAAM,cAAc,YAAY,KAAK,KAAK,IAAI;MAC9C,MAAM,eAAe,KAAK,IACxB,KAAK,IAAI,aAAa,cAAc,GACpC,SAAS,cACX;MAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;OAEE,WAAU;OACV,OAAO;QACL,MAAM,aAAa,KAAK,KAAK;QAC7B,KAAK;QACL,OAAO;OACT;iBAPF,CASE,iBAAA,GAAA,kBAAA,KAAC,QAAD;QAAM,WAAU;kBACb,KAAK;OACF,CAAA,GACN,iBAAA,GAAA,kBAAA,KAACC,gCAAD;QACE,OAAO,KAAK,SAAS;QACrB,GAAK,gBAAgB,KAAA,KAAa,EAChC,QAAQ,YACV;QACA,GAAK,gBAAgB,KAAA,KAAa,EAChC,QAAQ,YACV;QACA,WAAU;OACX,CAAA,CACE;SArBE,gBAAgB,KAAK,MAAM,OAqB7B;KAET,CAAC;IACE,CAAA,CACL,EAAA,CAAA;GAEE,CAAA;EAEP,CAAA,CACF;;AAET"}

package/dist/components/sankey-chart.js

@@ -118,7 +118,7 @@ function SankeyChart({ nodes, links, categoryColors = SANKEY_CATEGORY_COLORS, de
 							})
 						}), /* @__PURE__ */ jsx(Group, {
 							className: "visx-sankey-nodes",
-							children: laidOut.nodes.map((node, index) => {
+							children: laidOut.nodes.map((node) => {
 								if (node.x0 === void 0 || node.x1 === void 0 || node.y0 === void 0 || node.y1 === void 0) return null;
 								const w = node.x1 - node.x0;
 								const h = node.y1 - node.y0;
@@ -130,7 +130,7 @@ function SankeyChart({ nodes, links, categoryColors = SANKEY_CATEGORY_COLORS, de
 									height: Math.max(1, h),
 									fill,
 									rx: 2
-								}, `sankey-node-${index}`);
+								}, node.id);
 							})
 						})]
 					})

package/dist/components/sankey-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\nconst LABEL_STACK_HEIGHT = 26\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n  const halfLabelStack = LABEL_STACK_HEIGHT / 2\n  const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <Sankey<SankeyDatumNode, SankeyDatumLink>\n            root={graph}\n            size={[innerWidth, innerHeight]}\n            nodeWidth={nodeWidth}\n            nodePadding={nodePadding}\n            nodeAlign={nodeAlign}\n            nodeId={(node) => node.id}\n            nodeSort={nodeSort}\n          >\n            {({ graph: laidOut, createPath }) => (\n              <>\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"block\"\n                  height={height}\n                  width={width}\n                >\n                  <Group left={LEFT_INSET} top={TOP_INSET}>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node, index) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        return (\n                          <rect\n                            key={`sankey-node-${index}`}\n                            x={node.x0}\n                            y={node.y0}\n                            width={w}\n                            height={Math.max(1, h)}\n                            fill={fill}\n                            rx={2}\n                          />\n                        )\n                      })}\n                    </Group>\n                  </Group>\n                </svg>\n\n                <div className=\"pointer-events-none absolute inset-0 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]\">\n                  {laidOut.nodes.map((node, index) => {\n                    if (\n                      node.x0 === undefined ||\n                      node.x1 === undefined ||\n                      node.y0 === undefined ||\n                      node.y1 === undefined\n                    ) {\n                      return null\n                    }\n\n                    const h = node.y1 - node.y0\n                    const nodeCenterY = TOP_INSET + node.y0 + h / 2\n                    const labelCenterY = Math.min(\n                      Math.max(nodeCenterY, halfLabelStack),\n                      height - halfLabelStack,\n                    )\n\n                    return (\n                      <div\n                        key={`sankey-label-${node.id ?? index}`}\n                        className=\"absolute flex -translate-y-1/2 flex-col items-start gap-1\"\n                        style={{\n                          left: LEFT_INSET + node.x1 + LABEL_GAP,\n                          top: labelCenterY,\n                          width: labelWidth,\n                        }}\n                      >\n                        <span className=\"text-[11px] leading-none font-semibold whitespace-nowrap text-gray\">\n                          {node.label}\n                        </span>\n                        <NumberFlow\n                          value={node.value ?? 0}\n                          {...(valueSuffix !== undefined && {\n                            suffix: valueSuffix,\n                          })}\n                          {...(valueFormat !== undefined && {\n                            format: valueFormat,\n                          })}\n                          className=\"block min-h-[10px] text-[10px] leading-none text-gray-light tabular-nums\"\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n              </>\n            )}\n          </Sankey>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":"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"}
+{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\nconst LABEL_STACK_HEIGHT = 26\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n  const halfLabelStack = LABEL_STACK_HEIGHT / 2\n  const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <Sankey<SankeyDatumNode, SankeyDatumLink>\n            root={graph}\n            size={[innerWidth, innerHeight]}\n            nodeWidth={nodeWidth}\n            nodePadding={nodePadding}\n            nodeAlign={nodeAlign}\n            nodeId={(node) => node.id}\n            nodeSort={nodeSort}\n          >\n            {({ graph: laidOut, createPath }) => (\n              <>\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"block\"\n                  height={height}\n                  width={width}\n                >\n                  <Group left={LEFT_INSET} top={TOP_INSET}>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            // oxlint-disable-next-line react/no-array-index-key -- stateless SVG paths; source/target pairs may repeat\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        return (\n                          <rect\n                            key={node.id}\n                            x={node.x0}\n                            y={node.y0}\n                            width={w}\n                            height={Math.max(1, h)}\n                            fill={fill}\n                            rx={2}\n                          />\n                        )\n                      })}\n                    </Group>\n                  </Group>\n                </svg>\n\n                <div className=\"pointer-events-none absolute inset-0 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]\">\n                  {laidOut.nodes.map((node, index) => {\n                    if (\n                      node.x0 === undefined ||\n                      node.x1 === undefined ||\n                      node.y0 === undefined ||\n                      node.y1 === undefined\n                    ) {\n                      return null\n                    }\n\n                    const h = node.y1 - node.y0\n                    const nodeCenterY = TOP_INSET + node.y0 + h / 2\n                    const labelCenterY = Math.min(\n                      Math.max(nodeCenterY, halfLabelStack),\n                      height - halfLabelStack,\n                    )\n\n                    return (\n                      <div\n                        key={`sankey-label-${node.id ?? index}`}\n                        className=\"absolute flex -translate-y-1/2 flex-col items-start gap-1\"\n                        style={{\n                          left: LEFT_INSET + node.x1 + LABEL_GAP,\n                          top: labelCenterY,\n                          width: labelWidth,\n                        }}\n                      >\n                        <span className=\"text-[11px] leading-none font-semibold whitespace-nowrap text-gray\">\n                          {node.label}\n                        </span>\n                        <NumberFlow\n                          value={node.value ?? 0}\n                          {...(valueSuffix !== undefined && {\n                            suffix: valueSuffix,\n                          })}\n                          {...(valueFormat !== undefined && {\n                            format: valueFormat,\n                          })}\n                          className=\"block min-h-[10px] text-[10px] leading-none text-gray-light tabular-nums\"\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n              </>\n            )}\n          </Sankey>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":"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"}

package/dist/components/slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.cjs","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = Math.min(max, Math.max(min, value))\n\n  if (!(step > 0)) {\n    return clamped\n  }\n\n  const snapped = min + Math.round((clamped - min) / step) * step\n  const bounded = Math.min(max, Math.max(min, snapped))\n  const decimals = (String(step).split('.')[1] ?? '').length\n\n  return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n  next: number | readonly number[],\n  current: SliderValue,\n): SliderValue {\n  const nextValues = typeof next === 'number' ? [next] : [...next]\n  if (Array.isArray(current)) {\n    return nextValues\n  }\n  return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n  values: readonly number[]\n  min: number\n  max: number\n  step: number\n  disabled: boolean\n  /**\n   * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n   * clamps; range values are kept sorted. Fires `onValueChange` only when the\n   * value actually changes. When `commit` is set it also fires `onValueCommitted`\n   * — but only if the committed value differs from `commitBaseline` (the value\n   * when editing began), so a plain focus→blur never emits a spurious commit.\n   */\n  setThumbValue: (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n  const ctx = React.useContext(SliderContext)\n\n  if (!ctx) {\n    throw new Error(`<${part}> must be rendered inside <Slider>`)\n  }\n\n  return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n  React.ComponentProps<typeof BaseSlider.Root>,\n  'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n  value?: Value\n  defaultValue?: Value\n  // Generic over the value shape: a single `number` keeps single-thumb handlers\n  // number-typed, an array keeps range handlers array-typed — so callers don't\n  // widen/narrow at every call site.\n  onValueChange?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => void\n  onValueCommitted?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.CommitEventDetails,\n  ) => void\n  /**\n   * `ticks` marks each step with a small dot on the rail — light on the accent\n   * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n   * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n   * default render) for vertical sliders. Default `default`.\n   */\n  variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n  className,\n  children,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  orientation = 'horizontal',\n  variant = 'default',\n  onValueChange,\n  onValueCommitted,\n  // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n  // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n  // the classic look and the thumb inside the rail.\n  thumbAlignment = 'edge',\n  // The accessible name belongs on the thumb's nested range input, not just the\n  // Root — so keep it on the Root (names the group) AND forward it to the\n  // childless-default thumb(s). When you compose your own thumbs, label them.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SliderProps<Value>) {\n  const isControlled = value !== undefined\n  const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n    defaultValue ?? min,\n  )\n  const current = (isControlled ? value : uncontrolled) as SliderValue\n  const values = React.useMemo(\n    () => (Array.isArray(current) ? current : [current]),\n    [current],\n  )\n\n  // Base UI hands back `number | readonly number[]`; we forward it as the\n  // caller's `Value` (the runtime shape matches what they passed in).\n  const emitChange = (\n    next: number | readonly number[],\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => {\n    const shaped = matchValueShape(next, current) as Value\n\n    if (!isControlled) {\n      setUncontrolled(shaped as SliderValue)\n    }\n\n    onValueChange?.(shaped, eventDetails)\n  }\n\n  // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n  // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n  // desync the inputs from the thumbs). Fires onValueChange only on a real\n  // change; fires onValueCommitted only when the committed value moved off the\n  // pre-edit baseline.\n  const setThumbValue = (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => {\n    const snapped = snapToStep(next, min, max, step)\n    const wasArray = Array.isArray(current)\n    let nextValue: SliderValue\n\n    if (wasArray) {\n      const copy = [...(current as number[])]\n      copy[index] = snapped\n      copy.sort((a, b) => a - b)\n      nextValue = copy\n    } else {\n      nextValue = snapped\n    }\n\n    const changed = wasArray\n      ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n      : nextValue !== current\n\n    // input-driven changes have no pointer/keyboard event; Base UI's own detail\n    // object isn't constructible here, so we hand the consumer a minimal one.\n    const details = {\n      reason: 'input-change',\n    } as unknown as BaseSlider.Root.ChangeEventDetails\n\n    if (changed) {\n      emitChange(nextValue, details)\n    }\n\n    if (options?.commit) {\n      const committedChanged =\n        options.commitBaseline === undefined\n          ? changed\n          : snapped !== options.commitBaseline\n\n      if (committedChanged) {\n        onValueCommitted?.(\n          nextValue as Value,\n          details as unknown as BaseSlider.Root.CommitEventDetails,\n        )\n      }\n    }\n  }\n\n  // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n  // setThumbValue always closes over the current value + latest callbacks.\n  const context: SliderContextValue = {\n    values,\n    min,\n    max,\n    step,\n    disabled,\n    setThumbValue,\n  }\n\n  // ticks are horizontal-only in the default render; SliderTicks self-hides when\n  // the step count isn't countable, so no density check is needed here.\n  const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n  return (\n    <SliderContext.Provider value={context}>\n      <BaseSlider.Root\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-slot=\"slider\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation}\n        thumbAlignment={thumbAlignment}\n        onValueChange={emitChange}\n        onValueCommitted={(next, eventDetails) =>\n          onValueCommitted?.(\n            matchValueShape(next, current) as Value,\n            eventDetails,\n          )\n        }\n        className={cn(\n          'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <SliderControl>\n            <SliderTrack>\n              <SliderIndicator />\n              {showTicks ? <SliderTicks /> : null}\n              {values.map((_, index) => (\n                <SliderThumb\n                  aria-label={ariaLabel}\n                  aria-labelledby={ariaLabelledby}\n                  index={values.length > 1 ? index : undefined}\n                  key={index}\n                />\n              ))}\n            </SliderTrack>\n          </SliderControl>\n        )}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      data-slot=\"slider-control\"\n      className={cn(\n        'group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      data-slot=\"slider-track\"\n      className={cn(\n        // 12px rail so the corner radius is legible; follows the [data-radius] knob\n        // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n        // child and would be clipped.\n        'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      data-slot=\"slider-indicator\"\n      className={cn(\n        // matches the rail's radius so the fill's corners track the knob too\n        'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n        // ease only while focused (keyboard/rail-click); programmatic and\n        // initial value sets snap instantly instead of sweeping from 0.\n        // transition-none base matters: bare duration-150 leaves property=all\n        'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n  const { min, max, step, values } = useSliderContext('SliderTicks')\n\n  if (!(step > 0) || max <= min) {\n    return null\n  }\n\n  // count the reachable step intervals (floor, so a non-dividing step still gets\n  // a dot on its last reachable step); drop the final one when it lands on max.\n  const intervals = Math.floor((max - min) / step)\n\n  if (intervals < 2 || intervals > MAX_TICKS) {\n    return null\n  }\n\n  const lastIsEndpoint = min + intervals * step === max\n  const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n  // Active band: [min, value] for a single thumb, [low, high] for a range.\n  const bandLow = values.length > 1 ? Math.min(...values) : min\n  const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn('pointer-events-none absolute inset-0', className)}\n      data-slot=\"slider-ticks\"\n      {...props}\n    >\n      {Array.from({ length: dotCount }, (_, k) => {\n        const index = k + 1 // interior steps only (skip the two endpoints)\n        const position = min + index * step\n        const pct = ((position - min) / (max - min)) * 100\n        const filled = position >= bandLow && position <= bandHigh\n\n        return (\n          <span\n            className={cn(\n              'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n              // light dot on the accent fill (flips to step-1 in HC via the token);\n              // neutral gray dot on the unfilled rail.\n              filled\n                ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n                : 'bg-gray-a8',\n            )}\n            key={index}\n            style={{ left: `${pct}%` }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      data-slot=\"slider-thumb\"\n      className={cn(\n        'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n        'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n        'data-dragging:ring-2 data-dragging:ring-offset-2',\n        'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      data-slot=\"slider-value\"\n      className={cn('text-sm text-gray tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n  React.ComponentProps<'input'>,\n  'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n  /** Which thumb this input drives on a range slider. Defaults to 0. */\n  index?: number\n  /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n  unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n  className,\n  index = 0,\n  unit,\n  disabled,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  ...props\n}: SliderInputProps) {\n  const ctx = useSliderContext('SliderInput')\n  const currentValue = ctx.values[index] ?? ctx.min\n  const [draft, setDraft] = React.useState<string>(String(currentValue))\n  const [editing, setEditing] = React.useState(false)\n  // the thumb value when editing began — commit fires only if it moved off this\n  const baselineRef = React.useRef(currentValue)\n\n  // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n  // but never fight the user's in-progress typing.\n  React.useEffect(() => {\n    if (!editing) {\n      setDraft(String(currentValue))\n    }\n  }, [currentValue, editing])\n\n  const parseInput = (raw: string): number | null => {\n    if (raw.trim() === '') {\n      return null\n    }\n\n    const parsed = Number(raw)\n\n    return Number.isNaN(parsed) ? null : parsed\n  }\n\n  const commit = () => {\n    const parsed = parseInput(draft)\n\n    if (parsed === null) {\n      setDraft(String(currentValue)) // reset an empty/invalid entry\n      return\n    }\n\n    ctx.setThumbValue(index, parsed, {\n      commit: true,\n      commitBaseline: baselineRef.current,\n    })\n  }\n\n  return (\n    <span\n      data-slot=\"slider-input\"\n      className={cn('inline-flex items-baseline gap-1', className)}\n    >\n      <input\n        type=\"number\"\n        inputMode=\"decimal\"\n        min={ctx.min}\n        max={ctx.max}\n        step={ctx.step}\n        disabled={disabled ?? ctx.disabled}\n        value={editing ? draft : String(currentValue)}\n        onChange={(event) => {\n          const raw = event.target.value\n          setDraft(raw)\n          const parsed = parseInput(raw)\n\n          // live-update the thumb only when the typed value is already in range,\n          // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n          // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n          if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n            ctx.setThumbValue(index, parsed)\n          }\n        }}\n        onFocus={(event) => {\n          baselineRef.current = ctx.values[index] ?? ctx.min\n          setEditing(true)\n          onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          setEditing(false)\n          commit()\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          // Enter blurs, and the single onBlur commit runs — no double-commit.\n          if (event.key === 'Enter') {\n            event.currentTarget.blur()\n          }\n\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          'w-16 bg-transparent tabular-nums outline-hidden',\n          'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          // hide the native spinners — the slider is the primary affordance\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...props}\n      />\n      {unit ? (\n        <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n          {unit}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n  Slider,\n  SliderControl,\n  SliderIndicator,\n  SliderInput,\n  SliderThumb,\n  SliderTicks,\n  SliderTrack,\n  SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":"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"}
+{"version":3,"file":"slider.cjs","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = Math.min(max, Math.max(min, value))\n\n  if (!(step > 0)) {\n    return clamped\n  }\n\n  const snapped = min + Math.round((clamped - min) / step) * step\n  const bounded = Math.min(max, Math.max(min, snapped))\n  const decimals = (String(step).split('.')[1] ?? '').length\n\n  return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n  next: number | readonly number[],\n  current: SliderValue,\n): SliderValue {\n  const nextValues = typeof next === 'number' ? [next] : [...next]\n  if (Array.isArray(current)) {\n    return nextValues\n  }\n  return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n  values: readonly number[]\n  min: number\n  max: number\n  step: number\n  disabled: boolean\n  /**\n   * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n   * clamps; range values are kept sorted. Fires `onValueChange` only when the\n   * value actually changes. When `commit` is set it also fires `onValueCommitted`\n   * — but only if the committed value differs from `commitBaseline` (the value\n   * when editing began), so a plain focus→blur never emits a spurious commit.\n   */\n  setThumbValue: (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n  const ctx = React.useContext(SliderContext)\n\n  if (!ctx) {\n    throw new Error(`<${part}> must be rendered inside <Slider>`)\n  }\n\n  return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n  React.ComponentProps<typeof BaseSlider.Root>,\n  'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n  value?: Value\n  defaultValue?: Value\n  // Generic over the value shape: a single `number` keeps single-thumb handlers\n  // number-typed, an array keeps range handlers array-typed — so callers don't\n  // widen/narrow at every call site.\n  onValueChange?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => void\n  onValueCommitted?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.CommitEventDetails,\n  ) => void\n  /**\n   * `ticks` marks each step with a small dot on the rail — light on the accent\n   * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n   * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n   * default render) for vertical sliders. Default `default`.\n   */\n  variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n  className,\n  children,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  orientation = 'horizontal',\n  variant = 'default',\n  onValueChange,\n  onValueCommitted,\n  // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n  // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n  // the classic look and the thumb inside the rail.\n  thumbAlignment = 'edge',\n  // The accessible name belongs on the thumb's nested range input, not just the\n  // Root — so keep it on the Root (names the group) AND forward it to the\n  // childless-default thumb(s). When you compose your own thumbs, label them.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SliderProps<Value>) {\n  const isControlled = value !== undefined\n  const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n    defaultValue ?? min,\n  )\n  const current = (isControlled ? value : uncontrolled) as SliderValue\n  const values = React.useMemo(\n    () => (Array.isArray(current) ? current : [current]),\n    [current],\n  )\n\n  // Base UI hands back `number | readonly number[]`; we forward it as the\n  // caller's `Value` (the runtime shape matches what they passed in).\n  const emitChange = (\n    next: number | readonly number[],\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => {\n    const shaped = matchValueShape(next, current) as Value\n\n    if (!isControlled) {\n      setUncontrolled(shaped as SliderValue)\n    }\n\n    onValueChange?.(shaped, eventDetails)\n  }\n\n  // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n  // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n  // desync the inputs from the thumbs). Fires onValueChange only on a real\n  // change; fires onValueCommitted only when the committed value moved off the\n  // pre-edit baseline.\n  const setThumbValue = (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => {\n    const snapped = snapToStep(next, min, max, step)\n    const wasArray = Array.isArray(current)\n    let nextValue: SliderValue\n\n    if (wasArray) {\n      const copy = [...(current as number[])]\n      copy[index] = snapped\n      copy.sort((a, b) => a - b)\n      nextValue = copy\n    } else {\n      nextValue = snapped\n    }\n\n    const changed = wasArray\n      ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n      : nextValue !== current\n\n    // input-driven changes have no pointer/keyboard event; Base UI's own detail\n    // object isn't constructible here, so we hand the consumer a minimal one.\n    const details = {\n      reason: 'input-change',\n    } as unknown as BaseSlider.Root.ChangeEventDetails\n\n    if (changed) {\n      emitChange(nextValue, details)\n    }\n\n    if (options?.commit) {\n      const committedChanged =\n        options.commitBaseline === undefined\n          ? changed\n          : snapped !== options.commitBaseline\n\n      if (committedChanged) {\n        onValueCommitted?.(\n          nextValue as Value,\n          details as unknown as BaseSlider.Root.CommitEventDetails,\n        )\n      }\n    }\n  }\n\n  // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n  // setThumbValue always closes over the current value + latest callbacks.\n  const context: SliderContextValue = {\n    values,\n    min,\n    max,\n    step,\n    disabled,\n    setThumbValue,\n  }\n\n  // ticks are horizontal-only in the default render; SliderTicks self-hides when\n  // the step count isn't countable, so no density check is needed here.\n  const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n  return (\n    <SliderContext.Provider value={context}>\n      <BaseSlider.Root\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-slot=\"slider\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation}\n        thumbAlignment={thumbAlignment}\n        onValueChange={emitChange}\n        onValueCommitted={(next, eventDetails) =>\n          onValueCommitted?.(\n            matchValueShape(next, current) as Value,\n            eventDetails,\n          )\n        }\n        className={cn(\n          'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <SliderControl>\n            <SliderTrack>\n              <SliderIndicator />\n              {showTicks ? <SliderTicks /> : null}\n              {values.map((_, index) => (\n                <SliderThumb\n                  aria-label={ariaLabel}\n                  aria-labelledby={ariaLabelledby}\n                  index={values.length > 1 ? index : undefined}\n                  // oxlint-disable-next-line react/no-array-index-key -- Base UI identifies thumbs by their index\n                  key={index}\n                />\n              ))}\n            </SliderTrack>\n          </SliderControl>\n        )}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      data-slot=\"slider-control\"\n      className={cn(\n        'group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      data-slot=\"slider-track\"\n      className={cn(\n        // 12px rail so the corner radius is legible; follows the [data-radius] knob\n        // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n        // child and would be clipped.\n        'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      data-slot=\"slider-indicator\"\n      className={cn(\n        // matches the rail's radius so the fill's corners track the knob too\n        'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n        // ease only while focused (keyboard/rail-click); programmatic and\n        // initial value sets snap instantly instead of sweeping from 0.\n        // transition-none base matters: bare duration-150 leaves property=all\n        'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n  const { min, max, step, values } = useSliderContext('SliderTicks')\n\n  if (!(step > 0) || max <= min) {\n    return null\n  }\n\n  // count the reachable step intervals (floor, so a non-dividing step still gets\n  // a dot on its last reachable step); drop the final one when it lands on max.\n  const intervals = Math.floor((max - min) / step)\n\n  if (intervals < 2 || intervals > MAX_TICKS) {\n    return null\n  }\n\n  const lastIsEndpoint = min + intervals * step === max\n  const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n  // Active band: [min, value] for a single thumb, [low, high] for a range.\n  const bandLow = values.length > 1 ? Math.min(...values) : min\n  const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn('pointer-events-none absolute inset-0', className)}\n      data-slot=\"slider-ticks\"\n      {...props}\n    >\n      {Array.from({ length: dotCount }, (_, k) => {\n        const index = k + 1 // interior steps only (skip the two endpoints)\n        const position = min + index * step\n        const pct = ((position - min) / (max - min)) * 100\n        const filled = position >= bandLow && position <= bandHigh\n\n        return (\n          <span\n            className={cn(\n              'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n              // light dot on the accent fill (flips to step-1 in HC via the token);\n              // neutral gray dot on the unfilled rail.\n              filled\n                ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n                : 'bg-gray-a8',\n            )}\n            key={index}\n            style={{ left: `${pct}%` }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      data-slot=\"slider-thumb\"\n      className={cn(\n        'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n        'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n        'data-dragging:ring-2 data-dragging:ring-offset-2',\n        'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      data-slot=\"slider-value\"\n      className={cn('text-sm text-gray tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n  React.ComponentProps<'input'>,\n  'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n  /** Which thumb this input drives on a range slider. Defaults to 0. */\n  index?: number\n  /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n  unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n  className,\n  index = 0,\n  unit,\n  disabled,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  ...props\n}: SliderInputProps) {\n  const ctx = useSliderContext('SliderInput')\n  const currentValue = ctx.values[index] ?? ctx.min\n  const [draft, setDraft] = React.useState<string>(String(currentValue))\n  const [editing, setEditing] = React.useState(false)\n  // the thumb value when editing began — commit fires only if it moved off this\n  const baselineRef = React.useRef(currentValue)\n\n  // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n  // but never fight the user's in-progress typing.\n  React.useEffect(() => {\n    if (!editing) {\n      setDraft(String(currentValue))\n    }\n  }, [currentValue, editing])\n\n  const parseInput = (raw: string): number | null => {\n    if (raw.trim() === '') {\n      return null\n    }\n\n    const parsed = Number(raw)\n\n    return Number.isNaN(parsed) ? null : parsed\n  }\n\n  const commit = () => {\n    const parsed = parseInput(draft)\n\n    if (parsed === null) {\n      setDraft(String(currentValue)) // reset an empty/invalid entry\n      return\n    }\n\n    ctx.setThumbValue(index, parsed, {\n      commit: true,\n      commitBaseline: baselineRef.current,\n    })\n  }\n\n  return (\n    <span\n      data-slot=\"slider-input\"\n      className={cn('inline-flex items-baseline gap-1', className)}\n    >\n      <input\n        type=\"number\"\n        inputMode=\"decimal\"\n        min={ctx.min}\n        max={ctx.max}\n        step={ctx.step}\n        disabled={disabled ?? ctx.disabled}\n        value={editing ? draft : String(currentValue)}\n        onChange={(event) => {\n          const raw = event.target.value\n          setDraft(raw)\n          const parsed = parseInput(raw)\n\n          // live-update the thumb only when the typed value is already in range,\n          // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n          // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n          if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n            ctx.setThumbValue(index, parsed)\n          }\n        }}\n        onFocus={(event) => {\n          baselineRef.current = ctx.values[index] ?? ctx.min\n          setEditing(true)\n          onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          setEditing(false)\n          commit()\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          // Enter blurs, and the single onBlur commit runs — no double-commit.\n          if (event.key === 'Enter') {\n            event.currentTarget.blur()\n          }\n\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          'w-16 bg-transparent tabular-nums outline-hidden',\n          'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          // hide the native spinners — the slider is the primary affordance\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...props}\n      />\n      {unit ? (\n        <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n          {unit}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n  Slider,\n  SliderControl,\n  SliderIndicator,\n  SliderInput,\n  SliderThumb,\n  SliderTicks,\n  SliderTrack,\n  SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":";;;;;;;;;AAUA,MAAM,YAAY;AAKlB,SAAS,WACP,OACA,KACA,KACA,MACQ;CACR,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;CAElD,IAAI,EAAE,OAAO,IACX,OAAO;CAGT,MAAM,UAAU,MAAM,KAAK,OAAO,UAAU,OAAO,IAAI,IAAI;CAC3D,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,OAAO,CAAC;CACpD,MAAM,YAAY,OAAO,IAAI,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;CAEpD,OAAO,WAAW,IAAI,OAAO,QAAQ,QAAQ,QAAQ,CAAC,IAAI;AAC5D;AAEA,SAAS,gBACP,MACA,SACa;CACb,MAAM,aAAa,OAAO,SAAS,WAAW,CAAC,IAAI,IAAI,CAAC,GAAG,IAAI;CAC/D,IAAI,MAAM,QAAQ,OAAO,GACvB,OAAO;CAET,OAAO,WAAW,MAAM;AAC1B;AA6BA,MAAM,gBAAgBA,MAAM,cAAyC,IAAI;AAEzE,SAAS,iBAAiB,MAAkC;CAC1D,MAAM,MAAMA,MAAM,WAAW,aAAa;CAE1C,IAAI,CAAC,KACH,MAAM,IAAI,MAAM,IAAI,KAAK,mCAAmC;CAG9D,OAAO;AACT;;;;;;;;AAmCA,SAAS,OAAgD,EACvD,WACA,UACA,OACA,cACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,WAAW,OACX,cAAc,cACd,UAAU,WACV,eACA,kBAIA,iBAAiB,QAIjB,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACkB;CACrB,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,cAAc,mBAAmBA,MAAM,SAC5C,gBAAgB,GAClB;CACA,MAAM,UAAW,eAAe,QAAQ;CACxC,MAAM,SAASA,MAAM,cACZ,MAAM,QAAQ,OAAO,IAAI,UAAU,CAAC,OAAO,GAClD,CAAC,OAAO,CACV;CAIA,MAAM,cACJ,MACA,iBACG;EACH,MAAM,SAAS,gBAAgB,MAAM,OAAO;EAE5C,IAAI,CAAC,cACH,gBAAgB,MAAqB;EAGvC,gBAAgB,QAAQ,YAAY;CACtC;CAOA,MAAM,iBACJ,OACA,MACA,YACG;EACH,MAAM,UAAU,WAAW,MAAM,KAAK,KAAK,IAAI;EAC/C,MAAM,WAAW,MAAM,QAAQ,OAAO;EACtC,IAAI;EAEJ,IAAI,UAAU;GACZ,MAAM,OAAO,CAAC,GAAI,OAAoB;GACtC,KAAK,SAAS;GACd,KAAK,MAAM,GAAG,MAAM,IAAI,CAAC;GACzB,YAAY;EACd,OACE,YAAY;EAGd,MAAM,UAAU,WACX,UAAuB,MAAM,GAAG,MAAM,MAAO,QAAqB,EAAE,IACrE,cAAc;EAIlB,MAAM,UAAU,EACd,QAAQ,eACV;EAEA,IAAI,SACF,WAAW,WAAW,OAAO;EAG/B,IAAI,SAAS;OAET,QAAQ,mBAAmB,KAAA,IACvB,UACA,YAAY,QAAQ,gBAGxB,mBACE,WACA,OACF;EAAA;CAGN;CAIA,MAAM,UAA8B;EAClC;EACA;EACA;EACA;EACA;EACA;CACF;CAIA,MAAM,YAAY,YAAY,WAAW,gBAAgB;CAEzD,OACE,iBAAA,GAAA,kBAAA,KAAC,cAAc,UAAf;EAAwB,OAAO;YAC7B,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAW,MAAZ;GACE,cAAY;GACZ,mBAAiB;GACjB,aAAU;GACV,OAAO;GACF;GACA;GACC;GACI;GACG;GACG;GAChB,eAAe;GACf,mBAAmB,MAAM,iBACvB,mBACE,gBAAgB,MAAM,OAAO,GAC7B,YACF;GAEF,YAAA,GAAA,GAAA,IACE,kJACA,SACF;GACA,GAAI;aAEH,YACC,iBAAA,GAAA,kBAAA,KAAC,eAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,aAAD,EAAA,UAAA;IACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD,CAAkB,CAAA;IACjB,YAAY,iBAAA,GAAA,kBAAA,KAAC,aAAD,CAAc,CAAA,IAAI;IAC9B,OAAO,KAAK,GAAG,UACd,iBAAA,GAAA,kBAAA,KAAC,aAAD;KACE,cAAY;KACZ,mBAAiB;KACjB,OAAO,OAAO,SAAS,IAAI,QAAQ,KAAA;IAGpC,GADM,KACN,CACF;GACU,EAAA,CAAA,EACA,CAAA;EAEF,CAAA;CACK,CAAA;AAE5B;AAEA,OAAO,cAAc;;;;;;AAOrB,SAAS,cAAc,EACrB,WACA,GAAG,SAC+C;CAClD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,SAAZ;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,8FACA,sJACA,8DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,cAAc,cAAc;;AAG5B,SAAS,YAAY,EACnB,WACA,GAAG,SAC6C;CAChD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,OAAZ;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAIE,+DACA,sEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc;;AAG1B,SAAS,gBAAgB,EACvB,WACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,WAAZ;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAEE,yEAIA,mKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,gBAAgB,cAAc;;;;;;;;;;AAW9B,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,MAAM,EAAE,KAAK,KAAK,MAAM,WAAW,iBAAiB,aAAa;CAEjE,IAAI,EAAE,OAAO,MAAM,OAAO,KACxB,OAAO;CAKT,MAAM,YAAY,KAAK,OAAO,MAAM,OAAO,IAAI;CAE/C,IAAI,YAAY,KAAK,YAAY,WAC/B,OAAO;CAIT,MAAM,WADiB,MAAM,YAAY,SAAS,MAChB,YAAY,IAAI;CAGlD,MAAM,UAAU,OAAO,SAAS,IAAI,KAAK,IAAI,GAAG,MAAM,IAAI;CAC1D,MAAM,WAAW,OAAO,SAAS,IAAI,KAAK,IAAI,GAAG,MAAM,IAAK,OAAO,MAAM;CAEzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,eAAY;EACZ,YAAA,GAAA,GAAA,IAAc,wCAAwC,SAAS;EAC/D,aAAU;EACV,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,SAAS,IAAI,GAAG,MAAM;GAC1C,MAAM,QAAQ,IAAI;GAClB,MAAM,WAAW,MAAM,QAAQ;GAC/B,MAAM,OAAQ,WAAW,QAAQ,MAAM,OAAQ;GAG/C,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,YAAA,GAAA,GAAA,IACE,0EALS,YAAY,WAAW,YAAY,WASxC,2DACA,YACN;IAEA,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG;GAC1B,GAFM,KAEN;EAEL,CAAC;CACE,CAAA;AAET;AAEA,YAAY,cAAc;AAE1B,SAAS,YAAY,EACnB,WACA,GAAG,SAC6C;CAChD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,OAAZ;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,+FACA,8EACA,oIACA,2FACA,oDACA,uKACA,gCACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc;AAE1B,SAAS,YAAY,EACnB,WACA,GAAG,SAC6C;CAChD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,OAAZ;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc;;;;;;;;;;AAqB1B,SAAS,YAAY,EACnB,WACA,QAAQ,GACR,MACA,UACA,SACA,QACA,WACA,GAAG,SACgB;CACnB,MAAM,MAAM,iBAAiB,aAAa;CAC1C,MAAM,eAAe,IAAI,OAAO,UAAU,IAAI;CAC9C,MAAM,CAAC,OAAO,YAAYD,MAAM,SAAiB,OAAO,YAAY,CAAC;CACrE,MAAM,CAAC,SAAS,cAAcA,MAAM,SAAS,KAAK;CAElD,MAAM,cAAcA,MAAM,OAAO,YAAY;CAI7C,MAAM,gBAAgB;EACpB,IAAI,CAAC,SACH,SAAS,OAAO,YAAY,CAAC;CAEjC,GAAG,CAAC,cAAc,OAAO,CAAC;CAE1B,MAAM,cAAc,QAA+B;EACjD,IAAI,IAAI,KAAK,MAAM,IACjB,OAAO;EAGT,MAAM,SAAS,OAAO,GAAG;EAEzB,OAAO,OAAO,MAAM,MAAM,IAAI,OAAO;CACvC;CAEA,MAAM,eAAe;EACnB,MAAM,SAAS,WAAW,KAAK;EAE/B,IAAI,WAAW,MAAM;GACnB,SAAS,OAAO,YAAY,CAAC;GAC7B;EACF;EAEA,IAAI,cAAc,OAAO,QAAQ;GAC/B,QAAQ;GACR,gBAAgB,YAAY;EAC9B,CAAC;CACH;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,oCAAoC,SAAS;YAF7D,CAIE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GACE,MAAK;GACL,WAAU;GACV,KAAK,IAAI;GACT,KAAK,IAAI;GACT,MAAM,IAAI;GACV,UAAU,YAAY,IAAI;GAC1B,OAAO,UAAU,QAAQ,OAAO,YAAY;GAC5C,WAAW,UAAU;IACnB,MAAM,MAAM,MAAM,OAAO;IACzB,SAAS,GAAG;IACZ,MAAM,SAAS,WAAW,GAAG;IAK7B,IAAI,WAAW,QAAQ,UAAU,IAAI,OAAO,UAAU,IAAI,KACxD,IAAI,cAAc,OAAO,MAAM;GAEnC;GACA,UAAU,UAAU;IAClB,YAAY,UAAU,IAAI,OAAO,UAAU,IAAI;IAC/C,WAAW,IAAI;IACf,UAAU,KAAK;GACjB;GACA,SAAS,UAAU;IACjB,WAAW,KAAK;IAChB,OAAO;IACP,SAAS,KAAK;GAChB;GACA,YAAY,UAAU;IAEpB,IAAI,MAAM,QAAQ,SAChB,MAAM,cAAc,KAAK;IAG3B,YAAY,KAAK;GACnB;GACA,YAAA,GAAA,GAAA,IACE,mDACA,iFACA,mDAEA,sHACF;GACA,GAAI;EACL,CAAA,GACA,OACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAoB,aAAU;aAC3C;EACG,CAAA,IACJ,IACA;;AAEV;AAEA,YAAY,cAAc"}

package/dist/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = Math.min(max, Math.max(min, value))\n\n  if (!(step > 0)) {\n    return clamped\n  }\n\n  const snapped = min + Math.round((clamped - min) / step) * step\n  const bounded = Math.min(max, Math.max(min, snapped))\n  const decimals = (String(step).split('.')[1] ?? '').length\n\n  return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n  next: number | readonly number[],\n  current: SliderValue,\n): SliderValue {\n  const nextValues = typeof next === 'number' ? [next] : [...next]\n  if (Array.isArray(current)) {\n    return nextValues\n  }\n  return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n  values: readonly number[]\n  min: number\n  max: number\n  step: number\n  disabled: boolean\n  /**\n   * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n   * clamps; range values are kept sorted. Fires `onValueChange` only when the\n   * value actually changes. When `commit` is set it also fires `onValueCommitted`\n   * — but only if the committed value differs from `commitBaseline` (the value\n   * when editing began), so a plain focus→blur never emits a spurious commit.\n   */\n  setThumbValue: (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n  const ctx = React.useContext(SliderContext)\n\n  if (!ctx) {\n    throw new Error(`<${part}> must be rendered inside <Slider>`)\n  }\n\n  return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n  React.ComponentProps<typeof BaseSlider.Root>,\n  'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n  value?: Value\n  defaultValue?: Value\n  // Generic over the value shape: a single `number` keeps single-thumb handlers\n  // number-typed, an array keeps range handlers array-typed — so callers don't\n  // widen/narrow at every call site.\n  onValueChange?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => void\n  onValueCommitted?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.CommitEventDetails,\n  ) => void\n  /**\n   * `ticks` marks each step with a small dot on the rail — light on the accent\n   * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n   * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n   * default render) for vertical sliders. Default `default`.\n   */\n  variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n  className,\n  children,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  orientation = 'horizontal',\n  variant = 'default',\n  onValueChange,\n  onValueCommitted,\n  // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n  // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n  // the classic look and the thumb inside the rail.\n  thumbAlignment = 'edge',\n  // The accessible name belongs on the thumb's nested range input, not just the\n  // Root — so keep it on the Root (names the group) AND forward it to the\n  // childless-default thumb(s). When you compose your own thumbs, label them.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SliderProps<Value>) {\n  const isControlled = value !== undefined\n  const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n    defaultValue ?? min,\n  )\n  const current = (isControlled ? value : uncontrolled) as SliderValue\n  const values = React.useMemo(\n    () => (Array.isArray(current) ? current : [current]),\n    [current],\n  )\n\n  // Base UI hands back `number | readonly number[]`; we forward it as the\n  // caller's `Value` (the runtime shape matches what they passed in).\n  const emitChange = (\n    next: number | readonly number[],\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => {\n    const shaped = matchValueShape(next, current) as Value\n\n    if (!isControlled) {\n      setUncontrolled(shaped as SliderValue)\n    }\n\n    onValueChange?.(shaped, eventDetails)\n  }\n\n  // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n  // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n  // desync the inputs from the thumbs). Fires onValueChange only on a real\n  // change; fires onValueCommitted only when the committed value moved off the\n  // pre-edit baseline.\n  const setThumbValue = (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => {\n    const snapped = snapToStep(next, min, max, step)\n    const wasArray = Array.isArray(current)\n    let nextValue: SliderValue\n\n    if (wasArray) {\n      const copy = [...(current as number[])]\n      copy[index] = snapped\n      copy.sort((a, b) => a - b)\n      nextValue = copy\n    } else {\n      nextValue = snapped\n    }\n\n    const changed = wasArray\n      ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n      : nextValue !== current\n\n    // input-driven changes have no pointer/keyboard event; Base UI's own detail\n    // object isn't constructible here, so we hand the consumer a minimal one.\n    const details = {\n      reason: 'input-change',\n    } as unknown as BaseSlider.Root.ChangeEventDetails\n\n    if (changed) {\n      emitChange(nextValue, details)\n    }\n\n    if (options?.commit) {\n      const committedChanged =\n        options.commitBaseline === undefined\n          ? changed\n          : snapped !== options.commitBaseline\n\n      if (committedChanged) {\n        onValueCommitted?.(\n          nextValue as Value,\n          details as unknown as BaseSlider.Root.CommitEventDetails,\n        )\n      }\n    }\n  }\n\n  // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n  // setThumbValue always closes over the current value + latest callbacks.\n  const context: SliderContextValue = {\n    values,\n    min,\n    max,\n    step,\n    disabled,\n    setThumbValue,\n  }\n\n  // ticks are horizontal-only in the default render; SliderTicks self-hides when\n  // the step count isn't countable, so no density check is needed here.\n  const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n  return (\n    <SliderContext.Provider value={context}>\n      <BaseSlider.Root\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-slot=\"slider\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation}\n        thumbAlignment={thumbAlignment}\n        onValueChange={emitChange}\n        onValueCommitted={(next, eventDetails) =>\n          onValueCommitted?.(\n            matchValueShape(next, current) as Value,\n            eventDetails,\n          )\n        }\n        className={cn(\n          'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <SliderControl>\n            <SliderTrack>\n              <SliderIndicator />\n              {showTicks ? <SliderTicks /> : null}\n              {values.map((_, index) => (\n                <SliderThumb\n                  aria-label={ariaLabel}\n                  aria-labelledby={ariaLabelledby}\n                  index={values.length > 1 ? index : undefined}\n                  key={index}\n                />\n              ))}\n            </SliderTrack>\n          </SliderControl>\n        )}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      data-slot=\"slider-control\"\n      className={cn(\n        'group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      data-slot=\"slider-track\"\n      className={cn(\n        // 12px rail so the corner radius is legible; follows the [data-radius] knob\n        // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n        // child and would be clipped.\n        'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      data-slot=\"slider-indicator\"\n      className={cn(\n        // matches the rail's radius so the fill's corners track the knob too\n        'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n        // ease only while focused (keyboard/rail-click); programmatic and\n        // initial value sets snap instantly instead of sweeping from 0.\n        // transition-none base matters: bare duration-150 leaves property=all\n        'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n  const { min, max, step, values } = useSliderContext('SliderTicks')\n\n  if (!(step > 0) || max <= min) {\n    return null\n  }\n\n  // count the reachable step intervals (floor, so a non-dividing step still gets\n  // a dot on its last reachable step); drop the final one when it lands on max.\n  const intervals = Math.floor((max - min) / step)\n\n  if (intervals < 2 || intervals > MAX_TICKS) {\n    return null\n  }\n\n  const lastIsEndpoint = min + intervals * step === max\n  const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n  // Active band: [min, value] for a single thumb, [low, high] for a range.\n  const bandLow = values.length > 1 ? Math.min(...values) : min\n  const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn('pointer-events-none absolute inset-0', className)}\n      data-slot=\"slider-ticks\"\n      {...props}\n    >\n      {Array.from({ length: dotCount }, (_, k) => {\n        const index = k + 1 // interior steps only (skip the two endpoints)\n        const position = min + index * step\n        const pct = ((position - min) / (max - min)) * 100\n        const filled = position >= bandLow && position <= bandHigh\n\n        return (\n          <span\n            className={cn(\n              'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n              // light dot on the accent fill (flips to step-1 in HC via the token);\n              // neutral gray dot on the unfilled rail.\n              filled\n                ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n                : 'bg-gray-a8',\n            )}\n            key={index}\n            style={{ left: `${pct}%` }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      data-slot=\"slider-thumb\"\n      className={cn(\n        'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n        'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n        'data-dragging:ring-2 data-dragging:ring-offset-2',\n        'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      data-slot=\"slider-value\"\n      className={cn('text-sm text-gray tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n  React.ComponentProps<'input'>,\n  'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n  /** Which thumb this input drives on a range slider. Defaults to 0. */\n  index?: number\n  /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n  unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n  className,\n  index = 0,\n  unit,\n  disabled,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  ...props\n}: SliderInputProps) {\n  const ctx = useSliderContext('SliderInput')\n  const currentValue = ctx.values[index] ?? ctx.min\n  const [draft, setDraft] = React.useState<string>(String(currentValue))\n  const [editing, setEditing] = React.useState(false)\n  // the thumb value when editing began — commit fires only if it moved off this\n  const baselineRef = React.useRef(currentValue)\n\n  // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n  // but never fight the user's in-progress typing.\n  React.useEffect(() => {\n    if (!editing) {\n      setDraft(String(currentValue))\n    }\n  }, [currentValue, editing])\n\n  const parseInput = (raw: string): number | null => {\n    if (raw.trim() === '') {\n      return null\n    }\n\n    const parsed = Number(raw)\n\n    return Number.isNaN(parsed) ? null : parsed\n  }\n\n  const commit = () => {\n    const parsed = parseInput(draft)\n\n    if (parsed === null) {\n      setDraft(String(currentValue)) // reset an empty/invalid entry\n      return\n    }\n\n    ctx.setThumbValue(index, parsed, {\n      commit: true,\n      commitBaseline: baselineRef.current,\n    })\n  }\n\n  return (\n    <span\n      data-slot=\"slider-input\"\n      className={cn('inline-flex items-baseline gap-1', className)}\n    >\n      <input\n        type=\"number\"\n        inputMode=\"decimal\"\n        min={ctx.min}\n        max={ctx.max}\n        step={ctx.step}\n        disabled={disabled ?? ctx.disabled}\n        value={editing ? draft : String(currentValue)}\n        onChange={(event) => {\n          const raw = event.target.value\n          setDraft(raw)\n          const parsed = parseInput(raw)\n\n          // live-update the thumb only when the typed value is already in range,\n          // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n          // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n          if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n            ctx.setThumbValue(index, parsed)\n          }\n        }}\n        onFocus={(event) => {\n          baselineRef.current = ctx.values[index] ?? ctx.min\n          setEditing(true)\n          onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          setEditing(false)\n          commit()\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          // Enter blurs, and the single onBlur commit runs — no double-commit.\n          if (event.key === 'Enter') {\n            event.currentTarget.blur()\n          }\n\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          'w-16 bg-transparent tabular-nums outline-hidden',\n          'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          // hide the native spinners — the slider is the primary affordance\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...props}\n      />\n      {unit ? (\n        <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n          {unit}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n  Slider,\n  SliderControl,\n  SliderIndicator,\n  SliderInput,\n  SliderThumb,\n  SliderTicks,\n  SliderTrack,\n  SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":"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"}
+{"version":3,"file":"slider.js","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n  value: number,\n  min: number,\n  max: number,\n  step: number,\n): number {\n  const clamped = Math.min(max, Math.max(min, value))\n\n  if (!(step > 0)) {\n    return clamped\n  }\n\n  const snapped = min + Math.round((clamped - min) / step) * step\n  const bounded = Math.min(max, Math.max(min, snapped))\n  const decimals = (String(step).split('.')[1] ?? '').length\n\n  return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n  next: number | readonly number[],\n  current: SliderValue,\n): SliderValue {\n  const nextValues = typeof next === 'number' ? [next] : [...next]\n  if (Array.isArray(current)) {\n    return nextValues\n  }\n  return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n  values: readonly number[]\n  min: number\n  max: number\n  step: number\n  disabled: boolean\n  /**\n   * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n   * clamps; range values are kept sorted. Fires `onValueChange` only when the\n   * value actually changes. When `commit` is set it also fires `onValueCommitted`\n   * — but only if the committed value differs from `commitBaseline` (the value\n   * when editing began), so a plain focus→blur never emits a spurious commit.\n   */\n  setThumbValue: (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n  const ctx = React.useContext(SliderContext)\n\n  if (!ctx) {\n    throw new Error(`<${part}> must be rendered inside <Slider>`)\n  }\n\n  return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n  React.ComponentProps<typeof BaseSlider.Root>,\n  'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n  value?: Value\n  defaultValue?: Value\n  // Generic over the value shape: a single `number` keeps single-thumb handlers\n  // number-typed, an array keeps range handlers array-typed — so callers don't\n  // widen/narrow at every call site.\n  onValueChange?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => void\n  onValueCommitted?: (\n    value: Value,\n    eventDetails: BaseSlider.Root.CommitEventDetails,\n  ) => void\n  /**\n   * `ticks` marks each step with a small dot on the rail — light on the accent\n   * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n   * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n   * default render) for vertical sliders. Default `default`.\n   */\n  variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n  className,\n  children,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  orientation = 'horizontal',\n  variant = 'default',\n  onValueChange,\n  onValueCommitted,\n  // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n  // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n  // the classic look and the thumb inside the rail.\n  thumbAlignment = 'edge',\n  // The accessible name belongs on the thumb's nested range input, not just the\n  // Root — so keep it on the Root (names the group) AND forward it to the\n  // childless-default thumb(s). When you compose your own thumbs, label them.\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  ...props\n}: SliderProps<Value>) {\n  const isControlled = value !== undefined\n  const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n    defaultValue ?? min,\n  )\n  const current = (isControlled ? value : uncontrolled) as SliderValue\n  const values = React.useMemo(\n    () => (Array.isArray(current) ? current : [current]),\n    [current],\n  )\n\n  // Base UI hands back `number | readonly number[]`; we forward it as the\n  // caller's `Value` (the runtime shape matches what they passed in).\n  const emitChange = (\n    next: number | readonly number[],\n    eventDetails: BaseSlider.Root.ChangeEventDetails,\n  ) => {\n    const shaped = matchValueShape(next, current) as Value\n\n    if (!isControlled) {\n      setUncontrolled(shaped as SliderValue)\n    }\n\n    onValueChange?.(shaped, eventDetails)\n  }\n\n  // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n  // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n  // desync the inputs from the thumbs). Fires onValueChange only on a real\n  // change; fires onValueCommitted only when the committed value moved off the\n  // pre-edit baseline.\n  const setThumbValue = (\n    index: number,\n    next: number,\n    options?: { commit?: boolean; commitBaseline?: number },\n  ) => {\n    const snapped = snapToStep(next, min, max, step)\n    const wasArray = Array.isArray(current)\n    let nextValue: SliderValue\n\n    if (wasArray) {\n      const copy = [...(current as number[])]\n      copy[index] = snapped\n      copy.sort((a, b) => a - b)\n      nextValue = copy\n    } else {\n      nextValue = snapped\n    }\n\n    const changed = wasArray\n      ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n      : nextValue !== current\n\n    // input-driven changes have no pointer/keyboard event; Base UI's own detail\n    // object isn't constructible here, so we hand the consumer a minimal one.\n    const details = {\n      reason: 'input-change',\n    } as unknown as BaseSlider.Root.ChangeEventDetails\n\n    if (changed) {\n      emitChange(nextValue, details)\n    }\n\n    if (options?.commit) {\n      const committedChanged =\n        options.commitBaseline === undefined\n          ? changed\n          : snapped !== options.commitBaseline\n\n      if (committedChanged) {\n        onValueCommitted?.(\n          nextValue as Value,\n          details as unknown as BaseSlider.Root.CommitEventDetails,\n        )\n      }\n    }\n  }\n\n  // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n  // setThumbValue always closes over the current value + latest callbacks.\n  const context: SliderContextValue = {\n    values,\n    min,\n    max,\n    step,\n    disabled,\n    setThumbValue,\n  }\n\n  // ticks are horizontal-only in the default render; SliderTicks self-hides when\n  // the step count isn't countable, so no density check is needed here.\n  const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n  return (\n    <SliderContext.Provider value={context}>\n      <BaseSlider.Root\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        data-slot=\"slider\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        orientation={orientation}\n        thumbAlignment={thumbAlignment}\n        onValueChange={emitChange}\n        onValueCommitted={(next, eventDetails) =>\n          onValueCommitted?.(\n            matchValueShape(next, current) as Value,\n            eventDetails,\n          )\n        }\n        className={cn(\n          'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <SliderControl>\n            <SliderTrack>\n              <SliderIndicator />\n              {showTicks ? <SliderTicks /> : null}\n              {values.map((_, index) => (\n                <SliderThumb\n                  aria-label={ariaLabel}\n                  aria-labelledby={ariaLabelledby}\n                  index={values.length > 1 ? index : undefined}\n                  // oxlint-disable-next-line react/no-array-index-key -- Base UI identifies thumbs by their index\n                  key={index}\n                />\n              ))}\n            </SliderTrack>\n          </SliderControl>\n        )}\n      </BaseSlider.Root>\n    </SliderContext.Provider>\n  )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n  return (\n    <BaseSlider.Control\n      data-slot=\"slider-control\"\n      className={cn(\n        'group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n  return (\n    <BaseSlider.Track\n      data-slot=\"slider-track\"\n      className={cn(\n        // 12px rail so the corner radius is legible; follows the [data-radius] knob\n        // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n        // child and would be clipped.\n        'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n  return (\n    <BaseSlider.Indicator\n      data-slot=\"slider-indicator\"\n      className={cn(\n        // matches the rail's radius so the fill's corners track the knob too\n        'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n        // ease only while focused (keyboard/rail-click); programmatic and\n        // initial value sets snap instantly instead of sweeping from 0.\n        // transition-none base matters: bare duration-150 leaves property=all\n        'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n  const { min, max, step, values } = useSliderContext('SliderTicks')\n\n  if (!(step > 0) || max <= min) {\n    return null\n  }\n\n  // count the reachable step intervals (floor, so a non-dividing step still gets\n  // a dot on its last reachable step); drop the final one when it lands on max.\n  const intervals = Math.floor((max - min) / step)\n\n  if (intervals < 2 || intervals > MAX_TICKS) {\n    return null\n  }\n\n  const lastIsEndpoint = min + intervals * step === max\n  const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n  // Active band: [min, value] for a single thumb, [low, high] for a range.\n  const bandLow = values.length > 1 ? Math.min(...values) : min\n  const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn('pointer-events-none absolute inset-0', className)}\n      data-slot=\"slider-ticks\"\n      {...props}\n    >\n      {Array.from({ length: dotCount }, (_, k) => {\n        const index = k + 1 // interior steps only (skip the two endpoints)\n        const position = min + index * step\n        const pct = ((position - min) / (max - min)) * 100\n        const filled = position >= bandLow && position <= bandHigh\n\n        return (\n          <span\n            className={cn(\n              'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n              // light dot on the accent fill (flips to step-1 in HC via the token);\n              // neutral gray dot on the unfilled rail.\n              filled\n                ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n                : 'bg-gray-a8',\n            )}\n            key={index}\n            style={{ left: `${pct}%` }}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n  return (\n    <BaseSlider.Thumb\n      data-slot=\"slider-thumb\"\n      className={cn(\n        'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n        'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n        \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n        'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n        'data-dragging:ring-2 data-dragging:ring-offset-2',\n        'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n  className,\n  ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n  return (\n    <BaseSlider.Value\n      data-slot=\"slider-value\"\n      className={cn('text-sm text-gray tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n  React.ComponentProps<'input'>,\n  'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n  /** Which thumb this input drives on a range slider. Defaults to 0. */\n  index?: number\n  /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n  unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n  className,\n  index = 0,\n  unit,\n  disabled,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  ...props\n}: SliderInputProps) {\n  const ctx = useSliderContext('SliderInput')\n  const currentValue = ctx.values[index] ?? ctx.min\n  const [draft, setDraft] = React.useState<string>(String(currentValue))\n  const [editing, setEditing] = React.useState(false)\n  // the thumb value when editing began — commit fires only if it moved off this\n  const baselineRef = React.useRef(currentValue)\n\n  // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n  // but never fight the user's in-progress typing.\n  React.useEffect(() => {\n    if (!editing) {\n      setDraft(String(currentValue))\n    }\n  }, [currentValue, editing])\n\n  const parseInput = (raw: string): number | null => {\n    if (raw.trim() === '') {\n      return null\n    }\n\n    const parsed = Number(raw)\n\n    return Number.isNaN(parsed) ? null : parsed\n  }\n\n  const commit = () => {\n    const parsed = parseInput(draft)\n\n    if (parsed === null) {\n      setDraft(String(currentValue)) // reset an empty/invalid entry\n      return\n    }\n\n    ctx.setThumbValue(index, parsed, {\n      commit: true,\n      commitBaseline: baselineRef.current,\n    })\n  }\n\n  return (\n    <span\n      data-slot=\"slider-input\"\n      className={cn('inline-flex items-baseline gap-1', className)}\n    >\n      <input\n        type=\"number\"\n        inputMode=\"decimal\"\n        min={ctx.min}\n        max={ctx.max}\n        step={ctx.step}\n        disabled={disabled ?? ctx.disabled}\n        value={editing ? draft : String(currentValue)}\n        onChange={(event) => {\n          const raw = event.target.value\n          setDraft(raw)\n          const parsed = parseInput(raw)\n\n          // live-update the thumb only when the typed value is already in range,\n          // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n          // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n          if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n            ctx.setThumbValue(index, parsed)\n          }\n        }}\n        onFocus={(event) => {\n          baselineRef.current = ctx.values[index] ?? ctx.min\n          setEditing(true)\n          onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          setEditing(false)\n          commit()\n          onBlur?.(event)\n        }}\n        onKeyDown={(event) => {\n          // Enter blurs, and the single onBlur commit runs — no double-commit.\n          if (event.key === 'Enter') {\n            event.currentTarget.blur()\n          }\n\n          onKeyDown?.(event)\n        }}\n        className={cn(\n          'w-16 bg-transparent tabular-nums outline-hidden',\n          'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          // hide the native spinners — the slider is the primary affordance\n          '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n        )}\n        {...props}\n      />\n      {unit ? (\n        <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n          {unit}\n        </span>\n      ) : null}\n    </span>\n  )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n  Slider,\n  SliderControl,\n  SliderIndicator,\n  SliderInput,\n  SliderThumb,\n  SliderTicks,\n  SliderTrack,\n  SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":"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"}

package/dist/components/toast.cjs

@@ -66,7 +66,12 @@ function toManagerOptions(id, title, type, options) {
 				manager.close(id);
 			}
 		},
-		data: { closeButton: options?.closeButton }
+		data: {
+			closeButton: options?.closeButton,
+			closeLabel: options?.closeLabel,
+			icon: options?.icon,
+			onCloseClick: options?.onCloseClick
+		}
 	};
 }
 const emit = (type) => (message, options) => {
@@ -96,13 +101,23 @@ const toast = Object.assign(emit(), {
 		error: phase(messages.error, "error")
 	})
 });
-function ToastIcon({ type }) {
+function ToastIcon({ custom, type }) {
 	const icon = TOAST_ICONS[type];
+	if (custom !== void 0) {
+		if (custom === null || custom === false) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			className: "flex h-5 w-5 shrink-0 items-center justify-center [--spark-icon-size:20px]",
+			"data-slot": "toast-icon",
+			children: custom
+		});
+	}
 	if (type !== "loading" && !icon) return null;
 	const Glyph = icon?.icon;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"aria-hidden": "true",
 		className: "flex h-5 w-5 shrink-0 items-center justify-center",
+		"data-slot": "toast-icon",
 		children: type === "loading" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_spinner.Spinner, {
 			className: "text-gray-11",
 			label: "",
@@ -111,9 +126,10 @@ function ToastIcon({ type }) {
 		}) : Glyph ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, { className: (0, cn.cn)("[--spark-icon-size:20px]", icon.className) }) : null
 	});
 }
-function ToastItem({ closeButton, richColors, toast: toastObject }) {
+function ToastItem({ closeButton, closeLabel, richColors, toast: toastObject }) {
 	const tone = TONE_CLASSES[toastObject.type];
 	const showClose = toastObject.data?.closeButton ?? closeButton;
+	const onCloseClick = toastObject.data?.onCloseClick;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_toast.Toast.Root, {
 		"data-slot": "toast",
 		className: (0, cn.cn)("flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none", richColors && tone),
@@ -124,7 +140,10 @@ function ToastItem({ closeButton, richColors, toast: toastObject }) {
 		],
 		toast: toastObject,
 		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastIcon, { type: toastObject.type }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastIcon, {
+				custom: toastObject.data?.icon,
+				type: toastObject.type
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_base_ui_react_toast.Toast.Content, {
 				className: "flex min-w-0 flex-1 flex-col gap-0.5",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Title, {
@@ -143,12 +162,16 @@ function ToastItem({ closeButton, richColors, toast: toastObject }) {
 				"data-slot": "toast-action"
 			}) : null,
 			showClose ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Close, {
-				"aria-label": "Close",
+				"aria-label": toastObject.data?.closeLabel ?? closeLabel,
 				className: (0, cn.cn)(require_components_button.buttonVariants({
 					size: "icon-small",
 					variant: "tertiary"
 				}), "-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11"),
 				"data-slot": "toast-close",
+				onClick: onCloseClick && ((event) => {
+					onCloseClick(event);
+					if (event.defaultPrevented) event.preventBaseUIHandler();
+				}),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Close, {
 					"aria-hidden": "true",
 					className: "[--spark-icon-size:18px]"
@@ -157,15 +180,16 @@ function ToastItem({ closeButton, richColors, toast: toastObject }) {
 		]
 	});
 }
-function ToastList({ closeButton, richColors }) {
+function ToastList({ closeButton, closeLabel, richColors }) {
 	const { toasts } = _base_ui_react_toast.Toast.useToastManager();
 	return toasts.map((toastObject) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastItem, {
 		closeButton,
+		closeLabel,
 		richColors,
 		toast: toastObject
 	}, toastObject.id));
 }
-function Toaster({ className, closeButton = true, duration = 4e3, limit, mobilePosition = "top", position = "bottom-right", richColors = true }) {
+function Toaster({ className, closeButton = true, closeLabel = "Close", duration = 4e3, limit, mobilePosition = "top", position = "bottom-right", richColors = true }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_toast.Toast.Provider, {
 		limit,
 		timeout: duration,
@@ -177,6 +201,7 @@ function Toaster({ className, closeButton = true, duration = 4e3, limit, mobileP
 			"data-slot": "toaster",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToastList, {
 				closeButton,
+				closeLabel,
 				richColors
 			})
 		}) })