@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/ui/Popover/Popover.types.d.ts

@@ -0,0 +1,204 @@
+/**
+ * Type definitions for the Popover component.
+ *
+ * Provides all prop interfaces, slot types, context types, and configuration
+ * for the animated popover system built on Base UI and Motion.
+ *
+ * @module @mks2508/mks-ui/react/ui/Popover/Popover.types
+ */
+import type * as React from 'react';
+import type { Popover as PopoverPrimitive } from '@base-ui/react/popover';
+import type { HTMLMotionProps } from 'motion/react';
+import type { SlotOverrides, IBaseConfig } from '../../../core/types';
+/**
+ * Visual regions available for class-name overrides via the `slots` prop.
+ *
+ * @example
+ * ```tsx
+ * <PopoverPopup slots={{ popup: 'rounded-xl shadow-xl', arrow: 'fill-popover' }} />
+ * ```
+ */
+export type PopoverSlot = 'root' | 'popup' | 'trigger' | 'positioner' | 'backdrop' | 'arrow' | 'title' | 'description' | 'close';
+/**
+ * Extended configuration for the Popover component.
+ * Inherits base animation settings and adds popover-specific options.
+ *
+ * @example
+ * ```typescript
+ * const config: IPopoverConfig = {
+ *   animation: { duration: 0.25, easing: 'ease-out' },
+ * };
+ * ```
+ */
+export interface IPopoverConfig extends IBaseConfig {
+}
+/**
+ * Internal context type shared between Popover sub-components.
+ * Tracks open state so AnimatePresence can coordinate enter/exit animations.
+ *
+ * @example
+ * ```tsx
+ * const { isOpen, setIsOpen } = usePopover();
+ * ```
+ */
+export type PopoverContextType = {
+    /** Whether the popover is currently open. */
+    isOpen: boolean;
+    /** Callback to change the open state. */
+    setIsOpen: IPopoverProps['onOpenChange'];
+};
+/**
+ * Props for the root `Popover` component.
+ * Wraps Base UI Popover.Root with controlled-state support and context provider.
+ *
+ * @example
+ * ```tsx
+ * <Popover open={isOpen} onOpenChange={setIsOpen}>
+ *   <PopoverTrigger>Toggle</PopoverTrigger>
+ *   <PopoverPortal>
+ *     <PopoverPositioner>
+ *       <PopoverPopup>Content here</PopoverPopup>
+ *     </PopoverPositioner>
+ *   </PopoverPortal>
+ * </Popover>
+ * ```
+ */
+export interface IPopoverProps extends React.ComponentProps<typeof PopoverPrimitive.Root> {
+    /** Style slot overrides for the root wrapper. */
+    slots?: SlotOverrides<PopoverSlot>;
+    /** Component configuration. */
+    config?: IPopoverConfig;
+}
+/**
+ * Props for the `PopoverTrigger` component.
+ * Renders the element that toggles the popover on interaction.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTrigger>
+ *   <Button>Show info</Button>
+ * </PopoverTrigger>
+ * ```
+ */
+export interface IPopoverTriggerProps extends React.ComponentProps<typeof PopoverPrimitive.Trigger> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<PopoverSlot>;
+}
+/**
+ * Props for the `PopoverPortal` component.
+ * Renders children into a React portal with AnimatePresence for exit animations.
+ * The `keepMounted` prop is handled internally and cannot be overridden.
+ *
+ * @example
+ * ```tsx
+ * <PopoverPortal>
+ *   <PopoverPositioner>
+ *     <PopoverPopup>...</PopoverPopup>
+ *   </PopoverPositioner>
+ * </PopoverPortal>
+ * ```
+ */
+export interface IPopoverPortalProps extends Omit<React.ComponentProps<typeof PopoverPrimitive.Portal>, 'keepMounted'> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<PopoverSlot>;
+}
+/**
+ * Props for the `PopoverPositioner` component.
+ * Handles automatic positioning relative to the trigger.
+ *
+ * @example
+ * ```tsx
+ * <PopoverPositioner sideOffset={8}>
+ *   <PopoverPopup>Content</PopoverPopup>
+ * </PopoverPositioner>
+ * ```
+ */
+export interface IPopoverPositionerProps extends React.ComponentProps<typeof PopoverPrimitive.Positioner> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<PopoverSlot>;
+}
+/**
+ * Props for the `PopoverPopup` component.
+ * The main content container with scale entrance animation.
+ * Accepts all HTMLMotionProps for full animation control.
+ *
+ * @example
+ * ```tsx
+ * <PopoverPopup className="p-4 rounded-lg">
+ *   <PopoverTitle>Info</PopoverTitle>
+ *   <PopoverDescription>Details here.</PopoverDescription>
+ * </PopoverPopup>
+ * ```
+ */
+export interface IPopoverPopupProps extends Omit<Omit<React.ComponentProps<typeof PopoverPrimitive.Popup>, 'render'>, keyof HTMLMotionProps<'div'>>, HTMLMotionProps<'div'> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<PopoverSlot>;
+}
+/**
+ * Props for the `PopoverBackdrop` component.
+ * Optional overlay rendered behind the popover.
+ *
+ * @example
+ * ```tsx
+ * <PopoverBackdrop className="bg-black/20" />
+ * ```
+ */
+export interface IPopoverBackdropProps extends React.ComponentProps<typeof PopoverPrimitive.Backdrop> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<PopoverSlot>;
+}
+/**
+ * Props for the `PopoverArrow` component.
+ * Renders a directional arrow pointing toward the trigger.
+ *
+ * @example
+ * ```tsx
+ * <PopoverArrow className="fill-popover" />
+ * ```
+ */
+export interface IPopoverArrowProps extends React.ComponentProps<typeof PopoverPrimitive.Arrow> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<PopoverSlot>;
+}
+/**
+ * Props for the `PopoverTitle` component.
+ * Renders the accessible title for the popover.
+ *
+ * @example
+ * ```tsx
+ * <PopoverTitle>Quick Info</PopoverTitle>
+ * ```
+ */
+export interface IPopoverTitleProps extends React.ComponentProps<typeof PopoverPrimitive.Title> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<PopoverSlot>;
+}
+/**
+ * Props for the `PopoverDescription` component.
+ * Renders the accessible description for the popover.
+ *
+ * @example
+ * ```tsx
+ * <PopoverDescription>Additional details about this item.</PopoverDescription>
+ * ```
+ */
+export interface IPopoverDescriptionProps extends React.ComponentProps<typeof PopoverPrimitive.Description> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<PopoverSlot>;
+}
+/**
+ * Props for the `PopoverClose` component.
+ * Renders a button that closes the popover when clicked.
+ *
+ * @example
+ * ```tsx
+ * <PopoverClose>
+ *   <button aria-label="Close">X</button>
+ * </PopoverClose>
+ * ```
+ */
+export interface IPopoverCloseProps extends React.ComponentProps<typeof PopoverPrimitive.Close> {
+    /** Style slot overrides. */
+    slots?: SlotOverrides<PopoverSlot>;
+}
+//# sourceMappingURL=Popover.types.d.ts.map

