@kubex/zinc 1.1.185 → 2.0.0

package/src/utilities/color.ts

@@ -0,0 +1,189 @@
+export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch';
+
+/** Red, green and blue, each 0-255. */
+export type Rgb = [number, number, number];
+
+/** Hue 0-360, saturation and value 0-1. */
+export type Hsv = [number, number, number];
+
+const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
+const round1 = (n: number) => Math.round(n * 10) / 10;
+const round3 = (n: number) => Math.round(n * 1000) / 1000;
+const hexPair = (n: number) => Math.round(n).toString(16).padStart(2, '0').toUpperCase();
+
+export function hsvToRgb(h: number, s: number, v: number): Rgb {
+  const f = (n: number) => {
+    const k = (n + h / 60) % 6;
+    return v - v * s * Math.max(0, Math.min(k, 4 - k, 1));
+  };
+  return [Math.round(f(5) * 255), Math.round(f(3) * 255), Math.round(f(1) * 255)];
+}
+
+export function rgbToHsv(r: number, g: number, b: number): Hsv {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const d = max - Math.min(r, g, b);
+  let h = 0;
+  if (d) {
+    h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return [h, max ? d / max : 0, max];
+}
+
+/** Rounded to whole degrees and percentages. */
+export function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  const l = (max + min) / 2;
+  const s = d ? d / (1 - Math.abs(2 * l - 1)) : 0;
+  let h = 0;
+  if (d) {
+    h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
+}
+
+/** Saturation and lightness are percentages. */
+export function hslToRgb(h: number, s: number, l: number): Rgb {
+  s /= 100;
+  l /= 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => {
+    const k = (n + h / 30) % 12;
+    return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+  };
+  return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
+}
+
+const toLinear = (c: number) => {
+  c /= 255;
+  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+};
+
+const toGamma = (c: number) => {
+  c = clamp(c, 0, 1);
+  return Math.round(255 * (c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055));
+};
+
+/** Lightness 0-1, chroma (about 0-0.4), hue in degrees. */
+export function rgbToOklch(r: number, g: number, b: number): [number, number, number] {
+  r = toLinear(r);
+  g = toLinear(g);
+  b = toLinear(b);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const C = Math.sqrt(A * A + B * B);
+  let H = C < 0.0004 ? 0 : Math.atan2(B, A) * 180 / Math.PI;
+  if (H < 0) H += 360;
+  return [L, C, H];
+}
+
+/** Colours outside sRGB are clamped into it. */
+export function oklchToRgb(L: number, C: number, H: number): Rgb {
+  const A = C * Math.cos(H * Math.PI / 180);
+  const B = C * Math.sin(H * Math.PI / 180);
+  const l = Math.pow(L + 0.3963377774 * A + 0.2158037573 * B, 3);
+  const m = Math.pow(L - 0.1055613458 * A - 0.0638541728 * B, 3);
+  const s = Math.pow(L - 0.0894841775 * A - 1.291485548 * B, 3);
+  return [
+    toGamma(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+    toGamma(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+    toGamma(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s)
+  ];
+}
+
+/** OKLCH as shown to people: lightness as a percentage to 1dp, chroma to 3dp, hue to 1dp. */
+export function oklchParts(rgb: Rgb): [number, number, number] {
+  const [l, c, h] = rgbToOklch(...rgb);
+  return [round1(l * 100), round3(c), round1(h)];
+}
+
+export const toHex = (rgb: Rgb) => `#${hexPair(rgb[0])}${hexPair(rgb[1])}${hexPair(rgb[2])}`;
+
+/** The format a colour is written in, or null for a name, a token or anything that isn't a colour. */
+export function detectColorFormat(value: string): ColorFormat | null {
+  const str = String(value ?? '').trim();
+  // A bare run of digits such as "123456" is ambiguous; only treat it as hex when it can't be anything else.
+  if (/^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(str) && (str.startsWith('#') || /[a-f]/i.test(str) || str.length === 6)) {
+    return 'hex';
+  }
+  if (/^oklch\(/i.test(str)) return 'oklch';
+  if (/^hsla?\(/i.test(str)) return 'hsl';
+  if (/^(rgba?\(|\d{1,3}\s*[, ]\s*\d{1,3}\s*[, ]\s*\d{1,3}$)/i.test(str)) return 'rgb';
+  return null;
+}
+
+let probe: HTMLSpanElement | null = null;
+
+/** Any CSS colour (hex, rgb(), hsl(), oklch(), a name or var(--token)) as RGB, or null when it isn't one. */
+export function parseColor(value: string): Rgb | null {
+  const str = String(value ?? '').trim();
+  if (!str) return null;
+
+  let m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(str);
+  if (m) {
+    const hex = m[1].length === 3 ? m[1].replace(/./g, '$&$&') : m[1];
+    return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)];
+  }
+
+  m = /^(?:rgb\()?\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*\)?$/i.exec(str);
+  if (m && +m[1] < 256 && +m[2] < 256 && +m[3] < 256) return [+m[1], +m[2], +m[3]];
+
+  m = /^hsl\(\s*(\d{1,3})(?:deg)?\s*[, ]\s*(\d{1,3})%?\s*[, ]\s*(\d{1,3})%?\s*\)$/i.exec(str);
+  if (m && +m[1] <= 360 && +m[2] <= 100 && +m[3] <= 100) return hslToRgb(+m[1] % 360, +m[2], +m[3]);
+
+  m = /^oklch\(\s*([\d.]+)(%?)\s*[, ]\s*([\d.]+)(%?)\s*[, ]\s*([\d.]+)(?:deg)?\s*(?:\/\s*[\d.]+%?\s*)?\)$/i.exec(str);
+  if (m) {
+    const l = +m[1] / (m[2] ? 100 : 1);
+    const c = +m[3] * (m[4] ? 0.004 : 1);
+    const h = +m[5];
+    if (isNaN(l + c + h) || l > 1 || c > 0.5 || h > 360) return null;
+    return oklchToRgb(l, c, h % 360);
+  }
+
+  if (!/^[a-z-]+$|^var\(|^(rgb|hsl)a?\(/i.test(str) || typeof document === 'undefined') return null;
+
+  // Let the browser resolve names, tokens and other CSS syntax.
+  if (!probe) {
+    probe = document.createElement('span');
+    probe.style.display = 'none';
+    document.body.appendChild(probe);
+  }
+  probe.style.color = '';
+  probe.style.color = str;
+  if (!probe.style.color) return null;
+  const k = /rgba?\(\s*(\d+)[, ]+(\d+)[, ]+(\d+)/.exec(getComputedStyle(probe).color);
+  return k ? [+k[1], +k[2], +k[3]] : null;
+}
+
+/** Writes a colour out in the given format, e.g. `#085EFD`, `rgb(8, 94, 253)`, `hsl(219, 98%, 51%)` or `oklch(58.4% 0.226 262.5)`. */
+export function formatColor(rgb: Rgb, format: ColorFormat): string {
+  switch (format) {
+    case 'rgb':
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    case 'hsl': {
+      const [h, s, l] = rgbToHsl(...rgb);
+      return `hsl(${h}, ${s}%, ${l}%)`;
+    }
+    case 'oklch': {
+      const [l, c, h] = oklchParts(rgb);
+      return `oklch(${l}% ${c} ${h})`;
+    }
+    default:
+      return toHex(rgb);
+  }
+}

package/src/zinc.ts

@@ -13,12 +13,14 @@ export { default as Chip } from './components/chip';
 export { default as Well } from './components/well';
 export { default as CopyButton } from './components/copy-button';
 export { default as DataTable } from './components/data-table';
+export { default as ReportTable } from './components/report-table';
 export { default as Cols } from './components/cols';
 export { default as Confirm } from './components/confirm';
 export { default as Dialog } from './components/dialog';
 export { default as Dropdown } from './components/dropdown';
 export { default as Menu } from './components/menu';
 export { default as MenuItem } from './components/menu-item';
+export { default as MenuLabel } from './components/menu-label';
 export { default as DefinedLabel } from './components/defined-label';
 export { default as EmptyState } from './components/empty-state';
 export { default as Note } from './components/note';
@@ -36,6 +38,8 @@ export { default as IconPicker } from './components/icon-picker';
 export { default as InlineEdit } from './components/inline-edit';
 export { default as Pagination } from './components/pagination';
 export { default as VerticalStepper } from './components/vertical-stepper';
+export { default as Diff } from './components/diff';
+export { default as DiffRow } from './components/diff-row';
 export { default as Timer } from './components/timer';
 export { default as Tabs } from './components/tabs';
 export { default as Panel } from './components/panel';
@@ -63,6 +67,7 @@ export { default as Option } from './components/option';
 export { default as Textarea } from './components/textarea';
 export { default as Checkbox } from './components/checkbox';
 export { default as Datepicker } from './components/datepicker';
+export { default as DateRange } from './components/date-range';
 export { default as FormActions } from './components/form-actions';
 export { default as FormGroup } from './components/form-group';
 export { default as InputGroup } from './components/input-group';
@@ -99,6 +104,9 @@ export { default as Key } from './components/key';
 export { default as KeyContainer } from './components/key-container';
 export { default as AnimatedButton } from './components/animated-button';
 export { default as TranslationGroup } from './components/translation-group';
+export { default as TranslationGrid } from './components/translation-grid';
+export { default as TranslationField } from './components/translation-field';
+export { default as TranslationFields } from './components/translation-fields';
 export { default as OptGroup } from './components/opt-group';
 export { default as PriorityList } from './components/priority-list';
 export { default as MarkdownEditor } from './components/markdown-editor';
@@ -119,6 +127,12 @@ export { default as ScheduleBuilder } from './components/schedule-builder';
 export { default as Thumbnail } from './components/thumbnail';
 export { default as ThumbnailGroup } from './components/thumbnail-group';
 export { default as Background } from './components/background';
+export { default as NavList } from './components/nav-list';
+export { default as NavItem } from './components/nav-item';
+export { default as AvatarGroup } from './components/avatar-group';
+export { default as Badge } from './components/badge';
+export { default as ColorPicker } from './components/color-picker';
+export { default as KeyValue } from './components/key-value';
 /* plop:component */
 
 // Base Component

package/.github/workflows/eleventy_build.yml

@@ -1,42 +0,0 @@
-name: Eleventy Build
-
-on:
-  push:
-    branches:
-      - master
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref }}
-    steps:
-      - uses: actions/checkout@v6 # Check out the repository
-
-      - name: Setup Node
-        uses: actions/setup-node@v6
-        with:
-          node-version: '24'
-
-      - name: Cache npm
-        uses: actions/cache@v5
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package.json') }}
-
-      - run: npm ci # Install dependencies
-
-      - run: npm run build -- --with-docs # Build the site (including docs)
-
-      # Copy the dist/ folder into _site/dist
-      - run: cp -r dist/ _site/dist
-
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v4
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }} # GitHub token automatically generated
-          publish_dir: './_site' # Directory to deploy
-          exclude_assets: '.github,**/.gitignore'
-          cname: zinc.style

package/scss/themes/_aura.scss

@@ -1,114 +0,0 @@
-// Aura — a soft violet identity drawn over either mode's primitives.
-//
-// Light inherits the light primitives (defined on :root) and only re-points the
-// primary ramp to a softer, more pastel violet so the whole UI takes on the
-// "aura" glow without redefining every token. Dark does the same over the dark
-// primitives, with the ramp inverted (50 darkest -> 900 lightest) the way
-// themes/_dark.scss inverts every other ramp.
-//
-// The selectors are root-qualified (`html[t="aura"]` / `body[t="aura"]`) and must
-// stay that way. ZincElement reflects `t`/`m` onto EVERY component, so a bare
-// `[t="aura"]` matched each of them individually and re-declared these tokens
-// with literal values, wiping out contextual overrides from an ancestor — that
-// is what painted the rubix aura header's buttons violet instead of white.
-// Worse, a consumer on an older ZincElement reflects `t` but not `m`: the bare
-// light block then matched it, poured light tokens over its whole subtree, and
-// anything in a shadow tree below could not recover (document stylesheets do not
-// match inside shadow roots), which is what painted shell dropdowns white in
-// aura dark. Root-qualified, non-root elements simply inherit.
-//
-// Only *source* tokens (--zn-color-*) and theme-owned leaf tokens belong here.
-// Never set a derived token (--zn-border-color, --zn-text*, --zn-panel,
-// --zn-body, --zn-input-bg) — those are mapped off the source tokens in
-// scss/_root.scss and will not follow if pinned here.
-html[t="aura"], body[t="aura"],
-html.theme-aura, body.theme-aura {
-  color-scheme: light;
-
-  /**************************************************************
-   * Theme Tokens — soft violet primary
-   *************************************************************/
-
-  --zn-color-primary-50: hsl(258, 100%, 97%);
-  --zn-color-primary-100: hsl(256, 95%, 94%);
-  --zn-color-primary-200: hsl(255, 90%, 90%);
-  --zn-color-primary-300: hsl(255, 88%, 83%);
-  --zn-color-primary-400: hsl(256, 85%, 75%);
-  --zn-color-primary-500: hsl(255, 82%, 68%);
-  --zn-color-primary-600: hsl(256, 78%, 62%);
-  --zn-color-primary-700: hsl(257, 70%, 54%);
-  --zn-color-primary-800: hsl(258, 68%, 46%);
-  --zn-color-primary-900: hsl(259, 66%, 38%);
-
-  /* Soft, faintly violet-tinted elevations */
-  --zn-shadow-x-small: 0 1px 4px rgba(60, 44, 110, 0.08);
-  --zn-shadow-small: 0 3px 9px rgba(60, 44, 110, 0.12);
-  --zn-shadow-medium: 0 6px 18px rgba(60, 44, 110, 0.12);
-  --zn-shadow-large: 0 6px 20px rgba(60, 44, 110, 0.14);
-  --zn-shadow-x-large: 0 6px 20px rgba(60, 44, 110, 0.22);
-
-  /* Focus ring follows the softer primary */
-  --zn-input-focus-ring-color: hsl(255 82% 68% / 40%);
-}
-
-// Aura dark — the same violet identity over the dark primitives.
-//
-// html[t="aura"][m="dark"] (0,2,1) outranks themes/_dark.scss's :root[m="dark"]
-// (0,2,0), but this block should still stay AFTER _dark.scss in themes/_index.scss
-// so the ordering reads the way it resolves. See the specificity note in
-// scss/_root.scss for why these are html/body rather than :root.
-html[t="aura"][m="dark"], body[t="aura"][m="dark"],
-html.theme-aura.theme-dark, body.theme-aura.theme-dark {
-  color-scheme: dark;
-
-  /**************************************************************
-   * Theme Tokens — soft violet primary, inverted for dark
-   *************************************************************/
-
-  --zn-color-primary-50: hsl(257, 45%, 25%);
-  --zn-color-primary-100: hsl(257, 50%, 34%);
-  --zn-color-primary-200: hsl(257, 55%, 41%);
-  --zn-color-primary-300: hsl(257, 62%, 50%);
-  --zn-color-primary-400: hsl(256, 75%, 60%);
-  --zn-color-primary-500: hsl(255, 88%, 68%);
-  --zn-color-primary-600: hsl(253, 95%, 75%);
-  --zn-color-primary-700: hsl(251, 100%, 83%);
-  --zn-color-primary-800: hsl(249, 100%, 90%);
-  --zn-color-primary-900: hsl(250, 100%, 94%);
-
-  /* Elevations read as depth against the navy canvas, not violet haze */
-  --zn-shadow-x-small: 0 1px 4px rgba(6, 10, 20, 0.30);
-  --zn-shadow-small: 0 3px 9px rgba(6, 10, 20, 0.38);
-  --zn-shadow-medium: 0 6px 18px rgba(6, 10, 20, 0.38);
-  --zn-shadow-large: 0 6px 20px rgba(6, 10, 20, 0.42);
-  --zn-shadow-x-large: 0 6px 20px rgba(6, 10, 20, 0.52);
-
-  --zn-input-focus-ring-color: hsl(255 88% 68% / 45%);
-
-  /* _dark.scss's gray-100 is a muddy violet-grey (hsl(262, 12%, 35%)) that reads
-     brown over aura's navy canvas. It is the hover/secondary surface for a wide
-     spread of components — every `--zn-color-neutral-100` consumer aliases it
-     (zn-tile hover, zn-button hover, the markdown/remarkd editors,
-     schedule-builder, the droparea checker) plus zn-alert directly — so
-     re-pointing it here fixes them all at once. */
-  --zn-color-gray-100: hsl(221.6, 41.21%, 27.22%);
-
-  /* The neighbouring steps come along for the ride: _dark.scss aliases
-     --zn-color-neutral-50/-200 onto these, so leaving them on the muddy violet
-     ramp would put that colour back on `color="secondary"` button fills, input
-     surfaces and every panel border. Values chosen to land on aura dark's
-     existing navy tokens — 50 meets --zn-input-bg-accent (34,46,68) and 200
-     meets --zn-color-border (64,82,113). */
-  --zn-color-gray-50: hsl(220, 33%, 20%);
-  --zn-color-gray-200: hsl(220, 28%, 35%);
-
-  /* _dark.scss pins these to near-black literals, which read as holes punched
-     in aura's navy canvas — re-point them to the navy family. */
-  --zn-input-background-color-focus: rgb(35, 47, 70);
-  --zn-input-background-color-disabled: rgb(33, 44, 65);
-
-  --zn-tooltip-background-color: rgb(24, 33, 50);
-
-  /* tables */
-  --zn-table-header-background-color: 46, 61, 88;
-}