@expcat/tigercat-react 0.0.1

package/dist/chunk-CES6LGQ7.mjs

@@ -0,0 +1,546 @@
+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 { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/TimePicker.tsx
+var Icon = ({ path, className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+  }
+);
+var TimePicker = (allProps) => {
+  const {
+    size = "md",
+    format = "24",
+    showSeconds = false,
+    hourStep = 1,
+    minuteStep = 1,
+    secondStep = 1,
+    disabled = false,
+    readonly = false,
+    required = false,
+    minTime,
+    maxTime,
+    clearable = true,
+    name,
+    id,
+    className,
+    onClear,
+    locale,
+    labels: labelsOverrides,
+    value,
+    defaultValue,
+    range,
+    ...restProps
+  } = allProps;
+  const divProps = (({ onChange: _omitOnChange, ...rest }) => rest)(restProps);
+  const isRangeMode = range === true;
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalSingleValue, setInternalSingleValue] = useState(() => {
+    if (isRangeMode) return null;
+    const dv = defaultValue;
+    if (typeof dv === "string" || dv === null || dv === void 0) return dv ?? null;
+    return null;
+  });
+  const [internalRangeValue, setInternalRangeValue] = useState(() => {
+    const dv = defaultValue;
+    if (Array.isArray(dv)) return [dv[0] ?? null, dv[1] ?? null];
+    return [null, null];
+  });
+  const [activePart, setActivePart] = useState("start");
+  const panelRef = useRef(null);
+  const inputWrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const normalizeRangeValue = (input) => {
+    if (Array.isArray(input)) return [input[0] ?? null, input[1] ?? null];
+    return [null, null];
+  };
+  const isControlled = value !== void 0;
+  const currentSingleValue = (() => {
+    if (isRangeMode) return null;
+    const v = value;
+    if (isControlled && (typeof v === "string" || v === null)) return v;
+    return internalSingleValue;
+  })();
+  const currentRangeValue = (() => {
+    if (!isRangeMode) return [null, null];
+    if (isControlled) return normalizeRangeValue(value);
+    return internalRangeValue;
+  })();
+  const activeValue = isRangeMode ? currentRangeValue[activePart === "start" ? 0 : 1] : currentSingleValue;
+  const parsedTime = parseTime(activeValue);
+  const [selectedHours, setSelectedHours] = useState(parsedTime?.hours ?? 0);
+  const [selectedMinutes, setSelectedMinutes] = useState(parsedTime?.minutes ?? 0);
+  const [selectedSeconds, setSelectedSeconds] = useState(parsedTime?.seconds ?? 0);
+  const [selectedPeriod, setSelectedPeriod] = useState("AM");
+  useEffect(() => {
+    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);
+      }
+    }
+  }, [activeValue, format, activePart, isRangeMode]);
+  const labels = getTimePickerLabels(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 displayValue = (() => {
+    if (!isRangeMode) return singleDisplayValue;
+    const toDisplay = (timeStr) => {
+      const parsed = parseTime(timeStr);
+      if (!parsed) return "";
+      return formatTimeDisplayWithLocale(
+        parsed.hours,
+        parsed.minutes,
+        parsed.seconds,
+        format,
+        showSeconds,
+        locale
+      );
+    };
+    const start = toDisplay(currentRangeValue[0]);
+    const end = toDisplay(currentRangeValue[1]);
+    if (!start && !end) return "";
+    return `${start} - ${end}`;
+  })();
+  const showClearButton = (() => {
+    if (!clearable || disabled || readonly) return false;
+    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 togglePanel = () => {
+    if (!disabled && !readonly) {
+      if (isOpen) {
+        closePanel();
+        return;
+      }
+      setIsOpen(true);
+      if (parsedTime) {
+        setSelectedHours(parsedTime.hours);
+        setSelectedMinutes(parsedTime.minutes);
+        setSelectedSeconds(parsedTime.seconds);
+        if (format === "12") {
+          const { period } = to12HourFormat(parsedTime.hours);
+          setSelectedPeriod(period);
+        }
+      }
+    }
+  };
+  const closePanel = () => {
+    setIsOpen(false);
+    inputRef.current?.focus();
+  };
+  const focusOptionInUnit = (unit, action) => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    const nodes = Array.from(
+      panel.querySelectorAll(`button[data-tiger-timepicker-unit="${unit}"]`)
+    ).filter((button) => !button.disabled);
+    if (nodes.length === 0) return;
+    const active = document.activeElement;
+    const activeIndex = active ? nodes.indexOf(active) : -1;
+    const selectedIndex = nodes.findIndex(
+      (button) => button.getAttribute("aria-selected") === "true"
+    );
+    const baseIndex = activeIndex >= 0 ? activeIndex : Math.max(0, selectedIndex);
+    let nextIndex = baseIndex;
+    if (action === "prev") nextIndex = Math.max(0, baseIndex - 1);
+    if (action === "next") nextIndex = Math.min(nodes.length - 1, baseIndex + 1);
+    if (action === "first") nextIndex = 0;
+    if (action === "last") nextIndex = nodes.length - 1;
+    nodes[nextIndex]?.focus();
+  };
+  const handlePanelKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closePanel();
+      return;
+    }
+    const active = document.activeElement;
+    const unit = active?.getAttribute("data-tiger-timepicker-unit");
+    if (!unit) return;
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusOptionInUnit(unit, "prev");
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusOptionInUnit(unit, "next");
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusOptionInUnit(unit, "first");
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      focusOptionInUnit(unit, "last");
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      const el = document.activeElement;
+      if (el && el.tagName === "BUTTON" && !el.disabled) {
+        event.preventDefault();
+        el.click();
+      }
+    }
+  };
+  const selectHour = (hour) => {
+    const hours24 = format === "12" ? to24HourFormat(hour, selectedPeriod) : hour;
+    setSelectedHours(hours24);
+    updateTime(hours24, selectedMinutes, selectedSeconds);
+  };
+  const selectMinute = (minute) => {
+    setSelectedMinutes(minute);
+    updateTime(selectedHours, minute, selectedSeconds);
+  };
+  const selectSecond = (second) => {
+    setSelectedSeconds(second);
+    updateTime(selectedHours, selectedMinutes, second);
+  };
+  const selectPeriod = (period) => {
+    setSelectedPeriod(period);
+    const { hours: hours12 } = to12HourFormat(selectedHours);
+    const hours24 = to24HourFormat(hours12, period);
+    setSelectedHours(hours24);
+    updateTime(hours24, selectedMinutes, selectedSeconds);
+  };
+  const updateTime = (hours, minutes, seconds) => {
+    if (!isTimeInRange(hours, minutes, minTime, maxTime)) {
+      return;
+    }
+    let timeString = formatTime(hours, minutes, seconds, showSeconds);
+    if (allProps.range !== true) {
+      if (!isControlled) {
+        setInternalSingleValue(timeString);
+      }
+      allProps.onChange?.(timeString);
+      return;
+    }
+    const index = activePart === "start" ? 0 : 1;
+    const parsedStart = parseTime(currentRangeValue[0]);
+    const parsedEnd = parseTime(currentRangeValue[1]);
+    const candidateSeconds = hours * 3600 + minutes * 60 + seconds;
+    const startSeconds = parsedStart ? parsedStart.hours * 3600 + parsedStart.minutes * 60 + parsedStart.seconds : null;
+    const endSeconds = parsedEnd ? parsedEnd.hours * 3600 + parsedEnd.minutes * 60 + parsedEnd.seconds : null;
+    if (activePart === "end" && parsedStart && startSeconds !== null) {
+      if (candidateSeconds < startSeconds) {
+        timeString = formatTime(
+          parsedStart.hours,
+          parsedStart.minutes,
+          parsedStart.seconds,
+          showSeconds
+        );
+        setSelectedHours(parsedStart.hours);
+        setSelectedMinutes(parsedStart.minutes);
+        setSelectedSeconds(parsedStart.seconds);
+        if (format === "12") {
+          const { period } = to12HourFormat(parsedStart.hours);
+          setSelectedPeriod(period);
+        }
+      }
+    }
+    const nextRange = [currentRangeValue[0], currentRangeValue[1]];
+    nextRange[index] = timeString;
+    if (activePart === "start" && endSeconds !== null && candidateSeconds > endSeconds) {
+      nextRange[1] = timeString;
+    }
+    if (!isControlled) {
+      setInternalRangeValue(nextRange);
+    }
+    allProps.onChange?.(nextRange);
+    if (activePart === "start" && nextRange[1] === null) {
+      setActivePart("end");
+    }
+  };
+  const clearTime = (event) => {
+    event.stopPropagation();
+    if (allProps.range !== true) {
+      if (!isControlled) {
+        setInternalSingleValue(null);
+      }
+      allProps.onChange?.(null);
+      onClear?.();
+      return;
+    }
+    const cleared = [null, null];
+    if (!isControlled) {
+      setInternalRangeValue(cleared);
+    }
+    allProps.onChange?.(cleared);
+    onClear?.();
+  };
+  const setNow = () => {
+    const now = getCurrentTime(showSeconds);
+    const parsed = parseTime(now);
+    if (parsed) {
+      setSelectedHours(parsed.hours);
+      setSelectedMinutes(parsed.minutes);
+      setSelectedSeconds(parsed.seconds);
+      if (format === "12") {
+        const { period } = to12HourFormat(parsed.hours);
+        setSelectedPeriod(period);
+      }
+      updateTime(parsed.hours, parsed.minutes, parsed.seconds);
+    }
+  };
+  const isHourDisabled = (hour) => {
+    const hours24 = format === "12" ? to24HourFormat(hour, selectedPeriod) : hour;
+    return !isTimeInRange(hours24, selectedMinutes, minTime, maxTime);
+  };
+  const isMinuteDisabled = (minute) => {
+    return !isTimeInRange(selectedHours, minute, minTime, maxTime);
+  };
+  const handleInputClick = () => {
+    togglePanel();
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (panelRef.current && inputWrapperRef.current && !panelRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
+        closePanel();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("click", handleClickOutside);
+      return () => {
+        document.removeEventListener("click", handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const panel = panelRef.current;
+    if (!panel) return;
+    const focusTimer = window.setTimeout(() => {
+      const selectedHour = panel.querySelector(
+        'button[data-tiger-timepicker-unit="hour"][aria-selected="true"]:not([disabled])'
+      );
+      if (selectedHour) {
+        selectedHour.focus();
+        return;
+      }
+      const firstHour = panel.querySelector(
+        'button[data-tiger-timepicker-unit="hour"]:not([disabled])'
+      );
+      firstHour?.focus();
+    }, 0);
+    return () => window.clearTimeout(focusTimer);
+  }, [isOpen, activePart]);
+  const inputClasses = getTimePickerInputClasses(size, disabled || readonly);
+  const iconButtonClasses = getTimePickerIconButtonClasses(size);
+  return /* @__PURE__ */ jsxs("div", { className: classNames(timePickerBaseClasses, className), ...divProps, children: [
+    /* @__PURE__ */ jsxs("div", { ref: inputWrapperRef, className: timePickerInputWrapperClasses, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: inputClasses,
+          value: displayValue,
+          placeholder,
+          disabled,
+          readOnly: true,
+          required,
+          name,
+          id,
+          onClick: handleInputClick,
+          "aria-label": placeholder || labels.selectTime
+        }
+      ),
+      showClearButton && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: timePickerClearButtonClasses,
+          onClick: clearTime,
+          "aria-label": labels.clear,
+          children: /* @__PURE__ */ jsx(Icon, { path: TimePickerCloseIconPath, className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: iconButtonClasses,
+          disabled: disabled || readonly,
+          onClick: togglePanel,
+          "aria-label": labels.toggle,
+          children: /* @__PURE__ */ jsx(Icon, { path: ClockIconPath, className: "w-5 h-5" })
+        }
+      )
+    ] }),
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: timePickerPanelClasses,
+        role: "dialog",
+        "aria-label": labels.dialog,
+        onKeyDown: handlePanelKeyDown,
+        children: [
+          isRangeMode && /* @__PURE__ */ jsxs("div", { className: timePickerRangeHeaderClasses, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: getTimePickerRangeTabButtonClasses(activePart === "start"),
+                onClick: () => setActivePart("start"),
+                "aria-label": labels.start,
+                "aria-selected": activePart === "start",
+                children: labels.start
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: getTimePickerRangeTabButtonClasses(activePart === "end"),
+                onClick: () => setActivePart("end"),
+                "aria-label": labels.end,
+                "aria-selected": activePart === "end",
+                children: labels.end
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: timePickerPanelContentClasses, children: [
+            /* @__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);
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: getTimePickerItemClasses(isSelected, isDisabled),
+                    disabled: isDisabled,
+                    onClick: () => selectHour(hour),
+                    "data-tiger-timepicker-unit": "hour",
+                    "aria-label": getTimePickerOptionAriaLabel(
+                      displayHour,
+                      "hour",
+                      locale,
+                      labelsOverrides
+                    ),
+                    "aria-selected": isSelected,
+                    children: displayHour.toString().padStart(2, "0")
+                  },
+                  hour
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: timePickerColumnClasses, children: [
+              /* @__PURE__ */ jsx("div", { className: timePickerColumnHeaderClasses, children: labels.minute }),
+              /* @__PURE__ */ jsx("div", { className: timePickerColumnListClasses, children: minutesList.map((minute) => {
+                const isSelected = selectedMinutes === minute;
+                const isDisabled = isMinuteDisabled(minute);
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: getTimePickerItemClasses(isSelected, isDisabled),
+                    disabled: isDisabled,
+                    onClick: () => selectMinute(minute),
+                    "data-tiger-timepicker-unit": "minute",
+                    "aria-label": getTimePickerOptionAriaLabel(
+                      minute,
+                      "minute",
+                      locale,
+                      labelsOverrides
+                    ),
+                    "aria-selected": isSelected,
+                    children: minute.toString().padStart(2, "0")
+                  },
+                  minute
+                );
+              }) })
+            ] }),
+            showSeconds && /* @__PURE__ */ jsxs("div", { className: timePickerColumnClasses, children: [
+              /* @__PURE__ */ jsx("div", { className: timePickerColumnHeaderClasses, children: labels.second }),
+              /* @__PURE__ */ jsx("div", { className: timePickerColumnListClasses, children: secondsList.map((second) => {
+                const isSelected = selectedSeconds === second;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: getTimePickerItemClasses(isSelected, false),
+                    onClick: () => selectSecond(second),
+                    "data-tiger-timepicker-unit": "second",
+                    "aria-label": getTimePickerOptionAriaLabel(
+                      second,
+                      "second",
+                      locale,
+                      labelsOverrides
+                    ),
+                    "aria-selected": isSelected,
+                    children: second.toString().padStart(2, "0")
+                  },
+                  second
+                );
+              }) })
+            ] }),
+            format === "12" && /* @__PURE__ */ jsxs("div", { className: timePickerColumnClasses, children: [
+              /* @__PURE__ */ jsx("div", { className: timePickerColumnHeaderClasses, children: " " }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: getTimePickerPeriodButtonClasses(selectedPeriod === "AM"),
+                    onClick: () => selectPeriod("AM"),
+                    "data-tiger-timepicker-unit": "period",
+                    "aria-label": periodLabels.am,
+                    "aria-selected": selectedPeriod === "AM",
+                    children: periodLabels.am
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: getTimePickerPeriodButtonClasses(selectedPeriod === "PM"),
+                    onClick: () => selectPeriod("PM"),
+                    "data-tiger-timepicker-unit": "period",
+                    "aria-label": periodLabels.pm,
+                    "aria-selected": selectedPeriod === "PM",
+                    children: periodLabels.pm
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: timePickerFooterClasses, children: [
+            /* @__PURE__ */ jsx("button", { type: "button", className: timePickerFooterButtonClasses, onClick: setNow, children: labels.now }),
+            /* @__PURE__ */ jsx("button", { type: "button", className: timePickerFooterButtonClasses, onClick: closePanel, children: labels.ok })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+export { TimePicker };

package/dist/chunk-CKUSQR2H.mjs

@@ -0,0 +1,41 @@
+import { RowContext } from './chunk-T4TJJMLM.mjs';
+import { useContext } from 'react';
+import { getGutterStyles, getColStyleVars, getColOrderStyleVars, classNames, getSpanClasses, getOffsetClasses, getOrderClasses, getFlexClasses } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+var Col = ({
+  span = 24,
+  offset = 0,
+  order,
+  flex,
+  children,
+  className,
+  style,
+  ...divProps
+}) => {
+  const { gutter } = useContext(RowContext);
+  const { colStyle } = getGutterStyles(gutter || 0);
+  const isFlexSpanMode = flex !== void 0 && span === 0;
+  const colStyleVars = getColStyleVars(isFlexSpanMode ? void 0 : span, offset);
+  const colOrderVars = getColOrderStyleVars(order);
+  const colFlexVar = flex === void 0 ? {} : {
+    "--tiger-col-flex": String(flex).replace(/_/g, " ")
+  };
+  const colClasses = classNames(
+    isFlexSpanMode ? "" : getSpanClasses(span),
+    getOffsetClasses(offset),
+    getOrderClasses(order),
+    getFlexClasses(flex),
+    className
+  );
+  const mergedStyle = {
+    ...colStyle,
+    ...colStyleVars,
+    ...colOrderVars,
+    ...colFlexVar,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { className: colClasses, style: mergedStyle, ...divProps, children });
+};
+
+export { Col };

package/dist/chunk-CR4QK2AB.mjs

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, alertCloseIconPath, icon24StrokeWidth, icon24ViewBox, icon24PathStrokeLinejoin, icon24PathStrokeLinecap } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Alert.tsx
+var Icon = ({ path, className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: icon24ViewBox,
+    stroke: "currentColor",
+    strokeWidth: icon24StrokeWidth,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        strokeLinecap: icon24PathStrokeLinecap,
+        strokeLinejoin: icon24PathStrokeLinejoin,
+        d: path
+      }
+    )
+  }
+);
+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 = getAlertTypeClasses(type, defaultAlertThemeColors);
+  const alertClasses = classNames(
+    alertBaseClasses,
+    alertSizeClasses[size],
+    colorScheme.bg,
+    colorScheme.border,
+    className
+  );
+  const iconClasses = classNames(alertIconSizeClasses[size], colorScheme.icon);
+  const titleClasses = classNames(alertTitleSizeClasses[size], colorScheme.title);
+  const descriptionClasses = classNames(alertDescriptionSizeClasses[size], colorScheme.description);
+  const closeButtonClasses = classNames(
+    alertCloseButtonBaseClasses,
+    colorScheme.closeButton,
+    colorScheme.closeButtonHover,
+    colorScheme.focus
+  );
+  const handleClose = (event) => {
+    onClose?.(event);
+    if (!event.defaultPrevented) {
+      setVisible(false);
+    }
+  };
+  if (!visible) {
+    return null;
+  }
+  const iconPath = getAlertIconPath(type);
+  return /* @__PURE__ */ jsxs("div", { ...props, className: alertClasses, role: "alert", children: [
+    showIcon && /* @__PURE__ */ jsx("div", { className: alertIconContainerClasses, children: /* @__PURE__ */ jsx(Icon, { path: iconPath, className: iconClasses }) }),
+    /* @__PURE__ */ jsxs("div", { className: alertContentClasses, children: [
+      (title || titleSlot) && /* @__PURE__ */ jsx("div", { className: titleClasses, children: titleSlot || title }),
+      (description || descriptionSlot) && /* @__PURE__ */ jsx("div", { className: descriptionClasses, children: descriptionSlot || description }),
+      !title && !description && !titleSlot && !descriptionSlot && children && /* @__PURE__ */ jsx("div", { className: titleClasses, children })
+    ] }),
+    closable && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: closeButtonClasses,
+        onClick: handleClose,
+        "aria-label": closeAriaLabel,
+        type: "button",
+        children: /* @__PURE__ */ jsx(Icon, { path: alertCloseIconPath, className: "h-4 w-4" })
+      }
+    )
+  ] });
+};
+
+export { Alert };