@od-oneapp/uni-ui 2026.1.1301

package/dist/components-ai-elements/shimmer/index.mjs

@@ -0,0 +1,4 @@
+'use client';
+import { t as Shimmer } from "../../shimmer-BLRAD4VL.mjs";
+
+export { Shimmer };

package/dist/components-ai-elements/sources/index.d.mts

@@ -0,0 +1,56 @@
+
+import "../../skeleton-ByXUFNDF.mjs";
+import { i as IconColorName, t as Button } from "../../button-BAdq0gBE.mjs";
+import "../../components-elements-button.mjs";
+import { ComponentProps } from "react";
+import { HTMLMotionProps } from "motion/react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ai-elements/sources/sources.d.ts
+type SourcesProps = ComponentProps<'div'>;
+declare const Sources: ({
+  className,
+  children,
+  ...props
+}: SourcesProps) => react_jsx_runtime0.JSX.Element;
+type SourcesTriggerProps = ComponentProps<typeof Button> & {
+  count: number;
+  label?: string;
+  iconColor?: IconColorName;
+};
+declare const SourcesTrigger: ({
+  className,
+  count,
+  label,
+  disabled,
+  children,
+  iconColor,
+  ...props
+}: SourcesTriggerProps) => react_jsx_runtime0.JSX.Element;
+type SourcesContentProps = Omit<HTMLMotionProps<'div'>, 'children'> & {
+  children?: React.ReactNode;
+  maxHeight?: number;
+  bounce?: boolean;
+};
+declare const SourcesContent: ({
+  className,
+  children,
+  maxHeight,
+  bounce,
+  ...props
+}: SourcesContentProps) => react_jsx_runtime0.JSX.Element;
+type SourceProps = Omit<HTMLMotionProps<'a'>, 'children'> & {
+  children?: React.ReactNode;
+  index?: number;
+};
+declare const Source: ({
+  href,
+  title,
+  index,
+  children,
+  className,
+  ...props
+}: SourceProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Source, SourceProps, Sources, SourcesContent, SourcesContentProps, SourcesProps, SourcesTrigger, SourcesTriggerProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/components-ai-elements/sources/index.mjs

@@ -0,0 +1,211 @@
+'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 { AI_FOCUS, AI_HOVER, AI_ICON, AI_SPACING, AI_STACK, AI_TEXT, AI_TRANSITION } from "../../components-ai-elements-constants.mjs";
+import { t as Button } from "../../button-DVOrrZLw.mjs";
+import { t as ScrollArea } from "../../scroll-area-Bxi-Edjc.mjs";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { useClickOutside, useDisclosure, useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { BookOpenIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ai-elements/sources/sources.tsx
+/**
+* @fileoverview Sources Component - Premium Harmony V2
+*
+* A popover-like component for displaying source references in AI-generated content.
+* Features trigger pill, disabled state, scrollable content, and fluid spring animations.
+*
+* Features:
+* - Spring-based stagger animations with SPRING_GENTLE and SPRING_TACTILE physics
+* - Click-outside dismissal with useClickOutside hook
+* - Touch device detection for adaptive interaction patterns
+* - Reduced motion support respecting prefers-reduced-motion
+* - ScrollArea integration for long source lists
+* - Accessible with aria-pressed, aria-expanded, and proper focus states
+*
+* @module @od-oneapp/uni-ui/components/ai-elements/sources
+* @component Sources, SourcesTrigger, SourcesContent, Source
+*
+* @useCases
+* - Citation display for AI-generated responses with academic references
+* - Source attribution in research or documentation tools
+* - Link aggregation for multi-source content synthesis
+* - Reference management in conversational AI interfaces
+* - Bibliography presentation in knowledge base applications
+* - Quick access to supporting materials in chatbot responses
+*
+* @subcomponents
+* - Sources - Root container with context provider
+* - SourcesTrigger - Pill button with count and book icon
+* - SourcesContent - Popover content with scroll area and exit animations
+* - Source - Individual source link with spring-based stagger animation
+*
+* @example
+*   <Sources>
+*     <SourcesTrigger count={3} iconColor="slate" />
+*     <SourcesContent bounce>
+*       <Source href="https://example.com" title="Example" index={0} />
+*       <Source href="https://docs.com" title="Docs" index={1} />
+*     </SourcesContent>
+*   </Sources>
+*/
+const SourcesContext = createContext(null);
+const useSources = () => {
+	const ctx = useContext(SourcesContext);
+	if (!ctx) throw new Error("Sources components must be used within Sources");
+	return ctx;
+};
+const Sources = ({ className, children, ...props }) => {
+	const [opened, { open, close, toggle }] = useDisclosure(false);
+	const contextValue = useMemo(() => ({
+		open: opened,
+		openSources: open,
+		close,
+		toggle
+	}), [
+		opened,
+		open,
+		close,
+		toggle
+	]);
+	return /* @__PURE__ */ jsx(SourcesContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("inline-flex items-start", className),
+			"data-component": "Sources",
+			...props,
+			children
+		})
+	});
+};
+/**
+* Trigger button styles with micromoments for hover/focus/active states
+*/
+const triggerStyles = cn("min-h-[44px]", AI_TRANSITION.colors, "duration-150", AI_HOVER.both, AI_FOCUS.ring, "active:scale-[0.98]");
+const SourcesTrigger = ({ className, count, label = "sources", disabled, children, iconColor = "slate", ...props }) => {
+	const { open: isOpen, openSources } = useSources();
+	const isDisabled = disabled ?? count === 0;
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const handleClick = useCallback(() => {
+		if (!isDisabled) openSources();
+	}, [isDisabled, openSources]);
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "leftIcon",
+		icon: /* @__PURE__ */ jsx(BookOpenIcon, {
+			className: AI_ICON.md,
+			"aria-hidden": true
+		}),
+		iconColor,
+		disabled: isDisabled,
+		"aria-pressed": isOpen,
+		"aria-expanded": isOpen,
+		"data-component": "SourcesTrigger",
+		"data-state": isOpen ? "open" : "closed",
+		"data-touch-mode": isTouchDevice ? "touch" : "desktop",
+		className: cn(triggerStyles, isDisabled && "cursor-not-allowed opacity-60", className),
+		onClick: handleClick,
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "tabular-nums",
+				children: count
+			}), /* @__PURE__ */ jsx("span", { children: label })]
+		})
+	});
+};
+const SourcesContent = ({ className, children, maxHeight = 320, bounce = false, ...props }) => {
+	const { open: isOpen, close } = useSources();
+	const reducedMotion = useReducedMotion() ?? false;
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const ref = useClickOutside(() => close());
+	const popoverVariants = useMemo(() => ({
+		hidden: {
+			opacity: 0,
+			scale: .95,
+			y: -8
+		},
+		visible: {
+			opacity: 1,
+			scale: 1,
+			y: 0,
+			transition: bounce && !reducedMotion ? SPRING_TACTILE : SPRING_GENTLE
+		},
+		exit: {
+			opacity: 0,
+			scale: .95,
+			y: -4,
+			transition: SPRING_FLUID
+		}
+	}), [bounce, reducedMotion]);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		mode: "wait",
+		children: isOpen ? /* @__PURE__ */ jsx(motion.div, {
+			ref,
+			"data-component": "SourcesContent",
+			"data-state": "open",
+			"data-touch-mode": isTouchDevice ? "touch" : "desktop",
+			initial: reducedMotion ? "visible" : "hidden",
+			animate: "visible",
+			exit: reducedMotion ? void 0 : "exit",
+			variants: reducedMotion ? void 0 : popoverVariants,
+			className: cn("border-border/60 bg-popover/95 w-72 rounded-xl border p-0 shadow-lg backdrop-blur", className),
+			...props,
+			children: /* @__PURE__ */ jsx(ScrollArea, {
+				style: { maxHeight },
+				className: "px-3 py-2",
+				children: /* @__PURE__ */ jsx("div", {
+					className: AI_STACK.standard,
+					children
+				})
+			})
+		}) : null
+	});
+};
+/** Base delay between staggered source animations in seconds */
+const STAGGER_DELAY_S = .05;
+const Source = ({ href, title, index = 0, children, className, ...props }) => {
+	const reducedMotion = useReducedMotion() ?? false;
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const animationDelay = reducedMotion ? 0 : index * STAGGER_DELAY_S;
+	const sourceVariants = useMemo(() => ({
+		hidden: {
+			opacity: 0,
+			x: -8
+		},
+		visible: {
+			opacity: 1,
+			x: 0,
+			transition: {
+				...SPRING_GENTLE,
+				delay: animationDelay
+			}
+		}
+	}), [animationDelay]);
+	return /* @__PURE__ */ jsx(motion.a, {
+		"data-component": "Source",
+		"data-touch-mode": isTouchDevice ? "touch" : "desktop",
+		initial: reducedMotion ? "visible" : "hidden",
+		animate: "visible",
+		variants: reducedMotion ? void 0 : sourceVariants,
+		className: cn("text-foreground inline-flex items-center", AI_SPACING.xs, AI_TEXT.sm, AI_TRANSITION.colors, "duration-150", "hover:text-primary", AI_FOCUS.subtle, "min-h-[44px] py-1", className),
+		href,
+		rel: "noreferrer",
+		target: "_blank",
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(BookOpenIcon, {
+			className: AI_ICON.md,
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsx("span", {
+			className: "block font-medium",
+			children: title
+		})] })
+	});
+};
+
+//#endregion
+export { Source, Sources, SourcesContent, SourcesTrigger };
+//# sourceMappingURL=index.mjs.map