package/dist/react-ui/ui/Popover/Popover.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Popover/Popover.types.ts"],"names":[],"mappings":"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"}

package/dist/react-ui/ui/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Popover/index.tsx"],"names":[],"mappings":"AAyDA,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAMzB,QAAA,MAAwB,UAAU,0BACsB,CAAC;AAMzD;;;;;;;;;;;;GAYG;AACH,iBAAS,OAAO,CAAC,KAAK,EAAE,aAAa,2CAkBpC;AAMD;;;;;;;;;;;GAWG;AACH,iBAAS,cAAc,CAAC,EACtB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAQtB;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CActE;AAMD;;;;;;;;;;;GAWG;AACH,iBAAS,iBAAiB,CAAC,EACzB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAQzB;AAMD;;;;;;;;;;;;GAYG;AACH,iBAAS,YAAY,CAAC,EACpB,YAAY,EACZ,UAAU,EACV,KAAK,EACL,SAAS,EACT,UAA4D,EAC5D,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAmBpB;AAMD;;;;;;;;;GASG;AACH,iBAAS,eAAe,CAAC,EACvB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAQvB;AAMD;;;;;;;;;GASG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQvE;AAMD;;;;;;;;;GASG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQvE;AAMD;;;;;;;;;GASG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAQ1B;AAMD;;;;;;;;;;;GAWG;AACH,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAQvE;AAMD,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,YAAY,EACZ,UAAU,GACX,CAAC;AAGF,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,uBAAuB,EACvB,kBAAkB,EAClB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,wBAAwB,EACxB,kBAAkB,EAClB,kBAAkB,EAClB,WAAW,EACX,cAAc,GACf,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/react-ui/ui/Popover/index.js

