@ecohouse/ui 0.1.2 → 0.1.4

package/src/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from "./Select";
+export type { SelectProps, SelectOption, SelectSingleProps, SelectMultipleProps } from "./Select";

package/src/components/Textarea/Textarea.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { View, StyleSheet } from "react-native";
+import { Textarea } from "./Textarea";
+
+const meta = {
+  title: "Components/Textarea",
+  component: Textarea,
+  args: {
+    label: "Label",
+    showLabel: true,
+    hint: "Hint",
+    showHint: true,
+    placeholder: "placeholder",
+    disabled: false,
+    error: false,
+    onChangeText: fn(),
+  },
+  argTypes: {
+    disabled: { control: "boolean" },
+    error: { control: "boolean" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Filled: Story = {
+  args: { value: "Filled value" },
+};
+
+export const Error: Story = {
+  args: { error: true, hint: "Hint" },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, value: "Disabled value" },
+};
+
+export const WithoutLabelAndHint: Story = {
+  args: { showLabel: false, showHint: false },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <Textarea label="Label" hint="Hint" placeholder="placeholder" />
+      <Textarea label="Label" hint="Hint" placeholder="placeholder" value="Filled value" />
+      <Textarea label="Label" hint="Hint" placeholder="placeholder" error />
+      <Textarea
+        label="Label"
+        hint="Hint"
+        placeholder="placeholder"
+        disabled
+        value="Disabled value"
+      />
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  column: {
+    gap: 24,
+    alignItems: "flex-start",
+  },
+});

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,241 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Platform,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+  type TextInputProps,
+} from "react-native";
+import { colors, textareaTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface TextareaProps extends Omit<TextInputProps, "style" | "editable" | "multiline"> {
+  label?: string;
+  showLabel?: boolean;
+  hint?: string;
+  showHint?: boolean;
+  /** External — validation / form error. */
+  error?: boolean;
+  /** External — non-interactive. */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  fieldStyle?: StyleProp<ViewStyle>;
+  inputStyle?: StyleProp<TextStyle>;
+  className?: string;
+  inputClassName?: string;
+}
+
+type VisualState = "default" | "filled" | "active" | "error" | "disabled";
+
+type FieldChrome = {
+  borderColor: string;
+  backgroundColor: string;
+  textColor: string;
+  placeholderColor: string;
+  labelColor: string;
+  hintColor: string;
+};
+
+const DEFAULT_WIDTH = 308;
+const FIELD_HEIGHT = 100;
+const FIELD_RADIUS = 16;
+const FIELD_PADDING_VERTICAL = 12;
+const FIELD_PADDING_HORIZONTAL = 16;
+
+/** default / filled / active come from value + focus; error / disabled from props. */
+function resolveVisualState({
+  disabled,
+  error,
+  focused,
+  hasValue,
+}: {
+  disabled: boolean;
+  error: boolean;
+  focused: boolean;
+  hasValue: boolean;
+}): VisualState {
+  if (disabled) return "disabled";
+  if (error) return "error";
+  if (focused) return "active";
+  if (hasValue) return "filled";
+  return "default";
+}
+
+function chromeFor(state: VisualState): FieldChrome {
+  const base: FieldChrome = {
+    borderColor: colors.grey700,
+    backgroundColor: colors.grey700,
+    textColor: colors.white,
+    placeholderColor: colors.grey100,
+    labelColor: colors.white,
+    hintColor: colors.grey100,
+  };
+
+  switch (state) {
+    case "active":
+      return {
+        ...base,
+        borderColor: colors.primaryMuted,
+      };
+    case "error":
+      return {
+        ...base,
+        borderColor: colors.redMuted,
+        textColor: colors.red,
+        placeholderColor: colors.red,
+        labelColor: colors.red,
+        hintColor: colors.red,
+      };
+    case "filled":
+      return base;
+    case "disabled":
+      return {
+        ...base,
+        textColor: colors.grey0,
+      };
+    default:
+      return base;
+  }
+}
+
+export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps>(function Textarea(
+  {
+    label = "Label",
+    showLabel = true,
+    hint = "Hint",
+    showHint = true,
+    placeholder = "placeholder",
+    disabled = false,
+    error = false,
+    value,
+    defaultValue,
+    onChangeText,
+    onFocus,
+    onBlur,
+    style,
+    fieldStyle,
+    inputStyle,
+    className,
+    inputClassName,
+    accessibilityLabel,
+    ...textInputProps
+  },
+  forwardedRef,
+) {
+  const rootRef = useRef<ComponentRef<typeof View>>(null);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  const setInputRef = useMemo(() => mergeRefs(inputRef, forwardedRef), [forwardedRef]);
+  const [focused, setFocused] = useState(false);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+
+  const isControlled = typeof value === "string";
+  const currentValue = isControlled ? value : uncontrolledValue;
+  const hasValue = currentValue.length > 0;
+
+  const visualState = resolveVisualState({ disabled, error, focused, hasValue });
+  const chrome = chromeFor(visualState);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (showLabel ? undefined : label);
+
+  useApplyWebClassName(rootRef, className);
+  useApplyWebClassName(inputRef, inputClassName);
+
+  return (
+    <View ref={rootRef} style={[styles.root, disabled && styles.disabled, style]}>
+      {showLabel && label ? (
+        <Text style={[styles.label, { color: chrome.labelColor }]}>{label}</Text>
+      ) : null}
+
+      <View
+        style={[
+          styles.field,
+          {
+            borderColor: chrome.borderColor,
+            backgroundColor: chrome.backgroundColor,
+          },
+          fieldStyle,
+        ]}
+      >
+        <TextInput
+          ref={setInputRef}
+          {...textInputProps}
+          multiline
+          textAlignVertical="top"
+          value={isControlled ? value : undefined}
+          defaultValue={isControlled ? undefined : defaultValue}
+          editable={!disabled}
+          placeholder={placeholder}
+          placeholderTextColor={chrome.placeholderColor}
+          onChangeText={(text) => {
+            if (!isControlled) setUncontrolledValue(text);
+            onChangeText?.(text);
+          }}
+          onFocus={(event) => {
+            setFocused(true);
+            onFocus?.(event);
+          }}
+          onBlur={(event) => {
+            setFocused(false);
+            onBlur?.(event);
+          }}
+          style={[
+            styles.input,
+            textareaTypography.field,
+            { color: chrome.textColor },
+            Platform.OS === "web" ? styles.inputWeb : null,
+            Platform.OS === "android" ? styles.inputAndroid : null,
+            inputStyle,
+          ]}
+          accessibilityLabel={resolvedAccessibilityLabel}
+          accessibilityState={{ disabled }}
+        />
+      </View>
+
+      {showHint && hint ? (
+        <Text style={[styles.hint, { color: chrome.hintColor }]}>{hint}</Text>
+      ) : null}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  root: {
+    width: DEFAULT_WIDTH,
+    gap: 8,
+    alignSelf: "flex-start",
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  label: {
+    ...textareaTypography.label,
+  },
+  field: {
+    height: FIELD_HEIGHT,
+    borderRadius: FIELD_RADIUS,
+    borderWidth: 1,
+    paddingTop: FIELD_PADDING_VERTICAL,
+    paddingBottom: FIELD_PADDING_VERTICAL,
+    paddingLeft: FIELD_PADDING_HORIZONTAL,
+    paddingRight: FIELD_PADDING_HORIZONTAL,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: 0,
+    margin: 0,
+  },
+  inputWeb: {
+    outlineStyle: "none",
+    resize: "none",
+  } as TextStyle,
+  inputAndroid: {
+    includeFontPadding: false,
+  },
+  hint: {
+    ...textareaTypography.hint,
+  },
+});

package/src/components/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea";

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,100 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { View, StyleSheet, Text } from "react-native";
+import { Toggle } from "./Toggle";
+import { colors } from "../../theme";
+
+const meta = {
+  title: "Components/Toggle",
+  component: Toggle,
+  args: {
+    defaultValue: false,
+    disabled: false,
+    onValueChange: fn(),
+  },
+  argTypes: {
+    value: { control: "boolean" },
+    defaultValue: { control: "boolean" },
+    disabled: { control: "boolean" },
+    onValueChange: { action: "valueChange" },
+  },
+  parameters: {
+    backgrounds: { default: "black" },
+  },
+} satisfies Meta<typeof Toggle>;
+
+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 DisabledActive: Story = {
+  args: { defaultValue: true, disabled: true },
+};
+
+export const WithLabel: Story = {
+  args: { label: "Enable notifications" },
+};
+
+function ControlledToggle() {
+  const [value, setValue] = useState(false);
+
+  return (
+    <View style={storyStyles.row}>
+      <Toggle value={value} onValueChange={setValue} />
+      <Text style={storyStyles.label}>{value ? "On" : "Off"}</Text>
+    </View>
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledToggle />,
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={storyStyles.column}>
+      <View style={storyStyles.row}>
+        <Toggle defaultValue={false} onValueChange={fn()} />
+        <Text style={storyStyles.label}>Inactive</Text>
+      </View>
+      <View style={storyStyles.row}>
+        <Toggle defaultValue={true} onValueChange={fn()} />
+        <Text style={storyStyles.label}>Active</Text>
+      </View>
+      <View style={storyStyles.row}>
+        <Toggle defaultValue={false} disabled onValueChange={fn()} />
+        <Text style={storyStyles.label}>Disabled</Text>
+      </View>
+      <View style={storyStyles.row}>
+        <Toggle defaultValue={true} disabled onValueChange={fn()} />
+        <Text style={storyStyles.label}>Disabled active</Text>
+      </View>
+    </View>
+  ),
+};
+
+const storyStyles = StyleSheet.create({
+  column: {
+    gap: 16,
+    alignItems: "flex-start",
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  label: {
+    color: colors.white,
+    fontSize: 14,
+  },
+});

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,176 @@
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+  type ReactNode,
+} from "react";
+import {
+  Animated,
+  Easing,
+  Pressable,
+  StyleSheet,
+  Text,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { colors, inputTypography } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface ToggleProps extends Omit<
+  PressableProps,
+  "onPress" | "disabled" | "style" | "children" | "hitSlop"
+> {
+  value?: boolean;
+  defaultValue?: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  /** Visible label rendered next to the track. */
+  label?: string;
+  children?: ReactNode;
+  /** Accessible name for screen readers; falls back to `label`/`children` when omitted. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  className?: string;
+  hitSlop?: PressableProps["hitSlop"];
+}
+
+const TRACK_WIDTH = 44;
+const TRACK_HEIGHT = 24;
+const TRACK_RADIUS = 43;
+const TRACK_PADDING = 4;
+const THUMB_SIZE = TRACK_HEIGHT - TRACK_PADDING * 2;
+const THUMB_TRAVEL = TRACK_WIDTH - TRACK_PADDING * 2 - THUMB_SIZE;
+const ANIMATION_DURATION = 300;
+
+export const Toggle = forwardRef<ComponentRef<typeof Pressable>, ToggleProps>(function Toggle(
+  {
+    value,
+    defaultValue = false,
+    onValueChange,
+    disabled = false,
+    label,
+    children,
+    accessibilityLabel,
+    style,
+    labelStyle,
+    className,
+    hitSlop = 10,
+    ...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]);
+
+  const progress = useRef(new Animated.Value(isActive ? 1 : 0)).current;
+
+  useApplyWebClassName(containerRef, className);
+
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: isActive ? 1 : 0,
+      duration: ANIMATION_DURATION,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false,
+    }).start();
+  }, [isActive, progress]);
+
+  const handlePress = () => {
+    if (disabled) return;
+    const next = !isActive;
+    if (!isControlled) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+
+  const trackBackgroundColor = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [colors.grey700, colors.primary],
+  });
+
+  const thumbTranslateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, THUMB_TRAVEL],
+  });
+
+  return (
+    <Pressable
+      {...rest}
+      ref={setContainerRef}
+      onPress={handlePress}
+      disabled={disabled}
+      hitSlop={hitSlop}
+      accessibilityRole="switch"
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityState={{ checked: isActive, disabled }}
+      style={[styles.pressable, disabled && styles.disabled, style]}
+    >
+      <Animated.View
+        style={[
+          styles.track,
+          {
+            backgroundColor: trackBackgroundColor,
+          },
+        ]}
+      >
+        <Animated.View
+          style={[
+            styles.thumb,
+            {
+              transform: [{ translateX: thumbTranslateX }],
+            },
+          ]}
+        />
+      </Animated.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({
+  pressable: {
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    gap: 10,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  track: {
+    width: TRACK_WIDTH,
+    height: TRACK_HEIGHT,
+    borderRadius: TRACK_RADIUS,
+    padding: TRACK_PADDING,
+    justifyContent: "center",
+  },
+  thumb: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    borderRadius: THUMB_SIZE / 2,
+    backgroundColor: colors.white,
+  },
+  label: {
+    ...inputTypography.field,
+    color: colors.white,
+  },
+});

package/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from "./Toggle";
+export type { ToggleProps } from "./Toggle";

package/src/components/index.ts

@@ -1,5 +1,20 @@
+export { Avatar } from "./Avatar";
+export type { AvatarProps, AvatarMenuItem } from "./Avatar";
+
 export { Button } from "./Button";
 export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";
 
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps, CheckboxVariant } from "./Checkbox";
+
 export { Input } from "./Input";
-export type { InputProps, InputSize, InputState } from "./Input";
+export type { InputProps, InputSize } from "./Input";
+
+export { Select } from "./Select";
+export type { SelectOption, SelectProps, SelectSingleProps, SelectMultipleProps } from "./Select";
+
+export { Textarea } from "./Textarea";
+export type { TextareaProps } from "./Textarea";
+
+export { Toggle } from "./Toggle";
+export type { ToggleProps } from "./Toggle";

package/src/icons/Calendar/CalendarIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { CALENDAR_PATH } from "./calendarPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+export { CALENDAR_PATH } from "./calendarPath";
+
+/** Native — react-native-svg (peer dependency). */
+export function CalendarIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+      <Path
+        d={CALENDAR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Calendar/CalendarIcon.web.tsx

@@ -0,0 +1,27 @@
+import { CALENDAR_PATH } from "./calendarPath";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+
+/** Web / Storybook — plain SVG (no react-native-svg). */
+export function CalendarIcon({ size = 20, color = colors.primary, strokeWidth = 1.5 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        d={CALENDAR_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { CALENDAR_PATH } from "./calendarPath";

package/src/icons/Calendar/calendarPath.ts

@@ -0,0 +1,3 @@
+/** Calendar icon path — 16×16 viewBox. */
+export const CALENDAR_PATH =
+  "M14 6.66668H2M14 8.33334V5.86668C14 4.74657 14 4.18652 13.782 3.7587C13.5903 3.38237 13.2843 3.07641 12.908 2.88466C12.4802 2.66668 11.9201 2.66668 10.8 2.66668H5.2C4.0799 2.66668 3.51984 2.66668 3.09202 2.88466C2.71569 3.07641 2.40973 3.38237 2.21799 3.7587C2 4.18652 2 4.74657 2 5.86668V11.4667C2 12.5868 2 13.1468 2.21799 13.5747C2.40973 13.951 2.71569 14.2569 3.09202 14.4487C3.51984 14.6667 4.0799 14.6667 5.2 14.6667H8M10.6667 1.33334V4.00001M5.33333 1.33334V4.00001M9.66667 12.6667L11 14L14 11";

package/src/icons/Calendar/index.ts

@@ -0,0 +1 @@
+export { CalendarIcon, CALENDAR_PATH } from "./CalendarIcon";