package/dist/components-ai-elements/sources/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ai-elements/sources/sources.tsx"],"sourcesContent":["/**\n * @fileoverview Sources Component - Premium Harmony V2\n *\n * A popover-like component for displaying source references in AI-generated content.\n * Features trigger pill, disabled state, scrollable content, and fluid spring animations.\n *\n * Features:\n * - Spring-based stagger animations with SPRING_GENTLE and SPRING_TACTILE physics\n * - Click-outside dismissal with useClickOutside hook\n * - Touch device detection for adaptive interaction patterns\n * - Reduced motion support respecting prefers-reduced-motion\n * - ScrollArea integration for long source lists\n * - Accessible with aria-pressed, aria-expanded, and proper focus states\n *\n * @module @od-oneapp/uni-ui/components/ai-elements/sources\n * @component Sources, SourcesTrigger, SourcesContent, Source\n *\n * @useCases\n * - Citation display for AI-generated responses with academic references\n * - Source attribution in research or documentation tools\n * - Link aggregation for multi-source content synthesis\n * - Reference management in conversational AI interfaces\n * - Bibliography presentation in knowledge base applications\n * - Quick access to supporting materials in chatbot responses\n *\n * @subcomponents\n * - Sources - Root container with context provider\n * - SourcesTrigger - Pill button with count and book icon\n * - SourcesContent - Popover content with scroll area and exit animations\n * - Source - Individual source link with spring-based stagger animation\n *\n * @example\n *   <Sources>\n *     <SourcesTrigger count={3} iconColor=\"slate\" />\n *     <SourcesContent bounce>\n *       <Source href=\"https://example.com\" title=\"Example\" index={0} />\n *       <Source href=\"https://docs.com\" title=\"Docs\" index={1} />\n *     </SourcesContent>\n *   </Sources>\n */\n\n'use client';\n\nimport type { ComponentProps } from 'react';\nimport { createContext, useCallback, useContext, useMemo } from 'react';\n\nimport { useClickOutside, useDisclosure, useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { BookOpenIcon } from 'lucide-react';\nimport { AnimatePresence, motion, type HTMLMotionProps } from 'motion/react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button, type IconColorName } from '../../elements/atoms/button';\nimport { ScrollArea } from '../../elements/organisms/scroll-area';\nimport {\n  AI_FOCUS,\n  AI_HOVER,\n  AI_ICON,\n  AI_SPACING,\n  AI_STACK,\n  AI_TEXT,\n  AI_TRANSITION,\n  SPRING_FLUID,\n  SPRING_GENTLE,\n  SPRING_TACTILE,\n} from '../ai-elements.constants';\n\ntype SourcesContextValue = {\n  open: boolean;\n  close: () => void;\n  openSources: () => void;\n  toggle: () => void;\n};\n\nconst SourcesContext = createContext<SourcesContextValue | null>(null);\n\nconst useSources = () => {\n  const ctx = useContext(SourcesContext);\n  if (!ctx) {\n    throw new Error('Sources components must be used within Sources');\n  }\n  return ctx;\n};\n\nexport type SourcesProps = ComponentProps<'div'>;\n\nexport const Sources = ({ className, children, ...props }: SourcesProps) => {\n  // Use Mantine's useDisclosure for boolean open/close state management\n  const [opened, { open, close, toggle }] = useDisclosure(false);\n  const contextValue = useMemo(\n    () => ({ open: opened, openSources: open, close, toggle }),\n    [opened, open, close, toggle],\n  );\n\n  return (\n    <SourcesContext.Provider value={contextValue}>\n      <div className={cn('inline-flex items-start', className)} data-component=\"Sources\" {...props}>\n        {children}\n      </div>\n    </SourcesContext.Provider>\n  );\n};\n\nexport type SourcesTriggerProps = ComponentProps<typeof Button> & {\n  count: number;\n  label?: string;\n  iconColor?: IconColorName;\n};\n\n/**\n * Trigger button styles with micromoments for hover/focus/active states\n */\nconst triggerStyles = cn(\n  // Touch-friendly minimum height (44px)\n  'min-h-[44px]',\n  // Transition for micromoments\n  AI_TRANSITION.colors,\n  'duration-150',\n  // Hover state\n  AI_HOVER.both,\n  // Focus state\n  AI_FOCUS.ring,\n  // Active state feedback\n  'active:scale-[0.98]',\n);\n\nexport const SourcesTrigger = ({\n  className,\n  count,\n  label = 'sources',\n  disabled,\n  children,\n  iconColor = 'slate',\n  ...props\n}: SourcesTriggerProps) => {\n  const { open: isOpen, openSources } = useSources();\n  const isDisabled = disabled ?? count === 0;\n\n  // Detect touch device for adaptive interaction patterns\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n\n  // Memoize onClick handler to prevent unnecessary re-renders\n  const handleClick = useCallback(() => {\n    if (!isDisabled) {\n      openSources();\n    }\n  }, [isDisabled, openSources]);\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"leftIcon\"\n      icon={<BookOpenIcon className={AI_ICON.md} aria-hidden />}\n      iconColor={iconColor}\n      disabled={isDisabled}\n      aria-pressed={isOpen}\n      aria-expanded={isOpen}\n      data-component=\"SourcesTrigger\"\n      data-state={isOpen ? 'open' : 'closed'}\n      data-touch-mode={isTouchDevice ? 'touch' : 'desktop'}\n      className={cn(\n        triggerStyles,\n        // Disabled state styling with softer opacity\n        isDisabled && 'cursor-not-allowed opacity-60',\n        className,\n      )}\n      onClick={handleClick}\n      {...props}\n    >\n      {children ?? (\n        <span className=\"flex items-center gap-1\">\n          <span className=\"tabular-nums\">{count}</span>\n          <span>{label}</span>\n        </span>\n      )}\n    </Button>\n  );\n};\n\nexport type SourcesContentProps = Omit<HTMLMotionProps<'div'>, 'children'> & {\n  children?: React.ReactNode;\n  maxHeight?: number;\n  /** Enable bounce animation on open */\n  bounce?: boolean;\n};\n\nexport const SourcesContent = ({\n  className,\n  children,\n  maxHeight = 320,\n  bounce = false,\n  ...props\n}: SourcesContentProps) => {\n  const { open: isOpen, close } = useSources();\n\n  // Use Mantine's useReducedMotion to respect user accessibility preferences\n  const reducedMotion = useReducedMotion() ?? false;\n\n  // Detect touch device for adaptive interaction patterns\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n\n  // Close popover when clicking outside (improves keyboard and touch UX)\n  const ref = useClickOutside(() => close());\n\n  // Memoized animation variants using Premium Harmony V2 spring physics\n  const popoverVariants = useMemo(\n    () => ({\n      hidden: {\n        opacity: 0,\n        scale: 0.95,\n        y: -8,\n      },\n      visible: {\n        opacity: 1,\n        scale: 1,\n        y: 0,\n        transition: bounce && !reducedMotion ? SPRING_TACTILE : SPRING_GENTLE,\n      },\n      exit: {\n        opacity: 0,\n        scale: 0.95,\n        y: -4,\n        transition: SPRING_FLUID,\n      },\n    }),\n    [bounce, reducedMotion],\n  );\n\n  return (\n    <AnimatePresence mode=\"wait\">\n      {isOpen ? (\n        <motion.div\n          ref={ref}\n          data-component=\"SourcesContent\"\n          data-state=\"open\"\n          data-touch-mode={isTouchDevice ? 'touch' : 'desktop'}\n          initial={reducedMotion ? 'visible' : 'hidden'}\n          animate=\"visible\"\n          exit={reducedMotion ? undefined : 'exit'}\n          variants={reducedMotion ? undefined : popoverVariants}\n          className={cn(\n            'border-border/60 bg-popover/95 w-72 rounded-xl border p-0 shadow-lg backdrop-blur',\n            className,\n          )}\n          {...props}\n        >\n          <ScrollArea style={{ maxHeight }} className=\"px-3 py-2\">\n            <div className={AI_STACK.standard}>{children}</div>\n          </ScrollArea>\n        </motion.div>\n      ) : null}\n    </AnimatePresence>\n  );\n};\n\nexport type SourceProps = Omit<HTMLMotionProps<'a'>, 'children'> & {\n  children?: React.ReactNode;\n  /** Index for staggered animation delay (optional, defaults to 0) */\n  index?: number;\n};\n\n/** Base delay between staggered source animations in seconds */\nconst STAGGER_DELAY_S = 0.05;\n\nexport const Source = ({ href, title, index = 0, children, className, ...props }: SourceProps) => {\n  // Use Mantine's useReducedMotion to respect user accessibility preferences\n  const reducedMotion = useReducedMotion() ?? false;\n\n  // Detect touch device for adaptive interaction patterns\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n\n  // Calculate staggered animation delay based on index\n  const animationDelay = reducedMotion ? 0 : index * STAGGER_DELAY_S;\n\n  // Memoized animation variants using Premium Harmony V2 spring physics\n  const sourceVariants = useMemo(\n    () => ({\n      hidden: {\n        opacity: 0,\n        x: -8,\n      },\n      visible: {\n        opacity: 1,\n        x: 0,\n        transition: {\n          ...SPRING_GENTLE,\n          delay: animationDelay,\n        },\n      },\n    }),\n    [animationDelay],\n  );\n\n  return (\n    <motion.a\n      data-component=\"Source\"\n      data-touch-mode={isTouchDevice ? 'touch' : 'desktop'}\n      initial={reducedMotion ? 'visible' : 'hidden'}\n      animate=\"visible\"\n      variants={reducedMotion ? undefined : sourceVariants}\n      className={cn(\n        'text-foreground inline-flex items-center',\n        AI_SPACING.xs,\n        AI_TEXT.sm,\n        // Transitions for micromoments\n        AI_TRANSITION.colors,\n        'duration-150',\n        // Hover/focus states with semantic colors\n        'hover:text-primary',\n        AI_FOCUS.subtle,\n        // Touch-friendly minimum height (44px)\n        'min-h-[44px] py-1',\n        className,\n      )}\n      href={href}\n      rel=\"noreferrer\"\n      target=\"_blank\"\n      {...props}\n    >\n      {children ?? (\n        <>\n          <BookOpenIcon className={AI_ICON.md} aria-hidden />\n          <span className=\"block font-medium\">{title}</span>\n        </>\n      )}\n    </motion.a>\n  );\n};\n"],"mappings":"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"}

