@dreamtree-org/twreact-ui 1.3.0 → 1.3.1

package/dist/esm/components/blocks/ErrorState.js

@@ -0,0 +1,53 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { AlertCircle, RotateCw } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import Button from '../core/Button.js';
+
+var _excluded = ["title", "description", "onRetry", "retryLabel", "className"];
+// Extracted from CampaignPro/components/app/page-error.tsx (7 products hand-roll one).
+// Neutral copy and a retry; never shows a raw error.message.
+var ErrorState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "We couldn't load this" : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? 'Your data is safe. Try again, and if it keeps happening, contact support.' : _ref$description,
+    onRetry = _ref.onRetry,
+    _ref$retryLabel = _ref.retryLabel,
+    retryLabel = _ref$retryLabel === void 0 ? 'Try again' : _ref$retryLabel,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    role: "alert",
+    className: cn('flex flex-col items-center justify-center gap-2 px-6 py-12 text-center', className)
+  }, props), {}, {
+    children: [jsx("span", {
+      className: "mb-1 grid h-12 w-12 place-items-center rounded-full bg-error-50 text-error-600",
+      "aria-hidden": "true",
+      children: jsx(AlertCircle, {
+        className: "h-6 w-6"
+      })
+    }), jsx("h3", {
+      className: "text-base font-semibold text-foreground",
+      children: title
+    }), description && jsx("p", {
+      className: "max-w-sm text-sm text-muted",
+      children: description
+    }), onRetry && jsx(Button, {
+      variant: "outline",
+      className: "mt-3",
+      onClick: onRetry,
+      leftIcon: jsx(RotateCw, {
+        className: "h-4 w-4",
+        "aria-hidden": "true"
+      }),
+      children: retryLabel
+    })]
+  }));
+});
+ErrorState.displayName = 'ErrorState';
+
+export { ErrorState as default };

package/dist/esm/components/blocks/LoadingState.js

@@ -0,0 +1,134 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["variant", "rows", "label", "className"];
+// Extracted from venturepro/client/src/components/States.jsx (6 products hand-roll loaders).
+// A skeleton shaped like the content that replaces it; no page-level spinners.
+// Plain bars rather than twreact Skeleton: Skeleton gives every bar its own role="status" and an
+// inline colour, which would nest live regions inside this one.
+var Bone = function Bone(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 14 : _ref$height,
+    className = _ref.className;
+  return jsx("span", {
+    "aria-hidden": "true",
+    className: cn('block animate-pulse rounded-control bg-gray-200 motion-reduce:animate-none', className),
+    style: {
+      width: width,
+      height: height
+    }
+  });
+};
+var Line = Bone;
+var shapes = {
+  table: function table(rows) {
+    return jsx("div", {
+      className: "divide-y divide-gray-200",
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return jsxs("div", {
+          className: "flex items-center gap-4 px-4 py-3",
+          children: [jsx(Line, {
+            width: "30%"
+          }), jsx(Line, {
+            width: "20%"
+          }), jsx(Line, {
+            width: "15%"
+          }), jsx(Line, {
+            width: "10%"
+          })]
+        }, i);
+      })
+    });
+  },
+  cards: function cards(rows) {
+    return jsx("div", {
+      className: "grid gap-4 p-4 sm:grid-cols-2 lg:grid-cols-3",
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return jsxs("div", {
+          className: "flex flex-col gap-3 rounded-card border border-gray-200 p-4",
+          children: [jsx(Line, {
+            width: "60%",
+            height: 16
+          }), jsx(Line, {}), jsx(Line, {
+            width: "80%"
+          })]
+        }, i);
+      })
+    });
+  },
+  stats: function stats(rows) {
+    return jsx("div", {
+      className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return jsxs("div", {
+          className: "flex items-center gap-4 rounded-card border border-gray-200 bg-surface p-5",
+          children: [jsx(Bone, {
+            width: 48,
+            height: 48
+          }), jsxs("div", {
+            className: "flex flex-1 flex-col gap-2",
+            children: [jsx(Line, {
+              width: "60%"
+            }), jsx(Line, {
+              width: "40%",
+              height: 24
+            })]
+          })]
+        }, i);
+      })
+    });
+  },
+  detail: function detail(rows) {
+    return jsx("div", {
+      className: "grid grid-cols-[minmax(8rem,auto)_1fr] gap-x-6 gap-y-3 p-4",
+      children: Array.from({
+        length: rows
+      }, function (_, i) {
+        return jsxs(React.Fragment, {
+          children: [jsx(Line, {
+            width: "70%"
+          }), jsx(Line, {
+            width: "".concat(50 + i * 17 % 40, "%")
+          })]
+        }, i);
+      })
+    });
+  }
+};
+var LoadingState = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'table' : _ref2$variant,
+    rows = _ref2.rows,
+    _ref2$label = _ref2.label,
+    label = _ref2$label === void 0 ? 'Loading…' : _ref2$label,
+    className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var count = rows !== null && rows !== void 0 ? rows : variant === 'stats' ? 4 : variant === 'cards' ? 3 : 5;
+  var render = shapes[variant] || shapes.table;
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    role: "status",
+    "aria-busy": "true",
+    "aria-live": "polite",
+    className: cn(className)
+  }, props), {}, {
+    children: [jsx("span", {
+      className: "sr-only",
+      children: label
+    }), render(count)]
+  }));
+});
+LoadingState.displayName = 'LoadingState';
+
+export { Bone, LoadingState as default };

