@bigbinary/neetoui-rn 3.0.3 → 3.1.0

package/src/components/ChatInput/ChatInput.tsx

@@ -7,21 +7,19 @@ import {
   type ReactNode,
 } from "react";
 import { type TextInput, View, type TextInputProps } from "react-native";
-import {
-  Attachment,
-  BookOpen,
-  CannedResponses,
-  ChatBubble,
-  Down,
-  Expand,
-  Forward,
-  Minimize,
-  Notes,
-  SendPlane,
-} from "@bigbinary/neeto-icons-rn";
+import Attachment from "@bigbinary/neeto-icons-rn/icons/Attachment";
+import BookOpen from "@bigbinary/neeto-icons-rn/icons/BookOpen";
+import CannedResponses from "@bigbinary/neeto-icons-rn/icons/CannedResponses";
+import ChatBubble from "@bigbinary/neeto-icons-rn/icons/ChatBubble";
+import Down from "@bigbinary/neeto-icons-rn/icons/Down";
+import Expand from "@bigbinary/neeto-icons-rn/icons/Expand";
+import Forward from "@bigbinary/neeto-icons-rn/icons/Forward";
+import Minimize from "@bigbinary/neeto-icons-rn/icons/Minimize";
+import Notes from "@bigbinary/neeto-icons-rn/icons/Notes";
+import SendPlane from "@bigbinary/neeto-icons-rn/icons/SendPlane";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { BottomSheet } from "../BottomSheet";
 import { Skeleton } from "../Skeleton";
 import { Touchable } from "../Touchable";
@@ -209,7 +207,7 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
       disabled || (isForwardSelected && toEmailsForForward.length === 0);
 
     return (
-      <View>
+      <View style={styles.root}>
         {isLoading && (
           <Skeleton animated height={moderateScale(2)} variant="line" />
         )}
@@ -267,12 +265,14 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                 />
               )}
               <View style={styles.toolbarDivider} />
+              {/* isActive is the selected-option tint for the three mode
+                  toggles above. These two are actions, not modes, so they
+                  stay at full strength like the attachment button. */}
               {onCannedResponse &&
                 showCannedResponsesFor.includes(selectedOption) && (
                   <IconButton
                     accessibilityLabel="Canned responses"
                     Icon={CannedResponses}
-                    isActive={false}
                     onPress={onCannedResponse}
                   />
                 )}
@@ -280,7 +280,6 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
                 <IconButton
                   accessibilityLabel="Articles"
                   Icon={BookOpen}
-                  isActive={false}
                   onPress={onArticles}
                 />
               )}
@@ -292,49 +291,59 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
               />
             </View>
             <View style={styles.toolbarGroup}>
-              <Touchable
-                accessibilityLabel="Send"
-                accessibilityRole="button"
-                disabled={isActionDisabled}
+              {/* Both actions share one filled pill, split by a divider, as
+                  on web. The send affordance is the plane alone on a reply;
+                  note and forward keep their labels. */}
+              <View
                 style={[
-                  styles.sendButton,
-                  isActionDisabled && styles.sendButtonDisabled,
+                  styles.sendGroup,
+                  isActionDisabled && styles.sendGroupDisabled,
                 ]}
-                onPress={() => handleAction()}
               >
