@od-oneapp/uni-ui 2026.1.1301

package/dist/pagination-controls-CE3-eCxI.mjs

@@ -0,0 +1,135 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE } from "./motion-zelaDelJ.mjs";
+import { t as Button } from "./button-DVOrrZLw.mjs";
+import * as React$1 from "react";
+import { memo, useCallback } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/elements/molecules/pagination-controls/pagination-controls.tsx
+/**
+* @fileoverview PaginationControls Component - Premium Harmony V2
+*
+* A compact pagination component providing "Previous" and "Next" controls.
+* Built with Premium Harmony V2 motion standards for tactile feedback and accessibility.
+* Supports automatic touch optimization and respects reduced motion preferences.
+*
+* Features:
+* - ES2023 syntax with modern pattern usage
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Premium Harmony V2 spring physics (SPRING_TACTILE)
+* - Touch detection with automatic sizing for mobile devices
+* - Reduced motion support for accessibility
+* - Complete pseudo-state coverage (:hover, :active, :focus-visible)
+* - Standardized focus ring using ring-primary token
+* - WCAG 2.5.5 compliant 44px minimum touch targets on mobile
+* - Data attributes for state tracking (data-page, data-active)
+* - Semantic button elements with accessibility labels
+* - [Pillar 4: Micro-moments] Refined button hover/tap micro-interactions
+*
+* @module @od-oneapp/uni-ui/components/elements/pagination-controls
+* @component PaginationControls
+*
+* @useCases
+* - Multi-page forms: Navigate between sequential steps
+* - Simple list navigation: Move through paginated data without page numbers
+* - Gallery browsing: Move to previous or next image/media item
+* - Article series: Navigate between parts of a long-form article
+* - Wizard workflows: Sequential navigation through task-based flows
+* - Mobile-first pagination: Space-efficient controls for small screens
+*
+* @example <PaginationControls currentPage={1} totalPages={10} onPageChange={setPage} />
+*/
+const PAGINATION_PREVIOUS_LABEL = "Previous";
+const PAGINATION_NEXT_LABEL = "Next";
+const PaginationControls = memo(function PaginationControls({ disabled = false, className, ...props }) {
+	const isTouchDevice = useMediaQuery("(pointer: coarse)") ?? false;
+	const prefersReducedMotion = useReducedMotion();
+	const { currentPage, totalPages, onPageChange } = React$1.useMemo(() => {
+		if ("pagination" in props) {
+			const totalPagesCalculated = Math.max(1, Math.ceil(props.totalCount / props.pagination.pageSize));
+			return {
+				currentPage: props.pagination.pageIndex + 1,
+				totalPages: totalPagesCalculated,
+				onPageChange: (page) => {
+					props.setPagination((prev) => ({
+						...prev,
+						pageIndex: page - 1
+					}));
+				}
+			};
+		}
+		return {
+			currentPage: props.currentPage,
+			totalPages: props.totalPages,
+			onPageChange: props.onPageChange
+		};
+	}, [props]);
+	const isFirstPage = currentPage <= 1;
+	const isLastPage = currentPage >= totalPages;
+	const handlePrevious = useCallback(() => {
+		if (!isFirstPage && !disabled) onPageChange(currentPage - 1);
+	}, [
+		currentPage,
+		isFirstPage,
+		onPageChange,
+		disabled
+	]);
+	const handleNext = useCallback(() => {
+		if (!isLastPage && !disabled) onPageChange(currentPage + 1);
+	}, [
+		currentPage,
+		isLastPage,
+		onPageChange,
+		disabled
+	]);
+	const buttonSize = isTouchDevice ? "lg" : "default";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "pagination-controls",
+		className: cn("flex items-center justify-between gap-4 py-4", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-1 items-center justify-start",
+			children: /* @__PURE__ */ jsx(motion.div, {
+				whileHover: !isFirstPage && !prefersReducedMotion ? { scale: 1.02 } : void 0,
+				whileTap: !isFirstPage && !prefersReducedMotion ? { scale: .98 } : void 0,
+				transition: prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: buttonSize,
+					onClick: handlePrevious,
+					disabled: isFirstPage || disabled,
+					"data-page": "previous",
+					"data-active": !isFirstPage,
+					className: "focus-visible:ring-primary transition-all duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+					children: PAGINATION_PREVIOUS_LABEL
+				})
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-1 items-center justify-end",
+			children: /* @__PURE__ */ jsx(motion.div, {
+				whileHover: !isLastPage && !prefersReducedMotion ? { scale: 1.02 } : void 0,
+				whileTap: !isLastPage && !prefersReducedMotion ? { scale: .98 } : void 0,
+				transition: prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE,
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					size: buttonSize,
+					onClick: handleNext,
+					disabled: isLastPage || disabled,
+					"data-page": "next",
+					"data-active": !isLastPage,
+					className: "focus-visible:ring-primary transition-all duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
+					children: PAGINATION_NEXT_LABEL
+				})
+			})
+		})]
+	});
+});
+PaginationControls.displayName = "PaginationControls";
+
+//#endregion
+export { PaginationControls as t };
+//# sourceMappingURL=pagination-controls-CE3-eCxI.mjs.map

