@expcat/tigercat-react 0.3.0 → 0.3.69

package/dist/{chunk-7P6PHSFM.js → chunk-DXXYPVJJ.js}

@@ -80,31 +80,37 @@ var TimePicker = (allProps) => {
   const [selectedMinutes, setSelectedMinutes] = react.useState(parsedTime?.minutes ?? 0);
   const [selectedSeconds, setSelectedSeconds] = react.useState(parsedTime?.seconds ?? 0);
   const [selectedPeriod, setSelectedPeriod] = react.useState("AM");
-  react.useEffect(() => {
+  const syncFromActiveValue = () => {
     const parsed = tigercatCore.parseTime(activeValue);
-    if (parsed) {
-      setSelectedHours(parsed.hours);
-      setSelectedMinutes(parsed.minutes);
-      setSelectedSeconds(parsed.seconds);
-      if (format === "12") {
-        const { period } = tigercatCore.to12HourFormat(parsed.hours);
-        setSelectedPeriod(period);
-      }
+    if (!parsed) return;
+    setSelectedHours(parsed.hours);
+    setSelectedMinutes(parsed.minutes);
+    setSelectedSeconds(parsed.seconds);
+    if (format === "12") {
+      const { period } = tigercatCore.to12HourFormat(parsed.hours);
+      setSelectedPeriod(period);
     }
+  };
+  react.useEffect(() => {
+    syncFromActiveValue();
   }, [activeValue, format, activePart, isRangeMode]);
-  const labels = tigercatCore.getTimePickerLabels(locale, labelsOverrides);
+  const labels = react.useMemo(
+    () => tigercatCore.getTimePickerLabels(locale, labelsOverrides),
+    [locale, labelsOverrides]
+  );
   const placeholder = allProps.placeholder ?? (isRangeMode ? labels.selectTimeRange : labels.selectTime);
-  const periodLabels = tigercatCore.getTimePeriodLabels(locale);
-  const singleDisplayValue = parsedTime ? tigercatCore.formatTimeDisplayWithLocale(
-    parsedTime.hours,
-    parsedTime.minutes,
-    parsedTime.seconds,
-    format,
-    showSeconds,
-    locale
-  ) : "";
+  const periodLabels = react.useMemo(() => tigercatCore.getTimePeriodLabels(locale), [locale]);
   const displayValue = (() => {
-    if (!isRangeMode) return singleDisplayValue;
+    if (!isRangeMode) {
+      return parsedTime ? tigercatCore.formatTimeDisplayWithLocale(
+        parsedTime.hours,
+        parsedTime.minutes,
+        parsedTime.seconds,
+        format,
+        showSeconds,
+        locale
+      ) : "";
+    }
     const toDisplay = (timeStr) => {
       const parsed = tigercatCore.parseTime(timeStr);
       if (!parsed) return "";
@@ -127,9 +133,9 @@ var TimePicker = (allProps) => {
     if (!isRangeMode) return currentSingleValue !== null;
     return currentRangeValue[0] !== null || currentRangeValue[1] !== null;
   })();
-  const hoursList = tigercatCore.generateHours(hourStep, format);
-  const minutesList = tigercatCore.generateMinutes(minuteStep);
-  const secondsList = tigercatCore.generateSeconds(secondStep);
+  const hoursList = react.useMemo(() => tigercatCore.generateHours(hourStep, format), [hourStep, format]);
+  const minutesList = react.useMemo(() => tigercatCore.generateMinutes(minuteStep), [minuteStep]);
+  const secondsList = react.useMemo(() => tigercatCore.generateSeconds(secondStep), [secondStep]);
   const togglePanel = () => {
     if (!disabled && !readonly) {
       if (isOpen) {
@@ -137,15 +143,7 @@ var TimePicker = (allProps) => {
         return;
       }
       setIsOpen(true);
-      if (parsedTime) {
-        setSelectedHours(parsedTime.hours);
-        setSelectedMinutes(parsedTime.minutes);
-        setSelectedSeconds(parsedTime.seconds);
-        if (format === "12") {
-          const { period } = tigercatCore.to12HourFormat(parsedTime.hours);
-          setSelectedPeriod(period);
-        }
-      }
+      syncFromActiveValue();
     }
   };
   const closePanel = () => {
@@ -430,7 +428,6 @@ var TimePicker = (allProps) => {
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.timePickerColumnClasses, children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timePickerColumnHeaderClasses, children: labels.hour }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timePickerColumnListClasses, children: hoursList.map((hour) => {
-                const displayHour = format === "12" ? hour : hour;
                 const hours24 = format === "12" ? tigercatCore.to24HourFormat(hour, selectedPeriod) : hour;
                 const isSelected = selectedHours === hours24;
                 const isDisabled = isHourDisabled(hour);
@@ -443,13 +440,13 @@ var TimePicker = (allProps) => {
                     onClick: () => selectHour(hour),
                     "data-tiger-timepicker-unit": "hour",
                     "aria-label": tigercatCore.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-UFAXJVMD.js → chunk-EFLIFXZH.js}

@@ -42,7 +42,7 @@ var Descriptions = ({
       cells.push(
         /* @__PURE__ */ jsxRuntime.jsxs("th", { className: labelClass, style: labelStyle, children: [
           item.label,
-          colon && layout === "horizontal" ? ":" : ""
+          colon ? ":" : ""
         ] }, `${key}-label`)
       );
       cells.push(
@@ -85,7 +85,7 @@ var Descriptions = ({
         /* @__PURE__ */ jsxRuntime.jsx("td", { className: contentClass, style: contentStyle, children: item.content })
       ] }, index);
     }
-    const itemClasses = tigercatCore.getDescriptionsVerticalItemClasses(bordered, size);
+    const itemClasses = tigercatCore.getDescriptionsVerticalItemClasses(size);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: itemClasses, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: labelClass, style: labelStyle, children: [
         item.label,
@@ -105,7 +105,7 @@ var Descriptions = ({
   };
   const descriptionsClasses = tigercatCore.classNames(
     tigercatCore.descriptionsWrapperClasses,
-    tigercatCore.getDescriptionsClasses(bordered, size),
+    tigercatCore.getDescriptionsClasses(size),
     className
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: descriptionsClasses, ...props, children: [

package/dist/{chunk-JI7SFMUT.mjs → chunk-EIMAQHCQ.mjs}

@@ -1,9 +1,9 @@
+import { StatusIcon } from './chunk-FLYJVZED.mjs';
 import { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import { classNames, notificationContainerBaseClasses, notificationPositionClasses, getNotificationTypeClasses, defaultNotificationThemeColors, notificationBaseClasses, getNotificationIconPath, notificationIconClasses, notificationContentClasses, notificationTitleClasses, notificationDescriptionClasses, notificationCloseButtonClasses, notificationCloseIconClasses, notificationCloseIconPath, icon24StrokeWidth, icon24ViewBox, icon24PathStrokeLinejoin, icon24PathStrokeLinecap, ANIMATION_DURATION_MS, isBrowser } from '@expcat/tigercat-core';
+import { classNames, notificationContainerBaseClasses, notificationPositionClasses, getNotificationTypeClasses, notificationBaseClasses, getNotificationIconPath, notificationIconClasses, notificationContentClasses, notificationTitleClasses, notificationDescriptionClasses, notificationCloseButtonClasses, notificationCloseIconClasses, notificationCloseIconPath, normalizeStringOption, ANIMATION_DURATION_MS, isBrowser } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/components/Notification.tsx
 var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
 var notificationInstancesByPosition = {
   "top-left": [],
@@ -27,35 +27,12 @@ var updateCallbacks = {
 function getNextInstanceId() {
   return ++instanceIdCounter;
 }
-var Icon = ({ path, className }) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: icon24ViewBox,
-      stroke: "currentColor",
-      strokeWidth: icon24StrokeWidth,
-      "aria-hidden": "true",
-      focusable: "false",
-      children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          strokeLinecap: icon24PathStrokeLinecap,
-          strokeLinejoin: icon24PathStrokeLinejoin,
-          d: path
-        }
-      )
-    }
-  );
-};
 var NotificationItem = ({ notification: notification2, onClose }) => {
   const [isVisible, setIsVisible] = useState(false);
   useEffect(() => {
     setTimeout(() => setIsVisible(true), 10);
   }, []);
-  const colorScheme = getNotificationTypeClasses(notification2.type, defaultNotificationThemeColors);
+  const colorScheme = getNotificationTypeClasses(notification2.type);
   const notificationClasses = classNames(
     notificationBaseClasses,
     colorScheme.bg,
@@ -92,7 +69,7 @@ var NotificationItem = ({ notification: notification2, onClose }) => {
       "data-tiger-notification-type": notification2.type,
       "data-tiger-notification-id": String(notification2.id),
       children: [
-        /* @__PURE__ */ jsx(Icon, { path: iconPath, className: iconClass }),
+        /* @__PURE__ */ jsx(StatusIcon, { path: iconPath, className: iconClass, "aria-hidden": "true", focusable: "false" }),
         /* @__PURE__ */ jsxs("div", { className: notificationContentClasses, children: [
           /* @__PURE__ */ jsx("div", { className: classNames(notificationTitleClasses, colorScheme.titleText), children: notification2.title }),
           notification2.description && /* @__PURE__ */ jsx("div", { className: classNames(notificationDescriptionClasses, colorScheme.descriptionText), children: notification2.description })
@@ -107,7 +84,7 @@ var NotificationItem = ({ notification: notification2, onClose }) => {
             },
             "aria-label": "Close notification",
             type: "button",
-            children: /* @__PURE__ */ jsx(Icon, { path: notificationCloseIconPath, className: notificationCloseIconClasses })
+            children: /* @__PURE__ */ jsx(StatusIcon, { path: notificationCloseIconPath, className: notificationCloseIconClasses })
           }
         )
       ]
@@ -132,16 +109,7 @@ var NotificationContainer = ({
     notificationPositionClasses[position]
   );
   const handleRemove = (id) => {
-    const instances = notificationInstancesByPosition[position];
-    const index = instances.findIndex((notif) => notif.id === id);
-    if (index !== -1) {
-      const instance = instances[index];
-      instances.splice(index, 1);
-      if (instance.onClose) {
-        instance.onClose();
-      }
-      updateCallbacks[position]?.();
-    }
+    removeNotification(id, position);
   };
   return /* @__PURE__ */ jsx(
     "div",
@@ -167,8 +135,7 @@ function ensureContainer(position) {
   if (!isBrowser()) {
     return;
   }
-  const containerId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}`;
-  const rootId = `${containerId}-root`;
+  const rootId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}-root`;
   const existingRootEl = document.getElementById(rootId);
   if (containerRoots[position] && !existingRootEl) {
     containerRoots[position] = null;
@@ -186,6 +153,17 @@ function ensureContainer(position) {
   containerRoots[position] = createRoot(rootEl);
   containerRoots[position].render(/* @__PURE__ */ jsx(NotificationContainer, { position }));
 }
+function destroyContainer(position) {
+  const rootId = `${NOTIFICATION_CONTAINER_ID_PREFIX}-${position}-root`;
+  if (containerRoots[position]) {
+    containerRoots[position].unmount();
+    containerRoots[position] = null;
+  }
+  updateCallbacks[position] = null;
+  if (isBrowser()) {
+    document.getElementById(rootId)?.remove();
+  }
+}
 function addNotification(config) {
   const position = config.position || "top-right";
   ensureContainer(position);
@@ -204,9 +182,7 @@ function addNotification(config) {
     position
   };
   notificationInstancesByPosition[position].push(instance);
-  if (updateCallbacks[position]) {
-    updateCallbacks[position]();
-  }
+  updateCallbacks[position]?.();
   if (instance.duration > 0) {
     setTimeout(() => {
       removeNotification(id, position);
@@ -220,78 +196,51 @@ function removeNotification(id, position) {
   if (index !== -1) {
     const instance = instances[index];
     instances.splice(index, 1);
-    if (instance.onClose) {
-      instance.onClose();
-    }
-    if (updateCallbacks[position]) {
-      updateCallbacks[position]();
-    }
+    instance.onClose?.();
+    updateCallbacks[position]?.();
+  }
+  if (notificationInstancesByPosition[position].length === 0) {
+    destroyContainer(position);
   }
 }
 function clearAll(position) {
   if (position) {
     notificationInstancesByPosition[position].forEach((instance) => {
-      if (instance.onClose) {
-        instance.onClose();
-      }
+      instance.onClose?.();
     });
     notificationInstancesByPosition[position] = [];
-    if (updateCallbacks[position]) {
-      updateCallbacks[position]();
-    }
+    destroyContainer(position);
   } else {
     Object.keys(notificationInstancesByPosition).forEach((pos) => {
       const p = pos;
       notificationInstancesByPosition[p].forEach((instance) => {
-        if (instance.onClose) {
-          instance.onClose();
-        }
+        instance.onClose?.();
       });
       notificationInstancesByPosition[p] = [];
-      if (updateCallbacks[p]) {
-        updateCallbacks[p]();
-      }
+      destroyContainer(p);
     });
   }
 }
 function normalizeOptions(options) {
-  if (typeof options === "string") {
-    return { title: options };
-  }
-  return options;
+  return normalizeStringOption(options, "title");
 }
 var notification = {
-  /**
-   * Show an info notification
-   */
   info(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "info" });
   },
-  /**
-   * Show a success notification
-   */
   success(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "success" });
   },
-  /**
-   * Show a warning notification
-   */
   warning(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "warning" });
   },
-  /**
-   * Show an error notification
-   */
   error(options) {
     const config = normalizeOptions(options);
     return addNotification({ ...config, type: "error" });
   },
-  /**
-   * Clear all notifications
-   */
   clear(position) {
     clearAll(position);
   }

package/dist/chunk-ENSLMM3L.mjs

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { getSpinnerSVG, classNames, buttonBaseClasses, getButtonVariantClasses, buttonSizeClasses, buttonDisabledClasses } from '@expcat/tigercat-core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/Button.tsx
+var spinnerSvg = getSpinnerSVG("spinner");
+var DefaultSpinner = /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "animate-spin h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: spinnerSvg.viewBox,
+    "aria-hidden": "true",
+    focusable: "false",
+    children: spinnerSvg.elements.map(
+      (el, index) => React.createElement(el.type, { key: index, ...el.attrs })
+    )
+  }
+);
+var Button = ({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false,
+  loadingIcon,
+  block = false,
+  onClick,
+  children,
+  type = "button",
+  className,
+  "aria-busy": ariaBusyProp,
+  "aria-disabled": ariaDisabledProp,
+  ...rest
+}) => {
+  const isDisabled = disabled || loading;
+  const ariaBusy = ariaBusyProp ?? (loading ? true : void 0);
+  const ariaDisabled = ariaDisabledProp ?? (isDisabled ? true : void 0);
+  const buttonClasses = useMemo(
+    () => classNames(
+      buttonBaseClasses,
+      getButtonVariantClasses(variant),
+      buttonSizeClasses[size],
+      isDisabled && buttonDisabledClasses,
+      block && "w-full",
+      className
+    ),
+    [variant, size, isDisabled, block, className]
+  );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      className: buttonClasses,
+      "aria-busy": ariaBusy,
+      "aria-disabled": ariaDisabled,
+      disabled: isDisabled,
+      onClick: isDisabled ? void 0 : onClick,
+      type,
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        children
+      ]
+    }
+  );
+};
+
+export { Button };

package/dist/chunk-F24IF2QL.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var React = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/Button.tsx
+var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
+var DefaultSpinner = /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className: "animate-spin h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: spinnerSvg.viewBox,
+    "aria-hidden": "true",
+    focusable: "false",
+    children: spinnerSvg.elements.map(
+      (el, index) => React__default.default.createElement(el.type, { key: index, ...el.attrs })
+    )
+  }
+);
+var Button = ({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false,
+  loadingIcon,
+  block = false,
+  onClick,
+  children,
+  type = "button",
+  className,
+  "aria-busy": ariaBusyProp,
+  "aria-disabled": ariaDisabledProp,
+  ...rest
+}) => {
+  const isDisabled = disabled || loading;
+  const ariaBusy = ariaBusyProp ?? (loading ? true : void 0);
+  const ariaDisabled = ariaDisabledProp ?? (isDisabled ? true : void 0);
+  const buttonClasses = React.useMemo(
+    () => tigercatCore.classNames(
+      tigercatCore.buttonBaseClasses,
+      tigercatCore.getButtonVariantClasses(variant),
+      tigercatCore.buttonSizeClasses[size],
+      isDisabled && tigercatCore.buttonDisabledClasses,
+      block && "w-full",
+      className
+    ),
+    [variant, size, isDisabled, block, className]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...rest,
+      className: buttonClasses,
+      "aria-busy": ariaBusy,
+      "aria-disabled": ariaDisabled,
+      disabled: isDisabled,
+      onClick: isDisabled ? void 0 : onClick,
+      type,
+      children: [
+        loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: loadingIcon ?? DefaultSpinner }),
+        children
+      ]
+    }
+  );
+};
+
+exports.Button = Button;