@flikk/ui 1.0.0-beta.15 → 1.0.0-beta.17

package/README.md

@@ -1 +1,53 @@
 # Flikkui
+
+A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. 150+ components following the shadcn philosophy with complete `className` override support.
+
+## MCP Server
+
+Flikkui ships with an MCP (Model Context Protocol) server that gives AI coding tools full knowledge of the component library — component APIs, props, theme tokens, and code generation.
+
+### What It Does
+
+| Tool | Description |
+|------|-------------|
+| `get_component` | Look up any component's full API — props, types, sub-components, theme tokens, and code examples |
+| `search_components` | Find components by name, category (`core`, `forms`, `charts`, etc.), or pattern type (`compound`, `simple`, etc.) |
+| `get_theme_tokens` | Get all CSS variables with correct Tailwind syntax (`bg-[var(--color-primary)]`) |
+| `generate_code` | Generate production-ready Flikkui code from a description |
+
+### Setup for Claude Code
+
+Add the following to your project's `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "flikkui": {
+      "command": "npx",
+      "args": ["@flikk/mcp"]
+    }
+  }
+}
+```
+
+Or if you're working from a local clone of this repo:
+
+```json
+{
+  "mcpServers": {
+    "flikkui": {
+      "command": "node",
+      "args": ["./packages/mcp/dist/index.js"]
+    }
+  }
+}
+```
+
+### Building from Source
+
+```bash
+cd packages/mcp
+npm install
+npm run extract   # Parse component source files into registry.json
+npm run build     # Compile TypeScript
+```

package/dist/components/ai/StreamingResponse/AnimatedText.js

@@ -17,7 +17,7 @@ const tokenize = (text) => {
  * For performance, only the last N tokens are animated with motion.span,
  * while older tokens are rendered as static text.
  */
-const AnimatedText = ({ text, isStreaming, animateLastN = 6, enabled = true, className, }) => {
+const AnimatedText = ({ text, isStreaming, animateLastN = 12, enabled = true, className, }) => {
     const shouldReduceMotion = useReducedMotion();
     const animate = enabled && !shouldReduceMotion;
     // Track which tokens have already been seen/animated
@@ -37,9 +37,9 @@ const AnimatedText = ({ text, isStreaming, animateLastN = 6, enabled = true, cla
     const animatedTokens = tokens.slice(settledCount);
     if (!animate || !isStreaming) {
         // No animation: render plain text
-        return (jsx("p", { className: className || 'whitespace-pre-wrap break-words', children: text }));
+        return (jsx("p", { className: className || 'whitespace-pre-wrap wrap-break-word', children: text }));
     }
-    return (jsxs("p", { className: className || 'whitespace-pre-wrap break-words', children: [settledText, animatedTokens.map((token, i) => (jsx(motion.span, { variants: tokenFadeIn, initial: "hidden", animate: "visible", transition: tokenTransition, style: { display: 'inline' }, children: token }, `${settledCount + i}-${token}`)))] }));
+    return (jsxs("p", { className: className || 'whitespace-pre-wrap wrap-break-word', children: [settledText, animatedTokens.map((token, i) => (jsx(motion.span, { variants: tokenFadeIn, initial: "hidden", animate: "visible", transition: tokenTransition, style: { display: 'inline' }, children: token }, `${settledCount + i}-${token}`)))] }));
 };
 AnimatedText.displayName = 'AnimatedText';
 

package/dist/components/ai/StreamingResponse/MarkdownRenderer.js

@@ -51,13 +51,13 @@ const SkipWords = ({ children }) => {
  * Supports GitHub Flavored Markdown (tables, task lists, strikethrough, etc.)
  * Animates individual words during streaming with a fade-in + blur effect
  */
-const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated = true, showCursor = true, animateLastN = 6, }) => {
+const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated = true, showCursor = true, animateLastN = 12, }) => {
     const { allowHtml = false, syntaxTheme = 'light', renderCodeBlock } = options;
     const shouldReduceMotion = useReducedMotion();
     const shouldAnimate = animated && isStreaming && !shouldReduceMotion;
     // Append cursor character to content so it renders inline within the last element
     const displayContent = isStreaming && showCursor
-        ? content + ' ▍'
+        ? content + ' ▏'
         : content;
     const markdownComponents = useMemo(() => ({
         // Code blocks with syntax highlighting
@@ -73,75 +73,75 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
                 return (jsxs(AnimatedBlock, { animate: shouldAnimate, children: [jsx(SkipWords, { children: children }), jsx(Prism, { style: syntaxTheme === 'dark' ? oneDark : oneLight, language: language, PreTag: "div", className: "rounded-lg my-3", ...props, children: String(children).replace(/\n$/, '') })] }));
             }
             // Inline code — skip word animation for code tokens
-            return (jsxs(Fragment, { children: [jsx(SkipWords, { children: children }), jsx("code", { className: "bg-[var(--color-background-tertiary)] text-[var(--color-primary)] px-1.5 py-0.5 rounded text-base font-mono", ...props, children: children })] }));
+            return (jsxs(Fragment, { children: [jsx(SkipWords, { children: children }), jsx("code", { className: "bg-(--color-background-tertiary) text-(--color-primary) px-1.5 py-0.5 rounded text-base font-mono", ...props, children: children })] }));
         },
         // Paragraphs — word-level animation
         p({ children }) {
-            return (jsx(AnimatedProse, { as: "p", className: "mb-3 last:mb-0 text-[var(--color-text-primary)] leading-relaxed", children: children }));
+            return (jsx(AnimatedProse, { as: "p", className: "mb-3 last:mb-0 text-(--color-text-primary) leading-relaxed", children: children }));
         },
         // Headings — word-level animation
         h1({ children }) {
-            return (jsx(AnimatedProse, { as: "h1", className: "text-2xl font-bold mb-4 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2", children: children }));
+            return (jsx(AnimatedProse, { as: "h1", className: "text-2xl font-bold mb-4 text-(--color-text-primary) border-b border-(--color-border) pb-2", children: children }));
         },
         h2({ children }) {
-            return (jsx(AnimatedProse, { as: "h2", className: "text-2xl font-bold mb-3 text-[var(--color-text-primary)] border-b border-[var(--color-border)] pb-2", children: children }));
+            return (jsx(AnimatedProse, { as: "h2", className: "text-2xl font-bold mb-3 text-(--color-text-primary) border-b border-(--color-border) pb-2", children: children }));
         },
         h3({ children }) {
-            return (jsx(AnimatedProse, { as: "h3", className: "text-xl font-semibold mb-2 text-[var(--color-text-primary)]", children: children }));
+            return (jsx(AnimatedProse, { as: "h3", className: "text-xl font-semibold mb-2 text-(--color-text-primary)", children: children }));
         },
         h4({ children }) {
-            return (jsx(AnimatedProse, { as: "h4", className: "text-lg font-semibold mb-2 text-[var(--color-text-primary)]", children: children }));
+            return (jsx(AnimatedProse, { as: "h4", className: "text-lg font-semibold mb-2 text-(--color-text-primary)", children: children }));
         },
         h5({ children }) {
-            return (jsx(AnimatedProse, { as: "h5", className: "text-base font-semibold mb-2 text-[var(--color-text-primary)]", children: children }));
+            return (jsx(AnimatedProse, { as: "h5", className: "text-base font-semibold mb-2 text-(--color-text-primary)", children: children }));
         },
         h6({ children }) {
-            return (jsx(AnimatedProse, { as: "h6", className: "text-base font-semibold mb-2 text-[var(--color-text-secondary)]", children: children }));
+            return (jsx(AnimatedProse, { as: "h6", className: "text-base font-semibold mb-2 text-(--color-text-secondary)", children: children }));
         },
         // Lists — word-level animation on li
         ul({ children }) {
-            return (jsx("ul", { className: "list-disc list-inside mb-3 space-y-1 text-[var(--color-text-primary)]", children: children }));
+            return (jsx("ul", { className: "list-disc list-inside mb-3 space-y-1 text-(--color-text-primary)", children: children }));
         },
         ol({ children }) {
-            return (jsx("ol", { className: "list-decimal list-inside mb-3 space-y-1 text-[var(--color-text-primary)]", children: children }));
+            return (jsx("ol", { className: "list-decimal list-inside mb-3 space-y-1 text-(--color-text-primary)", children: children }));
         },
         li({ children }) {
             return (jsx(AnimatedProse, { as: "li", className: "ml-4", children: children }));
         },
         // Blockquotes — word-level animation
         blockquote({ children }) {
-            return (jsx("blockquote", { className: "border-l-4 border-[var(--color-primary)] pl-4 py-2 my-3 bg-[var(--color-background-secondary)] italic text-[var(--color-text-secondary)]", children: children }));
+            return (jsx("blockquote", { className: "border-l-4 border-(--color-primary) pl-4 py-2 my-3 bg-(--color-background-secondary) italic text-(--color-text-secondary)", children: children }));
         },
         // Links
         a({ href, children }) {
-            return (jsx("a", { href: href, className: "text-[var(--color-primary)] hover:text-[var(--color-primary-700)] underline transition-colors", target: "_blank", rel: "noopener noreferrer", children: children }));
+            return (jsx("a", { href: href, className: "text-(--color-primary) hover:text-(--color-primary-700) underline transition-colors", target: "_blank", rel: "noopener noreferrer", children: children }));
         },
         // Tables — block-level slide-in, skip word animation
         table({ children }) {
-            return (jsxs(AnimatedBlock, { animate: shouldAnimate, children: [jsx(SkipWords, { children: children }), jsx("div", { className: "overflow-x-auto my-3", children: jsx("table", { className: "min-w-full border-collapse border border-[var(--color-border)]", children: children }) })] }));
+            return (jsxs(AnimatedBlock, { animate: shouldAnimate, children: [jsx(SkipWords, { children: children }), jsx("div", { className: "overflow-x-auto my-3", children: jsx("table", { className: "min-w-full border-collapse border border-(--color-border)", children: children }) })] }));
         },
         thead({ children }) {
-            return jsx("thead", { className: "bg-[var(--color-background-secondary)]", children: children });
+            return jsx("thead", { className: "bg-(--color-background-secondary)", children: children });
         },
         tbody({ children }) {
             return jsx("tbody", { children: children });
         },
         tr({ children }) {
-            return jsx("tr", { className: "border-b border-[var(--color-border)]", children: children });
+            return jsx("tr", { className: "border-b border-(--color-border)", children: children });
         },
         th({ children }) {
-            return (jsx("th", { className: "px-4 py-2 text-left font-semibold text-[var(--color-text-primary)] border border-[var(--color-border)]", children: children }));
+            return (jsx("th", { className: "px-4 py-2 text-left font-semibold text-(--color-text-primary) border border-(--color-border)", children: children }));
         },
         td({ children }) {
-            return (jsx("td", { className: "px-4 py-2 text-[var(--color-text-primary)] border border-[var(--color-border)]", children: children }));
+            return (jsx("td", { className: "px-4 py-2 text-(--color-text-primary) border border-(--color-border)", children: children }));
         },
         // Horizontal rule
         hr() {
-            return jsx("hr", { className: "my-4 border-t border-[var(--color-border)]" });
+            return jsx("hr", { className: "my-4 border-t border-(--color-border)" });
         },
         // Strong/Bold — pass through (word animation handles inline elements)
         strong({ children }) {
-            return jsx("strong", { className: "font-semibold text-[var(--color-text-primary)]", children: children });
+            return jsx("strong", { className: "font-semibold text-(--color-text-primary)", children: children });
         },
         // Emphasis/Italic
         em({ children }) {
@@ -149,7 +149,7 @@ const MarkdownRenderer = ({ content, options = {}, isStreaming = false, animated
         },
         // Strikethrough (from remarkGfm)
         del({ children }) {
-            return jsx("del", { className: "line-through text-[var(--color-text-secondary)]", children: children });
+            return jsx("del", { className: "line-through text-(--color-text-secondary)", children: children });
         },
     }), [shouldAnimate, syntaxTheme, renderCodeBlock]);
     return (jsx(WordAnimationProvider, { content: displayContent, enabled: shouldAnimate, animateLastN: animateLastN, hasCursor: isStreaming && showCursor, children: jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], skipHtml: !allowHtml, components: markdownComponents, children: displayContent }) }));

package/dist/components/ai/StreamingResponse/StreamingCursor.js

@@ -4,7 +4,7 @@ import { jsx } from 'react/jsx-runtime';
  * StreamingCursor renders a blinking caret that indicates active streaming.
  * Uses a simple CSS pulse animation — no framer motion, no layout shifts.
  */
-const StreamingCursor = ({ visible, enabled = true, cursor = "▍", className, }) => {
+const StreamingCursor = ({ visible, enabled = true, cursor = "▏", className, }) => {
     if (!visible)
         return null;
     return (jsx("span", { className: className || `font-extralight ml-0.5 ${enabled ? "animate-pulse" : ""}`, "aria-hidden": "true", children: cursor }));

package/dist/components/ai/StreamingResponse/StreamingResponse.animations.js

@@ -9,8 +9,8 @@
 const tokenFadeIn = {
     hidden: {
         opacity: 0,
-        y: 6,
-        filter: 'blur(4px)',
+        y: 4,
+        filter: 'blur(1.5px)',
     },
     visible: {
         opacity: 1,
@@ -19,8 +19,8 @@ const tokenFadeIn = {
     },
 };
 const tokenTransition = {
-    duration: 0.35,
-    ease: [0.25, 0.4, 0.55, 1],
+    duration: 0.25,
+    ease: [0.2, 0.8, 0.2, 1], // snappy easing
 };
 /**
  * Block slide-in animation
@@ -29,7 +29,7 @@ const tokenTransition = {
 const blockSlideIn = {
     hidden: {
         opacity: 0,
-        y: 8,
+        y: 6,
     },
     visible: {
         opacity: 1,
@@ -37,8 +37,8 @@ const blockSlideIn = {
     },
 };
 const blockTransition = {
-    duration: 0.4,
-    ease: [0.25, 0.4, 0.55, 1],
+    duration: 0.35,
+    ease: [0.2, 0.8, 0.2, 1],
 };
 /**
  * Streaming cursor (caret) animation
@@ -62,7 +62,7 @@ const cursorPulse = {
 const inlineTokenFadeIn = {
     hidden: {
         opacity: 0,
-        filter: 'blur(3px)',
+        filter: 'blur(1.5px)',
     },
     visible: {
         opacity: 1,
@@ -70,8 +70,8 @@ const inlineTokenFadeIn = {
     },
 };
 const inlineTokenTransition = {
-    duration: 0.3,
-    ease: [0.25, 0.4, 0.55, 1],
+    duration: 0.25,
+    ease: [0.2, 0.8, 0.2, 1],
 };
 /**
  * Container animation for staggered children

package/dist/components/ai/StreamingResponse/StreamingResponse.js

@@ -39,7 +39,7 @@ onToken, onComplete, onError, onStart, onAbort,
 // Display options
 typingSpeed = 100, enableTypewriter = true, enableMarkdown = true, markdownOptions, 
 // Animation
-animated = true, showCursor = true, animateLastN = 6, 
+animated = true, showCursor = true, animateLastN = 12, 
 // Message component props
 role = 'assistant', avatar, showTimestamp = true, showActions = true, onCopy, onRegenerate, 
 // Error handling
@@ -80,11 +80,11 @@ className, }) => {
     }
     else if (enableTypewriter && isComplete && accumulatedText) {
         // Use typewriter animation after streaming completes
-        messageContent = (jsx(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap break-words" }));
+        messageContent = (jsx(TypeWriter, { text: accumulatedText, speed: typingSpeed, enabled: true, className: "whitespace-pre-wrap wrap-break-word" }));
     }
     else {
         // Show raw text (streaming complete, typewriter disabled)
-        messageContent = (jsx("p", { className: "whitespace-pre-wrap break-words", children: accumulatedText }));
+        messageContent = (jsx("p", { className: "whitespace-pre-wrap wrap-break-word", children: accumulatedText }));
     }
     // Render with Message component
     return (jsx(Message, { role: role, content: messageContent, avatar: avatar, timestamp: startTimeRef.current, showTimestamp: showTimestamp, isStreaming: isStreaming, showActions: showActions && !error, onCopy: onCopy, onRegenerate: onRegenerate, className: className }));

package/dist/components/ai/StreamingResponse/WordAnimationContext.d.ts

@@ -4,7 +4,7 @@
  * inside markdown-rendered content. Works like AnimatedText but across
  * all markdown elements (paragraphs, headings, lists, blockquotes, etc.).
  */
-import React from 'react';
+import React from "react";
 interface WordAnimationContextValue {
     /** Process children of a prose element, animating recent words */
     processChildren: (children: React.ReactNode) => React.ReactNode;

package/dist/components/ai/StreamingResponse/WordAnimationContext.js

@@ -18,7 +18,7 @@ const tokenize = (text) => {
 const countWordsInChildren = (children) => {
     let count = 0;
     React__default.Children.forEach(children, (child) => {
-        if (typeof child === 'string') {
+        if (typeof child === "string") {
             count += tokenize(child).length;
         }
         else if (React__default.isValidElement(child)) {
@@ -30,12 +30,12 @@ const countWordsInChildren = (children) => {
     });
     return count;
 };
-const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, hasCursor = false, }) => {
+const WordAnimationProvider = ({ children, content, enabled, animateLastN = 12, hasCursor = false, }) => {
     const settledCountRef = useRef(0);
     // Count total prose words in the raw content
     const totalWords = useMemo(() => {
         // Strip the cursor character before counting
-        const cleanContent = hasCursor ? content.replace(/\s*▍\s*$/, '') : content;
+        const cleanContent = hasCursor ? content.replace(/\s*▏\s*$/, "") : content;
         return tokenize(cleanContent).length;
     }, [content, hasCursor]);
     // Update settled count — words that have aged out of the animation window
@@ -59,7 +59,7 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, h
          */
         const processChildren = (children) => {
             return React__default.Children.map(children, (child) => {
-                if (typeof child === 'string') {
+                if (typeof child === "string") {
                     return processTextNode(child);
                 }
                 if (React__default.isValidElement(child)) {
@@ -82,18 +82,18 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, h
             if (tokens.length === 0)
                 return text;
             const result = [];
-            let staticBuffer = '';
+            let staticBuffer = "";
             for (const token of tokens) {
                 const currentIndex = wordIndexRef.current;
                 wordIndexRef.current++;
                 // Check if this is the cursor character
-                if (token.trim() === '▍') {
+                if (token.trim() === "▏") {
                     // Flush static buffer
                     if (staticBuffer) {
                         result.push(staticBuffer);
-                        staticBuffer = '';
+                        staticBuffer = "";
                     }
-                    result.push(jsx("span", { className: "animate-pulse font-light", "aria-hidden": "true", children: "\u258D" }, "streaming-cursor"));
+                    result.push(jsx("span", { className: "animate-pulse font-light", "aria-hidden": "true", children: "\u258F" }, "streaming-cursor"));
                     continue;
                 }
                 if (currentIndex < settledCount) {
@@ -104,10 +104,10 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, h
                     // Flush static buffer before animated tokens
                     if (staticBuffer) {
                         result.push(staticBuffer);
-                        staticBuffer = '';
+                        staticBuffer = "";
                     }
                     // Animated word
-                    result.push(jsx(motion.span, { variants: inlineTokenFadeIn, initial: "hidden", animate: "visible", transition: inlineTokenTransition, style: { display: 'inline' }, children: token }, `word-${currentIndex}-${token.trim()}`));
+                    result.push(jsx(motion.span, { variants: inlineTokenFadeIn, initial: "hidden", animate: "visible", transition: inlineTokenTransition, style: { display: "inline" }, children: token }, `word-${currentIndex}-${token.trim()}`));
                 }
             }
             // Flush any remaining static buffer
@@ -129,6 +129,6 @@ const WordAnimationProvider = ({ children, content, enabled, animateLastN = 6, h
     }, [enabled, settledCount, totalWords]);
     return (jsx(WordAnimationContext.Provider, { value: contextValue, children: children }));
 };
-WordAnimationProvider.displayName = 'WordAnimationProvider';
+WordAnimationProvider.displayName = "WordAnimationProvider";
 
 export { WordAnimationProvider, useWordAnimation };

package/dist/components/ai/index.d.ts

@@ -2,8 +2,6 @@ export { Message, messageTheme } from "../core/Message";
 export type { MessageProps, MessageRole, MessageVariant, MessageAvatarProps, MessageTheme, MessageThemeOverrides, } from "../core/Message";
 export { PromptInput, promptInputTheme } from "./PromptInput";
 export type { PromptInputProps, PromptInputState, ModelOption, PromptInputTheme, PromptInputThemeOverrides, } from "./PromptInput";
-export { ThinkingIndicator, thinkingIndicatorTheme } from "./ThinkingIndicator";
-export type { ThinkingIndicatorProps, ThinkingIndicatorSize, ThinkingIndicatorTheme, ThinkingIndicatorThemeOverrides, } from "./ThinkingIndicator";
 export { TokenCounter, tokenCounterTheme, estimateTokens, calculateCost, formatCost, formatTokenCount, MODEL_CONFIGS, } from "./TokenCounter";
 export type { TokenCounterProps, TokenCounterModel, TokenCounterSize, TokenCounterTheme, TokenCounterThemeOverrides, ModelConfig, } from "./TokenCounter";
 export { PromptSuggestion, promptSuggestionTheme } from "./PromptSuggestions";

package/dist/components/ai/index.js

@@ -12,8 +12,6 @@ import '@heroicons/react/24/outline';
 import '@heroicons/react/24/solid';
 export { PromptInput } from './PromptInput/PromptInput.js';
 export { promptInputTheme } from './PromptInput/PromptInput.theme.js';
-export { ThinkingIndicator } from './ThinkingIndicator/ThinkingIndicator.js';
-export { thinkingIndicatorTheme } from './ThinkingIndicator/ThinkingIndicator.theme.js';
 export { TokenCounter } from './TokenCounter/TokenCounter.js';
 export { tokenCounterTheme } from './TokenCounter/TokenCounter.theme.js';
 export { MODEL_CONFIGS, calculateCost, estimateTokens, formatCost, formatTokenCount } from './TokenCounter/tokenUtils.js';

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

@@ -104,7 +104,7 @@ const Button = React__default.forwardRef(({ children, className = "", iconOnly =
                 node;
         }
     }, [buttonRef]);
-    return (jsxs(motion.button, { ...restProps, ...animationProps, ref: mergedRef, type: "button", className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
+    return (jsxs(motion.button, { type: "button", ...restProps, ...animationProps, ref: mergedRef, className: cn(buttonTheme.baseStyle, colorClasses, variantClasses, sizeClasses, blockStyle, stateClasses, darkMode && "dark", className), disabled: isDisabled, "data-state": state, "data-color": resolvedColor, "data-variant": resolvedVariant, "data-size": size, "data-icon-only": iconOnly ? "true" : "false", "data-block": block ? "true" : "false", "aria-disabled": isDisabled || undefined, "aria-invalid": isError || undefined, "aria-label": ariaLabel, onClick: handleClick, children: [showReflection &&
                 resolvedVariant !== "link" &&
                 resolvedVariant !== "outline" && (jsx("div", { className: "absolute top-0.25 right-0.25 left-0.25 h-3 border-t-[0.5px] border-white/40 rounded-t-[calc(var(--button-radius)-1.25px)] opacity-60" })), isLoading && (jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsx(Spinner, { size: "sm", color: color, className: spinnerClassName }) })), jsx("span", { className: cn("inline-flex items-center gap-2 whitespace-nowrap", isLoading && "opacity-0"), children: children }), enableRipple &&
                 ripples.map((ripple) => {

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

@@ -225,7 +225,7 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
     const currentDate = new Date();
     const defaultYearRange = {
         start: currentDate.getFullYear() - 100,
-        end: currentDate.getFullYear(),
+        end: currentDate.getFullYear() + 10,
     };
     const actualYearRange = yearRange || defaultYearRange;
     const yearOptions = useMemo(() => {
@@ -236,7 +236,7 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             startYear = Math.max(startYear, minDate.getFullYear());
         }
         if (maxDate) {
-            endYear = Math.min(endYear, maxDate.getFullYear());
+            endYear = Math.max(endYear, maxDate.getFullYear());
         }
         const options = [];
         for (let year = endYear; year >= startYear; year--) {

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

@@ -70,7 +70,7 @@ export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     enableMonthDropdown?: boolean;
     /** Whether to enable year dropdown instead of navigation arrows (default: true) */
     enableYearDropdown?: boolean;
-    /** Year range for dropdown selection (default: ±50 years from current) */
+    /** Year range for dropdown selection (default: 100 years past to 10 years future from current year) */
     yearRange?: {
         start: number;
         end: number;

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

@@ -3,8 +3,8 @@ const cardTheme = {
     headerStyle: "flex flex-col p-6",
     titleStyle: "text-lg font-semibold leading-none text-[var(--color-text-primary)]",
     subtitleStyle: "text-base text-[var(--color-text-muted)] mt-1.5",
-    bodyStyle: "p-6 pt-0",
-    footerStyle: "flex items-center p-6 pt-0",
+    bodyStyle: "p-6 pt-0 first:pt-6",
+    footerStyle: "flex items-center p-6 pt-0 first:pt-6",
 };
 
 export { cardTheme };

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

@@ -18,8 +18,8 @@ const progressTheme = {
         md: "h-2.5",
         lg: "h-4",
     },
-    // Indeterminate animation styles (striped pattern by default)
-    indeterminateStyle: "animate-[progress-indeterminate_1.8s_linear_infinite] bg-[repeating-linear-gradient(45deg,var(--color-primary),var(--color-primary)_10px,var(--color-primary-700)_10px,var(--color-primary-700)_20px)]",
+    // Indeterminate animation styles
+    indeterminateStyle: "animate-[progress-indeterminate_1.8s_linear_infinite]",
 };
 
 export { progressTheme };