@fleetia/components 1.1.1

package/dist/styles/TextInput/TextInput.css

@@ -0,0 +1,37 @@
+.TextInput_wrapper__164di2t0 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+}
+.TextInput_label__164di2t1 {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--c-text);
+}
+.TextInput_input__164di2t2 {
+  width: 100%;
+  padding: 0.4em 0.5em;
+  border: 1px solid var(--c-border);
+  border-radius: 4px;
+  background: var(--c-surface);
+  font-size: 0.8rem;
+  color: var(--c-text);
+  box-sizing: border-box;
+}
+.TextInput_input__164di2t2:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--c-accent);
+}
+.TextInput_input__164di2t2::placeholder {
+  color: var(--c-muted);
+}
+.TextInput_inputError__164di2t3 {
+  border-color: #dc3545;
+}
+.TextInput_inputError__164di2t3:focus {
+  box-shadow: 0 0 0 1px #dc3545;
+}
+.TextInput_error__164di2t4 {
+  font-size: 0.75rem;
+  color: #dc3545;
+}

package/dist/styles/Toggle/Toggle.css

@@ -0,0 +1,46 @@
+.Toggle_wrapper__npa7nv0 {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  cursor: pointer;
+}
+.Toggle_wrapper__npa7nv0[data-disabled] {
+  opacity: 0.5;
+  cursor: default;
+}
+.Toggle_track__npa7nv1 {
+  position: relative;
+  width: 36px;
+  height: 20px;
+  border-radius: 10px;
+  background: var(--c-muted);
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.2s;
+  flex-shrink: 0;
+}
+.Toggle_track__npa7nv1[data-checked] {
+  background: var(--c-accent);
+}
+.Toggle_wrapper__npa7nv0[data-disabled] .Toggle_track__npa7nv1 {
+  cursor: default;
+}
+.Toggle_thumb__npa7nv2 {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--c-surface);
+  transition: transform 0.2s;
+}
+.Toggle_track__npa7nv1[data-checked] .Toggle_thumb__npa7nv2 {
+  transform: translateX(16px);
+}
+.Toggle_label__npa7nv3 {
+  font-size: 0.8rem;
+  color: var(--c-text);
+  user-select: none;
+}

package/dist/styles/Tree/Tree.css

@@ -0,0 +1,89 @@
+.Tree_tree__1urdps60 {
+  border: 1px solid var(--c-border);
+  background: var(--c-surface);
+  min-height: 112px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.Tree_row__1urdps61 {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 8px;
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid transparent;
+  background: none;
+  cursor: default;
+  font-size: 0.8rem;
+  color: var(--c-text);
+  transition: background 0.1s, opacity 0.15s;
+}
+.Tree_row__1urdps61:hover {
+  background: var(--c-hover-bg);
+  color: var(--c-hover-text);
+}
+.Tree_rowDraggable__1urdps62 {
+  cursor: grab;
+}
+.Tree_rowDraggable__1urdps62:active {
+  cursor: grabbing;
+}
+.Tree_rowDragOver__1urdps63 {
+  border-bottom-color: var(--c-accent);
+}
+.Tree_rowHidden__1urdps64 {
+  opacity: 0.45;
+}
+.Tree_expandButton__1urdps65 {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 0.55rem;
+  width: 16px;
+  text-align: center;
+  padding: 0;
+  color: var(--c-muted);
+  flex-shrink: 0;
+  line-height: 1;
+}
+.Tree_expandPlaceholder__1urdps66 {
+  width: 16px;
+  flex-shrink: 0;
+}
+.Tree_itemLabel__1urdps67 {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  font-size: inherit;
+  color: inherit;
+}
+.Tree_actionButton__1urdps68 {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+  color: var(--c-muted);
+  transition: color 0.15s;
+}
+.Tree_actionButton__1urdps68:hover {
+  color: var(--c-text);
+}
+.Tree_dragHandle__1urdps69 {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--c-muted);
+  cursor: grab;
+  padding: 0 2px;
+}
+.Tree_dragHandle__1urdps69:active {
+  cursor: grabbing;
+}

