@ecohouse/ui 0.1.6 → 0.1.7

package/dist/index.d.cts

@@ -163,6 +163,19 @@ declare function ShowIcon({ size, color, strokeWidth }: ShowIconProps): react.JS
 /** Native — react-native-svg (peer dependency). */
 declare function SidebarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+interface StarIconProps extends IconProps {
+    active?: boolean;
+    height?: number;
+}
+/** Native — active is solid orange; inactive is a grey outline. */
+declare function StarIcon({ active, size, height, color, strokeWidth, }: StarIconProps): react.JSX.Element;
+
+interface StarFilledIconProps extends IconProps {
+    height?: number;
+}
+/** Native — supplied solid orange 28×26 star icon. */
+declare function StarFilledIcon({ size, height, color, strokeWidth, }: StarFilledIconProps): react.JSX.Element;
+
 interface UserIconProps {
     size?: number;
     color?: string;
@@ -207,6 +220,8 @@ declare const icons: {
     readonly settings: typeof SettingsIcon;
     readonly show: typeof ShowIcon;
     readonly sidebar: typeof SidebarIcon;
+    readonly star: typeof StarIcon;
+    readonly starFilled: typeof StarFilledIcon;
     readonly user: typeof UserIcon;
     readonly usersAlt: typeof UsersAltIcon;
     readonly video: typeof VideoIcon;
@@ -215,7 +230,7 @@ type IconName = keyof typeof icons;
 declare const iconNames: IconName[];
 declare const iconGroups: {
     readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"];
-    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart", "minus", "plus"];
+    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart", "star", "starFilled", "minus", "plus"];
     readonly objects: readonly ["bag", "building", "clock", "user", "usersAlt", "video"];
     readonly communication: readonly ["mail", "phone"];
     readonly social: readonly ["facebook", "instagram", "linkedin"];
@@ -467,6 +482,43 @@ interface ToggleProps extends Omit<PressableProps, "onPress" | "disabled" | "sty
 }
 declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<react_native.View>>;
 
+interface RatingInputProps extends Omit<ViewProps, "style" | "children"> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    showValue?: boolean;
+    precision?: number;
+    /** Star item size. Glyph dimensions and default spacing scale with it. */
+    size?: number;
+    /** Overrides the proportional spacing between star items. */
+    starGap?: number;
+    readOnly?: boolean;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    valueStyle?: StyleProp<TextStyle>;
+    className?: string;
+    hitSlop?: PressableProps["hitSlop"];
+    accessibilityLabel?: string;
+}
+declare const RatingInput: react.ForwardRefExoticComponent<RatingInputProps & react.RefAttributes<View>>;
+
+interface CommentCardProps extends Omit<ViewProps, "style" | "children"> {
+    userName: string;
+    date: string;
+    commentText: string;
+    rating: number;
+    imageUrl?: string | null;
+    maxCommentLines?: number;
+    maxCommentLength?: number;
+    readMoreLabel?: string;
+    readLessLabel?: string;
+    onExpandedChange?: (expanded: boolean) => void;
+    style?: StyleProp<ViewStyle>;
+    commentStyle?: StyleProp<TextStyle>;
+    className?: string;
+}
+declare const CommentCard: react.ForwardRefExoticComponent<CommentCardProps & react.RefAttributes<View>>;
+
 declare const grey: {
     readonly "0": "#767676";
     readonly "0.5": "#6E6E6E";
@@ -571,6 +623,45 @@ declare const counterTypography: {
     readonly lineHeight: 14;
     readonly letterSpacing: 0;
 };
+/** Rating score — Bold 32, line-height 112%, letter-spacing 0. */
+declare const ratingTypography: {
+    readonly fontFamily: "Noto Sans Armenian";
+    readonly fontSize: 32;
+    readonly fontWeight: "700";
+    readonly lineHeight: 35.84;
+    readonly letterSpacing: 0;
+};
+/** Comment card identity, body, and action typography. */
+declare const commentCardTypography: {
+    readonly name: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 16;
+        readonly fontWeight: "600";
+        readonly lineHeight: 18;
+        readonly letterSpacing: 0;
+    };
+    readonly date: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0;
+    };
+    readonly comment: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 19;
+        readonly letterSpacing: 0;
+    };
+    readonly action: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "700";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0;
+    };
+};
 /** Input label / field / hint typography. */
 declare const inputTypography: {
     readonly label: {
@@ -707,4 +798,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.d.ts

@@ -163,6 +163,19 @@ declare function ShowIcon({ size, color, strokeWidth }: ShowIconProps): react.JS
 /** Native — react-native-svg (peer dependency). */
 declare function SidebarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
 
+interface StarIconProps extends IconProps {
+    active?: boolean;
+    height?: number;
+}
+/** Native — active is solid orange; inactive is a grey outline. */
+declare function StarIcon({ active, size, height, color, strokeWidth, }: StarIconProps): react.JSX.Element;
+
+interface StarFilledIconProps extends IconProps {
+    height?: number;
+}
+/** Native — supplied solid orange 28×26 star icon. */
+declare function StarFilledIcon({ size, height, color, strokeWidth, }: StarFilledIconProps): react.JSX.Element;
+
 interface UserIconProps {
     size?: number;
     color?: string;
@@ -207,6 +220,8 @@ declare const icons: {
     readonly settings: typeof SettingsIcon;
     readonly show: typeof ShowIcon;
     readonly sidebar: typeof SidebarIcon;
+    readonly star: typeof StarIcon;
+    readonly starFilled: typeof StarFilledIcon;
     readonly user: typeof UserIcon;
     readonly usersAlt: typeof UsersAltIcon;
     readonly video: typeof VideoIcon;
@@ -215,7 +230,7 @@ type IconName = keyof typeof icons;
 declare const iconNames: IconName[];
 declare const iconGroups: {
     readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"];
-    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart", "minus", "plus"];
+    readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart", "star", "starFilled", "minus", "plus"];
     readonly objects: readonly ["bag", "building", "clock", "user", "usersAlt", "video"];
     readonly communication: readonly ["mail", "phone"];
     readonly social: readonly ["facebook", "instagram", "linkedin"];
@@ -467,6 +482,43 @@ interface ToggleProps extends Omit<PressableProps, "onPress" | "disabled" | "sty
 }
 declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<react_native.View>>;
 
+interface RatingInputProps extends Omit<ViewProps, "style" | "children"> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    showValue?: boolean;
+    precision?: number;
+    /** Star item size. Glyph dimensions and default spacing scale with it. */
+    size?: number;
+    /** Overrides the proportional spacing between star items. */
+    starGap?: number;
+    readOnly?: boolean;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    valueStyle?: StyleProp<TextStyle>;
+    className?: string;
+    hitSlop?: PressableProps["hitSlop"];
+    accessibilityLabel?: string;
+}
+declare const RatingInput: react.ForwardRefExoticComponent<RatingInputProps & react.RefAttributes<View>>;
+
+interface CommentCardProps extends Omit<ViewProps, "style" | "children"> {
+    userName: string;
+    date: string;
+    commentText: string;
+    rating: number;
+    imageUrl?: string | null;
+    maxCommentLines?: number;
+    maxCommentLength?: number;
+    readMoreLabel?: string;
+    readLessLabel?: string;
+    onExpandedChange?: (expanded: boolean) => void;
+    style?: StyleProp<ViewStyle>;
+    commentStyle?: StyleProp<TextStyle>;
+    className?: string;
+}
+declare const CommentCard: react.ForwardRefExoticComponent<CommentCardProps & react.RefAttributes<View>>;
+
 declare const grey: {
     readonly "0": "#767676";
     readonly "0.5": "#6E6E6E";
@@ -571,6 +623,45 @@ declare const counterTypography: {
     readonly lineHeight: 14;
     readonly letterSpacing: 0;
 };
+/** Rating score — Bold 32, line-height 112%, letter-spacing 0. */
+declare const ratingTypography: {
+    readonly fontFamily: "Noto Sans Armenian";
+    readonly fontSize: 32;
+    readonly fontWeight: "700";
+    readonly lineHeight: 35.84;
+    readonly letterSpacing: 0;
+};
+/** Comment card identity, body, and action typography. */
+declare const commentCardTypography: {
+    readonly name: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 16;
+        readonly fontWeight: "600";
+        readonly lineHeight: 18;
+        readonly letterSpacing: 0;
+    };
+    readonly date: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 16;
+        readonly letterSpacing: 0;
+    };
+    readonly comment: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 19;
+        readonly letterSpacing: 0;
+    };
+    readonly action: {
+        readonly fontFamily: "Noto Sans Armenian";
+        readonly fontSize: 12;
+        readonly fontWeight: "700";
+        readonly lineHeight: 12;
+        readonly letterSpacing: 0;
+    };
+};
 /** Input label / field / hint typography. */
 declare const inputTypography: {
     readonly label: {
@@ -707,4 +798,4 @@ declare const textareaTypography: {
     };
 };
 
-export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, type CommentCardProps, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, type RatingInputProps, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, type StarIconProps, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };

package/dist/index.js

@@ -108,6 +108,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,
@@ -705,6 +742,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__ */ jsx(Svg, { width: size, height: height ?? size * 26 / 28, viewBox: "0 0 28 26", fill: "none", children: /* @__PURE__ */ jsx(
+    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__ */ jsx(Svg, { width: size, height: height ?? size * 26 / 28, viewBox: "0 0 28 26", fill: color, children: /* @__PURE__ */ jsx(
+    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 }) {
@@ -777,6 +855,8 @@ var icons = {
   settings: SettingsIcon,
   show: ShowIcon,
   sidebar: SidebarIcon,
+  star: StarIcon,
+  starFilled: StarFilledIcon,
   user: UserIcon,
   usersAlt: UsersAltIcon,
   video: VideoIcon
@@ -795,6 +875,8 @@ var iconGroups = {
     "calendar",
     "calendarOutline",
     "heart",
+    "star",
+    "starFilled",
     "minus",
     "plus"
   ],
@@ -3486,7 +3568,273 @@ var styles13 = 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 = 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 = useRef(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = 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__ */ jsxs(
+      View,
+      {
+        ...rest,
+        ref: setContainerRef,
+        style: [styles14.root, disabled && styles14.disabled, style],
+        children: [
+          showValue ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles14.value, valueStyle], children: selectedValue.toFixed(precision) }) : null,
+          /* @__PURE__ */ jsx(
+            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__ */ jsx(StarFilledIcon, { size: iconWidth, height: iconHeight }) : /* @__PURE__ */ jsx(StarIcon, { size: iconWidth, height: iconHeight });
+                const itemStyle = [styles14.starItem, { width: size, height: size }];
+                if (readOnly) {
+                  return /* @__PURE__ */ jsx(View, { style: itemStyle, children: icon }, starValue);
+                }
+                return /* @__PURE__ */ jsx(
+                  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 = 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 = 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 = useRef(null);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+    const [imageFailed, setImageFailed] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const [actionHovered, setActionHovered] = useState(false);
+    const hasImage = Boolean(imageUrl) && !imageFailed;
+    const shouldShowAction = Array.from(commentText).length >= maxCommentLength;
+    useApplyWebClassName(containerRef, className);
+    useEffect(() => {
+      setImageFailed(false);
+    }, [imageUrl]);
+    useEffect(() => {
+      setExpanded(false);
+      setActionHovered(false);
+    }, [commentText, maxCommentLength, maxCommentLines]);
+    const toggleExpanded = () => {
+      const next = !expanded;
+      setExpanded(next);
+      onExpandedChange?.(next);
+    };
+    return /* @__PURE__ */ jsxs(View, { ...rest, ref: setContainerRef, style: [styles15.root, style], children: [
+      /* @__PURE__ */ jsxs(View, { style: styles15.header, children: [
+        /* @__PURE__ */ jsx(View, { style: styles15.avatar, children: hasImage ? /* @__PURE__ */ jsx(
+          Image,
+          {
+            source: { uri: imageUrl ?? void 0 },
+            style: styles15.avatarImage,
+            onError: () => setImageFailed(true)
+          }
+        ) : /* @__PURE__ */ jsx(UserIcon, { size: 20, color: colors.primary }) }),
+        /* @__PURE__ */ jsxs(View, { style: styles15.identity, children: [
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles15.name, children: userName }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles15.date, children: date })
+        ] }),
+        /* @__PURE__ */ jsx(RatingInput, { value: rating, readOnly: true, showValue: false, size: 16 })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          numberOfLines: expanded ? void 0 : maxCommentLines,
+          style: [styles15.comment, commentStyle],
+          children: commentText
+        }
+      ),
+      shouldShowAction ? /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          onPress: toggleExpanded,
+          accessibilityRole: "button",
+          accessibilityState: { expanded },
+          hitSlop: 6,
+          onHoverIn: () => setActionHovered(true),
+          onHoverOut: () => setActionHovered(false),
+          style: styles15.action,
+          children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [
+                styles15.actionText,
+                expanded && styles15.closeActionText,
+                actionHovered && (expanded ? styles15.closeActionTextHovered : styles15.openActionTextHovered)
+              ],
+              children: expanded ? readLessLabel : readMoreLabel
+            }
+          )
+        }
+      ) : null
+    ] });
+  }
+);
+var styles15 = 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
+  }
+});
 
-export { ArrowRightIcon, Avatar, Badge, BagIcon, BellIcon, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, Counter, DatePicker, FacebookIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShowIcon, SidebarIcon, StatCard, Textarea, Toggle, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
+export { ArrowRightIcon, Avatar, Badge, BagIcon, BellIcon, BuildingIcon, Button, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ClockIcon, CommentCard, Counter, DatePicker, FacebookIcon, HeartIcon, HelpCircleIcon, HomeIcon, Icon, Input, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, RatingInput, SearchIcon, SegmentedToggle, Select, SettingsIcon, ShowIcon, SidebarIcon, StarFilledIcon, StarIcon, StatCard, Textarea, Toggle, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, commentCardTypography, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, ratingTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map