@xenide-io/the-old-ui-theme 0.9.7 → 0.9.8

package/dist/{chunk-2EO5VCXP.mjs → chunk-6SVJAU5K.mjs}

@@ -3742,6 +3742,166 @@ var Chip = forwardRef11(function Chip2(_a, ref) {
 });
 Chip.displayName = "Chip";
 
+// src/lib/chart/use-ph-chart-tokens.ts
+import { useEffect as useEffect5, useState as useState10 } from "react";
+var DEFAULT_TOKENS = {
+  series: ["#1d4aff", "#621da6", "#42827e", "#ce0e74", "#f14f58", "#529a0a", "#fe729e"],
+  muted: "hsl(220 9% 90%)",
+  surface: "#ffffff",
+  textMuted: "hsl(220 9% 46%)",
+  grid: "hsl(220 13% 91%)",
+  borderStrong: "hsl(220 13% 80%)"
+};
+function readTokens() {
+  if (typeof document === "undefined") return DEFAULT_TOKENS;
+  const style = getComputedStyle(document.documentElement);
+  const read = (key, fallback) => style.getPropertyValue(key).trim() || fallback;
+  return {
+    series: [
+      read("--ph-data-1", DEFAULT_TOKENS.series[0]),
+      read("--ph-data-2", DEFAULT_TOKENS.series[1]),
+      read("--ph-data-3", DEFAULT_TOKENS.series[2]),
+      read("--ph-data-4", DEFAULT_TOKENS.series[3]),
+      read("--ph-data-5", DEFAULT_TOKENS.series[4]),
+      read("--ph-data-6", DEFAULT_TOKENS.series[5]),
+      read("--ph-data-7", DEFAULT_TOKENS.series[6])
+    ],
+    muted: read("--ph-muted", DEFAULT_TOKENS.muted),
+    surface: read("--ph-surface", DEFAULT_TOKENS.surface),
+    textMuted: read("--ph-mutedtext", DEFAULT_TOKENS.textMuted),
+    grid: read("--ph-border", DEFAULT_TOKENS.grid),
+    borderStrong: read("--ph-border-strong", DEFAULT_TOKENS.borderStrong)
+  };
+}
+function useChartTokens() {
+  const [tokens, setTokens] = useState10(DEFAULT_TOKENS);
+  useEffect5(() => {
+    setTokens(readTokens());
+  }, []);
+  return tokens;
+}
+
+// src/components/ui/Charts.tsx
+import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
+function percent(value, total) {
+  return total > 0 ? Math.round(value / total * 100) : 0;
+}
+function EmptyChart() {
+  return /* @__PURE__ */ jsx42("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
+}
+function sliceColour(slice, index, series) {
+  var _a;
+  return (_a = slice.colour) != null ? _a : series[index % series.length];
+}
+function DonutChart({ slices, label, formatValue, className }) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return /* @__PURE__ */ jsx42(EmptyChart, {});
+  const stops = visible.map((slice, index) => {
+    const colour = sliceColour(slice, index, series);
+    const before = visible.slice(0, index).reduce((sum, item) => sum + item.value, 0);
+    const start = before / total * 360;
+    const end = (before + slice.value) / total * 360;
+    return `${colour} ${start}deg ${end}deg`;
+  }).join(", ");
+  return /* @__PURE__ */ jsxs36("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
+    /* @__PURE__ */ jsx42(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        className: "relative h-36 w-36 shrink-0 rounded-full",
+        style: { background: `conic-gradient(${stops})` },
+        children: /* @__PURE__ */ jsx42(
+          "span",
+          {
+            className: "absolute inset-[22%] rounded-full bg-ph-surface ring-1 ring-ph-border",
+            "aria-hidden": true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx42("ul", { className: "min-w-0 w-full flex-1 space-y-2", children: visible.map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      return /* @__PURE__ */ jsxs36("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsxs36("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ jsx42("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ jsx42("span", { className: "truncate", children: slice.label })
+        ] }),
+        /* @__PURE__ */ jsx42("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+      ] }, slice.label);
+    }) })
+  ] });
+}
+function BarChart({ items, formatValue, className }) {
+  const { series } = useChartTokens();
+  const visible = items.filter((item) => item.value > 0);
+  const max = Math.max(...visible.map((item) => item.value), 1);
+  if (!visible.length) return /* @__PURE__ */ jsx42(EmptyChart, {});
+  return /* @__PURE__ */ jsx42("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
+    const colour = sliceColour(item, index, series);
+    return /* @__PURE__ */ jsxs36("li", { children: [
+      /* @__PURE__ */ jsxs36("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsx42("span", { className: "truncate text-ph-subtle", children: item.label }),
+        /* @__PURE__ */ jsx42("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
+      ] }),
+      /* @__PURE__ */ jsx42("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ jsx42(
+        "div",
+        {
+          className: "h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none",
+          style: {
+            width: `${Math.max(item.value / max * 100, 2)}%`,
+            background: colour
+          }
+        }
+      ) })
+    ] }, item.label);
+  }) });
+}
+function StackedBarChart({
+  slices,
+  label,
+  formatValue,
+  className
+}) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return /* @__PURE__ */ jsx42(EmptyChart, {});
+  return /* @__PURE__ */ jsxs36("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsx42(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        className: "flex h-3 overflow-hidden rounded-full bg-ph-muted ring-1 ring-ph-border",
+        children: visible.map((slice, index) => /* @__PURE__ */ jsx42(
+          "span",
+          {
+            className: "h-full",
+            style: {
+              width: `${Math.max(slice.value / total * 100, 2)}%`,
+              background: sliceColour(slice, index, series)
+            }
+          },
+          slice.label
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsx42("ul", { className: "space-y-2", children: visible.map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      return /* @__PURE__ */ jsxs36("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ jsxs36("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ jsx42("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ jsx42("span", { className: "truncate", children: slice.label })
+        ] }),
+        /* @__PURE__ */ jsx42("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+      ] }, slice.label);
+    }) })
+  ] });
+}
+
 export {
   ButtonChrome,
   cn,
@@ -3908,5 +4068,9 @@ export {
   Link,
   Spinner,
   Dot,
-  Chip
+  Chip,
+  useChartTokens,
+  DonutChart,
+  BarChart,
+  StackedBarChart
 };

package/dist/index.mjs

@@ -158,7 +158,7 @@ import {
   isThemeId,
   persistTheme,
   readStoredTheme
-} from "./chunk-2EO5VCXP.mjs";
+} from "./chunk-6SVJAU5K.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,

