@expcat/tigercat-react 0.3.0 → 0.3.69

package/dist/{chunk-IIVRVCCP.mjs → chunk-NKKIJQMV.mjs}

@@ -1,5 +1,5 @@
-import { memo, useState, useRef, useEffect, useCallback } from 'react';
-import { sliderNormalizeValue, sliderGetPercentage, getSliderTrackClasses, getSliderThumbClasses, getSliderTooltipClasses, classNames, sliderRangeClasses, sliderBaseClasses, sliderGetKeyboardValue } from '@expcat/tigercat-core';
+import { memo, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { sliderGetPercentage, sliderGetValueFromPosition, sliderGetKeyboardValue, getSliderTrackClasses, getSliderThumbClasses, getSliderTooltipClasses, classNames, sliderRangeClasses, sliderBaseClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/Slider.tsx
@@ -17,8 +17,8 @@ var Thumb = memo(
     ariaLabel,
     ariaLabelledby,
     ariaDescribedby,
-    thumbClassesCombined,
-    tooltipClassesCombined,
+    thumbClasses,
+    tooltipClasses,
     setShowTooltip,
     handleStart,
     handleKeyDown,
@@ -29,7 +29,7 @@ var Thumb = memo(
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: thumbClassesCombined,
+        className: thumbClasses,
         style: { left: `${left}%` },
         tabIndex: disabled ? -1 : 0,
         role: "slider",
@@ -50,7 +50,7 @@ var Thumb = memo(
           if (!isDragging) setShowTooltip(false);
         },
         onKeyDown: (e) => handleKeyDown(e, value, thumbType),
-        children: showThumbTooltip && tooltip && /* @__PURE__ */ jsx("div", { className: tooltipClassesCombined, children: value })
+        children: showThumbTooltip && tooltip && /* @__PURE__ */ jsx("div", { className: tooltipClasses, children: value })
       }
     );
   }
@@ -91,10 +91,6 @@ var Slider = ({
       setInternalValue(controlledValue);
     }
   }, [controlledValue]);
