@expcat/tigercat-react 2.1.0 → 2.1.2

package/dist/chunk-2YBLMVDT.mjs

@@ -0,0 +1,428 @@
+import {
+  ChartCanvas
+} from "./chunk-CUAXRBKO.mjs";
+
+// src/components/Gantt.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  applyGanttTaskDateOverlay,
+  classNames,
+  clampGanttDragDeltaX,
+  computeGanttLayout,
+  ganttAxisTextClasses,
+  ganttDateValuesEqual,
+  ganttDependencyClasses,
+  ganttLabelClasses,
+  ganttProgressClasses,
+  ganttRowClasses,
+  ganttTodayLineClasses,
+  getChartInnerRect,
+  getGanttTaskAriaLabel,
+  getGanttTaskClasses,
+  isBrowser,
+  moveGanttTaskByPx
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GANTT_BAR_CLICK_PX = 4;
+function Gantt({
+  data,
+  width = 760,
+  height = 360,
+  padding = 24,
+  scale = "week",
+  rowHeight = 40,
+  barHeight = 18,
+  taskLabelWidth = 140,
+  timelineHeight = 36,
+  minDate,
+  maxDate,
+  minBarWidth = 6,
+  showToday = false,
+  showProgress = true,
+  showDependencies = true,
+  hoverable = false,
+  selectable = false,
+  selectedId,
+  activeOpacity = 1,
+  inactiveOpacity = 0.35,
+  dateFormatter,
+  colors,
+  title,
+  desc,
+  ariaLabel = "Gantt chart",
+  className,
+  onTaskClick,
+  onTaskHover,
+  onSelectedIdChange,
+  onTaskChange,
+  onDataChange
+}) {
+  const [innerSelectedId, setInnerSelectedId] = useState(null);
+  const [hoveredId, setHoveredId] = useState(null);
+  const [dateOverlay, setDateOverlay] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [dragPreview, setDragPreview] = useState(
+    null
+  );
+  const dragSessionRef = useRef(null);
+  const documentPointerListeningRef = useRef(false);
+  const suppressClickRef = useRef(false);
+  const dragFnsRef = useRef({
+    move: (_event) => {
+    },
+    finish: (_event) => {
+    }
+  });
+  const onDocumentPointerMove = useRef((event) => {
+    dragFnsRef.current.move(event);
+  }).current;
+  const onDocumentPointerEnd = useRef((event) => {
+    dragFnsRef.current.finish(event);
+  }).current;
+  const dataRef = useRef(data);
+  dataRef.current = data;
+  const dateOverlayRef = useRef(dateOverlay);
+  dateOverlayRef.current = dateOverlay;
+  const onTaskChangeRef = useRef(onTaskChange);
+  onTaskChangeRef.current = onTaskChange;
+  const onDataChangeRef = useRef(onDataChange);
+  onDataChangeRef.current = onDataChange;
+  const onTaskClickRef = useRef(onTaskClick);
+  onTaskClickRef.current = onTaskClick;
+  const onSelectedIdChangeRef = useRef(onSelectedIdChange);
+  onSelectedIdChangeRef.current = onSelectedIdChange;
+  const selectedIdRef = useRef(selectedId);
+  selectedIdRef.current = selectedId;
+  const selectableRef = useRef(selectable);
+  selectableRef.current = selectable;
+  const resolvedSelectedId = selectedId === void 0 ? innerSelectedId : selectedId;
+  const resolvedSelectedIdRef = useRef(resolvedSelectedId);
+  resolvedSelectedIdRef.current = resolvedSelectedId;
+  useEffect(
+    () => () => {
+      if (!documentPointerListeningRef.current || !isBrowser()) return;
+      document.removeEventListener("pointermove", onDocumentPointerMove);
+      document.removeEventListener("pointerup", onDocumentPointerEnd);
+      document.removeEventListener("pointercancel", onDocumentPointerEnd);
+      documentPointerListeningRef.current = false;
+    },
+    [onDocumentPointerEnd, onDocumentPointerMove]
+  );
+  const resolvedData = useMemo(
+    () => applyGanttTaskDateOverlay(data, dateOverlay),
+    [data, dateOverlay]
+  );
+  const innerRect = useMemo(
+    () => getChartInnerRect(width, height, padding),
+    [height, padding, width]
+  );
+  const layout = useMemo(
+    () => computeGanttLayout(resolvedData, {
+      width: innerRect.width,
+      rowHeight,
+      barHeight,
+      taskLabelWidth,
+      timelineHeight,
+      minDate,
+      maxDate,
+      minBarWidth,
+      scale,
+      colors,
+      today: showToday ? /* @__PURE__ */ new Date() : void 0,
+      dateFormatter
+    }),
+    [
+      barHeight,
+      colors,
+      dateFormatter,
+      innerRect.width,
+      maxDate,
+      minBarWidth,
+      minDate,
+      resolvedData,
+      rowHeight,
+      scale,
+      showToday,
+      taskLabelWidth,
+      timelineHeight
+    ]
+  );
+  const activeId = resolvedSelectedId ?? hoveredId;
+  const selectTask = (task) => {
+    if (selectableRef.current && !task.task.disabled) {
+      const nextId = resolvedSelectedIdRef.current === task.id ? null : task.id;
+      if (selectedIdRef.current === void 0) setInnerSelectedId(nextId);
+      onSelectedIdChangeRef.current?.(nextId);
+    }
+    onTaskClickRef.current?.(task.task);
+  };
+  const setHoveredTask = (task) => {
+    if (!hoverable) return;
+    setHoveredId(task?.id ?? null);
+    onTaskHover?.(task?.task ?? null);
+  };
+  const getTaskOpacity = (task) => {
+    if (activeId === null) return activeOpacity;
+    return activeId === task.id ? activeOpacity : inactiveOpacity;
+  };
+  const pointerScale = (currentTarget) => {
+    const svg = currentTarget instanceof SVGElement ? currentTarget.ownerSVGElement ?? currentTarget.closest("svg") : currentTarget instanceof Element ? currentTarget.closest("svg") : null;
+    const clientWidth = svg?.clientWidth ?? 0;
+    if (!(clientWidth > 0)) return 1;
+    const viewBoxWidth = svg?.viewBox?.baseVal?.width;
+    const resolvedViewBox = typeof viewBoxWidth === "number" && viewBoxWidth > 0 ? viewBoxWidth : width;
+    return resolvedViewBox / clientWidth;
+  };
+  const captureBarPointer = (target, pointerId) => {
+    if (!(target instanceof Element) || typeof target.setPointerCapture !== "function") return;
+    try {
+      target.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const releaseBarPointer = (target, pointerId) => {
+    if (!target || typeof target.releasePointerCapture !== "function") return;
+    try {
+      target.releasePointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const moveBarDrag = (event) => {
+    const session = dragSessionRef.current;
+    if (!session || event.pointerId !== session.pointerId) return;
+    const rawDelta = (event.clientX - session.startClientX) * session.scale;
+    const deltaX = clampGanttDragDeltaX(
+      rawDelta,
+      session.barX,
+      session.barWidth,
+      session.taskLabelWidth,
+      session.layoutWidth
+    );
+    session.deltaX = deltaX;
+    setDragPreview({ id: session.task.id, deltaX });
+  };
+  const detachDocumentPointerListeners = () => {
+    if (!documentPointerListeningRef.current || !isBrowser()) return;
+    document.removeEventListener("pointermove", onDocumentPointerMove);
+    document.removeEventListener("pointerup", onDocumentPointerEnd);
+    document.removeEventListener("pointercancel", onDocumentPointerEnd);
+    documentPointerListeningRef.current = false;
+  };
+  const finishBarDrag = (event) => {
+    const session = dragSessionRef.current;
+    if (!session || event.pointerId !== session.pointerId) return;
+    moveBarDrag(event);
+    const deltaX = session.deltaX;
+    dragSessionRef.current = null;
+    setDragPreview(null);
+    detachDocumentPointerListeners();
+    releaseBarPointer(session.captureTarget, session.pointerId);
+    suppressClickRef.current = true;
+    if (Math.abs(deltaX) < GANTT_BAR_CLICK_PX) {
+      selectTask(session.task);
+      return;
+    }
+    const nextTask = moveGanttTaskByPx(session.sourceTask, deltaX, {
+      minMs: session.minMs,
+      maxMs: session.maxMs,
+      timelineWidth: session.timelineWidth
+    });
+    if (ganttDateValuesEqual(nextTask.start, session.sourceTask.start) && ganttDateValuesEqual(nextTask.end, session.sourceTask.end)) {
+      selectTask(session.task);
+      return;
+    }
+    const incoming = dataRef.current.find((item) => item.id === nextTask.id);
+    const previous = dateOverlayRef.current.get(nextTask.id);
+    const nextOverlay = new Map(dateOverlayRef.current);
+    nextOverlay.set(nextTask.id, {
+      start: nextTask.start,
+      end: nextTask.end,
+      baseStart: previous?.baseStart ?? incoming?.start ?? session.sourceTask.start,
+      baseEnd: previous?.baseEnd ?? incoming?.end ?? session.sourceTask.end
+    });
+    setDateOverlay(nextOverlay);
+    const nextData = applyGanttTaskDateOverlay(dataRef.current, nextOverlay);
+    onTaskChangeRef.current?.(nextTask);
+    onDataChangeRef.current?.(nextData);
+  };
+  dragFnsRef.current.move = moveBarDrag;
+  dragFnsRef.current.finish = finishBarDrag;
+  const attachDocumentPointerListeners = () => {
+    if (documentPointerListeningRef.current || !isBrowser()) return;
+    document.addEventListener("pointermove", onDocumentPointerMove);
+    document.addEventListener("pointerup", onDocumentPointerEnd);
+    document.addEventListener("pointercancel", onDocumentPointerEnd);
+    documentPointerListeningRef.current = true;
+  };
+  const startBarDrag = (event, task) => {
+    if (task.task.disabled || dragSessionRef.current) return;
+    if (event.button !== void 0 && event.button !== 0) return;
+    event.preventDefault();
+    const captureTarget = event.currentTarget instanceof Element ? event.currentTarget : null;
+    dragSessionRef.current = {
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      scale: pointerScale(event.currentTarget),
+      task,
+      sourceTask: task.task,
+      barX: task.x,
+      barWidth: task.width,
+      taskLabelWidth,
+      layoutWidth: layout.width,
+      minMs: layout.minMs,
+      maxMs: layout.maxMs,
+      timelineWidth: layout.timelineWidth,
+      deltaX: 0,
+      captureTarget
+    };
+    setDragPreview({ id: task.id, deltaX: 0 });
+    captureBarPointer(event.currentTarget, event.pointerId);
+    attachDocumentPointerListeners();
+  };
+  const handleBarClick = (event, task) => {
+    if (suppressClickRef.current) {
+      suppressClickRef.current = false;
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    selectTask(task);
+  };
+  return /* @__PURE__ */ jsx(
+    ChartCanvas,
+    {
+      width,
+      height,
+      padding,
+      title,
+      desc,
+      className: classNames(className),
+      role: "img",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs("g", { "data-series-type": "gantt", children: [
+        /* @__PURE__ */ jsxs("g", { "data-gantt-axis": "true", children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: taskLabelWidth,
+              x2: layout.width,
+              y1: timelineHeight - 1,
+              y2: timelineHeight - 1,
+              stroke: "var(--tiger-border,#d1d5db)"
+            }
+          ),
+          layout.ticks.map((tick) => /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: tick.x,
+                x2: tick.x,
+                y1: 0,
+                y2: layout.height,
+                stroke: "var(--tiger-border,#e5e7eb)"
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: tick.x + 4, y: 16, className: ganttAxisTextClasses, children: tick.label })
+          ] }, `${tick.label}-${tick.x}`))
+        ] }),
+        /* @__PURE__ */ jsx("g", { "data-gantt-rows": "true", children: layout.tasks.map((task) => /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: timelineHeight + task.index * rowHeight,
+            width: layout.width,
+            height: rowHeight,
+            className: task.index % 2 === 0 ? ganttRowClasses : void 0,
+            opacity: task.index % 2 === 0 ? 0.75 : 0
+          },
+          `row-${task.id}`
+        )) }),
+        showToday && layout.todayX !== null ? /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: layout.todayX,
+            x2: layout.todayX,
+            y1: 0,
+            y2: layout.height,
+            className: ganttTodayLineClasses,
+            "data-gantt-today": "true"
+          }
+        ) : null,
+        showDependencies ? /* @__PURE__ */ jsx("g", { "data-gantt-dependencies": "true", children: layout.dependencies.map((dependency) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: dependency.path,
+            className: ganttDependencyClasses
+          },
+          `${dependency.sourceId}-${dependency.targetId}`
+        )) }) : null,
+        /* @__PURE__ */ jsx("g", { "data-gantt-tasks": "true", children: layout.tasks.map((task) => {
+          const selected = resolvedSelectedId === task.id;
+          const interactive = (hoverable || selectable) && !task.task.disabled;
+          const movable = !task.task.disabled;
+          const grabbing = dragPreview?.id === task.id;
+          const previewDeltaX = grabbing ? dragPreview?.deltaX ?? 0 : 0;
+          return /* @__PURE__ */ jsxs("g", { opacity: getTaskOpacity(task), children: [
+            /* @__PURE__ */ jsx("text", { x: 0, y: task.y + task.height / 2 + 4, className: ganttLabelClasses, children: task.task.label }),
+            /* @__PURE__ */ jsxs(
+              "g",
+              {
+                className: getGanttTaskClasses(interactive, selected, movable, grabbing),
+                role: interactive ? "button" : "group",
+                tabIndex: interactive ? 0 : void 0,
+                "aria-label": getGanttTaskAriaLabel(task.task),
+                "data-gantt-task-id": task.id,
+                transform: previewDeltaX !== 0 ? `translate(${previewDeltaX} 0)` : void 0,
+                onMouseEnter: () => setHoveredTask(task),
+                onMouseLeave: () => setHoveredTask(null),
+                onPointerDown: (event) => startBarDrag(event, task),
+                onPointerMove: (event) => moveBarDrag(event.nativeEvent),
+                onPointerUp: (event) => finishBarDrag(event.nativeEvent),
+                onPointerCancel: (event) => finishBarDrag(event.nativeEvent),
+                onClick: (event) => handleBarClick(event, task),
+                onKeyDown: (event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    selectTask(task);
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: task.x,
+                      y: task.y,
+                      width: task.width,
+                      height: task.height,
+                      rx: 4,
+                      fill: task.color,
+                      stroke: selected ? "var(--tiger-text,#111827)" : void 0,
+                      strokeWidth: selected ? 2 : void 0
+                    }
+                  ),
+                  showProgress && task.progressWidth > 0 ? /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: task.x,
+                      y: task.y,
+                      width: task.progressWidth,
+                      height: task.height,
+                      rx: 4,
+                      className: ganttProgressClasses
+                    }
+                  ) : null
+                ]
+              }
+            )
+          ] }, task.id);
+        }) })
+      ] })
+    }
+  );
+}
+Gantt.displayName = "Gantt";
+
+export {
+  Gantt
+};