package/dist/suite.mjs

@@ -12,7 +12,7 @@ import {
   Toggle,
   Tooltip,
   cn
-} from "./chunk-2EO5VCXP.mjs";
+} from "./chunk-6SVJAU5K.mjs";
 import {
   SUITE_THEME_CHANNEL,
   SUITE_THEME_COOKIE,

package/dist/ui.d.mts

@@ -55,4 +55,40 @@ interface CollapsibleSectionProps {
 }
 declare function CollapsibleSection({ title, children, defaultOpen, id, }: CollapsibleSectionProps): react.JSX.Element;
 
-export { CodeBlock, CollapsibleSection, type CollapsibleSectionProps, ComponentDocs, type ComponentDocsProps, type ComponentPropRow, FilterBarProps, FilterChipsProps, FilterControls, type FilterControlsProps, ShowcaseWrapper };
+interface ChartTokens {
+    series: string[];
+    muted: string;
+    surface: string;
+    textMuted: string;
+    grid: string;
+    borderStrong: string;
+}
+declare function useChartTokens(): ChartTokens;
+
+interface ChartSlice {
+    label: string;
+    value: number;
+    colour?: string;
+}
+interface DonutChartProps {
+    slices: readonly ChartSlice[];
+    label: string;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+interface BarChartProps {
+    items: readonly ChartSlice[];
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+interface StackedBarChartProps {
+    slices: readonly ChartSlice[];
+    label: string;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+declare function DonutChart({ slices, label, formatValue, className }: DonutChartProps): react.JSX.Element;
+declare function BarChart({ items, formatValue, className }: BarChartProps): react.JSX.Element;
+declare function StackedBarChart({ slices, label, formatValue, className, }: StackedBarChartProps): react.JSX.Element;
+
+export { BarChart, type BarChartProps, type ChartSlice, type ChartTokens, CodeBlock, CollapsibleSection, type CollapsibleSectionProps, ComponentDocs, type ComponentDocsProps, type ComponentPropRow, DonutChart, type DonutChartProps, FilterBarProps, FilterChipsProps, FilterControls, type FilterControlsProps, ShowcaseWrapper, StackedBarChart, type StackedBarChartProps, useChartTokens };

package/dist/ui.d.ts

@@ -55,4 +55,40 @@ interface CollapsibleSectionProps {
 }
 declare function CollapsibleSection({ title, children, defaultOpen, id, }: CollapsibleSectionProps): react.JSX.Element;
 
-export { CodeBlock, CollapsibleSection, type CollapsibleSectionProps, ComponentDocs, type ComponentDocsProps, type ComponentPropRow, FilterBarProps, FilterChipsProps, FilterControls, type FilterControlsProps, ShowcaseWrapper };
+interface ChartTokens {
+    series: string[];
+    muted: string;
+    surface: string;
+    textMuted: string;
+    grid: string;
+    borderStrong: string;
+}
+declare function useChartTokens(): ChartTokens;
+
+interface ChartSlice {
+    label: string;
+    value: number;
+    colour?: string;
+}
+interface DonutChartProps {
+    slices: readonly ChartSlice[];
+    label: string;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+interface BarChartProps {
+    items: readonly ChartSlice[];
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+interface StackedBarChartProps {
+    slices: readonly ChartSlice[];
+    label: string;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+declare function DonutChart({ slices, label, formatValue, className }: DonutChartProps): react.JSX.Element;
+declare function BarChart({ items, formatValue, className }: BarChartProps): react.JSX.Element;
+declare function StackedBarChart({ slices, label, formatValue, className, }: StackedBarChartProps): react.JSX.Element;
+
+export { BarChart, type BarChartProps, type ChartSlice, type ChartTokens, CodeBlock, CollapsibleSection, type CollapsibleSectionProps, ComponentDocs, type ComponentDocsProps, type ComponentPropRow, DonutChart, type DonutChartProps, FilterBarProps, FilterChipsProps, FilterControls, type FilterControlsProps, ShowcaseWrapper, StackedBarChart, type StackedBarChartProps, useChartTokens };

package/dist/ui.js

@@ -68,6 +68,7 @@ __export(ui_exports, {
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
+  BarChart: () => BarChart,
   Button: () => Button,
   ButtonChrome: () => ButtonChrome,
   Calendar: () => Calendar,
@@ -80,6 +81,7 @@ __export(ui_exports, {
   CommandPalette: () => CommandPalette,
   ComponentDocs: () => ComponentDocs,
   Display: () => Display,
+  DonutChart: () => DonutChart,
   Dot: () => Dot,
   DropdownButton: () => DropdownButton,
   DropdownItem: () => DropdownItem,
@@ -127,6 +129,7 @@ __export(ui_exports, {
   Small: () => Small,
   SortMenu: () => SortMenu,
   Spinner: () => Spinner,
+  StackedBarChart: () => StackedBarChart,
   Stat: () => Stat,
   Table: () => Table,
   Textarea: () => Textarea,
@@ -134,7 +137,8 @@ __export(ui_exports, {
   ThemeSwitcher: () => ThemeSwitcher,
   Toggle: () => Toggle,
   Tooltip: () => Tooltip,
-  TooltipProvider: () => TooltipProvider
+  TooltipProvider: () => TooltipProvider,
+  useChartTokens: () => useChartTokens
 });
 module.exports = __toCommonJS(ui_exports);
 
@@ -3847,6 +3851,166 @@ var Chip = (0, import_react25.forwardRef)(function Chip2(_a, ref) {
   );
 });
 Chip.displayName = "Chip";
+
+// src/lib/chart/use-ph-chart-tokens.ts
+var import_react26 = require("react");
+var DEFAULT_TOKENS = {
+  series: ["#1d4aff", "#621da6", "#42827e", "#ce0e74", "#f14f58", "#529a0a", "#fe729e"],
+  muted: "hsl(220 9% 90%)",
+  surface: "#ffffff",
+  textMuted: "hsl(220 9% 46%)",
+  grid: "hsl(220 13% 91%)",
+  borderStrong: "hsl(220 13% 80%)"
+};
+function readTokens() {
+  if (typeof document === "undefined") return DEFAULT_TOKENS;
+  const style = getComputedStyle(document.documentElement);
+  const read = (key, fallback) => style.getPropertyValue(key).trim() || fallback;
+  return {
+    series: [
+      read("--ph-data-1", DEFAULT_TOKENS.series[0]),
+      read("--ph-data-2", DEFAULT_TOKENS.series[1]),
+      read("--ph-data-3", DEFAULT_TOKENS.series[2]),
+      read("--ph-data-4", DEFAULT_TOKENS.series[3]),
+      read("--ph-data-5", DEFAULT_TOKENS.series[4]),
+      read("--ph-data-6", DEFAULT_TOKENS.series[5]),
+      read("--ph-data-7", DEFAULT_TOKENS.series[6])
+    ],
+    muted: read("--ph-muted", DEFAULT_TOKENS.muted),
+    surface: read("--ph-surface", DEFAULT_TOKENS.surface),
+    textMuted: read("--ph-mutedtext", DEFAULT_TOKENS.textMuted),
+    grid: read("--ph-border", DEFAULT_TOKENS.grid),
+    borderStrong: read("--ph-border-strong", DEFAULT_TOKENS.borderStrong)
+  };
+}
+function useChartTokens() {
+  const [tokens, setTokens] = (0, import_react26.useState)(DEFAULT_TOKENS);
+  (0, import_react26.useEffect)(() => {
+    setTokens(readTokens());
+  }, []);
+  return tokens;
+}
+
+// src/components/ui/Charts.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function percent(value, total) {
+  return total > 0 ? Math.round(value / total * 100) : 0;
+}
+function EmptyChart() {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm text-ph-subtle", children: "No data for this period." });
+}
+function sliceColour(slice, index, series) {
+  var _a;
+  return (_a = slice.colour) != null ? _a : series[index % series.length];
+}
+function DonutChart({ slices, label, formatValue, className }) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptyChart, {});
+  const stops = visible.map((slice, index) => {
+    const colour = sliceColour(slice, index, series);
+    const before = visible.slice(0, index).reduce((sum, item) => sum + item.value, 0);
+    const start = before / total * 360;
+    const end = (before + slice.value) / total * 360;
+    return `${colour} ${start}deg ${end}deg`;
+  }).join(", ");
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        className: "relative h-36 w-36 shrink-0 rounded-full",
+        style: { background: `conic-gradient(${stops})` },
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "span",
+          {
+            className: "absolute inset-[22%] rounded-full bg-ph-surface ring-1 ring-ph-border",
+            "aria-hidden": true
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "min-w-0 w-full flex-1 space-y-2", children: visible.map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate", children: slice.label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+      ] }, slice.label);
+    }) })
+  ] });
+}
+function BarChart({ items, formatValue, className }) {
+  const { series } = useChartTokens();
+  const visible = items.filter((item) => item.value > 0);
+  const max = Math.max(...visible.map((item) => item.value), 1);
+  if (!visible.length) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptyChart, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: cn("space-y-3", className), children: visible.map((item, index) => {
+    const colour = sliceColour(item, index, series);
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mb-1 flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate text-ph-subtle", children: item.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU") })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "div",
+        {
+          className: "h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none",
+          style: {
+            width: `${Math.max(item.value / max * 100, 2)}%`,
+            background: colour
+          }
+        }
+      ) })
+    ] }, item.label);
+  }) });
+}
+function StackedBarChart({
+  slices,
+  label,
+  formatValue,
+  className
+}) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EmptyChart, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        role: "img",
+        "aria-label": label,
+        className: "flex h-3 overflow-hidden rounded-full bg-ph-muted ring-1 ring-ph-border",
+        children: visible.map((slice, index) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "span",
+          {
+            className: "h-full",
+            style: {
+              width: `${Math.max(slice.value / total * 100, 2)}%`,
+              background: sliceColour(slice, index, series)
+            }
+          },
+          slice.label
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "space-y-2", children: visible.map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "flex items-center justify-between gap-3 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "flex min-w-0 items-center gap-2 text-ph-subtle", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { background: colour } }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "truncate", children: slice.label })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "shrink-0 tabular-nums text-ph-ink", children: formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%` })
+      ] }, slice.label);
+    }) })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -3857,6 +4021,7 @@ Chip.displayName = "Chip";
   Avatar,
   AvatarGroup,
   Badge,
