@expcat/tigercat-react 2.0.0-preview.2 → 2.0.0-preview.4

package/dist/{chunk-NRWH5IWZ.mjs → chunk-F6WV53BS.mjs}

@@ -1,3 +1,6 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
 import {
   useInputGroupContext
 } from "./chunk-34VGG7AK.mjs";
@@ -24,9 +27,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var Input = ({
   size,
   type = "text",
-  status = "default",
-  errorMessage,
-  _shakeTrigger,
+  status: statusProp,
+  errorMessage: errorMessageProp,
+  _shakeTrigger: shakeTriggerProp,
   prefix,
   suffix,
   value,
@@ -55,7 +58,11 @@ var Input = ({
 }) => {
   injectShakeStyle();
   const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
   const effectiveSize = size ?? inputGroup?.size ?? "md";
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const errorMessage = errorMessageProp ?? formItemControl?.errorMessage;
+  const shakeTrigger = shakeTriggerProp ?? formItemControl?.shakeTrigger;
   const wrapperRef = useRef(null);
   const inputRef = useRef(null);
   const reactId = useId();
@@ -69,7 +76,7 @@ var Input = ({
       void el.offsetWidth;
       el.classList.add(SHAKE_CLASS);
     }
-  }, [status, _shakeTrigger]);
+  }, [status, shakeTrigger]);
   const handleAnimationEnd = useCallback(() => {
     wrapperRef.current?.classList.remove(SHAKE_CLASS);
   }, []);

package/dist/{chunk-D524E52A.mjs → chunk-FDKWHP2K.mjs}

@@ -1,6 +1,9 @@
 import {
   useControlledState
 } from "./chunk-MEFARVQI.mjs";