package/dist/{chunk-25D5TXZH.mjs → chunk-32MCQMBJ.mjs}

@@ -1,12 +1,12 @@
 import {
   useChartInteraction
-} from "./chunk-DNOPEJ5I.mjs";
+} from "./chunk-JZZPLKTW.mjs";
 import {
   ChartTooltip
 } from "./chunk-YORCCCQX.mjs";
 import {
   ChartCanvas
-} from "./chunk-DKNVSQSV.mjs";
+} from "./chunk-CUAXRBKO.mjs";
 
 // src/components/HeatmapChart.tsx
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
@@ -63,6 +63,7 @@ var HeatmapChart = ({
     handleClick
   } = useChartInteraction({
     hoverable,
+    showTooltip,
     hoveredIndexProp,
     selectable,
     selectedIndexProp,
@@ -111,6 +112,7 @@ var HeatmapChart = ({
     [resolvedHoveredIndex, cells, valueFormatter]
   );
   const interactive = hoverable || selectable;
+  const pointerInteractive = interactive || showTooltip;
   const rect = innerRect;
   const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
   const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
@@ -288,7 +290,7 @@ var HeatmapChart = ({
       ]
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsx(
+  const tooltip = showTooltip ? /* @__PURE__ */ jsx(
     ChartTooltip,
     {
       content: tooltipContent,
@@ -314,10 +316,10 @@ var HeatmapChart = ({
           top: `${rect.y}px`,
           width: `${rect.width}px`,
           height: `${rect.height}px`,
-          pointerEvents: interactive ? "auto" : "none"
+          pointerEvents: pointerInteractive ? "auto" : "none"
         },
-        onMouseMove: interactive ? handleCanvasMouseMove : void 0,
-        onMouseLeave: interactive ? handleMouseLeave : void 0,
+        onMouseMove: pointerInteractive ? handleCanvasMouseMove : void 0,
+        onMouseLeave: pointerInteractive ? handleMouseLeave : void 0,
         onClick: interactive ? handleCanvasClick : void 0
       }
     ),

package/dist/{chunk-6MGQAJ62.mjs → chunk-3GPGSNOQ.mjs}

@@ -2,6 +2,9 @@ import {
   renderOverlayPortal,
   useAnchoredOverlay
 } from "./chunk-HKAZXG74.mjs";
+import {
+  useTigerConfig
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/ColorPicker.tsx
 import { useState, useMemo, useRef, useEffect } from "react";
@@ -11,15 +14,27 @@ import {
   colorPickerPanelClasses,
   colorPickerInputClasses,
   colorPickerPresetClasses,
-  hexToRgb,
   rgbToHex,
   rgbToHsv,
   hsvToRgb,
   formatColorString,
   parseColorInput,
-  classNames
+  parseColorParts,
+  classNames,
+  mergeTigerLocale,
+  getColorPickerLabels,
+  formatColorPickerSelectPreset
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
+function rgbFromValue(value) {
+  const parts = parseColorParts(value);
+  return parts ? { r: parts.r, g: parts.g, b: parts.b } : { r: 0, g: 0, b: 0 };
+}
+function explicitAlphaFromValue(value) {
+  if (!/^(rgba|hsla)\(/i.test(value.trim())) return null;
+  const parts = parseColorParts(value);
+  return parts ? parts.a : null;
+}
 var ColorPicker = ({
   value = "#2563eb",
   disabled = false,
@@ -28,10 +43,21 @@ var ColorPicker = ({
   format = "hex",
   presets,
   className,
+  locale,
+  labels: labelsOverride,
   onChange
 }) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getColorPickerLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
   const [isOpen, setIsOpen] = useState(false);
-  const [alpha, setAlpha] = useState(1);
+  const [alpha, setAlpha] = useState(() => explicitAlphaFromValue(value) ?? 1);
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
@@ -47,8 +73,12 @@ var ColorPicker = ({
     restoreFocusOnDismiss: true,
     onDismiss: () => setIsOpen(false)
   });
-  const rgb = useMemo(() => hexToRgb(value), [value]);
+  const rgb = useMemo(() => rgbFromValue(value), [value]);
   const hsv = useMemo(() => rgbToHsv(rgb.r, rgb.g, rgb.b), [rgb]);
+  useEffect(() => {
+    const next = explicitAlphaFromValue(value);
+    if (next !== null) setAlpha(next);
+  }, [value]);
   const displayValue = useMemo(
     () => formatColorString(rgb.r, rgb.g, rgb.b, format, showAlpha ? alpha : void 0),
     [rgb, format, showAlpha, alpha]
@@ -80,13 +110,17 @@ var ColorPicker = ({
   function handleInputChange(e) {
     const val = e.target.value;
     setInputValue(val);
-    const hex = parseColorInput(val);
-    if (hex) {
-      onChange?.(hex);
+    const parsed = parseColorInput(val);
+    if (parsed) {
+      onChange?.(parsed);
     }
   }
   function handleAlphaChange(e) {
-    setAlpha(Number(e.target.value) / 100);
+    const nextAlpha = Number(e.target.value) / 100;
+    setAlpha(nextAlpha);
+    const emitFormat = format === "hex" ? "rgb" : format;
+    const next = formatColorString(rgb.r, rgb.g, rgb.b, emitFormat, nextAlpha);
+    onChange?.(next);
   }
   function handlePresetClick(color) {
     onChange?.(color);
@@ -97,6 +131,9 @@ var ColorPicker = ({
       handlePresetClick(color);
     }
   }
+  function handleClear() {
+    onChange?.("");
+  }
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: classNames(colorPickerBaseClasses, className), children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -105,7 +142,9 @@ var ColorPicker = ({
         className: getColorPickerTriggerClasses(size, disabled),
         style: { backgroundColor: swatchColor },
         role: "button",
-        "aria-label": "Pick color",
+        "data-tiger-colorpicker-trigger": "",
+        "aria-label": labels.trigger,
+        title: labels.trigger,
         "aria-haspopup": "dialog",
         "aria-expanded": isOpen,
         "aria-disabled": disabled || void 0,
@@ -122,9 +161,25 @@ var ColorPicker = ({
           className: classNames(colorPickerPanelClasses, overlay.floatingClasses),
           style: overlay.floatingStyles,
           "data-positioned": overlay.positioned,
+          "data-tiger-colorpicker-panel": "",
+          role: "dialog",
+          "aria-label": labels.panelTitle,
           children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--tiger-text,#111827)]", children: labels.panelTitle }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "text-xs text-[var(--tiger-primary,#2563eb)] hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--tiger-primary,#2563eb)]",
+                  "data-tiger-colorpicker-clear": "",
+                  onClick: handleClear,
+                  children: labels.clear
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hue" }),
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: labels.hue }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -133,13 +188,13 @@ var ColorPicker = ({
                   max: 360,
                   value: hsv.h,
                   className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": "Hue",
+                  "aria-label": labels.hue,
                   onChange: handleHueChange
                 }
               )
             ] }),
             showAlpha && /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Alpha" }),
+              /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: labels.alpha }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -148,7 +203,7 @@ var ColorPicker = ({
                   max: 100,
                   value: Math.round(alpha * 100),
                   className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
-                  "aria-label": "Alpha",
+                  "aria-label": labels.alpha,
                   onChange: handleAlphaChange
                 }
               )
@@ -161,7 +216,7 @@ var ColorPicker = ({
                   type: "text",
                   className: colorPickerInputClasses,
                   value: inputValue,
-                  "aria-label": "Color value",
+                  "aria-label": labels.value,
                   onChange: handleInputChange
                 }
               )
@@ -172,7 +227,7 @@ var ColorPicker = ({
                 {
                   className: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
                   style: { backgroundColor: swatchColor },
-                  "aria-label": "Color preview"
+                  "aria-label": labels.preview
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: displayValue })
@@ -184,7 +239,7 @@ var ColorPicker = ({
                 style: { backgroundColor: color },
                 role: "button",
                 tabIndex: 0,
-                "aria-label": `Select ${color}`,
+                "aria-label": formatColorPickerSelectPreset(labels.selectPreset, color),
                 onClick: () => handlePresetClick(color),
                 onKeyDown: (e) => handlePresetKeyDown(e, color)
               },

package/dist/{chunk-M5MZWOHF.mjs → chunk-3HHEVMHE.mjs}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu
-} from "./chunk-YI6YWH66.mjs";
+} from "./chunk-RE5ZLA5D.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";

package/dist/{chunk-HSBN5MLS.mjs → chunk-3LACOSJQ.mjs}

@@ -1,6 +1,6 @@
 import {
   ImagePreview
-} from "./chunk-ZCGIZOMT.mjs";
+} from "./chunk-V7HJ5HLC.mjs";
 
 // src/components/ImageGroup.tsx
 import { useState, useCallback, useMemo, createContext, useRef } from "react";