@expcat/tigercat-react 0.4.3 → 1.0.0

package/dist/chunk-4QQZ5H4V.mjs

@@ -0,0 +1,213 @@
+import { useState, useMemo } from 'react';
+import { splitTransferData, filterTransferItems, classNames, transferOperationClasses, getTransferButtonClasses, icon20ViewBox, chevronRightSolidIcon20PathD, chevronLeftSolidIcon20PathD, transferBaseClasses, transferPanelClasses, transferPanelHeaderClasses, transferSearchClasses, transferPanelBodyClasses, getTransferItemClasses, getTransferCheckboxClasses, transferEmptyClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Transfer.tsx
+var TRANSFER_KEYS = /* @__PURE__ */ new Set([
+  "value",
+  "dataSource",
+  "size",
+  "disabled",
+  "showSearch",
+  "sourceTitle",
+  "targetTitle",
+  "notFoundText",
+  "filterOption",
+  "onChange"
+]);
+var Transfer = (props) => {
+  const {
+    value = [],
+    dataSource = [],
+    size = "md",
+    disabled = false,
+    showSearch = false,
+    sourceTitle = "Source",
+    targetTitle = "Target",
+    notFoundText = "No data",
+    filterOption,
+    className,
+    onChange,
+    ...rest
+  } = props;
+  const divProps = {};
+  for (const key of Object.keys(rest)) {
+    if (!TRANSFER_KEYS.has(key)) {
+      divProps[key] = rest[key];
+    }
+  }
+  const [sourceSelectedKeys, setSourceSelectedKeys] = useState(/* @__PURE__ */ new Set());
+  const [targetSelectedKeys, setTargetSelectedKeys] = useState(/* @__PURE__ */ new Set());
+  const [sourceSearch, setSourceSearch] = useState("");
+  const [targetSearch, setTargetSearch] = useState("");
+  const { sourceItems, targetItems } = useMemo(
+    () => splitTransferData(dataSource, value),
+    [dataSource, value]
+  );
+  const filteredSourceItems = useMemo(
+    () => filterTransferItems(sourceItems, sourceSearch, filterOption),
+    [sourceItems, sourceSearch, filterOption]
+  );
+  const filteredTargetItems = useMemo(
+    () => filterTransferItems(targetItems, targetSearch, filterOption),
+    [targetItems, targetSearch, filterOption]
+  );
+  const canMoveRight = !disabled && [...sourceSelectedKeys].some((key) => {
+    const item = dataSource.find((d) => d.key === key);
+    return item && !item.disabled;
+  });
+  const canMoveLeft = !disabled && [...targetSelectedKeys].some((key) => {
+    const item = dataSource.find((d) => d.key === key);
+    return item && !item.disabled;
+  });
+  function toggleSourceItem(key) {
+    setSourceSelectedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+  function toggleTargetItem(key) {
+    setTargetSelectedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }
+  function moveRight() {
+    if (!canMoveRight) return;
+    const keysToMove = [...sourceSelectedKeys].filter((key) => {
+      const item = dataSource.find((d) => d.key === key);
+      return item && !item.disabled;
+    });
+    const newTargetKeys = [...value, ...keysToMove];
+    setSourceSelectedKeys(/* @__PURE__ */ new Set());
+    onChange?.(newTargetKeys, "right", keysToMove);
+  }
+  function moveLeft() {
+    if (!canMoveLeft) return;
+    const keysToRemove = new Set(
+      [...targetSelectedKeys].filter((key) => {
+        const item = dataSource.find((d) => d.key === key);
+        return item && !item.disabled;
+      })
+    );
+    const newTargetKeys = value.filter((k) => !keysToRemove.has(k));
+    setTargetSelectedKeys(/* @__PURE__ */ new Set());
+    onChange?.(newTargetKeys, "left", [...keysToRemove]);
+  }
+  function renderPanel(title, items, selectedKeys, toggleFn, searchValue, onSearch) {
+    return /* @__PURE__ */ jsxs("div", { className: transferPanelClasses, role: "group", "aria-label": title, children: [
+      /* @__PURE__ */ jsx("div", { className: transferPanelHeaderClasses, children: /* @__PURE__ */ jsxs("span", { className: "font-medium text-[var(--tiger-transfer-title,var(--tiger-text,#111827))]", children: [
+        title,
+        " (",
+        items.length,
+        ")"
+      ] }) }),
+      showSearch && /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          className: transferSearchClasses,
+          placeholder: "Search...",
+          value: searchValue,
+          "aria-label": `Search ${title}`,
+          onChange: (e) => onSearch(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: transferPanelBodyClasses, role: "listbox", children: items.length > 0 ? items.map((item) => {
+        const isSelected = selectedKeys.has(item.key);
+        const isDisabled = disabled || !!item.disabled;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: getTransferItemClasses(isSelected, isDisabled, size),
+            role: "option",
+            "aria-selected": isSelected,
+            "aria-disabled": isDisabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: getTransferCheckboxClasses(size),
+                  checked: isSelected,
+                  disabled: isDisabled,
+                  onChange: () => {
+                    if (!isDisabled) toggleFn(item.key);
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label })
+            ]
+          },
+          String(item.key)
+        );
+      }) : /* @__PURE__ */ jsx("div", { className: transferEmptyClasses, children: notFoundText }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: classNames(transferBaseClasses, className), ...divProps, children: [
+    renderPanel(
+      sourceTitle,
+      filteredSourceItems,
+      sourceSelectedKeys,
+      toggleSourceItem,
+      sourceSearch,
+      setSourceSearch
+    ),
+    /* @__PURE__ */ jsxs("div", { className: transferOperationClasses, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getTransferButtonClasses(!canMoveRight),
+          disabled: !canMoveRight,
+          "aria-label": "Move selected to target",
+          onClick: moveRight,
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-4 h-4",
+              viewBox: icon20ViewBox,
+              fill: "currentColor",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx("path", { d: chevronRightSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getTransferButtonClasses(!canMoveLeft),
+          disabled: !canMoveLeft,
+          "aria-label": "Move selected to source",
+          onClick: moveLeft,
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-4 h-4",
+              viewBox: icon20ViewBox,
+              fill: "currentColor",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx("path", { d: chevronLeftSolidIcon20PathD, fillRule: "evenodd", clipRule: "evenodd" })
+            }
+          )
+        }
+      )
+    ] }),
+    renderPanel(
+      targetTitle,
+      filteredTargetItems,
+      targetSelectedKeys,
+      toggleTargetItem,
+      targetSearch,
+      setTargetSearch
+    )
+  ] });
+};
+
+export { Transfer };