package/dist/pagination-controls-CE3-eCxI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-controls-CE3-eCxI.mjs","names":["React"],"sources":["../src/components/elements/molecules/pagination-controls/pagination-controls.tsx"],"sourcesContent":["/**\n * @fileoverview PaginationControls Component - Premium Harmony V2\n *\n * A compact pagination component providing \"Previous\" and \"Next\" controls.\n * Built with Premium Harmony V2 motion standards for tactile feedback and accessibility.\n * Supports automatic touch optimization and respects reduced motion preferences.\n *\n * Features:\n * - ES2023 syntax with modern pattern usage\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Premium Harmony V2 spring physics (SPRING_TACTILE)\n * - Touch detection with automatic sizing for mobile devices\n * - Reduced motion support for accessibility\n * - Complete pseudo-state coverage (:hover, :active, :focus-visible)\n * - Standardized focus ring using ring-primary token\n * - WCAG 2.5.5 compliant 44px minimum touch targets on mobile\n * - Data attributes for state tracking (data-page, data-active)\n * - Semantic button elements with accessibility labels\n * - [Pillar 4: Micro-moments] Refined button hover/tap micro-interactions\n *\n * @module @od-oneapp/uni-ui/components/elements/pagination-controls\n * @component PaginationControls\n *\n * @useCases\n * - Multi-page forms: Navigate between sequential steps\n * - Simple list navigation: Move through paginated data without page numbers\n * - Gallery browsing: Move to previous or next image/media item\n * - Article series: Navigate between parts of a long-form article\n * - Wizard workflows: Sequential navigation through task-based flows\n * - Mobile-first pagination: Space-efficient controls for small screens\n *\n * @example <PaginationControls currentPage={1} totalPages={10} onPageChange={setPage} />\n */\n\n'use client';\n\nimport * as React from 'react';\nimport { memo, useCallback } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { motion } from 'motion/react';\n\nimport { SPRING_TACTILE } from '../../../../constants/motion';\nimport { cn } from '../../../../lib/utils';\nimport { Button } from '../../atoms/button';\n\n// Static constants - moved outside component to prevent recreation\nconst PAGINATION_PREVIOUS_LABEL = 'Previous';\nconst PAGINATION_NEXT_LABEL = 'Next';\n\nexport interface PaginationControlsProps {\n  /** The current active page (1-based) */\n  currentPage: number;\n  /** The total number of pages */\n  totalPages: number;\n  /** Callback function called when the page changes */\n  onPageChange: (page: number) => void;\n  /** Additional class names for the container */\n  className?: string;\n  /** Whether the controls are disabled */\n  disabled?: boolean;\n}\n\ntype LegacyPaginationState = { pageIndex: number; pageSize: number };\n\ntype LegacyPaginationProps = {\n  pagination: LegacyPaginationState;\n  setPagination: React.Dispatch<React.SetStateAction<LegacyPaginationState>>;\n  totalCount: number;\n  unit?: (isPlural: boolean) => string;\n  className?: string;\n  disabled?: boolean;\n};\n\nexport const PaginationControls = memo(function PaginationControls({\n  disabled = false,\n  className,\n  ...props\n}: PaginationControlsProps | LegacyPaginationProps) {\n  // Premium Harmony V2: Detect touch devices for adaptive sizing\n  const isTouchDevice = useMediaQuery('(pointer: coarse)') ?? false;\n  // Premium Harmony V2: Respect user motion preferences\n  const prefersReducedMotion = useReducedMotion();\n\n  const { currentPage, totalPages, onPageChange } = React.useMemo(() => {\n    if ('pagination' in props) {\n      const totalPagesCalculated = Math.max(\n        1,\n        Math.ceil(props.totalCount / props.pagination.pageSize),\n      );\n      return {\n        currentPage: props.pagination.pageIndex + 1,\n        totalPages: totalPagesCalculated,\n        onPageChange: (page: number) => {\n          props.setPagination(prev => ({ ...prev, pageIndex: page - 1 }));\n        },\n      };\n    }\n    return {\n      currentPage: props.currentPage,\n      totalPages: props.totalPages,\n      onPageChange: props.onPageChange,\n    };\n  }, [props]);\n\n  const isFirstPage = currentPage <= 1;\n  const isLastPage = currentPage >= totalPages;\n\n  const handlePrevious = useCallback(() => {\n    if (!isFirstPage && !disabled) {\n      onPageChange(currentPage - 1);\n    }\n  }, [currentPage, isFirstPage, onPageChange, disabled]);\n\n  const handleNext = useCallback(() => {\n    if (!isLastPage && !disabled) {\n      onPageChange(currentPage + 1);\n    }\n  }, [currentPage, isLastPage, onPageChange, disabled]);\n\n  // Premium Harmony V2: Adaptive button size for touch devices\n  const buttonSize = isTouchDevice ? 'lg' : 'default';\n\n  return (\n    <div\n      data-slot=\"pagination-controls\"\n      className={cn('flex items-center justify-between gap-4 py-4', className)}\n    >\n      <div className=\"flex flex-1 items-center justify-start\">\n        <motion.div\n          whileHover={!isFirstPage && !prefersReducedMotion ? { scale: 1.02 } : undefined}\n          whileTap={!isFirstPage && !prefersReducedMotion ? { scale: 0.98 } : undefined}\n          transition={prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE}\n        >\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size={buttonSize}\n            onClick={handlePrevious}\n            disabled={isFirstPage || disabled}\n            data-page=\"previous\"\n            data-active={!isFirstPage}\n            className=\"focus-visible:ring-primary transition-all duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\"\n          >\n            {PAGINATION_PREVIOUS_LABEL}\n          </Button>\n        </motion.div>\n      </div>\n\n      <div className=\"flex flex-1 items-center justify-end\">\n        <motion.div\n          whileHover={!isLastPage && !prefersReducedMotion ? { scale: 1.02 } : undefined}\n          whileTap={!isLastPage && !prefersReducedMotion ? { scale: 0.98 } : undefined}\n          transition={prefersReducedMotion ? { duration: 0 } : SPRING_TACTILE}\n        >\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size={buttonSize}\n            onClick={handleNext}\n            disabled={isLastPage || disabled}\n            data-page=\"next\"\n            data-active={!isLastPage}\n            className=\"focus-visible:ring-primary transition-all duration-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none\"\n          >\n            {PAGINATION_NEXT_LABEL}\n          </Button>\n        </motion.div>\n      </div>\n    </div>\n  );\n});\n\nPaginationControls.displayName = 'PaginationControls';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,4BAA4B;AAClC,MAAM,wBAAwB;AA0B9B,MAAa,qBAAqB,KAAK,SAAS,mBAAmB,EACjE,WAAW,OACX,WACA,GAAG,SAC+C;CAElD,MAAM,gBAAgB,cAAc,oBAAoB,IAAI;CAE5D,MAAM,uBAAuB,kBAAkB;CAE/C,MAAM,EAAE,aAAa,YAAY,iBAAiBA,QAAM,cAAc;AACpE,MAAI,gBAAgB,OAAO;GACzB,MAAM,uBAAuB,KAAK,IAChC,GACA,KAAK,KAAK,MAAM,aAAa,MAAM,WAAW,SAAS,CACxD;AACD,UAAO;IACL,aAAa,MAAM,WAAW,YAAY;IAC1C,YAAY;IACZ,eAAe,SAAiB;AAC9B,WAAM,eAAc,UAAS;MAAE,GAAG;MAAM,WAAW,OAAO;MAAG,EAAE;;IAElE;;AAEH,SAAO;GACL,aAAa,MAAM;GACnB,YAAY,MAAM;GAClB,cAAc,MAAM;GACrB;IACA,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,eAAe;CACnC,MAAM,aAAa,eAAe;CAElC,MAAM,iBAAiB,kBAAkB;AACvC,MAAI,CAAC,eAAe,CAAC,SACnB,cAAa,cAAc,EAAE;IAE9B;EAAC;EAAa;EAAa;EAAc;EAAS,CAAC;CAEtD,MAAM,aAAa,kBAAkB;AACnC,MAAI,CAAC,cAAc,CAAC,SAClB,cAAa,cAAc,EAAE;IAE9B;EAAC;EAAa;EAAY;EAAc;EAAS,CAAC;CAGrD,MAAM,aAAa,gBAAgB,OAAO;AAE1C,QACE,qBAAC;EACC,aAAU;EACV,WAAW,GAAG,gDAAgD,UAAU;aAExE,oBAAC;GAAI,WAAU;aACb,oBAAC,OAAO;IACN,YAAY,CAAC,eAAe,CAAC,uBAAuB,EAAE,OAAO,MAAM,GAAG;IACtE,UAAU,CAAC,eAAe,CAAC,uBAAuB,EAAE,OAAO,KAAM,GAAG;IACpE,YAAY,uBAAuB,EAAE,UAAU,GAAG,GAAG;cAErD,oBAAC;KACC,MAAK;KACL,SAAQ;KACR,MAAM;KACN,SAAS;KACT,UAAU,eAAe;KACzB,aAAU;KACV,eAAa,CAAC;KACd,WAAU;eAET;MACM;KACE;IACT,EAEN,oBAAC;GAAI,WAAU;aACb,oBAAC,OAAO;IACN,YAAY,CAAC,cAAc,CAAC,uBAAuB,EAAE,OAAO,MAAM,GAAG;IACrE,UAAU,CAAC,cAAc,CAAC,uBAAuB,EAAE,OAAO,KAAM,GAAG;IACnE,YAAY,uBAAuB,EAAE,UAAU,GAAG,GAAG;cAErD,oBAAC;KACC,MAAK;KACL,SAAQ;KACR,MAAM;KACN,SAAS;KACT,UAAU,cAAc;KACxB,aAAU;KACV,eAAa,CAAC;KACd,WAAU;eAET;MACM;KACE;IACT;GACF;EAER;AAEF,mBAAmB,cAAc"}

