@od-oneapp/uni-ui 2026.1.1301

package/dist/avatar-DjiX7nT8.mjs

@@ -0,0 +1,202 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE } from "./motion-zelaDelJ.mjs";
+import { memo, useMemo } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { cva } from "class-variance-authority";
+import { motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+//#region src/components/elements/atoms/avatar/avatar.tsx
+/**
+* @fileoverview Avatar Component - Premium Harmony V2
+*
+* A circular avatar image component with fallback support and size variants.
+* Built on Radix UI Avatar primitives for accessibility and flexibility.
+* Features Premium Harmony V2 design standards for high-quality user identity display.
+*
+* Features:
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Complete size variants (xs, sm, default, lg, touch, xl, 2xl)
+* - Super light/dark mode with seamless switching
+* - Radix UI primitives for accessibility
+* - Smooth fade-in animation on image load
+* - Premium Harmony V2 spring physics (SPRING_TACTILE for interactions)
+* - Touch-optimized with 44px minimum target (WCAG 2.5.5)
+* - Reduced motion support
+* - Data attributes for state tracking
+*
+* @module @od-oneapp/uni-ui/components/elements/avatar
+* @component Avatar
+*
+* @useCases
+* - User profiles: Displaying user photos with initials fallback in headers or cards
+* - Messaging: Identifying authors in chat bubbles or comment sections
+* - Directories: Listing team members or contacts in a grid or list view
+* - Selection: Selecting users from a menu or dropdown interface
+* - Identity: Showing current user in account switcher or profile menus
+* - Social: Displaying follower or following lists with presence indicators
+* - Grouping: Presenting multiple users in an avatar stack (see AvatarStack)
+*
+* @subcomponents
+* - Avatar - Root container with size variants
+* - AvatarImage - Image element with loading animation
+* - AvatarFallback - Fallback content (initials/icon)
+*
+* @variants
+* - size: xs, sm, default, lg, touch, xl, 2xl
+* - ring: boolean (adds border/ring)
+* - interactive: boolean (enables cursor and focus styles)
+*
+* @example <Avatar size="default"><AvatarImage src="/avatar.jpg" alt="User" /><AvatarFallback>JD</AvatarFallback></Avatar>
+* @example <Avatar size="lg" ring><AvatarImage src="/profile.jpg" alt="Profile" /><AvatarFallback>JD</AvatarFallback></Avatar>
+* @example <Avatar size="touch" onClick={() => {}}><AvatarImage src="/contact.jpg" alt="Contact" /><AvatarFallback>TC</AvatarFallback></Avatar>
+*/
+/**
+* Avatar variant definitions using CVA
+*
+* Base styles include:
+* - Circular shape with overflow hidden
+* - Flex container for content alignment
+* - Multiple size options (xs through 2xl, with 'touch' for 44px WCAG compliance)
+* - Focus-visible ring for keyboard navigation
+*/
+const avatarVariants = cva([
+	"relative flex shrink-0 overflow-hidden",
+	"rounded-full",
+	"aspect-square"
+], {
+	variants: {
+		size: {
+			xs: "size-5 text-[10px]",
+			sm: "size-6 text-xs",
+			default: "size-8 text-sm",
+			lg: "size-10 text-base",
+			touch: "size-11 text-base",
+			xl: "size-12 text-lg",
+			"2xl": "size-16 text-xl"
+		},
+		ring: {
+			true: ["ring-2 ring-border ring-offset-2 ring-offset-background", "dark:ring-border dark:ring-offset-background"],
+			false: ""
+		},
+		interactive: {
+			true: [
+				"cursor-pointer",
+				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+				"transition-transform"
+			],
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		ring: false,
+		interactive: false
+	}
+});
+/**
+* Avatar Component - Premium Harmony V2
+*
+* Root container for avatar with size variants and spring physics.
+* Wraps Radix UI Avatar.Root for accessibility.
+*
+* Features:
+* - Auto-detects touch devices and adjusts tap feedback
+* - Respects reduced motion preferences
+* - Uses SPRING_TACTILE physics for natural feel
+* - Adds focus-visible ring for keyboard navigation
+* - Supports data attributes for state tracking
+*/
+const Avatar = memo(function Avatar({ className, size, ring, ...props }) {
+	const isTouchDevice = useMediaQuery("(pointer: coarse)");
+	const shouldReduceMotion = useReducedMotion();
+	const isInteractive = Boolean(props.onClick || props.onMouseDown || props.onKeyDown);
+	const Comp = isInteractive ? motion(AvatarPrimitive.Root) : AvatarPrimitive.Root;
+	const avatarClassName = useMemo(() => cn(avatarVariants({
+		size,
+		ring,
+		interactive: isInteractive
+	}), className), [
+		size,
+		ring,
+		isInteractive,
+		className
+	]);
+	const motionProps = isInteractive ? {
+		whileTap: shouldReduceMotion ? void 0 : { scale: .98 },
+		whileHover: shouldReduceMotion || isTouchDevice ? void 0 : { scale: 1.02 },
+		transition: shouldReduceMotion ? { duration: 0 } : SPRING_TACTILE
+	} : {};
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "avatar",
+		"data-interactive": isInteractive ? "true" : void 0,
+		className: avatarClassName,
+		...motionProps,
+		...props
+	});
+});
+Avatar.displayName = "Avatar";
+/**
+* AvatarImage variant definitions
+*/
+const avatarImageVariants = cva([
+	"aspect-square size-full",
+	"object-cover",
+	"animate-avatar-fade-in"
+]);
+/**
+* AvatarImage Component - Premium Harmony V2
+*
+* Image element with fade-in animation on load.
+* Falls back to AvatarFallback if image fails to load.
+*
+* Features:
+* - Automatic data-state tracking (loading/loaded)
+* - Fade-in animation respects reduced motion preferences
+* - Semantic color tokens for consistent theming
+*/
+const AvatarImage = memo(function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
+		"data-slot": "avatar-image",
+		className: cn(avatarImageVariants(), className),
+		...props
+	});
+});
+AvatarImage.displayName = "AvatarImage";
+/**
+* AvatarFallback variant definitions
+*/
+const avatarFallbackVariants = cva([
+	"flex size-full items-center justify-center rounded-full",
+	"bg-muted text-muted-foreground",
+	"font-medium uppercase",
+	"select-none",
+	"dark:bg-muted/80 dark:text-muted-foreground"
+]);
+/**
+* AvatarFallback Component - Premium Harmony V2
+*
+* Fallback content shown when image is loading or fails to load.
+* Typically displays initials or a placeholder icon.
+*
+* Features:
+* - Semantic color tokens for consistent theming
+* - Automatic delay support via Radix UI
+* - Uppercase initials with medium weight
+* - Proper dark mode support
+*/
+const AvatarFallback = memo(function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn(avatarFallbackVariants(), className),
+		...props
+	});
+});
+AvatarFallback.displayName = "AvatarFallback";
+
+//#endregion
+export { avatarImageVariants as a, avatarFallbackVariants as i, AvatarFallback as n, avatarVariants as o, AvatarImage as r, Avatar as t };
+//# sourceMappingURL=avatar-DjiX7nT8.mjs.map

