@dreamtree-org/twreact-ui 1.3.0 → 1.3.1

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

@@ -0,0 +1,197 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["count", "value", "defaultValue", "readOnly", "icon", "toggledIcon", "activeColor", "inactiveColor", "size", "onChange", "onClick", "text", "className", "id", "name"];
+function StarFilled(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 20 : _ref$size;
+  return jsx("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false",
+    className: "block",
+    children: jsx("path", {
+      d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",
+      fill: "currentColor"
+    })
+  });
+}
+function StarOutline(_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 20 : _ref2$size;
+  return jsx("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    focusable: "false",
+    className: "block",
+    children: jsx("path", {
+      d: "M22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.64-7.03L22 9.24z",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.2"
+    })
+  });
+}
+var Rate = /*#__PURE__*/forwardRef(function Rate(_ref3, ref) {
+  var _ref3$count = _ref3.count,
+    count = _ref3$count === void 0 ? 5 : _ref3$count,
+    value = _ref3.value,
+    _ref3$defaultValue = _ref3.defaultValue,
+    defaultValue = _ref3$defaultValue === void 0 ? 0 : _ref3$defaultValue,
+    _ref3$readOnly = _ref3.readOnly,
+    readOnly = _ref3$readOnly === void 0 ? false : _ref3$readOnly,
+    icon = _ref3.icon,
+    toggledIcon = _ref3.toggledIcon,
+    activeColor = _ref3.activeColor,
+    inactiveColor = _ref3.inactiveColor,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? 20 : _ref3$size,
+    onChange = _ref3.onChange,
+    onClick = _ref3.onClick,
+    text = _ref3.text,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? "" : _ref3$className,
+    id = _ref3.id,
+    name = _ref3.name,
+    rest = _objectWithoutProperties(_ref3, _excluded);
+  var _useState = useState(Math.max(0, Math.min(count, Math.floor(defaultValue || 0)))),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hoverValue = _useState4[0],
+    setHoverValue = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    focusValue = _useState6[0],
+    setFocusValue = _useState6[1];
+  var isControlled = value != null;
+  var selectedValue = isControlled ? value : internalValue;
+  var displayValue = hoverValue != null ? hoverValue : focusValue != null ? focusValue : selectedValue;
+  var InactiveIcon = icon !== null && icon !== void 0 ? icon : jsx(StarOutline, {
+    size: size
+  });
+  var ActiveIcon = toggledIcon !== null && toggledIcon !== void 0 ? toggledIcon : jsx(StarFilled, {
+    size: size
+  });
+  var commit = function commit(n) {
+    if (readOnly) return;
+    if (!isControlled) setInternalValue(n);
+    if (typeof onChange === "function") onChange(n);
+    if (typeof onClick === "function") onClick(n);
+  };
+  var handleMouseEnter = function handleMouseEnter(n) {
+    if (readOnly) return;
+    setHoverValue(n);
+  };
+  var handleMouseMove = function handleMouseMove(n) {
+    if (readOnly) return;
+    setHoverValue(n);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    if (readOnly) return;
+    setHoverValue(null);
+  };
+  var handleFocus = function handleFocus(n) {
+    if (readOnly) return;
+    setFocusValue(n);
+  };
+  var handleBlur = function handleBlur() {
+    if (readOnly) return;
+    setFocusValue(null);
+  };
+  var handleKeyDown = function handleKeyDown(e, n) {
+    if (readOnly) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      commit(n);
+      return;
+    }
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      setFocusValue(function (prev) {
+        var base = prev != null ? prev : selectedValue || 0;
+        return Math.max(0, base - 1);
+      });
+      return;
+    }
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      setFocusValue(function (prev) {
+        var base = prev != null ? prev : selectedValue || 0;
+        return Math.min(count, base + 1);
+      });
+      return;
+    }
+  };
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    id: id,
+    className: cn("inline-flex items-center gap-2", className),
+    "aria-live": "polite"
+  }, rest), {}, {
+    children: [jsx("div", {
+      role: "radiogroup",
+      "aria-label": name || "Rating",
+      className: "inline-flex gap-1",
+      onMouseLeave: handleMouseLeave,
+      children: Array.from({
+        length: count
+      }, function (_, i) {
+        var starNumber = i + 1;
+        var filled = starNumber <= (displayValue || 0);
+        var color = filled ? activeColor : inactiveColor;
+        // Token classes unless a colour override is passed, so brands and dark mode apply (STUDIO-59).
+        var colorClass = color ? "" : filled ? " text-warning-400" : " text-gray-200";
+        return jsx("button", {
+          type: "button",
+          role: "radio",
+          "aria-checked": filled,
+          "aria-label": "".concat(starNumber, " star").concat(starNumber > 1 ? "s" : ""),
+          tabIndex: readOnly ? -1 : 0,
+          onClick: function onClick() {
+            return commit(starNumber);
+          },
+          onKeyDown: function onKeyDown(e) {
+            return handleKeyDown(e, starNumber);
+          },
+          onMouseEnter: function onMouseEnter() {
+            return handleMouseEnter(starNumber);
+          },
+          onMouseMove: function onMouseMove() {
+            return handleMouseMove(starNumber);
+          },
+          onFocus: function onFocus() {
+            return handleFocus(starNumber);
+          },
+          onBlur: handleBlur,
+          disabled: readOnly,
+          title: "".concat(starNumber, " of ").concat(count),
+          className: "p-0 m-0 bg-transparent border-0 inline-flex items-center justify-center leading-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-slate-300 rounded".concat(colorClass),
+          style: color ? {
+            color: color
+          } : undefined,
+          children: filled ? ActiveIcon : InactiveIcon
+        }, i);
+      })
+    }), text ? jsx("div", {
+      "aria-hidden": true,
+      className: "ml-1 text-sm text-primary-700 select-none",
+      style: {
+        fontSize: Math.max(12, Math.round(size * 0.9))
+      },
+      children: text
+    }) : null]
+  }));
+});
+Rate.displayName = "Rate";
+
+export { Rate as default };

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

