@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/core/Pagination/Pagination.theme.js

@@ -15,7 +15,7 @@ const paginationTheme = {
         // Base state - dark
         "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)] dark:border-transparent " +
         // Hover state - light
-        "hover:text-[var(--color-text-primary)] hover:bg-neutral-50 hover:border-[var(--color-border)] " +
+        "hover:text-[var(--color-text-primary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)] " +
         // Hover state - dark
         "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] dark:hover:border-[var(--color-neutral-600)] " +
         // Active state - light
@@ -26,8 +26,8 @@ const paginationTheme = {
         "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
     // Unified item sizes
     itemSizes: {
-        sm: "size-8 min-w-[2rem] text-sm",
-        md: "size-10 min-w-[2.5rem] text-sm",
+        sm: "size-8 min-w-[2rem] text-base",
+        md: "size-10 min-w-[2.5rem] text-base",
     },
     // Ellipsis styles
     ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)] cursor-default pointer-events-none",

package/dist/components/core/Pill/Pill.theme.js

@@ -27,9 +27,9 @@ const pillTheme = {
      * Size variants
      */
     sizes: {
-        sm: "text-xs px-2 py-0.5 gap-0.5",
-        md: "text-sm px-2.5 py-1 gap-1",
-        lg: "text-sm px-3 py-1 gap-1.5",
+        sm: "text-sm px-2 py-0.5 gap-0.5",
+        md: "text-base px-2 py-0.5 gap-1",
+        lg: "text-base px-3 py-1 gap-1.5",
     },
     /**
      * Icon sizes for iconStart and CheckIcon

package/dist/components/core/Popover/Popover.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { PopoverRootProps as PopoverProps } from "./Popover.types";
 export declare const Popover: (({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, darkMode, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
-    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
-    Content: React.ForwardRefExoticComponent<import("./Popover.types").PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    Body: React.ForwardRefExoticComponent<import("./Popover.types").PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
 };

package/dist/components/core/Popover/Popover.js

@@ -3,7 +3,7 @@ import { useId, useState, useRef, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { PopoverContext } from './PopoverContext.js';
 import { PopoverTrigger } from './PopoverTrigger.js';
-import { PopoverContent } from './PopoverContent.js';
+import { PopoverBody } from './PopoverBody.js';
 import { popoverTheme } from './Popover.theme.js';
 
 /**
@@ -16,9 +16,9 @@ import { popoverTheme } from './Popover.theme.js';
  *   <Popover.Trigger>
  *     <Button>Open Popover</Button>
  *   </Popover.Trigger>
- *   <Popover.Content>
+ *   <Popover.Body>
  *     <div>Popover content</div>
- *   </Popover.Content>
+ *   </Popover.Body>
  * </Popover>
  * ```
  */
@@ -61,12 +61,12 @@ const PopoverRoot = ({ children, className, isOpen: controlledIsOpen, defaultIsO
         theme,
         contentId,
     };
-    return (jsx(PopoverContext.Provider, { value: contextValue, children: jsx("div", { className: cn("popover", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false", ...props, children: children }) }));
+    return (jsx(PopoverContext.Provider, { value: contextValue, children: jsx("div", { className: cn("popover contents", darkMode && "dark", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false", ...props, children: children }) }));
 };
 // Export as a unified component
 const Popover = Object.assign(PopoverRoot, {
     Trigger: PopoverTrigger,
-    Content: PopoverContent,
+    Body: PopoverBody,
 });
 
 export { Popover };

package/dist/components/core/Popover/Popover.theme.d.ts

@@ -3,7 +3,7 @@
  */
 export interface PopoverTheme {
     baseStyle: string;
-    contentStyle: string;
+    bodyStyle: string;
 }
 /**
  * Default theme for the Popover component

package/dist/components/core/Popover/Popover.theme.js

@@ -4,8 +4,8 @@
 const popoverTheme = {
     // Base styles for the popover
     baseStyle: "z-50 outline-none",
-    // Content styles
-    contentStyle: "bg-[var(--color-white)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-sm dark:bg-[var(--color-background-secondary)] ",
+    // Body styles
+    bodyStyle: "bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-4 max-w-[min(24rem,calc(100vw-2rem))] dark:bg-[var(--color-background-secondary)] ",
 };
 
 export { popoverTheme };

package/dist/components/core/Popover/Popover.types.d.ts

@@ -44,10 +44,16 @@ export interface PopoverTriggerProps {
     className?: string;
     [key: string]: unknown;
 }
-export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PopoverBodyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     animation?: boolean;
     portal?: boolean;
+    /** Enable scroll support with viewport-aware max-height. Uses available
+     *  space computed by the positioning hook, falling back to 400px. */
+    scrollable?: boolean;
+    /** Custom max-height when scrollable is true (e.g. "300px", "20rem").
+     *  Overrides the default viewport-aware height. */
+    maxHeight?: string;
 }
 /**
  * Theme overrides for the Popover component
@@ -55,6 +61,6 @@ export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement
 export interface PopoverThemeOverrides {
     /** Base style for the popover */
     baseStyle?: string;
-    /** Content style for the popover */
-    contentStyle?: string;
+    /** Body style for the popover */
+    bodyStyle?: string;
 }

package/dist/components/core/Popover/PopoverBody.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PopoverBodyProps } from "./Popover.types";
+/**
+ * PopoverBody component displays the body/content of the popover
+ */
+declare const PopoverBody: React.ForwardRefExoticComponent<PopoverBodyProps & React.RefAttributes<HTMLDivElement>>;
+export { PopoverBody };

package/dist/components/core/Popover/{PopoverContent.js → PopoverBody.js}

@@ -48,26 +48,32 @@ const useDarkMode = () => {
     return isDark;
 };
 /**
- * PopoverContent component displays the content of the popover
+ * PopoverBody component displays the body/content of the popover
  */
-const PopoverContent = React__default.forwardRef(({ children, className, animation = true, portal = true, ...props }, ref) => {
+const PopoverBody = React__default.forwardRef(({ children, className, animation = true, portal = true, scrollable = false, maxHeight, ...props }, ref) => {
     const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId, } = usePopoverContext();
     const shouldReduceMotion = useReducedMotion();
     const localRef = useRef(null);
     // Use the same positioning hook as Select/Tooltip (now supports all 12 placements)
-    const { position, cssVariables, contentRef: portalContentRef } = useSelectPortal({
+    const { position, cssVariables, contentRef: portalContentRef, isReady, } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 8,
         autoWidth: true,
+        onClose: () => {
+            if (!preventClose)
+                onOpenChange(false);
+        },
+        stickyTracking: true,
     });
     // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
     useClickOutside(localRef, (e) => {
         var _a;
         if (hasBackdrop)
             return; // Overlay handles click-outside via backdrop
-        if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+        if (e.target === triggerRef.current ||
+            ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             return;
         }
         if (closeOnClickOutside && !preventClose) {
@@ -100,37 +106,48 @@ const PopoverContent = React__default.forwardRef(({ children, className, animati
         if (contentRef) {
             contentRef.current = el;
         }
-        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
-            portalContentRef.current = el;
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current =
+                el;
         }
     }, [ref, contentRef, portalContentRef]);
     const isDarkMode = useDarkMode();
     const isClient = useIsClient();
     // Extract DOM props to avoid type conflicts with Framer Motion
     const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...domProps } = props;
-    const contentClasses = cn(theme.baseStyle, theme.contentStyle, "popover-content", className);
+    const contentClasses = cn(theme.baseStyle, theme.bodyStyle, "popover-content", scrollable && "overflow-y-auto", className);
     const contentPositionStyle = {
         ...cssVariables,
         position: "fixed",
         top: `${position.top}px`,
         left: `${position.left}px`,
+        ...(scrollable && {
+            maxHeight: maxHeight || "var(--select-content-available-height, 400px)",
+        }),
     };
     // When hasBackdrop is true, delegate backdrop + escape + click-outside to Overlay
     if (hasBackdrop) {
         return (jsx(Overlay, { ref: handleRef, isOpen: isOpen, onClose: () => {
                 if (!preventClose)
                     onOpenChange(false);
-            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: false, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion
-                ? { overlay: overlayBackdropAnimations, content: overlayContentAnimations }
+            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: true, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion && isReady
+                ? {
+                    overlay: overlayBackdropAnimations,
+                    content: overlayContentAnimations,
+                }
                 : undefined, children: jsx("div", { id: contentId, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, ...domProps, children: children }) }));
     }
     // Without backdrop: manual portal + positioning + escape + click-outside
-    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation ? { duration: 0 } : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
+    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : (isReady ? "visible" : "hidden"), exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation
+                ? { duration: 0 }
+                : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
     if (portal && isClient) {
         return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
     }
     return popoverContent;
 });
-PopoverContent.displayName = "PopoverContent";
+PopoverBody.displayName = "Popover.Body";
 
-export { PopoverContent };
+export { PopoverBody };

package/dist/components/core/Popover/PopoverTrigger.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { PopoverTriggerProps } from "./Popover.types";
-export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/core/Popover/PopoverTrigger.js

@@ -5,6 +5,7 @@ import { usePopoverContext } from './PopoverContext.js';
 const PopoverTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
     var _a;
     const context = usePopoverContext();
+    const childElement = children;
     // Create trigger events based on triggerType
     const getTriggerEvents = () => {
         if (context.triggerType === "click") {
@@ -14,7 +15,7 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                     e.preventDefault();
                     context.onOpenChange(!context.isOpen);
                     // Call the original onClick if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
             };
         }
@@ -24,7 +25,7 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                     var _a, _b;
                     context.onOpenChange(true);
                     // Call the original onMouseEnter if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
                 onMouseLeave: (e) => {
                     var _a, _b;
@@ -32,43 +33,42 @@ const PopoverTrigger = React__default.forwardRef(({ children, className, ...prop
                         context.onOpenChange(false);
                     }
                     // Call the original onMouseLeave if it exists
-                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                    (_b = (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
                 },
             };
         }
         return {};
     };
     // Merge refs for the trigger element
-    function setRef(node) {
+    function mergeRefs(node) {
         context.triggerRef.current = node;
         if (ref) {
             if (typeof ref === "function")
                 ref(node);
-            else if (typeof ref === "object")
+            else if (typeof ref === "object" && ref)
                 ref.current = node;
         }
-        const childRef = children.ref;
+        const childRef = childElement.ref;
         if (childRef) {
             if (typeof childRef === "function")
                 childRef(node);
-            else if (typeof childRef === "object")
+            else if (typeof childRef === "object" && childRef)
                 childRef.current = node;
         }
     }
     const triggerEvents = getTriggerEvents();
-    const childElement = children;
     return React__default.cloneElement(childElement, {
-        ref: setRef,
+        ref: mergeRefs,
         "aria-expanded": context.isOpen,
         "aria-haspopup": true,
         "aria-controls": context.contentId,
-        className: cn((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className, "popover-trigger"),
+        className: cn("popover-trigger", (_a = childElement.props) === null || _a === void 0 ? void 0 : _a.className, className),
         "data-state": context.isOpen ? "open" : "closed",
         "data-trigger-type": context.triggerType,
         ...triggerEvents,
         ...props,
     });
 });
-PopoverTrigger.displayName = "PopoverTrigger";
+PopoverTrigger.displayName = "Popover.Trigger";
 
 export { PopoverTrigger };

package/dist/components/core/Popover/index.d.ts

@@ -1,5 +1,6 @@
 import { Popover } from './Popover';
 import { PopoverContext, usePopoverContext } from './PopoverContext';
-import { PopoverRootProps as PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides } from './Popover.types';
-export { Popover, PopoverContext, usePopoverContext };
-export type { PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides };
+import { PopoverRootProps as PopoverProps, PopoverBodyProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides } from './Popover.types';
+import { PopoverBody } from './PopoverBody';
+export { Popover, PopoverBody, PopoverContext, usePopoverContext };
+export type { PopoverProps, PopoverBodyProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides };

package/dist/components/core/Progress/Progress.d.ts

@@ -6,23 +6,24 @@ import { ProgressProps } from "./Progress.types";
  * Features:
  * - Determinate mode: Shows specific progress value (0-100)
  * - Indeterminate mode: Animated loading state when value is undefined
- * - Multiple sizes and semantic colors
+ * - Multiple sizes with default primary color
+ * - className controls the fill bar color (the primary styling target)
+ * - wrapperClassName controls the outer container
  * - Flexible label positioning (right, top, bottom, inside)
  * - Respects reduced motion preferences
- * - Full className override support
  *
  * @example
- * // Determinate progress
- * <Progress value={60} color="primary" />
+ * // Default (primary color)
+ * <Progress value={60} />
+ *
+ * // Custom fill color via className
+ * <Progress value={70} className="bg-[var(--color-success)]" />
  *
  * // With label
  * <Progress value={75} showLabel labelPosition="right" />
  *
  * // Indeterminate (loading)
- * <Progress color="primary" />
- *
- * // Custom label format
- * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ * <Progress />
  */
 declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
 export { Progress };

package/dist/components/core/Progress/Progress.js

@@ -16,25 +16,26 @@ const PROGRESS_SPRING_TRANSITION = {
  * Features:
  * - Determinate mode: Shows specific progress value (0-100)
  * - Indeterminate mode: Animated loading state when value is undefined
- * - Multiple sizes and semantic colors
+ * - Multiple sizes with default primary color
+ * - className controls the fill bar color (the primary styling target)
+ * - wrapperClassName controls the outer container
  * - Flexible label positioning (right, top, bottom, inside)
  * - Respects reduced motion preferences
- * - Full className override support
  *
  * @example
- * // Determinate progress
- * <Progress value={60} color="primary" />
+ * // Default (primary color)
+ * <Progress value={60} />
+ *
+ * // Custom fill color via className
+ * <Progress value={70} className="bg-[var(--color-success)]" />
  *
  * // With label
  * <Progress value={75} showLabel labelPosition="right" />
  *
  * // Indeterminate (loading)
- * <Progress color="primary" />
- *
- * // Custom label format
- * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ * <Progress />
  */
-const Progress = React__default.forwardRef(({ value, size = "md", color = "primary", showLabel = false, labelPosition = "right", formatLabel, animated = true, trackClassName, fillClassName, className, theme: customTheme, ...props }, ref) => {
+const Progress = React__default.forwardRef(({ value, size = "md", showLabel = false, labelPosition = "right", formatLabel, animated = true, wrapperClassName, className, theme: customTheme, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     // Merge custom theme with default theme
     const theme = useMemo(() => {
@@ -44,7 +45,6 @@ const Progress = React__default.forwardRef(({ value, size = "md", color = "prima
             ...progressTheme,
             ...customTheme,
             sizes: { ...progressTheme.sizes, ...customTheme.sizes },
-            colors: { ...progressTheme.colors, ...customTheme.colors },
         };
     }, [customTheme]);
     // Calculate percentage (clamped to 0-100)
@@ -71,7 +71,7 @@ const Progress = React__default.forwardRef(({ value, size = "md", color = "prima
             case "top":
                 return "flex flex-col gap-1.5";
             case "bottom":
-                return "flex flex-col-reverse gap-1.5";
+                return "flex flex-col gap-1.5";
             case "right":
                 return "flex items-center gap-3";
             case "inside":
@@ -95,14 +95,14 @@ const Progress = React__default.forwardRef(({ value, size = "md", color = "prima
                 : ""), children: label }));
     };
     // Track element with optional fill
-    const renderTrack = () => (jsxs("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", trackClassName), children: [isIndeterminate ? (
+    const renderTrack = () => (jsxs("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", wrapperClassName), children: [isIndeterminate ? (
             // Indeterminate animation
-            jsx("div", { className: cn(theme.fillStyle, theme.colors[color], "w-1/3", theme.indeterminateStyle, fillClassName) })) : shouldAnimate ? (
+            jsx("div", { className: cn(theme.fillStyle, "absolute", theme.indeterminateStyle, className) })) : shouldAnimate ? (
             // Animated determinate progress with spring animation
-            jsx(motion.div, { className: cn(theme.fillStyle, theme.colors[color], fillClassName), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: PROGRESS_SPRING_TRANSITION })) : (
+            jsx(motion.div, { className: cn(theme.fillStyle, className), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: PROGRESS_SPRING_TRANSITION })) : (
             // Static determinate progress
-            jsx("div", { className: cn(theme.fillStyle, theme.colors[color], fillClassName), style: { width: `${percentage}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
-    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": isIndeterminate ? "Loading" : `${percentage}% complete`, ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
+            jsx("div", { className: cn(theme.fillStyle, className), style: { width: `${percentage}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": isIndeterminate ? "Loading" : `${percentage}% complete`, ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
 });
 Progress.displayName = "Progress";
 

package/dist/components/core/Progress/Progress.theme.js

@@ -6,28 +6,20 @@ const progressTheme = {
     containerStyle: "w-full",
     // Track (background) styles
     trackStyle: "relative w-full rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
-    // Fill (progress bar) styles
-    fillStyle: "h-full rounded-full",
+    // Fill (progress bar) styles — includes default primary color
+    fillStyle: "h-full rounded-full bg-[var(--color-primary)]",
     // Label text styles
-    labelStyle: "text-sm font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
+    labelStyle: "text-base font-semibold text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
     // Inside label styles (when label is positioned inside the bar)
-    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-white tabular-nums",
+    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-sm font-medium text-[var(--color-primary-contrast)] tabular-nums",
     // Size variants for track height
     sizes: {
         sm: "h-1.5",
         md: "h-2.5",
         lg: "h-4",
     },
-    // Color variants for the fill
-    colors: {
-        neutral: "bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-500)]",
-        primary: "bg-[var(--color-primary)] dark:bg-[var(--color-primary-400)]",
-        success: "bg-[var(--color-success)] dark:bg-[var(--color-success-400)]",
-        warning: "bg-[var(--color-warning)] dark:bg-[var(--color-warning-400)]",
-        danger: "bg-[var(--color-danger)] dark:bg-[var(--color-danger-400)]",
-    },
     // Indeterminate animation styles
-    indeterminateStyle: "animate-[progress-indeterminate_1.5s_ease-in-out_infinite]",
+    indeterminateStyle: "animate-[progress-indeterminate_1.8s_linear_infinite]",
 };
 
 export { progressTheme };

package/dist/components/core/Progress/Progress.types.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 export type ProgressSize = "sm" | "md" | "lg";
-export type ProgressColor = "neutral" | "primary" | "success" | "warning" | "danger";
 export type ProgressLabelPosition = "right" | "top" | "bottom" | "inside";
 /**
  * Theme configuration for Progress component
@@ -18,8 +17,6 @@ export interface ProgressTheme {
     insideLabelStyle: string;
     /** Size variants for the track height */
     sizes: Record<ProgressSize, string>;
-    /** Color variants for the fill */
-    colors: Record<ProgressColor, string>;
     /** Indeterminate animation styles */
     indeterminateStyle: string;
 }
@@ -33,7 +30,6 @@ export interface ProgressThemeOverrides {
     labelStyle?: string;
     insideLabelStyle?: string;
     sizes?: Partial<Record<ProgressSize, string>>;
-    colors?: Partial<Record<ProgressColor, string>>;
     indeterminateStyle?: string;
 }
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
@@ -47,11 +43,6 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * @default 'md'
      */
     size?: ProgressSize;
-    /**
-     * The semantic color of the progress bar
-     * @default 'primary'
-     */
-    color?: ProgressColor;
     /**
      * Whether to show the percentage label
      * @default false
@@ -74,17 +65,9 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      */
     animated?: boolean;
     /**
-     * Additional class name for the track (background) element
-     */
-    trackClassName?: string;
-    /**
-     * Additional class name for the fill (progress) element
-     */
-    fillClassName?: string;
-    /**
-     * Additional class name for the container
+     * Additional class name for the outer container/track wrapper
      */
-    className?: string;
+    wrapperClassName?: string;
     /**
      * Component-level theme overrides
      */

package/dist/components/core/Progress/index.d.ts

@@ -1,2 +1,2 @@
 export { Progress } from "./Progress";
-export type { ProgressProps, ProgressSize, ProgressColor, ProgressLabelPosition, ProgressThemeOverrides, } from "./Progress.types";
+export type { ProgressProps, ProgressSize, ProgressLabelPosition, ProgressThemeOverrides, } from "./Progress.types";