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

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/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 };

package/dist/components/effects/GlassSurface/GlassSurface.js

@@ -23,7 +23,7 @@ const useDarkMode = () => {
  * Creates a realistic chromatic aberration glass effect using SVG filters.
  * Works as a wrapper for any content.
  */
-const GlassSurface = React__default.forwardRef(({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness: brightnessProp, opacity: opacityProp, blur: blurProp, displace: displaceProp, backgroundOpacity: backgroundOpacityProp, backgroundColor, saturation: saturationProp, distortionScale: distortionScaleProp, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode: mixBlendModeProp, colorScheme = "auto", frosted = false, className = "", style = {}, }, forwardedRef) => {
+const GlassSurface = React__default.forwardRef(({ children, width, height, borderRadius = 20, borderWidth = 0.07, brightness: brightnessProp, opacity: opacityProp, blur: blurProp, displace: displaceProp, backgroundOpacity: backgroundOpacityProp, backgroundColor, saturation: saturationProp, distortionScale: distortionScaleProp, redOffset = 0, greenOffset = 10, blueOffset = 20, xChannel = "R", yChannel = "G", mixBlendMode: mixBlendModeProp, colorScheme = "auto", backdropBrightness = 1, frosted = false, className = "", style = {}, }, forwardedRef) => {
     const uniqueId = useId().replace(/:/g, "-");
     const filterId = `glass-filter-${uniqueId}`;
     const redGradId = `red-grad-${uniqueId}`;
@@ -66,11 +66,11 @@ const GlassSurface = React__default.forwardRef(({ children, width, height, borde
       <svg viewBox="0 0 ${actualWidth} ${actualHeight}" xmlns="http://www.w3.org/2000/svg">
         <defs>
           <linearGradient id="${redGradId}" x1="100%" y1="0%" x2="0%" y2="0%">
-            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="0%" stop-color="#000"/>
             <stop offset="100%" stop-color="red"/>
           </linearGradient>
           <linearGradient id="${blueGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
-            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="0%" stop-color="#000"/>
             <stop offset="100%" stop-color="blue"/>
           </linearGradient>
         </defs>
@@ -186,8 +186,8 @@ const GlassSurface = React__default.forwardRef(({ children, width, height, borde
             return {
                 ...baseStyles,
                 background: getBackgroundWithOpacity(),
-                backdropFilter: `url(#${filterId}) ${frostedBlur} saturate(${saturation})`,
-                WebkitBackdropFilter: `url(#${filterId}) ${frostedBlur} saturate(${saturation})`,
+                backdropFilter: `url(#${filterId}) ${frostedBlur} brightness(${backdropBrightness}) saturate(${saturation})`,
+                WebkitBackdropFilter: `url(#${filterId}) ${frostedBlur} brightness(${backdropBrightness}) saturate(${saturation})`,
                 ...(!resolvedDark && { border: "1px solid rgba(0, 0, 0, 0.06)" }),
                 ...(hasCustomShadow
                     ? {}
@@ -246,7 +246,7 @@ const GlassSurface = React__default.forwardRef(({ children, width, height, borde
                 };
             }
         }
-    }, [style, width, height, borderRadius, frosted, svgSupported, backgroundColor, resolvedDark, backgroundOpacity, filterId, saturation, hasCustomShadow, supportsBackdrop]);
+    }, [style, width, height, borderRadius, frosted, svgSupported, backgroundColor, resolvedDark, backgroundOpacity, filterId, backdropBrightness, saturation, hasCustomShadow, supportsBackdrop]);
     const focusVisibleClasses = resolvedDark
         ? "focus-visible:outline-2 focus-visible:outline-[#0A84FF] focus-visible:outline-offset-2"
         : "focus-visible:outline-2 focus-visible:outline-[#007AFF] focus-visible:outline-offset-2";
@@ -257,7 +257,7 @@ const GlassSurface = React__default.forwardRef(({ children, width, height, borde
         else if (forwardedRef)
             forwardedRef.current = node;
     }, [forwardedRef]);
-    return (jsxs("div", { ref: mergedRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: containerStyles, children: [jsx("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg", children: jsxs("defs", { children: [jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%", children: [jsx("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }), jsx("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", id: "redchannel", result: "dispRed" }), jsx("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }), jsx("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", id: "greenchannel", result: "dispGreen" }), jsx("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }), jsx("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", id: "bluechannel", result: "dispBlue" }), jsx("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }), jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }), jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }), jsx("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })] }), jsx("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%", children: jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) })] }) }), jsx("div", { className: "relative z-10 h-full rounded-[inherit]", children: children }), jsx("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20", children: frosted && (jsx("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: `url(#${noiseFilterId})` } })) })] }));
+    return (jsxs("div", { ref: mergedRef, className: cn("relative transition-opacity duration-[260ms] ease-out", focusVisibleClasses, className), style: containerStyles, children: [jsx("svg", { className: "w-full h-full pointer-events-none absolute inset-0 opacity-0 -z-10", xmlns: "http://www.w3.org/2000/svg", children: jsxs("defs", { children: [jsxs("filter", { id: filterId, colorInterpolationFilters: "sRGB", x: "0%", y: "0%", width: "100%", height: "100%", children: [jsx("feImage", { ref: feImageRef, x: "0", y: "0", width: "100%", height: "100%", preserveAspectRatio: "none", result: "map" }), jsx("feDisplacementMap", { ref: redChannelRef, in: "SourceGraphic", in2: "map", result: "dispRed" }), jsx("feColorMatrix", { in: "dispRed", type: "matrix", values: "1 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "red" }), jsx("feDisplacementMap", { ref: greenChannelRef, in: "SourceGraphic", in2: "map", result: "dispGreen" }), jsx("feColorMatrix", { in: "dispGreen", type: "matrix", values: "0 0 0 0 0\n                      0 1 0 0 0\n                      0 0 0 0 0\n                      0 0 0 1 0", result: "green" }), jsx("feDisplacementMap", { ref: blueChannelRef, in: "SourceGraphic", in2: "map", result: "dispBlue" }), jsx("feColorMatrix", { in: "dispBlue", type: "matrix", values: "0 0 0 0 0\n                      0 0 0 0 0\n                      0 0 1 0 0\n                      0 0 0 1 0", result: "blue" }), jsx("feBlend", { in: "red", in2: "green", mode: "screen", result: "rg" }), jsx("feBlend", { in: "rg", in2: "blue", mode: "screen", result: "output" }), jsx("feGaussianBlur", { ref: gaussianBlurRef, in: "output", stdDeviation: "0.7" })] }), jsx("filter", { id: noiseFilterId, x: "0%", y: "0%", width: "100%", height: "100%", children: jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) })] }) }), jsx("div", { className: "relative z-10 h-full rounded-[inherit]", children: children }), jsx("div", { className: "absolute inset-0 pointer-events-none rounded-[inherit] overflow-hidden z-20", children: frosted && (jsx("div", { className: "absolute inset-0 opacity-10 mix-blend-overlay", style: { filter: `url(#${noiseFilterId})` } })) })] }));
 });
 GlassSurface.displayName = "GlassSurface";
 

package/dist/components/effects/GlassSurface/GlassSurface.types.d.ts

@@ -48,6 +48,12 @@ export interface GlassSurfaceProps {
      * @default 'auto'
      */
     colorScheme?: "auto" | "dark" | "light";
+    /**
+     * Brightness multiplier for the backdrop-filter chain.
+     * Values > 1 brighten, < 1 darken. Only applies when SVG filters are supported.
+     * @default 1
+     */
+    backdropBrightness?: number;
     /**
      * Enable frosted glass effect with noise texture
      * @default false

package/dist/components/effects/Neumorphic/InsetCircleButton.d.ts

@@ -5,5 +5,6 @@ export interface InsetCircleButtonProps {
     className?: string;
     classNameDisc?: string;
     classNameHover?: string;
+    onClick?: () => void;
 }
-export declare function InsetCircleButton({ children, size, className, classNameDisc, classNameHover, }: InsetCircleButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function InsetCircleButton({ children, size, className, classNameDisc, classNameHover, onClick, }: InsetCircleButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Neumorphic/InsetCircleButton.js

@@ -3,8 +3,8 @@ import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import 'react';
 
-function InsetCircleButton({ children, size = 44, className, classNameDisc, classNameHover, }) {
-    return (jsx("div", { className: cn("neu-circle-groove group shrink-0 cursor-pointer bg-neutral-200/80 dark:bg-neutral-900", className), style: { width: size, height: size }, children: jsxs(motion.div, { className: cn("neu-circle-disc bg-linear-to-br from-neutral-100 to-neutral-300 dark:from-neutral-700 dark:to-neutral-900", classNameDisc), whileHover: { scale: 1 }, whileTap: { scale: 0.975 }, transition: { type: "spring", stiffness: 200, damping: 20 }, children: [jsx("div", { className: cn("absolute inset-0 rounded-full bg-linear-to-br from-neutral-300 to-neutral-200 dark:from-neutral-900 dark:to-neutral-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300", classNameHover) }), jsx("div", { className: "relative z-2", children: children })] }) }));
+function InsetCircleButton({ children, size = 44, className, classNameDisc, classNameHover, onClick, }) {
+    return (jsx("div", { className: cn("neu-circle-groove group shrink-0 cursor-pointer bg-neutral-200/80 dark:bg-neutral-900", className), style: { width: size, height: size }, onClick: onClick, children: jsxs(motion.div, { className: cn("neu-circle-disc bg-linear-to-br from-neutral-100 to-neutral-300 dark:from-neutral-700 dark:to-neutral-900", classNameDisc), whileHover: { scale: 1 }, whileTap: { scale: 0.975 }, transition: { type: "spring", stiffness: 200, damping: 20 }, children: [jsx("div", { className: cn("absolute inset-0 rounded-full bg-linear-to-br from-neutral-300 to-neutral-200 dark:from-neutral-900 dark:to-neutral-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300", classNameHover) }), jsx("div", { className: "relative z-2", children: children })] }) }));
 }
 
 export { InsetCircleButton };

package/dist/components/effects/Neumorphic/InsetPill.d.ts

@@ -3,5 +3,6 @@ export interface InsetPillProps {
     children: React.ReactNode;
     className?: string;
     padding?: string;
+    onClick?: () => void;
 }
-export declare function InsetPill({ children, className, padding, }: InsetPillProps): import("react/jsx-runtime").JSX.Element;
+export declare function InsetPill({ children, className, padding, onClick, }: InsetPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Neumorphic/InsetPill.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 
-function InsetPill({ children, className, padding = "10px 18px", }) {
-    return (jsx("div", { className: `neu-inset inline-flex items-center gap-2 cursor-pointer rounded-full bg-neutral-200/60 dark:bg-neutral-800/80 ${className !== null && className !== void 0 ? className : ""}`, style: { padding }, children: jsx("div", { className: "relative z-2 flex items-center gap-2", children: children }) }));
+function InsetPill({ children, className, padding = "10px 18px", onClick, }) {
+    return (jsx("div", { className: `neu-inset inline-flex items-center gap-2 cursor-pointer rounded-full bg-neutral-200/60 dark:bg-neutral-800/80 ${className !== null && className !== void 0 ? className : ""}`, style: { padding }, onClick: onClick, children: jsx("div", { className: "relative z-2 flex items-center gap-2", children: children }) }));
 }
 
 export { InsetPill };

package/dist/components/forms/Slider/Slider.js

@@ -216,18 +216,25 @@ const Slider = React__default.forwardRef(({ state = "default", className = "", l
         }
         return `${currentValue}${unit}`;
     };
-    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, children: [label && (jsx(FormLabel, { htmlFor: sliderId, required: required, className: cn(mergedTheme.labelStyle, labelClassName), children: label })), jsxs("div", { className: "flex items-center gap-4", children: [iconStart && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconStart })), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: min })), jsxs("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal", children: [jsxs("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation", children: [jsx("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }), showTicks &&
+    const filterId = `slider-liquid-lens-${sliderId}`;
+    return (jsxs("div", { className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref, ...props, children: [jsx("svg", { width: "0", height: "0", className: "absolute", "aria-hidden": "true", children: jsx("defs", { children: jsxs("filter", { id: filterId, children: [jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1", result: "blur" }), jsx("feColorMatrix", { in: "blur", type: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7", result: "goo" }), jsx("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })] }) }) }), label && (jsx(FormLabel, { htmlFor: sliderId, required: required, className: cn(mergedTheme.labelStyle, labelClassName), children: label })), jsxs("div", { className: "flex items-center gap-4", children: [iconStart && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconStart })), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: min })), jsxs("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal", children: [jsxs("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation", children: [jsx("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }), showTicks &&
                                         ticks.map((tick) => {
                                             const percentage = getPercentage(tick);
                                             return (jsx("div", { className: mergedTheme.tickStyle, style: { left: `${percentage}%` } }, tick));
                                         })] }), values.map((val, index) => {
                                 const percentage = getPercentage(val);
-                                return (jsx("div", { className: cn(mergedTheme.thumbStyle, "outline-[1px] outline-white/50 ring-0 shadow-none p-0 overflow-visible"), style: {
+                                return (jsxs("div", { className: cn(mergedTheme.thumbStyle, "outline-[2px] outline-[var(--color-border)]/80 ring-0 shadow-lg p-0"), style: {
                                         left: `${percentage}%`,
                                         transform: "translate(-50%, -50%)",
                                         position: "absolute",
                                         top: "50%",
-                                    }, onPointerDown: (e) => handlePointerDown(e, index), onKeyDown: (e) => handleKeyDown(e, index), role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? `Slider thumb ${index + 1}` : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined }, index));
+                                    }, onPointerDown: (e) => handlePointerDown(e, index), onKeyDown: (e) => handleKeyDown(e, index), role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? `Slider thumb ${index + 1}` : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, children: [jsx("div", { className: "absolute inset-0 z-0 rounded-full", style: {
+                                                backdropFilter: "blur(0.6px)",
+                                                WebkitBackdropFilter: "blur(0.6px)",
+                                                filter: `url(#${filterId})`,
+                                            }, "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[1] rounded-full bg-[var(--color-surface)]/90", "aria-hidden": "true" }), jsx("div", { className: "absolute inset-0 z-[2] rounded-full", style: {
+                                                boxShadow: "inset 1px 1px 0 rgba(255,255,255,0.35), inset 1px 3px 0 rgba(0,0,0,0.03), inset 0 0 14px rgba(255,255,255,0.25), inset -1px -1px 0 rgba(0,0,0,0.06)",
+                                            }, "aria-hidden": "true" })] }, index));
                             }), name && (jsx("input", { type: "hidden", name: name, value: Array.isArray(currentValue)
                                     ? currentValue.join(",")
                                     : currentValue }))] }), showMinMax && (jsx("span", { className: cn(mergedTheme.minMaxLabelStyle), children: max })), showValue && (jsx("div", { className: cn(mergedTheme.valueDisplayStyle), children: formatValueDisplay() })), iconEnd && (jsx("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]", children: iconEnd }))] }), helperText && (jsx("div", { id: helperTextId, className: cn(mergedTheme.helperTextStyle, helperTextClassName), children: helperText }))] }));

package/dist/components/forms/Slider/Slider.theme.js

@@ -10,17 +10,17 @@ const sliderTheme = {
     // Root container with layout
     rootStyle: "relative flex items-center w-full touch-none select-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full",
     // Track (background)
-    trackStyle: "relative w-full h-2 grow rounded-full bg-[var(--color-background-tertiary)] overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full",
+    trackStyle: "relative w-full h-2 grow rounded-full bg-[var(--color-background-tertiary)] overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full shadow-inner",
     // Range (filled portion) - rounded to match track clipping
     rangeStyle: "absolute h-full bg-gradient-to-r from-[var(--color-primary-500)] to-[var(--color-primary-700)] transition-all rounded-full data-[disabled]:bg-[var(--color-background-disabled)] data-[invalid]:bg-[var(--color-danger)]",
     // Thumb (draggable handle)
-    thumbStyle: "block h-5 w-8 rounded-full border-2 border-[var(--color-primary)] ring-2 ring-white shadow-sm cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:hover:scale-100 data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-background-disabled)] data-[disabled]:border-[var(--color-border)] data-[disabled]:hover:scale-100 data-[invalid]:border-[var(--color-danger)] data-[invalid]:focus-visible:ring-[var(--color-danger)] glass-effect-5",
+    thumbStyle: "block h-5 w-7 rounded-full bg-transparent overflow-hidden cursor-grab active:cursor-grabbing active:scale-x-110 active:scale-y-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border)] focus-visible:ring-offset-2 transition-all hover:scale-110 data-[disabled]:cursor-not-allowed data-[disabled]:hover:scale-100 data-[invalid]:focus-visible:ring-[var(--color-danger)]",
     // Value display
     valueDisplayStyle: "text-base font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
     // Min/max labels
     minMaxLabelStyle: "text-base font-medium text-[var(--color-text-muted)]",
     // Tick marks
-    tickStyle: "absolute w-0.5 h-2 bg-white/60 -translate-x-0.5 pointer-events-none",
+    tickStyle: "absolute w-0.5 h-2 bg-[var(--color-border)] -translate-x-0.5 pointer-events-none",
 };
 
 export { sliderTheme };