package/dist/avatar-DjiX7nT8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-DjiX7nT8.mjs","names":[],"sources":["../src/components/elements/atoms/avatar/avatar.tsx"],"sourcesContent":["/**\n * @fileoverview Avatar Component - Premium Harmony V2\n *\n * A circular avatar image component with fallback support and size variants.\n * Built on Radix UI Avatar primitives for accessibility and flexibility.\n * Features Premium Harmony V2 design standards for high-quality user identity display.\n *\n * Features:\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Complete size variants (xs, sm, default, lg, touch, xl, 2xl)\n * - Super light/dark mode with seamless switching\n * - Radix UI primitives for accessibility\n * - Smooth fade-in animation on image load\n * - Premium Harmony V2 spring physics (SPRING_TACTILE for interactions)\n * - Touch-optimized with 44px minimum target (WCAG 2.5.5)\n * - Reduced motion support\n * - Data attributes for state tracking\n *\n * @module @od-oneapp/uni-ui/components/elements/avatar\n * @component Avatar\n *\n * @useCases\n * - User profiles: Displaying user photos with initials fallback in headers or cards\n * - Messaging: Identifying authors in chat bubbles or comment sections\n * - Directories: Listing team members or contacts in a grid or list view\n * - Selection: Selecting users from a menu or dropdown interface\n * - Identity: Showing current user in account switcher or profile menus\n * - Social: Displaying follower or following lists with presence indicators\n * - Grouping: Presenting multiple users in an avatar stack (see AvatarStack)\n *\n * @subcomponents\n * - Avatar - Root container with size variants\n * - AvatarImage - Image element with loading animation\n * - AvatarFallback - Fallback content (initials/icon)\n *\n * @variants\n * - size: xs, sm, default, lg, touch, xl, 2xl\n * - ring: boolean (adds border/ring)\n * - interactive: boolean (enables cursor and focus styles)\n *\n * @example <Avatar size=\"default\"><AvatarImage src=\"/avatar.jpg\" alt=\"User\" /><AvatarFallback>JD</AvatarFallback></Avatar>\n * @example <Avatar size=\"lg\" ring><AvatarImage src=\"/profile.jpg\" alt=\"Profile\" /><AvatarFallback>JD</AvatarFallback></Avatar>\n * @example <Avatar size=\"touch\" onClick={() => {}}><AvatarImage src=\"/contact.jpg\" alt=\"Contact\" /><AvatarFallback>TC</AvatarFallback></Avatar>\n */\n\n'use client';\n\nimport type { ComponentProps } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { motion } from 'motion/react';\n\nimport { cn } from '../../../../lib/utils';\nimport { SPRING_TACTILE } from '../../../ai-elements/ai-elements.constants';\n\n/**\n * Avatar variant definitions using CVA\n *\n * Base styles include:\n * - Circular shape with overflow hidden\n * - Flex container for content alignment\n * - Multiple size options (xs through 2xl, with 'touch' for 44px WCAG compliance)\n * - Focus-visible ring for keyboard navigation\n */\nconst avatarVariants = cva(\n  [\n    // Layout\n    'relative flex shrink-0 overflow-hidden',\n    // Shape\n    'rounded-full',\n    // Ensure aspect ratio\n    'aspect-square',\n  ],\n  {\n    variants: {\n      /**\n       * Size variants from extra-small to 2x-large\n       * 'touch' variant ensures 44px minimum for WCAG 2.5.5 Level AAA\n       */\n      size: {\n        xs: 'size-5 text-[10px]',\n        sm: 'size-6 text-xs',\n        default: 'size-8 text-sm',\n        lg: 'size-10 text-base',\n        touch: 'size-11 text-base', // 44px minimum for touch targets\n        xl: 'size-12 text-lg',\n        '2xl': 'size-16 text-xl',\n      },\n      /**\n       * Optional ring/border style\n       */\n      ring: {\n        true: [\n          'ring-2 ring-border ring-offset-2 ring-offset-background',\n          'dark:ring-border dark:ring-offset-background',\n        ],\n        false: '',\n      },\n      /**\n       * Interactive state styling\n       */\n      interactive: {\n        true: [\n          'cursor-pointer',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n          'transition-transform',\n        ],\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      ring: false,\n      interactive: false,\n    },\n  },\n);\n\n/**\n * Avatar component props\n */\ninterface AvatarProps\n  extends ComponentProps<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {}\n\n/**\n * Avatar Component - Premium Harmony V2\n *\n * Root container for avatar with size variants and spring physics.\n * Wraps Radix UI Avatar.Root for accessibility.\n *\n * Features:\n * - Auto-detects touch devices and adjusts tap feedback\n * - Respects reduced motion preferences\n * - Uses SPRING_TACTILE physics for natural feel\n * - Adds focus-visible ring for keyboard navigation\n * - Supports data attributes for state tracking\n */\nconst Avatar = memo(function Avatar({ className, size, ring, ...props }: AvatarProps) {\n  // Premium Harmony V2: Detect touch capability and motion preferences\n  const isTouchDevice = useMediaQuery('(pointer: coarse)');\n  const shouldReduceMotion = useReducedMotion();\n\n  // Determine if interactive (wrapped in button/anchor or has click handlers)\n  const isInteractive = Boolean(props.onClick || props.onMouseDown || props.onKeyDown);\n\n  const Comp = isInteractive ? motion(AvatarPrimitive.Root) : AvatarPrimitive.Root;\n\n  // Memoize className computation for performance\n  const avatarClassName = useMemo(\n    () => cn(avatarVariants({ size, ring, interactive: isInteractive }), className),\n    [size, ring, isInteractive, className],\n  );\n\n  // Premium Harmony V2: Spring physics with reduced motion support\n  const motionProps = isInteractive\n    ? {\n        whileTap: shouldReduceMotion ? undefined : { scale: 0.98 },\n        whileHover: shouldReduceMotion || isTouchDevice ? undefined : { scale: 1.02 },\n        transition: shouldReduceMotion ? { duration: 0 } : SPRING_TACTILE, // Use Premium Harmony V2 constant\n      }\n    : {};\n\n  return (\n    // eslint-disable-next-line react-hooks/static-components -- Dynamic component selection is intentional\n    <Comp\n      data-slot=\"avatar\"\n      data-interactive={isInteractive ? 'true' : undefined}\n      className={avatarClassName}\n      {...(motionProps as any)}\n      {...(props as any)}\n    />\n  );\n});\n\nAvatar.displayName = 'Avatar';\n\n/**\n * AvatarImage variant definitions\n */\nconst avatarImageVariants = cva([\n  // Size and aspect ratio\n  'aspect-square size-full',\n  // Object fit\n  'object-cover',\n  // Animation on load (respects prefers-reduced-motion)\n  'animate-avatar-fade-in',\n]);\n\n/**\n * AvatarImage component props\n */\ninterface AvatarImageProps extends ComponentProps<typeof AvatarPrimitive.Image> {}\n\n/**\n * AvatarImage Component - Premium Harmony V2\n *\n * Image element with fade-in animation on load.\n * Falls back to AvatarFallback if image fails to load.\n *\n * Features:\n * - Automatic data-state tracking (loading/loaded)\n * - Fade-in animation respects reduced motion preferences\n * - Semantic color tokens for consistent theming\n */\nconst AvatarImage = memo(function AvatarImage({ className, ...props }: AvatarImageProps) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(avatarImageVariants(), className)}\n      {...props}\n    />\n  );\n});\n\nAvatarImage.displayName = 'AvatarImage';\n\n/**\n * AvatarFallback variant definitions\n */\nconst avatarFallbackVariants = cva([\n  // Size and shape\n  'flex size-full items-center justify-center rounded-full',\n  // Background and text (semantic color tokens)\n  'bg-muted text-muted-foreground',\n  // Typography\n  'font-medium uppercase',\n  // Selection\n  'select-none',\n  // Dark mode\n  'dark:bg-muted/80 dark:text-muted-foreground',\n]);\n\n/**\n * AvatarFallback component props\n */\ninterface AvatarFallbackProps extends ComponentProps<typeof AvatarPrimitive.Fallback> {}\n\n/**\n * AvatarFallback Component - Premium Harmony V2\n *\n * Fallback content shown when image is loading or fails to load.\n * Typically displays initials or a placeholder icon.\n *\n * Features:\n * - Semantic color tokens for consistent theming\n * - Automatic delay support via Radix UI\n * - Uppercase initials with medium weight\n * - Proper dark mode support\n */\nconst AvatarFallback = memo(function AvatarFallback({ className, ...props }: AvatarFallbackProps) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(avatarFallbackVariants(), className)}\n      {...props}\n    />\n  );\n});\n\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport {\n  Avatar,\n  AvatarFallback,\n  avatarFallbackVariants,\n  AvatarImage,\n  avatarImageVariants,\n  avatarVariants,\n};\nexport type { AvatarFallbackProps, AvatarImageProps, AvatarProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,MAAM,iBAAiB,IACrB;CAEE;CAEA;CAEA;CACD,EACD;CACE,UAAU;EAKR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,OAAO;GACP,IAAI;GACJ,OAAO;GACR;EAID,MAAM;GACJ,MAAM,CACJ,2DACA,+CACD;GACD,OAAO;GACR;EAID,aAAa;GACX,MAAM;IACJ;IACA;IACA;IACD;GACD,OAAO;GACR;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,aAAa;EACd;CACF,CACF;;;;;;;;;;;;;;AAqBD,MAAM,SAAS,KAAK,SAAS,OAAO,EAAE,WAAW,MAAM,MAAM,GAAG,SAAsB;CAEpF,MAAM,gBAAgB,cAAc,oBAAoB;CACxD,MAAM,qBAAqB,kBAAkB;CAG7C,MAAM,gBAAgB,QAAQ,MAAM,WAAW,MAAM,eAAe,MAAM,UAAU;CAEpF,MAAM,OAAO,gBAAgB,OAAO,gBAAgB,KAAK,GAAG,gBAAgB;CAG5E,MAAM,kBAAkB,cAChB,GAAG,eAAe;EAAE;EAAM;EAAM,aAAa;EAAe,CAAC,EAAE,UAAU,EAC/E;EAAC;EAAM;EAAM;EAAe;EAAU,CACvC;CAGD,MAAM,cAAc,gBAChB;EACE,UAAU,qBAAqB,SAAY,EAAE,OAAO,KAAM;EAC1D,YAAY,sBAAsB,gBAAgB,SAAY,EAAE,OAAO,MAAM;EAC7E,YAAY,qBAAqB,EAAE,UAAU,GAAG,GAAG;EACpD,GACD,EAAE;AAEN,QAEE,oBAAC;EACC,aAAU;EACV,oBAAkB,gBAAgB,SAAS;EAC3C,WAAW;EACX,GAAK;EACL,GAAK;GACL;EAEJ;AAEF,OAAO,cAAc;;;;AAKrB,MAAM,sBAAsB,IAAI;CAE9B;CAEA;CAEA;CACD,CAAC;;;;;;;;;;;;AAkBF,MAAM,cAAc,KAAK,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AACvF,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,qBAAqB,EAAE,UAAU;EAC/C,GAAI;GACJ;EAEJ;AAEF,YAAY,cAAc;;;;AAK1B,MAAM,yBAAyB,IAAI;CAEjC;CAEA;CAEA;CAEA;CAEA;CACD,CAAC;;;;;;;;;;;;;AAmBF,MAAM,iBAAiB,KAAK,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AAChG,QACE,oBAAC,gBAAgB;EACf,aAAU;EACV,WAAW,GAAG,wBAAwB,EAAE,UAAU;EAClD,GAAI;GACJ;EAEJ;AAEF,eAAe,cAAc"}

package/dist/badge-CGTN2VG0.d.mts

@@ -0,0 +1,25 @@
+
+import { i as SkeletonProps } from "./skeleton-ByXUFNDF.mjs";
+import * as React$1 from "react";
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/elements/atoms/badge/badge.d.ts
+declare const badgeVariants: (props?: ({
+  variant?: "default" | "neutral" | "outline" | "success" | "info" | "warning" | "destructive" | "secondary" | null | undefined;
+  size?: "default" | "sm" | "lg" | "touch" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare const BadgeSkeleton: React$1.NamedExoticComponent<VariantProps<(props?: ({
+  variant?: "default" | "neutral" | "outline" | "success" | "info" | "warning" | "destructive" | "secondary" | null | undefined;
+  size?: "default" | "sm" | "lg" | "touch" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string> & SkeletonProps>;
+interface BadgeProps extends ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+  asChild?: boolean;
+  pulse?: boolean;
+  disableEntranceAnimation?: boolean;
+}
+declare const Badge: React$1.NamedExoticComponent<BadgeProps>;
+//#endregion
+export { badgeVariants as i, BadgeProps as n, BadgeSkeleton as r, Badge as t };
+//# sourceMappingURL=badge-CGTN2VG0.d.mts.map

package/dist/badge-CVoIuyYX.mjs

@@ -0,0 +1,242 @@
+'use client';
+import { t as cn } from "./utils-D2bGp2p_.mjs";
+import { a as SPRING_TACTILE } from "./motion-zelaDelJ.mjs";
+import { t as Skeleton } from "./skeleton-aXwA3YID.mjs";
+import * as React$1 from "react";
+import { memo } from "react";
+import { useMediaQuery, useReducedMotion } from "@mantine/hooks";
+import { cva } from "class-variance-authority";
+import { motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/components/elements/atoms/badge/badge.tsx
+/**
+* @fileoverview Badge Component - Premium Harmony V2
+*
+* A small label component for displaying status, categories, or counts.
+* Supports polymorphic rendering via `asChild` prop and multiple variants.
+* Features Premium Harmony V2 design standards for subtle but effective visual cues.
+*
+* Features:
+* - Premium Harmony V2 spring physics for tactile feedback
+* - Touch vs desktop detection for adaptive sizing
+* - 44px minimum touch targets on touch devices (WCAG 2.5.5)
+* - Respects reduced motion preferences
+* - ES2023 syntax with modern patterns
+* - Tailwind v4 CSS-first theming with CSS variables
+* - Complete pseudo-state coverage (:hover, :active, :focus-visible, :disabled)
+* - Super light/dark mode with seamless switching
+* - Full accessibility support (ARIA, keyboard navigation)
+* - Data attributes for state management
+* - Semantic color tokens for theme adaptation
+* - [Pillar 1: Loading & Skeletons] Integrated BadgeSkeleton for improved perceived performance
+* - [Pillar 4: Micro-moments] Added entrance animations and tactile scale-95 feedback for interactive states
+*
+* @module @od-oneapp/uni-ui/components/elements/badge
+* @component Badge
+*
+* @useCases
+* - Status indicators: Online, offline, busy, away status for users or systems
+* - Notification counts: Unread message counts on buttons or icons
+* - Category labels: Tagging content for organization and filtering
+* - Severity levels: Indicating error, warning, success, or info states
+* - User roles: Displaying admin, editor, or viewer permissions
+* - Feature flags: Labeling beta, new, or deprecated features
+* - Priority markers: Flagging high, medium, or low priority tasks
+* - Tag clouds: Grouping related topics or interests
+* - Pre-loading: Use BadgeSkeleton to reserve space during page transitions
+*
+* @variants
+* - variant: default | secondary | destructive | outline | success | warning | info | neutral
+* - size: sm | default | lg | touch
+*
+* @example <Badge variant="success">Active</Badge>
+* @example <Badge pulse>3</Badge>
+* @example <Badge variant="secondary" size="sm">Draft</Badge>
+* @example <Badge variant="destructive">Error</Badge>
+* @example <BadgeSkeleton size="default" />
+*/
+/**
+* Motion-enhanced Slot for polymorphic animations
+* Defined outside render to prevent component recreation
+*/
+const MotionSlot = motion.create(Slot);
+/**
+* Badge variant definitions using CVA
+*
+* Base styles include:
+* - Inline-flex layout with centered content
+* - Rounded pill shape with configurable border
+* - Typography and spacing
+* - Icon sizing and alignment
+* - Focus-visible ring for accessibility
+* - Smooth color transitions
+*/
+const badgeVariants = cva([
+	"inline-flex items-center justify-center gap-1 shrink-0 w-fit",
+	"whitespace-nowrap overflow-hidden",
+	"text-xs font-medium leading-tight",
+	"rounded-full border",
+	"[&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:pointer-events-none",
+	"transition-[color,background-color,border-color,box-shadow,transform] duration-150 ease-out",
+	"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
+	"aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+	"dark:aria-invalid:ring-destructive/40"
+], {
+	variants: {
+		variant: {
+			default: [
+				"border-transparent",
+				"bg-primary text-primary-foreground",
+				"[a&]:hover:bg-primary/85 [button&]:hover:bg-primary/85",
+				"[a&]:active:bg-primary/75 [button&]:active:bg-primary/75 [a&]:active:scale-95 [button&]:active:scale-95",
+				"dark:bg-primary/90 dark:text-primary-foreground",
+				"dark:[a&]:hover:bg-primary/80 dark:[button&]:hover:bg-primary/80"
+			],
+			secondary: [
+				"border-transparent",
+				"bg-secondary text-secondary-foreground",
+				"[a&]:hover:bg-secondary/80 [button&]:hover:bg-secondary/80",
+				"[a&]:active:bg-secondary/70 [button&]:active:bg-secondary/70 [a&]:active:scale-95 [button&]:active:scale-95",
+				"dark:bg-secondary/80 dark:text-secondary-foreground"
+			],
+			destructive: [
+				"border-transparent",
+				"bg-destructive text-destructive-foreground",
+				"[a&]:hover:bg-destructive/85 [button&]:hover:bg-destructive/85",
+				"[a&]:active:bg-destructive/75 [button&]:active:bg-destructive/75 [a&]:active:scale-95 [button&]:active:scale-95",
+				"focus-visible:ring-destructive/20",
+				"dark:bg-destructive/80 dark:text-destructive-foreground",
+				"dark:focus-visible:ring-destructive/40"
+			],
+			outline: [
+				"border-border bg-transparent",
+				"text-foreground",
+				"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				"[button&]:hover:bg-accent [button&]:hover:text-accent-foreground",
+				"[a&]:active:bg-accent/80 [button&]:active:bg-accent/80 [a&]:active:scale-95 [button&]:active:scale-95",
+				"dark:border-border/80 dark:text-foreground",
+				"dark:[a&]:hover:bg-accent/50 dark:[button&]:hover:bg-accent/50"
+			],
+			success: [
+				"border-transparent",
+				"bg-success/15 text-success",
+				"[a&]:hover:bg-success/25 [button&]:hover:bg-success/25",
+				"[a&]:active:bg-success/30 [button&]:active:bg-success/30 [a&]:active:scale-95 [button&]:active:scale-95",
+				"dark:bg-success/20 dark:text-success",
+				"dark:[a&]:hover:bg-success/30 dark:[button&]:hover:bg-success/30"
+			],
+			warning: [
+				"border-transparent",
+				"bg-warning/15 text-warning",
+				"[a&]:hover:bg-warning/25 [button&]:hover:bg-warning/25",
+				"[a&]:active:bg-warning/30 [button&]:active:bg-warning/30 [a&]:active:scale-95 [button&]:active:scale-95",
+				"dark:bg-warning/20 dark:text-warning",
+				"dark:[a&]:hover:bg-warning/30 dark:[button&]:hover:bg-warning/30"
+			],
+			info: [
+				"border-transparent",
+				"bg-info/15 text-info",
+				"[a&]:hover:bg-info/25 [button&]:hover:bg-info/25",
+				"[a&]:active:bg-info/30 [button&]:active:bg-info/30 [a&]:active:scale-95 [button&]:active:scale-95",
+				"dark:bg-info/20 dark:text-info",
+				"dark:[a&]:hover:bg-info/30 dark:[button&]:hover:bg-info/30"
+			],
+			neutral: [
+				"border-border",
+				"bg-muted text-muted-foreground",
+				"[a&]:hover:bg-muted/80 [button&]:hover:bg-muted/80",
+				"[a&]:active:bg-muted/70 [button&]:active:bg-muted/70 [a&]:active:scale-95 [button&]:active:scale-95",
+				"dark:bg-muted/80 dark:border-border/80"
+			]
+		},
+		size: {
+			sm: "px-1.5 py-0.5 text-2xs [&>svg]:size-2.5",
+			default: "px-2 py-0.5 text-xs [&>svg]:size-3",
+			lg: "px-2.5 py-1 text-sm [&>svg]:size-3.5",
+			touch: "px-3 py-1.5 text-sm min-h-[44px] min-w-[44px] [&>svg]:size-4"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* [Pillar 1: Loading & Skeletons] BadgeSkeleton Component
+* Perfectly mirrors Badge dimensions and variants for seamless loading transitions.
+*/
+const BadgeSkeleton = React$1.memo(function BadgeSkeleton({ className, variant, size, ...props }) {
+	return /* @__PURE__ */ jsx(Skeleton, {
+		"data-slot": "badge-skeleton",
+		shape: "pill",
+		className: cn(badgeVariants({
+			variant,
+			size
+		}), "animate-pulse opacity-50", className),
+		...props
+	});
+});
+/**
+* Badge Component
+*
+* A versatile badge/label component for displaying status, categories, or counts.
+* Supports polymorphic rendering for use as links or buttons.
+*
+* Premium Harmony V2 features:
+* - Automatic touch size detection and application
+* - Spring physics for tactile feedback on interactive badges
+* - Respects user's reduced motion preferences
+* - Data attributes for state-driven styling
+*/
+const Badge = memo(function Badge({ className, variant, size: sizeProp, asChild = false, pulse = false, disableEntranceAnimation = false, ...props }) {
+	const [mounted, setMounted] = React$1.useState(false);
+	React$1.useEffect(() => {
+		setMounted(true);
+	}, []);
+	const reducedMotion = useReducedMotion() ?? false;
+	const isTouch = useMediaQuery("(pointer: coarse)");
+	const touchActive = mounted && isTouch;
+	const motionReduced = mounted && reducedMotion;
+	const isInteractive = props.onClick || props.onMouseDown || asChild;
+	const Comp = asChild ? MotionSlot : isInteractive ? motion.span : "span";
+	const size = touchActive && !sizeProp ? "touch" : sizeProp;
+	const state = pulse ? "pulsing" : isInteractive ? "interactive" : "default";
+	const badgeClassName = cn(badgeVariants({
+		variant,
+		size
+	}), pulse && !motionReduced && "animate-badge-pulse", className);
+	const entranceProps = disableEntranceAnimation || motionReduced ? {} : {
+		initial: {
+			opacity: 0,
+			scale: .95
+		},
+		animate: {
+			opacity: 1,
+			scale: 1
+		}
+	};
+	const motionProps = (() => {
+		if (isInteractive && !motionReduced && !asChild) return {
+			whileTap: { scale: .95 },
+			transition: SPRING_TACTILE,
+			...entranceProps
+		};
+		if (motionReduced) return {};
+		return { ...entranceProps };
+	})();
+	const { onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, onAnimationStart: _onAnimationStart, onAnimationIteration: _onAnimationIteration, onAnimationCancel: _onAnimationCancel, onAnimationComplete: _onAnimationComplete, ...domProps } = props;
+	return /* @__PURE__ */ jsx(Comp, {
+		"data-slot": "badge",
+		"data-state": state,
+		className: badgeClassName,
+		...motionProps,
+		...domProps
+	});
+});
+Badge.displayName = "Badge";
+
+//#endregion
+export { BadgeSkeleton as n, badgeVariants as r, Badge as t };
+//# sourceMappingURL=badge-CVoIuyYX.mjs.map

package/dist/badge-CVoIuyYX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge-CVoIuyYX.mjs","names":["React"],"sources":["../src/components/elements/atoms/badge/badge.tsx"],"sourcesContent":["/**\n * @fileoverview Badge Component - Premium Harmony V2\n *\n * A small label component for displaying status, categories, or counts.\n * Supports polymorphic rendering via `asChild` prop and multiple variants.\n * Features Premium Harmony V2 design standards for subtle but effective visual cues.\n *\n * Features:\n * - Premium Harmony V2 spring physics for tactile feedback\n * - Touch vs desktop detection for adaptive sizing\n * - 44px minimum touch targets on touch devices (WCAG 2.5.5)\n * - Respects reduced motion preferences\n * - ES2023 syntax with modern patterns\n * - Tailwind v4 CSS-first theming with CSS variables\n * - Complete pseudo-state coverage (:hover, :active, :focus-visible, :disabled)\n * - Super light/dark mode with seamless switching\n * - Full accessibility support (ARIA, keyboard navigation)\n * - Data attributes for state management\n * - Semantic color tokens for theme adaptation\n * - [Pillar 1: Loading & Skeletons] Integrated BadgeSkeleton for improved perceived performance\n * - [Pillar 4: Micro-moments] Added entrance animations and tactile scale-95 feedback for interactive states\n *\n * @module @od-oneapp/uni-ui/components/elements/badge\n * @component Badge\n *\n * @useCases\n * - Status indicators: Online, offline, busy, away status for users or systems\n * - Notification counts: Unread message counts on buttons or icons\n * - Category labels: Tagging content for organization and filtering\n * - Severity levels: Indicating error, warning, success, or info states\n * - User roles: Displaying admin, editor, or viewer permissions\n * - Feature flags: Labeling beta, new, or deprecated features\n * - Priority markers: Flagging high, medium, or low priority tasks\n * - Tag clouds: Grouping related topics or interests\n * - Pre-loading: Use BadgeSkeleton to reserve space during page transitions\n *\n * @variants\n * - variant: default | secondary | destructive | outline | success | warning | info | neutral\n * - size: sm | default | lg | touch\n *\n * @example <Badge variant=\"success\">Active</Badge>\n * @example <Badge pulse>3</Badge>\n * @example <Badge variant=\"secondary\" size=\"sm\">Draft</Badge>\n * @example <Badge variant=\"destructive\">Error</Badge>\n * @example <BadgeSkeleton size=\"default\" />\n */\n\n'use client';\n\nimport type { ComponentProps } from 'react';\nimport * as React from 'react';\nimport { memo } from 'react';\n\nimport { useMediaQuery, useReducedMotion } from '@mantine/hooks';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { motion } from 'motion/react';\n\nimport { SPRING_TACTILE } from '../../../../constants/motion';\nimport { cn } from '../../../../lib/utils';\nimport { Skeleton } from '../skeleton/skeleton';\n\n/**\n * Motion-enhanced Slot for polymorphic animations\n * Defined outside render to prevent component recreation\n */\nconst MotionSlot = motion.create(Slot);\n\n/**\n * Badge variant definitions using CVA\n *\n * Base styles include:\n * - Inline-flex layout with centered content\n * - Rounded pill shape with configurable border\n * - Typography and spacing\n * - Icon sizing and alignment\n * - Focus-visible ring for accessibility\n * - Smooth color transitions\n */\nconst badgeVariants = cva(\n  [\n    // Layout & sizing\n    'inline-flex items-center justify-center gap-1 shrink-0 w-fit',\n    'whitespace-nowrap overflow-hidden',\n    // Typography\n    'text-xs font-medium leading-tight',\n    // Shape\n    'rounded-full border',\n    // Icon handling\n    '[&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:pointer-events-none',\n    // Transitions (smooth color/shadow changes)\n    'transition-[color,background-color,border-color,box-shadow,transform] duration-150 ease-out',\n    // [Pillar 3: Pseudo-states] Enhanced focus ring using ring-primary token\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2',\n    // Invalid state (form validation)\n    'aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:border-destructive',\n    'dark:aria-invalid:ring-destructive/40',\n  ],\n  {\n    variants: {\n      /**\n       * Visual variant styles\n       * Each variant includes complete pseudo-state coverage:\n       * - Default state\n       * - Hover state (for interactive badges)\n       * - Active/pressed state\n       * - Dark mode overrides\n       */\n      variant: {\n        default: [\n          'border-transparent',\n          'bg-primary text-primary-foreground',\n          // Hover state (only for anchor/button badges)\n          '[a&]:hover:bg-primary/85 [button&]:hover:bg-primary/85',\n          '[a&]:active:bg-primary/75 [button&]:active:bg-primary/75 [a&]:active:scale-95 [button&]:active:scale-95',\n          // Dark mode refinements\n          'dark:bg-primary/90 dark:text-primary-foreground',\n          'dark:[a&]:hover:bg-primary/80 dark:[button&]:hover:bg-primary/80',\n        ],\n        secondary: [\n          'border-transparent',\n          'bg-secondary text-secondary-foreground',\n          '[a&]:hover:bg-secondary/80 [button&]:hover:bg-secondary/80',\n          '[a&]:active:bg-secondary/70 [button&]:active:bg-secondary/70 [a&]:active:scale-95 [button&]:active:scale-95',\n          'dark:bg-secondary/80 dark:text-secondary-foreground',\n        ],\n        destructive: [\n          'border-transparent',\n          'bg-destructive text-destructive-foreground',\n          '[a&]:hover:bg-destructive/85 [button&]:hover:bg-destructive/85',\n          '[a&]:active:bg-destructive/75 [button&]:active:bg-destructive/75 [a&]:active:scale-95 [button&]:active:scale-95',\n          'focus-visible:ring-destructive/20',\n          // Dark mode: slightly muted destructive\n          'dark:bg-destructive/80 dark:text-destructive-foreground',\n          'dark:focus-visible:ring-destructive/40',\n        ],\n        outline: [\n          'border-border bg-transparent',\n          'text-foreground',\n          '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',\n          '[button&]:hover:bg-accent [button&]:hover:text-accent-foreground',\n          '[a&]:active:bg-accent/80 [button&]:active:bg-accent/80 [a&]:active:scale-95 [button&]:active:scale-95',\n          // Dark mode\n          'dark:border-border/80 dark:text-foreground',\n          'dark:[a&]:hover:bg-accent/50 dark:[button&]:hover:bg-accent/50',\n        ],\n        // Semantic variants with translucent backgrounds\n        success: [\n          'border-transparent',\n          'bg-success/15 text-success',\n          '[a&]:hover:bg-success/25 [button&]:hover:bg-success/25',\n          '[a&]:active:bg-success/30 [button&]:active:bg-success/30 [a&]:active:scale-95 [button&]:active:scale-95',\n          // Dark mode: slightly more opaque for visibility\n          'dark:bg-success/20 dark:text-success',\n          'dark:[a&]:hover:bg-success/30 dark:[button&]:hover:bg-success/30',\n        ],\n        warning: [\n          'border-transparent',\n          'bg-warning/15 text-warning',\n          '[a&]:hover:bg-warning/25 [button&]:hover:bg-warning/25',\n          '[a&]:active:bg-warning/30 [button&]:active:bg-warning/30 [a&]:active:scale-95 [button&]:active:scale-95',\n          'dark:bg-warning/20 dark:text-warning',\n          'dark:[a&]:hover:bg-warning/30 dark:[button&]:hover:bg-warning/30',\n        ],\n        info: [\n          'border-transparent',\n          'bg-info/15 text-info',\n          '[a&]:hover:bg-info/25 [button&]:hover:bg-info/25',\n          '[a&]:active:bg-info/30 [button&]:active:bg-info/30 [a&]:active:scale-95 [button&]:active:scale-95',\n          'dark:bg-info/20 dark:text-info',\n          'dark:[a&]:hover:bg-info/30 dark:[button&]:hover:bg-info/30',\n        ],\n        neutral: [\n          'border-border',\n          'bg-muted text-muted-foreground',\n          '[a&]:hover:bg-muted/80 [button&]:hover:bg-muted/80',\n          '[a&]:active:bg-muted/70 [button&]:active:bg-muted/70 [a&]:active:scale-95 [button&]:active:scale-95',\n          'dark:bg-muted/80 dark:border-border/80',\n        ],\n      },\n      /**\n       * Size variants for different contexts\n       */\n      size: {\n        sm: 'px-1.5 py-0.5 text-2xs [&>svg]:size-2.5',\n        default: 'px-2 py-0.5 text-xs [&>svg]:size-3',\n        lg: 'px-2.5 py-1 text-sm [&>svg]:size-3.5',\n        touch: 'px-3 py-1.5 text-sm min-h-[44px] min-w-[44px] [&>svg]:size-4',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\n/**\n * [Pillar 1: Loading & Skeletons] BadgeSkeleton Component\n * Perfectly mirrors Badge dimensions and variants for seamless loading transitions.\n */\nexport const BadgeSkeleton = React.memo(function BadgeSkeleton({\n  className,\n  variant,\n  size,\n  ...props\n}: VariantProps<typeof badgeVariants> & React.ComponentProps<typeof Skeleton>) {\n  return (\n    <Skeleton\n      data-slot=\"badge-skeleton\"\n      shape=\"pill\"\n      className={cn(badgeVariants({ variant, size }), 'animate-pulse opacity-50', className)}\n      {...props}\n    />\n  );\n});\n\n/**\n * Badge component props\n */\ninterface BadgeProps extends ComponentProps<'span'>, VariantProps<typeof badgeVariants> {\n  /** Render as child element (polymorphic) */\n  asChild?: boolean;\n  /** Enable pulse animation for notification badges */\n  pulse?: boolean;\n  /** [Pillar 4: Micro-moments] Disable entrance animation */\n  disableEntranceAnimation?: boolean;\n}\n\n/**\n * Badge Component\n *\n * A versatile badge/label component for displaying status, categories, or counts.\n * Supports polymorphic rendering for use as links or buttons.\n *\n * Premium Harmony V2 features:\n * - Automatic touch size detection and application\n * - Spring physics for tactile feedback on interactive badges\n * - Respects user's reduced motion preferences\n * - Data attributes for state-driven styling\n */\nconst Badge = memo(function Badge({\n  className,\n  variant,\n  size: sizeProp,\n  asChild = false,\n  pulse = false,\n  disableEntranceAnimation = false,\n  ...props\n}: BadgeProps) {\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  // Premium Harmony V2: Accessibility & Device Detection\n  const reducedMotion = useReducedMotion() ?? false;\n  const isTouch = useMediaQuery('(pointer: coarse)');\n\n  // Avoid hydration mismatch by only applying client-specific attributes on the client\n  const touchActive = mounted && isTouch;\n  const motionReduced = mounted && reducedMotion;\n\n  // Determine component type - use motion(Slot) for polymorphic rendering to support animations\n  const isInteractive = props.onClick || props.onMouseDown || asChild;\n  const Comp = asChild ? MotionSlot : (isInteractive ? motion.span : 'span');\n\n  // Auto-apply touch size on touch devices for accessibility (WCAG 2.5.5)\n  const size = touchActive && !sizeProp ? 'touch' : sizeProp;\n\n  // Determine state for data attribute\n  const state = pulse ? 'pulsing' : (isInteractive ? 'interactive' : 'default');\n\n  // className computation\n  const badgeClassName = cn(\n    badgeVariants({ variant, size }),\n    // Pulse animation for notification badges (only if motion is allowed)\n    pulse && !motionReduced && 'animate-badge-pulse',\n    className,\n  );\n\n  // [Pillar 4: Micro-moments] Entrance animations\n  const entranceProps =\n    disableEntranceAnimation || motionReduced\n      ? {}\n      : {\n          initial: { opacity: 0, scale: 0.95 },\n          animate: { opacity: 1, scale: 1 },\n        };\n\n  // Motion props for interactive badges - use Premium Harmony V2 spring physics\n  const motionProps = (() => {\n    if (isInteractive && !motionReduced && !asChild) {\n      return {\n        whileTap: { scale: 0.95 },\n        transition: SPRING_TACTILE,\n        ...entranceProps,\n      };\n    }\n    if (motionReduced) {\n      return {};\n    }\n    return { ...entranceProps };\n  })();\n\n  // Filter out props that conflict between HTML attributes and Motion/Slot types\n  const {\n    onDrag: _onDrag,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    onAnimationStart: _onAnimationStart,\n    onAnimationIteration: _onAnimationIteration,\n    onAnimationCancel: _onAnimationCancel,\n    onAnimationComplete: _onAnimationComplete,\n    ...domProps\n  } = props as any;\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-state={state}\n      className={badgeClassName}\n      {...motionProps}\n      {...domProps}\n    />\n  );\n});\n\nBadge.displayName = 'Badge';\n\nexport { Badge, badgeVariants };\nexport type { BadgeProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAM,aAAa,OAAO,OAAO,KAAK;;;;;;;;;;;;AAatC,MAAM,gBAAgB,IACpB;CAEE;CACA;CAEA;CAEA;CAEA;CAEA;CAEA;CAEA;CACA;CACD,EACD;CACE,UAAU;EASR,SAAS;GACP,SAAS;IACP;IACA;IAEA;IACA;IAEA;IACA;IACD;GACD,WAAW;IACT;IACA;IACA;IACA;IACA;IACD;GACD,aAAa;IACX;IACA;IACA;IACA;IACA;IAEA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IAEA;IACA;IACD;GAED,SAAS;IACP;IACA;IACA;IACA;IAEA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACD;GACD,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACD;GACD,SAAS;IACP;IACA;IACA;IACA;IACA;IACD;GACF;EAID,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;;;;;AAMD,MAAa,gBAAgBA,QAAM,KAAK,SAAS,cAAc,EAC7D,WACA,SACA,MACA,GAAG,SAC0E;AAC7E,QACE,oBAAC;EACC,aAAU;EACV,OAAM;EACN,WAAW,GAAG,cAAc;GAAE;GAAS;GAAM,CAAC,EAAE,4BAA4B,UAAU;EACtF,GAAI;GACJ;EAEJ;;;;;;;;;;;;;AA0BF,MAAM,QAAQ,KAAK,SAAS,MAAM,EAChC,WACA,SACA,MAAM,UACN,UAAU,OACV,QAAQ,OACR,2BAA2B,OAC3B,GAAG,SACU;CACb,MAAM,CAAC,SAAS,cAAcA,QAAM,SAAS,MAAM;AAEnD,SAAM,gBAAgB;AACpB,aAAW,KAAK;IACf,EAAE,CAAC;CAGN,MAAM,gBAAgB,kBAAkB,IAAI;CAC5C,MAAM,UAAU,cAAc,oBAAoB;CAGlD,MAAM,cAAc,WAAW;CAC/B,MAAM,gBAAgB,WAAW;CAGjC,MAAM,gBAAgB,MAAM,WAAW,MAAM,eAAe;CAC5D,MAAM,OAAO,UAAU,aAAc,gBAAgB,OAAO,OAAO;CAGnE,MAAM,OAAO,eAAe,CAAC,WAAW,UAAU;CAGlD,MAAM,QAAQ,QAAQ,YAAa,gBAAgB,gBAAgB;CAGnE,MAAM,iBAAiB,GACrB,cAAc;EAAE;EAAS;EAAM,CAAC,EAEhC,SAAS,CAAC,iBAAiB,uBAC3B,UACD;CAGD,MAAM,gBACJ,4BAA4B,gBACxB,EAAE,GACF;EACE,SAAS;GAAE,SAAS;GAAG,OAAO;GAAM;EACpC,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG;EAClC;CAGP,MAAM,qBAAqB;AACzB,MAAI,iBAAiB,CAAC,iBAAiB,CAAC,QACtC,QAAO;GACL,UAAU,EAAE,OAAO,KAAM;GACzB,YAAY;GACZ,GAAG;GACJ;AAEH,MAAI,cACF,QAAO,EAAE;AAEX,SAAO,EAAE,GAAG,eAAe;KACzB;CAGJ,MAAM,EACJ,QAAQ,SACR,aAAa,cACb,WAAW,YACX,kBAAkB,mBAClB,sBAAsB,uBACtB,mBAAmB,oBACnB,qBAAqB,sBACrB,GAAG,aACD;AAEJ,QACE,oBAAC;EACC,aAAU;EACV,cAAY;EACZ,WAAW;EACX,GAAI;EACJ,GAAI;GACJ;EAEJ;AAEF,MAAM,cAAc"}

package/dist/badge-DH0tY3wJ.d.mts

@@ -0,0 +1,25 @@
+
+import { i as SkeletonProps } from "./skeleton-ByXUFNDF.mjs";
+import * as React$1 from "react";
+import { ComponentProps } from "react";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/elements/atoms/badge/badge.d.ts
+declare const badgeVariants: (props?: ({
+  variant?: "success" | "info" | "warning" | "default" | "destructive" | "outline" | "secondary" | "neutral" | null | undefined;
+  size?: "default" | "sm" | "lg" | "touch" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare const BadgeSkeleton: React$1.NamedExoticComponent<VariantProps<(props?: ({
+  variant?: "success" | "info" | "warning" | "default" | "destructive" | "outline" | "secondary" | "neutral" | null | undefined;
+  size?: "default" | "sm" | "lg" | "touch" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string> & SkeletonProps>;
+interface BadgeProps extends ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
+  asChild?: boolean;
+  pulse?: boolean;
+  disableEntranceAnimation?: boolean;
+}
+declare const Badge: React$1.NamedExoticComponent<BadgeProps>;
+//#endregion
+export { badgeVariants as i, BadgeProps as n, BadgeSkeleton as r, Badge as t };
+//# sourceMappingURL=badge-DH0tY3wJ.d.mts.map

package/dist/bars-CWTAPKgm.d.mts

@@ -0,0 +1,20 @@
+
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/charts/bars/bars.d.ts
+interface BarSeriesStyle {
+  id: string;
+  barClassName?: string;
+  barFill?: string;
+}
+interface BarsProps {
+  seriesStyles?: BarSeriesStyle[];
+  radius?: number;
+}
+declare function Bars({
+  seriesStyles,
+  radius
+}: BarsProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Bars as n, BarsProps as r, BarSeriesStyle as t };
+//# sourceMappingURL=bars-CWTAPKgm.d.mts.map