@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-3XKBDV2Q.mjs → chunk-TUA5PDRX.mjs}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { classNames, iconWrapperClasses, SVG_DEFAULT_STROKE, SVG_DEFAULT_FILL, SVG_DEFAULT_VIEWBOX_24, SVG_DEFAULT_XMLNS, iconSvgBaseClasses, iconSizeClasses } from '@expcat/tigercat-core';
+import { classNames, iconWrapperClasses, iconSvgDefaultStrokeLinejoin, iconSvgDefaultStrokeLinecap, iconSvgDefaultStrokeWidth, SVG_DEFAULT_STROKE, SVG_DEFAULT_FILL, SVG_DEFAULT_VIEWBOX_24, SVG_DEFAULT_XMLNS, iconSvgBaseClasses, iconSizeClasses } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/Icon.tsx
@@ -7,14 +7,13 @@ var Icon = ({
   size = "md",
   color = "currentColor",
   className,
+  style,
   children,
   ...props
 }) => {
-  const iconStyle = { ...props.style, color };
   const iconClasses = classNames(iconWrapperClasses, className);
-  const ariaLabel = props["aria-label"];
-  const ariaLabelledBy = props["aria-labelledby"];
-  const isDecorative = ariaLabel == null && ariaLabelledBy == null && props.role == null;
+  const iconStyle = { ...style, color };
+  const isDecorative = props["aria-label"] == null && props["aria-labelledby"] == null && props.role == null;
   const processedChildren = React.Children.map(children, (child) => {
     if (!React.isValidElement(child) || child.type !== "svg") {
       return child;
@@ -27,9 +26,9 @@ var Icon = ({
       viewBox: svgProps.viewBox ?? SVG_DEFAULT_VIEWBOX_24,
       fill: svgProps.fill ?? SVG_DEFAULT_FILL,
       stroke: svgProps.stroke ?? SVG_DEFAULT_STROKE,
-      strokeWidth: svgProps.strokeWidth ?? 2,
-      strokeLinecap: svgProps.strokeLinecap ?? "round",
-      strokeLinejoin: svgProps.strokeLinejoin ?? "round"
+      strokeWidth: svgProps.strokeWidth ?? iconSvgDefaultStrokeWidth,
+      strokeLinecap: svgProps.strokeLinecap ?? iconSvgDefaultStrokeLinecap,
+      strokeLinejoin: svgProps.strokeLinejoin ?? iconSvgDefaultStrokeLinejoin
     });
   });
   return /* @__PURE__ */ jsx(

package/dist/chunk-U3JOBIDU.js

@@ -0,0 +1,355 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ImageCropper.tsx
+var ImageCropper = react.forwardRef(
+  ({
+    src,
+    aspectRatio,
+    minWidth = 20,
+    minHeight = 20,
+    outputType = "image/png",
+    quality = 0.92,
+    guides = true,
+    className,
+    style,
+    onCropChange,
+    onReady
+  }, ref) => {
+    const containerRef = react.useRef(null);
+    const imageRef = react.useRef(null);
+    const [imageLoaded, setImageLoaded] = react.useState(false);
+    const [displayWidth, setDisplayWidth] = react.useState(0);
+    const [displayHeight, setDisplayHeight] = react.useState(0);
+    const [cropRect, setCropRect] = react.useState({ x: 0, y: 0, width: 0, height: 0 });
+    const dragModeRef = react.useRef("none");
+    const activeHandleRef = react.useRef(null);
+    const dragStartPosRef = react.useRef({ x: 0, y: 0 });
+    const dragStartRectRef = react.useRef({ x: 0, y: 0, width: 0, height: 0 });
+    const displayDimsRef = react.useRef({ w: 0, h: 0 });
+    react.useEffect(() => {
+      displayDimsRef.current = { w: displayWidth, h: displayHeight };
+    }, [displayWidth, displayHeight]);
+    react.useEffect(() => {
+      setImageLoaded(false);
+      const img = new window.Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        imageRef.current = img;
+        const container = containerRef.current;
+        const containerW = container ? container.clientWidth : img.naturalWidth;
+        const containerH = container ? container.clientHeight || 400 : img.naturalHeight;
+        const ratio = Math.min(containerW / img.naturalWidth, containerH / img.naturalHeight, 1);
+        const dw = img.naturalWidth * ratio;
+        const dh = img.naturalHeight * ratio;
+        setDisplayWidth(dw);
+        setDisplayHeight(dh);
+        displayDimsRef.current = { w: dw, h: dh };
+        const initial = tigercatCore.getInitialCropRect(dw, dh, aspectRatio);
+        setCropRect(initial);
+        setImageLoaded(true);
+        onReady?.();
+      };
+      img.src = src;
+    }, [src, aspectRatio, onReady]);
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        getCropResult: () => {
+          return new Promise((resolve, reject) => {
+            if (!imageRef.current) {
+              reject(new Error("Image not loaded"));
+              return;
+            }
+            const { canvas, dataUrl } = tigercatCore.cropCanvas(
+              imageRef.current,
+              cropRect,
+              displayWidth,
+              displayHeight,
+              outputType,
+              quality
+            );
+            canvas.toBlob(
+              (blob) => {
+                if (blob) {
+                  resolve({ canvas, blob, dataUrl, cropRect: { ...cropRect } });
+                } else {
+                  reject(new Error("Failed to create blob"));
+                }
+              },
+              outputType,
+              quality
+            );
+          });
+        }
+      }),
+      [cropRect, displayWidth, displayHeight, outputType, quality]
+    );
+    const handleMouseDown = react.useCallback(
+      (e, mode, handle) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragModeRef.current = mode;
+        activeHandleRef.current = handle || null;
+        dragStartPosRef.current = { x: e.clientX, y: e.clientY };
+        dragStartRectRef.current = { ...cropRect };
+        const onMouseMove = (ev) => {
+          const dx = ev.clientX - dragStartPosRef.current.x;
+          const dy = ev.clientY - dragStartPosRef.current.y;
+          const dims = displayDimsRef.current;
+          let newRect;
+          if (dragModeRef.current === "move") {
+            newRect = tigercatCore.moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = tigercatCore.resizeCropRect(
+              dragStartRectRef.current,
+              activeHandleRef.current,
+              dx,
+              dy,
+              dims.w,
+              dims.h,
+              aspectRatio,
+              minWidth,
+              minHeight
+            );
+          }
+          setCropRect(newRect);
+          onCropChange?.(newRect);
+        };
+        const onMouseUp = () => {
+          dragModeRef.current = "none";
+          activeHandleRef.current = null;
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
+    );
+    const handleTouchStart = react.useCallback(
+      (e, mode, handle) => {
+        if (e.touches.length !== 1) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const touch = e.touches[0];
+        dragModeRef.current = mode;
+        activeHandleRef.current = handle || null;
+        dragStartPosRef.current = { x: touch.clientX, y: touch.clientY };
+        dragStartRectRef.current = { ...cropRect };
+        const onTouchMove = (ev) => {
+          if (ev.touches.length !== 1) return;
+          const t = ev.touches[0];
+          const dx = t.clientX - dragStartPosRef.current.x;
+          const dy = t.clientY - dragStartPosRef.current.y;
+          const dims = displayDimsRef.current;
+          let newRect;
+          if (dragModeRef.current === "move") {
+            newRect = tigercatCore.moveCropRect(dragStartRectRef.current, dx, dy, dims.w, dims.h);
+          } else {
+            newRect = tigercatCore.resizeCropRect(
+              dragStartRectRef.current,
+              activeHandleRef.current,
+              dx,
+              dy,
+              dims.w,
+              dims.h,
+              aspectRatio,
+              minWidth,
+              minHeight
+            );
+          }
+          setCropRect(newRect);
+          onCropChange?.(newRect);
+        };
+        const onTouchEnd = () => {
+          dragModeRef.current = "none";
+          activeHandleRef.current = null;
+          document.removeEventListener("touchmove", onTouchMove);
+          document.removeEventListener("touchend", onTouchEnd);
+        };
+        document.addEventListener("touchmove", onTouchMove, { passive: false });
+        document.addEventListener("touchend", onTouchEnd);
+      },
+      [cropRect, aspectRatio, minWidth, minHeight, onCropChange]
+    );
+    const containerClasses = react.useMemo(
+      () => tigercatCore.classNames(tigercatCore.imageCropperContainerClasses, className),
+      [className]
+    );
+    const cr = cropRect;
+    if (!imageLoaded) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: tigercatCore.classNames(containerClasses, "flex items-center justify-center"),
+          style: { ...style, minHeight: "200px" },
+          role: "img",
+          "aria-label": "Loading image for cropping",
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin" })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: containerClasses,
+        style: {
+          ...style,
+          width: `${displayWidth}px`,
+          height: `${displayHeight}px`
+        },
+        role: "application",
+        "aria-label": "Image cropper",
+        "aria-roledescription": "image cropper",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src,
+              className: tigercatCore.imageCropperImgClasses,
+              style: { width: `${displayWidth}px`, height: `${displayHeight}px` },
+              draggable: false,
+              alt: "Image to crop"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: tigercatCore.imageCropperMaskClasses,
+              width: displayWidth,
+              height: displayHeight,
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: "crop-mask", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: displayWidth, height: displayHeight, fill: "white" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: cr.x, y: cr.y, width: cr.width, height: cr.height, fill: "black" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  {
+                    width: displayWidth,
+                    height: displayHeight,
+                    fill: "var(--tiger-image-cropper-mask, rgba(0,0,0,0.55))",
+                    mask: "url(#crop-mask)"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.imageCropperSelectionClasses,
+              style: {
+                left: `${cr.x}px`,
+                top: `${cr.y}px`,
+                width: `${cr.width}px`,
+                height: `${cr.height}px`
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: tigercatCore.imageCropperDragAreaClasses,
+              style: {
+                left: `${cr.x}px`,
+                top: `${cr.y}px`,
+                width: `${cr.width}px`,
+                height: `${cr.height}px`
+              },
+              onMouseDown: (e) => handleMouseDown(e, "move"),
+              onTouchStart: (e) => handleTouchStart(e, "move")
+            }
+          ),
+          guides && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x}px`,
+                  top: `${cr.y + cr.height / 3}px`,
+                  width: `${cr.width}px`,
+                  height: 0,
+                  borderTopWidth: "1px",
+                  borderTopStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x}px`,
+                  top: `${cr.y + cr.height * 2 / 3}px`,
+                  width: `${cr.width}px`,
+                  height: 0,
+                  borderTopWidth: "1px",
+                  borderTopStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.imageCropperGuideClasses,
+                style: {
+                  left: `${cr.x + cr.width * 2 / 3}px`,
+                  top: `${cr.y}px`,
+                  width: 0,
+                  height: `${cr.height}px`,
+                  borderLeftWidth: "1px",
+                  borderLeftStyle: "dashed"
+                }
+              }
+            )
+          ] }),
+          tigercatCore.CROP_HANDLES.map((handle) => {
+            const pos = {};
+            if (handle.includes("n")) pos.top = `${cr.y}px`;
+            if (handle.includes("s")) pos.top = `${cr.y + cr.height}px`;
+            if (handle === "e" || handle === "w") pos.top = `${cr.y + cr.height / 2}px`;
+            if (handle.includes("w")) pos.left = `${cr.x}px`;
+            if (handle.includes("e")) pos.left = `${cr.x + cr.width}px`;
+            if (handle === "n" || handle === "s") pos.left = `${cr.x + cr.width / 2}px`;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: tigercatCore.getCropperHandleClasses(handle),
+                style: pos,
+                onMouseDown: (e) => handleMouseDown(e, "resize", handle),
+                onTouchStart: (e) => handleTouchStart(e, "resize", handle)
+              },
+              handle
+            );
+          })
+        ]
+      }
+    );
+  }
+);
+ImageCropper.displayName = "ImageCropper";
+
+exports.ImageCropper = ImageCropper;

