@agilant/toga-blox 1.0.34 → 1.0.36

package/dist/components/SortArrows/SortArrows.d.ts

@@ -1,3 +1,5 @@
 import { SortArrowsProps } from "./types";
-declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, }: SortArrowsProps<T>) => JSX.Element | null;
+declare const SortArrows: <T extends object>({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon, }: SortArrowsProps<T> & {
+    getFontAwesomeIconFn?: (iconName: string, iconStyle: string) => React.ReactElement | null;
+}) => JSX.Element | null;
 export default SortArrows;

package/dist/components/SortArrows/SortArrows.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useRef } from "react";
 import { motion } from "framer-motion";
 import { useSortArrowsViewModel } from "./useSortArrowsViewModel";
-import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 import SortArrowIcon from "../SortArrowIcon";
+import { getFontAwesomeIcon } from "../../utils/getFontAwesomeIcon";
 const SortArrows = ({ column, setSortColumn, slug, isNested, parentIndex, onSortChange, renderPortalOverlay, onRequestClose, counterIcon = {
-    icon: "circle",
+    icon: "triangle",
     weight: "solid",
     numberClassNames: "absolute text-xs top-1.5 right-0 left-0",
     iconClassNames: "text-lg text-blue-400 relative hover:text-red-400",

package/dist/components/SortArrows/SortArrows.stories.js

@@ -31,7 +31,7 @@ export const WithOverlayAndIndexCount = {
         const [_, setSortColumn] = useState({});
         const column = mockColumn("category", "Category");
         return (_jsx("div", { className: "size-96", children: _jsx(SortArrows, { counterIcon: {
-                    icon: "arrowUp",
+                    icon: "triangle",
                     weight: "solid",
                     numberClassNames: "text-white text-[20px] text-red-400 rounded-full top-1.5 right-0 left-0",
                     iconClassNames: "text-blue-400 hover:text-red-400 p-4",

package/dist/utils/getFontAwesomeIcon.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const getFontAwesomeIcon: (iconName: string, className?: string) => React.ReactElement | null;
+export declare const getFontAwesomeIcon: (iconName: string, iconStyle: "solid" | "regular" | "light" | undefined) => React.ReactElement | null;

package/dist/utils/getFontAwesomeIcon.js

@@ -1,16 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import * as Icons from "@fortawesome/free-solid-svg-icons";
-export const getFontAwesomeIcon = (iconName, className = "") => {
+import * as SolidIcons from "@fortawesome/pro-solid-svg-icons";
+import * as RegularIcons from "@fortawesome/pro-regular-svg-icons";
+import * as LightIcons from "@fortawesome/pro-light-svg-icons";
+export const getFontAwesomeIcon = (iconName, iconStyle) => {
     try {
         const iconKey = `fa${iconName.charAt(0).toUpperCase()}${iconName.slice(1)}`;
-        const icon = Icons[iconKey];
-        if (icon) {
-            return _jsx(FontAwesomeIcon, { icon: icon, className: className });
+        let icon;
+        switch (iconStyle) {
+            case "solid":
+                icon = SolidIcons[iconKey];
+                break;
+            case "regular":
+                icon = RegularIcons[iconKey];
+                break;
+            case "light":
+                icon = LightIcons[iconKey];
+                break;
+            default:
+                throw new Error(`Unknown icon style: ${iconStyle}`);
         }
-        else {
-            throw new Error(`Icon not found or invalid type: ${iconName}`);
+        if (!icon) {
+            throw new Error(`Icon not found: ${iconKey}`);
         }
+        return _jsx(FontAwesomeIcon, { icon: icon });
     }
     catch (error) {
         console.error(`Error loading Font Awesome icon: ${iconName}`, error);

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agilant/toga-blox",
 	"private": false,
-	"version": "1.0.34",
+	"version": "1.0.36",
 	"description": "",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -23,6 +23,9 @@
 	],
 	"dependencies": {
 		"@emotion/is-prop-valid": "^1.1.3",
+		"@fortawesome/pro-light-svg-icons": "^6.7.2",
+		"@fortawesome/pro-regular-svg-icons": "^6.7.2",
+		"@fortawesome/pro-solid-svg-icons": "^6.7.2",
 		"@storybook/addon-docs": "^7.6.6",
 		"@storybook/addon-viewport": "^7.6.10",
 		"@tanstack/react-virtual": "^3.1.3",