@flux-ui/statistics 3.0.0-next.28

package/dist/index.css

@@ -0,0 +1,492 @@
+:root {
+  --chart-primary: var(--primary-700);
+  --chart-positive: var(--success-500);
+  --chart-negative: var(--danger-500);
+  --chart-1: var(--chart-primary);
+  --chart-2: var(--primary-500);
+  --chart-3: var(--primary-300);
+  --chart-4: var(--primary-100);
+  --chart-secondary-1: var(--gray-300);
+  --chart-secondary-2: var(--gray-200);
+}
+
+.pane:has(.statistics-chart) {
+  display: flex;
+  min-width: 0;
+  flex-flow: column;
+}
+
+.statistics-chart {
+  position: absolute;
+  display: block;
+  inset: 0;
+  height: unset;
+  width: unset;
+}
+.statistics-chart svg {
+  overflow: hidden;
+}
+.statistics-chart {
+  --stroke: rgb(from var(--surface-stroke) r g b / .5);
+}
+.statistics-chart .apexcharts-canvas .apexcharts-grid-borders {
+  display: none;
+}
+.statistics-chart .apexcharts-canvas .apexcharts-yaxis-texts-g {
+  display: none;
+}
+.statistics-chart .apexcharts-canvas .apexcharts-tooltip {
+  background: rgb(from var(--gray-25) r g b/0.85);
+  background-clip: padding-box;
+  backdrop-filter: blur(6px) saturate(180%);
+  border: 1px solid var(--surface-stroke-out-hover);
+  border-radius: var(--radius-double);
+  box-shadow: var(--shadow-lg);
+  color: var(--foreground);
+  contain: paint;
+}
+
+.statistics-chart-element {
+  position: absolute;
+  display: block;
+  inset: 0;
+}
+
+.statistics-chart-tooltip-title {
+  padding: 18px 18px 0;
+  color: var(--foreground-prominent);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.statistics-chart-tooltip-body {
+  display: grid;
+  padding: 12px 18px 15px;
+  align-items: center;
+  gap: 6px 15px;
+  grid-template-columns: repeat(3, auto);
+}
+
+.statistics-chart-tooltip-series-color {
+  height: 12px;
+  width: 12px;
+  background: var(--danger-600);
+  border-radius: 6px;
+}
+
+.statistics-chart-tooltip-series-name {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.statistics-chart-tooltip-series-value {
+  font-size: 14px;
+  font-weight: 500;
+  text-align: right;
+}.statistics-base {
+  display: flex;
+  height: 100%;
+  flex-flow: column;
+}
+
+.statistics-base-small {
+}
+
+.statistics-base-content {
+  position: relative;
+  display: flex;
+  padding: 21px;
+  flex-flow: column;
+}
+
+.statistics-base-header {
+  display: flex;
+  padding: 21px 21px 0;
+  align-items: flex-start;
+}
+
+.statistics-base-header-title {
+  color: var(--foreground-prominent);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 24px;
+  word-break: break-word;
+}
+
+.statistics-base-header-icon {
+  margin-left: auto;
+  color: var(--primary-600);
+  font-size: 20px;
+}
+
+.statistics-base-small .statistics-base-header-title {
+  color: var(--foreground);
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.statistics-base-small .statistics-base-header-icon {
+  font-size: 18px;
+}.statistics-change {
+  display: inline-flex;
+  align-items: baseline;
+  flex-flow: row nowrap;
+  gap: 6px;
+}
+.statistics-change.is-gray {
+  --color: var(--foreground-prominent);
+}
+.statistics-change.is-primary {
+  --color: var(--primary-600);
+}
+.statistics-change.is-danger {
+  --color: var(--danger-600);
+}
+.statistics-change.is-info {
+  --color: var(--info-600);
+}
+.statistics-change.is-success {
+  --color: var(--success-600);
+}
+.statistics-change.is-warning {
+  --color: var(--warning-600);
+}
+
+.statistics-change-icon {
+  color: var(--color);
+  font-size: 12px;
+  translate: 0 1px;
+}
+
+.statistics-change-value {
+  color: var(--color);
+  font-size: 12px;
+  font-weight: 500;
+}.statistics-chart-pane {
+  --aspect-ratio: unset;
+  max-width: 100%;
+  aspect-ratio: var(--aspect-ratio);
+}
+
+.statistics-chart-pane-body {
+  display: grid;
+  flex-grow: 1;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+.statistics-chart-pane-body:has(.statistics-legend) {
+  grid-template-columns: 1fr 1fr;
+}
+
+.statistics-chart-pane-container {
+  position: relative;
+  display: block;
+}
+.statistics-chart-pane-container:first-child svg {
+  border-top-left-radius: var(--radius);
+  border-top-right-radius: var(--radius);
+}
+.statistics-chart-pane-container:last-child svg {
+  border-bottom-left-radius: var(--radius);
+  border-bottom-right-radius: var(--radius);
+}
+
+.pane-header + .statistics-chart-pane-container {
+  margin-top: 21px;
+}.statistics-base-content .statistics-stackable + .statistics-stackable {
+  margin-top: 21px;
+}.details-table {
+  display: flex;
+  flex-flow: column;
+  gap: 6px;
+}
+
+.details-table-row {
+  display: flex;
+  margin: -3px -6px;
+  padding: 3px 6px;
+  color: var(--foreground-secondary);
+  font-size: 14px;
+  line-height: 24px;
+  border-radius: var(--radius-half);
+}
+@media (hover: hover) {
+  .details-table-row:hover {
+    background: var(--gray-50);
+  }
+}
+
+.details-table-row-label {
+  flex-grow: 1;
+  font-weight: 500;
+}
+
+.details-table-row-value {
+  text-align: right;
+}
+
+.details-table-rows {
+  display: flex;
+  flex-flow: column;
+  gap: 3px;
+}
+
+.details-table-title {
+  font-size: 15px;
+  font-weight: 600;
+}.statistics-grid {
+  --columns: 1;
+  --gap: 21px;
+  position: relative;
+  container: grid/inline-size;
+}
+
+.statistics-grid-content {
+  display: grid;
+  gap: var(--gap);
+  grid-template-columns: repeat(var(--columns), 1fr);
+}
+
+.statistics-grid-content {
+  --columns: var(--xl);
+}
+
+@container grid (max-width: 1279.98px) {
+  .statistics-grid-content {
+    --columns: var(--lg);
+  }
+}
+@container grid (max-width: 1023.98px) {
+  .statistics-grid-content {
+    --columns: var(--md);
+  }
+}
+@container grid (max-width: 767.98px) {
+  .statistics-grid-content {
+    --columns: var(--sm);
+  }
+}
+@container grid (max-width: 639.98px) {
+  .statistics-grid-content {
+    --columns: var(--xs);
+  }
+}.statistics-kpi-bottom {
+  margin-top: 3px;
+  line-height: 18px;
+}
+.statistics-kpi-bottom .statistics-change {
+  margin-right: 0.3em;
+}
+
+.statistics-kpi-footer {
+  color: var(--foreground-secondary);
+  font-size: 14px;
+}
+
+.statistics-kpi-value {
+  padding-top: 21px;
+  color: var(--foreground-prominent);
+  font-size: 21px;
+  font-weight: 800;
+  line-height: 36px;
+}.statistics-legend {
+  display: flex;
+  min-width: 0;
+  padding: 15px 21px 15px;
+  align-self: center;
+  flex-flow: column;
+  flex-grow: 1;
+  gap: 3px;
+}
+
+.statistics-legend-item {
+  --color: var(--primary-600);
+  display: flex;
+  padding: 6px 0;
+  align-items: flex-start;
+  flex-flow: row nowrap;
+  gap: 9px;
+  font-size: 14px;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.statistics-legend-item-color {
+  height: 12px;
+  width: 12px;
+  margin: 4px;
+  flex-shrink: 0;
+  background: var(--color);
+  border-radius: calc(var(--radius-half) / 2);
+}
+
+.statistics-legend-item-icon {
+  margin: 2px;
+  color: var(--color);
+}
+
+.statistics-legend-item-label {
+  flex-grow: 1;
+  color: var(--foreground);
+  font-weight: 600;
+}
+
+.statistics-legend-item-value {
+  margin-left: 15px;
+  text-align: right;
+}
+
+.statistics-legend-item + .statistics-legend-item {
+  border-top: 1px dashed var(--surface-stroke);
+}.statistics-meter {
+  --color: var(--primary-600);
+  --percentage: 0%;
+  display: flex;
+  flex-flow: column;
+  gap: 9px;
+}
+
+.statistics-meter-small {
+  align-self: center;
+}
+
+.statistics-meter-bar {
+  height: 6px;
+  background: var(--gray-100);
+  border-radius: var(--radius);
+}
+
+.statistics-meter-bar-value {
+  height: inherit;
+  width: var(--percentage);
+  background: var(--color);
+  border-radius: inherit;
+}
+
+.statistics-meter-footer {
+  color: var(--foreground-secondary);
+  font-size: 14px;
+}
+
+.statistics-meter-header {
+  display: grid;
+  gap: 6px 12px;
+  grid-template-areas: "title value" "sub-title tip";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  line-height: 18px;
+  vertical-align: middle;
+}
+.statistics-meter-header:has(> .statistics-meter-header-icon) {
+  grid-template-areas: "icon title value" "icon sub-title tip";
+  grid-template-columns: auto 1fr auto;
+}
+
+.statistics-meter-header-icon {
+  margin-top: 1px;
+  grid-area: icon;
+  color: var(--color);
+}
+
+.statistics-meter-header-title {
+  grid-area: title;
+  color: var(--foreground);
+  font-weight: 700;
+}
+
+.statistics-meter-header-sub-title {
+  grid-area: sub-title;
+  color: var(--foreground);
+  font-size: 14px;
+}
+
+.statistics-meter-header-value {
+  grid-area: value;
+  justify-self: end;
+  color: var(--foreground-prominent);
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.statistics-meter-header-tip {
+  grid-area: tip;
+  justify-self: end;
+  color: var(--foreground-secondary);
+  font-size: 13px;
+}
+
+.statistics-meter-small .statistics-meter-header {
+  grid-template-areas: "value tip";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto;
+}
+
+.statistics-meter-small .statistics-meter-header-value {
+  justify-self: unset;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.table-cell .statistics-meter-small {
+  width: 180px;
+}.statistics-metric-bottom {
+  margin-top: 3px;
+  line-height: 24px;
+}
+.statistics-metric-bottom .statistics-change {
+  margin-right: 0.3em;
+}
+.statistics-metric-bottom .statistics-change-icon,
+.statistics-metric-bottom .statistics-change-value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.statistics-metric-content {
+  display: flex;
+  flex-flow: column;
+}
+.statistics-metric-content small {
+  color: var(--foreground-secondary);
+  font-size: 14px;
+  font-weight: 500;
+}
+.statistics-metric-content span {
+  color: var(--foreground);
+  font-size: 18px;
+  font-weight: 600;
+}
+.statistics-metric-content strong {
+  color: var(--foreground-prominent);
+  font-size: 21px;
+  font-weight: 800;
+  line-height: 36px;
+}
+.statistics-metric-content small:not(:first-child) {
+  margin-top: 15px;
+}
+
+.statistics-metric-footer {
+  color: var(--foreground-secondary);
+  font-size: 14px;
+}
+
+.statistics-metric-label {
+  padding-top: 21px;
+  color: var(--foreground-secondary);
+  font-size: 15px;
+  font-weight: 500;
+}
+
+.statistics-metric-value {
+  color: var(--foreground-prominent);
+  font-size: 21px;
+  font-weight: 800;
+  line-height: 36px;
+  text-transform: capitalize;
+}
+
+.statistics-metric-content + .statistics-metric-bottom {
+  margin-top: 9px;
+}/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './component';
+export declare const CHART_COLORS: string[];
+export declare const CHART_COLORFUL_COLORS: string[];