package/dist/components-ai-elements/suggestion/index.d.mts

@@ -0,0 +1,40 @@
+
+import "../../skeleton-ByXUFNDF.mjs";
+import { t as Button } from "../../button-BAdq0gBE.mjs";
+import "../../components-elements-button.mjs";
+import { t as ScrollArea } from "../../scroll-area-CDRGG59G.mjs";
+import "../../components-elements-scroll-area.mjs";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ai-elements/suggestion/suggestion.d.ts
+type SuggestionsProps = ComponentProps<typeof ScrollArea> & {
+  stagger?: boolean;
+};
+declare const Suggestions: ({
+  className,
+  children,
+  stagger,
+  ...props
+}: SuggestionsProps) => react_jsx_runtime0.JSX.Element;
+type SuggestionProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
+  suggestion: string;
+  onClick?: (suggestion: string) => void;
+  loading?: boolean;
+  pending?: boolean;
+};
+declare const Suggestion: ({
+  suggestion,
+  onClick,
+  className,
+  variant,
+  size,
+  children,
+  loading,
+  pending,
+  disabled,
+  ...props
+}: SuggestionProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Suggestion, SuggestionProps, Suggestions, SuggestionsProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/components-ai-elements/suggestion/index.mjs

@@ -0,0 +1,145 @@
+'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 { AI_FOCUS, AI_SPACING, AI_TRANSITION } from "../../components-ai-elements-constants.mjs";
+import { t as Button } from "../../button-DVOrrZLw.mjs";
+import { n as ScrollBar, t as ScrollArea } from "../../scroll-area-Bxi-Edjc.mjs";
+import { Children, Fragment, isValidElement, useCallback, useMemo } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ai-elements/suggestion/suggestion.tsx
+/**
+* @fileoverview Suggestion Component - Premium Harmony V2
+*
+* A component for displaying clickable suggestion buttons in AI chat interfaces.
+* Provides horizontal scrolling container for suggestion chips with stagger animations.
+*
+* Features:
+* - Horizontal scrolling container with hidden scrollbar
+* - Stagger animation with device-adaptive spring physics
+* - Touch-friendly sizing (44px minimum height)
+* - Reduced motion support for accessibility
+* - Loading and pending state indicators
+*
+* @module @od-oneapp/uni-ui/components/ai-elements/suggestion
+* @component Suggestions, Suggestion
+*
+* @useCases
+* - Conversation starters in empty chat states
+* - Quick action suggestions during conversations
+* - Follow-up question prompts after AI responses
+* - Context-aware recommendations based on current topic
+* - Command shortcuts in AI assistant interfaces
+* - Template selection in content generation tools
+* - Category filters in AI search interfaces
+*
+* @example
+* <Suggestions stagger>
+*   <Suggestion suggestion="Tell me more" onClick={handleClick} />
+*   <Suggestion suggestion="Show examples" onClick={handleClick} />
+* </Suggestions>
+*
+* @example
+* <Suggestion suggestion="Help me understand" onClick={handleClick}>
+*   Custom label
+* </Suggestion>
+*/
+const Suggestions = ({ className, children, stagger = false, ...props }) => {
+	const reducedMotion = useReducedMotion();
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const springConfig = useMemo(() => isTouchDevice ? SPRING_GENTLE : SPRING_TACTILE, [isTouchDevice]);
+	const suggestionsVariants = useMemo(() => ({
+		hidden: { opacity: 0 },
+		visible: {
+			opacity: 1,
+			transition: { staggerChildren: reducedMotion ? 0 : .05 }
+		}
+	}), [reducedMotion]);
+	const suggestionItemVariants = useMemo(() => ({
+		hidden: {
+			opacity: reducedMotion ? 1 : 0,
+			y: reducedMotion ? 0 : 4,
+			scale: reducedMotion ? 1 : .98
+		},
+		visible: {
+			opacity: 1,
+			y: 0,
+			scale: 1,
+			transition: reducedMotion ? {
+				type: "tween",
+				duration: 0
+			} : springConfig
+		}
+	}), [reducedMotion, springConfig]);
+	/**
+	* Helper to flatten React fragments and return a flat list of children
+	*/
+	const getFlattenedChildren = (childrenToFlatten) => {
+		const flattened = [];
+		Children.forEach(childrenToFlatten, (child) => {
+			if (isValidElement(child) && child.type === Fragment) flattened.push(...getFlattenedChildren(child.props.children));
+			else if (child) flattened.push(child);
+		});
+		return flattened;
+	};
+	const flattenedChildren = stagger ? getFlattenedChildren(children) : [];
+	return /* @__PURE__ */ jsxs(ScrollArea, {
+		className: "w-full overflow-x-auto whitespace-nowrap",
+		...props,
+		children: [/* @__PURE__ */ jsx(motion.div, {
+			className: cn("flex w-max flex-nowrap items-center", AI_SPACING.xs, className),
+			"data-state": stagger ? "staggered" : "default",
+			initial: stagger ? "hidden" : false,
+			animate: stagger ? "visible" : false,
+			variants: suggestionsVariants,
+			children: /* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "popLayout",
+				children: stagger ? flattenedChildren.map((child, index) => /* @__PURE__ */ jsx(motion.div, {
+					variants: suggestionItemVariants,
+					children: child
+				}, index)) : children
+			})
+		}), /* @__PURE__ */ jsx(ScrollBar, {
+			className: "hidden",
+			orientation: "horizontal"
+		})]
+	});
+};
+const Suggestion = ({ suggestion, onClick, className, variant = "outlineSecondary", size = "sm", children, loading = false, pending = false, disabled, ...props }) => {
+	useReducedMotion();
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	useMemo(() => isTouchDevice ? SPRING_GENTLE : SPRING_FLUID, [isTouchDevice]);
+	const handleClick = useCallback(() => {
+		onClick?.(suggestion);
+	}, [onClick, suggestion]);
+	const buttonState = useMemo(() => {
+		if (loading) return "loading";
+		if (pending) return "pending";
+		if (disabled) return "disabled";
+		return "idle";
+	}, [
+		loading,
+		pending,
+		disabled
+	]);
+	return /* @__PURE__ */ jsx(Button, {
+		className: cn("min-h-[44px] px-4", AI_TRANSITION.colors, "duration-150", AI_FOCUS.ring, className),
+		"data-state": buttonState,
+		"data-loading": loading,
+		"data-pending": pending,
+		"data-testid": "suggestion",
+		disabled: disabled || loading,
+		onClick: handleClick,
+		size,
+		type: "button",
+		variant,
+		...props,
+		children: children ?? suggestion
+	});
+};
+
+//#endregion
+export { Suggestion, Suggestions };
+//# sourceMappingURL=index.mjs.map