package/dist/popover-DmWxl2lW.mjs

@@ -0,0 +1,198 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { useResponsive } from "./hooks/use-responsive.mjs";
+import { i as SPRING_GENTLE } from "./motion-zelaDelJ.mjs";
+import { n as ErrorBoundary } from "./error-boundary-Ggc5btkU.mjs";
+import { isValidElement, memo, useCallback, useMemo } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+import { Drawer } from "vaul";
+
+//#region src/components/elements/organisms/popover/popover.tsx
+/**
+* @fileoverview Popover Component - Premium Harmony V2
+*
+* Responsive popover that shows as a drawer on mobile and a floating popover on desktop.
+* Built with Floating UI for intelligent positioning and Vaul Drawer for mobile gestures.
+*
+* Features:
+* - Premium Harmony V2 spring physics animations (SPRING_GENTLE)
+* - Motion/React for smooth, performant animations
+* - Reduced motion support with useReducedMotion
+* - Touch device detection with useMediaQuery
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Super light/dark mode with seamless switching
+* - Responsive: Drawer on mobile, Floating UI popover on desktop
+* - Floating UI for intelligent positioning
+* - Auto-flip and shift for viewport collision
+* - Vaul Drawer for mobile swipe gestures
+* - Toast dismissal prevention (Sonner integration)
+* - Configurable alignment and side offset
+* - ErrorBoundary wrapper for resilience
+* - Data attributes for state management (data-state)
+* - Semantic color tokens (no hardcoded colors)
+* - Focus-visible ring styles for interactive elements
+* - AnimatePresence for conditional rendering
+*
+* @module @od-oneapp/uni-ui/components/popover
+* @component Popover
+*
+* @useCases
+* - Display contextual menus, tooltips, or dropdown content near trigger elements
+* - Show additional information or actions without navigating away from current view
+* - Provide quick access to settings, filters, or form inputs in a floating panel
+* - Adapt presentation based on device: drawer on mobile, floating popover on desktop
+* - Display user profile cards, notification previews, or quick-access shortcuts
+* - Support intelligent positioning with auto-flip and collision detection
+* - Integrate with toast systems without dismissal conflicts (Sonner integration)
+* - Enable mobile-friendly interactions with swipe-to-dismiss drawer gestures
+*
+* @subcomponents
+* - Drawer.Root - Root container for mobile drawer mode (from vaul)
+* - Drawer.Trigger - Trigger element for mobile drawer
+* - Drawer.Portal - Portal for drawer rendering
+* - Drawer.Overlay - Backdrop overlay for drawer
+* - Drawer.Content - Content container for drawer
+*
+* @example
+* // Basic usage with controlled state
+* <Popover openPopover={isOpen} setOpenPopover={setIsOpen} content={<MenuItems />}>
+*   <Button>Open Menu</Button>
+* </Popover>
+*
+* @example
+* // With positioning options
+* <Popover openPopover={open} setOpenPopover={setOpen} content={<Settings />} side="top" align="end" sideOffset={12}>
+*   <IconButton icon="settings" />
+* </Popover>
+*/
+const POPOVER_DRAWER_TRIGGER_CLASSNAME = "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:hidden";
+const POPOVER_DRAWER_OVERLAY_CLASSNAME = "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm";
+const POPOVER_DRAWER_CONTENT_CLASSNAME = "border-border bg-background fixed right-0 bottom-0 left-0 z-50 mt-24 rounded-t-xl border-t";
+const POPOVER_DRAWER_ISLAND_CONTAINER_CLASSNAME = "sticky top-0 z-20 flex w-full items-center justify-center rounded-t-xl bg-inherit";
+const POPOVER_DRAWER_ISLAND_BAR_CLASSNAME = "bg-border my-3 h-1 w-12 rounded-full";
+const POPOVER_DRAWER_CONTENT_INNER_CLASSNAME = "bg-background flex min-h-[150px] w-full items-center justify-center overflow-hidden pb-8 align-middle shadow-xl";
+const POPOVER_DESKTOP_TRIGGER_CLASSNAME = "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:inline-flex";
+const POPOVER_DESKTOP_CONTENT_BASE_CLASSNAME = "border-border bg-popover z-50 items-center rounded-lg border shadow-lg sm:block";
+const SONNER_TOAST_SELECTOR = "[data-sonner-toast]";
+const DEFAULT_SIDE_OFFSET = 8;
+/**
+* Render a responsive popover that uses a bottom drawer on mobile and a floating popover on desktop.
+*/
+const Popover = memo(function Popover({ children, content, align = "center", side = "bottom", openPopover, setOpenPopover, mobileOnly, popoverContentClassName, onOpenAutoFocus, collisionBoundary, sticky: _sticky, onEscapeKeyDown, onWheel, sideOffset = DEFAULT_SIDE_OFFSET }) {
+	const { isMobile } = useResponsive();
+	useMediaQuery("(pointer: coarse)");
+	const shouldReduceMotion = useReducedMotion() ?? false;
+	const shouldShowDrawer = useMemo(() => mobileOnly ?? isMobile, [mobileOnly, isMobile]);
+	const handlePointerDownOutside = useCallback((event) => {
+		if (event.detail.originalEvent.target instanceof Element && event.detail.originalEvent.target.closest(SONNER_TOAST_SELECTOR)) event.detail.originalEvent.preventDefault();
+	}, []);
+	const { refs, floatingStyles, context } = useFloating({
+		open: openPopover,
+		onOpenChange: setOpenPopover,
+		placement: useMemo(() => {
+			if (align === "center") return side;
+			return `${side}-${align}`;
+		}, [side, align]),
+		middleware: [
+			offset(sideOffset),
+			flip({
+				fallbackAxisSideDirection: "end",
+				boundary: collisionBoundary
+			}),
+			shift({
+				padding: 8,
+				boundary: collisionBoundary
+			})
+		],
+		whileElementsMounted: autoUpdate
+	});
+	const { getReferenceProps, getFloatingProps } = useInteractions([
+		useClick(context),
+		useDismiss(context, {
+			outsidePress: (event) => {
+				if (event.target instanceof Element && event.target.closest(SONNER_TOAST_SELECTOR)) return false;
+				return true;
+			},
+			escapeKey: true
+		}),
+		useRole(context)
+	]);
+	const desktopContentClassName = useMemo(() => cn(POPOVER_DESKTOP_CONTENT_BASE_CLASSNAME, popoverContentClassName), [popoverContentClassName]);
+	if (shouldShowDrawer) return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs(Drawer.Root, {
+		open: openPopover,
+		onOpenChange: setOpenPopover,
+		children: [/* @__PURE__ */ jsx(Drawer.Trigger, {
+			className: POPOVER_DRAWER_TRIGGER_CLASSNAME,
+			asChild: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: POPOVER_DRAWER_TRIGGER_CLASSNAME,
+				children
+			})
+		}), /* @__PURE__ */ jsxs(Drawer.Portal, { children: [/* @__PURE__ */ jsx(Drawer.Overlay, { className: POPOVER_DRAWER_OVERLAY_CLASSNAME }), /* @__PURE__ */ jsxs(Drawer.Content, {
+			className: POPOVER_DRAWER_CONTENT_CLASSNAME,
+			onEscapeKeyDown,
+			onPointerDownOutside: handlePointerDownOutside,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: POPOVER_DRAWER_ISLAND_CONTAINER_CLASSNAME,
+				children: /* @__PURE__ */ jsx("div", { className: POPOVER_DRAWER_ISLAND_BAR_CLASSNAME })
+			}), /* @__PURE__ */ jsx("div", {
+				className: POPOVER_DRAWER_CONTENT_INNER_CLASSNAME,
+				children: content
+			})]
+		})] })]
+	}) });
+	return /* @__PURE__ */ jsxs(ErrorBoundary, { children: [/* @__PURE__ */ jsx("div", {
+		ref: refs.setReference,
+		className: cn(POPOVER_DESKTOP_TRIGGER_CLASSNAME, isValidElement(children) && children.props.className),
+		...getReferenceProps(),
+		children
+	}), /* @__PURE__ */ jsx(AnimatePresence, { children: openPopover ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+		context,
+		modal: false,
+		initialFocus: onOpenAutoFocus ? -1 : 0,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			ref: refs.setFloating,
+			"data-slot": "popover-content",
+			"data-side": side,
+			"data-align": align,
+			"data-state": openPopover ? "open" : "closed",
+			className: desktopContentClassName,
+			initial: shouldReduceMotion ? {
+				opacity: 1,
+				scale: 1,
+				y: 0
+			} : {
+				opacity: 0,
+				scale: .95,
+				y: -4
+			},
+			animate: {
+				opacity: 1,
+				scale: 1,
+				y: 0
+			},
+			exit: shouldReduceMotion ? {
+				opacity: 1,
+				scale: 1,
+				y: 0
+			} : {
+				opacity: 0,
+				scale: .95,
+				y: -4
+			},
+			transition: shouldReduceMotion ? { duration: 0 } : SPRING_GENTLE,
+			style: { ...floatingStyles },
+			onWheel,
+			...getFloatingProps(),
+			children: content
+		})
+	}) }) : null })] });
+});
+
+//#endregion
+export { Popover as t };
+//# sourceMappingURL=popover-DmWxl2lW.mjs.map

