From deed3e1237229c432760abe6b4489b48b3554d09 Mon Sep 17 00:00:00 2001
From: Sujan Sundareswaran <sujan.sundareswaran@gmail.com>
Date: Sat, 1 Feb 2025 08:00:01 +0530
Subject: [PATCH] v1.11.9

---
 CHANGELOG.md                              |  2 +
 package.json                              |  2 +-
 src/components/Badge/Badge.tsx            |  7 +-
 src/components/Badge/badge.css            |  7 +-
 src/components/Drawer/Drawer.tsx          | 23 +++---
 src/components/Drawer/drawer.css          | 10 +--
 src/components/Form/Range/Range.tsx       | 16 ++--
 src/components/LoadingBar/LoadingBar.tsx  | 92 -----------------------
 src/components/LoadingBar/index.tsx       |  1 -
 src/components/LoadingBar/loading-bar.css | 40 ----------
 src/components/Meter/Meter.tsx            | 65 +++++++++-------
 src/components/index.tsx                  |  3 -
 src/index.tsx                             |  3 -
 13 files changed, 77 insertions(+), 194 deletions(-)
 delete mode 100644 src/components/LoadingBar/LoadingBar.tsx
 delete mode 100644 src/components/LoadingBar/index.tsx
 delete mode 100644 src/components/LoadingBar/loading-bar.css

diff --git a/CHANGELOG.md b/CHANGELOG.md
index be035647..10e95e8b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## 1.11.9
 - Allow empty `options` object for `ListBox`
+- Rename `dismiss-button` class in `Drawer` to be more specific to avoid clashes
+- `Badge` now accepts children other than just text
 
 ## 1.11.8
 - Add select all and clear all methods for  `OptionCardsGroup`