package/dist/{chunk-QFYS5QIZ.mjs → chunk-5BBZBI2V.mjs}

@@ -1,6 +1,6 @@
-import { Modal } from './chunk-JNLX47UL.mjs';
+import { Modal } from './chunk-BJ2GUKPU.mjs';
 import { ImageCropper } from './chunk-2EOXY2LP.mjs';
-import { Button } from './chunk-ENSLMM3L.mjs';
+import { Button } from './chunk-3KMKMAE3.mjs';
 import { useRef, useState, useCallback, useMemo } from 'react';
 import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, uploadPlusIconPath } from '@expcat/tigercat-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -123,7 +123,7 @@ var CropUpload = ({
     /* @__PURE__ */ jsx(
       Modal,
       {
-        visible: modalVisible,
+        open: modalVisible,
         size: "lg",
         title: modalTitle,
         closable: true,

package/dist/chunk-5CGXFQND.mjs

@@ -0,0 +1,100 @@
+import { useRef, useState, useMemo, useCallback } from 'react';
+import { calculateVirtualRange, getVirtualTableContainerClasses, classNames, virtualTableHeaderClasses, virtualTableHeaderCellClasses, getVirtualRowKey, getVirtualTableRowClasses, virtualTableCellClasses, virtualTableEmptyClasses, virtualTableLoadingClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/VirtualTable.tsx
+var VirtualTable = ({
+  data = [],
+  columns = [],
+  rowHeight = 48,
+  height = 400,
+  overscan = 5,
+  stickyHeader = true,
+  rowKey,
+  loading = false,
+  emptyText = "No data",
+  selectable = false,
+  selectedKeys = [],
+  striped = false,
+  bordered = false,
+  className,
+  onRowClick,
+  onSelect,
+  renderCell,
+  ...rest
+}) => {
+  const containerRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const range = useMemo(
+    () => calculateVirtualRange(scrollTop, height, data.length, rowHeight, overscan),
+    [scrollTop, height, data.length, rowHeight, overscan]
+  );
+  const visibleData = useMemo(
+    () => data.slice(range.start, range.end),
+    [data, range.start, range.end]
+  );
+  const selectedSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
+  const onScroll = useCallback(() => {
+    if (containerRef.current) {
+      setScrollTop(containerRef.current.scrollTop);
+    }
+  }, []);
+  const containerClasses = useMemo(
+    () => getVirtualTableContainerClasses(bordered, className),
+    [bordered, className]
+  );
+  const bottomHeight = Math.max(0, range.totalHeight - range.end * rowHeight);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: classNames(
+        containerClasses,
+        rest.className
+      ),
+      style: { height: `${height}px` },
+      onScroll,
+      role: "grid",
+      "aria-rowcount": data.length,
+      children: [
+        /* @__PURE__ */ jsxs("table", { className: "w-full table-fixed", children: [
+          /* @__PURE__ */ jsx("thead", { className: stickyHeader ? virtualTableHeaderClasses : void 0, children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: virtualTableHeaderCellClasses,
+              style: col.width ? { width: typeof col.width === "number" ? `${col.width}px` : col.width } : void 0,
+              children: col.title ?? ""
+            },
+            col.key
+          )) }) }),
+          /* @__PURE__ */ jsxs("tbody", { children: [
+            /* @__PURE__ */ jsx("tr", { style: { height: `${range.offsetTop}px` }, "aria-hidden": true }),
+            visibleData.map((row, localIdx) => {
+              const globalIdx = range.start + localIdx;
+              const key = getVirtualRowKey(row, globalIdx, rowKey);
+              const isSelected = selectedSet.has(key);
+              return /* @__PURE__ */ jsx(
+                "tr",
+                {
+                  className: getVirtualTableRowClasses(globalIdx, striped, isSelected),
+                  onClick: () => {
+                    onRowClick?.(row, globalIdx);
+                    if (selectable) onSelect?.(key, row, globalIdx);
+                  },
+                  children: columns.map((col) => /* @__PURE__ */ jsx("td", { className: virtualTableCellClasses, children: renderCell ? renderCell(row[col.key], row, col) : String(row[col.key] ?? "") }, col.key))
+                },
+                key
+              );
+            }),
+            bottomHeight > 0 && /* @__PURE__ */ jsx("tr", { style: { height: `${bottomHeight}px` }, "aria-hidden": true })
+          ] })
+        ] }),
+        data.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: virtualTableEmptyClasses, children: emptyText }),
+        loading && /* @__PURE__ */ jsx("div", { className: virtualTableLoadingClasses, children: "Loading..." })
+      ]
+    }
+  );
+};
+var VirtualTable_default = VirtualTable;
+
+export { VirtualTable, VirtualTable_default };