package/dist/popover-DmWxl2lW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-DmWxl2lW.mjs","names":[],"sources":["../src/components/elements/organisms/popover/popover.tsx"],"sourcesContent":["'use client';\n\n/**\n * @fileoverview Popover Component - Premium Harmony V2\n *\n * Responsive popover that shows as a drawer on mobile and a floating popover on desktop.\n * Built with Floating UI for intelligent positioning and Vaul Drawer for mobile gestures.\n *\n * Features:\n * - Premium Harmony V2 spring physics animations (SPRING_GENTLE)\n * - Motion/React for smooth, performant animations\n * - Reduced motion support with useReducedMotion\n * - Touch device detection with useMediaQuery\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Super light/dark mode with seamless switching\n * - Responsive: Drawer on mobile, Floating UI popover on desktop\n * - Floating UI for intelligent positioning\n * - Auto-flip and shift for viewport collision\n * - Vaul Drawer for mobile swipe gestures\n * - Toast dismissal prevention (Sonner integration)\n * - Configurable alignment and side offset\n * - ErrorBoundary wrapper for resilience\n * - Data attributes for state management (data-state)\n * - Semantic color tokens (no hardcoded colors)\n * - Focus-visible ring styles for interactive elements\n * - AnimatePresence for conditional rendering\n *\n * @module @od-oneapp/uni-ui/components/popover\n * @component Popover\n *\n * @useCases\n * - Display contextual menus, tooltips, or dropdown content near trigger elements\n * - Show additional information or actions without navigating away from current view\n * - Provide quick access to settings, filters, or form inputs in a floating panel\n * - Adapt presentation based on device: drawer on mobile, floating popover on desktop\n * - Display user profile cards, notification previews, or quick-access shortcuts\n * - Support intelligent positioning with auto-flip and collision detection\n * - Integrate with toast systems without dismissal conflicts (Sonner integration)\n * - Enable mobile-friendly interactions with swipe-to-dismiss drawer gestures\n *\n * @subcomponents\n * - Drawer.Root - Root container for mobile drawer mode (from vaul)\n * - Drawer.Trigger - Trigger element for mobile drawer\n * - Drawer.Portal - Portal for drawer rendering\n * - Drawer.Overlay - Backdrop overlay for drawer\n * - Drawer.Content - Content container for drawer\n *\n * @example\n * // Basic usage with controlled state\n * <Popover openPopover={isOpen} setOpenPopover={setIsOpen} content={<MenuItems />}>\n *   <Button>Open Menu</Button>\n * </Popover>\n *\n * @example\n * // With positioning options\n * <Popover openPopover={open} setOpenPopover={setOpen} content={<Settings />} side=\"top\" align=\"end\" sideOffset={12}>\n *   <IconButton icon=\"settings\" />\n * </Popover>\n */\n\nimport {\n  isValidElement,\n  memo,\n  useCallback,\n  useMemo,\n  type PropsWithChildren,\n  type ReactNode,\n  type WheelEventHandler,\n} from 'react';\n\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useRole,\n  type Placement,\n} from '@floating-ui/react';\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { Drawer } from 'vaul';\n\nimport { useResponsive } from '../../../../hooks/use-responsive';\nimport { cn } from '../../../../lib/utils';\nimport { SPRING_GENTLE } from '../../../ai-elements/ai-elements.constants';\nimport { ErrorBoundary } from '../error-boundary';\n\n// Static classNames - moved outside component to prevent recreation\nconst POPOVER_DRAWER_TRIGGER_CLASSNAME =\n  'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:hidden';\nconst POPOVER_DRAWER_OVERLAY_CLASSNAME = 'fixed inset-0 z-50 bg-black/50 backdrop-blur-sm';\nconst POPOVER_DRAWER_CONTENT_CLASSNAME =\n  'border-border bg-background fixed right-0 bottom-0 left-0 z-50 mt-24 rounded-t-xl border-t';\nconst POPOVER_DRAWER_ISLAND_CONTAINER_CLASSNAME =\n  'sticky top-0 z-20 flex w-full items-center justify-center rounded-t-xl bg-inherit';\nconst POPOVER_DRAWER_ISLAND_BAR_CLASSNAME = 'bg-border my-3 h-1 w-12 rounded-full';\nconst POPOVER_DRAWER_CONTENT_INNER_CLASSNAME =\n  'bg-background flex min-h-[150px] w-full items-center justify-center overflow-hidden pb-8 align-middle shadow-xl';\nconst POPOVER_DESKTOP_TRIGGER_CLASSNAME =\n  'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none sm:inline-flex';\nconst POPOVER_DESKTOP_CONTENT_BASE_CLASSNAME =\n  'border-border bg-popover z-50 items-center rounded-lg border shadow-lg sm:block';\n\n// Static strings - moved outside component to prevent recreation\nconst SONNER_TOAST_SELECTOR = '[data-sonner-toast]';\nconst DEFAULT_SIDE_OFFSET = 8;\n\nexport interface PopoverProps extends PropsWithChildren {\n  /**\n   * Trigger element(s) for the popover.\n   * Must be an interactive element or component that accepts and forwards a `className` prop\n   * (e.g., a Button component or DOM button element) to ensure proper focus styling.\n   */\n  children: ReactNode;\n  content: ReactNode | string;\n  align?: 'center' | 'start' | 'end';\n  side?: 'bottom' | 'top' | 'left' | 'right';\n  openPopover: boolean;\n  setOpenPopover: (open: boolean) => void;\n  mobileOnly?: boolean;\n  popoverContentClassName?: string;\n  onOpenAutoFocus?: (event: Event) => void;\n  collisionBoundary?: Element | Element[];\n  sticky?: 'partial' | 'always';\n  onEscapeKeyDown?: (event: KeyboardEvent) => void;\n  onWheel?: WheelEventHandler;\n  sideOffset?: number;\n}\n\n/**\n * Render a responsive popover that uses a bottom drawer on mobile and a floating popover on desktop.\n */\nexport const Popover = memo(function Popover({\n  children,\n  content,\n  align = 'center',\n  side = 'bottom',\n  openPopover,\n  setOpenPopover,\n  mobileOnly,\n  popoverContentClassName,\n  onOpenAutoFocus,\n  collisionBoundary,\n  sticky: _sticky,\n  onEscapeKeyDown,\n  onWheel,\n  sideOffset = DEFAULT_SIDE_OFFSET,\n}: PopoverProps) {\n  const { isMobile } = useResponsive();\n  // Premium Harmony V2: Touch detection and reduced motion\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n  const shouldReduceMotion = useReducedMotion() ?? false;\n\n  // Memoize mobile drawer condition to prevent unnecessary re-computation\n  const shouldShowDrawer = useMemo(() => mobileOnly ?? isMobile, [mobileOnly, isMobile]);\n\n  // Memoize pointer down handler to prevent unnecessary re-renders\n  const handlePointerDownOutside = useCallback(\n    (event: CustomEvent<{ originalEvent: PointerEvent }>) => {\n      // Prevent dismissal when clicking inside a toast\n      if (\n        event.detail.originalEvent.target instanceof Element &&\n        event.detail.originalEvent.target.closest(SONNER_TOAST_SELECTOR)\n      ) {\n        event.detail.originalEvent.preventDefault();\n      }\n    },\n    [],\n  );\n\n  // Convert side + align to Floating UI placement\n  const placement = useMemo((): Placement => {\n    if (align === 'center') return side;\n    return `${side}-${align}` as Placement;\n  }, [side, align]);\n\n  // Floating UI setup\n  const { refs, floatingStyles, context } = useFloating({\n    open: openPopover,\n    onOpenChange: setOpenPopover,\n    placement,\n    middleware: [\n      offset(sideOffset),\n      flip({\n        fallbackAxisSideDirection: 'end',\n        boundary: collisionBoundary,\n      }),\n      shift({ padding: 8, boundary: collisionBoundary }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context, {\n    outsidePress: event => {\n      // Prevent dismissal when clicking inside a toast\n      if (event.target instanceof Element && event.target.closest(SONNER_TOAST_SELECTOR)) {\n        return false;\n      }\n      return true;\n    },\n    escapeKey: true,\n  });\n  const role = useRole(context);\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss, role]);\n\n  // Memoize desktop content className\n  const desktopContentClassName = useMemo(\n    () => cn(POPOVER_DESKTOP_CONTENT_BASE_CLASSNAME, popoverContentClassName),\n    [popoverContentClassName],\n  );\n\n  if (shouldShowDrawer) {\n    return (\n      <ErrorBoundary>\n        <Drawer.Root open={openPopover} onOpenChange={setOpenPopover}>\n          <Drawer.Trigger className={POPOVER_DRAWER_TRIGGER_CLASSNAME} asChild>\n            <div className={POPOVER_DRAWER_TRIGGER_CLASSNAME}>{children}</div>\n          </Drawer.Trigger>\n          <Drawer.Portal>\n            <Drawer.Overlay className={POPOVER_DRAWER_OVERLAY_CLASSNAME} />\n            <Drawer.Content\n              className={POPOVER_DRAWER_CONTENT_CLASSNAME}\n              onEscapeKeyDown={onEscapeKeyDown}\n              onPointerDownOutside={handlePointerDownOutside}\n            >\n              <div className={POPOVER_DRAWER_ISLAND_CONTAINER_CLASSNAME}>\n                <div className={POPOVER_DRAWER_ISLAND_BAR_CLASSNAME} />\n              </div>\n              <div className={POPOVER_DRAWER_CONTENT_INNER_CLASSNAME}>{content}</div>\n            </Drawer.Content>\n          </Drawer.Portal>\n        </Drawer.Root>\n      </ErrorBoundary>\n    );\n  }\n\n  // Desktop popover with Floating UI\n  return (\n    <ErrorBoundary>\n      <div\n        ref={refs.setReference}\n        className={cn(\n          POPOVER_DESKTOP_TRIGGER_CLASSNAME,\n          isValidElement(children) && (children as React.ReactElement<any>).props.className,\n        )}\n        {...getReferenceProps()}\n      >\n        {children}\n      </div>\n\n      {/* Content */}\n      <AnimatePresence>\n        {openPopover ? (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              initialFocus={onOpenAutoFocus ? -1 : 0}\n            >\n              <motion.div\n                ref={refs.setFloating}\n                data-slot=\"popover-content\"\n                data-side={side}\n                data-align={align}\n                data-state={openPopover ? 'open' : 'closed'}\n                className={desktopContentClassName}\n                initial={\n                  shouldReduceMotion\n                    ? { opacity: 1, scale: 1, y: 0 }\n                    : { opacity: 0, scale: 0.95, y: -4 }\n                }\n                animate={{ opacity: 1, scale: 1, y: 0 }}\n                exit={\n                  shouldReduceMotion\n                    ? { opacity: 1, scale: 1, y: 0 }\n                    : { opacity: 0, scale: 0.95, y: -4 }\n                }\n                transition={shouldReduceMotion ? { duration: 0 } : SPRING_GENTLE}\n                style={{\n                  ...floatingStyles,\n                }}\n                onWheel={onWheel}\n                {...getFloatingProps()}\n              >\n                {content}\n              </motion.div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        ) : null}\n      </AnimatePresence>\n    </ErrorBoundary>\n  );\n});\n"],"mappings":"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"}