@@ -0,0 +1,237 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { popoverStyles } from "./Popover.styles.js";
+import "react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+
+//#region src/react-ui/ui/Popover/index.tsx
+const [PopoverProvider, usePopover] = getStrictContext("PopoverContext");
+/**
+* Root Popover component.
+* Manages controlled/uncontrolled open state and provides context to children.
+*
+* @param props - Popover root props including `open`, `defaultOpen`, and `onOpenChange`
+*
+* @example
+* ```tsx
+* <Popover open={isOpen} onOpenChange={setIsOpen}>
+*   {children}
+* </Popover>
+* ```
+*/
+function Popover$1(props) {
+	const { slots, config: _config, ...rest } = props;
+	const [isOpen, setIsOpen] = useControlledState({
+		value: rest?.open,
+		defaultValue: rest?.defaultOpen,
+		onChange: rest?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(PopoverProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			"data-slot": "popover",
+			...rest,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+/**
+* Trigger element that toggles the popover on interaction.
+*
+* @param props - Trigger props forwarded to Base UI Popover.Trigger
+*
+* @example
+* ```tsx
+* <PopoverTrigger>
+*   <button>Show info</button>
+* </PopoverTrigger>
+* ```
+*/
+function PopoverTrigger({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-slot": "popover-trigger",
+		className: cn(popoverStyles.trigger, slots?.trigger, className),
+		...props
+	});
+}
+/**
+* Portal wrapper with AnimatePresence for coordinated enter/exit animations.
+* Internally sets `keepMounted` so motion exit animations play correctly.
+*
+* @param props - Portal props (without keepMounted)
+*
+* @example
+* ```tsx
+* <PopoverPortal>
+*   <PopoverPositioner>
+*     <PopoverPopup>...</PopoverPopup>
+*   </PopoverPositioner>
+* </PopoverPortal>
+* ```
+*/
+function PopoverPortal({ slots: _slots, ...props }) {
+	const { isOpen } = usePopover();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Popover.Portal, {
+		keepMounted: true,
+		"data-slot": "popover-portal",
+		...props
+	}) });
+}
+/**
+* Positioning wrapper that automatically places the popup relative to the trigger.
+*
+* @param props - Positioner props forwarded to Base UI Popover.Positioner
+*
+* @example
+* ```tsx
+* <PopoverPositioner sideOffset={8} align="start">
+*   <PopoverPopup>Content</PopoverPopup>
+* </PopoverPositioner>
+* ```
+*/
+function PopoverPositioner({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Positioner, {
+		"data-slot": "popover-positioner",
+		className: cn(popoverStyles.positioner, slots?.positioner, className),
+		...props
+	});
+}
+/**
+* Main popover content container with scale entrance animation.
+* Uses Motion for spring-based scale + opacity transitions.
+*
+* @param props - Popup props including motion transition overrides
+*
+* @example
+* ```tsx
+* <PopoverPopup slots={{ popup: 'rounded-xl shadow-xl' }}>
+*   <p>Popover content</p>
+* </PopoverPopup>
+* ```
+*/
+function PopoverPopup({ initialFocus, finalFocus, slots, className, transition = {
+	type: "spring",
+	stiffness: 300,
+	damping: 25
+}, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Popup, {
+		initialFocus,
+		finalFocus,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "popover-popup",
+			className: cn(popoverStyles.popup, slots?.popup, className),
+			initial: {
+				opacity: 0,
+				scale: .5
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: .5
+			},
+			transition,
+			...props
+		}, "popover-popup")
+	});
+}
+/**
+* Optional overlay backdrop behind the popover.
+*
+* @param props - Backdrop props forwarded to Base UI Popover.Backdrop
+*
+* @example
+* ```tsx
+* <PopoverBackdrop slots={{ backdrop: 'bg-black/20' }} />
+* ```
+*/
+function PopoverBackdrop({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Backdrop, {
+		"data-slot": "popover-backdrop",
+		className: cn(popoverStyles.backdrop, slots?.backdrop, className),
+		...props
+	});
+}
+/**
+* Directional arrow pointing toward the trigger element.
+*
+* @param props - Arrow props forwarded to Base UI Popover.Arrow
+*
+* @example
+* ```tsx
+* <PopoverArrow slots={{ arrow: 'fill-popover' }} />
+* ```
+*/
+function PopoverArrow({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Arrow, {
+		"data-slot": "popover-arrow",
+		className: cn(popoverStyles.arrow, slots?.arrow, className),
+		...props
+	});
+}
+/**
+* Accessible title for the popover.
+*
+* @param props - Title props forwarded to Base UI Popover.Title
+*
+* @example
+* ```tsx
+* <PopoverTitle>Quick Info</PopoverTitle>
+* ```
+*/
+function PopoverTitle({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-slot": "popover-title",
+		className: cn(popoverStyles.title, slots?.title, className),
+		...props
+	});
+}
+/**
+* Accessible description for the popover.
+*
+* @param props - Description props forwarded to Base UI Popover.Description
+*
+* @example
+* ```tsx
+* <PopoverDescription>Additional details about this item.</PopoverDescription>
+* ```
+*/
+function PopoverDescription({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-slot": "popover-description",
+		className: cn(popoverStyles.description, slots?.description, className),
+		...props
+	});
+}
+/**
+* Button that closes the popover when clicked.
+*
+* @param props - Close props forwarded to Base UI Popover.Close
+*
+* @example
+* ```tsx
+* <PopoverClose>
+*   <button>Dismiss</button>
+* </PopoverClose>
+* ```
+*/
+function PopoverClose({ slots, className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		"data-slot": "popover-close",
+		className: cn(popoverStyles.close, slots?.close, className),
+		...props
+	});
+}
+
+//#endregion
+export { Popover$1 as Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopover };

