@dreamtree-org/twreact-ui 1.3.0 → 1.3.2

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 };

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

@@ -0,0 +1,59 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Loader2 } from 'lucide-react';
+
+var _excluded = ["className", "variant", "size", "disabled", "loading", "children", "leftIcon", "rightIcon", "fullWidth"];
+var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    disabled = _ref.disabled,
+    loading = _ref.loading,
+    children = _ref.children,
+    leftIcon = _ref.leftIcon,
+    rightIcon = _ref.rightIcon,
+    fullWidth = _ref.fullWidth,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var baseClasses = cn('inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none', {
+    // Variants
+    'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500': variant === 'primary',
+    'bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus:ring-secondary-500': variant === 'secondary',
+    'bg-transparent border border-gray-300 hover:bg-gray-50 focus:ring-primary-500': variant === 'outline',
+    'bg-transparent text-primary-600 hover:bg-primary-50 focus:ring-primary-500': variant === 'ghost',
+    'bg-error-600 text-white hover:bg-error-700 focus:ring-error-500': variant === 'destructive',
+    'bg-success-600 text-white hover:bg-success-700 focus:ring-success-500': variant === 'success',
+    'bg-warning-600 text-white hover:bg-warning-700 focus:ring-warning-500': variant === 'warning',
+    // Sizes — every value of the shared `Size` type gets a real height.
+    'h-7 px-2 text-xs': size === 'xs',
+    'h-8 px-3 text-xs': size === 'sm',
+    'h-10 px-4 text-sm': size === 'md',
+    'h-12 px-6 text-base': size === 'lg',
+    'h-14 px-8 text-lg': size === 'xl',
+    'h-16 px-10 text-xl': size === '2xl',
+    // Full width
+    'w-full': fullWidth
+  }, className);
+  return jsxs("button", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: baseClasses,
+    disabled: disabled || loading
+  }, props), {}, {
+    children: [loading && jsx(Loader2, {
+      className: "mr-2 h-4 w-4 animate-spin"
+    }), !loading && leftIcon && jsx("span", {
+      className: "mr-2",
+      children: leftIcon
+    }), children, !loading && rightIcon && jsx("span", {
+      className: "ml-2",
+      children: rightIcon
+    })]
+  }));
+});
+Button.displayName = 'Button';
+
+export { Button as default };

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