-                {!!ACTION_LABELS[selectedOption] && (
-                  <Typography size="m" style={styles.sendLabel}>
-                    {ACTION_LABELS[selectedOption]}
-                  </Typography>
-                )}
-                {isReplySelected && (
-                  <SendPlane
-                    color={theme.colors.primary}
-                    size={moderateScale(22)}
-                  />
+                <Touchable
+                  accessibilityLabel="Send"
+                  accessibilityRole="button"
+                  disabled={isActionDisabled}
+                  style={styles.sendAction}
+                  onPress={() => handleAction()}
+                >
+                  {!!ACTION_LABELS[selectedOption] && (
+                    <Typography size="m" style={styles.sendLabel}>
+                      {ACTION_LABELS[selectedOption]}
+                    </Typography>
+                  )}
+                  {isReplySelected && (
+                    <SendPlane
+                      color={theme.colors.text.inverse}
+                      size={moderateScale(20)}
+                    />
+                  )}
+                </Touchable>
+                {showReplyMenuOptions && isReplySelected && (
+                  <>
+                    <View style={styles.sendGroupDivider} />
+                    <Touchable
+                      accessibilityLabel="More reply options"
+                      accessibilityRole="button"
+                      disabled={disabled}
+                      style={styles.sendMenu}
+                      onPress={() => setIsReplyMenuVisible(true)}
+                    >
+                      <Down
+                        color={theme.colors.text.inverse}
+                        size={moderateScale(20)}
+                      />
+                    </Touchable>
+                  </>
                 )}
-              </Touchable>
+              </View>
               {showReplyMenuOptions && isReplySelected && (
-                <>
-                  <Touchable
-                    accessibilityLabel="More reply options"
-                    accessibilityRole="button"
-                    disabled={disabled}
-                    style={styles.sendButton}
-                    onPress={() => setIsReplyMenuVisible(true)}
-                  >
-                    <Down
-                      color={theme.colors.text.primary}
-                      size={moderateScale(22)}
-                    />
-                  </Touchable>
-                  <BottomSheet
-                    data={["Send and set as closed"]}
-                    hide={() => setIsReplyMenuVisible(false)}
-                    isVisible={isReplyMenuVisible}
-                    onItemPress={() => handleAction({ status: "closed" })}
-                  />
-                </>
+                <BottomSheet
+                  data={["Send and set as closed"]}
+                  hide={() => setIsReplyMenuVisible(false)}
+                  isVisible={isReplyMenuVisible}
+                  onItemPress={() => handleAction({ status: "closed" })}
+                />
               )}
             </View>
           </View>
@@ -346,48 +355,88 @@ export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
 
 ChatInput.displayName = "ChatInput";
 
-const styles = StyleSheet.create(theme => ({
-  container: {
-    paddingBottom: moderateScale(5),
-    paddingHorizontal: moderateScale(16),
-  },
-  noteSurface: {
-    backgroundColor: theme.colors.background.oldLace,
-  },
-  inputRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-  },
-  expandButton: {
-    alignSelf: "center",
-  },
-  toolbar: {
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginTop: moderateScale(10),
-  },
-  toolbarGroup: {
-    alignItems: "center",
-    flexDirection: "row",
-  },
-  toolbarDivider: {
-    alignSelf: "stretch",
-    backgroundColor: theme.colors.palette.grey400,
-    marginHorizontal: moderateScale(5),
-    width: moderateScale(2),
-  },
-  sendButton: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: moderateScale(4),
-    minHeight: moderateScale(30),
-    paddingHorizontal: moderateScale(4),
-  },
-  sendButtonDisabled: {
-    opacity: 0.5,
-  },
-  sendLabel: {
-    color: theme.colors.primary,
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    // A caller that caps this composer's height (desk clamps it to a share
+    // of the screen) would otherwise have Yoga keep every child at its
+    // natural height and let overflow clip the last one — the toolbar.
+    // Declaring what may shrink makes the text area absorb the squeeze
+    // instead, so the actions stay reachable however tall the attachments
+    // and typed content get.
+    root: {
+      flexShrink: 1,
+    },
+    container: {
+      flexShrink: 1,
+      paddingBottom: moderateScale(5),
+      paddingHorizontal: moderateScale(16),
+    },
+    noteSurface: {
+      backgroundColor: theme.colors.background.oldLace,
+    },
+    inputRow: {
+      flexDirection: "row",
+      flexShrink: 1,
+      justifyContent: "space-between",
+    },
+    expandButton: {
+      alignSelf: "center",
+    },
+    toolbar: {
+      alignItems: "center",
+      flexDirection: "row",
+      flexShrink: 0,
+      justifyContent: "space-between",
+      marginTop: moderateScale(10),
+    },
+    toolbarGroup: {
+      alignItems: "center",
+      flexDirection: "row",
+    },
+    toolbarDivider: {
+      alignSelf: "stretch",
+      backgroundColor: theme.colors.palette.grey400,
+      marginHorizontal: moderateScale(5),
+      width: moderateScale(2),
+    },
+    sendGroup: {
+      alignItems: "center",
+      backgroundColor: theme.colors.primary,
+      borderRadius: moderateScale(8),
+      flexDirection: "row",
+      // Clips the divider to the rounded corners.
+      overflow: "hidden",
+    },
+    sendGroupDisabled: {
+      opacity: 0.5,
+    },
+    sendAction: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: moderateScale(6),
+      justifyContent: "center",
+      minHeight: moderateScale(34),
+      paddingHorizontal: moderateScale(12),
+    },
+    sendGroupDivider: {
+      alignSelf: "stretch",
+      backgroundColor: theme.colors.white,
+      opacity: 0.3,
+      width: moderateScale(1),
+    },
+    sendMenu: {
+      alignItems: "center",
+      justifyContent: "center",
+      minHeight: moderateScale(34),
+      paddingHorizontal: moderateScale(8),
+    },
+    sendLabel: {
+      color: theme.colors.text.inverse,
+    },
+  };
+});

package/src/components/ChatInput/IconButton.tsx