+  BarChart,
   Button,
   ButtonChrome,
   Calendar,
@@ -3869,6 +4034,7 @@ Chip.displayName = "Chip";
   CommandPalette,
   ComponentDocs,
   Display,
+  DonutChart,
   Dot,
   DropdownButton,
   DropdownItem,
@@ -3916,6 +4082,7 @@ Chip.displayName = "Chip";
   Small,
   SortMenu,
   Spinner,
+  StackedBarChart,
   Stat,
   Table,
   Textarea,
@@ -3923,5 +4090,6 @@ Chip.displayName = "Chip";
   ThemeSwitcher,
   Toggle,
   Tooltip,
-  TooltipProvider
+  TooltipProvider,
+  useChartTokens
 });

package/dist/ui.mjs

@@ -8,6 +8,7 @@ import {
   Avatar,
   AvatarGroup,
   Badge,
+  BarChart,
   Button,
   ButtonChrome,
   Calendar,
@@ -20,6 +21,7 @@ import {
   CommandPalette,
   ComponentDocs,
   Display,
+  DonutChart,
   Dot,
   DropdownButton,
   DropdownItem,
@@ -67,6 +69,7 @@ import {
   Small,
   SortMenu,
   Spinner,
+  StackedBarChart,
   Stat,
   Table,
   Textarea,
@@ -74,8 +77,9 @@ import {
   ThemeSwitcher,
   Toggle,
   Tooltip,
-  TooltipProvider
-} from "./chunk-2EO5VCXP.mjs";
+  TooltipProvider,
+  useChartTokens
+} from "./chunk-6SVJAU5K.mjs";
 import "./chunk-FWCSY2DS.mjs";
 export {
   Accordion,
@@ -86,6 +90,7 @@ export {
   Avatar,
   AvatarGroup,
   Badge,
+  BarChart,
   Button,
   ButtonChrome,
   Calendar,
@@ -98,6 +103,7 @@ export {
   CommandPalette,
   ComponentDocs,
   Display,
+  DonutChart,
   Dot,
   DropdownButton,
   DropdownItem,
@@ -145,6 +151,7 @@ export {
   Small,
   SortMenu,
   Spinner,
+  StackedBarChart,
   Stat,
   Table,
   Textarea,
@@ -152,5 +159,6 @@ export {
   ThemeSwitcher,
   Toggle,
   Tooltip,
-  TooltipProvider
+  TooltipProvider,
+  useChartTokens
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xenide-io/the-old-ui-theme",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
   "author": "Xenide",
   "license": "MIT",

package/src/components/ui/Charts.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { useChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+import { cn } from "@/lib/cn";
+
+export { useChartTokens, type ChartTokens } from "@/lib/chart/use-ph-chart-tokens";
+
+export interface ChartSlice {
+  label: string;
+  value: number;
+  colour?: string;
+}
+
+export interface DonutChartProps {
+  slices: readonly ChartSlice[];
+  label: string;
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+
+export interface BarChartProps {
+  items: readonly ChartSlice[];
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+
+export interface StackedBarChartProps {
+  slices: readonly ChartSlice[];
+  label: string;
+  formatValue?: (value: number) => string;
+  className?: string;
+}
+
+function percent(value: number, total: number): number {
+  return total > 0 ? Math.round((value / total) * 100) : 0;
+}
+
+function EmptyChart() {
+  return <p className="text-sm text-ph-subtle">No data for this period.</p>;
+}
+
+function sliceColour(slice: ChartSlice, index: number, series: string[]): string {
+  return slice.colour ?? series[index % series.length];
+}
+
+export function DonutChart({ slices, label, formatValue, className }: DonutChartProps) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return <EmptyChart />;
+
+  const stops = visible
+    .map((slice, index) => {
+      const colour = sliceColour(slice, index, series);
+      const before = visible
+        .slice(0, index)
+        .reduce((sum, item) => sum + item.value, 0);
+      const start = (before / total) * 360;
+      const end = ((before + slice.value) / total) * 360;
+      return `${colour} ${start}deg ${end}deg`;
+    })
+    .join(", ");
+
+  return (
+    <div className={cn("flex flex-col items-center gap-4 sm:flex-row sm:items-center", className)}>
+      <div
+        role="img"
+        aria-label={label}
+        className="relative h-36 w-36 shrink-0 rounded-full"
+        style={{ background: `conic-gradient(${stops})` }}
+      >
+        <span
+          className="absolute inset-[22%] rounded-full bg-ph-surface ring-1 ring-ph-border"
+          aria-hidden
+        />
+      </div>
+      <ul className="min-w-0 w-full flex-1 space-y-2">
+        {visible.map((slice, index) => {
+          const colour = sliceColour(slice, index, series);
+          return (
+            <li key={slice.label} className="flex items-center justify-between gap-3 text-sm">
+              <span className="flex min-w-0 items-center gap-2 text-ph-subtle">
+                <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: colour }} />
+                <span className="truncate">{slice.label}</span>
+              </span>
+              <span className="shrink-0 tabular-nums text-ph-ink">
+                {formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%`}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export function BarChart({ items, formatValue, className }: BarChartProps) {
+  const { series } = useChartTokens();
+  const visible = items.filter((item) => item.value > 0);
+  const max = Math.max(...visible.map((item) => item.value), 1);
+  if (!visible.length) return <EmptyChart />;
+
+  return (
+    <ul className={cn("space-y-3", className)}>
+      {visible.map((item, index) => {
+        const colour = sliceColour(item, index, series);
+        return (
+          <li key={item.label}>
+            <div className="mb-1 flex items-center justify-between gap-3 text-sm">
+              <span className="truncate text-ph-subtle">{item.label}</span>
+              <span className="shrink-0 tabular-nums text-ph-ink">
+                {formatValue ? formatValue(item.value) : item.value.toLocaleString("en-AU")}
+              </span>
+            </div>
+            <div className="h-2.5 rounded-full bg-ph-muted ring-1 ring-ph-border">
+              <div
+                className="h-full rounded-full transition-[width] duration-300 ease-out motion-reduce:transition-none"
+                style={{
+                  width: `${Math.max((item.value / max) * 100, 2)}%`,
+                  background: colour,
+                }}
+              />
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export function StackedBarChart({
+  slices,
+  label,
+  formatValue,
+  className,
+}: StackedBarChartProps) {
+  const { series } = useChartTokens();
+  const visible = slices.filter((slice) => slice.value > 0);
+  const total = visible.reduce((sum, slice) => sum + slice.value, 0);
+  if (total <= 0) return <EmptyChart />;
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div
+        role="img"
+        aria-label={label}
+        className="flex h-3 overflow-hidden rounded-full bg-ph-muted ring-1 ring-ph-border"
+      >
+        {visible.map((slice, index) => (
+          <span
+            key={slice.label}
+            className="h-full"
+            style={{
+              width: `${Math.max((slice.value / total) * 100, 2)}%`,
+              background: sliceColour(slice, index, series),
+            }}
+          />
+        ))}
+      </div>
+      <ul className="space-y-2">
+        {visible.map((slice, index) => {
+          const colour = sliceColour(slice, index, series);
+          return (
+            <li key={slice.label} className="flex items-center justify-between gap-3 text-sm">
+              <span className="flex min-w-0 items-center gap-2 text-ph-subtle">
+                <span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: colour }} />
+                <span className="truncate">{slice.label}</span>
+              </span>
+              <span className="shrink-0 tabular-nums text-ph-ink">
+                {formatValue ? formatValue(slice.value) : `${percent(slice.value, total)}%`}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/components/ui/charts.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { BarChart, DonutChart, StackedBarChart } from "./Charts";
+
+const slices = [
+  { label: "Tides", value: 40 },
+  { label: "TurtleTime", value: 60 },
+];
+
+describe("Charts", () => {
+  it("renders a labelled donut and a bar for each slice", () => {
+    render(<DonutChart label="Time by source" slices={slices} />);
+    expect(screen.getByRole("img", { name: "Time by source" })).toBeInTheDocument();
+    expect(screen.getByText("Tides")).toBeInTheDocument();
+    expect(screen.getByText("40%")).toBeInTheDocument();
+  });
+
+  it("renders bars with formatted values", () => {
+    render(<BarChart items={slices} formatValue={(value) => `${value}h`} />);
+    expect(screen.getByText("60h")).toBeInTheDocument();
+  });
+
+  it("renders a stacked mix and an empty state", () => {
+    const { rerender } = render(<StackedBarChart label="Work mix" slices={slices} />);
+    expect(screen.getByRole("img", { name: "Work mix" })).toBeInTheDocument();
+    rerender(<StackedBarChart label="Work mix" slices={[{ label: "None", value: 0 }]} />);
+    expect(screen.getByText("No data for this period.")).toBeInTheDocument();
+  });
+});

package/src/components/ui/index.ts

@@ -264,3 +264,14 @@ export {
   Chip as Chip,
   type ChipProps as ChipProps,
 } from "@/components/ui/Chip";
+export {
+  BarChart as BarChart,
+  DonutChart as DonutChart,
+  StackedBarChart as StackedBarChart,
+  useChartTokens as useChartTokens,
+  type BarChartProps as BarChartProps,
+  type ChartSlice as ChartSlice,
+  type ChartTokens as ChartTokens,
+  type DonutChartProps as DonutChartProps,
+  type StackedBarChartProps as StackedBarChartProps,
+} from "@/components/ui/Charts";