@ecohouse/ui 0.1.42 → 0.1.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { StyleSheet, Text, View } from "react-native";
+import { colors } from "../../theme";
+import { RadioButton } from "./RadioButton";
+
+const meta = {
+  title: "Components/RadioButton",
+  component: RadioButton,
+  args: {
+    defaultValue: false,
+    disabled: false,
+    variant: "default",
+    onValueChange: fn(),
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof RadioButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Active: Story = {
+  args: { defaultValue: true },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const WithLabel: Story = {
+  args: { defaultValue: true, label: "Option" },
+};
+
+function ControlledGroup() {
+  const [value, setValue] = useState("first");
+
+  return (
+    <View style={styles.group} accessibilityRole="radiogroup">
+      {["first", "second", "third"].map((option) => (
+        <RadioButton key={option} value={value === option} onValueChange={() => setValue(option)}>
+          <Text style={styles.label}>{option}</Text>
+        </RadioButton>
+      ))}
+    </View>
+  );
+}
+
+export const Group: Story = {
+  render: () => <ControlledGroup />,
+};
+
+const styles = StyleSheet.create({
+  group: {
+    gap: 12,
+  },
+  label: {
+    color: colors.white,
+  },
+});

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,135 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef, type ReactNode } from "react";
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export type RadioButtonVariant = "default";
+
+export interface RadioButtonProps extends Omit<
+  PressableProps,
+  "onPress" | "disabled" | "style" | "children" | "hitSlop"
+> {
+  value?: boolean;
+  defaultValue?: boolean;
+  onValueChange?: (value: true) => void;
+  disabled?: boolean;
+  variant?: RadioButtonVariant;
+  label?: string;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const CONTROL_SIZE = 16;
+const DOT_SIZE = 8;
+
+export const RadioButton = forwardRef<ComponentRef<typeof Pressable>, RadioButtonProps>(
+  function RadioButton(
+    {
+      value,
+      defaultValue = false,
+      onValueChange,
+      disabled = false,
+      variant: _variant = "default",
+      label,
+      children,
+      style,
+      labelStyle,
+      className,
+      hitSlop = 8,
+      accessibilityLabel,
+      ...rest
+    },
+    forwardedRef,
+  ) {
+    const containerRef = useRef<ComponentRef<typeof Pressable>>(null);
+    const isControlled = typeof value === "boolean";
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isActive = isControlled ? value : uncontrolledValue;
+    const labelContent = children ?? label;
+    const resolvedAccessibilityLabel =
+      accessibilityLabel ?? (typeof labelContent === "string" ? labelContent : undefined);
+    const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+
+    useApplyWebClassName(containerRef, className);
+
+    const handlePress = () => {
+      if (disabled || isActive) return;
+      if (!isControlled) setUncontrolledValue(true);
+      onValueChange?.(true);
+    };
+
+    return (
+      <Pressable
+        {...rest}
+        ref={setContainerRef}
+        onPress={handlePress}
+        disabled={disabled}
+        hitSlop={hitSlop}
+        accessibilityRole="radio"
+        accessibilityLabel={resolvedAccessibilityLabel}
+        accessibilityState={{ selected: isActive, disabled }}
+        style={[styles.root, disabled && styles.disabled, style]}
+      >
+        <View style={styles.control}>{isActive ? <View style={styles.dot} /> : null}</View>
+
+        {labelContent != null && labelContent !== false ? (
+          typeof labelContent === "string" || typeof labelContent === "number" ? (
+            <Text style={[styles.label, labelStyle]}>{labelContent}</Text>
+          ) : (
+            labelContent
+          )
+        ) : null}
+      </Pressable>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 6,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  control: {
+    width: CONTROL_SIZE,
+    height: CONTROL_SIZE,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: colors.grey700,
+    backgroundColor: colors.dark,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  dot: {
+    width: DOT_SIZE,
+    height: DOT_SIZE,
+    borderRadius: 43,
+    backgroundColor: colors.primary,
+  },
+  label: {
+    flexShrink: 1,
+    textAlign: "center",
+    fontFamily: fonts.sans,
+    fontSize: 12,
+    fontWeight: "400",
+    color: colors.white,
+  },
+});

package/src/components/RadioButton/index.ts

@@ -0,0 +1,2 @@
+export { RadioButton } from "./RadioButton";
+export type { RadioButtonProps, RadioButtonVariant } from "./RadioButton";

package/src/components/index.ts

@@ -118,3 +118,6 @@ export type { CommentCardProps } from "./CommentCard";
 
 export { Range } from "./Range";
 export type { RangeProps, RangeValue } from "./Range";
+
+export { RadioButton } from "./RadioButton";
+export type { RadioButtonProps, RadioButtonVariant } from "./RadioButton";

package/src/icons/MoonStars/MoonStarsIcon.tsx

@@ -0,0 +1,27 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MOON_STARS_MOON_PATH, MOON_STARS_SPARKLE_PATH } from "./moonStarsPaths";
+
+export function MoonStarsIcon({ size = 15, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 15 15" fill="none">
+      <Path
+        d={MOON_STARS_SPARKLE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d={MOON_STARS_MOON_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+
+export { MOON_STARS_MOON_PATH, MOON_STARS_PATHS, MOON_STARS_SPARKLE_PATH } from "./moonStarsPaths";

package/src/icons/MoonStars/MoonStarsIcon.web.tsx

@@ -0,0 +1,33 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { MOON_STARS_MOON_PATH, MOON_STARS_SPARKLE_PATH } from "./moonStarsPaths";
+
+export function MoonStarsIcon({ size = 15, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={MOON_STARS_SPARKLE_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d={MOON_STARS_MOON_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { MOON_STARS_MOON_PATH, MOON_STARS_PATHS, MOON_STARS_SPARKLE_PATH } from "./moonStarsPaths";

package/src/icons/MoonStars/index.ts

@@ -0,0 +1,6 @@
+export {
+  MoonStarsIcon,
+  MOON_STARS_MOON_PATH,
+  MOON_STARS_PATHS,
+  MOON_STARS_SPARKLE_PATH,
+} from "./MoonStarsIcon";

package/src/icons/MoonStars/moonStarsPaths.ts

@@ -0,0 +1,7 @@
+export const MOON_STARS_SPARKLE_PATH =
+  "M11.4167 0.75L11.8285 1.57372C12.0055 1.92771 12.094 2.1047 12.2122 2.25808C12.3171 2.39417 12.4392 2.51618 12.5753 2.62109C12.7286 2.73932 12.9056 2.82781 13.2596 3.00481L14.0833 3.41667L13.2596 3.82853C12.9056 4.00552 12.7286 4.09402 12.5753 4.21224C12.4392 4.31715 12.3171 4.43916 12.2122 4.57526C12.094 4.72863 12.0055 4.90563 11.8285 5.25961L11.4167 6.08333L11.0048 5.25961C10.8278 4.90563 10.7393 4.72863 10.6211 4.57526C10.5162 4.43916 10.3942 4.31715 10.2581 4.21224C10.1047 4.09402 9.92771 4.00552 9.57372 3.82853L8.75 3.41667L9.57372 3.00481C9.92771 2.82781 10.1047 2.73932 10.2581 2.62109C10.3942 2.51618 10.5162 2.39417 10.6211 2.25808C10.7393 2.1047 10.8278 1.92771 11.0048 1.57372L11.4167 0.75Z";
+
+export const MOON_STARS_MOON_PATH =
+  "M13.4167 8.34286C12.5427 9.876 10.893 10.9097 9.00196 10.9097C6.19739 10.9097 3.92383 8.63612 3.92383 5.83155C3.92383 3.94036 4.95766 2.29063 6.491 1.41667C3.26986 1.72208 0.75 4.43461 0.75 7.73569C0.75 11.2414 3.59195 14.0833 7.09766 14.0833C10.3986 14.0833 13.111 11.5637 13.4167 8.34286Z";
+
+export const MOON_STARS_PATHS = [MOON_STARS_SPARKLE_PATH, MOON_STARS_MOON_PATH] as const;

package/src/icons/index.ts

@@ -80,6 +80,7 @@ export { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 export { MenuIcon } from "./Menu";
 export type { MenuIconProps } from "./Menu";
 export { MenuLinesIcon } from "./MenuLines";
+export { MoonStarsIcon } from "./MoonStars";
 export { MoreHorizontalIcon } from "./MoreHorizontal";
 export { NavigateIcon } from "./Navigate";
 export { PhoneIcon } from "./Phone";

package/src/icons/registry.ts

@@ -68,6 +68,7 @@ import { MapCollapseIcon, MapExpandIcon } from "./MapControls";
 import { MenuIcon } from "./Menu";
 import { MenuLinesIcon } from "./MenuLines";
 import { MinusIcon } from "./Minus";
+import { MoonStarsIcon } from "./MoonStars";
 import { MoreHorizontalIcon } from "./MoreHorizontal";
 import { NavigateIcon } from "./Navigate";
 import { PhoneIcon } from "./Phone";
@@ -145,6 +146,7 @@ export const icons = {
   menu: MenuIcon,
   menuLines: MenuLinesIcon,
   minus: MinusIcon,
+  moonStars: MoonStarsIcon,
   moreHorizontal: MoreHorizontalIcon,
   navigate: NavigateIcon,
   noSmoking: NoSmokingIcon,
@@ -235,6 +237,7 @@ export const iconGroups = {
     "star",
     "starFilled",
     "minus",
+    "moonStars",
     "moreHorizontal",
     "plus",
     "refresh",

package/src/index.ts

@@ -34,6 +34,7 @@ export {
   RatingInput,
   CommentCard,
   Range,
+  RadioButton,
 } from "./components";
 export type {
   AvatarProps,
@@ -94,6 +95,8 @@ export type {
   CommentCardProps,
   RangeProps,
   RangeValue,
+  RadioButtonProps,
+  RadioButtonVariant,
 } from "./components";
 
 export {
@@ -194,6 +197,7 @@ export {
   MenuIcon,
   MenuLinesIcon,
   MinusIcon,
+  MoonStarsIcon,
   NavigateIcon,
   PhoneIcon,
   PlusIcon,