-  const normalizeValue = useCallback(
-    (val) => sliderNormalizeValue(val, min, max, step),
-    [min, max, step]
-  );
   const getPercentage = useCallback(
     (val) => sliderGetPercentage(val, min, max),
     [min, max]
@@ -103,11 +99,9 @@ var Slider = ({
     (clientX) => {
       if (!trackRef.current) return min;
       const rect = trackRef.current.getBoundingClientRect();
-      const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
-      const rawValue = min + percentage * (max - min);
-      return normalizeValue(rawValue);
+      return sliderGetValueFromPosition(clientX - rect.left, rect.width, min, max, step);
     },
-    [min, max, normalizeValue]
+    [min, max, step]
   );
   const updateValue = useCallback(
     (newValue) => {
@@ -155,13 +149,16 @@ var Slider = ({
       };
     }
   }, [isDragging, handleMove, handleEnd]);
-  const handleStart = (event, thumb) => {
-    if (disabled) return;
-    event.preventDefault();
-    setIsDragging(true);
-    setActiveThumb(thumb);
-    if (tooltip) setShowTooltip(true);
-  };
+  const handleStart = useCallback(
+    (event, thumb) => {
+      if (disabled) return;
+      event.preventDefault();
+      setIsDragging(true);
+      setActiveThumb(thumb);
+      if (tooltip) setShowTooltip(true);
+    },
+    [disabled, tooltip]
+  );
   const handleTrackClick = (e) => {
     if (disabled) return;
     const newValue = getValueFromPosition(e.clientX);
@@ -178,34 +175,36 @@ var Slider = ({
       updateValue(newValue);
     }
   };
-  const handleKeyDown = (e, value, thumbType) => {
-    if (disabled) return;
-    const newValue = sliderGetKeyboardValue(e.key, value, min, max, step);
-    if (newValue === null) return;
-    e.preventDefault();
-    if (range && Array.isArray(internalValue)) {
-      const [minVal, maxVal] = internalValue;
-      if (thumbType === "min") {
-        updateValue([Math.min(newValue, maxVal), maxVal]);
-      } else if (thumbType === "max") {
-        updateValue([minVal, Math.max(newValue, minVal)]);
+  const handleKeyDown = useCallback(
+    (e, value, thumbType) => {
+      if (disabled) return;
+      const newValue = sliderGetKeyboardValue(e.key, value, min, max, step);
+      if (newValue === null) return;
+      e.preventDefault();
+      if (range && Array.isArray(internalValue)) {
+        const [minVal, maxVal] = internalValue;
+        if (thumbType === "min") {
+          updateValue([Math.min(newValue, maxVal), maxVal]);
+        } else if (thumbType === "max") {
+          updateValue([minVal, Math.max(newValue, minVal)]);
+        }
+      } else {
+        updateValue(newValue);
       }
-    } else {
-      updateValue(newValue);
+    },
+    [disabled, min, max, step, range, internalValue, updateValue]
+  );
+  const trackClasses = useMemo(() => getSliderTrackClasses(size, disabled), [size, disabled]);
+  const rangeStyles = useMemo(() => {
+    if (range && Array.isArray(internalValue)) {
+      const left = getPercentage(internalValue[0]);
+      return { left: `${left}%`, width: `${getPercentage(internalValue[1]) - left}%` };
     }
-  };
-  const trackStyles = getSliderTrackClasses(size, disabled);
-  const rangeStyles = range && Array.isArray(internalValue) ? {
-    left: `${getPercentage(internalValue[0])}%`,
-    width: `${getPercentage(internalValue[1]) - getPercentage(internalValue[0])}%`
-  } : {
-    left: "0%",
-    width: `${getPercentage(
-      typeof internalValue === "number" ? internalValue : internalValue[0]
-    )}%`
-  };
-  const thumbClassesCombined = getSliderThumbClasses(size, disabled);
-  const tooltipClassesCombined = getSliderTooltipClasses(size);
+    const val = typeof internalValue === "number" ? internalValue : internalValue[0];
+    return { left: "0%", width: `${getPercentage(val)}%` };
+  }, [range, internalValue, getPercentage]);
+  const thumbClasses = useMemo(() => getSliderThumbClasses(size, disabled), [size, disabled]);
+  const tooltipClasses = useMemo(() => getSliderTooltipClasses(size), [size]);
   const renderMarks = () => {
     if (!marks) return null;
     const marksObj = typeof marks === "boolean" ? {} : marks;
@@ -229,7 +228,7 @@ var Slider = ({
       className: classNames(sliderBaseClasses, disabled && "cursor-not-allowed", className),
       ...divProps,
       children: [
-        /* @__PURE__ */ jsxs("div", { ref: trackRef, className: trackStyles, onClick: handleTrackClick, children: [
+        /* @__PURE__ */ jsxs("div", { ref: trackRef, className: trackClasses, onClick: handleTrackClick, children: [
           /* @__PURE__ */ jsx("div", { className: sliderRangeClasses, style: rangeStyles }),
           range && Array.isArray(internalValue) ? /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(
@@ -242,14 +241,13 @@ var Slider = ({
                 showTooltip,
                 activeThumb,
                 isDragging,
-                size,
                 min,
                 max,
                 ariaLabel: ariaLabel ? `${ariaLabel} (min)` : "Minimum value",
                 ariaLabelledby,
                 ariaDescribedby,
-                thumbClassesCombined,
-                tooltipClassesCombined,
+                thumbClasses,
+                tooltipClasses,
                 setShowTooltip,
                 handleStart,
                 handleKeyDown,
@@ -266,14 +264,13 @@ var Slider = ({
                 showTooltip,
                 activeThumb,
                 isDragging,
-                size,
                 min,
                 max,
                 ariaLabel: ariaLabel ? `${ariaLabel} (max)` : "Maximum value",
                 ariaLabelledby,
                 ariaDescribedby,
-                thumbClassesCombined,
-                tooltipClassesCombined,
+                thumbClasses,
+                tooltipClasses,
                 setShowTooltip,
                 handleStart,
                 handleKeyDown,
@@ -289,14 +286,13 @@ var Slider = ({
               showTooltip,
               activeThumb,
               isDragging,
-              size,
               min,
               max,
               ariaLabel,
               ariaLabelledby,
               ariaDescribedby,
-              thumbClassesCombined,
-              tooltipClassesCombined,
+              thumbClasses,
+              tooltipClasses,
               setShowTooltip,
               handleStart,
               handleKeyDown,

package/dist/{chunk-MQXBU5YX.mjs → chunk-NQFHS4W2.mjs}

@@ -1,6 +1,6 @@
-import { RadioGroupContext } from './chunk-5HUYCSA4.mjs';
-import { useContext, useState } from 'react';
-import { getRadioColorClasses, getRadioVisualClasses, getRadioDotClasses, getRadioLabelClasses, classNames } from '@expcat/tigercat-core';
+import { RadioGroupContext } from './chunk-HPXLUJFJ.mjs';
+import { useContext, useState, useMemo } from 'react';
+import { getRadioVisualClasses, defaultRadioColors, getRadioDotClasses, getRadioLabelClasses, classNames, radioRootBaseClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var Radio = ({
@@ -24,23 +24,31 @@ var Radio = ({
   const actualDisabled = disabled !== void 0 ? disabled : groupContext?.disabled || false;
   const actualName = name || groupContext?.name || "";
   const isChecked = checked !== void 0 ? checked : groupContext?.value !== void 0 ? groupContext.value === value : internalChecked;
-  const colors = getRadioColorClasses();
-  const radioClasses = getRadioVisualClasses({
-    size: actualSize,
-    checked: isChecked,
-    disabled: actualDisabled,
-    colors
-  });
-  const dotClasses = getRadioDotClasses({
-    size: actualSize,
-    checked: isChecked,
-    colors
-  });
-  const labelClasses = getRadioLabelClasses({
-    size: actualSize,
-    disabled: actualDisabled,
-    colors
-  });
+  const radioClasses = useMemo(
+    () => getRadioVisualClasses({
+      size: actualSize,
+      checked: isChecked,
+      disabled: actualDisabled,
+      colors: defaultRadioColors
+    }),
+    [actualSize, isChecked, actualDisabled]
+  );
+  const dotClasses = useMemo(
+    () => getRadioDotClasses({
+      size: actualSize,
+      checked: isChecked,
+      colors: defaultRadioColors
+    }),
+    [actualSize, isChecked]
+  );
+  const labelClasses = useMemo(
+    () => getRadioLabelClasses({
+      size: actualSize,
+      disabled: actualDisabled,
+      colors: defaultRadioColors
+    }),
+    [actualSize, actualDisabled]
+  );
   const handleChange = (event) => {
     if (actualDisabled) {
       event.preventDefault();
@@ -64,7 +72,7 @@ var Radio = ({
       if (!input.checked) input.click();
     }
   };
-  return /* @__PURE__ */ jsxs("label", { className: classNames("inline-flex items-center", className), style, children: [
+  return /* @__PURE__ */ jsxs("label", { className: classNames(radioRootBaseClasses, className), style, children: [
     /* @__PURE__ */ jsx(
       "input",
       {

package/dist/chunk-NTODO3Q3.mjs

@@ -0,0 +1,94 @@
+import { StatusIcon } from './chunk-FLYJVZED.mjs';
+import { useState, useMemo, useCallback } from 'react';
+import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, alertCloseIconPath } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Alert = ({
+  type = "info",
+  size = "md",
+  title,
+  description,
+  showIcon = true,
+  closable = false,
+  closeAriaLabel = "Close alert",
+  className,
+  children,
+  titleSlot,
+  descriptionSlot,
+  onClose,
+  ...props
+}) => {
+  const [visible, setVisible] = useState(true);
+  const colorScheme = useMemo(
+    () => getAlertTypeClasses(type, defaultAlertThemeColors),
+    [type]
+  );
+  const alertClasses = useMemo(
+    () => classNames(
+      alertBaseClasses,
+      alertSizeClasses[size],
+      colorScheme.bg,
+      colorScheme.border,
+      className
+    ),
+    [size, colorScheme, className]
+  );
+  const iconClasses = useMemo(
+    () => classNames(alertIconSizeClasses[size], colorScheme.icon),
+    [size, colorScheme]
+  );
+  const titleClasses = useMemo(
+    () => classNames(alertTitleSizeClasses[size], colorScheme.title),
+    [size, colorScheme]
+  );
+  const descriptionClasses = useMemo(
+    () => classNames(alertDescriptionSizeClasses[size], colorScheme.description),
+    [size, colorScheme]
+  );
+  const closeButtonClasses = useMemo(
+    () => classNames(
+      alertCloseButtonBaseClasses,
+      colorScheme.closeButton,
+      colorScheme.closeButtonHover,
+      colorScheme.focus
+    ),
+    [colorScheme]
+  );
+  const handleClose = useCallback(
+    (event) => {
+      onClose?.(event);
+      if (!event.defaultPrevented) {
+        setVisible(false);
+      }
+    },
+    [onClose]
+  );
+  if (!visible) {
+    return null;
+  }
+  const iconPath = getAlertIconPath(type);
+  const hasTitle = !!(title || titleSlot);
+  const hasDescription = !!(description || descriptionSlot);
+  const hasDefaultContent = !hasTitle && !hasDescription && !!children;
+  const hasContent = hasTitle || hasDescription || hasDefaultContent;
+  return /* @__PURE__ */ jsxs("div", { ...props, className: alertClasses, role: "alert", children: [
+    showIcon && /* @__PURE__ */ jsx("div", { className: alertIconContainerClasses, children: /* @__PURE__ */ jsx(StatusIcon, { path: iconPath, className: iconClasses }) }),
+    hasContent && /* @__PURE__ */ jsxs("div", { className: alertContentClasses, children: [
+      hasTitle && /* @__PURE__ */ jsx("div", { className: titleClasses, children: titleSlot || title }),
+      hasDescription && /* @__PURE__ */ jsx("div", { className: descriptionClasses, children: descriptionSlot || description }),
+      hasDefaultContent && /* @__PURE__ */ jsx("div", { className: titleClasses, children })
+    ] }),
+    closable && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: closeButtonClasses,
+        onClick: handleClose,
+        "aria-label": closeAriaLabel,
+        type: "button",
+        children: /* @__PURE__ */ jsx(StatusIcon, { path: alertCloseIconPath, className: "h-4 w-4" })
+      }
+    )
+  ] });
+};
+
+export { Alert };

package/dist/{chunk-NDOYQK2R.mjs → chunk-NZLOLMT2.mjs}

@@ -1,5 +1,5 @@
 import { useMemo, useState, useCallback } from 'react';
-import { getPaginationLabels, getTotalPages, validateCurrentPage, getPageRange, getPaginationContainerClasses, defaultTotalText, getTotalTextClasses, getPaginationButtonBaseClasses, classNames, getPageNumbers, getPaginationEllipsisClasses, formatPageAriaLabel, getPaginationButtonActiveClasses, getPageSizeSelectorClasses, getQuickJumperInputClasses } from '@expcat/tigercat-core';
+import { getPaginationLabels, getTotalPages, validateCurrentPage, getPageRange, getPaginationContainerClasses, defaultTotalText, getTotalTextClasses, getPaginationButtonBaseClasses, classNames, getSizeTextClasses, getPageNumbers, getPaginationEllipsisClasses, formatPageAriaLabel, getPaginationButtonActiveClasses, getPageSizeSelectorClasses, getQuickJumperInputClasses } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/components/Pagination.tsx
@@ -109,81 +109,39 @@ var Pagination = ({
     });
   }, [pageSizeOptions, labels.itemsPerPageText]);
   const containerClasses = getPaginationContainerClasses(align, className);
+  const prevDisabled = validatedCurrentPage <= 1 || disabled;
+  const nextDisabled = validatedCurrentPage >= totalPages || disabled;
   const elements = [];
   if (showTotal) {
     const totalTextFn = totalText || defaultTotalText;
-    const totalTextContent = totalTextFn(total, pageRange);
     elements.push(
-      /* @__PURE__ */ jsx("span", { className: getTotalTextClasses(size), children: totalTextContent }, "total")
+      /* @__PURE__ */ jsx("span", { className: getTotalTextClasses(size), children: totalTextFn(total, pageRange) }, "total")
     );
   }
+  elements.push(
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getPaginationButtonBaseClasses(size),
+        disabled: prevDisabled,
+        onClick: () => handlePageChange(validatedCurrentPage - 1),
+        "aria-label": labels.prevPageAriaLabel,
+        children: "\u2039"
+      },
+      "prev"
+    )
+  );
   if (simple) {
-    const prevDisabled = validatedCurrentPage <= 1 || disabled;
-    const nextDisabled = validatedCurrentPage >= totalPages || disabled;
-    elements.push(
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: getPaginationButtonBaseClasses(size),
-          disabled: prevDisabled,
-          onClick: () => handlePageChange(validatedCurrentPage - 1),
-          "aria-label": labels.prevPageAriaLabel,
-          children: "\u2039"
-        },
-        "prev"
-      )
-    );
     elements.push(
-      /* @__PURE__ */ jsxs(
-        "span",
-        {
-          className: classNames(
-            "mx-2",
-            size === "small" ? "text-sm" : size === "large" ? "text-lg" : "text-base"
-          ),
-          children: [
-            validatedCurrentPage,
-            " / ",
-            totalPages
-          ]
-        },
-        "current"
-      )
-    );
-    elements.push(
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: getPaginationButtonBaseClasses(size),
-          disabled: nextDisabled,
-          onClick: () => handlePageChange(validatedCurrentPage + 1),
-          "aria-label": labels.nextPageAriaLabel,
-          children: "\u203A"
-        },
-        "next"
-      )
+      /* @__PURE__ */ jsxs("span", { className: classNames("mx-2", getSizeTextClasses(size)), children: [
+        validatedCurrentPage,
+        " / ",
+        totalPages
+      ] }, "current")
     );
   } else {
-    const prevDisabled = validatedCurrentPage <= 1 || disabled;
-    const nextDisabled = validatedCurrentPage >= totalPages || disabled;
-    elements.push(
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: getPaginationButtonBaseClasses(size),
-          disabled: prevDisabled,
-          onClick: () => handlePageChange(validatedCurrentPage - 1),
-          "aria-label": labels.prevPageAriaLabel,
-          children: "\u2039"
-        },
-        "prev"
-      )
-    );
-    const pageNumbers = getPageNumbers(validatedCurrentPage, totalPages, showLessItems);
-    pageNumbers.forEach((pageNum, index) => {
+    getPageNumbers(validatedCurrentPage, totalPages, showLessItems).forEach((pageNum, index) => {
       if (pageNum === "...") {
         elements.push(
           /* @__PURE__ */ jsx(
@@ -218,21 +176,21 @@ var Pagination = ({
         );
       }
     });
-    elements.push(
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: getPaginationButtonBaseClasses(size),
-          disabled: nextDisabled,
-          onClick: () => handlePageChange(validatedCurrentPage + 1),
-          "aria-label": labels.nextPageAriaLabel,
-          children: "\u203A"
-        },
-        "next"
-      )
-    );
   }
+  elements.push(
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getPaginationButtonBaseClasses(size),
+        disabled: nextDisabled,
+        onClick: () => handlePageChange(validatedCurrentPage + 1),
+        "aria-label": labels.nextPageAriaLabel,
+        children: "\u203A"
+      },
+      "next"
+    )
+  );
   if (showSizeChanger) {
     elements.push(
       /* @__PURE__ */ jsx(
@@ -250,18 +208,9 @@ var Pagination = ({
     );
   }
   if (showQuickJumper) {
+    const sizeText = getSizeTextClasses(size);
     elements.push(
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: classNames(
-            "ml-2",
-            size === "small" ? "text-sm" : size === "large" ? "text-lg" : "text-base"
-          ),
-          children: labels.jumpToText
-        },
-        "jumper-label-start"
-      )
+      /* @__PURE__ */ jsx("span", { className: classNames("ml-2", sizeText), children: labels.jumpToText }, "jumper-label-start")
     );
     elements.push(
       /* @__PURE__ */ jsx(
@@ -281,14 +230,7 @@ var Pagination = ({
       )
     );
     elements.push(
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: size === "small" ? "text-sm" : size === "large" ? "text-lg" : "text-base",
-          children: labels.pageText
-        },
-        "jumper-label-end"
-      )
+      /* @__PURE__ */ jsx("span", { className: sizeText, children: labels.pageText }, "jumper-label-end")
     );
   }
   return /* @__PURE__ */ jsx(

package/dist/chunk-O3W3OZ6V.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Divider.tsx
+var Divider = ({
+  orientation = "horizontal",
+  lineStyle = "solid",
+  spacing = "md",
+  color,
+  thickness,
+  className,
+  ...props
+}) => {
+  const classes = react.useMemo(() => {
+    const base = tigercatCore.getDividerClasses(orientation, lineStyle, spacing);
+    return className ? `${base} ${className}` : base;
+  }, [orientation, lineStyle, spacing, className]);
+  const style = react.useMemo(
+    () => tigercatCore.getDividerStyle(orientation, color, thickness),
+    [color, thickness, orientation]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: classes,
+      style,
+      role: "separator",
+      "aria-orientation": orientation
+    }
+  );
+};
+
+exports.Divider = Divider;

package/dist/{chunk-IFY46RWU.js → chunk-OESNOOOT.js}

@@ -16,8 +16,7 @@ var Sidebar = ({
   const sidebarStyle = {
     ...style,
     width: collapsed ? "0px" : width,
-    minWidth: collapsed ? "0px" : width,
-    overflow: "hidden"
+    minWidth: collapsed ? "0px" : width
   };
   return /* @__PURE__ */ jsxRuntime.jsx("aside", { className: sidebarClasses, style: sidebarStyle, ...props, children: !collapsed && children });
 };

package/dist/{chunk-IWENGARY.mjs → chunk-OFBK35TK.mjs}

@@ -1,4 +1,4 @@
-import { MenuItem } from './chunk-NSGDRTSQ.mjs';
+import { MenuItem } from './chunk-D5KYIQWB.mjs';
 import React from 'react';
 import { menuItemGroupTitleClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';