package/dist/esm/components/blocks/PageHeader.js

@@ -0,0 +1,51 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { ArrowLeft } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["title", "subtitle", "actions", "back", "linkAs", "className"];
+// Extracted from taskpro/client/src/features/shared/PageHeader.jsx (31 imports) and the
+// CampaignPro UX guide's page anatomy: one h1, a muted subtitle, actions top right.
+var PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    actions = _ref.actions,
+    back = _ref.back,
+    _ref$linkAs = _ref.linkAs,
+    Link = _ref$linkAs === void 0 ? 'a' : _ref$linkAs,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('flex flex-col gap-3', className)
+  }, props), {}, {
+    children: [back && jsxs(Link, {
+      href: back.href,
+      className: "inline-flex w-fit items-center gap-1.5 rounded-control text-sm text-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2",
+      children: [jsx(ArrowLeft, {
+        className: "h-4 w-4",
+        "aria-hidden": "true"
+      }), back.label]
+    }), jsxs("div", {
+      className: "flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between",
+      children: [jsxs("div", {
+        className: "min-w-0",
+        children: [jsx("h1", {
+          className: "text-xl font-semibold tracking-tight text-foreground sm:text-2xl",
+          children: title
+        }), subtitle && jsx("p", {
+          className: "mt-1 max-w-2xl text-sm text-muted",
+          children: subtitle
+        })]
+      }), actions && jsx("div", {
+        className: "flex flex-wrap items-center gap-3",
+        children: actions
+      })]
+    })]
+  }));
+});
+PageHeader.displayName = 'PageHeader';
+
+export { PageHeader as default };

package/dist/esm/components/blocks/StatCard.js

@@ -0,0 +1,79 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { ArrowUp, ArrowDown } from 'lucide-react';
+import { cn } from '../../utils/cn.js';
+import Card from '../utility/Card.js';
+import { Bone } from './LoadingState.js';
+
+var _excluded = ["label", "value", "icon", "tone", "change", "loading", "className"];
+// Extracted from PracticePro/components/ui/StatCard.tsx (28 imports), with tones mapped to the
+// semantic scales instead of product colours. Class names are written out in full so Tailwind keeps them.
+var TONES = {
+  primary: 'bg-primary-50 text-primary-600',
+  secondary: 'bg-secondary-100 text-secondary-600',
+  success: 'bg-success-50 text-success-600',
+  warning: 'bg-warning-50 text-warning-600',
+  error: 'bg-error-50 text-error-600',
+  info: 'bg-info-50 text-info-600'
+};
+var StatCard = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _change$goodWhenUp, _change$unit;
+  var label = _ref.label,
+    value = _ref.value,
+    icon = _ref.icon,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'primary' : _ref$tone,
+    change = _ref.change,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var up = change ? change.value >= 0 : false;
+  var good = change ? ((_change$goodWhenUp = change.goodWhenUp) !== null && _change$goodWhenUp !== void 0 ? _change$goodWhenUp : true) === up : false;
+  return jsx(Card, _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn('h-full', className)
+  }, props), {}, {
+    children: jsxs("div", {
+      className: "flex items-start gap-4 p-5",
+      children: [icon && jsx("span", {
+        className: cn('grid h-12 w-12 shrink-0 place-items-center rounded-card', TONES[tone] || TONES.primary),
+        "aria-hidden": "true",
+        children: icon
+      }), jsxs("div", {
+        className: "min-w-0",
+        children: [jsx("p", {
+          className: "text-sm text-muted",
+          children: label
+        }), loading ? jsx(Bone, {
+          height: 32,
+          width: 72,
+          className: "mt-1"
+        }) : jsx("p", {
+          className: "mt-0.5 text-2xl font-semibold tracking-tight text-foreground tabular-nums sm:text-3xl",
+          children: value
+        }), change && !loading && jsxs("p", {
+          className: "mt-1 flex items-center gap-1 text-xs text-muted",
+          children: [jsxs("span", {
+            className: cn('inline-flex items-center gap-0.5 font-semibold', good ? 'text-success-600' : 'text-error-600'),
+            children: [up ? jsx(ArrowUp, {
+              className: "h-3.5 w-3.5",
+              "aria-hidden": "true"
+            }) : jsx(ArrowDown, {
+              className: "h-3.5 w-3.5",
+              "aria-hidden": "true"
+            }), jsxs("span", {
+              className: "sr-only",
+              children: [up ? 'Up' : 'Down', " "]
+            }), Math.abs(change.value), (_change$unit = change.unit) !== null && _change$unit !== void 0 ? _change$unit : '%']
+          }), change.period]
+        })]
+      })]
+    })
+  }));
+});
+StatCard.displayName = 'StatCard';
+
+export { StatCard as default };