package/dist/styles/tokens.css

@@ -0,0 +1,13 @@
+:root {
+  --em: 16px;
+  --icon-size: 32px;
+  --gap: 1em;
+  --c-accent: #000000;
+  --c-accent-text: #ffffff;
+  --c-surface: #ffffff;
+  --c-text: #000000;
+  --c-border: #000000;
+  --c-hover-bg: #000000;
+  --c-hover-text: #ffffff;
+  --c-muted: #999999;
+}

package/dist/styles/tokens.css.d.ts

@@ -0,0 +1,15 @@
+export declare const vars: {
+    em: `var(--${string})`;
+    iconSize: `var(--${string})`;
+    gap: `var(--${string})`;
+    color: {
+        accent: `var(--${string})`;
+        accentText: `var(--${string})`;
+        surface: `var(--${string})`;
+        text: `var(--${string})`;
+        border: `var(--${string})`;
+        hoverBg: `var(--${string})`;
+        hoverText: `var(--${string})`;
+        muted: `var(--${string})`;
+    };
+};

package/dist/styles/tokens.styles.js

@@ -0,0 +1,5 @@
+import './tokens.css';
+
+var vars = {em:'var(--em)',iconSize:'var(--icon-size)',gap:'var(--gap)',color:{accent:'var(--c-accent)',accentText:'var(--c-accent-text)',surface:'var(--c-surface)',text:'var(--c-text)',border:'var(--c-border)',hoverBg:'var(--c-hover-bg)',hoverText:'var(--c-hover-text)',muted:'var(--c-muted)'}};
+
+export { vars };

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export type { ColorTheme } from "./types";
+export { lightTheme, darkTheme } from "./presets";

package/dist/theme/index.js

@@ -0,0 +1 @@
+export { darkTheme, lightTheme } from './presets.js';

package/dist/theme/presets.d.ts

@@ -0,0 +1,3 @@
+import type { ColorTheme } from "./types";
+export declare const lightTheme: ColorTheme;
+export declare const darkTheme: ColorTheme;

package/dist/theme/presets.js

@@ -0,0 +1,22 @@
+const lightTheme = {
+    accent: "#000000",
+    accentText: "#ffffff",
+    surface: "#ffffff",
+    text: "#000000",
+    border: "#000000",
+    hoverBg: "#000000",
+    hoverText: "#ffffff",
+    muted: "#999999"
+};
+const darkTheme = {
+    accent: "#ffffff",
+    accentText: "#000000",
+    surface: "#1a1a1a",
+    text: "#ffffff",
+    border: "#333333",
+    hoverBg: "#ffffff",
+    hoverText: "#000000",
+    muted: "#888888"
+};
+
+export { darkTheme, lightTheme };

package/dist/theme/types.d.ts

@@ -0,0 +1,10 @@
+export type ColorTheme = {
+    accent: string;
+    accentText: string;
+    surface: string;
+    text: string;
+    border: string;
+    hoverBg: string;
+    hoverText: string;
+    muted: string;
+};

package/dist/utils/colorUtils.d.ts

