⚡️ add bento chip

apps/expo/app/(app)/(drawer)/(tabs)/feed/index.tsx

@@ -1,8 +1,8 @@
 import { DrawerToggleButton } from '@react-navigation/drawer';
-import { searchQueryAtom } from 'app/atoms/feed';
 import { useRouterSettings } from 'app/hooks/router';
 import useTheme from 'app/hooks/useTheme';
 import { FeedScreen } from 'app/modules/feed';
+import { searchQueryAtom } from 'app/modules/feed/atoms';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 import { useSetAtom } from 'jotai';

packages/app/components/FilterBadge.tsx

@@ -1,7 +1,17 @@
 import { RDropdownMenu, RStack } from '@packrat/ui';
 import React from 'react';
 
-const FilterBadge = ({ menuItems, selectedValue, onSelect }) => {
+interface FilterBadgeProps {
+  menuItems: string[];
+  selectedValue: string;
+  onSelect: (value: string) => void;
+}
+
+const FilterBadge = ({
+  menuItems = [],
+  selectedValue = '',
+  onSelect = () => {},
+}: FilterBadgeProps) => {
   return (
     <RStack
       style={{

packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx

@@ -1,4 +1,4 @@
-import { Chip } from '@packrat/ui/src/Bento/elements/chips/components/chipsParts';
+import { Chip } from '@packrat/ui';
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { type TextInput } from 'react-native';
 import { Text, XStack } from 'tamagui'; // Ensure proper imports based on imports.md

packages/app/modules/feed/screens/FeedScreen.tsx

@@ -4,12 +4,12 @@ import Layout from 'app/components/layout/Layout';
 import { useRouter } from 'app/hooks/router';
 import { useAuthUser } from 'app/modules/auth';
 import { useFeed } from 'app/modules/feed';
+import { searchQueryAtom } from 'app/modules/feed/atoms';
+import { useAtom } from 'jotai';
 import React, { memo, useState } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { FeedCard, FeedList, FeedSearchFilter } from '../components';
 import { type FeedType } from '../model';
-import { searchQueryAtom } from 'app/atoms/feed';
-import { useAtom } from 'jotai';
 
 const URL_PATHS = {
   userPacks: '/pack/',

packages/ui/src/Chip/index.tsx

@@ -0,0 +1 @@
+export { Chip } from '../Bento/elements/chips/components/chipsParts';

packages/ui/src/RForm/index.tsx

@@ -1,17 +1,18 @@
-import React, { useRef, forwardRef, useImperativeHandle, FC } from 'react';
-import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { forwardRef, useImperativeHandle, useRef, type FC } from 'react';
+import { Controller, useForm, type SubmitHandler } from 'react-hook-form';
+import React from 'react';
 import {
+  Button,
   Form,
   Input,
-  Text as OriginalText,
-  Button,
-  TextArea,
   Label,
+  Text as OriginalText,
   XStack as OriginalXStack,
+  TextArea,
   YStack,
 } from 'tamagui';
-import * as z from 'zod';
+import { type z } from 'zod';
 
 const Text: any = OriginalText;
 const XStack: any = OriginalXStack;
@@ -107,42 +108,46 @@ const ReusableForm = forwardRef<any, ReusableFormProps>((props, ref) => {
 
   return (
     <Form onSubmit={handleSubmit(onSubmit)}>
-      {fields.map((field) => (
-        <XStack
-          overflow="hidden"
-          space="$2"
-          margin="$3"
-          padding="$2"
-          key={field.name}
-        >
-          {field.label && <Label htmlFor={field.name}>{field.label}</Label>}
-          <YStack space="$1">
-            <Controller
-              name={field.name}
-              control={control}
-              render={({ field: fieldProps }) => (
-                <RenderInput
-                  field={field}
-                  fieldProps={{
-                    ...fieldProps,
-                    ref: (el) => (inputRefs.current[field.name] = el),
-                  }}
-                />
-              )}
-            />
-            <RenderError
-              error={field.errorMessage}
-              fieldError={errors[field.name]?.message as string | undefined}
-            />
-            <RenderHelperText text={field.helperText} />
-          </YStack>
-        </XStack>
-      ))}
+      {fields &&
+        Array.isArray(fields) &&
+        fields.map((field) => (
+          <XStack
+            overflow="hidden"
+            space="$2"
+            margin="$3"
+            padding="$2"
+            key={field.name}
+          >
+            {field.label && <Label htmlFor={field.name}>{field.label}</Label>}
+            <YStack space="$1">
+              <Controller
+                name={field.name}
+                control={control}
+                render={({ field: fieldProps }) => (
+                  <RenderInput
+                    field={field}
+                    fieldProps={{
+                      ...fieldProps,
+                      ref: (el) => (inputRefs.current[field.name] = el),
+                    }}
+                  />
+                )}
+              />
+              <RenderError
+                error={field.errorMessage}
+                fieldError={errors[field.name]?.message as string | undefined}
+              />
+              <RenderHelperText text={field.helperText} />
+            </YStack>
+          </XStack>
+        ))}
       <Form.Trigger asChild>
         <Button>Submit</Button>
       </Form.Trigger>
     </Form>
   );
 });
 
+ReusableForm.displayName = 'ReusableForm';
+
 export default ReusableForm;

packages/ui/src/index.tsx

@@ -1,3 +1,5 @@
+// Component Imports
+// - Basic components and UI elements
 import RButton from './RButton';
 import RCard from './RCard';
 import RCheckbox from './RCheckbox';
@@ -14,9 +16,9 @@ import RImage from './RImage';
 import RInput from './RInput';
 import RLabel from './RLabel';
 import RLink from './RLink';
+import RParagraph from './Rparagraph';
 import RRadio from './RRadio';
 import RScrollView from './RScrollview';
-
 import RSelect from './RSelect';
 import RSeparator from './RSeparator';
 import RSpinner from './RSpinner';
@@ -25,27 +27,31 @@ import RSwitch from './RSwitch';
 import RTabs from './RTabs';
 import RText from './RText';
 import RTooltip from './RTooltip';
-import RParagraph from './Rparagraph';
 import SizableText from './SizableText';
 import XStack from './XStack';
 import YStack from './YStack';
-export { DropdownMenu, RDropdownMenu } from './ZDropdown';
-export { Container } from './Container';
-export { MainContentWeb } from './MainContentWeb';
-export { ContextMenu, RContextMenu } from './RContextMenu';
-export { DropdownComponent } from './Dropdown';
+
+// Dropdown and Menu Components
+// - Specific dropdown and context menu utilities
 export {
-  CascadedDropdownComponent,
   ActionsDropdownComponent,
+  CascadedDropdownComponent,
 } from './CascadedDropdown';
-// export { DropdownMenu, ExampleDropdown } from './RDropdown/DropdownBase';
-export { RSkeleton } from './RSkeleton';
-
-export { LoadingPlaceholder } from './LoadingPlaceholder';
+export { DropdownComponent } from './Dropdown';
+export { ContextMenu, RContextMenu } from './RContextMenu';
+export { DropdownMenu, RDropdownMenu } from './ZDropdown';
 
+// Specialized Components
+// - Custom or more complex UI components
+export { Container } from './Container';
 export { EditableText } from './EditableText';
+export { LoadingPlaceholder } from './LoadingPlaceholder';
+export { MainContentWeb } from './MainContentWeb';
+export { RSkeleton } from './RSkeleton';
 export { ThreeDotsMenu } from './ThreeDotsMenu';
 
+// Re-Exports
+// - Components re-exported for organization or external access
 export {
   RButton,
   RCard,
@@ -77,48 +83,43 @@ export {
   SizableText,
   XStack,
   YStack,
-  // ZDropdown,
 };
 
-export * from './InputText';
-export * from './form';
-export * from './card';
-export * from './Details';
-export { View } from 'tamagui';
+// External Packages and Libraries
+// - Third-party or framework-specific imports
+export * from '@tamagui/toast';
+export { ListItem as RListItem, View } from 'tamagui';
 export { config } from './tamagui.config';
-// export * from 'tamagui';
 
-export { ListItem as RListItem } from 'tamagui';
-export * from '@tamagui/toast';
-export * from './EmptyState';
+// Utility Modules
+// - Shared utilities and helper modules
+export * from './alert';
 export * from './Bento';
+export * from './card';
+export * from './Chip';
 export * from './DateRangePicker';
+export * from './Details';
 export * from './dialog';
-export * from './ImageGallery';
+export * from './EmptyState';
+export * from './ErrorBoundary';
+export * from './form';
+export * from './FullScreen';
 export * from './Image';
+export * from './ImageGallery';
+export * from './InputText';
+export * from './ItemPickerOverlay';
 export * from './list';
 export * from './modal';
-export * from './toast';
-export * from './alert';
+export * from './Pagination';
 export * from './RCard';
-export * from './ItemPickerOverlay';
 export * from './RImage';
 export * from './RInput';
+export * from './Rparagraph';
 export * from './RScrollview';
 export * from './RStack';
 export * from './RTabs';
 export * from './RText';
-export * from './Rparagraph';
-export * from './FullScreen';
 export * from './SizableText';
+export * from './toast';
 export * from './XStack';
 export * from './YStack';
-export * from './Pagination';
-// Future components
-// export * from './RCheckbox';
-// export * from './RSelect';
-// export * from './RSlider';
-// export * from './RToast';
-// export * from './RTooltip';
-
-export * from './ErrorBoundary';