package/dist/esm/components/blocks/StatusPill.js

@@ -0,0 +1,55 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../utils/cn.js';
+import Badge from '../utility/Badge.js';
+
+var _excluded = ["status", "map", "tone", "icon", "children", "className"];
+// Extracted from billpro/client/src/components/StatusPill.jsx (10 products hand-roll one).
+// One map from domain state to tone + human label; unknown states are humanized, never shown raw.
+var TONE_TO_VARIANT = {
+  neutral: 'secondary',
+  info: 'primary',
+  success: 'success',
+  warning: 'warning',
+  danger: 'error',
+  muted: 'outline',
+  // Semantic tones are accepted too.
+  primary: 'primary',
+  secondary: 'secondary',
+  error: 'error'
+};
+var humanizeStatus = function humanizeStatus(status) {
+  var words = String(status).replace(/[_-]+/g, ' ').trim().toLowerCase();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+};
+var StatusPill = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref2;
+  var status = _ref.status,
+    map = _ref.map,
+    tone = _ref.tone,
+    icon = _ref.icon,
+    children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var entry = status != null && map ? map[status] : undefined;
+  var resolvedTone = (entry === null || entry === void 0 ? void 0 : entry.tone) || tone || 'neutral';
+  var label = (_ref2 = children !== null && children !== void 0 ? children : entry === null || entry === void 0 ? void 0 : entry.label) !== null && _ref2 !== void 0 ? _ref2 : status != null ? humanizeStatus(status) : null;
+  var resolvedIcon = icon !== null && icon !== void 0 ? icon : entry === null || entry === void 0 ? void 0 : entry.icon;
+  return jsxs(Badge, _objectSpread2(_objectSpread2({
+    ref: ref,
+    variant: TONE_TO_VARIANT[resolvedTone] || 'secondary',
+    size: "sm",
+    className: cn('gap-1.5 whitespace-nowrap', className)
+  }, props), {}, {
+    children: [resolvedIcon && jsx("span", {
+      className: "inline-flex h-3.5 w-3.5 items-center",
+      "aria-hidden": "true",
+      children: resolvedIcon
+    }), label]
+  }));
+});
+StatusPill.displayName = 'StatusPill';
+
+export { StatusPill as default, humanizeStatus };

package/dist/esm/components/core/Accordion.js

