@ecohouse/ui 0.1.32 → 0.1.33

package/package.json

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

package/src/components/DatePicker/DatePicker.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -93,6 +94,11 @@ type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
   weekStartsOn?: 0 | 1;
   /** Styles the calendar popup independently from the trigger width. */
   calendarStyle?: StyleProp<ViewStyle>;
+  /**
+   * When true, only the calendar panel is rendered (no field/trigger).
+   * Use with controlled `open` for icon-button / popover hosts.
+   */
+  hideTrigger?: boolean;
   style?: StyleProp<ViewStyle>;
   className?: string;
 };
@@ -174,6 +180,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
       formatValue: formatValueProp,
       weekStartsOn = 1,
       calendarStyle,
+      hideTrigger = false,
       style,
       className,
       accessibilityLabel,
@@ -207,6 +214,8 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
     );
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const [hoveredDayKey, setHoveredDayKey] = useState<number | null>(null);
+    /** Web: flip calendar to the trigger's right edge when it would overflow the viewport. */
+    const [menuAlignEnd, setMenuAlignEnd] = useState(false);
 
     const rangeValue: DateRange = isRange
       ? isValueControlled
@@ -221,6 +230,13 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
 
     const isOpen = isOpenControlled ? openProp : uncontrolledOpen;
 
+    const defaultMenuWidth = usesRangeTrigger ? RANGE_TRIGGER_WIDTH : DEFAULT_WIDTH;
+    const resolvedMenuWidth = useMemo(() => {
+      const flat = StyleSheet.flatten(calendarStyle);
+      const width = flat?.width;
+      return typeof width === "number" ? width : defaultMenuWidth;
+    }, [calendarStyle, defaultMenuWidth]);
+
     const [visibleMonth, setVisibleMonth] = useState(() => {
       const anchor =
         defaultVisibleMonth ?? (isRange ? rangeValue.start : singleValue) ?? new Date();
@@ -238,11 +254,33 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
           setVisibleMonth(new Date(anchor.getFullYear(), anchor.getMonth(), 1));
         } else {
           setHoveredDayKey(null);
+          setMenuAlignEnd(false);
         }
       },
       [isOpenControlled, isRange, onOpenChange, rangeValue.start, singleValue],
     );
 