diff --git a/package.json b/package.json
index cb43dc62..b8b9e098 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "fictoan-react",
-    "version": "1.11.9-alpha.12",
+    "version": "1.11.9",
     "private": false,
     "description": "A full-featured, designer-friendly, yet performant framework with plain-English props and focus on rapid iteration.",
     "repository": {
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index d2b455d0..838249fb 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -65,15 +65,16 @@ export const Badge = React.forwardRef(
                 aria-label={label || (typeof children === "string" ? children : undefined)}
                 {...props}
             >
-                <Text>{children}</Text>
+                {children}
+
                 {withDelete && (
                     <Text
-                        className="dismiss-button"
+                        className="badge-dismiss-button"
                         onClick={handleDelete}
                         onKeyDown={handleKeyPress}
                         role="button"
                         tabIndex={0}
-                        aria-label={`Remove ${label || children}`}
+                        aria-label={`Remove badge`}
                     >
                         &times;
                     </Text>
diff --git a/src/components/Badge/badge.css b/src/components/Badge/badge.css
index 53d4d6b0..240842ad 100644
--- a/src/components/Badge/badge.css
+++ b/src/components/Badge/badge.css
@@ -26,13 +26,14 @@
     &[class*="border-"] { border-width : var(--badge-border-width); }
     &.border-none { border-width : 0 !important; }
 
-    & .dismiss-button {
+    & .badge-dismiss-button {
+        position    : relative;
         margin-left : 8px;
-        font-size   : 18px;
+        font-size   : 1.6rem;
         cursor      : pointer;
         line-height : 1;
         top         : -1px;
-        position    : relative;
+        font-weight : 400;
 
         &:hover {
             transform  : scale(1.1);
diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx
index ff70560d..da2ac1e5 100644
--- a/src/components/Drawer/Drawer.tsx
+++ b/src/components/Drawer/Drawer.tsx
@@ -46,13 +46,15 @@ export const Drawer = React.forwardRef(
             showOverlay = false,
             label,
             ...props
-        }: DrawerProps,
-        ref: React.Ref<DrawerElementType>
+        } : DrawerProps,
+        ref : React.Ref<DrawerElementType>,
     ) => {
         const [shouldRender, setShouldRender] = useState(openWhen);
 
         const drawerRef = useRef(null);
-        const effectiveRef = (ref || drawerRef) as RefObject<HTMLDivElement>;
+        const effectiveRef = (
+            ref || drawerRef
+        ) as RefObject<HTMLDivElement>;
 
         useEffect(() => {
             if (openWhen) {
@@ -84,10 +86,11 @@ export const Drawer = React.forwardRef(
 
         const closeDrawer = () => closeWhen?.();
 
-        useClickOutside(effectiveRef, closeOnClickOutside ? closeDrawer : () => {});
+        useClickOutside(effectiveRef, closeOnClickOutside ? closeDrawer : () => {
+        });
 
-        const handleKeyDown = (e: React.KeyboardEvent) => {
-            if (e.key === 'Escape' && isDismissible) {
+        const handleKeyDown = (e : React.KeyboardEvent) => {
+            if (e.key === "Escape" && isDismissible) {
                 closeDrawer();
             }
         };
@@ -105,7 +108,9 @@ export const Drawer = React.forwardRef(
                     aria-modal="true"
                     aria-label={label || "Drawer"}
                     tabIndex={-1}
-                    {...(closeOnClickOutside ? { onClick: closeDrawer } : {})}
+                    {...(
+                        closeOnClickOutside ? { onClick : closeDrawer } : {}
+                    )}
                     {...props}
                 >
                     {openWhen && showOverlay && (
@@ -125,7 +130,7 @@ export const Drawer = React.forwardRef(
                     >
                         {isDismissible && (
                             <button
-                                className="dismiss-button"
+                                className="drawer-dismiss-button"
                                 onClick={closeDrawer}
                                 aria-label="Close drawer"
                                 tabIndex={0}
@@ -136,5 +141,5 @@ export const Drawer = React.forwardRef(
                 </Element>
             </>
         ) : null;
-    }
+    },
 );
diff --git a/src/components/Drawer/drawer.css b/src/components/Drawer/drawer.css
index ae8c1695..5fa23de4 100644
--- a/src/components/Drawer/drawer.css
+++ b/src/components/Drawer/drawer.css
@@ -117,7 +117,7 @@
     &.open.bottom .drawer-content-wrapper { transform : translateX(0); }
 
     /* DISMISS BUTTON ======================================================= */
-    & .dismiss-button {
+    & .drawer-dismiss-button {
         position         : absolute;
         display          : flex;
         width            : 32px;
@@ -149,22 +149,22 @@
         }
     }
 
-    &.top .dismiss-button {
+    &.top .drawer-dismiss-button {
         bottom : -36px;
         right  : 24px;
     }
 
-    &.bottom .dismiss-button {
+    &.bottom .drawer-dismiss-button {
         top   : -36px;
         right : 24px;
     }
 
-    &.left .dismiss-button {
+    &.left .drawer-dismiss-button {
         top   : 24px;
         right : -36px;
     }
 
-    &.right .dismiss-button {
+    &.right .drawer-dismiss-button {
         top  : 24px;
         left : -36px;
     }
diff --git a/src/components/Form/Range/Range.tsx b/src/components/Form/Range/Range.tsx
index d03495fb..0d92e06c 100644
--- a/src/components/Form/Range/Range.tsx
+++ b/src/components/Form/Range/Range.tsx
@@ -2,7 +2,6 @@
 import React from "react";
 
 // FICTOAN =============================================================================================================
-import { Element } from "../../Element/Element";
 import { Div } from "../../Element/Tags";
 import { BaseInputComponent } from "../BaseInputComponent/BaseInputComponent";
 import { InputLabel } from "../InputLabel/InputLabel";
@@ -27,13 +26,13 @@ export type RangeElementType = HTMLInputElement;
 export type RangeProps = Omit<CommonAndHTMLProps<RangeElementType>, "onChange"> & InputCommonProps & RangeCustomProps;
 
 // COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////
-export const Range = React.forwardRef(({ label, value, suffix, onChange, ...props }: RangeProps,
-     ref: React.Ref<RangeElementType>
+export const Range = React.forwardRef(({ label, value, suffix, onChange, ...props } : RangeProps,
+        ref : React.Ref<RangeElementType>,
     ) => {
-    const handleChange = (value: string) => {
-        // Convert the string to a number and call our number handler
-        onChange?.(parseFloat(value));
-    };
+        const handleChange = (value : string) => {
+            // Convert the string to a number and call our number handler
+            onChange?.(parseFloat(value));
+        };
 
         return (
             <BaseInputComponent<RangeElementType>
@@ -53,4 +52,5 @@ export const Range = React.forwardRef(({ label, value, suffix, onChange, ...prop
                 {...props}
             />
         );
-    });
+    },
+);
diff --git a/src/components/LoadingBar/LoadingBar.tsx b/src/components/LoadingBar/LoadingBar.tsx
deleted file mode 100644
index ccf466fb..00000000
--- a/src/components/LoadingBar/LoadingBar.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { forwardRef, useEffect, useState } from "react";
-import { Element } from "../Element/Element";
-import { CommonAndHTMLProps } from "../Element/constants";
-
-import "./loading-bar.css";
-
-interface LoadingBarCustomProps {
-    animateWhen?: boolean;
-    progress?: number;
-    isIndeterminate?: boolean;
-    height?: string;
-    position?: "top" | "bottom";
-}
-
-export type LoadingBarElementType = HTMLDivElement;
-export type LoadingBarProps =
-    Omit<CommonAndHTMLProps<LoadingBarElementType>, keyof LoadingBarCustomProps>
-    & LoadingBarCustomProps;
-
-export const LoadingBar = forwardRef<LoadingBarElementType, LoadingBarProps>(
-    (
-        {
-            animateWhen = false,
-            progress = 0,
-            isIndeterminate = false,
-            height = "4px",
-            position = "top",
-            className,
-            ...props
-        }, ref) => {
-        const [ state, setState ] = useState({
-            isVisible       : false,
-            isFading        : false,
-            currentProgress : progress,
-        });
-
-        // Handle state updates
-        useEffect(() => {
-
-            if (animateWhen && !state.isVisible) {
-                setState(prev => ({ ...prev, isVisible : true, isFading : false }));
-            } else if (progress >= 100 && !state.isFading) {
-                setState(prev => ({ ...prev, isFading : true }));
-
-                // Remove from DOM after fade
-                const timer = setTimeout(() => {
-                    setState(prev => ({
-                        ...prev,
-                        isVisible       : false,
-                        isFading        : false,
-                        currentProgress : 0,
-                    }));
-                }, 500);
-
-                return () => clearTimeout(timer);
-            }
-
-            setState(prev => ({ ...prev, currentProgress : progress }));
-        }, [ animateWhen, progress ]);
-
-        if (!state.isVisible && !animateWhen) return null;
-
-        const transformValue = isIndeterminate ?
-            undefined :
-            `translateX(${-100 + Math.min(100, state.currentProgress)}%)`;
-
-        const style = {
-            height,
-            [position] : 0,
-            bottom     : position === "bottom" ? 0 : "auto",
-            ...(transformValue ? { transform : transformValue } : {}),
-        };
-
-        const classes = [
-            className,
-            animateWhen ? "active" : "",
-            isIndeterminate ? "indeterminate" : "determinate",
-            state.isFading ? "fade-out" : "",
-        ].filter(Boolean).join(" ");
-
-
-        return (
-            <Element<LoadingBarElementType>
-                as="div"
-                data-loading-bar
-                ref={ref}
-                style={style}
-                className={classes}
-                {...props}
-            />
-        );
-    });
diff --git a/src/components/LoadingBar/index.tsx b/src/components/LoadingBar/index.tsx
deleted file mode 100644
index 1e74c326..00000000
--- a/src/components/LoadingBar/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { LoadingBar, type LoadingBarProps } from "./LoadingBar";
diff --git a/src/components/LoadingBar/loading-bar.css b/src/components/LoadingBar/loading-bar.css
deleted file mode 100644
index ff7a9c23..00000000
--- a/src/components/LoadingBar/loading-bar.css
+++ /dev/null
@@ -1,40 +0,0 @@
-[data-loading-bar] {
-    position: fixed;
-    left: 0;
-    width: 100%;
-    background: linear-gradient(
-            to right,
-            var(--hue),
-            var(--accent),
-            var(--shade)
-    );
-    background-size: 200% 100%;
-    z-index: 60000;
-    transform: translateX(-100%);
-    pointer-events: none;
-    opacity: 1;
-    /* Separate transitions for transform and opacity */
-    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Indeterminate mode */
-[data-loading-bar].indeterminate.active {
-    transform: translateX(0);
-    animation: loading-gradient 2s linear infinite;
-}
-
-/* Determinate mode */
-[data-loading-bar].determinate {
-    background: var(--hue);
-}
-
-/* Active state */
-[data-loading-bar].active {
-    opacity: 1;
-}
-
-/* Fade out animation - explicitly set longer duration for opacity */
-[data-loading-bar].fade-out {
-    /*opacity: 0;*/
-    transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
-}
diff --git a/src/components/Meter/Meter.tsx b/src/components/Meter/Meter.tsx
index 1804edcb..2756421e 100644
--- a/src/components/Meter/Meter.tsx
+++ b/src/components/Meter/Meter.tsx
@@ -13,11 +13,11 @@ import { CommonAndHTMLProps } from "../Element/constants";
 
 // prettier-ignore
 export interface MeterLabelCustomProps {
-    suffix ? : string;
+    suffix? : string;
 }
 
 // prettier-ignore
-export interface MeterCustomProps extends Omit<CommonAndHTMLProps<HTMLMeterElement>, 'value'> {
+export interface MeterCustomProps extends Omit<CommonAndHTMLProps<HTMLMeterElement>, "value"> {
     min                 : number;
     max                 : number;
     low                 : number;
@@ -36,32 +36,44 @@ export interface MeterCustomProps extends Omit<CommonAndHTMLProps<HTMLMeterEleme
 export type MeterElementType = HTMLMeterElement;
 export type MeterProps = MeterCustomProps;
 export type MeterMetaProps = Omit<CommonAndHTMLProps<HTMLDivElement>, keyof MeterLabelCustomProps> &
-    MeterLabelCustomProps;
+                             MeterLabelCustomProps;
 
 // COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////
 export const Meter = React.forwardRef(
     ({
-         label,
-         value,
-         height,
-         suffix,
-         showOptimumMarker,
-         ariaLabel,
-         description,
-         min,
-         max,
-         low,
-         high,
-         optimum,
-         ...props
-     }: MeterProps, ref: React.Ref<MeterElementType>) => {
+        label,
+        value,
+        height,
+        suffix,
+        showOptimumMarker,
+        ariaLabel,
+        description,
+        min,
+        max,
+        low,
+        high,
+        optimum,
+        ...props
+    } : MeterProps, ref : React.Ref<MeterElementType>) => {
         // CALCULATE OPTIMUM MARKER POSITION ===========================================================================
-        const optimumPositionPercent = optimum ? ((optimum - min) / (max - min)) * 100 : 0;
+        const optimumPositionPercent = optimum ? (
+            (
+                optimum - min
+            ) / (
+                max - min
+            )
+        ) * 100 : 0;
 
         // GENERATE DESCRIPTIVE STATUS STRING ==========================================================================
         const getValueDescription = () => {
-            const percentage = ((value - min) / (max - min)) * 100;
-            let status: string;
+            const percentage = (
+                (
+                    value - min
+                ) / (
+                    max - min
+                )
+            ) * 100;
+            let status : string;
 
             if (value <= low) {
                 status = "Low";
@@ -71,7 +83,7 @@ export const Meter = React.forwardRef(
                 status = "Normal";
             }
 
-            return `Current value is ${value}${suffix || ''} (${percentage.toFixed(1)}%). Status: ${status}`;
+            return `Current value is ${value}${suffix || ""} (${percentage.toFixed(1)}%). Status: ${status}`;
         };
 
         return (
@@ -83,7 +95,7 @@ export const Meter = React.forwardRef(
                     <Element<HTMLDivElement>
                         as="div"
                         data-meter-meta
-                        id={`meter-label-${label.toLowerCase().replace(/\s+/g, '-')}`}
+                        id={`meter-label-${label.toLowerCase().replace(/\s+/g, "-")}`}
                     >
                         <Text>{label}</Text>
                         <Text>
@@ -114,13 +126,14 @@ export const Meter = React.forwardRef(
                         aria-valuemax={max}
                         aria-valuenow={value}
                         aria-valuetext={getValueDescription()}
-                        aria-describedby={description ? `meter-description-${label?.toLowerCase().replace(/\s+/g, '-')}` : undefined}
+                        aria-describedby={description ? `meter-description-${label?.toLowerCase()
+                            .replace(/\s+/g, "-")}` : undefined}
                     />
 
                     {showOptimumMarker && optimum && (
                         <div
                             className="optimum-marker"
-                            style={{ left: `calc(${optimumPositionPercent}% - var(--meter-border-width))` }}
+                            style={{ left : `calc(${optimumPositionPercent}% - var(--meter-border-width))` }}
                             title={`Optimum: ${optimum}`}
                             role="presentation"
                             aria-hidden="true"
@@ -130,7 +143,7 @@ export const Meter = React.forwardRef(
 
                 {description && (
                     <div
-                        id={`meter-description-${label?.toLowerCase().replace(/\s+/g, '-')}`}
+                        id={`meter-description-${label?.toLowerCase().replace(/\s+/g, "-")}`}
                         className="sr-only"
                     >
                         {description}
@@ -138,5 +151,5 @@ export const Meter = React.forwardRef(
                 )}
             </div>
         );
-    }
+    },
 );
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 1f30d016..86dbc22a 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -81,9 +81,6 @@ export {
     type ListBoxProps
 } from "./Form";
 
-// LOADING BAR =========================================================================================================
-export { LoadingBar, type LoadingBarProps } from "./LoadingBar";
-
 // METER ===============================================================================================================
 export { Meter, type MeterProps, type MeterMetaProps } from "./Meter";
 
diff --git a/src/index.tsx b/src/index.tsx
index 5f2d2598..50c75b04 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -108,9 +108,6 @@ export {
     type ListBoxProps
 } from "./components/Form";
 
-// LOADING BAR =========================================================================================================
-export { LoadingBar, type LoadingBarProps } from "./components/LoadingBar";
-
 // METER ===============================================================================================================
 export { Meter, type MeterProps, type MeterMetaProps } from "./components/Meter";