UNPKG

@arolariu/components

Version:

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

1 lines • 4.93 kB
{"version":3,"sources":["webpack://./src/components/ui/chart.module.css"],"names":[],"mappings":"AAAA;EACE,oBAAoB;EACpB,2BAA2B;EAC3B,4BAA4B;EAC5B,uBAAuB;EACvB,aAAa;AACf;;AAEA;EACE,gCAAgC;AAClC;;AAEA;EACE,wBAAwB;AAC1B;;AAIA;EADE,wBAAwB;AAC1B;;AAIA;EADE,qBAAqB;AACvB;;AAKA;EAFE,aAAa;AACf;;AAMA;EAHE,aAAa;AACf;;AAQA;EALE,sCAAsC;EACtC,sEAAsE;EACtE,kCAAkC;EAClC,kBAAkB;EAClB,sBAAsB;EACtB,eAAe;EACf,gBAAgB;EAChB,aAAa;EACb,iCAAiC;AACnC;;AAQA;EALE,gBAAgB;AAClB;;AAQA;EALE,sBAAsB;EACtB,aAAa;AACf;;AAQA;EALE,oBAAoB;EACpB,sBAAsB;EACtB,eAAe;EACf,WAAW;EACX,aAAa;AACf;;AAYA;EATE,mBAAmB;AACrB;;AAQA;EALE,sBAAsB;EACtB,OAAO;EACP,8BAA8B;EAC9B,cAAc;EACd,aAAa;AACf;;AASA;EANE,gBAAgB;AAClB;;AASA;EANE,sBAAsB;EACtB,aAAa;AACf;;AASA;EANE,iCAAiC;AACnC;;AASA;EANE,2BAA2B;EAC3B,kCAAkC;EAClC,+FAA+F;EAC/F,gBAAgB;AAClB;;AASA;EANE,sDAAsD;EACtD,8CAA8C;EAC9C,kBAAkB;EAClB,cAAc;AAChB;;AASA;EANE,cAAc;EACd,eAAe;AACjB;;AASA;EANE,aAAa;EACb,YAAY;EACZ,kBAAkB;AACpB;;AASA;EANE,uBAAuB;EACvB,oBAAoB;EACpB,mBAAmB;EACnB,QAAQ;EACR,kBAAkB;AACpB;;AASA;EANE,qBAAqB;AACvB;;AASA;EANE,mBAAmB;EACnB,sBAAsB;EACtB,uBAAuB;EACvB,aAAa;AACf;;AASA;EANE,iCAAiC;AACnC;;AASA;EANE,8BAA8B;AAChC;;AASA;EANE,mBAAmB;EACnB,sBAAsB;EACtB,aAAa;AACf;;AASA;EANE,iCAAiC;EACjC,aAAa;EACb,cAAc;AAChB;;AASA;EANE,kBAAkB;EAClB,cAAc;EACd,YAAY;EACZ,aAAa;AACf","sourcesContent":[".container {\r\n display: flex;\r\n justify-content: center;\r\n aspect-ratio: 16 / 9;\r\n color: var(--ac-foreground);\r\n font-size: var(--ac-text-xs);\r\n}\r\n\r\n.container :global(.recharts-cartesian-axis-tick text) {\r\n fill: var(--ac-muted-foreground);\r\n}\r\n\r\n.container :global(.recharts-cartesian-grid line[stroke=\"#ccc\"]),\r\n.container :global(.recharts-reference-line line[stroke=\"#ccc\"]),\r\n.container :global(.recharts-polar-grid line[stroke=\"#ccc\"]) {\r\n stroke: var(--ac-border);\r\n}\r\n\r\n.container :global(.recharts-curve.recharts-tooltip-cursor) {\r\n stroke: var(--ac-border);\r\n}\r\n\r\n.container :global(.recharts-radial-bar-background-sector),\r\n.container :global(.recharts-rectangle.recharts-tooltip-cursor) {\r\n fill: var(--ac-muted);\r\n}\r\n\r\n.container :global(.recharts-dot[stroke=\"#fff\"]),\r\n.container :global(.recharts-sector[stroke=\"#fff\"]) {\r\n stroke: transparent;\r\n}\r\n\r\n.container :global(.recharts-layer),\r\n.container :global(.recharts-sector),\r\n.container :global(.recharts-surface) {\r\n outline: none;\r\n}\r\n\r\n.tooltip {\r\n display: grid;\r\n min-width: 8rem;\r\n gap: var(--ac-space-2);\r\n align-items: start;\r\n padding: 0.625rem;\r\n border: 1px solid color-mix(in oklch, var(--ac-border), transparent 15%);\r\n border-radius: var(--ac-radius-lg);\r\n background-color: var(--ac-background);\r\n box-shadow: 0 16px 40px rgb(0 0 0 / 0.14);\r\n}\r\n\r\n.tooltipLabel {\r\n font-weight: 500;\r\n}\r\n\r\n.tooltipBody {\r\n display: grid;\r\n gap: var(--ac-space-2);\r\n}\r\n\r\n.tooltipItem {\r\n display: flex;\r\n width: 100%;\r\n flex-wrap: wrap;\r\n align-items: stretch;\r\n gap: var(--ac-space-2);\r\n}\r\n\r\n.tooltipItemCenter {\r\n align-items: center;\r\n}\r\n\r\n.tooltipValueRow {\r\n display: flex;\r\n flex: 1;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: var(--ac-space-3);\r\n line-height: 1;\r\n}\r\n\r\n.tooltipValueRowNested {\r\n align-items: end;\r\n}\r\n\r\n.tooltipNameWrapper {\r\n display: grid;\r\n gap: var(--ac-space-2);\r\n}\r\n\r\n.tooltipName {\r\n color: var(--ac-muted-foreground);\r\n}\r\n\r\n.tooltipValue {\r\n color: var(--ac-foreground);\r\n font-family: ui-monospace, \"SFMono-Regular\", \"SF Mono\", Consolas, \"Liberation Mono\", Menlo, monospace;\r\n font-weight: 500;\r\n font-variant-numeric: tabular-nums;\r\n}\r\n\r\n.tooltipIndicator {\r\n flex-shrink: 0;\r\n border-radius: 2px;\r\n background-color: var(--ac-chart-indicator-background);\r\n border-color: var(--ac-chart-indicator-border);\r\n}\r\n\r\n.tooltipIndicatorDot {\r\n width: 0.625rem;\r\n height: 0.625rem;\r\n}\r\n\r\n.tooltipIndicatorLine {\r\n width: 0.25rem;\r\n height: auto;\r\n min-height: 0.75rem;\r\n}\r\n\r\n.tooltipIndicatorDashed {\r\n width: 0;\r\n min-height: 0.75rem;\r\n background-color: transparent;\r\n border-style: dashed;\r\n border-width: 1.5px;\r\n}\r\n\r\n.tooltipIndicatorDashedNested {\r\n margin-block: 0.125rem;\r\n}\r\n\r\n.legend {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: var(--ac-space-4);\r\n}\r\n\r\n.legendTop {\r\n padding-bottom: var(--ac-space-3);\r\n}\r\n\r\n.legendBottom {\r\n padding-top: var(--ac-space-3);\r\n}\r\n\r\n.legendItem {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--ac-space-2);\r\n}\r\n\r\n.legendItem svg {\r\n width: 0.75rem;\r\n height: 0.75rem;\r\n color: var(--ac-muted-foreground);\r\n}\r\n\r\n.legendColor {\r\n width: 0.5rem;\r\n height: 0.5rem;\r\n flex-shrink: 0;\r\n border-radius: 2px;\r\n}\r\n\r\n"],"sourceRoot":""}