+    // Prefer left alignment; flip to right when the menu would overflow the viewport (web).
+    useLayoutEffect(() => {
+      if (Platform.OS !== "web" || !isOpen || hideTrigger) return;
+
+      const updateMenuAlign = () => {
+        const trigger = triggerRef.current as unknown as {
+          getBoundingClientRect?: () => DOMRect;
+        } | null;
+        const rect = trigger?.getBoundingClientRect?.();
+        if (!rect) return;
+
+        const viewportPadding = 8;
+        const overflowsRight = rect.left + resolvedMenuWidth > window.innerWidth - viewportPadding;
+        setMenuAlignEnd(overflowsRight);
+      };
+
+      updateMenuAlign();
+      window.addEventListener("resize", updateMenuAlign);
+      return () => window.removeEventListener("resize", updateMenuAlign);
+    }, [hideTrigger, isOpen, resolvedMenuWidth]);
+
     // Close on outside click (web only; native has no document-level events).
     useEffect(() => {
       if (Platform.OS !== "web" || !isOpen) return;
@@ -371,6 +409,7 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
         style={[
           styles.root,
           usesRangeTrigger && styles.rangeRoot,
+          hideTrigger && styles.rootHideTrigger,
           isOpen && styles.rootOpen,
           disabled && styles.disabled,
           style,
@@ -378,52 +417,65 @@ export const DatePicker = forwardRef<ComponentRef<typeof View>, DatePickerProps>
         accessibilityState={{ disabled, expanded: isOpen }}
       >
         <View style={[styles.triggerWrap, isOpen && styles.triggerWrapOpen]}>
-          <Pressable
-            ref={triggerRef}
-            onPress={handleTriggerPress}
-            disabled={disabled}
-            accessibilityRole="button"
-            accessibilityLabel={resolvedAccessibilityLabel}
-            accessibilityState={{ disabled, expanded: isOpen }}
-            style={[
-              styles.trigger,
-              usesRangeTrigger && styles.rangeTrigger,
-              usesRangeTrigger &&
-                (usesVerticalRangeTrigger
-                  ? styles.rangeTriggerVertical
-                  : styles.rangeTriggerHorizontal),
-              {
-                borderColor: triggerBorderColor,
-                backgroundColor: usesRangeTrigger ? "transparent" : colors.grey700,
-              },
-            ]}
-          >
-            {usesRangeTrigger ? (
-              <>
-                <RangeTriggerField label={startLabel} time={startTime} value={startValue} />
-                <View
-                  style={
-                    usesVerticalRangeTrigger
-                      ? styles.rangeDividerVertical
-                      : styles.rangeDividerHorizontal
-                  }
-                />
-                <RangeTriggerField label={endLabel} time={endTime} value={endValue} />
-              </>
-            ) : (
-              <>
-                <Text style={[styles.triggerText, { color: triggerTextColor }]} numberOfLines={1}>
-                  {triggerLabel}
-                </Text>
-                <View style={styles.iconSlot}>
-                  <CalendarOutlineIcon size={ICON_SIZE} color={colors.grey100} />
-                </View>
-              </>
-            )}
-          </Pressable>
+          {hideTrigger ? null : (
+            <Pressable
+              ref={triggerRef}
+              onPress={handleTriggerPress}
+              disabled={disabled}
+              accessibilityRole="button"
+              accessibilityLabel={resolvedAccessibilityLabel}
+              accessibilityState={{ disabled, expanded: isOpen }}
+              style={[
+                styles.trigger,
+                usesRangeTrigger && styles.rangeTrigger,
+                usesRangeTrigger &&
+                  (usesVerticalRangeTrigger
+                    ? styles.rangeTriggerVertical
+                    : styles.rangeTriggerHorizontal),
+                {
+                  borderColor: triggerBorderColor,
+                  backgroundColor: usesRangeTrigger ? "transparent" : colors.grey700,
+                },
+              ]}
+            >
+              {usesRangeTrigger ? (
+                <>
+                  <RangeTriggerField label={startLabel} time={startTime} value={startValue} />
+                  <View
+                    style={
+                      usesVerticalRangeTrigger
+                        ? styles.rangeDividerVertical
+                        : styles.rangeDividerHorizontal
+                    }
+                  />
+                  <RangeTriggerField label={endLabel} time={endTime} value={endValue} />
+                </>
+              ) : (
+                <>
+                  <Text style={[styles.triggerText, { color: triggerTextColor }]} numberOfLines={1}>
+                    {triggerLabel}
+                  </Text>
+                  <View style={styles.iconSlot}>
+                    <CalendarOutlineIcon size={ICON_SIZE} color={colors.grey100} />
+                  </View>
+                </>
+              )}
+            </Pressable>
+          )}
 
           {isOpen ? (
-            <View style={[styles.menu, usesRangeTrigger && styles.rangeMenu, calendarStyle]}>
+            <View
+              style={[
+                styles.menu,
+                usesRangeTrigger && styles.rangeMenu,
+                hideTrigger
+                  ? styles.menuInline
+                  : menuAlignEnd
+                    ? styles.menuAlignEnd
+                    : styles.menuAlignStart,
+                calendarStyle,
+              ]}
+            >
               <View style={styles.calendarHeader}>
                 <Pressable
                   onPress={handlePrevMonth}
@@ -590,6 +642,10 @@ const styles = StyleSheet.create({
     gap: 8,
     alignSelf: "flex-start",
   },
+  rootHideTrigger: {
+    width: "auto",
+    gap: 0,
+  },
   rootOpen: {
     zIndex: 30,
   },
@@ -694,7 +750,6 @@ const styles = StyleSheet.create({
   menu: {
     position: "absolute",
     top: "100%",
-    left: 0,
     width: DEFAULT_WIDTH,
     marginTop: 8,
     zIndex: 10,
@@ -711,6 +766,21 @@ const styles = StyleSheet.create({
       },
     }),
   },
+  menuAlignStart: {
+    left: 0,
+    right: "auto",
+  },
+  menuAlignEnd: {
+    left: "auto",
+    right: 0,
+  },
+  menuInline: {
+    position: "relative",
+    top: "auto",
+    left: "auto",
+    right: "auto",
+    marginTop: 0,
+  },
   rangeMenu: {
     width: RANGE_TRIGGER_WIDTH,
   },

package/src/components/Select/Select.tsx

@@ -61,6 +61,8 @@ type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
   loading?: boolean;
   /** Text shown when no options match. */
   emptyText?: string;
+  /** Override color for the selected value text in the trigger. */
+  valueColor?: string;
   style?: StyleProp<ViewStyle>;
   className?: string;
 };
@@ -264,6 +266,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       onSearchChange,
       loading = false,
       emptyText = "No results",
+      valueColor,
       style,
       className,
       accessibilityLabel,
@@ -508,7 +511,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
 
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
       size: ICON_SIZE,
-      color: error ? colors.red : isOpen ? colors.primary : colors.grey100,
+      color: error ? colors.red : colors.primary,
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
 
@@ -520,7 +523,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const triggerTextColor = hasValue
       ? error
         ? colors.red
-        : colors.white
+        : (valueColor ?? colors.white)
       : error
         ? colors.red
         : colors.grey100;

package/src/components/Sidebar/Sidebar.tsx

@@ -59,6 +59,8 @@ export interface SidebarProps extends Omit<ViewProps, "style" | "children"> {
   collapsed?: boolean;
   defaultCollapsed?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
+  /** When false, hides the expand/collapse control. Defaults to `true`. */
+  showCollapseToggle?: boolean;
   style?: StyleProp<ViewStyle>;
   className?: string;
 }
@@ -86,6 +88,7 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
     collapsed: collapsedProp,
     defaultCollapsed = false,
     onCollapsedChange,
+    showCollapseToggle = true,
     style,
     className,
     ...rest
@@ -136,7 +139,13 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
       style={[styles.root, { width: widthAnim }, style]}
       accessibilityRole="menu"
     >
-      <View style={[styles.header, collapsed ? styles.headerCollapsed : styles.headerExpanded]}>
+      <View
+        style={[
+          styles.header,
+          collapsed ? styles.headerCollapsed : styles.headerExpanded,
+          !showCollapseToggle ? styles.headerNoToggle : null,
+        ]}
+      >
         <Animated.View
           pointerEvents={collapsed ? "none" : "auto"}
           style={[
@@ -157,16 +166,18 @@ export const Sidebar = forwardRef<ComponentRef<typeof View>, SidebarProps>(funct
           />
         </Animated.View>
 
-        <Pressable
-          accessibilityRole="button"
-          accessibilityLabel={collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel}
-          accessibilityState={{ expanded: !collapsed }}
-          hitSlop={8}
-          onPress={() => setCollapsed(!collapsed)}
-          style={styles.toggleButton}
-        >
-          <SidebarIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
-        </Pressable>
+        {showCollapseToggle ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={collapsed ? expandAccessibilityLabel : collapseAccessibilityLabel}
+            accessibilityState={{ expanded: !collapsed }}
+            hitSlop={8}
+            onPress={() => setCollapsed(!collapsed)}
+            style={styles.toggleButton}
+          >
+            <SidebarIcon color={colors.grey100} size={TOGGLE_SIZE} strokeWidth={2} />
+          </Pressable>
+        ) : null}
       </View>
 
       <View
@@ -242,6 +253,9 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     paddingHorizontal: 24,
   },
+  headerNoToggle: {
+    justifyContent: "flex-start",
+  },
   headerCollapsed: {
     justifyContent: "center",
     paddingHorizontal: 0,

package/src/components/StepPager/StepPager.tsx

@@ -0,0 +1,150 @@
+import { forwardRef, useMemo, useRef, type ComponentRef } from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from "react-native";
+import { ChevronLeftIcon } from "../../icons";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export interface StepPagerProps extends Omit<ViewProps, "style" | "children"> {
+  /** Zero-based active step index. */
+  index: number;
+  /** Total number of steps. */
+  count: number;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  previousAccessibilityLabel?: string;
+  nextAccessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+}
+
+const WIDTH = 121;
+const HEIGHT = 48;
+const ICON_SIZE = 24;
+
+/**
+ * Compact prev / current-of-total / next control (e.g. camera fullscreen pager).
+ * Fixed 121×48 pill, 12 gap/padding, 77 radius.
+ */
+export const StepPager = forwardRef<ComponentRef<typeof View>, StepPagerProps>(function StepPager(
+  {
+    index,
+    count,
+    onPrevious,
+    onNext,
+    previousAccessibilityLabel = "Previous",
+    nextAccessibilityLabel = "Next",
+    style,
+    className,
+    accessibilityLabel,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const containerRef = useRef<ComponentRef<typeof View>>(null);
+  const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
+  const safeCount = Math.max(0, count);
+  const safeIndex = safeCount === 0 ? 0 : Math.min(Math.max(index, 0), safeCount - 1);
+  const label = safeCount === 0 ? "0/0" : `${safeIndex + 1}/${safeCount}`;
+  const atStart = safeIndex <= 0;
+  const atEnd = safeIndex >= safeCount - 1;
+
+  useApplyWebClassName(containerRef, className);
+
+  return (
+    <View
+      {...rest}
+      ref={setContainerRef}
+      accessibilityRole="adjustable"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityValue={{
+        min: safeCount === 0 ? 0 : 1,
+        max: safeCount,
+        now: safeCount === 0 ? 0 : safeIndex + 1,
+        text: label,
+      }}
+      style={[styles.root, webBlurStyle, style]}
+    >
+      <Pressable
+        onPress={onPrevious}
+        disabled={atStart || !onPrevious}
+        hitSlop={4}
+        accessibilityRole="button"
+        accessibilityLabel={previousAccessibilityLabel}
+        accessibilityState={{ disabled: atStart || !onPrevious }}
+        style={[styles.navButton, (atStart || !onPrevious) && styles.navDisabled]}
+      >
+        <ChevronLeftIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
+      </Pressable>
+
+      <Text style={styles.label}>{label}</Text>
+
+      <Pressable
+        onPress={onNext}
+        disabled={atEnd || !onNext}
+        hitSlop={4}
+        accessibilityRole="button"
+        accessibilityLabel={nextAccessibilityLabel}
+        accessibilityState={{ disabled: atEnd || !onNext }}
+        style={[styles.navButton, (atEnd || !onNext) && styles.navDisabled]}
+      >
+        <View style={styles.chevronRight}>
+          <ChevronLeftIcon size={ICON_SIZE} color={colors.white} strokeWidth={2} />
+        </View>
+      </Pressable>
+    </View>
+  );
+});
+
+const webBlurStyle: ViewStyle =
+  Platform.OS === "web"
+    ? ({
+        backdropFilter: "blur(50px)",
+        WebkitBackdropFilter: "blur(50px)",
+      } as ViewStyle)
+    : {};
+
+const styles = StyleSheet.create({
+  root: {
+    width: WIDTH,
+    height: HEIGHT,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 12,
+    padding: 12,
+    borderRadius: 77,
+    backgroundColor: colors.whiteAlpha6,
+    overflow: "hidden",
+  },
+  navButton: {
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  navDisabled: {
+    opacity: 0.35,
+  },
+  chevronRight: {
+    transform: [{ scaleX: -1 }],
+  },
+  label: {
+    fontFamily: fonts.sans,
+    fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.white,
+    textAlign: "center",
+  },
+});

package/src/components/StepPager/index.ts

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

package/src/components/index.ts

@@ -16,6 +16,9 @@ export type { StatusBadgeProps, StatusBadgeTone } from "./StatusBadge";
 export { PaginationDots } from "./PaginationDots";
 export type { PaginationDotsProps } from "./PaginationDots";
 
+export { StepPager } from "./StepPager";
+export type { StepPagerProps } from "./StepPager";
+
 export { InfoTile } from "./InfoTile";
 export type { InfoTileProps } from "./InfoTile";
 

package/src/icons/Ban/BanIcon.tsx

@@ -0,0 +1,15 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { BAN_PATH } from "./banPath";
+
+export { BAN_PATH } from "./banPath";
+
+/** Filled prohibition / deactivated mark (28×28 viewBox). */
+export function BanIcon({ size = 28, color = colors.primary }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 28 28" fill="none">
+      <Path d={BAN_PATH} fill={color} />
+    </Svg>
+  );
+}

package/src/icons/Ban/banPath.ts

@@ -0,0 +1,2 @@
+export const BAN_PATH =
+  "M14.0007 2.33301C11.6932 2.33301 9.43758 3.01725 7.519 4.2992C5.60043 5.58115 4.10508 7.40323 3.22206 9.53503C2.33904 11.6668 2.108 14.0126 2.55816 16.2757C3.00832 18.5388 4.11946 20.6176 5.75108 22.2493C7.38269 23.8809 9.46149 24.992 11.7246 25.4422C13.9877 25.8923 16.3335 25.6613 18.4653 24.7783C20.5971 23.8952 22.4192 22.3999 23.7011 20.4813C24.9831 18.5628 25.6673 16.3071 25.6673 13.9997C25.6673 12.4676 25.3656 10.9505 24.7793 9.53503C24.1929 8.11957 23.3336 6.83345 22.2502 5.7501C21.1669 4.66675 19.8808 3.80738 18.4653 3.22108C17.0498 2.63478 15.5327 2.33301 14.0007 2.33301ZM14.0007 23.333C11.5253 23.333 9.15133 22.3497 7.40099 20.5993C5.65065 18.849 4.66732 16.475 4.66732 13.9997C4.66475 11.9269 5.35917 9.91348 6.63899 8.28301L19.7173 21.3613C18.0869 22.6412 16.0734 23.3356 14.0007 23.333ZM21.3623 19.7163L8.28399 6.63801C9.91446 5.35819 11.9279 4.66376 14.0007 4.66634C16.476 4.66634 18.85 5.64967 20.6003 7.40001C22.3507 9.15035 23.334 11.5243 23.334 13.9997C23.3366 16.0724 22.6421 18.0859 21.3623 19.7163Z";

package/src/icons/Ban/index.ts

@@ -0,0 +1 @@
+export { BanIcon, BAN_PATH } from "./BanIcon";

package/src/icons/Fullscreen/FullscreenIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { FULLSCREEN_PATH } from "./fullscreenPath";
+
+export { FULLSCREEN_PATH } from "./fullscreenPath";
+
+/** Four-corner fullscreen / maximize control (24×24 viewBox). */
+export function FullscreenIcon({ size = 24, color = colors.white, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={FULLSCREEN_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/Fullscreen/fullscreenPath.ts

@@ -0,0 +1,2 @@
+export const FULLSCREEN_PATH =
+  "M16 8L21 3M21 8V3H16M8 8L3 3M8 3L3 3L3 8M8 16L3 21M3 16L3 21H8M16 16L21 21M16 21H21V16";

package/src/icons/Fullscreen/index.ts

@@ -0,0 +1 @@
+export { FullscreenIcon, FULLSCREEN_PATH } from "./FullscreenIcon";

package/src/icons/Home/homePath.ts

@@ -1,2 +1,2 @@
 export const HOME_PATH =
-  "M1.66675 16.6667H3.33341M3.33341 16.6667H8.33341M3.33341 16.6667V9.54352C3.33341 9.09823 3.33341 8.87548 3.38756 8.66828C3.43554 8.48466 3.51491 8.31089 3.6215 8.15387C3.74178 7.97668 3.90895 7.82974 4.24406 7.53652L8.24538 4.03537C8.86662 3.49178 9.17726 3.21997 9.5271 3.11652C9.83559 3.02529 10.1644 3.02529 10.4729 3.11652C10.823 3.22005 11.1341 3.49212 11.7563 4.03652L15.7563 7.53652C16.0914 7.82974 16.2586 7.97668 16.3789 8.15387C16.4855 8.31089 16.5642 8.48466 16.6122 8.66828C16.6664 8.87548 16.6667 9.09824 16.6667 9.54352V16.6667M8.33341 16.6667H11.6667M8.33341 16.6667V13.3334C8.33341 12.4129 9.07961 11.6667 10.0001 11.6667C10.9206 11.6667 11.6667 12.4129 11.6667 13.3334V16.6667M11.6667 16.6667H16.6667M16.6667 16.6667H18.3334";
+  "M6.77168 11.6663C7.14172 13.104 8.4468 14.1663 10 14.1663C11.5532 14.1663 12.8583 13.104 13.2283 11.6663M9.18141 2.30297L3.52949 6.6989C3.15168 6.99276 2.96278 7.13968 2.82669 7.32368C2.70614 7.48667 2.61633 7.67029 2.56169 7.86551C2.5 8.0859 2.5 8.32521 2.5 8.80384V14.833C2.5 15.7664 2.5 16.2331 2.68166 16.5896C2.84144 16.9032 3.09641 17.1582 3.41002 17.318C3.76654 17.4996 4.23325 17.4996 5.16667 17.4996H14.8333C15.7668 17.4996 16.2335 17.4996 16.59 17.318C16.9036 17.1582 17.1586 16.9032 17.3183 16.5896C17.5 16.2331 17.5 15.7664 17.5 14.833V8.80384C17.5 8.32521 17.5 8.0859 17.4383 7.86551C17.3837 7.67029 17.2939 7.48667 17.1733 7.32368C17.0372 7.13968 16.8483 6.99276 16.4705 6.69891L10.8186 2.30297C10.5258 2.07526 10.3794 1.9614 10.2178 1.91763C10.0752 1.87902 9.92484 1.87902 9.78221 1.91763C9.62057 1.9614 9.47418 2.07526 9.18141 2.30297Z";

package/src/icons/Sort/SortIcon.tsx

@@ -5,10 +5,10 @@ import type { IconProps } from "../types";
 
 export { SORT_PATH } from "./sortPath";
 
-/** Native — react-native-svg (peer dependency). */
-export function SortIcon({ size = 12, color = colors.grey150, strokeWidth = 1.5 }: IconProps) {
+/** Bidirectional sort (20×20 viewBox). */
+export function SortIcon({ size = 20, color = colors.grey300, strokeWidth = 2 }: IconProps) {
   return (
-    <Svg width={size} height={size} viewBox="0 0 12 12" fill="none">
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
       <Path
         d={SORT_PATH}
         stroke={color}

package/src/icons/Sort/SortIcon.web.tsx

@@ -3,12 +3,12 @@ import { colors } from "../../theme";
 import type { IconProps } from "../types";
 
 /** Web / Storybook — plain SVG (no react-native-svg). */
-export function SortIcon({ size = 12, color = colors.grey150, strokeWidth = 1.5 }: IconProps) {
+export function SortIcon({ size = 20, color = colors.grey300, strokeWidth = 2 }: IconProps) {
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 12 12"
+      viewBox="0 0 20 20"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden

package/src/icons/Sort/sortPath.ts

@@ -1,2 +1,3 @@
-/** Bidirectional sort icon path — 12×12 viewBox. */
-export const SORT_PATH = "M3.5 2V10M5.5 8L3.5 10L1.5 8M8.5 10V2M10.5 4L8.5 2L6.5 4";
+/** Bidirectional sort icon path — 20×20 viewBox. */
+export const SORT_PATH =
+  "M5.83333 3.33301V16.6663M9.16667 13.333L5.83333 16.6663L2.5 13.333M14.1667 16.6663V3.33301M17.5 6.66634L14.1667 3.33301L10.8333 6.66634";

package/src/icons/VideoOff/VideoOffIcon.tsx

@@ -0,0 +1,21 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { VIDEO_OFF_PATH } from "./videoOffPath";
+
+export { VIDEO_OFF_PATH } from "./videoOffPath";
+
+/** Video / camera off (24×24 viewBox). */
+export function VideoOffIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path
+        d={VIDEO_OFF_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}