@@ -2,7 +2,7 @@ import { type ComponentType } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { Touchable } from "../Touchable";
 
 type IconButtonProps = {
@@ -40,13 +40,24 @@ export const IconButton = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: moderateScale(8),
-  },
-  inactive: {
-    opacity: 0.5,
-  },
+const styles = StyleSheet.create((_theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    container: {
+      alignItems: "center",
+      justifyContent: "center",
+      // Adjacent buttons each contribute their padding, so this is half the
+      // gap between two icons. Vertical padding buys back some of the touch
+      // target the tighter sides give up.
+      paddingHorizontal: moderateScale(4),
+      paddingVertical: moderateScale(4),
+    },
+    inactive: {
+      opacity: 0.5,
+    },
+  };
 });

package/src/components/ChatInput/MentionsInput.tsx

@@ -3,7 +3,7 @@ import { ScrollView, TextInput, View, type TextInputProps } from "react-native";
 import { useMentions } from "react-native-controlled-mentions";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { scaleFor } from "../../utils/scale";
 import { Avatar } from "../Avatar";
 import { Touchable } from "../Touchable";
 import { Typography } from "../Typography";
@@ -98,29 +98,36 @@ export const MentionsInput = ({
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  container: {
-    flex: 1,
-    marginVertical: moderateScale(10),
-  },
-  suggestionsCard: {
-    backgroundColor: theme.colors.background.secondary,
-    borderRadius: moderateScale(10),
-    maxHeight: moderateScale(200),
-    ...theme.elevation.medium,
-  },
-  suggestionRow: {
-    alignItems: "center",
-    flexDirection: "row",
-    gap: moderateScale(8),
-    height: moderateScale(50),
-    paddingHorizontal: moderateScale(10),
-  },
-  input: {
-    color: theme.colors.text.primary,
-    fontFamily: theme.fonts.regular,
-    fontSize: theme.fontSizes.m,
-    minHeight: moderateScale(50),
-    padding: 0,
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    container: {
+      flex: 1,
+      marginVertical: moderateScale(10),
+    },
+    suggestionsCard: {
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: moderateScale(10),
+      maxHeight: moderateScale(200),
+      ...theme.elevation.medium,
+    },
+    suggestionRow: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: moderateScale(8),
+      height: moderateScale(50),
+      paddingHorizontal: moderateScale(10),
+    },
+    input: {
+      color: theme.colors.text.primary,
+      fontFamily: theme.fonts.regular,
+      fontSize: theme.fontSizes.m,
+      minHeight: moderateScale(50),
+      padding: 0,
+    },
+  };
+});

package/src/components/CheckBox/CheckBox.tsx

@@ -1,11 +1,9 @@
-import {
-  Checkbox as CheckboxIcon,
-  CheckboxInactive,
-} from "@bigbinary/neeto-icons-rn";
+import CheckboxIcon from "@bigbinary/neeto-icons-rn/icons/Checkbox";
+import CheckboxInactive from "@bigbinary/neeto-icons-rn/icons/CheckboxInactive";
 import { type StyleProp, type TextStyle } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { Touchable, type TouchableProps } from "../Touchable";
 import { Typography } from "../Typography";
 
@@ -16,6 +14,12 @@ export type CheckBoxProps = Omit<TouchableProps, "onPress"> & {
   label: string;
   labelStyle?: StyleProp<TextStyle>;
   isRequiredLabel?: boolean;
+  /**
+   * Ties the label's emphasis to the checked state: dimmed when unchecked,
+   * semibold when checked. Turn it off where the label names the field
+   * rather than the choice — an unchecked one then reads as disabled.
+   */
+  dimsUncheckedLabel?: boolean;
   iconSize?: number;
 };
 