package/dist/react-ui/ui/Progress/Progress.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Progress/Progress.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAMnD,CAAC"}

package/dist/react-ui/ui/Progress/Progress.styles.js

@@ -0,0 +1,30 @@
+//#region src/react-ui/ui/Progress/Progress.styles.ts
+/**
+* Default style slots for the Progress component.
+* Each key maps to a visual region with its base Tailwind classes.
+*
+* - `root` - The outer container with flex column layout
+* - `track` - The background track with rounded shape and overflow hidden
+* - `indicator` - The filled bar that animates to current percentage
+* - `label` - Optional descriptive label text
+* - `value` - Optional animated numeric value
+*
+* @example
+* ```typescript
+* import { progressStyles } from './Progress.styles';
+*
+* // Access the track slot classes
+* const trackClasses = progressStyles.track;
+* // 'relative h-2 w-full overflow-hidden rounded-full bg-secondary'
+* ```
+*/
+const progressStyles = {
+	root: "flex flex-col gap-2",
+	track: "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
+	indicator: "h-full bg-primary rounded-full",
+	label: "text-sm font-medium leading-none",
+	value: "text-sm tabular-nums text-muted-foreground"
+};
+
+//#endregion
+export { progressStyles };

package/dist/react-ui/ui/Progress/Progress.types.d.ts