@@ -0,0 +1,118 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn.js';
+
+var _excluded = ["label", "avatarSrc", "avatarAlt", "initials", "size", "onRemove", "onClick", "className", "closeClass", "ariaLabel", "avatarPosition", "avatarClassname", "initialClassname"];
+var RoundedTag = /*#__PURE__*/forwardRef(function RoundedTag(_ref, ref) {
+  var label = _ref.label,
+    _ref$avatarSrc = _ref.avatarSrc,
+    avatarSrc = _ref$avatarSrc === void 0 ? null : _ref$avatarSrc,
+    _ref$avatarAlt = _ref.avatarAlt,
+    avatarAlt = _ref$avatarAlt === void 0 ? "avatar" : _ref$avatarAlt,
+    _ref$initials = _ref.initials,
+    initials = _ref$initials === void 0 ? "" : _ref$initials,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "md" : _ref$size,
+    _ref$onRemove = _ref.onRemove,
+    onRemove = _ref$onRemove === void 0 ? null : _ref$onRemove,
+    _ref$onClick = _ref.onClick,
+    _onClick = _ref$onClick === void 0 ? null : _ref$onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$closeClass = _ref.closeClass,
+    closeClass = _ref$closeClass === void 0 ? "" : _ref$closeClass,
+    _ref$ariaLabel = _ref.ariaLabel,
+    ariaLabel = _ref$ariaLabel === void 0 ? "tag" : _ref$ariaLabel,
+    _ref$avatarPosition = _ref.avatarPosition,
+    avatarPosition = _ref$avatarPosition === void 0 ? "left" : _ref$avatarPosition,
+    _ref$avatarClassname = _ref.avatarClassname,
+    avatarClassname = _ref$avatarClassname === void 0 ? "" : _ref$avatarClassname,
+    _ref$initialClassname = _ref.initialClassname,
+    initialClassname = _ref$initialClassname === void 0 ? "" : _ref$initialClassname,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var showAvatar = Boolean(avatarSrc || initials);
+  var sizes = {
+    sm: {
+      avatar: "w-5 h-5 text-xs",
+      paddingWithAvatar: "pr-2 pl-1.5 py-1",
+      paddingNoAvatar: "px-2 py-1",
+      text: "text-xs",
+      gapWithAvatar: "gap-1",
+      gapNoAvatar: "gap-1"
+    },
+    md: {
+      avatar: "w-6 h-6 text-sm",
+      paddingWithAvatar: "pr-2 pl-1.5 py-1",
+      paddingNoAvatar: "px-3 py-1",
+      text: "text-sm",
+      gapWithAvatar: "gap-2",
+      gapNoAvatar: "gap-1"
+    },
+    lg: {
+      avatar: "w-8 h-8 text-sm",
+      paddingWithAvatar: "pr-2 pl-1.5 py-1",
+      paddingNoAvatar: "px-4 py-1.5",
+      text: "text-base",
+      gapWithAvatar: "gap-2",
+      gapNoAvatar: "gap-2"
+    }
+  };
+  function handleRemove(e) {
+    e && e.stopPropagation();
+    onRemove && onRemove({});
+  }
+  var s = sizes[size] || sizes.md;
+  var paddingClass = showAvatar ? s.paddingWithAvatar : s.paddingNoAvatar;
+  var gapClass = showAvatar ? s.gapWithAvatar : s.gapNoAvatar;
+  var AvatarNode = showAvatar && jsx(Fragment, {
+    children: avatarSrc ? jsx("div", {
+      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 flex items-center justify-center ".concat(s.avatar, " ").concat(avatarClassname),
+      "aria-hidden": avatarSrc ? undefined : "true",
+      children: jsx("img", {
+        src: avatarSrc,
+        alt: avatarAlt,
+        className: "w-full h-full object-cover"
+      })
+    }) : jsx("div", {
+      className: "flex-shrink-0 rounded-full overflow-hidden bg-gray-300 flex items-center justify-center ".concat(s.avatar, " ").concat(initialClassname),
+      "aria-hidden": avatarSrc ? undefined : "true",
+      children: initials
+    })
+  });
+  return jsxs("div", _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: cn("inline-flex items-center rounded-full bg-gray-100 text-primary-800", paddingClass, gapClass, s.text, className),
+    role: "group",
+    "aria-label": ariaLabel,
+    onClick: function onClick(e) {
+      return _onClick && _onClick(e);
+    }
+  }, rest), {}, {
+    children: [avatarPosition === "left" && AvatarNode, jsx("div", {
+      className: "truncate max-w-[10rem]",
+      children: label
+    }), avatarPosition === "right" && AvatarNode, onRemove && jsx("button", {
+      type: "button",
+      "aria-label": "Remove",
+      onClick: handleRemove,
+      className: "inline-flex items-center justify-center rounded-full p-1 hover:bg-gray-200 focus:outline-none ".concat(closeClass),
+      children: jsx("svg", {
+        className: "w-3 h-3",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        children: jsx("path", {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          d: "M6 6l12 12M18 6L6 18"
+        })
+      })
+    })]
+  }));
+});
+RoundedTag.displayName = "RoundedTag";
+
+export { RoundedTag as default };