@@ -0,0 +1,32 @@
+export type HSLA = {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+export type ColorFormat = "hex" | "rgba" | "hsla";
+export declare function hslToRgb(h: number, s: number, l: number): [number, number, number];
+export declare function rgbToHsl(r: number, g: number, b: number): [number, number, number];
+export declare function rgbToHex(r: number, g: number, b: number): string;
+export declare function hexToRgb(hex: string): [number, number, number];
+export declare function parseColor(str: string): HSLA;
+export declare function formatColor(hsla: HSLA, format: ColorFormat): string;
+export type Point = {
+    x: number;
+    y: number;
+};
+export declare function cartesianToAngle(x: number, y: number): number;
+export declare function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number): Point;
+/** Barycentric hit-test */
+export declare function pointInTriangle(p: Point, a: Point, b: Point, c: Point): boolean;
+/** Clamp a point to the nearest point inside the triangle */
+export declare function clampToTriangle(p: Point, a: Point, b: Point, c: Point): Point;
+/** Get triangle vertices for the current hue, given center and radius */
+export declare function getTriangleVertices(cx: number, cy: number, radius: number, hueDeg: number): [Point, Point, Point];
+/** Convert S/L to a point inside the triangle (v0=pure hue, v1=white, v2=black) */
+export declare function slToTrianglePoint(s: number, l: number, v0: Point, v1: Point, v2: Point): Point;
+/** Convert a point inside the triangle back to S/L */
+export declare function trianglePointToSL(p: Point, v0: Point, v1: Point, v2: Point): {
+    s: number;
+    l: number;
+};

package/dist/utils/colorUtils.js