+import {
+  useTigerConfig
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/Carousel.tsx
 import React, {
@@ -31,7 +34,9 @@ import {
   resolveCarouselSwipeDirection,
   createCarouselAutoplayController,
   carouselPrevArrowPath,
-  carouselNextArrowPath
+  carouselNextArrowPath,
+  mergeTigerLocale,
+  getCarouselLabels
 } from "@expcat/tigercat-core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var Carousel = forwardRef(
@@ -50,11 +55,14 @@ var Carousel = forwardRef(
     pauseOnFocus = true,
     className,
     style,
+    locale,
+    labels: labelsOverride,
     onCurrentIndexChange,
     onChange,
     onBeforeChange,
     children
   }, ref) => {
+    const config = useTigerConfig();
     const slides = useMemo(() => {
       return React.Children.toArray(children).filter((child) => React.isValidElement(child));
     }, [children]);
@@ -72,6 +80,14 @@ var Carousel = forwardRef(
     const containerRef = useRef(null);
     const touchStartRef = useRef(null);
     const touchCurrentRef = useRef(null);
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getCarouselLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
     const onChangeRef = useRef(onChange);
     const onBeforeChangeRef = useRef(onBeforeChange);
     onChangeRef.current = onChange;
@@ -250,7 +266,7 @@ var Carousel = forwardRef(
         className: getCarouselArrowClasses(type, disabled),
         onClick,
         disabled,
-        "aria-label": type === "prev" ? "Previous slide" : "Next slide",
+        "aria-label": type === "prev" ? labels.previousSlideAriaLabel : labels.nextSlideAriaLabel,
         children: /* @__PURE__ */ jsx(
           "svg",
           {
@@ -276,13 +292,13 @@ var Carousel = forwardRef(
     };
     const renderDots = () => {
       if (!dots || slideCount <= 1) return null;
-      return /* @__PURE__ */ jsx("div", { className: dotsClasses, role: "tablist", "aria-label": "Carousel navigation", children: slides.map((_, index) => /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("div", { className: dotsClasses, role: "tablist", "aria-label": labels.navigationAriaLabel, children: slides.map((_, index) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           className: getCarouselDotClasses(index === currentIndex),
           onClick: () => goTo(index),
-          "aria-label": `Go to slide ${index + 1}`,
+          "aria-label": labels.goToSlideAriaLabel.replace("{index}", String(index + 1)),
           "aria-current": index === currentIndex ? "true" : "false"
         },
         index
@@ -296,7 +312,7 @@ var Carousel = forwardRef(
           style: effect === "fade" ? slideStyle : void 0,
           role: "group",
           "aria-roledescription": "slide",
-          "aria-label": `Slide ${index + 1} of ${slideCount}`,
+          "aria-label": labels.slideAriaLabel.replace("{index}", String(index + 1)).replace("{total}", String(slideCount)),
           "aria-hidden": index !== currentIndex,
           children: slide
         },
@@ -315,7 +331,7 @@ var Carousel = forwardRef(
         style,
         role: "region",
         "aria-roledescription": "carousel",
-        "aria-label": "Image carousel",
+        "aria-label": labels.ariaLabel,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleFocus,

package/dist/{chunk-4R5YXNU4.mjs → chunk-FPQMJFFM.mjs}

@@ -1,12 +1,18 @@
+import {
+  useTigerConfig
+} from "./chunk-YSIXURBW.mjs";
+
 // src/components/AvatarGroup.tsx
 import React, { createContext, useMemo } from "react";
 import {
   getAvatarGroupClasses,
   getAvatarGroupItemClasses,
+  getAvatarGroupLabels,
   getAvatarGroupOverflowClasses,
   getAvatarGroupOverflowLabel,
   getAvatarGroupOverflowText,
-  getVisibleGroupItems
+  getVisibleGroupItems,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var AvatarGroupContext = createContext(null);
@@ -14,9 +20,20 @@ var AvatarGroup = ({
   max,
   size,
   className,
+  locale,
+  labels: labelsOverride,
   children,
   ...props
 }) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(
+    () => getAvatarGroupLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
   const contextValue = useMemo(
     () => ({ size, itemClass: getAvatarGroupItemClasses() }),
     [size]
@@ -28,7 +45,7 @@ var AvatarGroup = ({
     {
       className: getAvatarGroupClasses(className),
       role: "group",
-      "aria-label": "Avatar group",
+      "aria-label": labels.ariaLabel,
       ...props,
       children: [
         visibleItems,
@@ -36,7 +53,7 @@ var AvatarGroup = ({
           "span",
           {
             className: getAvatarGroupOverflowClasses(size ?? "md"),
-            "aria-label": getAvatarGroupOverflowLabel(overflowCount),
+            "aria-label": getAvatarGroupOverflowLabel(overflowCount, labels.overflowAriaLabel),
             children: getAvatarGroupOverflowText(overflowCount)
           }
         )

package/dist/{chunk-2UFTDDPW.mjs → chunk-HXD7KMRP.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-MEFARVQI.mjs";
 import {
   useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/Upload.tsx
 import { useRef, useState, useCallback, useMemo } from "react";

package/dist/{chunk-HDCC4FBL.mjs → chunk-I5TELDUV.mjs}

@@ -17,6 +17,7 @@ import {
 import { jsx } from "react/jsx-runtime";
 var Icon = ({
   name,
+  icon,
   size = "md",
   color = "currentColor",
   className,
@@ -28,7 +29,7 @@ var Icon = ({
   const iconStyle = { ...style, color };
   const isDecorative = props["aria-label"] == null && props["aria-labelledby"] == null && props.role == null;
   const hasChildren = React.Children.count(children) > 0;
-  const definition = !hasChildren && name ? getIconDefinition(name) : void 0;
+  const definition = !hasChildren ? icon ?? (name ? getIconDefinition(name) : void 0) : void 0;
   const builtInSvg = definition ? /* @__PURE__ */ jsx(
     "svg",
     {

package/dist/{chunk-GQPKHMHA.mjs → chunk-IBSOUQGB.mjs}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-5TE7KLE5.mjs";
 import {
   useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/FormWizard.tsx
 import { useCallback, useEffect, useMemo, useState } from "react";

package/dist/{chunk-YN4FMZX5.mjs → chunk-IPJLQSAF.mjs}

@@ -1,15 +1,15 @@
 import {
   Table
-} from "./chunk-YCEH4N3Z.mjs";
+} from "./chunk-Z47SG5L5.mjs";
 import {
   Select
-} from "./chunk-YLVXXP7E.mjs";
+} from "./chunk-PAN256RW.mjs";
 import {
   Popover
 } from "./chunk-QWUDJC6K.mjs";
 import {
   Input
-} from "./chunk-NRWH5IWZ.mjs";
+} from "./chunk-F6WV53BS.mjs";
 import {
   Checkbox
 } from "./chunk-EPWAROC2.mjs";
@@ -18,7 +18,7 @@ import {
 } from "./chunk-5TE7KLE5.mjs";
 import {
   useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/DataTableWithToolbar.tsx
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/{chunk-VBGJQPPI.mjs → chunk-IZYFETUS.mjs}

@@ -1,15 +1,15 @@
 import {
   Modal
-} from "./chunk-TJDZFN2Z.mjs";
+} from "./chunk-K7MYQISG.mjs";
 import {
   ImageCropper
-} from "./chunk-T6HNFCOW.mjs";
+} from "./chunk-VD55SSP7.mjs";
 import {
   Button
 } from "./chunk-5TE7KLE5.mjs";
 import {
   useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/CropUpload.tsx
 import { useState, useRef, useCallback, useMemo } from "react";

package/dist/{chunk-YTFQBXH4.mjs → chunk-JTFNGXOC.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/AutoComplete.tsx
 import { useState, useRef, useEffect, useId, useMemo } from "react";

package/dist/{chunk-TJDZFN2Z.mjs → chunk-K7MYQISG.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-SEWNVIHH.mjs";
 import {
   useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/Modal.tsx
 import React, { useEffect, useMemo, useCallback, useRef, useId } from "react";

package/dist/{chunk-GFLKO46C.mjs → chunk-KFPQ6DIH.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/VirtualTable.tsx
 import { useCallback, useMemo, useRef, useState } from "react";

package/dist/{chunk-I3SE5HMH.mjs → chunk-KMP5CVNK.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-DKNVSQSV.mjs";
 import {
   ChartLegend
-} from "./chunk-ZG2W4HS5.mjs";
+} from "./chunk-F2ITBDUS.mjs";
 import {
   ChartSeries
 } from "./chunk-SDLMB34Y.mjs";

package/dist/{chunk-32PAZTVF.mjs → chunk-KVARQQAG.mjs}

@@ -10,7 +10,8 @@ import {
   rgbToHex,
   rgbToHsv,
   hsvToRgb,
-  isValidHex,
+  formatColorString,
+  parseColorInput,
   classNames
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -18,26 +19,39 @@ var ColorPicker = ({
   value = "#2563eb",
   disabled = false,
   size = "md",
-  showAlpha: _showAlpha = false,
-  format: _format = "hex",
+  showAlpha = false,
+  format = "hex",
   presets,
   className,
   onChange
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [inputValue, setInputValue] = useState(value);
+  const [alpha, setAlpha] = useState(1);
   const containerRef = useRef(null);
-  const hsv = useMemo(() => {
-    const rgb = hexToRgb(value);
-    return rgbToHsv(rgb.r, rgb.g, rgb.b);
-  }, [value]);
+  const rgb = useMemo(() => hexToRgb(value), [value]);
+  const hsv = useMemo(() => rgbToHsv(rgb.r, rgb.g, rgb.b), [rgb]);
+  const displayValue = useMemo(
+    () => formatColorString(rgb.r, rgb.g, rgb.b, format, showAlpha ? alpha : void 0),
+    [rgb, format, showAlpha, alpha]
+  );
+  const swatchColor = showAlpha ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})` : value;
+  const [inputValue, setInputValue] = useState(displayValue);
   useEffect(() => {
-    setInputValue(value);
-  }, [value]);
+    setInputValue(displayValue);
+  }, [displayValue]);
   function togglePanel() {
     if (disabled) return;
     setIsOpen((v) => !v);
   }
+  function handleTriggerKeyDown(e) {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      setIsOpen((v) => !v);
+    } else if (e.key === "Escape" && isOpen) {
+      setIsOpen(false);
+    }
+  }
   function handleHueChange(e) {
     const hue = Number(e.target.value);
     const { r, g, b } = hsvToRgb(hue, hsv.s, hsv.v);
@@ -47,14 +61,23 @@ var ColorPicker = ({
   function handleInputChange(e) {
     const val = e.target.value;
     setInputValue(val);
-    if (isValidHex(val)) {
-      const hex = val.startsWith("#") ? val : `#${val}`;
+    const hex = parseColorInput(val);
+    if (hex) {
       onChange?.(hex);
     }
   }
+  function handleAlphaChange(e) {
+    setAlpha(Number(e.target.value) / 100);
+  }
   function handlePresetClick(color) {
     onChange?.(color);
   }
+  function handlePresetKeyDown(e, color) {
+    if (e.key === "Enter" || e.key === " " || e.key === "Spacebar") {
+      e.preventDefault();
+      handlePresetClick(color);
+    }
+  }
   useEffect(() => {
     if (!isOpen) return;
     function handleClickOutside(e) {
@@ -70,11 +93,15 @@ var ColorPicker = ({
       "div",
       {
         className: getColorPickerTriggerClasses(size, disabled),
-        style: { backgroundColor: value },
+        style: { backgroundColor: swatchColor },
         role: "button",
         "aria-label": "Pick color",
-        tabIndex: 0,
-        onClick: togglePanel
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-disabled": disabled || void 0,
+        tabIndex: disabled ? -1 : 0,
+        onClick: togglePanel,
+        onKeyDown: handleTriggerKeyDown
       }
     ),
     isOpen && /* @__PURE__ */ jsxs("div", { className: colorPickerPanelClasses, children: [
@@ -93,8 +120,23 @@ var ColorPicker = ({
           }
         )
       ] }),
+      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(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 100,
+            value: Math.round(alpha * 100),
+            className: "w-full h-2 rounded-full cursor-pointer accent-[var(--tiger-primary,#2563eb)]",
+            "aria-label": "Alpha",
+            onChange: handleAlphaChange
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-        /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1", children: "Hex" }),
+        /* @__PURE__ */ jsx("label", { className: "block text-xs text-[var(--tiger-text-muted,#6b7280)] mb-1 uppercase", children: format }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -111,19 +153,22 @@ var ColorPicker = ({
           "div",
           {
             className: "w-8 h-8 rounded border border-[var(--tiger-border,#d1d5db)]",
-            style: { backgroundColor: value },
+            style: { backgroundColor: swatchColor },
             "aria-label": "Color preview"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: value })
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-[var(--tiger-text,#111827)]", children: displayValue })
       ] }),
       presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: presets.map((color) => /* @__PURE__ */ jsx(
         "div",
         {
           className: colorPickerPresetClasses,
           style: { backgroundColor: color },
+          role: "button",
+          tabIndex: 0,
           "aria-label": `Select ${color}`,
-          onClick: () => handlePresetClick(color)
+          onClick: () => handlePresetClick(color),
+          onKeyDown: (e) => handlePresetKeyDown(e, color)
         },
         color
       )) })

package/dist/{chunk-B3O6MAC3.mjs → chunk-L55UK45A.mjs}

@@ -51,6 +51,8 @@ var InputNumber = ({
   formatter,
   parser,
   autoFocus = false,
+  incrementAriaLabel = "Increase",
+  decrementAriaLabel = "Decrease",
   onChange,
   onFocus,
   onBlur,
@@ -185,7 +187,7 @@ var InputNumber = ({
       {
         type: "button",
         tabIndex: -1,
-        "aria-label": "Decrease",
+        "aria-label": decrementAriaLabel,
         className: getInputNumberSideButtonClasses("left", disabled || atMin),
         disabled: disabled || atMin,
         onPointerDown: startStepRepeat("down"),
@@ -235,7 +237,7 @@ var InputNumber = ({
       {
         type: "button",
         tabIndex: -1,
-        "aria-label": "Increase",
+        "aria-label": incrementAriaLabel,
         className: getInputNumberSideButtonClasses("right", disabled || atMax),
         disabled: disabled || atMax,
         onPointerDown: startStepRepeat("up"),
@@ -263,7 +265,7 @@ var InputNumber = ({
         {
           type: "button",
           tabIndex: -1,
-          "aria-label": "Increase",
+          "aria-label": incrementAriaLabel,
           className: getInputNumberStepButtonClasses("up", disabled || atMax),
           disabled: disabled || atMax,
           onPointerDown: startStepRepeat("up"),
@@ -288,7 +290,7 @@ var InputNumber = ({
         {
           type: "button",
           tabIndex: -1,
-          "aria-label": "Decrease",
+          "aria-label": decrementAriaLabel,
           className: getInputNumberStepButtonClasses("down", disabled || atMin),
           disabled: disabled || atMin,
           onPointerDown: startStepRepeat("down"),

package/dist/{chunk-3HPDLIX3.mjs → chunk-LADKKOJT.mjs}

@@ -21,6 +21,8 @@ var Stepper = ({
   size = "md",
   precision,
   className,
+  incrementAriaLabel = "Increase",
+  decrementAriaLabel = "Decrease",
   onChange
 }) => {
   const repeatControllerRef = useRef(createRafRepeatActionController());
@@ -73,7 +75,7 @@ var Stepper = ({
         type: "button",
         className: getStepperButtonClasses(size, disabled || atMin, "left"),
         disabled: disabled || atMin,
-        "aria-label": "Decrease",
+        "aria-label": decrementAriaLabel,
         onPointerDown: startStepRepeat("down"),
         onPointerUp: stopStepRepeat,
         onPointerLeave: stopStepRepeat,
@@ -102,7 +104,7 @@ var Stepper = ({
         type: "button",
         className: getStepperButtonClasses(size, disabled || atMax, "right"),
         disabled: disabled || atMax,
-        "aria-label": "Increase",
+        "aria-label": incrementAriaLabel,
         onPointerDown: startStepRepeat("up"),
         onPointerUp: stopStepRepeat,
         onPointerLeave: stopStepRepeat,

package/dist/{chunk-2PZICT2T.mjs → chunk-LZKBDQE4.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-DKNVSQSV.mjs";
 import {
   ChartLegend
-} from "./chunk-ZG2W4HS5.mjs";
+} from "./chunk-F2ITBDUS.mjs";
 
 // src/components/SunburstChart.tsx
 import { useId, useMemo } from "react";

package/dist/{chunk-K6JLLCY7.mjs → chunk-MGQWVJHX.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-MEFARVQI.mjs";
 import {
   useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/TimePicker.tsx
 import {
@@ -348,7 +348,7 @@ function useTimePickerState(allProps) {
     }, 0);
     return () => window.clearTimeout(focusTimer);
   }, [isOpen, activePart]);
-  const inputClasses = getTimePickerInputClasses(size, disabled || readonly);
+  const inputClasses = getTimePickerInputClasses(size, disabled || readonly, showClearButton);
   const iconButtonClasses = getTimePickerIconButtonClasses(size);
   return {
     panelRef,

package/dist/{chunk-H4MPPCTB.mjs → chunk-MOWK7CND.mjs}

@@ -1,6 +1,6 @@
 import {
   useTigerConfig
-} from "./chunk-QAIBQHIO.mjs";
+} from "./chunk-YSIXURBW.mjs";
 
 // src/components/NumberKeyboard.tsx
 import { useMemo, useState } from "react";