@@ -0,0 +1,188 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useRef, useState, useEffect, useCallback } from 'react';
+import { Check } from 'lucide-react';
+
+var _excluded = ["id", "name", "label", "checked", "defaultChecked", "onChange", "disabled", "required", "className", "size", "labelPosition", "value", "ariaLabel", "variant", "indeterminate", "borderColor", "color", "iconClass", "checkedClass", "wrapperProps"];
+var SIZE_CLASSES = {
+  sm: {
+    box: "h-4 w-4",
+    label: "text-sm",
+    icon: "w-3 h-3"
+  },
+  md: {
+    box: "h-5 w-5",
+    label: "text-sm",
+    icon: "w-3.5 h-3.5"
+  },
+  lg: {
+    box: "h-6 w-6",
+    label: "text-base",
+    icon: "w-4 h-4"
+  }
+};
+var COLOR_PRESETS = {
+  primary: {
+    checked: "peer-checked:bg-primary-600 peer-checked:border-primary-600 peer-checked:text-white",
+    ring: "peer-focus:ring-primary-300"
+  },
+  secondary: {
+    checked: "peer-checked:bg-secondary-600 peer-checked:border-secondary-600 peer-checked:text-white",
+    ring: "peer-focus:ring-secondary-300"
+  },
+  success: {
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
+    ring: "peer-focus:ring-success-300"
+  },
+  green: {
+    checked: "peer-checked:bg-success-600 peer-checked:border-success-600 peer-checked:text-white",
+    ring: "peer-focus:ring-success-300"
+  },
+  error: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  danger: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  red: {
+    checked: "peer-checked:bg-error-600 peer-checked:border-error-600 peer-checked:text-white",
+    ring: "peer-focus:ring-error-300"
+  },
+  warning: {
+    checked: "peer-checked:bg-warning-600 peer-checked:border-warning-600 peer-checked:text-white",
+    ring: "peer-focus:ring-warning-300"
+  },
+  blue: {
+    checked: "peer-checked:bg-blue-600 peer-checked:border-blue-600 peer-checked:text-white",
+    ring: "peer-focus:ring-blue-300"
+  },
+  indigo: {
+    checked: "peer-checked:bg-indigo-600 peer-checked:border-indigo-600 peer-checked:text-white",
+    ring: "peer-focus:ring-indigo-300"
+  },
+  purple: {
+    checked: "peer-checked:bg-purple-600 peer-checked:border-purple-600 peer-checked:text-white",
+    ring: "peer-focus:ring-purple-300"
+  }
+};
+var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    checked = _ref.checked,
+    defaultChecked = _ref.defaultChecked,
+    onChange = _ref.onChange,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$labelPosition = _ref.labelPosition,
+    labelPosition = _ref$labelPosition === void 0 ? "right" : _ref$labelPosition,
+    value = _ref.value,
+    ariaLabel = _ref.ariaLabel;
+    _ref.variant;
+    var _ref$indeterminate = _ref.indeterminate,
+    indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
+    borderColor = _ref.borderColor,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    iconClass = _ref.iconClass,
+    checkedClass = _ref.checkedClass,
+    wrapperProps = _ref.wrapperProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var autoId = useId();
+  var inputId = id || "".concat(autoId, "-checkbox");
+  var inputRef = useRef(null);
+  var isControlled = checked !== undefined;
+  var _useState = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalChecked = _useState2[0],
+    setInternalChecked = _useState2[1];
+  var currentChecked = isControlled ? checked : internalChecked;
+  // expose ref
+  useEffect(function () {
+    if (!ref) return;
+    if (typeof ref === "function") ref(inputRef.current);else ref.current = inputRef.current;
+  }, [ref]);
+  // indeterminate
+  useEffect(function () {
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  var handleChange = useCallback(function (e) {
+    if (!isControlled) setInternalChecked(e.target.checked);
+    if (typeof onChange === "function") onChange(e);
+  }, [isControlled, onChange]);
+  var sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.md;
+  var wrapperCls = "inline-flex items-center ".concat(className);
+  var boxOuterCls = "relative inline-flex items-center justify-center rounded-sm border transition-shadow ".concat(sizeClass.box, " ").concat(disabled ? "opacity-60 cursor-not-allowed" : "cursor-pointer hover:shadow-sm", " ");
+  // Icon classes driven by React state (reliable)
+  var iconBase = "pointer-events-none transform transition-all duration-150 ease-out";
+  var iconShown = "opacity-100 scale-100";
+  var iconHidden = "opacity-0 scale-75";
+  var isPreset = COLOR_PRESETS[color];
+  var colorClasses = isPreset ? "".concat(isPreset.checked, " peer-focus:ring-2 peer-focus:ring-offset-1 ").concat(isPreset.ring) : "peer-focus:ring-2 peer-focus:ring-offset-1 peer-focus:ring-primary-300";
+  var customColorStyle = currentChecked && !isPreset && !checkedClass ? {
+    backgroundColor: color,
+    borderColor: color,
+    color: "#ffffff"
+  } : {};
+  // The outer box shows its own border unless a checked preset or custom colour paints it.
+  var showBoxBorder = !(currentChecked && (isPreset || customColorStyle.borderColor));
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    className: wrapperCls
+  }, wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {}), {}, {
+    children: [label && labelPosition === "left" && jsx("label", {
+      htmlFor: inputId,
+      className: "".concat(sizeClass.label, " select-none mr-2"),
+      children: label
+    }), jsxs("div", {
+      className: "".concat(boxOuterCls).concat(!disabled && showBoxBorder && !borderColor ? " border-gray-300" : ""),
+      style: disabled || !showBoxBorder || !borderColor ? {} : {
+        borderColor: borderColor
+      },
+      "aria-disabled": disabled,
+      children: [jsx("input", _objectSpread2({
+        id: inputId,
+        ref: inputRef,
+        name: name,
+        type: "checkbox",
+        className: "peer absolute inset-0 m-0 p-0 opacity-0 z-10",
+        // ensure we set checked only from the boolean (avoid undefined)
+        checked: Boolean(currentChecked),
+        onChange: handleChange,
+        disabled: disabled,
+        required: required,
+        value: value,
+        "aria-label": ariaLabel,
+        "aria-checked": Boolean(currentChecked)
+      }, props)), jsx("div", {
+        className: "pointer-events-none z-0 flex items-center justify-center rounded-sm w-full h-full transition-colors duration-150 ease-in-out " + "".concat(colorClasses, " ") + "".concat(disabled ? "bg-gray-100 border-gray-400 text-primary-400" : "bg-white border-gray-500", " ").concat(checkedClass ? checkedClass : ""),
+        style: currentChecked && checkedClass ? {
+          backgroundColor: "",
+          borderColor: ""
+        } : customColorStyle,
+        "aria-hidden": "true",
+        children: jsx(Check, {
+          className: "".concat(sizeClass.icon, " ").concat(iconBase, " ").concat(currentChecked ? iconShown : iconHidden, " ").concat(iconClass || ""),
+          strokeWidth: 2.2,
+          "aria-hidden": "true"
+        })
+      })]
+    }), label && labelPosition === "right" && jsx("label", {
+      htmlFor: inputId,
+      className: "".concat(sizeClass.label, " select-none ml-2"),
+      children: label
+    })]
+  }));
+});
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox as default };