package/dist/{chunk-LXX2ZDJN.js → chunk-5CQEXJF2.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkZBVFM3GJ_js = require('./chunk-ZBVFM3GJ.js');
-var chunkTDRINUMH_js = require('./chunk-TDRINUMH.js');
+var chunkJ23B66DJ_js = require('./chunk-J23B66DJ.js');
+var chunkNZNSUKPT_js = require('./chunk-NZNSUKPT.js');
 var chunk3GW3UAKB_js = require('./chunk-3GW3UAKB.js');
-var chunkOYCMGKQ7_js = require('./chunk-OYCMGKQ7.js');
-var chunkF24IF2QL_js = require('./chunk-F24IF2QL.js');
+var chunkZYJTHGQW_js = require('./chunk-ZYJTHGQW.js');
+var chunkBCNKTT5C_js = require('./chunk-BCNKTT5C.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -109,7 +109,7 @@ var DataTableWithToolbar = ({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap flex-1 min-w-0", children: [
         hasSearch ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[320px]", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            chunkOYCMGKQ7_js.Input,
+            chunkZYJTHGQW_js.Input,
             {
               type: "search",
               size: "sm",
@@ -124,7 +124,7 @@ var DataTableWithToolbar = ({
             }
           ),
           toolbar?.showSearchButton ?? true ? /* @__PURE__ */ jsxRuntime.jsx(
-            chunkF24IF2QL_js.Button,
+            chunkBCNKTT5C_js.Button,
             {
               size: "sm",
               variant: "primary",
@@ -143,7 +143,7 @@ var DataTableWithToolbar = ({
             {
               className: "w-full sm:w-auto sm:min-w-[120px] sm:max-w-[180px]",
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                chunkTDRINUMH_js.Select,
+                chunkNZNSUKPT_js.Select,
                 {
                   size: "sm",
                   options: filter.options.map((opt) => ({
@@ -171,7 +171,7 @@ var DataTableWithToolbar = ({
           " \u9879"
         ] }) : null,
         toolbar?.bulkActions?.map((action) => /* @__PURE__ */ jsxRuntime.jsx(
-          chunkF24IF2QL_js.Button,
+          chunkBCNKTT5C_js.Button,
           {
             size: "sm",
             variant: action.variant ?? "outline",
@@ -187,7 +187,7 @@ var DataTableWithToolbar = ({
   const showPagination = pagination && typeof pagination === "object";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClasses, "data-tiger-data-table-with-toolbar": true, children: [
     renderToolbar(),
-    /* @__PURE__ */ jsxRuntime.jsx(chunkZBVFM3GJ_js.Table, { ...tableProps, pagination: false, className: tableClassName }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkJ23B66DJ_js.Table, { ...tableProps, pagination: false, className: tableClassName }),
     showPagination ? /* @__PURE__ */ jsxRuntime.jsx(chunk3GW3UAKB_js.Pagination, { ...pagination, onChange: onPageChange, onPageSizeChange }) : null
   ] });
 };

package/dist/chunk-5EVHVZG5.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/Calendar.tsx
+var Calendar = ({
+  value,
+  mode = "month",
+  fullscreen = false,
+  disabledDate,
+  onChange,
+  onPanelChange,
+  className
+}) => {
+  const today = /* @__PURE__ */ new Date();
+  const [viewYear, setViewYear] = react.useState(value?.getFullYear() ?? today.getFullYear());
+  const [viewMonth, setViewMonth] = react.useState(value?.getMonth() ?? today.getMonth());
+  const days = react.useMemo(() => tigercatCore.getMonthDays(viewYear, viewMonth), [viewYear, viewMonth]);
+  const navigate = react.useCallback(
+    (newYear, newMonth) => {
+      setViewYear(newYear);
+      setViewMonth(newMonth);
+      onPanelChange?.(new Date(newYear, newMonth, 1), mode);
+    },
+    [mode, onPanelChange]
+  );
+  const prevMonth = react.useCallback(() => {
+    if (viewMonth === 0) navigate(viewYear - 1, 11);
+    else navigate(viewYear, viewMonth - 1);
+  }, [viewYear, viewMonth, navigate]);
+  const nextMonth = react.useCallback(() => {
+    if (viewMonth === 11) navigate(viewYear + 1, 0);
+    else navigate(viewYear, viewMonth + 1);
+  }, [viewYear, viewMonth, navigate]);
+  const prevYear = react.useCallback(
+    () => navigate(viewYear - 1, viewMonth),
+    [viewYear, viewMonth, navigate]
+  );
+  const nextYear = react.useCallback(
+    () => navigate(viewYear + 1, viewMonth),
+    [viewYear, viewMonth, navigate]
+  );
+  const selectDay = react.useCallback(
+    (date) => {
+      if (disabledDate?.(date)) return;
+      onChange?.(date);
+    },
+    [disabledDate, onChange]
+  );
+  const selectMonth = react.useCallback(
+    (monthIdx) => {
+      setViewMonth(monthIdx);
+      onPanelChange?.(new Date(viewYear, monthIdx, 1), mode);
+    },
+    [viewYear, mode, onPanelChange]
+  );
+  const containerClass = tigercatCore.classNames(tigercatCore.getCalendarContainerClasses(fullscreen), className);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, role: "group", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.calendarHeaderClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: tigercatCore.calendarNavButtonClasses,
+          "aria-label": mode === "month" ? "Previous month" : "Previous year",
+          onClick: mode === "month" ? prevMonth : prevYear,
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.calendarTitleClasses, children: mode === "month" ? `${tigercatCore.MONTHS[viewMonth]} ${viewYear}` : `${viewYear}` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: tigercatCore.calendarNavButtonClasses,
+          "aria-label": mode === "month" ? "Next month" : "Next year",
+          onClick: mode === "month" ? nextMonth : nextYear,
+          children: "\u203A"
+        }
+      )
+    ] }),
+    mode === "year" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: tigercatCore.MONTHS.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: tigercatCore.getCalendarMonthClasses(viewMonth === i),
+        onClick: () => selectMonth(i),
+        children: m
+      },
+      i
+    )) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7", children: tigercatCore.WEEKDAYS.map((wd) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.calendarWeekdayClasses, children: wd }, wd)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7", children: days.map((date, i) => {
+        const isCurrentMonth = date.getMonth() === viewMonth;
+        const isSelected = value ? tigercatCore.isSameDay(date, value) : false;
+        const isTodayDate = tigercatCore.isSameDay(date, today);
+        const isDisabled = !!disabledDate?.(date);
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center py-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tigercatCore.getCalendarDayClasses(
+              isSelected,
+              isTodayDate,
+              isCurrentMonth,
+              isDisabled
+            ),
+            onClick: () => selectDay(date),
+            children: date.getDate()
+          }
+        ) }, i);
+      }) })
+    ] })
+  ] });
+};
+var Calendar_default = Calendar;
+
+exports.Calendar = Calendar;
+exports.Calendar_default = Calendar_default;

