@apipass/design-system 5.2.0 → 5.4.0

package/dist/lib/ui/components/charts/TimeSeriesChart/TimeSeriesChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChart.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/TimeSeriesChart.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect } from \"react\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport {\n  buildTimeSeriesOption,\n  type TimeSeriesData,\n  type TimeSeriesDisplayType,\n  type TimeSeriesLegendMode,\n  type TimeSeriesLineOptions,\n  type TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\nimport \"./time-series-chart.css\";\n\nexport type {\n  TimeSeriesData,\n  TimeSeriesDisplayType,\n  TimeSeriesLegendMode,\n  TimeSeriesLineOptions,\n  TimeSeriesLineStyle,\n  TimeSeriesLineWidth,\n  TimeSeriesPoint,\n  TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\n\nexport type TimeSeriesChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  series: TimeSeriesData[];\n  displayType?: TimeSeriesDisplayType;\n  legend?: TimeSeriesLegendMode;\n  line?: TimeSeriesLineOptions;\n  yAxis?: TimeSeriesYAxisOptions;\n  showSymbols?: boolean;\n  showValueLabels?: boolean;\n  valueFormatter?: (value: number) => string;\n};\n\nconst EMPTY_Y_AXIS_OPTIONS: TimeSeriesYAxisOptions = {};\n\nconst EMPTY_LINE_OPTIONS: TimeSeriesLineOptions = {};\n\nexport function TimeSeriesChart({\n  series,\n  displayType = \"line\",\n  legend = \"inline\",\n  line = EMPTY_LINE_OPTIONS,\n  yAxis = EMPTY_Y_AXIS_OPTIONS,\n  showSymbols = false,\n  showValueLabels = false,\n  valueFormatter,\n  className,\n  ...props\n}: TimeSeriesChartProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n\n  useEffect(() => {\n    if (!chart || !theme) return;\n\n    const seriesColorOverrides: Record<string, string> = {};\n    for (const data of series) {\n      if (!data.colorToken) continue;\n      const color: string | undefined = resolveSeriesColor(data.colorToken);\n      if (color) seriesColorOverrides[data.id] = color;\n    }\n\n    // `notMerge` evita que uma série removida da configuração continue desenhada: o ECharts\n    // casa séries por id e mantém as que não aparecem na opção nova.\n    chart.setOption(\n      buildTimeSeriesOption({\n        series,\n        displayType,\n        legend,\n        line,\n        yAxis,\n        theme,\n        showSymbols,\n        showValueLabels,\n        seriesColorOverrides,\n        valueFormatter,\n      }),\n      { notMerge: true },\n    );\n  }, [\n    chart,\n    theme,\n    resolveSeriesColor,\n    series,\n    displayType,\n    legend,\n    line,\n    yAxis,\n    showSymbols,\n    showValueLabels,\n    valueFormatter,\n  ]);\n\n  return <div ref={containerRef} className={clsx(\"time-series-chart\", className)} {...props} />;\n}\n"],"names":["EMPTY_Y_AXIS_OPTIONS","EMPTY_LINE_OPTIONS","TimeSeriesChart","series","displayType","legend","line","yAxis","showSymbols","showValueLabels","valueFormatter","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","useEffect","seriesColorOverrides","data","color","buildTimeSeriesOption","jsx","clsx"],"mappings":";;;;;;AAmCA,MAAMA,IAA+C,CAAA,GAE/CC,IAA4C,CAAA;AAE3C,SAASC,EAAgB;AAAA,EAC9B,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAOL;AAAA,EACP,OAAAM,IAAQP;AAAA,EACR,aAAAQ,IAAc;AAAA,EACd,iBAAAC,IAAkB;AAAA,EAClB,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAyB;AACvB,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,OAAAC,GAAO,oBAAAC,EAAA,IAAsCC,EAAA;AAE1E,SAAAC,EAAU,MAAM;AACd,QAAI,CAACJ,KAAS,CAACC,EAAO;AAEtB,UAAMI,IAA+C,CAAA;AACrD,eAAWC,KAAQjB,GAAQ;AACzB,UAAI,CAACiB,EAAK,WAAY;AACtB,YAAMC,IAA4BL,EAAmBI,EAAK,UAAU;AACpE,MAAIC,MAAOF,EAAqBC,EAAK,EAAE,IAAIC;AAAA,IAC7C;AAIA,IAAAP,EAAM;AAAA,MACJQ,EAAsB;AAAA,QACpB,QAAAnB;AAAA,QACA,aAAAC;AAAA,QACA,QAAAC;AAAA,QACA,MAAAC;AAAA,QACA,OAAAC;AAAA,QACA,OAAAQ;AAAA,QACA,aAAAP;AAAA,QACA,iBAAAC;AAAA,QACA,sBAAAU;AAAA,QACA,gBAAAT;AAAA,MAAA,CACD;AAAA,MACD,EAAE,UAAU,GAAA;AAAA,IAAK;AAAA,EAErB,GAAG;AAAA,IACDI;AAAA,IACAC;AAAA,IACAC;AAAA,IACAb;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA,CACD,GAEM,gBAAAa,EAAC,OAAA,EAAI,KAAKV,GAAc,WAAWW,EAAK,qBAAqBb,CAAS,GAAI,GAAGC,EAAA,CAAO;AAC7F;"}
+{"version":3,"file":"TimeSeriesChart.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/TimeSeriesChart.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentPropsWithoutRef, useEffect, useMemo } from \"react\";\nimport { useChartInstance, type ChartInstance } from \"../useChartInstance\";\nimport { ChartLegend, type ChartLegendLabels } from \"../ChartLegend/ChartLegend\";\nimport { useChartLegend, type ChartLegendState } from \"../ChartLegend/use-chart-legend\";\nimport {\n  buildTimeSeriesOption,\n  type TimeSeriesData,\n  type TimeSeriesDisplayType,\n  type TimeSeriesLegendMode,\n  type TimeSeriesLineOptions,\n  type TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\nimport \"./time-series-chart.css\";\n\nexport type {\n  TimeSeriesData,\n  TimeSeriesDisplayType,\n  TimeSeriesLegendMode,\n  TimeSeriesLineOptions,\n  TimeSeriesLineStyle,\n  TimeSeriesLineWidth,\n  TimeSeriesPoint,\n  TimeSeriesYAxisOptions,\n} from \"./time-series-option\";\n\nexport type TimeSeriesChartProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  series: TimeSeriesData[];\n  displayType?: TimeSeriesDisplayType;\n  legend?: TimeSeriesLegendMode;\n  line?: TimeSeriesLineOptions;\n  yAxis?: TimeSeriesYAxisOptions;\n  showSymbols?: boolean;\n  showValueLabels?: boolean;\n  valueFormatter?: (value: number) => string;\n  // Habilita o seletor de cor no marcador da legenda. Sem ele o marcador é só desenho — o gráfico\n  // que não tem onde guardar a escolha não pode oferecê-la.\n  onSeriesColorChange?: (seriesId: string, colorToken: string | null) => void;\n  legendLabels?: Partial<ChartLegendLabels>;\n};\n\nconst EMPTY_Y_AXIS_OPTIONS: TimeSeriesYAxisOptions = {};\n\nconst EMPTY_LINE_OPTIONS: TimeSeriesLineOptions = {};\n\nexport function TimeSeriesChart({\n  series,\n  displayType = \"line\",\n  legend = \"inline\",\n  line = EMPTY_LINE_OPTIONS,\n  yAxis = EMPTY_Y_AXIS_OPTIONS,\n  showSymbols = false,\n  showValueLabels = false,\n  valueFormatter,\n  onSeriesColorChange,\n  legendLabels,\n  className,\n  ...props\n}: TimeSeriesChartProps) {\n  const { containerRef, chart, theme, resolveSeriesColor }: ChartInstance = useChartInstance();\n\n  const {\n    items,\n    colorsBySeriesId,\n    colorTokensBySeriesId,\n    hiddenSeriesIds,\n    toggleSeries,\n  }: ChartLegendState =\n    useChartLegend(series, theme?.seriesColors ?? [], resolveSeriesColor);\n\n  // A série escondida sai da opção inteira, em vez de ficar com a seleção desligada do ECharts: é\n  // o que faz o eixo reescalar sobre o que restou.\n  const visibleSeries: TimeSeriesData[] = useMemo(\n    () => series.filter((data: TimeSeriesData) => !hiddenSeriesIds.has(data.id)),\n    [series, hiddenSeriesIds],\n  );\n\n  useEffect(() => {\n    if (!chart || !theme) return;\n\n    // `notMerge` evita que uma série removida da configuração continue desenhada: o ECharts\n    // casa séries por id e mantém as que não aparecem na opção nova.\n    chart.setOption(\n      buildTimeSeriesOption({\n        series: visibleSeries,\n        displayType,\n        line,\n        yAxis,\n        theme,\n        showSymbols,\n        showValueLabels,\n        seriesColorOverrides: colorsBySeriesId,\n        valueFormatter,\n      }),\n      { notMerge: true },\n    );\n  }, [\n    chart,\n    theme,\n    visibleSeries,\n    displayType,\n    line,\n    yAxis,\n    showSymbols,\n    showValueLabels,\n    colorsBySeriesId,\n    valueFormatter,\n  ]);\n\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n\n  return (\n    <div className={clsx(\"time-series-chart\", className)} {...props}>\n      {isLegendVisible && (\n        <ChartLegend\n          items={items}\n          onToggle={toggleSeries}\n          onColorChange={onSeriesColorChange}\n          colorTokensBySeriesId={colorTokensBySeriesId}\n          labels={legendLabels}\n        />\n      )}\n      <div ref={containerRef} className=\"time-series-chart__canvas\" />\n    </div>\n  );\n}\n"],"names":["EMPTY_Y_AXIS_OPTIONS","EMPTY_LINE_OPTIONS","TimeSeriesChart","series","displayType","legend","line","yAxis","showSymbols","showValueLabels","valueFormatter","onSeriesColorChange","legendLabels","className","props","containerRef","chart","theme","resolveSeriesColor","useChartInstance","items","colorsBySeriesId","colorTokensBySeriesId","hiddenSeriesIds","toggleSeries","useChartLegend","visibleSeries","useMemo","data","useEffect","buildTimeSeriesOption","isLegendVisible","jsxs","clsx","jsx","ChartLegend"],"mappings":";;;;;;;;AAyCA,MAAMA,IAA+C,CAAA,GAE/CC,IAA4C,CAAA;AAE3C,SAASC,EAAgB;AAAA,EAC9B,QAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAOL;AAAA,EACP,OAAAM,IAAQP;AAAA,EACR,aAAAQ,IAAc;AAAA,EACd,iBAAAC,IAAkB;AAAA,EAClB,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAyB;AACvB,QAAM,EAAE,cAAAC,GAAc,OAAAC,GAAO,OAAAC,GAAO,oBAAAC,EAAA,IAAsCC,EAAA,GAEpE;AAAA,IACJ,OAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,EAAA,IAEAC,EAAetB,IAAQc,KAAA,gBAAAA,EAAO,iBAAgB,CAAA,GAAIC,CAAkB,GAIhEQ,IAAkCC;AAAA,IACtC,MAAMxB,EAAO,OAAO,CAACyB,MAAyB,CAACL,EAAgB,IAAIK,EAAK,EAAE,CAAC;AAAA,IAC3E,CAACzB,GAAQoB,CAAe;AAAA,EAAA;AAG1B,EAAAM,EAAU,MAAM;AACd,IAAI,CAACb,KAAS,CAACC,KAIfD,EAAM;AAAA,MACJc,EAAsB;AAAA,QACpB,QAAQJ;AAAA,QACR,aAAAtB;AAAA,QACA,MAAAE;AAAA,QACA,OAAAC;AAAA,QACA,OAAAU;AAAA,QACA,aAAAT;AAAA,QACA,iBAAAC;AAAA,QACA,sBAAsBY;AAAA,QACtB,gBAAAX;AAAA,MAAA,CACD;AAAA,MACD,EAAE,UAAU,GAAA;AAAA,IAAK;AAAA,EAErB,GAAG;AAAA,IACDM;AAAA,IACAC;AAAA,IACAS;AAAA,IACAtB;AAAA,IACAE;AAAA,IACAC;AAAA,IACAC;AAAA,IACAC;AAAA,IACAY;AAAA,IACAX;AAAA,EAAA,CACD;AAED,QAAMqB,IAA2B1B,MAAW,UAAUF,EAAO,SAAS;AAEtE,SACE,gBAAA6B,EAAC,SAAI,WAAWC,EAAK,qBAAqBpB,CAAS,GAAI,GAAGC,GACvD,UAAA;AAAA,IAAAiB,KACC,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,UAAUI;AAAA,QACV,eAAeb;AAAA,QACf,uBAAAW;AAAA,QACA,QAAQV;AAAA,MAAA;AAAA,IAAA;AAAA,IAGZ,gBAAAsB,EAAC,OAAA,EAAI,KAAKnB,GAAc,WAAU,4BAAA,CAA4B;AAAA,EAAA,GAChE;AAEJ;"}

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=32,n={top:16,right:16,bottom:24,left:56},f=6,y=.15,L={thin:1,normal:2,thick:4},g="solid",b="normal",h=new Intl.DateTimeFormat(void 0,{year:"numeric"}),p=new Intl.DateTimeFormat(void 0,{day:"2-digit",month:"2-digit"}),S=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",hour12:!1}),E=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});function T(o){const e=new Date(o);return e.getSeconds()!==0||e.getMilliseconds()!==0?E.format(e):e.getHours()!==0||e.getMinutes()!==0?S.format(e):e.getMonth()===0&&e.getDate()===1?h.format(e):p.format(e)}function c(o){const{valueFormatter:e}=o;if(e)return i=>i===null?"":e(i)}function C(o){const{showValueLabels:e,theme:i}=o,l=c(o);return{show:e,position:"top",color:i.labelColor,formatter:l?t=>l(t.value[1]):void 0}}function x(o,e,i){const l=o.points.map(r=>[r.timestamp,r.value]),t=C(e);return e.displayType==="bar"?{id:o.id,name:o.name,type:"bar",data:l,itemStyle:{color:i},label:t}:{id:o.id,name:o.name,type:"line",data:l,showSymbol:e.showSymbols,symbolSize:f,lineStyle:{color:i,type:e.line.style??g,width:L[e.line.width??b]},itemStyle:{color:i},areaStyle:e.displayType==="area"?{color:i,opacity:y}:void 0,label:t}}function _(o){const{series:e,legend:i,yAxis:l,theme:t,seriesColorOverrides:r}=o,s=i!=="none"&&e.length>0,a=c(o);return{animation:!1,color:t.seriesColors,textStyle:{fontFamily:t.fontFamily,color:t.labelColor},grid:{...n,top:s?n.top+u:n.top,containLabel:!1},legend:s?{type:"scroll",top:0,left:0,icon:"roundRect",itemHeight:8,itemWidth:12,textStyle:{color:t.labelColor}}:{show:!1},tooltip:{trigger:"axis",backgroundColor:t.tooltipBackgroundColor,borderColor:t.tooltipBorderColor,textStyle:{color:t.labelColor},valueFormatter:a},xAxis:{type:"time",axisLine:{lineStyle:{color:t.axisLineColor}},axisTick:{show:!1},axisLabel:{color:t.labelColor,hideOverlap:!0,formatter:T},splitLine:{show:!1}},yAxis:{type:l.scale==="log"?"log":"value",scale:l.includeZero!==!0,min:l.min,max:l.max,axisLine:{show:!1},axisLabel:{color:t.labelColor,formatter:a},splitLine:{lineStyle:{color:t.splitLineColor}}},series:e.map((m,d)=>x(m,o,r[m.id]??t.seriesColors[d%t.seriesColors.length]))}}exports.buildTimeSeriesOption=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m={top:16,right:16,bottom:24,left:56},c=6,d=.15,u={thin:1,normal:2,thick:4},f="solid",y="normal",L=new Intl.DateTimeFormat(void 0,{year:"numeric"}),b=new Intl.DateTimeFormat(void 0,{day:"2-digit",month:"2-digit"}),g=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",hour12:!1}),h=new Intl.DateTimeFormat(void 0,{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});function S(t){const e=new Date(t);return e.getSeconds()!==0||e.getMilliseconds()!==0?h.format(e):e.getHours()!==0||e.getMinutes()!==0?g.format(e):e.getMonth()===0&&e.getDate()===1?L.format(e):b.format(e)}function n(t){const{valueFormatter:e}=t;if(e)return i=>i===null?"":e(i)}function p(t){const{showValueLabels:e,theme:i}=t,o=n(t);return{show:e,position:"top",color:i.labelColor,formatter:o?l=>o(l.value[1]):void 0}}function C(t,e,i){const o=t.points.map(r=>[r.timestamp,r.value]),l=p(e);return e.displayType==="bar"?{id:t.id,name:t.name,type:"bar",data:o,itemStyle:{color:i},label:l}:{id:t.id,name:t.name,type:"line",data:o,showSymbol:e.showSymbols,symbolSize:c,lineStyle:{color:i,type:e.line.style??f,width:u[e.line.width??y]},itemStyle:{color:i},areaStyle:e.displayType==="area"?{color:i,opacity:d}:void 0,label:l}}function T(t){const{series:e,yAxis:i,theme:o,seriesColorOverrides:l}=t,r=n(t);return{animation:!1,color:o.seriesColors,textStyle:{fontFamily:o.fontFamily,color:o.labelColor},grid:{...m,containLabel:!1},tooltip:{trigger:"axis",backgroundColor:o.tooltipBackgroundColor,borderColor:o.tooltipBorderColor,textStyle:{color:o.labelColor},valueFormatter:r},xAxis:{type:"time",axisLine:{lineStyle:{color:o.axisLineColor}},axisTick:{show:!1},axisLabel:{color:o.labelColor,hideOverlap:!0,formatter:S},splitLine:{show:!1}},yAxis:{type:i.scale==="log"?"log":"value",scale:i.includeZero!==!0,min:i.min,max:i.max,axisLine:{show:!1},axisLabel:{color:o.labelColor,formatter:r},splitLine:{lineStyle:{color:o.splitLineColor}}},series:e.map((s,a)=>C(s,t,l[s.id]??o.seriesColors[a%o.seriesColors.length]))}}exports.buildTimeSeriesOption=T;
 //# sourceMappingURL=time-series-option.cjs.map

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"time-series-option.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\n  // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n  // recebe a próxima cor da paleta.\n  colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  legend: TimeSeriesLegendMode;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\n  seriesColorOverrides: Record<string, string>;\n  valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  day: \"2-digit\",\n  month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  second: \"2-digit\",\n  hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n  const instant: Date = new Date(timestamp);\n  if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n  if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n  // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n  if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n  return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\n  };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n  return {\n    animation: false,\n    color: theme.seriesColors,\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      ...GRID_WITHOUT_LEGEND,\n      top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n      containLabel: false,\n    },\n    legend: isLegendVisible\n      ? {\n          type: \"scroll\",\n          top: 0,\n          left: 0,\n          icon: \"roundRect\",\n          itemHeight: 8,\n          itemWidth: 12,\n          textStyle: { color: theme.labelColor },\n        }\n      : { show: false },\n    tooltip: {\n      trigger: \"axis\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["LEGEND_HEIGHT_PX","GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}
+{"version":3,"file":"time-series-option.cjs","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\n  // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n  // recebe a próxima cor da paleta.\n  colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\n  seriesColorOverrides: Record<string, string>;\n  valueFormatter?: (value: number) => string;\n}\n\n// A legenda saiu do canvas e virou HTML (`ChartLegend`), entao a grade nao reserva mais faixa\n// para ela: quem divide a altura agora e o flex do componente.\nconst GRID_PADDING = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  day: \"2-digit\",\n  month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  second: \"2-digit\",\n  hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n  const instant: Date = new Date(timestamp);\n  if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n  if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n  // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n  if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n  return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\n  };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, yAxis, theme, seriesColorOverrides } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n  return {\n    animation: false,\n    color: theme.seriesColors,\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      ...GRID_PADDING,\n      containLabel: false,\n    },\n    tooltip: {\n      trigger: \"axis\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["GRID_PADDING","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","yAxis","seriesColorOverrides","index"],"mappings":"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"}

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js

@@ -1,11 +1,11 @@
-const n = { top: 16, right: 16, bottom: 24, left: 56 }, u = 6, f = 0.15, y = { thin: 1, normal: 2, thick: 4 }, L = "solid", g = "normal", h = new Intl.DateTimeFormat(void 0, { year: "numeric" }), E = new Intl.DateTimeFormat(void 0, {
+const m = { top: 16, right: 16, bottom: 24, left: 56 }, c = 6, d = 0.15, u = { thin: 1, normal: 2, thick: 4 }, f = "solid", y = "normal", L = new Intl.DateTimeFormat(void 0, { year: "numeric" }), g = new Intl.DateTimeFormat(void 0, {
   day: "2-digit",
   month: "2-digit"
-}), b = new Intl.DateTimeFormat(void 0, {
+}), h = new Intl.DateTimeFormat(void 0, {
   hour: "2-digit",
   minute: "2-digit",
   hour12: !1
-}), p = new Intl.DateTimeFormat(void 0, {
+}), b = new Intl.DateTimeFormat(void 0, {
   hour: "2-digit",
   minute: "2-digit",
   second: "2-digit",
@@ -13,70 +13,60 @@ const n = { top: 16, right: 16, bottom: 24, left: 56 }, u = 6, f = 0.15, y = { t
 });
 function S(t) {
   const e = new Date(t);
-  return e.getSeconds() !== 0 || e.getMilliseconds() !== 0 ? p.format(e) : e.getHours() !== 0 || e.getMinutes() !== 0 ? b.format(e) : e.getMonth() === 0 && e.getDate() === 1 ? h.format(e) : E.format(e);
+  return e.getSeconds() !== 0 || e.getMilliseconds() !== 0 ? b.format(e) : e.getHours() !== 0 || e.getMinutes() !== 0 ? h.format(e) : e.getMonth() === 0 && e.getDate() === 1 ? L.format(e) : g.format(e);
 }
-function c(t) {
+function n(t) {
   const { valueFormatter: e } = t;
   if (e)
     return (i) => i === null ? "" : e(i);
 }
-function T(t) {
-  const { showValueLabels: e, theme: i } = t, l = c(t);
+function p(t) {
+  const { showValueLabels: e, theme: i } = t, o = n(t);
   return {
     show: e,
     position: "top",
     color: i.labelColor,
-    formatter: l ? (o) => l(o.value[1]) : void 0
+    formatter: o ? (l) => o(l.value[1]) : void 0
   };
 }
-function _(t, e, i) {
-  const l = t.points.map((r) => [
+function x(t, e, i) {
+  const o = t.points.map((r) => [
     r.timestamp,
     r.value
-  ]), o = T(e);
-  return e.displayType === "bar" ? { id: t.id, name: t.name, type: "bar", data: l, itemStyle: { color: i }, label: o } : {
+  ]), l = p(e);
+  return e.displayType === "bar" ? { id: t.id, name: t.name, type: "bar", data: o, itemStyle: { color: i }, label: l } : {
     id: t.id,
     name: t.name,
     type: "line",
-    data: l,
+    data: o,
     showSymbol: e.showSymbols,
-    symbolSize: u,
+    symbolSize: c,
     lineStyle: {
       color: i,
-      type: e.line.style ?? L,
-      width: y[e.line.width ?? g]
+      type: e.line.style ?? f,
+      width: u[e.line.width ?? y]
     },
     itemStyle: { color: i },
-    areaStyle: e.displayType === "area" ? { color: i, opacity: f } : void 0,
-    label: o
+    areaStyle: e.displayType === "area" ? { color: i, opacity: d } : void 0,
+    label: l
   };
 }
-function x(t) {
-  const { series: e, legend: i, yAxis: l, theme: o, seriesColorOverrides: r } = t, s = i !== "none" && e.length > 0, a = c(t);
+function C(t) {
+  const { series: e, yAxis: i, theme: o, seriesColorOverrides: l } = t, r = n(t);
   return {
     animation: !1,
     color: o.seriesColors,
     textStyle: { fontFamily: o.fontFamily, color: o.labelColor },
     grid: {
-      ...n,
-      top: s ? n.top + 32 : n.top,
+      ...m,
       containLabel: !1
     },
-    legend: s ? {
-      type: "scroll",
-      top: 0,
-      left: 0,
-      icon: "roundRect",
-      itemHeight: 8,
-      itemWidth: 12,
-      textStyle: { color: o.labelColor }
-    } : { show: !1 },
     tooltip: {
       trigger: "axis",
       backgroundColor: o.tooltipBackgroundColor,
       borderColor: o.tooltipBorderColor,
       textStyle: { color: o.labelColor },
-      valueFormatter: a
+      valueFormatter: r
     },
     xAxis: {
       type: "time",
@@ -86,24 +76,24 @@ function x(t) {
       splitLine: { show: !1 }
     },
     yAxis: {
-      type: l.scale === "log" ? "log" : "value",
-      scale: l.includeZero !== !0,
-      min: l.min,
-      max: l.max,
+      type: i.scale === "log" ? "log" : "value",
+      scale: i.includeZero !== !0,
+      min: i.min,
+      max: i.max,
       axisLine: { show: !1 },
-      axisLabel: { color: o.labelColor, formatter: a },
+      axisLabel: { color: o.labelColor, formatter: r },
       splitLine: { lineStyle: { color: o.splitLineColor } }
     },
     series: e.map(
-      (m, d) => _(
-        m,
+      (s, a) => x(
+        s,
         t,
-        r[m.id] ?? o.seriesColors[d % o.seriesColors.length]
+        l[s.id] ?? o.seriesColors[a % o.seriesColors.length]
       )
     )
   };
 }
 export {
-  x as buildTimeSeriesOption
+  C as buildTimeSeriesOption
 };
 //# sourceMappingURL=time-series-option.js.map

package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-series-option.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\n  // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n  // recebe a próxima cor da paleta.\n  colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  legend: TimeSeriesLegendMode;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\n  seriesColorOverrides: Record<string, string>;\n  valueFormatter?: (value: number) => string;\n}\n\nconst LEGEND_HEIGHT_PX: number = 32;\n\nconst GRID_WITHOUT_LEGEND = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  day: \"2-digit\",\n  month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  second: \"2-digit\",\n  hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n  const instant: Date = new Date(timestamp);\n  if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n  if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n  // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n  if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n  return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\n  };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, legend, yAxis, theme, seriesColorOverrides } = input;\n  const isLegendVisible: boolean = legend !== \"none\" && series.length > 0;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n  return {\n    animation: false,\n    color: theme.seriesColors,\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      ...GRID_WITHOUT_LEGEND,\n      top: isLegendVisible ? GRID_WITHOUT_LEGEND.top + LEGEND_HEIGHT_PX : GRID_WITHOUT_LEGEND.top,\n      containLabel: false,\n    },\n    legend: isLegendVisible\n      ? {\n          type: \"scroll\",\n          top: 0,\n          left: 0,\n          icon: \"roundRect\",\n          itemHeight: 8,\n          itemWidth: 12,\n          textStyle: { color: theme.labelColor },\n        }\n      : { show: false },\n    tooltip: {\n      trigger: \"axis\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["GRID_WITHOUT_LEGEND","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","legend","yAxis","seriesColorOverrides","isLegendVisible","index"],"mappings":"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"}
+{"version":3,"file":"time-series-option.js","sources":["../../../../../../src/ui/components/charts/TimeSeriesChart/time-series-option.ts"],"sourcesContent":["import type { ChartTheme } from \"../chart-theme\";\n\nexport interface TimeSeriesPoint {\n  timestamp: number;\n  value: number | null;\n}\n\nexport interface TimeSeriesData {\n  id: string;\n  name: string;\n  points: TimeSeriesPoint[];\n  // Nome de token, nunca hex: é o que mantém a cor válida nos dois temas. Sem ele a série\n  // recebe a próxima cor da paleta.\n  colorToken?: string;\n}\n\nexport type TimeSeriesDisplayType = \"line\" | \"bar\" | \"area\";\n\nexport type TimeSeriesLineStyle = \"solid\" | \"dashed\" | \"dotted\";\n\nexport type TimeSeriesLineWidth = \"thin\" | \"normal\" | \"thick\";\n\nexport interface TimeSeriesLineOptions {\n  style?: TimeSeriesLineStyle;\n  width?: TimeSeriesLineWidth;\n}\n\nexport type TimeSeriesLegendMode = \"inline\" | \"none\";\n\nexport type TimeSeriesAxisScale = \"linear\" | \"log\";\n\nexport interface TimeSeriesYAxisOptions {\n  scale?: TimeSeriesAxisScale;\n  min?: number;\n  max?: number;\n  includeZero?: boolean;\n}\n\nexport interface TimeSeriesOptionInput {\n  series: TimeSeriesData[];\n  displayType: TimeSeriesDisplayType;\n  line: TimeSeriesLineOptions;\n  yAxis: TimeSeriesYAxisOptions;\n  theme: ChartTheme;\n  showSymbols: boolean;\n  showValueLabels: boolean;\n  seriesColorOverrides: Record<string, string>;\n  valueFormatter?: (value: number) => string;\n}\n\n// A legenda saiu do canvas e virou HTML (`ChartLegend`), entao a grade nao reserva mais faixa\n// para ela: quem divide a altura agora e o flex do componente.\nconst GRID_PADDING = { top: 16, right: 16, bottom: 24, left: 56 } as const;\n\nconst SYMBOL_SIZE_PX: number = 6;\n\nconst AREA_OPACITY: number = 0.15;\n\nconst LINE_WIDTH_PX: Record<TimeSeriesLineWidth, number> = { thin: 1, normal: 2, thick: 4 };\n\nconst DEFAULT_LINE_STYLE: TimeSeriesLineStyle = \"solid\";\n\nconst DEFAULT_LINE_WIDTH: TimeSeriesLineWidth = \"normal\";\n\n// O eixo de tempo do ECharts rotula a marca de dia so com o numero do dia -- \"2\", \"3\", \"4\" --, que\n// sozinho nao diz nem o mes. Aqui a marca de dia vira data e a marca dentro do dia vira hora, que e\n// o que se espera de uma serie temporal.\n//\n// A precisao sai do proprio instante, e nao de um nivel pedido ao ECharts: ele alinha as marcas ao\n// nivel que cabe no eixo, entao meia-noite e marca de dia, minuto cheio e marca de hora, e assim por\n// diante. Ler o instante e o que permite usar `Intl` e escrever a data na convencao de quem le -- o\n// objeto de niveis do ECharts so aceita template, e um `{dd}/{MM}` fixo seria lido como mes/dia por\n// metade dos usuarios.\nconst YEAR_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, { year: \"numeric\" });\n\nconst DAY_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  day: \"2-digit\",\n  month: \"2-digit\",\n});\n\nconst MINUTE_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  hour12: false,\n});\n\nconst SECOND_LABEL: Intl.DateTimeFormat = new Intl.DateTimeFormat(undefined, {\n  hour: \"2-digit\",\n  minute: \"2-digit\",\n  second: \"2-digit\",\n  hour12: false,\n});\n\nfunction timeAxisLabel(timestamp: number): string {\n  const instant: Date = new Date(timestamp);\n  if (instant.getSeconds() !== 0 || instant.getMilliseconds() !== 0) return SECOND_LABEL.format(instant);\n  if (instant.getHours() !== 0 || instant.getMinutes() !== 0) return MINUTE_LABEL.format(instant);\n  // Primeiro de janeiro e a marca de ano do ECharts, e ali a data sem o ano nao situa ninguem.\n  if (instant.getMonth() === 0 && instant.getDate() === 1) return YEAR_LABEL.format(instant);\n  return DAY_LABEL.format(instant);\n}\n\n// O ponto de gap chega ao formatter como `null` — o ECharts monta o bloco do tooltip sem marcar\n// `noValue`, então formata o vazio junto com o resto. O tipo público promete `number` ao\n// consumidor, e é esta guarda que mantém a promessa em vez de transformá-la em aviso.\nfunction nullSafeValueFormatter(\n  input: TimeSeriesOptionInput,\n): ((value: number | null) => string) | undefined {\n  const { valueFormatter } = input;\n  if (!valueFormatter) return undefined;\n  return (value: number | null) => (value === null ? \"\" : valueFormatter(value));\n}\n\nfunction seriesLabel(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { showValueLabels, theme } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n  return {\n    show: showValueLabels,\n    position: \"top\",\n    color: theme.labelColor,\n    formatter: formatValue\n      ? (params: { value: [number, number | null] }) => formatValue(params.value[1])\n      : undefined,\n  };\n}\n\nfunction seriesEntry(\n  data: TimeSeriesData,\n  input: TimeSeriesOptionInput,\n  color: string,\n): Record<string, unknown> {\n  const values: Array<[number, number | null]> = data.points.map((point: TimeSeriesPoint) => [\n    point.timestamp,\n    point.value,\n  ]);\n  const label: Record<string, unknown> = seriesLabel(input);\n\n  if (input.displayType === \"bar\") {\n    return { id: data.id, name: data.name, type: \"bar\", data: values, itemStyle: { color }, label };\n  }\n\n  return {\n    id: data.id,\n    name: data.name,\n    type: \"line\",\n    data: values,\n    showSymbol: input.showSymbols,\n    symbolSize: SYMBOL_SIZE_PX,\n    lineStyle: {\n      color,\n      type: input.line.style ?? DEFAULT_LINE_STYLE,\n      width: LINE_WIDTH_PX[input.line.width ?? DEFAULT_LINE_WIDTH],\n    },\n    itemStyle: { color },\n    areaStyle: input.displayType === \"area\" ? { color, opacity: AREA_OPACITY } : undefined,\n    label,\n  };\n}\n\n// O retorno é `Record<string, unknown>` de propósito, e não `EChartsOption`: é o que impede\n// um tipo da biblioteca de vazar para o resto do design system.\nexport function buildTimeSeriesOption(input: TimeSeriesOptionInput): Record<string, unknown> {\n  const { series, yAxis, theme, seriesColorOverrides } = input;\n  const formatValue: ((value: number | null) => string) | undefined = nullSafeValueFormatter(input);\n\n  return {\n    animation: false,\n    color: theme.seriesColors,\n    textStyle: { fontFamily: theme.fontFamily, color: theme.labelColor },\n    grid: {\n      ...GRID_PADDING,\n      containLabel: false,\n    },\n    tooltip: {\n      trigger: \"axis\",\n      backgroundColor: theme.tooltipBackgroundColor,\n      borderColor: theme.tooltipBorderColor,\n      textStyle: { color: theme.labelColor },\n      valueFormatter: formatValue,\n    },\n    xAxis: {\n      type: \"time\",\n      axisLine: { lineStyle: { color: theme.axisLineColor } },\n      axisTick: { show: false },\n      axisLabel: { color: theme.labelColor, hideOverlap: true, formatter: timeAxisLabel },\n      splitLine: { show: false },\n    },\n    yAxis: {\n      type: yAxis.scale === \"log\" ? \"log\" : \"value\",\n      scale: yAxis.includeZero !== true,\n      min: yAxis.min,\n      max: yAxis.max,\n      axisLine: { show: false },\n      axisLabel: { color: theme.labelColor, formatter: formatValue },\n      splitLine: { lineStyle: { color: theme.splitLineColor } },\n    },\n    series: series.map((data: TimeSeriesData, index: number) =>\n      seriesEntry(\n        data,\n        input,\n        seriesColorOverrides[data.id] ?? theme.seriesColors[index % theme.seriesColors.length],\n      ),\n    ),\n  };\n}\n"],"names":["GRID_PADDING","SYMBOL_SIZE_PX","AREA_OPACITY","LINE_WIDTH_PX","DEFAULT_LINE_STYLE","DEFAULT_LINE_WIDTH","YEAR_LABEL","DAY_LABEL","MINUTE_LABEL","SECOND_LABEL","timeAxisLabel","timestamp","instant","nullSafeValueFormatter","input","valueFormatter","value","seriesLabel","showValueLabels","theme","formatValue","params","seriesEntry","data","color","values","point","label","buildTimeSeriesOption","series","yAxis","seriesColorOverrides","index"],"mappings":"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"}

package/dist/lib/ui/primitives/Table/Table.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../vendor/clsx/dist/clsx.cjs"),s=require("react-aria-components");;/* empty css            */const m=require("../../icons/IconChevronUp.cjs"),h=require("../../icons/IconChevronDown.cjs"),u=require("../Checkbox/Checkbox.cjs");function j({bleed:l=!1,dense:a=!1,grid:n=!1,striped:c=!1,className:t,...o}){const i=r.clsx(t,"table-container",l&&"table-container-bleed"),b=r.clsx("sds-table",l&&"table-bleed",a&&"table-dense",n&&"table-grid",c&&"sds-table-striped");return e.jsx("div",{className:i,children:e.jsx(s.Table,{className:b,...o})})}function x({align:l="start",className:a,...n}){const c=r.clsx(a,"table-column",`table-align-${l}`);return e.jsx(s.Column,{className:c,...n,children:({allowsSorting:t,sortDirection:o})=>e.jsx("div",{className:r.clsx("table-column-inner"),children:e.jsxs(e.Fragment,{children:[n.children,t&&e.jsx("span",{"aria-hidden":"true",className:"sort-indicator",children:o==="ascending"?e.jsx(m.IconChevronUp,{}):e.jsx(h.IconChevronDown,{})})]})})})}function C({className:l,...a}){return e.jsx(s.TableBody,{...a})}function N({className:l,columns:a,children:n,...c}){const{selectionBehavior:t,selectionMode:o,allowsDragging:i}=s.useTableOptions(),b=r.clsx(l,"table-head");return e.jsxs(s.TableHeader,{className:b,...c,children:[i&&e.jsx(x,{}),t==="toggle"&&e.jsx(x,{className:"table-selection-col",children:o==="multiple"&&e.jsx(s.Checkbox,{slot:"selection",className:"table-selection-checkbox",children:e.jsx(u.Checkbox,{})})}),e.jsx(s.Collection,{items:a,children:n})]})}function g({id:l,columns:a,children:n,className:c,...t}){const{selectionBehavior:o,allowsDragging:i}=s.useTableOptions(),b=r.clsx(c,"table-row");return e.jsxs(s.Row,{id:l,...t,className:b,children:[i&&e.jsx(d,{children:e.jsx(s.Button,{slot:"drag",children:"≡"})}),o==="toggle"&&e.jsx(d,{className:"table-selection-cell",children:e.jsx(s.Checkbox,{slot:"selection",className:"table-selection-checkbox",children:e.jsx(u.Checkbox,{})})}),e.jsx(s.Collection,{items:a,children:n})]})}function d({align:l="start",className:a,...n}){const c=r.clsx(a,"table-cell",`table-align-${l}`);return e.jsx(s.Cell,{className:c,...n})}exports.Table=j;exports.TableBody=C;exports.TableCell=d;exports.TableColumn=x;exports.TableHead=N;exports.TableRow=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../vendor/clsx/dist/clsx.cjs"),n=require("react-aria-components");;/* empty css            */const N=require("../../icons/IconChevronDown.cjs"),C=require("../../icons/IconChevronUp.cjs"),u=require("../Checkbox/Checkbox.cjs");function g(s){const l=Number(s);return`${s}`.trim()!==""&&Number.isFinite(l)?`${l}px`:`${s}`}function T({bleed:s=!1,dense:l=!1,grid:a=!1,striped:t=!1,maxHeight:c,className:o,...b}){const i=c!==void 0,m=r.clsx(o,"table-container",s&&"table-container-bleed",i&&"table-container-scrollable"),h=i?{"--table-max-height":g(c)}:void 0,j=r.clsx("sds-table",s&&"table-bleed",l&&"table-dense",a&&"table-grid",t&&"sds-table-striped");return e.jsx("div",{className:m,style:h,children:e.jsx(n.Table,{className:j,...b})})}function d({align:s="start",className:l,...a}){const t=r.clsx(l,"table-column",`table-align-${s}`);return e.jsx(n.Column,{className:t,...a,children:({allowsSorting:c,sortDirection:o})=>e.jsx("div",{className:r.clsx("table-column-inner"),children:e.jsxs(e.Fragment,{children:[a.children,c&&e.jsx("span",{"aria-hidden":"true",className:r.clsx("sort-indicator",!o&&"sort-indicator-unsorted"),children:o==="descending"?e.jsx(N.IconChevronDown,{}):e.jsx(C.IconChevronUp,{})})]})})})}function f({className:s,...l}){return e.jsx(n.TableBody,{...l})}function v({className:s,columns:l,children:a,...t}){const{selectionBehavior:c,selectionMode:o,allowsDragging:b}=n.useTableOptions(),i=r.clsx(s,"table-head");return e.jsxs(n.TableHeader,{className:i,...t,children:[b&&e.jsx(d,{}),c==="toggle"&&e.jsx(d,{className:"table-selection-col",children:o==="multiple"&&e.jsx(n.Checkbox,{slot:"selection",className:"table-selection-checkbox",children:e.jsx(u.Checkbox,{})})}),e.jsx(n.Collection,{items:l,children:a})]})}function p({id:s,columns:l,children:a,className:t,...c}){const{selectionBehavior:o,allowsDragging:b}=n.useTableOptions(),i=r.clsx(t,"table-row");return e.jsxs(n.Row,{id:s,...c,className:i,children:[b&&e.jsx(x,{children:e.jsx(n.Button,{slot:"drag",children:"≡"})}),o==="toggle"&&e.jsx(x,{className:"table-selection-cell",children:e.jsx(n.Checkbox,{slot:"selection",className:"table-selection-checkbox",children:e.jsx(u.Checkbox,{})})}),e.jsx(n.Collection,{items:l,children:a})]})}function x({align:s="start",className:l,...a}){const t=r.clsx(l,"table-cell",`table-align-${s}`);return e.jsx(n.Cell,{className:t,...a})}exports.Table=T;exports.TableBody=f;exports.TableCell=x;exports.TableColumn=d;exports.TableHead=v;exports.TableRow=p;
 //# sourceMappingURL=Table.cjs.map

package/dist/lib/ui/primitives/Table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox } from \"primitives\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Checkbox as RACSelectionCheckbox,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  className,\n  ...props\n}: TableProps) {\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n  );\n  const tableClassNames = clsx(\n    \"sds-table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"sds-table-striped\",\n  );\n  return (\n    <div className={containerClassNames}>\n      <RACTable className={tableClassNames} {...props} />\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span aria-hidden=\"true\" className=\"sort-indicator\">\n                {sortDirection === \"ascending\" ? (\n                  <IconChevronUp />\n                ) : (\n                  <IconChevronDown />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn className=\"table-selection-col\">\n          {selectionMode === \"multiple\" && (\n            <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n              <Checkbox />\n            </RACSelectionCheckbox>\n          )}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell className=\"table-selection-cell\">\n          <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n            <Checkbox />\n          </RACSelectionCheckbox>\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["Table","bleed","dense","grid","striped","className","props","containerClassNames","clsx","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronUp","IconChevronDown","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":"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"}
+{"version":3,"file":"Table.cjs","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport type { CSSProperties } from \"react\";\nimport { Checkbox } from \"primitives\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Checkbox as RACSelectionCheckbox,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nfunction toCssLength(value: number | string): string {\n  const numericValue = Number(value);\n  const isUnitlessNumber =\n    `${value}`.trim() !== \"\" && Number.isFinite(numericValue);\n  return isUnitlessNumber ? `${numericValue}px` : `${value}`;\n}\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n  maxHeight?: number | string;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  maxHeight,\n  className,\n  ...props\n}: TableProps) {\n  const scrollsVertically = maxHeight !== undefined;\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n    scrollsVertically && \"table-container-scrollable\",\n  );\n  const containerStyle = scrollsVertically\n    ? ({ \"--table-max-height\": toCssLength(maxHeight) } as CSSProperties)\n    : undefined;\n  const tableClassNames = clsx(\n    \"sds-table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"sds-table-striped\",\n  );\n  return (\n    <div className={containerClassNames} style={containerStyle}>\n      <RACTable className={tableClassNames} {...props} />\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span\n                aria-hidden=\"true\"\n                className={clsx(\n                  \"sort-indicator\",\n                  !sortDirection && \"sort-indicator-unsorted\",\n                )}\n              >\n                {sortDirection === \"descending\" ? (\n                  <IconChevronDown />\n                ) : (\n                  <IconChevronUp />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn className=\"table-selection-col\">\n          {selectionMode === \"multiple\" && (\n            <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n              <Checkbox />\n            </RACSelectionCheckbox>\n          )}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell className=\"table-selection-cell\">\n          <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n            <Checkbox />\n          </RACSelectionCheckbox>\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["toCssLength","value","numericValue","Table","bleed","dense","grid","striped","maxHeight","className","props","scrollsVertically","containerClassNames","clsx","containerStyle","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronDown","IconChevronUp","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":"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"}

package/dist/lib/ui/primitives/Table/Table.js

@@ -1,89 +1,105 @@
-import { jsx as e, jsxs as m, Fragment as g } from "react/jsx-runtime";
+import { jsx as e, jsxs as m, Fragment as T } from "react/jsx-runtime";
 import { clsx as c } from "../../../vendor/clsx/dist/clsx.js";
-import { Table as C, Column as T, TableBody as p, useTableOptions as h, TableHeader as x, Checkbox as u, Collection as N, Row as v, Button as w, Cell as B } from "react-aria-components";
+import { Table as x, Column as $, TableBody as v, useTableOptions as h, TableHeader as w, Checkbox as u, Collection as N, Row as y, Button as B, Cell as k } from "react-aria-components";
 /* empty css          */
-import { IconChevronUp as k } from "../../icons/IconChevronUp.js";
-import { IconChevronDown as $ } from "../../icons/IconChevronDown.js";
+import { IconChevronDown as U } from "../../icons/IconChevronDown.js";
+import { IconChevronUp as j } from "../../icons/IconChevronUp.js";
 import { Checkbox as f } from "../Checkbox/Checkbox.js";
-function M({
+function D(l) {
+  const s = Number(l);
+  return `${l}`.trim() !== "" && Number.isFinite(s) ? `${s}px` : `${l}`;
+}
+function O({
   bleed: l = !1,
-  dense: a = !1,
-  grid: s = !1,
-  striped: n = !1,
-  className: t,
-  ...o
+  dense: s = !1,
+  grid: a = !1,
+  striped: t = !1,
+  maxHeight: n,
+  className: o,
+  ...r
 }) {
-  const r = c(
-    t,
+  const i = n !== void 0, g = c(
+    o,
     "table-container",
-    l && "table-container-bleed"
-  ), i = c(
+    l && "table-container-bleed",
+    i && "table-container-scrollable"
+  ), C = i ? { "--table-max-height": D(n) } : void 0, p = c(
     "sds-table",
     l && "table-bleed",
-    a && "table-dense",
-    s && "table-grid",
-    n && "sds-table-striped"
+    s && "table-dense",
+    a && "table-grid",
+    t && "sds-table-striped"
   );
-  return /* @__PURE__ */ e("div", { className: r, children: /* @__PURE__ */ e(C, { className: i, ...o }) });
+  return /* @__PURE__ */ e("div", { className: g, style: C, children: /* @__PURE__ */ e(x, { className: p, ...r }) });
 }
 function b({
   align: l = "start",
-  className: a,
-  ...s
+  className: s,
+  ...a
 }) {
-  const n = c(a, "table-column", `table-align-${l}`);
-  return /* @__PURE__ */ e(T, { className: n, ...s, children: ({ allowsSorting: t, sortDirection: o }) => /* @__PURE__ */ e("div", { className: c("table-column-inner"), children: /* @__PURE__ */ m(g, { children: [
-    s.children,
-    t && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "sort-indicator", children: o === "ascending" ? /* @__PURE__ */ e(k, {}) : /* @__PURE__ */ e($, {}) })
+  const t = c(s, "table-column", `table-align-${l}`);
+  return /* @__PURE__ */ e($, { className: t, ...a, children: ({ allowsSorting: n, sortDirection: o }) => /* @__PURE__ */ e("div", { className: c("table-column-inner"), children: /* @__PURE__ */ m(T, { children: [
+    a.children,
+    n && /* @__PURE__ */ e(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: c(
+          "sort-indicator",
+          !o && "sort-indicator-unsorted"
+        ),
+        children: o === "descending" ? /* @__PURE__ */ e(U, {}) : /* @__PURE__ */ e(j, {})
+      }
+    )
   ] }) }) });
 }
-function O({
+function S({
   className: l,
-  ...a
+  ...s
 }) {
-  return /* @__PURE__ */ e(p, { ...a });
+  return /* @__PURE__ */ e(v, { ...s });
 }
-function U({
+function q({
   className: l,
-  columns: a,
-  children: s,
-  ...n
+  columns: s,
+  children: a,
+  ...t
 }) {
-  const { selectionBehavior: t, selectionMode: o, allowsDragging: r } = h(), i = c(l, "table-head");
-  return /* @__PURE__ */ m(x, { className: i, ...n, children: [
+  const { selectionBehavior: n, selectionMode: o, allowsDragging: r } = h(), i = c(l, "table-head");
+  return /* @__PURE__ */ m(w, { className: i, ...t, children: [
     r && /* @__PURE__ */ e(b, {}),
-    t === "toggle" && /* @__PURE__ */ e(b, { className: "table-selection-col", children: o === "multiple" && /* @__PURE__ */ e(u, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(f, {}) }) }),
-    /* @__PURE__ */ e(N, { items: a, children: s })
+    n === "toggle" && /* @__PURE__ */ e(b, { className: "table-selection-col", children: o === "multiple" && /* @__PURE__ */ e(u, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(f, {}) }) }),
+    /* @__PURE__ */ e(N, { items: s, children: a })
   ] });
 }
-function q({
+function z({
   id: l,
-  columns: a,
-  children: s,
-  className: n,
-  ...t
+  columns: s,
+  children: a,
+  className: t,
+  ...n
 }) {
-  const { selectionBehavior: o, allowsDragging: r } = h(), i = c(n, "table-row");
-  return /* @__PURE__ */ m(v, { id: l, ...t, className: i, children: [
-    r && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(w, { slot: "drag", children: "≡" }) }),
+  const { selectionBehavior: o, allowsDragging: r } = h(), i = c(t, "table-row");
+  return /* @__PURE__ */ m(y, { id: l, ...n, className: i, children: [
+    r && /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(B, { slot: "drag", children: "≡" }) }),
     o === "toggle" && /* @__PURE__ */ e(d, { className: "table-selection-cell", children: /* @__PURE__ */ e(u, { slot: "selection", className: "table-selection-checkbox", children: /* @__PURE__ */ e(f, {}) }) }),
-    /* @__PURE__ */ e(N, { items: a, children: s })
+    /* @__PURE__ */ e(N, { items: s, children: a })
   ] });
 }
 function d({
   align: l = "start",
-  className: a,
-  ...s
+  className: s,
+  ...a
 }) {
-  const n = c(a, "table-cell", `table-align-${l}`);
-  return /* @__PURE__ */ e(B, { className: n, ...s });
+  const t = c(s, "table-cell", `table-align-${l}`);
+  return /* @__PURE__ */ e(k, { className: t, ...a });
 }
 export {
-  M as Table,
-  O as TableBody,
+  O as Table,
+  S as TableBody,
   d as TableCell,
   b as TableColumn,
-  U as TableHead,
-  q as TableRow
+  q as TableHead,
+  z as TableRow
 };
 //# sourceMappingURL=Table.js.map

package/dist/lib/ui/primitives/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport { Checkbox } from \"primitives\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Checkbox as RACSelectionCheckbox,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  className,\n  ...props\n}: TableProps) {\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n  );\n  const tableClassNames = clsx(\n    \"sds-table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"sds-table-striped\",\n  );\n  return (\n    <div className={containerClassNames}>\n      <RACTable className={tableClassNames} {...props} />\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span aria-hidden=\"true\" className=\"sort-indicator\">\n                {sortDirection === \"ascending\" ? (\n                  <IconChevronUp />\n                ) : (\n                  <IconChevronDown />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn className=\"table-selection-col\">\n          {selectionMode === \"multiple\" && (\n            <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n              <Checkbox />\n            </RACSelectionCheckbox>\n          )}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell className=\"table-selection-cell\">\n          <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n            <Checkbox />\n          </RACSelectionCheckbox>\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["Table","bleed","dense","grid","striped","className","props","containerClassNames","clsx","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronUp","IconChevronDown","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../src/ui/primitives/Table/Table.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { IconChevronDown, IconChevronUp } from \"icons\";\nimport type { CSSProperties } from \"react\";\nimport { Checkbox } from \"primitives\";\nimport {\n  Button as RACButton,\n  Cell as RACCell,\n  Checkbox as RACSelectionCheckbox,\n  Collection as RACCollection,\n  Column as RACColumn,\n  Row as RACRow,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  useTableOptions,\n  type CellProps as RACCellProps,\n  type ColumnProps as RACColumnProps,\n  type RowProps as RACRowProps,\n  type TableBodyProps as RACTableBodyProps,\n  type TableHeaderProps as RACTableHeaderProps,\n  type TableProps as RACTableProps,\n} from \"react-aria-components\";\nimport \"./table.css\";\n\ntype TableAlign = \"start\" | \"center\" | \"right\";\n\nfunction toCssLength(value: number | string): string {\n  const numericValue = Number(value);\n  const isUnitlessNumber =\n    `${value}`.trim() !== \"\" && Number.isFinite(numericValue);\n  return isUnitlessNumber ? `${numericValue}px` : `${value}`;\n}\n\nexport type TableProps = RACTableProps & {\n  bleed?: boolean;\n  dense?: boolean;\n  grid?: boolean;\n  striped?: boolean;\n  maxHeight?: number | string;\n};\nexport function Table({\n  bleed = false,\n  dense = false,\n  grid = false,\n  striped = false,\n  maxHeight,\n  className,\n  ...props\n}: TableProps) {\n  const scrollsVertically = maxHeight !== undefined;\n  const containerClassNames = clsx(\n    className,\n    \"table-container\",\n    bleed && \"table-container-bleed\",\n    scrollsVertically && \"table-container-scrollable\",\n  );\n  const containerStyle = scrollsVertically\n    ? ({ \"--table-max-height\": toCssLength(maxHeight) } as CSSProperties)\n    : undefined;\n  const tableClassNames = clsx(\n    \"sds-table\",\n    bleed && \"table-bleed\",\n    dense && \"table-dense\",\n    grid && \"table-grid\",\n    striped && \"sds-table-striped\",\n  );\n  return (\n    <div className={containerClassNames} style={containerStyle}>\n      <RACTable className={tableClassNames} {...props} />\n    </div>\n  );\n}\n\nexport type TableColumnProps = RACColumnProps & {\n  align?: TableAlign;\n};\nexport function TableColumn({\n  align = \"start\",\n  className,\n  ...props\n}: TableColumnProps) {\n  const classNames = clsx(className, \"table-column\", `table-align-${align}`);\n  return (\n    <RACColumn className={classNames} {...props}>\n      {({ allowsSorting, sortDirection }) => (\n        <div className={clsx(\"table-column-inner\")}>\n          <>\n            {props.children}\n            {allowsSorting && (\n              <span\n                aria-hidden=\"true\"\n                className={clsx(\n                  \"sort-indicator\",\n                  !sortDirection && \"sort-indicator-unsorted\",\n                )}\n              >\n                {sortDirection === \"descending\" ? (\n                  <IconChevronDown />\n                ) : (\n                  <IconChevronUp />\n                )}\n              </span>\n            )}\n          </>\n        </div>\n      )}\n    </RACColumn>\n  );\n}\n\nexport type TableBodyProps<T> = RACTableBodyProps<T>;\nexport function TableBody<T extends object>({\n  className,\n  ...props\n}: TableBodyProps<T>) {\n  return <RACTableBody {...props} />;\n}\n\nexport type TableHeadProps<T> = RACTableHeaderProps<T>;\nexport function TableHead<T extends object>({\n  className,\n  columns,\n  children,\n  ...props\n}: TableHeadProps<T>) {\n  const { selectionBehavior, selectionMode, allowsDragging } =\n    useTableOptions();\n  const classNames = clsx(className, \"table-head\");\n  return (\n    <RACTableHeader className={classNames} {...props}>\n      {/* Add extra columns for drag and drop and selection. */}\n      {allowsDragging && <TableColumn />}\n      {selectionBehavior === \"toggle\" && (\n        <TableColumn className=\"table-selection-col\">\n          {selectionMode === \"multiple\" && (\n            <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n              <Checkbox />\n            </RACSelectionCheckbox>\n          )}\n        </TableColumn>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACTableHeader>\n  );\n}\n\nexport type TableRowProps<T> = RACRowProps<T>;\nexport function TableRow<T extends object>({\n  id,\n  columns,\n  children,\n  className,\n  ...otherProps\n}: TableRowProps<T>) {\n  const { selectionBehavior, allowsDragging } = useTableOptions();\n  const classNames = clsx(className, \"table-row\");\n  return (\n    <RACRow id={id} {...otherProps} className={classNames}>\n      {allowsDragging && (\n        <TableCell>\n          <RACButton slot=\"drag\">≡</RACButton>\n        </TableCell>\n      )}\n      {selectionBehavior === \"toggle\" && (\n        <TableCell className=\"table-selection-cell\">\n          <RACSelectionCheckbox slot=\"selection\" className=\"table-selection-checkbox\">\n            <Checkbox />\n          </RACSelectionCheckbox>\n        </TableCell>\n      )}\n      <RACCollection items={columns}>{children}</RACCollection>\n    </RACRow>\n  );\n}\n\nexport type TableCellProps = RACCellProps & { align?: TableAlign };\nexport function TableCell({\n  align = \"start\",\n  className,\n  ...props\n}: TableCellProps) {\n  const classNames = clsx(className, \"table-cell\", `table-align-${align}`);\n  return <RACCell className={classNames} {...props} />;\n}\n"],"names":["toCssLength","value","numericValue","Table","bleed","dense","grid","striped","maxHeight","className","props","scrollsVertically","containerClassNames","clsx","containerStyle","tableClassNames","jsx","RACTable","TableColumn","align","classNames","RACColumn","allowsSorting","sortDirection","jsxs","Fragment","IconChevronDown","IconChevronUp","TableBody","RACTableBody","TableHead","columns","children","selectionBehavior","selectionMode","allowsDragging","useTableOptions","RACTableHeader","RACSelectionCheckbox","Checkbox","RACCollection","TableRow","id","otherProps","RACRow","TableCell","RACButton","RACCell"],"mappings":"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"}

package/dist/types/charts.index.d.ts

@@ -1,3 +1,5 @@
 export * from "./ui/components/charts/BarChart/BarChart";
 export * from "./ui/components/charts/chart-palette";
+export * from "./ui/components/charts/ChartColorPicker/ChartColorPicker";
+export * from "./ui/components/charts/ChartLegend/ChartLegend";
 export * from "./ui/components/charts/TimeSeriesChart/TimeSeriesChart";