@@ -0,0 +1,260 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useLayoutEffect } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useLatestRef } from '../../hooks/useLatestRef.js';
+
+var _excluded = ["items", "allowMultiple", "defaultOpenIndexes", "onChange", "className", "headerClassName", "contentClassName", "chevronPosition", "chevronIcon", "bordered", "rounded", "size", "transitionDuration"];
+/**
+ * item.leftIcon may be:
+ * - ReactNode (e.g. <svg/>)
+ * - (index: number, item: any) => ReactNode
+ */
+var Accordion = /*#__PURE__*/forwardRef(function Accordion(_ref, ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$allowMultiple = _ref.allowMultiple,
+    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    _ref$defaultOpenIndex = _ref.defaultOpenIndexes,
+    defaultOpenIndexes = _ref$defaultOpenIndex === void 0 ? [] : _ref$defaultOpenIndex,
+    onChange = _ref.onChange,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$headerClassName = _ref.headerClassName,
+    headerClassName = _ref$headerClassName === void 0 ? "" : _ref$headerClassName,
+    _ref$contentClassName = _ref.contentClassName,
+    contentClassName = _ref$contentClassName === void 0 ? "" : _ref$contentClassName,
+    _ref$chevronPosition = _ref.chevronPosition,
+    chevronPosition = _ref$chevronPosition === void 0 ? "right" : _ref$chevronPosition,
+    _ref$chevronIcon = _ref.chevronIcon,
+    chevronIcon = _ref$chevronIcon === void 0 ? null : _ref$chevronIcon,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? true : _ref$bordered,
+    _ref$rounded = _ref.rounded,
+    rounded = _ref$rounded === void 0 ? "md" : _ref$rounded,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$transitionDurati = _ref.transitionDuration,
+    transitionDuration = _ref$transitionDurati === void 0 ? 220 : _ref$transitionDurati,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var saneDefault = Array.isArray(defaultOpenIndexes) ? defaultOpenIndexes.filter(function (i) {
+    return Number.isFinite(i) && i >= 0 && i < items.length;
+  }) : [];
+  var _useState = useState(saneDefault),
+    _useState2 = _slicedToArray(_useState, 2),
+    openIndexes = _useState2[0],
+    setOpenIndexes = _useState2[1];
+  var headerRefs = useRef([]);
+  var panelRefs = useRef([]);
+  // Drop out-of-range indexes when the item count changes
+  // (adjust-during-render pattern).
+  var _useState3 = useState(items.length),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevItemCount = _useState4[0],
+    setPrevItemCount = _useState4[1];
+  if (items.length !== prevItemCount) {
+    setPrevItemCount(items.length);
+    setOpenIndexes(function (prev) {
+      return prev.filter(function (i) {
+        return i >= 0 && i < items.length;
+      });
+    });
+  }
+  var onChangeRef = useLatestRef(onChange);
+  useEffect(function () {
+    if (typeof onChangeRef.current === "function") onChangeRef.current(openIndexes);
+  }, [openIndexes, onChangeRef]);
+  // Size panels from their measured content before paint. Done imperatively
+  // (not via the style prop) so render never reads refs / the DOM.
+  useLayoutEffect(function () {
+    panelRefs.current.forEach(function (panelEl, idx) {
+      if (!panelEl) return;
+      var open = openIndexes.includes(idx);
+      panelEl.style.maxHeight = open ? panelEl.scrollHeight + "px" : "0px";
+    });
+  }, [openIndexes, items]);
+  var isOpen = function isOpen(index) {
+    return openIndexes.includes(index);
+  };
+  var toggleIndex = function toggleIndex(index) {
+    var _items$index;
+    if ((_items$index = items[index]) !== null && _items$index !== void 0 && _items$index.disabled) return;
+    setOpenIndexes(function (prev) {
+      if (allowMultiple) {
+        return prev.includes(index) ? prev.filter(function (i) {
+          return i !== index;
+        }) : [].concat(_toConsumableArray(prev), [index]);
+      } else {
+        return prev.includes(index) ? [] : [index];
+      }
+    });
+  };
+  var handleHeaderKeyDown = function handleHeaderKeyDown(e, index) {
+    var max = items.length - 1;
+    if (e.key === "ArrowDown") {
+      var _headerRefs$current$n;
+      e.preventDefault();
+      var next = index === max ? 0 : index + 1;
+      (_headerRefs$current$n = headerRefs.current[next]) === null || _headerRefs$current$n === void 0 || _headerRefs$current$n.focus();
+    } else if (e.key === "ArrowUp") {
+      var _headerRefs$current$p;
+      e.preventDefault();
+      var prev = index === 0 ? max : index - 1;
+      (_headerRefs$current$p = headerRefs.current[prev]) === null || _headerRefs$current$p === void 0 || _headerRefs$current$p.focus();
+    } else if (e.key === "Home") {
+      var _headerRefs$current$;
+      e.preventDefault();
+      (_headerRefs$current$ = headerRefs.current[0]) === null || _headerRefs$current$ === void 0 || _headerRefs$current$.focus();
+    } else if (e.key === "End") {
+      var _headerRefs$current$m;
+      e.preventDefault();
+      (_headerRefs$current$m = headerRefs.current[max]) === null || _headerRefs$current$m === void 0 || _headerRefs$current$m.focus();
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggleIndex(index);
+    }
+  };
+  // header sizes keep vertical padding; content only px (py moved inside inner wrapper)
+  var sizeMap = {
+    sm: {
+      header: "py-2 px-3 text-sm",
+      content: "px-3 text-sm"
+    },
+    md: {
+      header: "py-3 px-4 text-base",
+      content: "px-4 text-sm"
+    },
+    lg: {
+      header: "py-4 px-5 text-lg",
+      content: "px-5 text-base"
+    }
+  };
+  var innerPaddingMap = {
+    sm: "py-2",
+    md: "py-3",
+    lg: "py-4"
+  };
+  var roundedMap = {
+    none: "",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl"
+  };
+  var wrapperClasses = cn(bordered ? "bg-white" : "bg-transparent", bordered ? "divide-y divide-gray-200" : "", roundedMap[rounded] || roundedMap.md, "shadow-sm", className);
+  var renderLeftIcon = function renderLeftIcon(item, index) {
+    var left = item === null || item === void 0 ? void 0 : item.leftIcon;
+    if (!left) return null;
+    if (typeof left === "function") {
+      try {
+        return left(index, item);
+      } catch (err) {
+        // don't crash the component if the function throws
+        // you could also console.error here in dev
+        return null;
+      }
+    }
+    return left; // assume ReactNode
+  };
+  return jsx("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: wrapperClasses,
+    role: "presentation"
+  }, rest), {}, {
+    children: items.map(function (item, index) {
+      var _item$id;
+      var id = (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : index;
+      var open = isOpen(index);
+      var headerId = "accordion-header-".concat(id);
+      var panelId = "accordion-panel-".concat(id);
+      var leftIconEl = renderLeftIcon(item, index);
+      return jsxs("div", {
+        className: "bg-white",
+        children: [jsx("h3", {
+          children: jsx("button", {
+            ref: function ref(el) {
+              return headerRefs.current[index] = el;
+            },
+            id: headerId,
+            "aria-controls": panelId,
+            "aria-expanded": open,
+            disabled: item.disabled,
+            onClick: function onClick() {
+              return toggleIndex(index);
+            },
+            onKeyDown: function onKeyDown(e) {
+              return handleHeaderKeyDown(e, index);
+            },
+            type: "button",
+            className: "w-full flex items-center ".concat(sizeMap[size].header, " justify-between focus:outline-none focus:ring-2 focus:ring-indigo-500 ").concat(headerClassName, " ").concat(item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"),
+            children: jsxs("div", {
+              className: "flex items-center gap-3 w-full",
+              children: [chevronPosition === "left" ? jsx("span", {
+                className: "flex-shrink-0 transform transition-transform duration-150 ".concat(open ? "rotate-180" : "rotate-0"),
+                children: chevronIcon !== null && chevronIcon !== void 0 ? chevronIcon : jsx("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-5 w-5",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  children: jsx("path", {
+                    fillRule: "evenodd",
+                    d: "M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z",
+                    clipRule: "evenodd"
+                  })
+                })
+              }) : leftIconEl ? jsx("span", {
+                className: "flex-shrink-0",
+                children: leftIconEl
+              }) : null, jsx("div", {
+                className: "flex-1 text-left",
+                children: jsxs("div", {
+                  className: "flex items-center gap-2",
+                  children: [jsx("span", {
+                    className: "font-medium",
+                    children: item.title
+                  }), item.subtitle ? jsx("span", {
+                    className: "text-primary-500 text-sm",
+                    children: item.subtitle
+                  }) : null]
+                })
+              }), chevronPosition === "right" ? jsx("span", {
+                className: "flex-shrink-0 transform transition-transform duration-150 ".concat(open ? "rotate-180" : "rotate-0"),
+                children: chevronIcon !== null && chevronIcon !== void 0 ? chevronIcon : jsx("svg", {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: "h-5 w-5",
+                  viewBox: "0 0 20 20",
+                  fill: "currentColor",
+                  children: jsx("path", {
+                    fillRule: "evenodd",
+                    d: "M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z",
+                    clipRule: "evenodd"
+                  })
+                })
+              }) : null]
+            })
+          })
+        }), jsx("div", {
+          id: panelId,
+          role: "region",
+          "aria-labelledby": headerId,
+          ref: function ref(el) {
+            return panelRefs.current[index] = el;
+          },
+          style: {
+            transition: "max-height ".concat(transitionDuration, "ms ease"),
+            overflow: "hidden"
+          },
+          className: "".concat(contentClassName, " ").concat(sizeMap[size].content),
+          children: jsx("div", {
+            className: "".concat(innerPaddingMap[size]),
+            children: item.content
+          })
+        })]
+      }, id);
+    })
+  }));
+});
+Accordion.displayName = "Accordion";
+
+export { Accordion as default };