package/dist/chunk-5ZYZQXEM.mjs

@@ -0,0 +1,167 @@
+import React from 'react';
+import { clampPercentage, getStatusVariant, formatProgressText, getCircleSize, calculateCirclePath, classNames, progressCircleTrackStrokeClasses, getProgressVariantClasses, progressCircleTextClasses, progressTextSizeClasses, getProgressTextColorClasses, progressCircleBaseClasses, progressLineInnerClasses, progressStripedClasses, progressStripedAnimationClasses, progressLineBaseClasses, progressTrackBgClasses, progressLineSizeClasses, progressTextBaseClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Progress.tsx
+var Progress = React.memo(
+  ({
+    variant = "primary",
+    size = "md",
+    type = "line",
+    percentage = 0,
+    status = "normal",
+    showText,
+    text,
+    format,
+    striped = false,
+    stripedAnimation = false,
+    strokeWidth = 6,
+    width = "auto",
+    height,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    ...props
+  }) => {
+    const clampedPercentage = clampPercentage(percentage);
+    const effectiveVariant = getStatusVariant(status) || variant;
+    const shouldShowText = showText ?? type === "line";
+    const displayText = shouldShowText ? formatProgressText(clampedPercentage, text, format) : "";
+    const resolvedAriaLabel = ariaLabel ?? (ariaLabelledby ? void 0 : `Progress: ${clampedPercentage}%`);
+    const ariaAttrs = {
+      role: "progressbar",
+      "aria-label": resolvedAriaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-describedby": ariaDescribedby,
+      "aria-valuenow": clampedPercentage,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    };
+    const renderLineProgress = () => {
+      const containerStyle = width !== "auto" ? { width: typeof width === "number" ? `${width}px` : width } : {};
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          className: classNames("flex items-center w-full", className),
+          style: { ...style ?? {}, ...containerStyle },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames(
+                  progressLineBaseClasses,
+                  progressTrackBgClasses,
+                  !height && progressLineSizeClasses[size]
+                ),
+                style: { flex: 1, ...height ? { height: `${height}px` } : {} },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classNames(
+                      progressLineInnerClasses,
+                      getProgressVariantClasses(effectiveVariant),
+                      striped && progressStripedClasses,
+                      striped && stripedAnimation && progressStripedAnimationClasses
+                    ),
+                    style: { width: `${clampedPercentage}%` },
+                    ...ariaAttrs
+                  }
+                )
+              }
+            ),
+            shouldShowText && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(
+                  progressTextBaseClasses,
+                  progressTextSizeClasses[size],
+                  getProgressTextColorClasses(effectiveVariant)
+                ),
+                children: displayText
+              }
+            )
+          ]
+        }
+      );
+    };
+    const renderCircleProgress = () => {
+      const {
+        width: svgWidth,
+        height: svgHeight,
+        radius,
+        cx,
+        cy
+      } = getCircleSize(size, strokeWidth);
+      const { strokeDasharray, strokeDashoffset } = calculateCirclePath(radius, clampedPercentage);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...props,
+          className: classNames(progressCircleBaseClasses, className),
+          style: {
+            ...style ?? {},
+            width: `${svgWidth}px`,
+            height: `${svgHeight}px`
+          },
+          children: [
+            /* @__PURE__ */ jsxs("svg", { width: svgWidth, height: svgHeight, viewBox: `0 0 ${svgWidth} ${svgHeight}`, children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  className: progressCircleTrackStrokeClasses,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: radius,
+                  fill: "none",
+                  stroke: "currentColor",
+                  className: getProgressVariantClasses(effectiveVariant).replace("bg-", "text-"),
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeDasharray,
+                  strokeDashoffset,
+                  style: {
+                    transition: "stroke-dashoffset 0.3s ease",
+                    transform: "rotate(-90deg)",
+                    transformOrigin: "center"
+                  },
+                  ...ariaAttrs
+                }
+              )
+            ] }),
+            shouldShowText && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames(
+                  progressCircleTextClasses,
+                  progressTextSizeClasses[size],
+                  "font-medium",
+                  getProgressTextColorClasses(effectiveVariant)
+                ),
+                children: displayText
+              }
+            )
+          ]
+        }
+      );
+    };
+    if (type === "circle") return renderCircleProgress();
+    return renderLineProgress();
+  }
+);
+Progress.displayName = "Progress";
+
+export { Progress };