@expcat/tigercat-react 1.1.0 → 1.2.14

package/dist/chunk-VNMWPJDN.js

@@ -0,0 +1,147 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkHQ3QOT7Hjs = require('./chunk-HQ3QOT7H.js');
+
+// src/components/Alert.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Alert = ({
+  type = "info",
+  size = "md",
+  title,
+  description,
+  showIcon = true,
+  closable = false,
+  closeAriaLabel = "Close alert",
+  duration,
+  banner = false,
+  showCountdown = false,
+  className,
+  children,
+  titleSlot,
+  descriptionSlot,
+  onClose,
+  ...props
+}) => {
+  const [visible, setVisible] = _react.useState.call(void 0, true);
+  const [countdownProgress, setCountdownProgress] = _react.useState.call(void 0, 100);
+  const colorScheme = _react.useMemo.call(void 0, () => _tigercatcore.getAlertTypeClasses.call(void 0, type, _tigercatcore.defaultAlertThemeColors), [type]);
+  const alertClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, 
+      _tigercatcore.alertBaseClasses,
+      _tigercatcore.alertSizeClasses[size],
+      colorScheme.bg,
+      colorScheme.border,
+      banner && _tigercatcore.alertBannerClasses,
+      className
+    ),
+    [size, colorScheme, banner, className]
+  );
+  const iconClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, _tigercatcore.alertIconSizeClasses[size], colorScheme.icon),
+    [size, colorScheme]
+  );
+  const titleClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, _tigercatcore.alertTitleSizeClasses[size], colorScheme.title),
+    [size, colorScheme]
+  );
+  const descriptionClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, _tigercatcore.alertDescriptionSizeClasses[size], colorScheme.description),
+    [size, colorScheme]
+  );
+  const closeButtonClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, 
+      _tigercatcore.alertCloseButtonBaseClasses,
+      colorScheme.closeButton,
+      colorScheme.closeButtonHover,
+      colorScheme.focus
+    ),
+    [colorScheme]
+  );
+  const handleClose = _react.useCallback.call(void 0, 
+    (event) => {
+      _optionalChain([onClose, 'optionalCall', _ => _(event)]);
+      if (!event.defaultPrevented) {
+        setVisible(false);
+      }
+    },
+    [onClose]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (duration && duration > 0 && closable) {
+      setCountdownProgress(100);
+      const timer = setTimeout(() => {
+        setVisible(false);
+        _optionalChain([onClose, 'optionalCall', _2 => _2()]);
+      }, duration);
+      let countdownTimer;
+      if (showCountdown) {
+        const startTime = Date.now();
+        countdownTimer = setInterval(() => {
+          const elapsed = Date.now() - startTime;
+          setCountdownProgress(Math.max(0, 100 - elapsed / duration * 100));
+        }, 50);
+      }
+      return () => {
+        clearTimeout(timer);
+        if (countdownTimer) clearInterval(countdownTimer);
+      };
+    }
+  }, [duration, closable, showCountdown, onClose]);
+  if (!visible) {
+    return null;
+  }
+  const iconPath = _tigercatcore.getAlertIconPath.call(void 0, type);
+  const hasTitle = !!(title || titleSlot);
+  const hasDescription = !!(description || descriptionSlot);
+  const hasDefaultContent = !hasTitle && !hasDescription && !!children;
+  const hasContent = hasTitle || hasDescription || hasDefaultContent;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ...props, className: alertClasses, role: "alert", children: [
+    showIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.alertIconContainerClasses, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHQ3QOT7Hjs.StatusIcon, { path: iconPath, className: iconClasses }) }),
+    hasContent && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.alertContentClasses, children: [
+      hasTitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: titleClasses, children: titleSlot || title }),
+      hasDescription && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: descriptionClasses, children: descriptionSlot || description }),
+      hasDefaultContent && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: titleClasses, children })
+    ] }),
+    closable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        className: closeButtonClasses,
+        onClick: handleClose,
+        "aria-label": closeAriaLabel,
+        type: "button",
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHQ3QOT7Hjs.StatusIcon, { path: _tigercatcore.alertCloseIconPath, className: "h-4 w-4" })
+      }
+    ),
+    showCountdown && duration && duration > 0 && closable && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.alertCountdownContainerClasses, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        className: _tigercatcore.classNames.call(void 0, _tigercatcore.alertCountdownBarClasses, _tigercatcore.alertCountdownColorClasses[type]),
+        style: { width: `${countdownProgress}%` }
+      }
+    ) })
+  ] });
+};
+
+
+
+exports.Alert = Alert;

package/dist/{chunk-KR3EVG7G.mjs → chunk-VNVGSPBI.mjs}

