@ecohouse/ui 0.1.6 → 0.1.7

package/dist/index.cjs

@@ -114,6 +114,43 @@ var counterTypography = {
   lineHeight: 14,
   letterSpacing: 0
 };
+var ratingTypography = {
+  fontFamily: fonts.sans,
+  fontSize: 32,
+  fontWeight: "700",
+  lineHeight: 35.84,
+  letterSpacing: 0
+};
+var commentCardTypography = {
+  name: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "600",
+    lineHeight: 18,
+    letterSpacing: 0
+  },
+  date: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 16,
+    letterSpacing: 0
+  },
+  comment: {
+    fontFamily: fonts.sans,
+    fontSize: 14,
+    fontWeight: "400",
+    lineHeight: 19,
+    letterSpacing: 0
+  },
+  action: {
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "700",
+    lineHeight: 12,
+    letterSpacing: 0
+  }
+};
 var inputTypography = {
   label: {
     fontFamily: fonts.sans,
@@ -711,6 +748,47 @@ function SidebarIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
   ) });
 }
 
+// src/icons/Star/starPath.ts
+var STAR_PATH = "M12.6112 2.09824C12.9186 1.47565 13.0722 1.16436 13.2808 1.0649C13.4623 0.978367 13.6732 0.978367 13.8546 1.0649C14.0632 1.16436 14.2169 1.47565 14.5242 2.09824L17.4398 8.00486C17.5305 8.18866 17.5759 8.28056 17.6422 8.35192C17.7009 8.41509 17.7713 8.46628 17.8495 8.50264C17.9378 8.54371 18.0392 8.55854 18.242 8.58818L24.7637 9.54142C25.4505 9.6418 25.7938 9.69199 25.9528 9.85973C26.091 10.0057 26.156 10.2062 26.1297 10.4055C26.0995 10.6346 25.8509 10.8767 25.3537 11.361L20.6363 15.9557C20.4893 16.0989 20.4157 16.1706 20.3683 16.2558C20.3263 16.3312 20.2993 16.4141 20.2889 16.4998C20.2772 16.5966 20.2945 16.6978 20.3292 16.9001L21.4423 23.39C21.5597 24.0745 21.6184 24.4167 21.5081 24.6198C21.4121 24.7965 21.2415 24.9205 21.0438 24.9571C20.8165 24.9992 20.5092 24.8376 19.8945 24.5144L14.0642 21.4483C13.8826 21.3527 13.7917 21.305 13.696 21.2862C13.6113 21.2696 13.5242 21.2696 13.4394 21.2862C13.3437 21.305 13.2529 21.3527 13.0713 21.4483L7.24094 24.5144C6.62626 24.8376 6.31892 24.9992 6.09167 24.9571C5.89395 24.9205 5.72334 24.7965 5.62736 24.6198C5.51704 24.4167 5.57574 24.0745 5.69314 23.39L6.80622 16.9001C6.84092 16.6978 6.85828 16.5966 6.84653 16.4998C6.83614 16.4141 6.80919 16.3312 6.76718 16.2558C6.71974 16.1706 6.64621 16.0989 6.49916 15.9557L1.78179 11.361C1.28459 10.8767 1.03599 10.6346 1.00574 10.4055C0.979423 10.2062 1.04445 10.0057 1.18271 9.85973C1.34162 9.69199 1.685 9.6418 2.37177 9.54142L8.89346 8.58818C9.09627 8.55854 9.19768 8.54371 9.286 8.50264C9.36419 8.46628 9.43459 8.41509 9.49329 8.35192C9.55958 8.28056 9.60495 8.18866 9.69567 8.00486L12.6112 2.09824Z";
+function StarIcon({
+  active = false,
+  size = 28,
+  height,
+  color,
+  strokeWidth = 2
+}) {
+  const resolvedColor = color ?? (active ? "#E38E5E" : colors.grey150);
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: height ?? size * 26 / 28, viewBox: "0 0 28 26", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.Path,
+    {
+      d: STAR_PATH,
+      fill: active ? resolvedColor : "none",
+      stroke: resolvedColor,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function StarFilledIcon({
+  size = 28,
+  height,
+  color = "#E38E5E",
+  strokeWidth = 2
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Svg__default.default, { width: size, height: height ?? size * 26 / 28, viewBox: "0 0 28 26", fill: color, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Svg.Path,
+    {
+      d: STAR_PATH,
+      fill: color,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+
 // src/icons/User/userPath.ts
 var USER_PATH = "M15.8334 17.5C15.8334 14.2783 13.2217 11.6667 10 11.6667C6.77836 11.6667 4.16669 14.2783 4.16669 17.5M10 9.16667C8.15907 9.16667 6.66669 7.67428 6.66669 5.83333C6.66669 3.99238 8.15907 2.5 10 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10 9.16667Z";
 function UserIcon({ size = 20, color = colors.primary, strokeWidth = 2 }) {
@@ -783,6 +861,8 @@ var icons = {
   settings: SettingsIcon,
   show: ShowIcon,
   sidebar: SidebarIcon,
+  star: StarIcon,
+  starFilled: StarFilledIcon,
   user: UserIcon,
   usersAlt: UsersAltIcon,
   video: VideoIcon
@@ -801,6 +881,8 @@ var iconGroups = {
     "calendar",
     "calendarOutline",
     "heart",
+    "star",
+    "starFilled",
     "minus",
     "plus"
   ],
@@ -3492,6 +3574,272 @@ var styles13 = reactNative.StyleSheet.create({
     color: colors.white
   }
 });
+var STAR_COUNT = 5;
+var BASE_ITEM_SIZE = 16;
+var ICON_WIDTH_RATIO = 12.57 / BASE_ITEM_SIZE;
+var ICON_HEIGHT_RATIO = 11.98 / BASE_ITEM_SIZE;
+var STAR_GAP_RATIO = 2 / BASE_ITEM_SIZE;
+function clamp2(value) {
+  return Math.max(0, Math.min(value, STAR_COUNT));
+}
+var RatingInput = react.forwardRef(
+  function RatingInput2({
+    value,
+    defaultValue = 0,
+    onValueChange,
+    showValue = true,
+    precision = 1,
+    size = 20,
+    starGap,
+    readOnly = false,
+    disabled = false,
+    style,
+    valueStyle,
+    className,
+    hitSlop = 6,
+    accessibilityLabel,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = react.useRef(null);
+    const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = react.useState(() => clamp2(defaultValue));
+    const selectedValue = clamp2(isControlled ? value : uncontrolledValue);
+    const selectedStarCount = Math.round(selectedValue);
+    const iconWidth = size * ICON_WIDTH_RATIO;
+    const iconHeight = size * ICON_HEIGHT_RATIO;
+    const resolvedStarGap = starGap ?? size * STAR_GAP_RATIO;
+    const resolvedAccessibilityLabel = accessibilityLabel ?? (readOnly ? `${selectedValue} out of ${STAR_COUNT} stars` : "Rating");
+    useApplyWebClassName(containerRef, className);
+    const selectValue = (nextValue) => {
+      if (disabled || nextValue === selectedValue) return;
+      if (!isControlled) setUncontrolledValue(nextValue);
+      onValueChange?.(nextValue);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        ...rest,
+        ref: setContainerRef,
+        style: [styles14.root, disabled && styles14.disabled, style],
+        children: [
+          showValue ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles14.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.View,
+            {
+              accessibilityRole: readOnly ? "image" : "radiogroup",
+              accessibilityLabel: resolvedAccessibilityLabel,
+              accessibilityState: { disabled },
+              style: [styles14.stars, { gap: resolvedStarGap }],
+              children: Array.from({ length: STAR_COUNT }, (_, index) => {
+                const starValue = index + 1;
+                const isSelected = starValue <= selectedStarCount;
+                const icon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsxRuntime.jsx(StarIcon, { size: iconWidth, height: iconHeight });
+                const itemStyle = [styles14.starItem, { width: size, height: size }];
+                if (readOnly) {
+                  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: itemStyle, children: icon }, starValue);
+                }
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.Pressable,
+                  {
+                    disabled,
+                    hitSlop,
+                    onPress: () => selectValue(starValue),
+                    accessibilityRole: "radio",
+                    accessibilityLabel: `${starValue} star${starValue === 1 ? "" : "s"}`,
+                    accessibilityState: { checked: isSelected, disabled },
+                    style: itemStyle,
+                    children: icon
+                  },
+                  starValue
+                );
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var styles14 = reactNative.StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    flexWrap: "nowrap",
+    alignSelf: "flex-start",
+    gap: 16
+  },
+  stars: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  starItem: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  value: {
+    ...ratingTypography,
+    color: colors.white
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+var CARD_WIDTH = 370;
+var CARD_MIN_HEIGHT = 173;
+var AVATAR_SIZE = 44;
+var CommentCard = react.forwardRef(
+  function CommentCard2({
+    userName,
+    date,
+    commentText,
+    rating,
+    imageUrl,
+    maxCommentLines = 3,
+    maxCommentLength = 111,
+    readMoreLabel = "\u0534\u056B\u057F\u0565\u056C \u0561\u057E\u0565\u056C\u056B\u0576",
+    readLessLabel = "\u0553\u0561\u056F\u0565\u056C",
+    onExpandedChange,
+    style,
+    commentStyle,
+    className,
+    ...rest
+  }, forwardedRef) {
+    const containerRef = react.useRef(null);
+    const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const [imageFailed, setImageFailed] = react.useState(false);
+    const [expanded, setExpanded] = react.useState(false);
+    const [actionHovered, setActionHovered] = react.useState(false);
+    const hasImage = Boolean(imageUrl) && !imageFailed;
+    const shouldShowAction = Array.from(commentText).length >= maxCommentLength;
+    useApplyWebClassName(containerRef, className);
+    react.useEffect(() => {
+      setImageFailed(false);
+    }, [imageUrl]);
+    react.useEffect(() => {
+      setExpanded(false);
+      setActionHovered(false);
+    }, [commentText, maxCommentLength, maxCommentLines]);
+    const toggleExpanded = () => {
+      const next = !expanded;
+      setExpanded(next);
+      onExpandedChange?.(next);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { ...rest, ref: setContainerRef, style: [styles15.root, style], children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.header, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles15.avatar, children: hasImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Image,
+          {
+            source: { uri: imageUrl ?? void 0 },
+            style: styles15.avatarImage,
+            onError: () => setImageFailed(true)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { size: 20, color: colors.primary }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles15.identity, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles15.name, children: userName }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: styles15.date, children: date })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          numberOfLines: expanded ? void 0 : maxCommentLines,
+          style: [styles15.comment, commentStyle],
+          children: commentText
+        }
+      ),
+      shouldShowAction ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          onPress: toggleExpanded,
+          accessibilityRole: "button",
+          accessibilityState: { expanded },
+          hitSlop: 6,
+          onHoverIn: () => setActionHovered(true),
+          onHoverOut: () => setActionHovered(false),
+          style: styles15.action,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Text,
+            {
+              style: [
+                styles15.actionText,
+                expanded && styles15.closeActionText,
+                actionHovered && (expanded ? styles15.closeActionTextHovered : styles15.openActionTextHovered)
+              ],
+              children: expanded ? readLessLabel : readMoreLabel
+            }
+          )
+        }
+      ) : null
+    ] });
+  }
+);
+var styles15 = reactNative.StyleSheet.create({
+  root: {
+    width: CARD_WIDTH,
+    minHeight: CARD_MIN_HEIGHT,
+    padding: 16,
+    gap: 12,
+    borderRadius: 12,
+    backgroundColor: colors.grey750
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  avatar: {
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: AVATAR_SIZE / 2,
+    backgroundColor: colors.grey600
+  },
+  avatarImage: {
+    width: AVATAR_SIZE,
+    height: AVATAR_SIZE
+  },
+  identity: {
+    minWidth: 0,
+    flex: 1,
+    gap: 4
+  },
+  name: {
+    ...commentCardTypography.name,
+    color: colors.white
+  },
+  date: {
+    ...commentCardTypography.date,
+    color: colors.grey0
+  },
+  comment: {
+    ...commentCardTypography.comment,
+    color: colors.white
+  },
+  action: {
+    alignSelf: "flex-start",
+    marginTop: "auto",
+    minHeight: 16,
+    justifyContent: "center"
+  },
+  actionText: {
+    ...commentCardTypography.action,
+    color: colors.white
+  },
+  closeActionText: {
+    color: colors.primary
+  },
+  openActionTextHovered: {
+    color: colors.primary
+  },
+  closeActionTextHovered: {
+    color: colors.white
+  }
+});
 
 exports.ArrowRightIcon = ArrowRightIcon;
 exports.Avatar = Avatar;
@@ -3509,6 +3857,7 @@ exports.Checkbox = Checkbox;
 exports.ChevronDownIcon = ChevronDownIcon;
 exports.ChevronLeftIcon = ChevronLeftIcon;
 exports.ClockIcon = ClockIcon;
+exports.CommentCard = CommentCard;
 exports.Counter = Counter;
 exports.DatePicker = DatePicker;
 exports.FacebookIcon = FacebookIcon;
@@ -3528,12 +3877,15 @@ exports.MinusIcon = MinusIcon;
 exports.NavigateIcon = NavigateIcon;
 exports.PhoneIcon = PhoneIcon;
 exports.PlusIcon = PlusIcon;
+exports.RatingInput = RatingInput;
 exports.SearchIcon = SearchIcon;
 exports.SegmentedToggle = SegmentedToggle;
 exports.Select = Select;
 exports.SettingsIcon = SettingsIcon;
 exports.ShowIcon = ShowIcon;
 exports.SidebarIcon = SidebarIcon;
+exports.StarFilledIcon = StarFilledIcon;
+exports.StarIcon = StarIcon;
 exports.StatCard = StatCard;
 exports.Textarea = Textarea;
 exports.Toggle = Toggle;
@@ -3544,6 +3896,7 @@ exports.avatarTypography = avatarTypography;
 exports.badgeTypography = badgeTypography;
 exports.buttonTypography = buttonTypography;
 exports.colors = colors;
+exports.commentCardTypography = commentCardTypography;
 exports.counterTypography = counterTypography;
 exports.datePickerTypography = datePickerTypography;
 exports.fonts = fonts;
@@ -3554,6 +3907,7 @@ exports.iconGroups = iconGroups;
 exports.iconNames = iconNames;
 exports.icons = icons;
 exports.inputTypography = inputTypography;
+exports.ratingTypography = ratingTypography;
 exports.segmentedToggleTypography = segmentedToggleTypography;
 exports.selectTypography = selectTypography;
 exports.statCardTypography = statCardTypography;