package/dist/preview.d.mts

@@ -0,0 +1,6 @@
+
+//#region storybook/preview.d.ts
+declare const _default: any;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=preview.d.mts.map

package/dist/progress-BWxdthl4.mjs

@@ -0,0 +1,230 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE, i as SPRING_GENTLE, r as SPRING_FLUID } from "./motion-zelaDelJ.mjs";
+import { forwardRef, memo, useMemo } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/elements/atoms/progress/progress.tsx
+/**
+* @fileoverview Progress Component - Premium Harmony V2
+*
+* A progress bar component with size and color variants for visual feedback.
+* Built with native HTML elements and ARIA attributes for accessibility.
+*
+* Features:
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Premium Harmony V2 spring physics for smooth animations
+* - Touch detection with automatic sizing for mobile devices
+* - Reduced motion support for accessibility
+* - Multiple size and color variants with light/dark mode support
+* - Full accessibility support (ARIA progressbar)
+* - Indeterminate state with fluid animation
+* - WCAG 2.5.5 compliant touch targets for interactive progress bars
+* - Data attributes for state management (data-state, data-loading)
+* - Enhanced focus styles for keyboard navigation
+*
+* @module @od-oneapp/uni-ui/components/elements/atoms/progress
+*
+* @component Progress
+*
+* @useCases
+* - File upload progress with percentage display
+* - Task completion through multi-step workflows
+* - Loading indicators with indeterminate state
+* - Download progress with animated fill
+* - Profile completion gamification elements
+* - Data processing with visual feedback
+* - Achievement tracking and goal visualization
+*
+* @variants
+* - size: xs, sm, default, lg, xl, touch
+* - variant: default, success, warning, destructive
+*
+* @example <Progress value={60} />
+*
+* @example <Progress value={80} size="lg" variant="success" />
+*
+* @example <Progress indeterminate />
+*/
+/**
+* Progress track variant definitions using CVA
+*
+* Base styles include:
+* - Rounded full shape
+* - Overflow hidden for indicator
+* - Relative positioning for indicator
+* - Focus styles for keyboard navigation (when interactive)
+*/
+const progressVariants = cva([
+	"relative w-full overflow-hidden",
+	"rounded-full",
+	"bg-primary/20",
+	"dark:bg-primary/15",
+	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+], {
+	variants: {
+		size: {
+			xs: "h-0.5",
+			sm: "h-1",
+			default: "h-2",
+			lg: "h-3",
+			xl: "h-4",
+			touch: "h-11"
+		},
+		variant: {
+			default: "bg-primary/20 dark:bg-primary/15",
+			success: "bg-success/20 dark:bg-success/15",
+			warning: "bg-warning/20 dark:bg-warning/15",
+			destructive: "bg-destructive/20 dark:bg-destructive/15"
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	}
+});
+/**
+* Progress indicator variant definitions
+* Uses motion library for Premium Harmony V2 spring physics
+*/
+const progressIndicatorVariants = cva(["h-full w-full flex-1"], {
+	variants: {
+		variant: {
+			default: ["bg-primary", "dark:bg-primary/90"],
+			success: ["bg-success", "dark:bg-success/90"],
+			warning: ["bg-warning", "dark:bg-warning/90"],
+			destructive: ["bg-destructive", "dark:bg-destructive/90"]
+		},
+		animation: {
+			none: "",
+			indeterminate: "animate-[progress-indeterminate_1.5s_ease-in-out_infinite] w-1/3",
+			striped: "bg-[length:1rem_1rem] bg-[linear-gradient(45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)]",
+			stripedAnimated: [
+				"bg-[length:1rem_1rem]",
+				"bg-[linear-gradient(45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)]",
+				"animate-[progress-stripes_1s_linear_infinite]"
+			]
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		animation: "none"
+	}
+});
+/**
+* Progress Component
+*
+* A progress bar that shows completion status with various visual options.
+* Fully accessible with ARIA progressbar role.
+* Enhanced with Premium Harmony V2 motion standards for smooth, physics-based animations.
+*/
+const Progress = memo(forwardRef(function Progress({ className, value, max = 100, size: sizeProp, variant, indeterminate = false, striped = false, animated = false, getValueLabel, showLabel = false, ...props }, ref) {
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const shouldReduceMotion = useReducedMotion();
+	const size = useMemo(() => {
+		if (sizeProp) return sizeProp;
+		return isTouchDevice ? "lg" : "default";
+	}, [sizeProp, isTouchDevice]);
+	const progressValue = useMemo(() => {
+		if (indeterminate || value === null || value === void 0) return null;
+		return Math.min(Math.max(value, 0), max);
+	}, [
+		value,
+		max,
+		indeterminate
+	]);
+	const percentage = useMemo(() => {
+		if (progressValue === null) return null;
+		return progressValue / max * 100;
+	}, [progressValue, max]);
+	const trackClassName = useMemo(() => cn(progressVariants({
+		size,
+		variant
+	}), className), [
+		size,
+		variant,
+		className
+	]);
+	const animationType = useMemo(() => {
+		if (indeterminate) return "indeterminate";
+		if (striped && animated) return "stripedAnimated";
+		if (striped) return "striped";
+		return "none";
+	}, [
+		indeterminate,
+		striped,
+		animated
+	]);
+	const indicatorClassName = useMemo(() => progressIndicatorVariants({
+		variant,
+		animation: animationType
+	}), [variant, animationType]);
+	const valueLabel = useMemo(() => {
+		if (progressValue === null) return;
+		if (getValueLabel) return getValueLabel(progressValue, max);
+		return `${Math.round(percentage ?? 0)}%`;
+	}, [
+		progressValue,
+		max,
+		percentage,
+		getValueLabel
+	]);
+	const dataState = useMemo(() => {
+		if (indeterminate) return "indeterminate";
+		if (progressValue === max) return "complete";
+		return "loading";
+	}, [
+		indeterminate,
+		progressValue,
+		max
+	]);
+	const springConfig = useMemo(() => {
+		if (shouldReduceMotion) return { duration: 0 };
+		if (indeterminate) return SPRING_FLUID;
+		if (percentage !== null && percentage > 75) return SPRING_GENTLE;
+		return SPRING_TACTILE;
+	}, [
+		shouldReduceMotion,
+		indeterminate,
+		percentage
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": max,
+		"aria-valuenow": progressValue ?? void 0,
+		"aria-valuetext": valueLabel,
+		"data-slot": "progress",
+		"data-state": dataState,
+		"data-loading": indeterminate || progressValue !== null && progressValue < max,
+		"data-value": progressValue ?? void 0,
+		"data-max": max,
+		className: trackClassName,
+		...props,
+		children: [/* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "progress-indicator",
+			className: indicatorClassName,
+			initial: false,
+			animate: { x: indeterminate || percentage === null ? 0 : `${-(100 - percentage)}%` },
+			transition: springConfig
+		}), /* @__PURE__ */ jsx(AnimatePresence, { children: showLabel && !indeterminate && percentage !== null ? /* @__PURE__ */ jsxs(motion.span, {
+			"data-slot": "progress-label",
+			className: "text-primary-foreground absolute inset-0 flex items-center justify-center text-[10px] font-medium mix-blend-difference",
+			initial: { opacity: 0 },
+			animate: { opacity: 1 },
+			exit: { opacity: 0 },
+			transition: shouldReduceMotion ? { duration: 0 } : SPRING_GENTLE,
+			children: [Math.round(percentage), "%"]
+		}) : null })]
+	});
+}));
+Progress.displayName = "Progress";
+
+//#endregion
+export { progressIndicatorVariants as n, progressVariants as r, Progress as t };
+//# sourceMappingURL=progress-BWxdthl4.mjs.map

package/dist/progress-BWxdthl4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-BWxdthl4.mjs","names":[],"sources":["../src/components/elements/atoms/progress/progress.tsx"],"sourcesContent":["/**\n * @fileoverview Progress Component - Premium Harmony V2\n *\n * A progress bar component with size and color variants for visual feedback.\n * Built with native HTML elements and ARIA attributes for accessibility.\n *\n * Features:\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Premium Harmony V2 spring physics for smooth animations\n * - Touch detection with automatic sizing for mobile devices\n * - Reduced motion support for accessibility\n * - Multiple size and color variants with light/dark mode support\n * - Full accessibility support (ARIA progressbar)\n * - Indeterminate state with fluid animation\n * - WCAG 2.5.5 compliant touch targets for interactive progress bars\n * - Data attributes for state management (data-state, data-loading)\n * - Enhanced focus styles for keyboard navigation\n *\n * @module @od-oneapp/uni-ui/components/elements/atoms/progress\n *\n * @component Progress\n *\n * @useCases\n * - File upload progress with percentage display\n * - Task completion through multi-step workflows\n * - Loading indicators with indeterminate state\n * - Download progress with animated fill\n * - Profile completion gamification elements\n * - Data processing with visual feedback\n * - Achievement tracking and goal visualization\n *\n * @variants\n * - size: xs, sm, default, lg, xl, touch\n * - variant: default, success, warning, destructive\n *\n * @example <Progress value={60} />\n *\n * @example <Progress value={80} size=\"lg\" variant=\"success\" />\n *\n * @example <Progress indeterminate />\n */\n\n'use client';\n\nimport type { ComponentProps } from 'react';\nimport { forwardRef, memo, useMemo } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '../../../../lib/utils';\nimport {\n  SPRING_FLUID,\n  SPRING_GENTLE,\n  SPRING_TACTILE,\n} from '../../../ai-elements/ai-elements.constants';\n\n/**\n * Progress track variant definitions using CVA\n *\n * Base styles include:\n * - Rounded full shape\n * - Overflow hidden for indicator\n * - Relative positioning for indicator\n * - Focus styles for keyboard navigation (when interactive)\n */\nconst progressVariants = cva(\n  [\n    // Layout\n    'relative w-full overflow-hidden',\n    // Shape\n    'rounded-full',\n    // Background track\n    'bg-primary/20',\n    // Dark mode\n    'dark:bg-primary/15',\n    // Focus styles (for interactive progress bars)\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n  ],\n  {\n    variants: {\n      /**\n       * Size variants\n       * 'touch' variant ensures WCAG 2.5.5 compliance with 44px minimum height\n       */\n      size: {\n        xs: 'h-0.5',\n        sm: 'h-1',\n        default: 'h-2',\n        lg: 'h-3',\n        xl: 'h-4',\n        touch: 'h-11', // 44px for WCAG 2.5.5 compliance\n      },\n      /**\n       * Visual variant for track background\n       */\n      variant: {\n        default: 'bg-primary/20 dark:bg-primary/15',\n        success: 'bg-success/20 dark:bg-success/15',\n        warning: 'bg-warning/20 dark:bg-warning/15',\n        destructive: 'bg-destructive/20 dark:bg-destructive/15',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      variant: 'default',\n    },\n  },\n);\n\n/**\n * Progress indicator variant definitions\n * Uses motion library for Premium Harmony V2 spring physics\n */\nconst progressIndicatorVariants = cva(\n  [\n    // Layout\n    'h-full w-full flex-1',\n  ],\n  {\n    variants: {\n      /**\n       * Color variant for the indicator fill\n       */\n      variant: {\n        default: ['bg-primary', 'dark:bg-primary/90'],\n        success: ['bg-success', 'dark:bg-success/90'],\n        warning: ['bg-warning', 'dark:bg-warning/90'],\n        destructive: ['bg-destructive', 'dark:bg-destructive/90'],\n      },\n      /**\n       * Animation state\n       */\n      animation: {\n        none: '',\n        indeterminate: 'animate-[progress-indeterminate_1.5s_ease-in-out_infinite] w-1/3',\n        striped:\n          'bg-[length:1rem_1rem] bg-[linear-gradient(45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)]',\n        stripedAnimated: [\n          'bg-[length:1rem_1rem]',\n          'bg-[linear-gradient(45deg,rgba(255,255,255,0.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.15)_50%,rgba(255,255,255,0.15)_75%,transparent_75%,transparent)]',\n          'animate-[progress-stripes_1s_linear_infinite]',\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      animation: 'none',\n    },\n  },\n);\n\n/**\n * Progress component props\n */\ninterface ProgressProps\n  extends Omit<ComponentProps<'div'>, 'children'>, VariantProps<typeof progressVariants> {\n  /** Current progress value (0-100 or 0-max) */\n  value?: number | null;\n  /** Maximum value for the progress bar */\n  max?: number;\n  /** Show indeterminate loading animation when value is unknown */\n  indeterminate?: boolean;\n  /** Show striped pattern */\n  striped?: boolean;\n  /** Animate striped pattern */\n  animated?: boolean;\n  /** Function to get the value label for accessibility */\n  getValueLabel?: (value: number, max: number) => string;\n  /** Show percentage label */\n  showLabel?: boolean;\n}\n\n/**\n * Progress Component\n *\n * A progress bar that shows completion status with various visual options.\n * Fully accessible with ARIA progressbar role.\n * Enhanced with Premium Harmony V2 motion standards for smooth, physics-based animations.\n */\nconst Progress = memo(\n  forwardRef<HTMLDivElement, ProgressProps>(function Progress(\n    {\n      className,\n      value,\n      max = 100,\n      size: sizeProp,\n      variant,\n      indeterminate = false,\n      striped = false,\n      animated = false,\n      getValueLabel,\n      showLabel = false,\n      ...props\n    },\n    ref,\n  ) {\n    // Premium Harmony V2: Touch detection\n    const isTouchDevice = useMediaQuery('(pointer: coarse)');\n    // Premium Harmony V2: Reduced motion support\n    const shouldReduceMotion = useReducedMotion();\n\n    // Auto-adjust size for touch devices if not explicitly set\n    const size = useMemo(() => {\n      if (sizeProp) return sizeProp;\n      return isTouchDevice ? 'lg' : 'default';\n    }, [sizeProp, isTouchDevice]);\n\n    // Calculate clamped progress value\n    const progressValue = useMemo(() => {\n      if (indeterminate || value === null || value === undefined) {\n        return null;\n      }\n      return Math.min(Math.max(value, 0), max);\n    }, [value, max, indeterminate]);\n\n    // Calculate percentage\n    const percentage = useMemo(() => {\n      if (progressValue === null) return null;\n      return (progressValue / max) * 100;\n    }, [progressValue, max]);\n\n    // Memoize track className\n    const trackClassName = useMemo(\n      () => cn(progressVariants({ size, variant }), className),\n      [size, variant, className],\n    );\n\n    // Determine animation type\n    const animationType = useMemo(() => {\n      if (indeterminate) return 'indeterminate' as const;\n      if (striped && animated) return 'stripedAnimated' as const;\n      if (striped) return 'striped' as const;\n      return 'none' as const;\n    }, [indeterminate, striped, animated]);\n\n    // Memoize indicator className\n    const indicatorClassName = useMemo(\n      () => progressIndicatorVariants({ variant, animation: animationType }),\n      [variant, animationType],\n    );\n\n    // Generate accessible value label\n    const valueLabel = useMemo(() => {\n      if (progressValue === null) return;\n      if (getValueLabel) return getValueLabel(progressValue, max);\n      return `${Math.round(percentage ?? 0)}%`;\n    }, [progressValue, max, percentage, getValueLabel]);\n\n    // Determine data-state\n    const dataState = useMemo(() => {\n      if (indeterminate) return 'indeterminate';\n      if (progressValue === max) return 'complete';\n      return 'loading';\n    }, [indeterminate, progressValue, max]);\n\n    // Premium Harmony V2: Select appropriate spring physics\n    const springConfig = useMemo(() => {\n      if (shouldReduceMotion) return { duration: 0 }; // Instant for reduced motion\n      if (indeterminate) return SPRING_FLUID; // Fluid for continuous motion\n      if (percentage !== null && percentage > 75) return SPRING_GENTLE; // Gentle near completion\n      return SPRING_TACTILE; // Tactile for normal progress\n    }, [shouldReduceMotion, indeterminate, percentage]);\n\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={progressValue ?? undefined}\n        aria-valuetext={valueLabel}\n        data-slot=\"progress\"\n        data-state={dataState}\n        data-loading={indeterminate || (progressValue !== null && progressValue < max)}\n        data-value={progressValue ?? undefined}\n        data-max={max}\n        className={trackClassName}\n        {...props}\n      >\n        <motion.div\n          data-slot=\"progress-indicator\"\n          className={indicatorClassName}\n          initial={false}\n          animate={{\n            x: indeterminate || percentage === null ? 0 : `${-(100 - percentage)}%`,\n          }}\n          transition={springConfig}\n        />\n        <AnimatePresence>\n          {showLabel && !indeterminate && percentage !== null ? (\n            <motion.span\n              data-slot=\"progress-label\"\n              className=\"text-primary-foreground absolute inset-0 flex items-center justify-center text-[10px] font-medium mix-blend-difference\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={shouldReduceMotion ? { duration: 0 } : SPRING_GENTLE}\n            >\n              {Math.round(percentage)}%\n            </motion.span>\n          ) : null}\n        </AnimatePresence>\n      </div>\n    );\n  }),\n);\n\nProgress.displayName = 'Progress';\n\nexport { Progress, progressIndicatorVariants, progressVariants };\nexport type { ProgressProps };\n"],"mappings":"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"}