flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/core/Button/Button.theme.js

@@ -4,22 +4,119 @@
 var buttonTheme = {
     // Base styles for the button element
     baseStyle: "relative inline-flex items-center justify-center gap-2 font-semibold focus:outline-none rounded-[var(--button-rounded)] overflow-hidden cursor-pointer transition-all duration-300 ease-in-out min-w-fit flex-shrink-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 cursor-pointer",
-    // Color-based styling using data attributes and CSS variables
-    colorStyles: {
-        neutral: "data-[variant=filled]:bg-white data-[variant=filled]:text-[var(--color-text-secondary)] data-[variant=filled]:border-[var(--color-border)] data-[variant=filled]:hover:bg-neutral-50 data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-neutral-400/10 data-[variant=filled]:focus-visible:outline-neutral-600 data-[variant=outline]:text-[var(--color-text-secondary)] data-[variant=outline]:border-[var(--color-border)] data-[variant=outline]:hover:bg-neutral-50 data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-neutral-400/10 data-[variant=outline]:focus-visible:outline-neutral-600 data-[variant=ghost]:text-[var(--color-text-secondary)] data-[variant=ghost]:bg-neutral-100 data-[variant=ghost]:hover:bg-neutral-200 data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-neutral-400/20 data-[variant=ghost]:focus-visible:outline-neutral-600 data-[variant=link]:text-[var(--color-text-secondary)] data-[variant=link]:focus-visible:outline-neutral-600",
-        dark: "data-[variant=filled]:bg-[var(--color-background-quinary)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-background-quinary)] data-[variant=filled]:hover:bg-[var(--color-background-quinary)]/90 data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-border)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-background-quinary)] data-[variant=outline]:text-[var(--color-background-quinary)] data-[variant=outline]:border-[var(--color-background-quinary)] data-[variant=outline]:hover:bg-[var(--color-background-tertiary)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-border)]/20 data-[variant=outline]:focus-visible:outline-[var(--color-background-quinary)] data-[variant=ghost]:text-[var(--color-text-primary)] data-[variant=ghost]:bg-[var(--color-background-tertiary)] data-[variant=ghost]:hover:bg-[var(--color-background-quaternary)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-border)]/10 data-[variant=ghost]:focus-visible:outline-[var(--color-background-quinary)] data-[variant=link]:text-[var(--color-text-primary)] data-[variant=link]:focus-visible:outline-[var(--color-background-quinary)]",
-        primary: "data-[variant=filled]:bg-[var(--color-primary)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-primary)] data-[variant=filled]:hover:bg-[var(--color-primary-700)] data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-primary)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-primary-600)] data-[variant=outline]:text-[var(--color-primary-600)] data-[variant=outline]:border-[var(--color-primary-600)] data-[variant=outline]:hover:bg-[var(--color-primary-50)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-primary)]/30 data-[variant=outline]:focus-visible:outline-[var(--color-primary-600)] data-[variant=ghost]:text-[var(--color-primary-600)] data-[variant=ghost]:bg-[var(--color-primary)]/10 data-[variant=ghost]:hover:bg-[var(--color-primary-50)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-primary)]/10 data-[variant=ghost]:focus-visible:outline-[var(--color-primary-600)] data-[variant=link]:text-[var(--color-primary-600)] data-[variant=link]:focus-visible:outline-[var(--color-primary-600)]",
-        success: "data-[variant=filled]:bg-[var(--color-success)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-success)] data-[variant=filled]:hover:bg-[var(--color-success-600)] data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-success)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-success-600)] data-[variant=outline]:text-[var(--color-success-600)] data-[variant=outline]:border-[var(--color-success-600)] data-[variant=outline]:hover:bg-[var(--color-success-50)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-success)]/30 data-[variant=outline]:focus-visible:outline-[var(--color-success-600)] data-[variant=ghost]:text-[var(--color-success-600)] data-[variant=ghost]:bg-[var(--color-success)]/10 data-[variant=ghost]:hover:bg-[var(--color-success-50)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-success)]/20 data-[variant=ghost]:focus-visible:outline-[var(--color-success-600)] data-[variant=link]:text-[var(--color-success-600)] data-[variant=link]:focus-visible:outline-[var(--color-success-600)]",
-        warning: "data-[variant=filled]:bg-[var(--color-warning)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-warning)] data-[variant=filled]:hover:bg-[var(--color-warning-600)] data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-warning)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-warning-600)] data-[variant=outline]:text-[var(--color-warning-600)] data-[variant=outline]:border-[var(--color-warning-600)] data-[variant=outline]:hover:bg-[var(--color-warning-50)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-warning)]/30 data-[variant=outline]:focus-visible:outline-[var(--color-warning-600)] data-[variant=ghost]:text-[var(--color-warning-600)] data-[variant=ghost]:bg-[var(--color-warning)]/10 data-[variant=ghost]:hover:bg-[var(--color-warning-50)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-warning)]/20 data-[variant=ghost]:focus-visible:outline-[var(--color-warning-600)] data-[variant=link]:text-[var(--color-warning-600)] data-[variant=link]:focus-visible:outline-[var(--color-warning-600)]",
-        danger: "data-[variant=filled]:bg-[var(--color-danger)] data-[variant=filled]:text-white data-[variant=filled]:border-[var(--color-danger)] data-[variant=filled]:hover:bg-[var(--color-danger-600)] data-[variant=filled]:hover:ring-2 data-[variant=filled]:hover:ring-[var(--color-danger)]/20 data-[variant=filled]:focus-visible:outline-[var(--color-danger-600)] data-[variant=outline]:text-[var(--color-danger-600)] data-[variant=outline]:border-[var(--color-danger-600)] data-[variant=outline]:hover:bg-[var(--color-danger-50)] data-[variant=outline]:hover:ring-2 data-[variant=outline]:hover:ring-[var(--color-danger)]/30 data-[variant=outline]:focus-visible:outline-[var(--color-danger-600)] data-[variant=ghost]:text-[var(--color-danger-600)] data-[variant=ghost]:bg-[var(--color-danger)]/10 data-[variant=ghost]:hover:bg-[var(--color-danger-50)] data-[variant=ghost]:hover:ring-2 data-[variant=ghost]:hover:ring-[var(--color-danger)]/20 data-[variant=ghost]:focus-visible:outline-[var(--color-danger-600)] data-[variant=link]:text-[var(--color-danger-600)] data-[variant=link]:focus-visible:outline-[var(--color-danger-600)]",
-    },
-    // Visual style variants (appearance) - rings moved to colorStyles for color awareness
+    // Visual style variants - STRUCTURE only (no colors)
     variantStyles: {
-        filled: "border ",
+        filled: "border",
         outline: "bg-transparent border",
-        ghost: "border-transparent !bg-transparent",
+        ghost: "border-transparent",
         link: "bg-transparent border-transparent",
     },
+    // Color styles organized BY VARIANT for reliable dark: prefixes
+    variantColors: {
+        // Filled variant - solid backgrounds
+        filled: {
+            neutral: "bg-[var(--color-neutral-100)] text-[var(--color-text-primary)] border-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "focus-visible:outline-[var(--color-text-secondary)] " +
+                "dark:bg-[var(--color-neutral-700)] dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
+                "dark:hover:bg-[var(--color-neutral-600)]",
+            dark: "bg-[var(--color-neutral-900)] text-[var(--color-text-inverse)] border-[var(--color-neutral-900)] " +
+                "hover:bg-[var(--color-neutral-800)] hover:ring-2 hover:ring-[var(--color-neutral-700)] " +
+                "focus-visible:outline-[var(--color-neutral-900)] " +
+                "dark:bg-[var(--color-neutral-200)] dark:text-[var(--color-neutral-900)] dark:border-[var(--color-neutral-200)] " +
+                "dark:hover:bg-[var(--color-neutral-300)]",
+            primary: "bg-[var(--color-primary)] text-white border-[var(--color-primary)] " +
+                "hover:bg-[var(--color-primary-700)] hover:ring-2 hover:ring-[var(--color-primary)]/20 " +
+                "focus-visible:outline-[var(--color-primary-600)] " +
+                "dark:bg-[var(--color-primary-600)] dark:border-[var(--color-primary-600)] " +
+                "dark:hover:bg-[var(--color-primary-500)]",
+            success: "bg-[var(--color-success)] text-white border-[var(--color-success)] " +
+                "hover:bg-[var(--color-success-600)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
+                "focus-visible:outline-[var(--color-success-600)] " +
+                "dark:bg-[var(--color-success-600)] dark:border-[var(--color-success-600)] " +
+                "dark:hover:bg-[var(--color-success-500)]",
+            warning: "bg-[var(--color-warning)] text-white border-[var(--color-warning)] " +
+                "hover:bg-[var(--color-warning-600)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
+                "focus-visible:outline-[var(--color-warning-600)] " +
+                "dark:bg-[var(--color-warning-600)] dark:border-[var(--color-warning-600)] " +
+                "dark:hover:bg-[var(--color-warning-500)]",
+            danger: "bg-[var(--color-danger)] text-white border-[var(--color-danger)] " +
+                "hover:bg-[var(--color-danger-600)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
+                "focus-visible:outline-[var(--color-danger-600)] " +
+                "dark:bg-[var(--color-danger-600)] dark:border-[var(--color-danger-600)] " +
+                "dark:hover:bg-[var(--color-danger-500)]",
+        },
+        // Outline variant - transparent bg with colored border
+        outline: {
+            neutral: "text-[var(--color-text-primary)] border-[var(--color-border)] " +
+                "hover:bg-[var(--color-neutral-100)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "focus-visible:outline-[var(--color-text-secondary)] " +
+                "dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-600)] " +
+                "dark:hover:bg-[var(--color-neutral-800)]",
+            dark: "text-[var(--color-neutral-900)] border-[var(--color-neutral-900)] " +
+                "hover:bg-[var(--color-neutral-100)] hover:ring-2 hover:ring-[var(--color-neutral-200)] " +
+                "focus-visible:outline-[var(--color-neutral-900)] " +
+                "dark:text-[var(--color-text-primary)] dark:border-[var(--color-neutral-300)] " +
+                "dark:hover:bg-[var(--color-neutral-800)]",
+            primary: "text-[var(--color-primary-600)] border-[var(--color-primary-600)] " +
+                "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/30 " +
+                "focus-visible:outline-[var(--color-primary-600)] " +
+                "dark:text-[var(--color-primary-300)] dark:border-[var(--color-primary-400)] " +
+                "dark:hover:bg-[var(--color-primary-900)]/30",
+            success: "text-[var(--color-success-600)] border-[var(--color-success-600)] " +
+                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/30 " +
+                "focus-visible:outline-[var(--color-success-600)] " +
+                "dark:text-[var(--color-success-300)] dark:border-[var(--color-success-400)] " +
+                "dark:hover:bg-[var(--color-success-900)]/30",
+            warning: "text-[var(--color-warning-600)] border-[var(--color-warning-600)] " +
+                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/30 " +
+                "focus-visible:outline-[var(--color-warning-600)] " +
+                "dark:text-[var(--color-warning-300)] dark:border-[var(--color-warning-400)] " +
+                "dark:hover:bg-[var(--color-warning-900)]/30",
+            danger: "text-[var(--color-danger-600)] border-[var(--color-danger-600)] " +
+                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/30 " +
+                "focus-visible:outline-[var(--color-danger-600)] " +
+                "dark:text-[var(--color-danger-300)] dark:border-[var(--color-danger-400)] " +
+                "dark:hover:bg-[var(--color-danger-900)]/30",
+        },
+        // Ghost variant - subtle background tints
+        ghost: {
+            neutral: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
+                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-border)] " +
+                "focus-visible:outline-[var(--color-text-secondary)] " +
+                "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-neutral-900)] " +
+                "dark:hover:bg-[var(--color-neutral-800)]",
+            dark: "text-[var(--color-text-primary)] bg-[var(--color-neutral-100)] " +
+                "hover:bg-[var(--color-neutral-200)] hover:ring-2 hover:ring-[var(--color-neutral-300)] " +
+                "focus-visible:outline-[var(--color-neutral-900)] " +
+                "dark:text-[var(--color-text-primary)] dark:bg-[var(--color-neutral-800)] " +
+                "dark:hover:bg-[var(--color-neutral-700)]",
+            primary: "text-[var(--color-primary-600)] bg-[var(--color-primary)]/10 " +
+                "hover:bg-[var(--color-primary-50)] hover:ring-2 hover:ring-[var(--color-primary)]/10 " +
+                "focus-visible:outline-[var(--color-primary-600)] " +
+                "dark:text-[var(--color-primary-300)] dark:bg-[var(--color-primary-900)]/30 " +
+                "dark:hover:bg-[var(--color-primary-900)]/50",
+            success: "text-[var(--color-success-600)] bg-[var(--color-success)]/10 " +
+                "hover:bg-[var(--color-success-50)] hover:ring-2 hover:ring-[var(--color-success)]/20 " +
+                "focus-visible:outline-[var(--color-success-600)] " +
+                "dark:text-[var(--color-success-300)] dark:bg-[var(--color-success-900)]/30 " +
+                "dark:hover:bg-[var(--color-success-900)]/50",
+            warning: "text-[var(--color-warning-600)] bg-[var(--color-warning)]/10 " +
+                "hover:bg-[var(--color-warning-50)] hover:ring-2 hover:ring-[var(--color-warning)]/20 " +
+                "focus-visible:outline-[var(--color-warning-600)] " +
+                "dark:text-[var(--color-warning-300)] dark:bg-[var(--color-warning-900)]/30 " +
+                "dark:hover:bg-[var(--color-warning-900)]/50",
+            danger: "text-[var(--color-danger-600)] bg-[var(--color-danger)]/10 " +
+                "hover:bg-[var(--color-danger-50)] hover:ring-2 hover:ring-[var(--color-danger)]/20 " +
+                "focus-visible:outline-[var(--color-danger-600)] " +
+                "dark:text-[var(--color-danger-300)] dark:bg-[var(--color-danger-900)]/30 " +
+                "dark:hover:bg-[var(--color-danger-900)]/50",
+        },
+        // Link variant - single style (override with className if needed)
+        link: "text-[var(--color-primary-600)] underline-offset-4 hover:underline " +
+            "focus-visible:outline-[var(--color-primary-600)] " +
+            "dark:text-[var(--color-primary-300)]",
+    },
     // Size variants
     sizes: {
         sm: {

package/dist/components/core/Button/Button.types.d.ts

@@ -39,6 +39,8 @@ export interface ButtonProps extends HTMLMotionProps<"button"> {
     rippleClassName?: string;
     /** Scale multiplier for ripple expansion (default: 10) */
     rippleScale?: number;
+    /** Whether to show the glass reflection effect (default: true) */
+    showReflection?: boolean;
 }
 export type ButtonColor = "neutral" | "dark" | "primary" | "success" | "warning" | "danger";
 export type ButtonVariant = "filled" | "outline" | "ghost" | "link";

package/dist/components/core/ButtonGroup/ButtonGroup.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { buttonGroupTheme } from './ButtonGroup.theme.js';
 import { cn } from '../../../utils/cn.js';

package/dist/components/core/ButtonGroup/ButtonGroup.theme.d.ts

@@ -10,6 +10,7 @@ interface ButtonGroupTheme {
         horizontal: string;
         vertical: string;
     };
+    textStyles: string;
 }
 /**
  * Default theme for the ButtonGroup component using CSS pseudo-classes

package/dist/components/core/ButtonGroup/ButtonGroup.theme.js

@@ -43,6 +43,8 @@ var buttonGroupTheme = {
         horizontal: "w-px self-stretch",
         vertical: "h-px self-stretch",
     },
+    // Text styles for ButtonGroupText component
+    textStyles: "px-3 py-2 text-sm text-[var(--color-text-primary)] flex items-center",
 };
 
 export { buttonGroupTheme };

package/dist/components/core/ButtonGroup/ButtonGroupSeparator.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { buttonGroupTheme } from './ButtonGroup.theme.js';
 import { cn } from '../../../utils/cn.js';

package/dist/components/core/ButtonGroup/ButtonGroupText.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { buttonGroupTheme } from './ButtonGroup.theme.js';
 import { cn } from '../../../utils/cn.js';

package/dist/components/core/Calendar/Calendar.animations.js

@@ -2,6 +2,18 @@
  * Animation variants for Calendar component
  */
 var calendarAnimations = {
+    monthSlide: {
+        slideInRight: {
+            initial: { opacity: 0.25, x: 8 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0.25, x: -8 },
+        },
+        slideInLeft: {
+            initial: { opacity: 0.25, x: -8 },
+            animate: { opacity: 1, x: 0 },
+            exit: { opacity: 0.25, x: 8 },
+        },
+    },
     dayButton: {
         hover: {
             scale: 1.05,

package/dist/components/core/Calendar/Calendar.js

@@ -1,86 +1,14 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useState, useEffect, useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
 import { calendarTheme } from './Calendar.theme.js';
 import { calendarAnimations } from './Calendar.animations.js';
 import { cn } from '../../../utils/cn.js';
 import { Select } from '../../forms/Select/Select.js';
 import '../../forms/Select/Select.theme.js';
-import { Button } from '../Button/Button.js';
-import '../Badge/Badge.js';
-import '../Avatar/Avatar.js';
-import '../AvatarGroup/AvatarGroup.js';
-import '../Accordion/Accordion.js';
-import '../Segmented/Segmented.js';
-import '../Stepper/Stepper.js';
-import '../Tooltip/Tooltip.js';
-import '../Tooltip/Tooltip.animations.js';
-import '../Tree/Tree.js';
-import '../Pagination/Pagination.js';
-import '../Divider/Divider.js';
-import '../Card/Card.js';
-import '../Modal/Modal.js';
-import '../Drawer/Drawer.js';
-import '../Dropdown/Dropdown.js';
-import '../Dropdown/DropdownTrigger.js';
-import '../Dropdown/DropdownMenu.js';
-import '../Dropdown/DropdownItem.js';
-import '../Dropdown/DropdownSection.js';
-import '../Dropdown/DropdownSeparator.js';
-import '../Popover/Popover.js';
-import '../Popover/PopoverContext.js';
-import '../Tabs/Tabs.js';
-import '../Tabs/TabsList.js';
-import '../Tabs/TabsTrigger.js';
-import '../Tabs/TabsContent.js';
-import '../Tabs/TabsContext.js';
-import '../Breadcrumbs/Breadcrumbs.js';
-import '../Breadcrumbs/Breadcrumbs.theme.js';
-import '../Carousel/Carousel.js';
-import '../ProgressiveBlur/ProgressiveBlur.js';
 import { getMonthName, isDateDisabled as isDateDisabled$1, isSameDay } from './calendar.utils.js';
-import '../../effects/CustomCursor/CustomCursor.js';
-import '../Alert/Alert.js';
-import '../Toast/Toast.js';
-import '../Toast/ToastProvider.js';
-import '../Notification/Notification.js';
-import '../ChatMessage/ChatMessage.js';
-import '../Empty/Empty.js';
-import '../NavItem/NavItem.js';
-import '../Sidebar/Sidebar.js';
-import '../Sidebar/SidebarHeader.js';
-import '../Sidebar/SidebarContent.js';
-import '../Sidebar/SidebarFooter.js';
-import '../Sidebar/SidebarNav.js';
-import '../Sidebar/SidebarNavGroup.js';
-import '../Sidebar/SidebarToggle.js';
-import '../Sidebar/SidebarContext.js';
-import '../Table/index.js';
-import '../DragDrop/DragDrop.js';
-import '../Sortable/Sortable.js';
-import '../../forms/Input/Input.js';
-import '../../forms/Input/Input.theme.js';
-import '../../forms/Textarea/Textarea.js';
-import '../../forms/Textarea/Textarea.theme.js';
-import '../../forms/DatePicker/DatePicker.js';
-import '../../forms/DatePicker/DatePicker.theme.js';
-import '../../forms/TimePicker/TimePicker.js';
-import 'react-dom';
-import '../../forms/TimePicker/TimePicker.theme.js';
-import '../../forms/Slider/Slider.js';
-import '../../forms/Slider/Slider.theme.js';
-import '../../forms/Signature/Signature.js';
-import '../../forms/Signature/Signature.theme.js';
-import '../../forms/RichTextEditor/RichTextEditor.js';
-import '../../forms/RichTextEditor/RichTextEditor.theme.js';
-import '../../forms/InputOTP/InputOTP.js';
-import '../../forms/InputOTP/InputOTP.theme.js';
-import '../../forms/InputCreditCard/InputCreditCard.theme.js';
-import '../../forms/InputAddress/InputAddress.theme.js';
-import '../../forms/InputDate/InputDate.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronLeftIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronRightIcon.js';
-import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { Button } from '../Button/Button.js';
 
 /**
  * Constants for date utilities
@@ -454,7 +382,7 @@ var Calendar = function (_a) {
     return (React__default.createElement("div", __assign({ className: cn(calendarTheme.baseStyle, className) }, props),
         React__default.createElement("div", { className: calendarTheme.headerStyle },
             onNavigatePrev !== null && (React__default.createElement(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm" },
-                React__default.createElement(ForwardRef, { className: "size-4", strokeWidth: 2 }))),
+                React__default.createElement(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }))),
             onNavigatePrev === null && React__default.createElement("div", { className: "w-8" }),
             resolvedHeaderMode === 'static' ? (React__default.createElement("h2", { className: calendarTheme.titleStyle },
                 getMonthName(viewDate, months),
@@ -463,7 +391,7 @@ var Calendar = function (_a) {
                 (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (React__default.createElement(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-sm font-medium" })),
                 (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (React__default.createElement(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-sm font-medium" })))),
             onNavigateNext !== null && (React__default.createElement(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm" },
-                React__default.createElement(ForwardRef$1, { className: "size-4", strokeWidth: 2 }))),
+                React__default.createElement(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }))),
             onNavigateNext === null && React__default.createElement("div", { className: "w-8" })),
         React__default.createElement("div", { className: calendarTheme.weekdaysStyle }, weekdays.map(function (day, index) { return (React__default.createElement("div", { key: index, className: calendarTheme.weekdayStyle }, day)); })),
         React__default.createElement("div", { className: calendarTheme.daysGridStyle }, calendarDays.map(function (day) {

package/dist/components/core/Calendar/Calendar.theme.d.ts

@@ -1,4 +1,4 @@
-import { CalendarTheme } from './Calendar.types';
+import { CalendarTheme } from "./Calendar.types";
 /**
  * Calendar component theme following flat structure pattern
  * Uses design tokens and data-[state=*] selectors

package/dist/components/core/Calendar/Calendar.theme.js

@@ -3,14 +3,47 @@
  * Uses design tokens and data-[state=*] selectors
  */
 var calendarTheme = {
-    baseStyle: "select-none w-full max-w-fit bg-white",
+    baseStyle: "select-none w-full max-w-fit bg-white dark:bg-[var(--color-neutral-900)]",
     headerStyle: "flex items-center justify-between mb-4",
-    titleStyle: "text-base font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors",
+    titleStyle: "text-base font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors " +
+        "dark:text-[var(--color-neutral-200)] dark:hover:text-[var(--color-primary-400)]",
     headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",
+    navButtonStyle: "inline-flex items-center justify-center size-8 rounded-md border-0 bg-transparent " +
+        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-primary-50)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
+        "transition-colors disabled:opacity-50 disabled:cursor-not-allowed " +
+        // Dark mode
+        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)] dark:hover:bg-[var(--color-neutral-800)] " +
+        "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     weekdaysStyle: "grid grid-cols-7 mb-2",
-    weekdayStyle: "flex items-center justify-center h-8 text-xs font-medium text-[var(--color-text-muted)]",
+    weekdayStyle: "flex items-center justify-center h-8 text-xs font-medium text-[var(--color-text-muted)] " +
+        "dark:text-[var(--color-neutral-500)]",
     daysGridStyle: "grid grid-cols-7 gap-0.5",
-    dayButtonStyle: "relative flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 text-[var(--color-text-primary)] hover:bg-[var(--color-primary-50)] data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-white  data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 data-[today=true]:text-[var(--color-primary)] data-[disabled=true]:text-[var(--color-text-muted)] data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-white data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-white data-[in-range=true]:bg-[var(--color-primary-50)]/70 data-[in-range=true]:text-[var(--color-text-primary)]",
+    dayButtonStyle: "relative flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer " +
+        "transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
+        // Base text color
+        "text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)] " +
+        // Hover state
+        "hover:bg-[var(--color-primary-50)] dark:hover:bg-[var(--color-neutral-800)] " +
+        // Selected state
+        "data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-white " +
+        "data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 " +
+        // Today indicator
+        "data-[today=true]:text-[var(--color-primary)] dark:data-[today=true]:text-[var(--color-primary-400)] " +
+        // Disabled state
+        "data-[disabled=true]:text-[var(--color-text-muted)] data-[disabled=true]:opacity-50 " +
+        "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent " +
+        "dark:data-[disabled=true]:text-[var(--color-neutral-600)] " +
+        // Other month state
+        "data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 " +
+        "dark:data-[other-month=true]:text-[var(--color-neutral-600)] " +
+        // Range mode states
+        "data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-white " +
+        "data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-white " +
+        "data-[in-range=true]:bg-[var(--color-primary-50)]/70 data-[in-range=true]:text-[var(--color-text-primary)] " +
+        "dark:data-[in-range=true]:bg-[var(--color-primary-900)]/50 dark:data-[in-range=true]:text-[var(--color-neutral-200)] " +
+        // Focus offset for dark mode
+        "dark:focus-visible:ring-offset-[var(--color-neutral-900)]",
     dayButtonSizes: {
         sm: "size-8 text-sm",
         md: "size-10 text-sm",

package/dist/components/core/Calendar/CalendarMini/CalendarMini.animations.js

@@ -0,0 +1,27 @@
+var monthTransitionVariants = {
+    enter: function (direction) { return ({
+        x: direction > 0 ? 20 : -20,
+        opacity: 0,
+    }); },
+    center: {
+        x: 0,
+        opacity: 1,
+    },
+    exit: function (direction) { return ({
+        x: direction < 0 ? 20 : -20,
+        opacity: 0,
+    }); },
+};
+var dateRowTransitionVariants = {
+    enter: function (direction) { return ({
+        x: direction > 0 ? '100%' : '-100%',
+    }); },
+    center: {
+        x: 0,
+    },
+    exit: function (direction) { return ({
+        x: direction < 0 ? '100%' : '-100%',
+    }); },
+};
+
+export { dateRowTransitionVariants, monthTransitionVariants };