@@ -0,0 +1,148 @@
+/**
+ * Type definitions for the Progress component.
+ *
+ * @module @mks2508/mks-ui/react/ui/Progress/Progress.types
+ */
+import type { Progress as ProgressPrimitives } from '@base-ui/react/progress';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+import type { ICountingNumberProps } from '../../../react-ui/primitives/CountingNumber';
+/**
+ * Available style slot names for the Progress component.
+ * Each slot maps to a visual region that can be customized via the `slots` prop.
+ *
+ * - `root` - The outer progress container
+ * - `track` - The background track bar
+ * - `indicator` - The filled indicator bar that animates to the current value
+ * - `label` - Optional label text (e.g., "Uploading...")
+ * - `value` - Optional animated numeric value display
+ *
+ * @example
+ * ```tsx
+ * <Progress
+ *   value={75}
+ *   slots={{
+ *     root: 'w-full',
+ *     track: 'h-3 bg-zinc-800 rounded-full',
+ *     indicator: 'bg-cyan-500 rounded-full',
+ *     label: 'text-sm text-zinc-400',
+ *     value: 'text-sm font-mono',
+ *   }}
+ * />
+ * ```
+ */
+export type ProgressSlot = 'root' | 'track' | 'indicator' | 'label' | 'value';
+/**
+ * Internal context type for Progress state management.
+ * Shared between the Progress root and its child components via React context.
+ */
+export type ProgressContextType = {
+    /** Current progress value (0-100). */
+    value: number;
+};
+/**
+ * Configuration options for Progress behavior and animation.
+ * Extends the base config with progress-specific settings.
+ *
+ * @example
+ * ```tsx
+ * <Progress
+ *   value={75}
+ *   config={{ animation: { duration: 0.5 }, springStiffness: 120 }}
+ * />
+ * ```
+ */
+export interface IProgressConfig extends IBaseConfig {
+    /**
+     * Spring stiffness for the indicator animation.
+     * @defaultValue 100
+     */
+    springStiffness?: number;
+    /**
+     * Spring damping for the indicator animation.
+     * @defaultValue 30
+     */
+    springDamping?: number;
+}
+/**
+ * Props for the Progress root component.
+ * Wraps Base UI Progress.Root with context provider, slot overrides, and configuration.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={75} slots={{ root: 'flex flex-col gap-2' }}>
+ *   <ProgressLabel>Uploading...</ProgressLabel>
+ *   <ProgressTrack>
+ *     <ProgressIndicator />
+ *   </ProgressTrack>
+ *   <ProgressValue />
+ * </Progress>
+ * ```
+ */
+export type IProgressProps = React.ComponentProps<typeof ProgressPrimitives.Root> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+    /** Behavioral and animation configuration. */
+    config?: IProgressConfig;
+};
+/**
+ * Props for the ProgressIndicator sub-component.
+ * Uses `motion.create` for spring-animated width transitions.
+ *
+ * @example
+ * ```tsx
+ * <ProgressIndicator className="h-full rounded-full" />
+ * ```
+ */
+export type IProgressIndicatorProps = React.ComponentProps<typeof ProgressPrimitives.Indicator> & React.ComponentProps<'div'> & {
+    /** Spring transition config for the indicator animation. */
+    transition?: {
+        type?: 'spring' | 'tween' | 'keyframes' | 'decay' | 'inertia';
+        stiffness?: number;
+        damping?: number;
+        [key: string]: unknown;
+    };
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+};
+/**
+ * Props for the ProgressTrack sub-component.
+ * Wraps Base UI Progress.Track with slot overrides.
+ *
+ * @example
+ * ```tsx
+ * <ProgressTrack className="h-2 rounded-full overflow-hidden">
+ *   <ProgressIndicator />
+ * </ProgressTrack>
+ * ```
+ */
+export type IProgressTrackProps = React.ComponentProps<typeof ProgressPrimitives.Track> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+};
+/**
+ * Props for the ProgressLabel sub-component.
+ * Wraps Base UI Progress.Label with slot overrides.
+ *
+ * @example
+ * ```tsx
+ * <ProgressLabel>Uploading files...</ProgressLabel>
+ * ```
+ */
+export type IProgressLabelProps = React.ComponentProps<typeof ProgressPrimitives.Label> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+};
+/**
+ * Props for the ProgressValue sub-component.
+ * Combines Base UI Progress.Value with CountingNumber for animated numeric display.
+ *
+ * @example
+ * ```tsx
+ * <ProgressValue transition={{ stiffness: 80, damping: 20 }} />
+ * ```
+ */
+export type IProgressValueProps = Omit<React.ComponentProps<typeof ProgressPrimitives.Value>, 'render'> & Omit<ICountingNumberProps, 'number'> & {
+    /** Partial class overrides for each visual slot. */
+    slots?: SlotOverrides<ProgressSlot>;
+};
+//# sourceMappingURL=Progress.types.d.ts.map

package/dist/react-ui/ui/Progress/Progress.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Progress/Progress.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,QAAQ,IAAI,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAEjF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9E;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,eAAgB,SAAQ,WAAW;IAClD;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,GAAG;IAClF,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IACpC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,SAAS,CAAC,GAC7F,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,4DAA4D;IAC5D,UAAU,CAAC,EAAE;QACX,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;QAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;IACF,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEJ;;;;;;;;;;GAUG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACxF,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACxF,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,KAAK,CAAC,EACrD,QAAQ,CACT,GACC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC,GAAG;IACrC,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC,CAAC"}

package/dist/react-ui/ui/Progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Progress/index.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EACV,mBAAmB,EACnB,cAAc,EACd,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,kBAAkB,CAAC;AAE1B,QAAA,MAAyB,WAAW,2BACsB,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAUhF;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,iBAAiB,CAAC,EACzB,UAA4D,EAC5D,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAYzB;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAQzE;AAED;;;;;;;;;;;;GAYG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAQzE;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,aAAa,CAAC,EACrB,UAA2C,EAC3C,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAgBrB;AAED,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,aAAa,EACb,WAAW,GACZ,CAAC;AAGF,YAAY,EACV,cAAc,EACd,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,mBAAmB,EACnB,YAAY,GACb,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}