package/dist/{chunk-CES6LGQ7.mjs → chunk-UE234MW4.mjs}

@@ -1,5 +1,5 @@
-import { useState, useRef, useEffect } from 'react';
-import { parseTime, to12HourFormat, getTimePickerLabels, getTimePeriodLabels, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, classNames, timePickerInputWrapperClasses, timePickerClearButtonClasses, TimePickerCloseIconPath, ClockIconPath, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, timePickerBaseClasses, isTimeInRange, formatTime, getCurrentTime, icon20ViewBox } from '@expcat/tigercat-core';
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { parseTime, getTimePickerLabels, getTimePeriodLabels, formatTimeDisplayWithLocale, generateHours, generateMinutes, generateSeconds, getTimePickerInputClasses, getTimePickerIconButtonClasses, classNames, timePickerInputWrapperClasses, timePickerClearButtonClasses, TimePickerCloseIconPath, ClockIconPath, timePickerPanelClasses, timePickerRangeHeaderClasses, getTimePickerRangeTabButtonClasses, timePickerPanelContentClasses, timePickerColumnClasses, timePickerColumnHeaderClasses, timePickerColumnListClasses, to24HourFormat, getTimePickerOptionAriaLabel, getTimePickerItemClasses, getTimePickerPeriodButtonClasses, timePickerFooterClasses, timePickerFooterButtonClasses, timePickerBaseClasses, to12HourFormat, isTimeInRange, formatTime, getCurrentTime, icon20ViewBox } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/TimePicker.tsx
@@ -78,31 +78,37 @@ var TimePicker = (allProps) => {
   const [selectedMinutes, setSelectedMinutes] = useState(parsedTime?.minutes ?? 0);
   const [selectedSeconds, setSelectedSeconds] = useState(parsedTime?.seconds ?? 0);
   const [selectedPeriod, setSelectedPeriod] = useState("AM");
-  useEffect(() => {
+  const syncFromActiveValue = () => {
     const parsed = parseTime(activeValue);
-    if (parsed) {
-      setSelectedHours(parsed.hours);
-      setSelectedMinutes(parsed.minutes);
-      setSelectedSeconds(parsed.seconds);
-      if (format === "12") {
-        const { period } = to12HourFormat(parsed.hours);
-        setSelectedPeriod(period);
-      }
+    if (!parsed) return;
+    setSelectedHours(parsed.hours);
+    setSelectedMinutes(parsed.minutes);
+    setSelectedSeconds(parsed.seconds);
+    if (format === "12") {
+      const { period } = to12HourFormat(parsed.hours);
+      setSelectedPeriod(period);
     }
+  };
+  useEffect(() => {
+    syncFromActiveValue();
   }, [activeValue, format, activePart, isRangeMode]);
-  const labels = getTimePickerLabels(locale, labelsOverrides);
+  const labels = useMemo(
+    () => getTimePickerLabels(locale, labelsOverrides),
+    [locale, labelsOverrides]
+  );
   const placeholder = allProps.placeholder ?? (isRangeMode ? labels.selectTimeRange : labels.selectTime);
-  const periodLabels = getTimePeriodLabels(locale);
-  const singleDisplayValue = parsedTime ? formatTimeDisplayWithLocale(
-    parsedTime.hours,
-    parsedTime.minutes,
-    parsedTime.seconds,
-    format,
-    showSeconds,
-    locale
-  ) : "";
+  const periodLabels = useMemo(() => getTimePeriodLabels(locale), [locale]);
   const displayValue = (() => {
-    if (!isRangeMode) return singleDisplayValue;
+    if (!isRangeMode) {
+      return parsedTime ? formatTimeDisplayWithLocale(
+        parsedTime.hours,
+        parsedTime.minutes,
+        parsedTime.seconds,
+        format,
+        showSeconds,
+        locale
+      ) : "";
+    }
     const toDisplay = (timeStr) => {
       const parsed = parseTime(timeStr);
       if (!parsed) return "";
@@ -125,9 +131,9 @@ var TimePicker = (allProps) => {
     if (!isRangeMode) return currentSingleValue !== null;
     return currentRangeValue[0] !== null || currentRangeValue[1] !== null;
   })();
-  const hoursList = generateHours(hourStep, format);
-  const minutesList = generateMinutes(minuteStep);
-  const secondsList = generateSeconds(secondStep);
+  const hoursList = useMemo(() => generateHours(hourStep, format), [hourStep, format]);
+  const minutesList = useMemo(() => generateMinutes(minuteStep), [minuteStep]);
+  const secondsList = useMemo(() => generateSeconds(secondStep), [secondStep]);
   const togglePanel = () => {
     if (!disabled && !readonly) {
       if (isOpen) {
@@ -135,15 +141,7 @@ var TimePicker = (allProps) => {
         return;
       }
       setIsOpen(true);
-      if (parsedTime) {
-        setSelectedHours(parsedTime.hours);
-        setSelectedMinutes(parsedTime.minutes);
-        setSelectedSeconds(parsedTime.seconds);
-        if (format === "12") {
-          const { period } = to12HourFormat(parsedTime.hours);
-          setSelectedPeriod(period);
-        }
-      }
+      syncFromActiveValue();
     }
   };
   const closePanel = () => {
@@ -428,7 +426,6 @@ var TimePicker = (allProps) => {
             /* @__PURE__ */ jsxs("div", { className: timePickerColumnClasses, children: [
               /* @__PURE__ */ jsx("div", { className: timePickerColumnHeaderClasses, children: labels.hour }),
               /* @__PURE__ */ jsx("div", { className: timePickerColumnListClasses, children: hoursList.map((hour) => {
-                const displayHour = format === "12" ? hour : hour;
                 const hours24 = format === "12" ? to24HourFormat(hour, selectedPeriod) : hour;
                 const isSelected = selectedHours === hours24;
                 const isDisabled = isHourDisabled(hour);
@@ -441,13 +438,13 @@ var TimePicker = (allProps) => {
                     onClick: () => selectHour(hour),
                     "data-tiger-timepicker-unit": "hour",
                     "aria-label": getTimePickerOptionAriaLabel(
-                      displayHour,
+                      hour,
                       "hour",
                       locale,
                       labelsOverrides
                     ),
                     "aria-selected": isSelected,
-                    children: displayHour.toString().padStart(2, "0")
+                    children: hour.toString().padStart(2, "0")
                   },
                   hour
                 );

package/dist/{chunk-U4ZVEPYD.js → chunk-URM7QDHH.js}

@@ -21,7 +21,7 @@ var Checkbox = ({
   const [internalChecked, setInternalChecked] = react.useState(defaultChecked);
   const isControlled = controlledChecked !== void 0;
   const effectiveSize = propSize || groupContext?.size || "md";
-  const effectiveDisabled = propDisabled !== void 0 ? propDisabled : groupContext?.disabled || false;
+  const effectiveDisabled = propDisabled || groupContext?.disabled || false;
   const checked = groupContext && value !== void 0 ? groupContext.value.includes(value) : isControlled ? controlledChecked : internalChecked;
   const checkboxRef = react.useRef(null);
   react.useEffect(() => {
@@ -42,28 +42,24 @@ var Checkbox = ({
     }
   };
   const checkboxClasses = tigercatCore.getCheckboxClasses(effectiveSize, effectiveDisabled);
+  const inputProps = {
+    ref: checkboxRef,
+    type: "checkbox",
+    checked,
+    disabled: effectiveDisabled,
+    value: typeof value === "boolean" ? String(value) : value,
+    onChange: handleChange,
+    ...props
+  };
+  if (!children) {
+    return /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, className: tigercatCore.classNames(checkboxClasses, className) });
+  }
   const labelClasses = tigercatCore.classNames(
     tigercatCore.getCheckboxLabelClasses(effectiveSize, effectiveDisabled),
     className
   );
-  const checkboxElement = /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      ref: checkboxRef,
-      type: "checkbox",
-      className: checkboxClasses,
-      checked,
-      disabled: effectiveDisabled,
-      value: typeof value === "boolean" ? String(value) : value,
-      onChange: handleChange,
-      ...props
-    }
-  );
-  if (!children) {
-    return checkboxElement;
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClasses, children: [
-    checkboxElement,
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, className: checkboxClasses }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children })
   ] });
 };

package/dist/chunk-UZ7SBFQV.mjs

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