@@ -26,13 +30,17 @@ export const CheckBox = ({
   label,
   labelStyle,
   isRequiredLabel = false,
+  dimsUncheckedLabel = true,
   iconSize,
   style,
   ...rest
 }: CheckBoxProps) => {
   const { theme } = useUnistyles();
 
-  styles.useVariants({ checked, disabled });
+  const emphasis = checked ? "emphasized" : "dim";
+  const labelState = dimsUncheckedLabel ? emphasis : "plain";
+
+  styles.useVariants({ labelState, disabled });
 
   const Icon = checked ? CheckboxIcon : CheckboxInactive;
 
@@ -45,42 +53,55 @@ export const CheckBox = ({
       onPress={onSelect}
       {...rest}
     >
-      <Typography size="m" style={[styles.label, labelStyle]}>
-        {isRequiredLabel ? `${label}*` : label}
-      </Typography>
       <Icon
         color={theme.colors.text.primary}
         size={iconSize ?? moderateScale(22)}
       />
+      <Typography size="m" style={[styles.label, labelStyle]}>
+        {isRequiredLabel ? `${label}*` : label}
+      </Typography>
     </Touchable>
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  container: {
-    alignItems: "center",
-    flexDirection: "row",
-    flexShrink: 1,
-    paddingVertical: moderateScale(8),
-  },
-  label: {
-    flex: 1,
-    lineHeight: moderateScale(22),
-    variants: {
-      checked: {
-        true: {
-          color: theme.colors.text.primary,
-          fontFamily: theme.fonts.semibold,
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    container: {
+      alignItems: "center",
+      flexDirection: "row",
+      flexShrink: 1,
+      gap: moderateScale(8),
+      paddingVertical: moderateScale(8),
+    },
+    label: {
+      flex: 1,
+      lineHeight: moderateScale(22),
+      variants: {
+        labelState: {
+          emphasized: {
+            color: theme.colors.text.primary,
+            fontFamily: theme.fonts.semibold,
+          },
+          dim: {
+            color: theme.colors.palette.grey400,
+            fontFamily: theme.fonts.regular,
+          },
+          plain: {
+            color: theme.colors.text.primary,
+            fontFamily: theme.fonts.regular,
+          },
+          default: {},
         },
-        false: {
-          color: theme.colors.palette.grey400,
-          fontFamily: theme.fonts.regular,
+        disabled: {
+          true: { color: theme.colors.palette.grey400 },
+          false: {},
         },
       },
-      disabled: {
-        true: { color: theme.colors.palette.grey400 },
-        false: {},
-      },
     },
-  },
-}));
+  };
+});

package/src/components/EmptyView/EmptyView.tsx

@@ -2,7 +2,7 @@ import { type ComponentType, type ReactNode } from "react";
 import { View, type StyleProp, type ViewStyle } from "react-native";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { Button } from "../Button";
 import { Typography } from "../Typography";
 
@@ -59,22 +59,29 @@ export const EmptyView = ({
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  container: {
-    alignItems: "center",
-    gap: moderateScale(16),
-    justifyContent: "center",
-    paddingHorizontal: moderateScale(24),
-    paddingVertical: moderateScale(32),
-  },
-  textBlock: {
-    alignItems: "center",
-    gap: moderateScale(4),
-  },
-  centered: {
-    textAlign: "center",
-  },
-  description: {
-    color: theme.colors.text.muted,
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    container: {
+      alignItems: "center",
+      gap: moderateScale(16),
+      justifyContent: "center",
+      paddingHorizontal: moderateScale(24),
+      paddingVertical: moderateScale(32),
+    },
+    textBlock: {
+      alignItems: "center",
+      gap: moderateScale(4),
+    },
+    centered: {
+      textAlign: "center",
+    },
+    description: {
+      color: theme.colors.text.muted,
+    },
+  };
+});

package/src/components/Header/Header.tsx

@@ -5,10 +5,10 @@ import {
   type ReactNode,
 } from "react";
 import { View } from "react-native";
-import { LeftArrow } from "@bigbinary/neeto-icons-rn";
+import LeftArrow from "@bigbinary/neeto-icons-rn/icons/LeftArrow";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
 
-import { moderateScale } from "../../utils/scale";
+import { moderateScale, scaleFor } from "../../utils/scale";
 import { Skeleton } from "../Skeleton";
 import { Touchable } from "../Touchable";
 import { Typography } from "../Typography";
@@ -96,19 +96,26 @@ export const Header = ({
   );
 };
 
-const styles = StyleSheet.create(theme => ({
-  container: {
-    gap: moderateScale(8),
-    minHeight: moderateScale(48),
-    paddingHorizontal: moderateScale(16),
-  },
-  backButton: {
-    marginLeft: moderateScale(-8),
-  },
-  titleBlock: {
-    flex: 1,
-  },
-  subTitle: {
-    color: theme.colors.text.muted,
-  },
-}));
+const styles = StyleSheet.create((theme, rt) => {
+  // Reading rt.screen registers the dependency that has this sheet
+  // recomputed on a window resize, so scaled sizes follow rotation,
+  // split-screen and foldables instead of freezing at first render.
+  const moderateScale = scaleFor(rt.screen);
+
+  return {
+    container: {
+      gap: moderateScale(8),
+      minHeight: moderateScale(48),
+      paddingHorizontal: moderateScale(16),
+    },
+    backButton: {
+      marginLeft: moderateScale(-8),
+    },
+    titleBlock: {
+      flex: 1,
+    },
+    subTitle: {
+      color: theme.colors.text.muted,
+    },
+  };
+});