fix: minor changes to customizable filter button

lib/platform-bible-react/dist/index.d.ts

@@ -1062,6 +1062,43 @@ export interface MarkdownRendererProps {
  * @returns A div containing the rendered markdown content.
  */
 export function MarkdownRenderer({ markdown }: MarkdownRendererProps): import("react/jsx-runtime").JSX.Element;
+export interface DropdownItem {
+	/** The label is the text that will be displayed on the dropdown item. */
+	label: string;
+	/** The checkbox boolean value determines if the item is a checkbox or radio item. */
+	checkbox: boolean;
+	/** The onClick function is called when the item is clicked. */
+	onClick: () => void;
+}
+export interface DropdownGroup {
+	/**
+	 * The label is the text that will be displayed on the dropdown group. It is used to categorize
+	 * the items in the group.
+	 */
+	label: string;
+	/** The items array contains the items that will be displayed in the dropdown group */
+	items: DropdownItem[];
+}
+export interface FilterDropdownProps {
+	/** The groups array contains the groups that will be displayed in the dropdown */
+	groups: DropdownGroup[];
+}
+/**
+ * The FilterDropdown component is a dropdown designed for filtering content. It includes groups of
+ * items that can be checkboxes or radio items.
+ *
+ * @param groups The groups array contains the groups that will be displayed in the dropdown
+ * @returns A filter dropdown.
+ */
+export function FilterDropdown({ groups }: FilterDropdownProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The FilterButton component is a button designed for initiating filtering of data. It includes
+ * dropdown visuals for active filtering and idle states. it uses forwardRef to pass the button to
+ * the dropdown trigger asChild.
+ *
+ * @returns A button that can be used to filter.
+ */
+export declare const FilterButton: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLButtonElement>>;
 /**
  * Adds an event handler to an event so the event handler runs when the event is emitted. Use
  * `papi.network.getNetworkEvent` to use a networked event with this hook.

lib/platform-bible-react/src/components/advanced-components/extension-marketplace/buttons/filter-button.component.tsx

@@ -4,21 +4,24 @@ import { Button } from '@/components/shadcn-ui/button';
 
 /**
  * The FilterButton component is a button designed for initiating filtering of data. It includes
- * dropdown visuals for active filtering and idle states. it uses forwardRef to pass the button to the
- * dropdown trigger asChild.
+ * dropdown visuals for active filtering and idle states. it uses forwardRef to pass the button to
+ * the dropdown trigger asChild.
  *
  * @returns A button that can be used to filter.
  */
 const FilterButton = forwardRef<HTMLButtonElement>((props, ref) => {
   return (
     <Button
       ref={ref}
-      className="pr-rounded-md pr-border pr-border-dashed pr-border-gray-400 pr-bg-white pr-px-4 pr-py-2 pr-text-black pr-transition pr-duration-300 pr-ease-in-out hover:pr-text-white"
+      className="pr-rounded-md pr-border pr-border-dashed pr-border-gray-400 pr-bg-white pr-px-4 pr-py-2 pr-text-black pr-transition pr-duration-300 pr-ease-in-out hover:pr-border-blue-600 hover:pr-bg-white hover:pr-text-blue-600"
       {...props}
     >
-      <Filter size={16} className="pr-mr-2 pr-h-4 pr-w-4 pr-text-gray-700" />
+      <Filter size={16} className="pr-mr-2 pr-h-4 pr-w-4 pr-text-gray-700 hover:pr-text-blue-600" />
       Filter
-      <ChevronDown size={16} className="pr-ml-2 pr-h-4 pr-w-4 pr-text-gray-700" />
+      <ChevronDown
+        size={16}
+        className="pr-ml-2 pr-h-4 pr-w-4 pr-text-gray-700 hover:pr-text-blue-600"
+      />
     </Button>
   );
 });

lib/platform-bible-react/src/components/advanced-components/extension-marketplace/buttons/update-button.component.tsx

@@ -21,7 +21,7 @@ export default function UpdateButton({ isUpdating, handleClick }: UpdateButtonPr
   return (
     <Button
       className={cn(
-        'pr-h-8 pr-rounded-md pr-bg-blue-600 pr-px-4 pr-text-white pr-transition pr-duration-300 pr-ease-in-out hover:pr-text-white hover:pr-bg-blue-700',
+        'pr-h-8 pr-rounded-md pr-bg-blue-600 pr-px-4 pr-text-white pr-transition pr-duration-300 pr-ease-in-out hover:pr-bg-blue-700 hover:pr-text-white',
         {
           'pr-cursor-not-allowed pr-bg-blue-700': isUpdating,
         },

lib/platform-bible-react/src/components/advanced-components/extension-marketplace/filter-dropdown.component.tsx

@@ -11,45 +11,32 @@ import {
 import FilterButton from './buttons/filter-button.component';
 
 interface DropdownItem {
-  /**
-   * The label is the text that will be displayed on the dropdown item.
-   */
+  /** The label is the text that will be displayed on the dropdown item. */
   label: string;
-  /**
-   * The checkbox boolean value determines if the item is a checkbox or radio
-   * item.
-   */
+  /** The checkbox boolean value determines if the item is a checkbox or radio item. */
   checkbox: boolean;
-  /**
-   * The onClick function is called when the item is clicked.
-   */
+  /** The onClick function is called when the item is clicked. */
   onClick: () => void;
 }
 
 interface DropdownGroup {
   /**
-   * The label is the text that will be displayed on the dropdown group.
-   * It is used to categorize the items in the group.
+   * The label is the text that will be displayed on the dropdown group. It is used to categorize
+   * the items in the group.
    */
   label: string;
-  /**
-   * The items array contains the items that will be displayed in the dropdown
-   * group
-   */
+  /** The items array contains the items that will be displayed in the dropdown group */
   items: DropdownItem[];
 }
 
 interface FilterDropdownProps {
-  /**
-   * The groups array contains the groups that will be displayed in the
-   * dropdown
-   */
+  /** The groups array contains the groups that will be displayed in the dropdown */
   groups: DropdownGroup[];
 }
 
 /**
- * The FilterDropdown component is a dropdown designed for filtering content.
- * It includes groups of items that can be checkboxes or radio items.
+ * The FilterDropdown component is a dropdown designed for filtering content. It includes groups of
+ * items that can be checkboxes or radio items.
  *
  * @param groups The groups array contains the groups that will be displayed in the dropdown
  * @returns A filter dropdown.

lib/platform-bible-react/src/index.ts

@@ -1,4 +1,3 @@
-import { Filter } from 'lucide-react';
 import './index.css';
 
 // Components and Types