@mks2508/mks-ui 0.1.3 → 0.2.0

package/dist/react/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/Popover/Popover.types.d.ts.map

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

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

@@ -0,0 +1,133 @@
+import type { PopoverContextType, IPopoverProps, IPopoverTriggerProps, IPopoverPortalProps, IPopoverPositionerProps, IPopoverPopupProps, IPopoverBackdropProps, IPopoverArrowProps, IPopoverTitleProps, IPopoverDescriptionProps, IPopoverCloseProps } from './Popover.types';
+declare const usePopover: () => PopoverContextType;
+/**
+ * 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>
+ * ```
+ */
+declare function Popover(props: IPopoverProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function PopoverTrigger({ slots, className, ...props }: IPopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function PopoverPortal({ slots: _slots, ...props }: IPopoverPortalProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function PopoverPositioner({ slots, className, ...props }: IPopoverPositionerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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>
+ * ```
+ */
+declare function PopoverPopup({ initialFocus, finalFocus, slots, className, transition, ...props }: IPopoverPopupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Optional overlay backdrop behind the popover.
+ *
+ * @param props - Backdrop props forwarded to Base UI Popover.Backdrop
+ *
+ * @example
+ * ```tsx
+ * <PopoverBackdrop slots={{ backdrop: 'bg-black/20' }} />
+ * ```
+ */
+declare function PopoverBackdrop({ slots, className, ...props }: IPopoverBackdropProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Directional arrow pointing toward the trigger element.
+ *
+ * @param props - Arrow props forwarded to Base UI Popover.Arrow
+ *
+ * @example
+ * ```tsx
+ * <PopoverArrow slots={{ arrow: 'fill-popover' }} />
+ * ```
+ */
+declare function PopoverArrow({ slots, className, ...props }: IPopoverArrowProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accessible title for the popover.
+ *
+ * @param props - Title props forwarded to Base UI Popover.Title
+ *
+ * @example
+ * ```tsx
+ * <PopoverTitle>Quick Info</PopoverTitle>
+ * ```
+ */
+declare function PopoverTitle({ slots, className, ...props }: IPopoverTitleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Accessible description for the popover.
+ *
+ * @param props - Description props forwarded to Base UI Popover.Description
+ *
+ * @example
+ * ```tsx
+ * <PopoverDescription>Additional details about this item.</PopoverDescription>
+ * ```
+ */
+declare function PopoverDescription({ slots, className, ...props }: IPopoverDescriptionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Button that closes the popover when clicked.
+ *
+ * @param props - Close props forwarded to Base UI Popover.Close
+ *
+ * @example
+ * ```tsx
+ * <PopoverClose>
+ *   <button>Dismiss</button>
+ * </PopoverClose>
+ * ```
+ */
+declare function PopoverClose({ slots, className, ...props }: IPopoverCloseProps): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverPortal, PopoverPositioner, PopoverPopup, PopoverBackdrop, PopoverArrow, PopoverTitle, PopoverDescription, PopoverClose, usePopover, };
+export type { IPopoverProps, IPopoverTriggerProps, IPopoverPortalProps, IPopoverPositionerProps, IPopoverPopupProps, IPopoverBackdropProps, IPopoverArrowProps, IPopoverTitleProps, IPopoverDescriptionProps, IPopoverCloseProps, PopoverContextType, PopoverSlot, IPopoverConfig, } from './Popover.types';
+export { popoverStyles } from './Popover.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/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/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/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/Progress/Progress.styles.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Style slots and CVA variants for the Progress component.
+ *
+ * @module @mks2508/mks-ui/react/ui/Progress/Progress.styles
+ */
+import type { StyleSlots } from '../../../core/types';
+import type { ProgressSlot } from './Progress.types';
+/**
+ * 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'
+ * ```
+ */
+export declare const progressStyles: StyleSlots<ProgressSlot>;
+//# sourceMappingURL=Progress.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/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/Progress/Progress.styles.js

@@ -0,0 +1,30 @@
+//#region src/react/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 };