@@ -1,8 +1,44 @@
-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, padTwo, 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
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import {
+  classNames,
+  icon20ViewBox,
+  parseTime,
+  formatTime,
+  formatTimeDisplayWithLocale,
+  getTimePeriodLabels,
+  getTimePickerLabels,
+  getTimePickerOptionAriaLabel,
+  to12HourFormat,
+  to24HourFormat,
+  isTimeInRange,
+  generateHours,
+  generateMinutes,
+  generateSeconds,
+  getCurrentTime,
+  padTwo,
+  timePickerBaseClasses,
+  timePickerInputWrapperClasses,
+  getTimePickerInputClasses,
+  getTimePickerIconButtonClasses,
+  timePickerClearButtonClasses,
+  timePickerPanelClasses,
+  timePickerDesktopPanelContentClasses,
+  timePickerMobileWheelClasses,
+  timePickerMobileWheelSelectClasses,
+  timePickerRangeHeaderClasses,
+  getTimePickerRangeTabButtonClasses,
+  timePickerColumnClasses,
+  timePickerColumnHeaderClasses,
+  timePickerColumnListClasses,
+  getTimePickerItemClasses,
+  getTimePickerPeriodButtonClasses,
+  timePickerFooterClasses,
+  timePickerFooterButtonClasses,
+  ClockIconPath,
+  TimePickerCloseIconPath
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Icon = ({ path, className }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -78,7 +114,7 @@ var TimePicker = (allProps) => {
   const [selectedMinutes, setSelectedMinutes] = useState(parsedTime?.minutes ?? 0);
   const [selectedSeconds, setSelectedSeconds] = useState(parsedTime?.seconds ?? 0);
   const [selectedPeriod, setSelectedPeriod] = useState("AM");
-  const syncFromActiveValue = () => {
+  const syncFromActiveValue = useCallback(() => {
     const parsed = parseTime(activeValue);
     if (!parsed) return;
     setSelectedHours(parsed.hours);
@@ -88,10 +124,10 @@ var TimePicker = (allProps) => {
       const { period } = to12HourFormat(parsed.hours);
       setSelectedPeriod(period);
     }
-  };
+  }, [activeValue, format]);
   useEffect(() => {
     syncFromActiveValue();
-  }, [activeValue, format, activePart, isRangeMode]);
+  }, [syncFromActiveValue]);
   const labels = useMemo(
     () => getTimePickerLabels(locale, labelsOverrides),
     [locale, labelsOverrides]
@@ -422,7 +458,52 @@ var TimePicker = (allProps) => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: timePickerPanelContentClasses, children: [
+          /* @__PURE__ */ jsxs("div", { className: timePickerMobileWheelClasses, children: [
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: format === "12" ? to12HourFormat(selectedHours).hours : selectedHours,
+                "aria-label": labels.hour,
+                onChange: (event) => selectHour(Number(event.target.value)),
+                children: hoursList.map((hour) => /* @__PURE__ */ jsx("option", { value: hour, disabled: isHourDisabled(hour), children: padTwo(hour) }, hour))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: selectedMinutes,
+                "aria-label": labels.minute,
+                onChange: (event) => selectMinute(Number(event.target.value)),
+                children: minutesList.map((minute) => /* @__PURE__ */ jsx("option", { value: minute, disabled: isMinuteDisabled(minute), children: padTwo(minute) }, minute))
+              }
+            ),
+            showSeconds && /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: selectedSeconds,
+                "aria-label": labels.second,
+                onChange: (event) => selectSecond(Number(event.target.value)),
+                children: secondsList.map((second) => /* @__PURE__ */ jsx("option", { value: second, children: padTwo(second) }, second))
+              }
+            ),
+            format === "12" && /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: timePickerMobileWheelSelectClasses,
+                value: selectedPeriod,
+                "aria-label": "Period",
+                onChange: (event) => selectPeriod(event.target.value),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "AM", children: periodLabels.am }),
+                  /* @__PURE__ */ jsx("option", { value: "PM", children: periodLabels.pm })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: timePickerDesktopPanelContentClasses, children: [
             /* @__PURE__ */ jsxs("div", { className: timePickerColumnClasses, children: [
               /* @__PURE__ */ jsx("div", { className: timePickerColumnHeaderClasses, children: labels.hour }),
               /* @__PURE__ */ jsx("div", { className: timePickerColumnListClasses, children: hoursList.map((hour) => {
@@ -540,4 +621,6 @@ var TimePicker = (allProps) => {
   ] });
 };
 
-export { TimePicker };
+export {
+  TimePicker
+};

package/dist/{chunk-AOZLBASY.mjs → chunk-VSFDT2RS.mjs}

@@ -1,8 +1,10 @@
-import React, { useMemo } from 'react';
-import { getDividerClasses, getDividerStyle } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
-
 // src/components/Divider.tsx
+import React, { useMemo } from "react";
+import {
+  getDividerClasses,
+  getDividerStyle
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var Divider = React.memo(
   ({
     orientation = "horizontal",
@@ -11,6 +13,7 @@ var Divider = React.memo(
     color,
     thickness,
     className,
+    style: styleProp,
     ...props
   }) => {
     const classes = useMemo(() => {
@@ -18,8 +21,11 @@ var Divider = React.memo(
       return className ? `${base} ${className}` : base;
     }, [orientation, lineStyle, spacing, className]);
     const style = useMemo(
-      () => getDividerStyle(orientation, color, thickness),
-      [color, thickness, orientation]
+      () => ({
+        ...getDividerStyle(orientation, color, thickness),
+        ...styleProp
+      }),
+      [color, thickness, orientation, styleProp]
     );
     return /* @__PURE__ */ jsx(
       "div",
@@ -35,4 +41,6 @@ var Divider = React.memo(
 );
 Divider.displayName = "Divider";
 
-export { Divider };
+export {
+  Divider
+};

package/dist/{chunk-NQV2H4SC.mjs → chunk-VVNFXJMN.mjs}

@@ -1,8 +1,22 @@
-import { useCollapseContext } from './chunk-Y6557RWE.mjs';
-import { useRef, useMemo, useCallback, useLayoutEffect } from 'react';
-import { getInitialCollapseContentStyle, isPanelActive, classNames, getCollapsePanelClasses, getCollapsePanelHeaderClasses, getCollapseIconClasses, createCollapseTransitionController, collapseHeaderTextClasses, collapsePanelContentWrapperClasses, collapsePanelContentBaseClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  useCollapseContext
+} from "./chunk-Y6557RWE.mjs";
 
+// src/components/CollapsePanel.tsx
+import { useMemo, useCallback, useLayoutEffect, useRef } from "react";
+import {
+  classNames,
+  getCollapsePanelClasses,
+  getCollapsePanelHeaderClasses,
+  getCollapseIconClasses,
+  createCollapseTransitionController,
+  getInitialCollapseContentStyle,
+  collapseHeaderTextClasses,
+  collapsePanelContentWrapperClasses,
+  collapsePanelContentBaseClasses,
+  isPanelActive
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var CollapsePanel = ({
   panelKey,
   header,
@@ -17,14 +31,18 @@ var CollapsePanel = ({
   const contentRef = useRef(null);
   const transitionControllerRef = useRef(null);
   const initialContentStyleRef = useRef(getInitialCollapseContentStyle(false));
+  const initialActiveRef = useRef(null);
   if (!collapseContext) {
     throw new Error("CollapsePanel must be used within a Collapse component");
   }
   const isActive = useMemo(() => {
     return isPanelActive(panelKey, collapseContext.activeKeys);
   }, [panelKey, collapseContext.activeKeys]);
+  if (initialActiveRef.current === null) {
+    initialActiveRef.current = isActive;
+  }
   if (!transitionControllerRef.current) {
-    initialContentStyleRef.current = getInitialCollapseContentStyle(isActive);
+    initialContentStyleRef.current = getInitialCollapseContentStyle(initialActiveRef.current);
   }
   const panelClasses = useMemo(() => {
     return classNames(getCollapsePanelClasses(collapseContext.ghost, className));
@@ -39,7 +57,7 @@ var CollapsePanel = ({
     if (!disabled) {
       collapseContext.handlePanelClick(panelKey);
     }
-  }, [disabled, collapseContext.handlePanelClick, panelKey]);
+  }, [disabled, collapseContext, panelKey]);
   const handleKeyDown = useCallback(
     (event) => {
       if (disabled) {
@@ -50,12 +68,12 @@ var CollapsePanel = ({
         collapseContext.handlePanelClick(panelKey);
       }
     },
-    [disabled, collapseContext.handlePanelClick, panelKey]
+    [disabled, collapseContext, panelKey]
   );
   useLayoutEffect(() => {
     if (!contentRef.current) return void 0;
     const controller = createCollapseTransitionController(contentRef.current, {
-      expanded: isActive
+      expanded: initialActiveRef.current ?? false
     });
     transitionControllerRef.current = controller;
     return () => {
@@ -120,4 +138,7 @@ var CollapsePanel = ({
 };
 var CollapsePanel_default = CollapsePanel;
 
-export { CollapsePanel, CollapsePanel_default };
+export {
+  CollapsePanel,
+  CollapsePanel_default
+};

package/dist/chunk-W3VLCSJL.js

@@ -0,0 +1,26 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Container.tsx
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Container = ({
+  maxWidth = false,
+  center = true,
+  padding = true,
+  children,
+  className,
+  as: Component = "div",
+  ...props
+}) => {
+  const containerClasses = _tigercatcore.getContainerClasses.call(void 0, {
+    maxWidth,
+    center,
+    padding,
+    className
+  });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Component, { ...props, className: containerClasses, children });
+};
+
+
+
+exports.Container = Container;