package/dist/components-ai-elements/suggestion/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/ai-elements/suggestion/suggestion.tsx"],"sourcesContent":["/**\n * @fileoverview Suggestion Component - Premium Harmony V2\n *\n * A component for displaying clickable suggestion buttons in AI chat interfaces.\n * Provides horizontal scrolling container for suggestion chips with stagger animations.\n *\n * Features:\n * - Horizontal scrolling container with hidden scrollbar\n * - Stagger animation with device-adaptive spring physics\n * - Touch-friendly sizing (44px minimum height)\n * - Reduced motion support for accessibility\n * - Loading and pending state indicators\n *\n * @module @od-oneapp/uni-ui/components/ai-elements/suggestion\n * @component Suggestions, Suggestion\n *\n * @useCases\n * - Conversation starters in empty chat states\n * - Quick action suggestions during conversations\n * - Follow-up question prompts after AI responses\n * - Context-aware recommendations based on current topic\n * - Command shortcuts in AI assistant interfaces\n * - Template selection in content generation tools\n * - Category filters in AI search interfaces\n *\n * @example\n * <Suggestions stagger>\n *   <Suggestion suggestion=\"Tell me more\" onClick={handleClick} />\n *   <Suggestion suggestion=\"Show examples\" onClick={handleClick} />\n * </Suggestions>\n *\n * @example\n * <Suggestion suggestion=\"Help me understand\" onClick={handleClick}>\n *   Custom label\n * </Suggestion>\n */\n\n'use client';\n\nimport type { ComponentProps } from 'react';\nimport { Children, Fragment, isValidElement, useCallback, useMemo } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { AnimatePresence, motion } from 'motion/react';\n\nimport { cn } from '../../../lib/utils';\nimport { Button } from '../../elements/atoms/button';\nimport { ScrollArea, ScrollBar } from '../../elements/organisms/scroll-area';\nimport {\n  AI_FOCUS,\n  AI_SPACING,\n  AI_TRANSITION,\n  SPRING_FLUID,\n  SPRING_GENTLE,\n  SPRING_TACTILE,\n} from '../ai-elements.constants';\n\nexport type SuggestionsProps = ComponentProps<typeof ScrollArea> & {\n  /** Enable stagger animation for suggestion chips */\n  stagger?: boolean;\n};\n\nexport const Suggestions = ({\n  className,\n  children,\n  stagger = false,\n  ...props\n}: SuggestionsProps) => {\n  const reducedMotion = useReducedMotion();\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n\n  // Premium Harmony V2: Device-adaptive spring physics\n  // Touch devices get gentler springs for better feel\n  // Desktop gets more tactile response\n  const springConfig = useMemo(\n    () => (isTouchDevice ? SPRING_GENTLE : SPRING_TACTILE),\n    [isTouchDevice],\n  );\n\n  // Suggestion stagger animation variants\n  const suggestionsVariants = useMemo(\n    () =>\n      ({\n        hidden: { opacity: 0 },\n        visible: {\n          opacity: 1,\n          transition: {\n            staggerChildren: reducedMotion ? 0 : 0.05,\n          },\n        },\n      }) as any,\n    [reducedMotion],\n  );\n\n  const suggestionItemVariants = useMemo(\n    () =>\n      ({\n        hidden: {\n          opacity: reducedMotion ? 1 : 0,\n          y: reducedMotion ? 0 : 4,\n          scale: reducedMotion ? 1 : 0.98,\n        },\n        visible: {\n          opacity: 1,\n          y: 0,\n          scale: 1,\n          transition: reducedMotion ? { type: 'tween', duration: 0 } : springConfig,\n        },\n      }) as any,\n    [reducedMotion, springConfig],\n  );\n\n  /**\n   * Helper to flatten React fragments and return a flat list of children\n   */\n  const getFlattenedChildren = (childrenToFlatten: React.ReactNode): React.ReactNode[] => {\n    const flattened: React.ReactNode[] = [];\n\n    Children.forEach(childrenToFlatten, child => {\n      if (isValidElement(child) && child.type === Fragment) {\n        flattened.push(\n          ...getFlattenedChildren(\n            (child as React.ReactElement<{ children?: React.ReactNode }>).props.children,\n          ),\n        );\n      } else if (child) {\n        flattened.push(child);\n      }\n    });\n\n    return flattened;\n  };\n\n  const flattenedChildren = stagger ? getFlattenedChildren(children) : [];\n\n  return (\n    <ScrollArea className=\"w-full overflow-x-auto whitespace-nowrap\" {...props}>\n      <motion.div\n        className={cn('flex w-max flex-nowrap items-center', AI_SPACING.xs, className)}\n        data-state={stagger ? 'staggered' : 'default'}\n        initial={stagger ? 'hidden' : false}\n        animate={stagger ? 'visible' : false}\n        variants={suggestionsVariants}\n      >\n        <AnimatePresence mode=\"popLayout\">\n          {stagger\n            ? flattenedChildren.map((child, index) => (\n                <motion.div key={index} variants={suggestionItemVariants}>\n                  {child}\n                </motion.div>\n              ))\n            : children}\n        </AnimatePresence>\n      </motion.div>\n      <ScrollBar className=\"hidden\" orientation=\"horizontal\" />\n    </ScrollArea>\n  );\n};\n\nexport type SuggestionProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {\n  suggestion: string;\n  onClick?: (suggestion: string) => void;\n  /** Loading state indicator */\n  loading?: boolean;\n  /** Pending state indicator */\n  pending?: boolean;\n};\n\nexport const Suggestion = ({\n  suggestion,\n  onClick,\n  className,\n  variant = 'outlineSecondary',\n  size = 'sm',\n  children,\n  loading = false,\n  pending = false,\n  disabled,\n  ...props\n}: SuggestionProps) => {\n  const reducedMotion = useReducedMotion();\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n\n  // Premium Harmony V2: Device-adaptive spring physics for tap/hover feedback\n  const springConfig = useMemo(\n    () => (isTouchDevice ? SPRING_GENTLE : SPRING_FLUID),\n    [isTouchDevice],\n  );\n\n  // Memoize handleClick to prevent unnecessary re-renders\n  const handleClick = useCallback(() => {\n    onClick?.(suggestion);\n  }, [onClick, suggestion]);\n\n  // Determine button state for data attribute\n  const buttonState = useMemo(() => {\n    if (loading) return 'loading';\n    if (pending) return 'pending';\n    if (disabled) return 'disabled';\n    return 'idle';\n  }, [loading, pending, disabled]);\n\n  return (\n    <Button\n      className={cn(\n        // Touch-friendly sizing (44px minimum height)\n        'min-h-[44px] px-4',\n        // Transition for micromoments\n        AI_TRANSITION.colors,\n        'duration-150',\n        // Focus state using AI_FOCUS constant\n        AI_FOCUS.ring,\n        className,\n      )}\n      data-state={buttonState}\n      data-loading={loading}\n      data-pending={pending}\n      data-testid=\"suggestion\"\n      disabled={disabled || loading}\n      onClick={handleClick}\n      size={size}\n      type=\"button\"\n      variant={variant}\n      {...props}\n    >\n      {children ?? suggestion}\n    </Button>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,MAAa,eAAe,EAC1B,WACA,UACA,UAAU,OACV,GAAG,YACmB;CACtB,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,gBAAgB,cAAc,oBAAoB;CAKxD,MAAM,eAAe,cACZ,gBAAgB,gBAAgB,gBACvC,CAAC,cAAc,CAChB;CAGD,MAAM,sBAAsB,eAEvB;EACC,QAAQ,EAAE,SAAS,GAAG;EACtB,SAAS;GACP,SAAS;GACT,YAAY,EACV,iBAAiB,gBAAgB,IAAI,KACtC;GACF;EACF,GACH,CAAC,cAAc,CAChB;CAED,MAAM,yBAAyB,eAE1B;EACC,QAAQ;GACN,SAAS,gBAAgB,IAAI;GAC7B,GAAG,gBAAgB,IAAI;GACvB,OAAO,gBAAgB,IAAI;GAC5B;EACD,SAAS;GACP,SAAS;GACT,GAAG;GACH,OAAO;GACP,YAAY,gBAAgB;IAAE,MAAM;IAAS,UAAU;IAAG,GAAG;GAC9D;EACF,GACH,CAAC,eAAe,aAAa,CAC9B;;;;CAKD,MAAM,wBAAwB,sBAA0D;EACtF,MAAM,YAA+B,EAAE;AAEvC,WAAS,QAAQ,oBAAmB,UAAS;AAC3C,OAAI,eAAe,MAAM,IAAI,MAAM,SAAS,SAC1C,WAAU,KACR,GAAG,qBACA,MAA6D,MAAM,SACrE,CACF;YACQ,MACT,WAAU,KAAK,MAAM;IAEvB;AAEF,SAAO;;CAGT,MAAM,oBAAoB,UAAU,qBAAqB,SAAS,GAAG,EAAE;AAEvE,QACE,qBAAC;EAAW,WAAU;EAA2C,GAAI;aACnE,oBAAC,OAAO;GACN,WAAW,GAAG,uCAAuC,WAAW,IAAI,UAAU;GAC9E,cAAY,UAAU,cAAc;GACpC,SAAS,UAAU,WAAW;GAC9B,SAAS,UAAU,YAAY;GAC/B,UAAU;aAEV,oBAAC;IAAgB,MAAK;cACnB,UACG,kBAAkB,KAAK,OAAO,UAC5B,oBAAC,OAAO;KAAgB,UAAU;eAC/B;OADc,MAEJ,CACb,GACF;KACY;IACP,EACb,oBAAC;GAAU,WAAU;GAAS,aAAY;IAAe;GAC9C;;AAajB,MAAa,cAAc,EACzB,YACA,SACA,WACA,UAAU,oBACV,OAAO,MACP,UACA,UAAU,OACV,UAAU,OACV,UACA,GAAG,YACkB;AACC,mBAAkB;CACxC,MAAM,gBAAgB,cAAc,oBAAoB;AAGnC,eACZ,gBAAgB,gBAAgB,cACvC,CAAC,cAAc,CAChB;CAGD,MAAM,cAAc,kBAAkB;AACpC,YAAU,WAAW;IACpB,CAAC,SAAS,WAAW,CAAC;CAGzB,MAAM,cAAc,cAAc;AAChC,MAAI,QAAS,QAAO;AACpB,MAAI,QAAS,QAAO;AACpB,MAAI,SAAU,QAAO;AACrB,SAAO;IACN;EAAC;EAAS;EAAS;EAAS,CAAC;AAEhC,QACE,oBAAC;EACC,WAAW,GAET,qBAEA,cAAc,QACd,gBAEA,SAAS,MACT,UACD;EACD,cAAY;EACZ,gBAAc;EACd,gBAAc;EACd,eAAY;EACZ,UAAU,YAAY;EACtB,SAAS;EACH;EACN,MAAK;EACI;EACT,GAAI;YAEH,YAAY;GACN"}

package/dist/components-ai-elements/task/index.d.mts

@@ -0,0 +1,70 @@
+
+import { n as CollapsibleContent, o as CollapsibleTrigger, t as Collapsible } from "../../collapsible-CRgTpRfr.mjs";
+import "../../components-elements-collapsible.mjs";
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+import { HTMLMotionProps } from "motion/react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/ai-elements/task/task.d.ts
+declare const statusIconVariants: (props?: ({
+  status?: "error" | "pending" | "completed" | "in_progress" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+type StatusIconVariants = VariantProps<typeof statusIconVariants>;
+type TaskItemFileProps = Omit<HTMLMotionProps<'div'>, 'children'> & {
+  children?: React.ReactNode;
+  loading?: boolean;
+  pending?: boolean;
+};
+declare const TaskItemFile: ({
+  children,
+  className,
+  loading,
+  pending,
+  ...props
+}: TaskItemFileProps) => react_jsx_runtime0.JSX.Element;
+type TaskItemProps = Omit<HTMLMotionProps<'div'>, 'children'> & {
+  children?: React.ReactNode;
+};
+declare const TaskItem: ({
+  children,
+  className,
+  ...props
+}: TaskItemProps) => react_jsx_runtime0.JSX.Element;
+type TaskProps = ComponentProps<typeof Collapsible> & {
+  status?: 'pending' | 'in_progress' | 'completed' | 'error';
+  revealDelayMs?: number;
+};
+declare const Task: ({
+  defaultOpen,
+  status,
+  revealDelayMs,
+  className,
+  ...props
+}: TaskProps) => react_jsx_runtime0.JSX.Element;
+type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  title: string;
+  status?: 'pending' | 'in_progress' | 'completed' | 'error';
+  progress?: {
+    completed: number;
+    total: number;
+  };
+};
+declare const TaskTrigger: ({
+  children,
+  className,
+  title,
+  status,
+  progress,
+  ...props
+}: TaskTriggerProps) => react_jsx_runtime0.JSX.Element;
+type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const TaskContent: ({
+  children,
+  className,
+  ...props
+}: TaskContentProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { StatusIconVariants, Task, TaskContent, TaskContentProps, TaskItem, TaskItemFile, TaskItemFileProps, TaskItemProps, TaskProps, TaskTrigger, TaskTriggerProps, statusIconVariants };
+//# sourceMappingURL=index.d.mts.map