@@ -0,0 +1,227 @@
+// --- Color conversion ---
+function hslToRgb(h, s, l) {
+    const s1 = s / 100;
+    const l1 = l / 100;
+    const c = (1 - Math.abs(2 * l1 - 1)) * s1;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = l1 - c / 2;
+    let r = 0, g = 0, b = 0;
+    if (h < 60) {
+        r = c;
+        g = x;
+    }
+    else if (h < 120) {
+        r = x;
+        g = c;
+    }
+    else if (h < 180) {
+        g = c;
+        b = x;
+    }
+    else if (h < 240) {
+        g = x;
+        b = c;
+    }
+    else if (h < 300) {
+        r = x;
+        b = c;
+    }
+    else {
+        r = c;
+        b = x;
+    }
+    return [
+        Math.round((r + m) * 255),
+        Math.round((g + m) * 255),
+        Math.round((b + m) * 255)
+    ];
+}
+function rgbToHsl(r, g, b) {
+    const r1 = r / 255, g1 = g / 255, b1 = b / 255;
+    const max = Math.max(r1, g1, b1), min = Math.min(r1, g1, b1);
+    const l = (max + min) / 2;
+    if (max === min)
+        return [0, 0, Math.round(l * 100)];
+    const d = max - min;
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h = 0;
+    if (max === r1)
+        h = ((g1 - b1) / d + (g1 < b1 ? 6 : 0)) * 60;
+    else if (max === g1)
+        h = ((b1 - r1) / d + 2) * 60;
+    else
+        h = ((r1 - g1) / d + 4) * 60;
+    return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
+}
+function rgbToHex(r, g, b) {
+    return `#${[r, g, b].map(v => v.toString(16).padStart(2, "0")).join("")}`;
+}
+function hexToRgb(hex) {
+    if (!hex || typeof hex !== "string") {
+        return [0, 0, 0];
+    }
+    const h = hex.replace("#", "");
+    let full;
+    if (h.length === 3) {
+        // #RGB -> #RRGGBB
+        full = h
+            .split("")
+            .map(c => c + c)
+            .join("");
+    }
+    else if (h.length === 4) {
+        // #RGBA -> #RRGGBB (ignore alpha)
+        full = h
+            .slice(0, 3)
+            .split("")
+            .map(c => c + c)
+            .join("");
+    }
+    else if (h.length === 6) {
+        full = h;
+    }
+    else if (h.length === 8) {
+        // #RRGGBBAA -> #RRGGBB (ignore alpha)
+        full = h.slice(0, 6);
+    }
+    else {
+        throw new Error(`Unsupported hex format: "${hex}". Expected 3, 4, 6, or 8 hex digits.`);
+    }
+    if (!/^[0-9a-fA-F]{6}$/.test(full)) {
+        return [0, 0, 0];
+    }
+    return [
+        parseInt(full.substring(0, 2), 16),
+        parseInt(full.substring(2, 4), 16),
+        parseInt(full.substring(4, 6), 16)
+    ];
+}
+// --- Parsing ---
+function parseColor(str) {
+    if (!str)
+        return { h: 0, s: 0, l: 100, a: 1 };
+    // rgba / rgb
+    const rgbaMatch = str.match(/rgba?\(\s*([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\s*\)/);
+    if (rgbaMatch) {
+        const [, r, g, b, a] = rgbaMatch;
+        const [h, s, l] = rgbToHsl(+r, +g, +b);
+        return { h, s, l, a: a != null ? +a : 1 };
+    }
+    // hsla / hsl
+    const hslaMatch = str.match(/hsla?\(\s*([\d.]+),\s*([\d.]+)%?,\s*([\d.]+)%?(?:,\s*([\d.]+))?\s*\)/);
+    if (hslaMatch) {
+        const [, h, s, l, a] = hslaMatch;
+        return { h: +h, s: +s, l: +l, a: a != null ? +a : 1 };
+    }
+    // hex
+    if (str.startsWith("#")) {
+        const [r, g, b] = hexToRgb(str);
+        const [h, s, l] = rgbToHsl(r, g, b);
+        return { h, s, l, a: 1 };
+    }
+    return { h: 0, s: 0, l: 100, a: 1 };
+}
+function formatColor(hsla, format) {
+    const { h, s, l, a } = hsla;
+    if (format === "hsla") {
+        return a < 1
+            ? `hsla(${h}, ${s}%, ${l}%, ${round2(a)})`
+            : `hsl(${h}, ${s}%, ${l}%)`;
+    }
+    const [r, g, b] = hslToRgb(h, s, l);
+    if (format === "rgba") {
+        return a < 1
+            ? `rgba(${r}, ${g}, ${b}, ${round2(a)})`
+            : `rgb(${r}, ${g}, ${b})`;
+    }
+    // hex — no alpha support, just rgb
+    return rgbToHex(r, g, b);
+}
+function round2(n) {
+    return Math.round(n * 100) / 100;
+}
+function cartesianToAngle(x, y) {
+    const rad = Math.atan2(y, x);
+    let deg = (rad * 180) / Math.PI;
+    if (deg < 0)
+        deg += 360;
+    return deg;
+}
+function polarToCartesian(cx, cy, r, angleDeg) {
+    const rad = (angleDeg * Math.PI) / 180;
+    return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+}
+/** Barycentric hit-test */
+function pointInTriangle(p, a, b, c) {
+    const d = (b.y - c.y) * (a.x - c.x) + (c.x - b.x) * (a.y - c.y);
+    const u = ((b.y - c.y) * (p.x - c.x) + (c.x - b.x) * (p.y - c.y)) / d;
+    const v = ((c.y - a.y) * (p.x - c.x) + (a.x - c.x) * (p.y - c.y)) / d;
+    const w = 1 - u - v;
+    return u >= -0.01 && v >= -0.01 && w >= -0.01;
+}
+/** Clamp a point to the nearest point inside the triangle */
+function clampToTriangle(p, a, b, c) {
+    if (pointInTriangle(p, a, b, c))
+        return p;
+    const edges = [
+        [a, b],
+        [b, c],
+        [c, a]
+    ];
+    let best = a;
+    let bestDist = Infinity;
+    for (const [e0, e1] of edges) {
+        const pt = closestPointOnSegment(p, e0, e1);
+        const dx = pt.x - p.x, dy = pt.y - p.y;
+        const dist = dx * dx + dy * dy;
+        if (dist < bestDist) {
+            bestDist = dist;
+            best = pt;
+        }
+    }
+    return best;
+}
+function closestPointOnSegment(p, a, b) {
+    const dx = b.x - a.x, dy = b.y - a.y;
+    const len2 = dx * dx + dy * dy;
+    if (len2 === 0)
+        return a;
+    const t = Math.max(0, Math.min(1, ((p.x - a.x) * dx + (p.y - a.y) * dy) / len2));
+    return { x: a.x + t * dx, y: a.y + t * dy };
+}
+/** Get triangle vertices for the current hue, given center and radius */
+function getTriangleVertices(cx, cy, radius, hueDeg) {
+    const v0 = polarToCartesian(cx, cy, radius, hueDeg - 90);
+    const v1 = polarToCartesian(cx, cy, radius, hueDeg + 30);
+    const v2 = polarToCartesian(cx, cy, radius, hueDeg + 150);
+    return [v0, v1, v2];
+}
+/** Convert S/L to a point inside the triangle (v0=pure hue, v1=white, v2=black) */
+function slToTrianglePoint(s, l, v0, v1, v2) {
+    const s1 = s / 100;
+    const l1 = l / 100;
+    const wWhite = (1 - s1) * l1;
+    const wBlack = (1 - s1) * (1 - l1);
+    const wHue = s1;
+    const total = wWhite + wBlack + wHue || 1;
+    return {
+        x: (v1.x * wWhite + v2.x * wBlack + v0.x * wHue) / total,
+        y: (v1.y * wWhite + v2.y * wBlack + v0.y * wHue) / total
+    };
+}
+/** Convert a point inside the triangle back to S/L */
+function trianglePointToSL(p, v0, v1, v2) {
+    const d = (v1.y - v2.y) * (v0.x - v2.x) + (v2.x - v1.x) * (v0.y - v2.y);
+    if (Math.abs(d) < 0.001)
+        return { s: 0, l: 50 };
+    const wHue = ((v1.y - v2.y) * (p.x - v2.x) + (v2.x - v1.x) * (p.y - v2.y)) / d;
+    const wWhite = ((v2.y - v0.y) * (p.x - v2.x) + (v0.x - v2.x) * (p.y - v2.y)) / d;
+    const wBlack = 1 - wHue - wWhite;
+    const total = wWhite + wBlack + wHue || 1;
+    const s = Math.round(Math.max(0, Math.min(100, (wHue / total) * 100)));
+    const l1 = (wWhite + wHue * 0.5) / total;
+    const l = Math.round(Math.max(0, Math.min(100, l1 * 100)));
+    return { s, l };
+}
+
+export { cartesianToAngle, clampToTriangle, formatColor, getTriangleVertices, hexToRgb, hslToRgb, parseColor, pointInTriangle, polarToCartesian, rgbToHex, rgbToHsl, slToTrianglePoint, trianglePointToSL };

package/dist/utils/cssVariable.d.ts

@@ -0,0 +1,2 @@
+export declare function setCSSVariable(key: string, value: string): void;
+export declare function setCSSVariables(variables: Record<string, string>): void;

package/dist/utils/cssVariable.js

@@ -0,0 +1,11 @@
+function setCSSVariable(key, value) {
+    document.documentElement.style.setProperty(key, value);
+}
+function setCSSVariables(variables) {
+    const root = document.documentElement;
+    Object.entries(variables).forEach(([key, value]) => {
+        root.style.setProperty(key, value);
+    });
+}
+
+export { setCSSVariable, setCSSVariables };

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { type HSLA, type ColorFormat, type Point, hslToRgb, rgbToHsl, rgbToHex, hexToRgb, parseColor, formatColor, cartesianToAngle, polarToCartesian, pointInTriangle, clampToTriangle, getTriangleVertices, slToTrianglePoint, trianglePointToSL } from "./colorUtils";
+export { setCSSVariable, setCSSVariables } from "./cssVariable";

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export { cartesianToAngle, clampToTriangle, formatColor, getTriangleVertices, hexToRgb, hslToRgb, parseColor, pointInTriangle, polarToCartesian, rgbToHex, rgbToHsl, slToTrianglePoint, trianglePointToSL } from './colorUtils.js';
+export { setCSSVariable, setCSSVariables } from './cssVariable.js';