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

package/src/styles/theme.css

@@ -47,18 +47,18 @@
   --color-danger: var(--color-danger-600);
   --color-danger-contrast: var(--color-neutral-50);
 
-  /* Success color palette - Tailwind v4 green */
-  --color-success-50: oklch(0.982 0.018 155.826);
-  --color-success-100: oklch(0.962 0.044 156.743);
-  --color-success-200: oklch(0.925 0.084 155.995);
-  --color-success-300: oklch(0.871 0.15 154.449);
-  --color-success-400: oklch(0.792 0.209 151.711);
-  --color-success-500: oklch(0.723 0.219 149.579);
-  --color-success-600: oklch(0.627 0.194 149.214);
-  --color-success-700: oklch(0.527 0.154 150.069);
-  --color-success-800: oklch(0.448 0.119 151.328);
-  --color-success-900: oklch(0.393 0.095 152.535);
-  --color-success-950: oklch(0.266 0.065 152.934);
+  /* Success color palette - Tailwind v4 teal */
+  --color-success-50: oklch(0.984 0.014 180.72);
+  --color-success-100: oklch(0.953 0.051 180.801);
+  --color-success-200: oklch(0.91 0.096 180.426);
+  --color-success-300: oklch(0.855 0.138 181.071);
+  --color-success-400: oklch(0.777 0.152 181.912);
+  --color-success-500: oklch(0.704 0.14 182.503);
+  --color-success-600: oklch(0.6 0.118 184.704);
+  --color-success-700: oklch(0.511 0.096 186.391);
+  --color-success-800: oklch(0.437 0.078 188.216);
+  --color-success-900: oklch(0.386 0.063 188.416);
+  --color-success-950: oklch(0.277 0.046 192.524);
 
   --color-success: var(--color-success-600);
   --color-success-contrast: var(--color-neutral-50);
@@ -93,7 +93,7 @@
   --color-surface: oklch(100% 0 0);
   --color-chart-track: rgba(0, 0, 0, 0.06);
   --color-background: oklch(98.5% 0.002 247.839);
-  --color-background-secondary: oklch(95% 0.002 247.839);
+  --color-background-secondary: oklch(98.5% 0 0);
   --color-background-tertiary: oklch(90% 0.002 247.839);
   --color-background-quaternary: oklch(85% 0.002 247.839);
   --color-background-quinary: oklch(80% 0.002 247.839);
@@ -159,8 +159,8 @@
   --metric-radius: calc(var(--radius-base) * 2);
 
   /* Surfaces (3x base = 24px) */
-  --card-radius: calc(var(--radius-base) * 2);
-  --modal-radius: calc(var(--radius-base) * 2);
+  --card-radius: calc(var(--radius-base) * 1.5);
+  --modal-radius: calc(var(--radius-base) * 1.5);
 
   /* Special shapes - not part of scale */
   --segmented-radius: var(--form-radius);
@@ -200,7 +200,7 @@
   --button-icon-size-lg: var(--form-min-h-lg);
 
   /* Badge variables */
-  --badge-radius: var(--form-radius);
+  --badge-radius: 6px;
 
   /* Segmented variables - now defined in radius system above */
   --segmented-min-h-sm: var(--form-min-h-sm);
@@ -296,6 +296,50 @@
   --shadow-color-warning: var(--color-warning);
   --shadow-color-danger: var(--color-danger);
   --shadow-color-secondary: var(--color-secondary);
+
+  /* Neumorphic tokens — light mode (multi-layer realistic) */
+  --neu-raised-shadow:
+    1px 1px 2px rgba(0, 0, 0, 0.04), 3px 3px 6px rgba(0, 0, 0, 0.06),
+    6px 6px 14px rgba(0, 0, 0, 0.08), 12px 12px 28px rgba(0, 0, 0, 0.04),
+    -1px -1px 2px rgba(255, 255, 255, 0.5),
+    -3px -3px 6px rgba(255, 255, 255, 0.5),
+    -6px -6px 14px rgba(255, 255, 255, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.04);
+  --neu-inset-shadow:
+    inset 1px 1px 2px rgba(0, 0, 0, 0.06),
+    inset 2px 2px 4px rgba(0, 0, 0, 0.06),
+    inset 4px 4px 8px rgba(0, 0, 0, 0.05),
+    inset 8px 8px 16px rgba(0, 0, 0, 0.03),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.5),
+    inset -3px -3px 6px rgba(255, 255, 255, 0.4),
+    inset -6px -6px 12px rgba(255, 255, 255, 0.2),
+    0 1px 0 rgba(255, 255, 255, 0.5);
+  --neu-circle-groove-shadow:
+    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.08),
+    inset 1px 1px 3px rgba(0, 0, 0, 0.08),
+    inset 2px 2px 5px rgba(0, 0, 0, 0.04), 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
+    1px 1px 2px rgba(0, 0, 0, 0.3);
+  --neu-circle-disc-shadow:
+    inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.05),
+    inset 1px 1px 3px rgba(0, 0, 0, 0.04),
+    inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.4),
+    inset -1px -1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.06),
+    0 2px 4px rgba(0, 0, 0, 0.04);
+  --neu-raised-border: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.7) 0%,
+    rgba(255, 255, 255, 0.35) 30%,
+    transparent 50%,
+    rgba(0, 0, 0, 0.06) 100%
+  );
+  --neu-inset-border: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.1) 0%,
+    rgba(0, 0, 0, 0.04) 25%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.35) 75%,
+    rgba(255, 255, 255, 0.5) 100%
+  );
 }
 
 /* ============================================
@@ -370,5 +414,50 @@
     --ui-scrollbar-thumb-active: rgb(75 85 99);
     --ui-scrollbar-track-rest: transparent;
     --ui-scrollbar-track-active: rgba(55, 65, 81, 0.1);
+
+    /* Neumorphic tokens — dark mode (multi-layer realistic) */
+    --neu-raised-shadow:
+      1px 1px 2px rgba(0, 0, 0, 0.2), 3px 3px 6px rgba(0, 0, 0, 0.25),
+      6px 6px 14px rgba(0, 0, 0, 0.2), 12px 12px 28px rgba(0, 0, 0, 0.1),
+      -1px -1px 2px rgba(255, 255, 255, 0.02),
+      -3px -3px 6px rgba(255, 255, 255, 0.015),
+      -6px -6px 14px rgba(255, 255, 255, 0.01),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
+    --neu-inset-shadow:
+      inset 1px 1px 2px rgba(0, 0, 0, 0.3),
+      inset 2px 2px 4px rgba(0, 0, 0, 0.25),
+      inset 4px 4px 8px rgba(0, 0, 0, 0.2),
+      inset 8px 8px 16px rgba(0, 0, 0, 0.1),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.02),
+      inset -3px -3px 6px rgba(255, 255, 255, 0.015),
+      0 1px 0 rgba(255, 255, 255, 0.04);
+    --neu-circle-groove-shadow:
+      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.4),
+      inset 1px 1px 2px rgba(0, 0, 0, 0.35),
+      inset 2px 2px 5px rgba(0, 0, 0, 0.2),
+      0.5px 0.5px 1px rgba(255, 255, 255, 0.04),
+      1px 1px 2px rgba(255, 255, 255, 0.03);
+    --neu-circle-disc-shadow:
+      inset 0.5px 0.5px 1px rgba(0, 0, 0, 0.2),
+      inset 1px 1px 3px rgba(0, 0, 0, 0.15),
+      inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.04),
+      inset -1px -1px 2px rgba(255, 255, 255, 0.03),
+      0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
+    --neu-raised-border: linear-gradient(
+      145deg,
+      rgba(255, 255, 255, 0.2) 0%,
+      rgba(255, 255, 255, 0.08) 30%,
+      transparent 50%,
+      rgba(0, 0, 0, 0.12) 100%
+    );
+    --neu-inset-border: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.4) 0%,
+      rgba(0, 0, 0, 0.15) 25%,
+      rgba(255, 255, 255, 0.03) 50%,
+      rgba(255, 255, 255, 0.08) 75%,
+      rgba(255, 255, 255, 0.12) 100%
+    );
   }
 }

package/src/theme-plugin.css

@@ -9,3 +9,16 @@
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
 }
+
+/* bg-image arbitrary value support for consumers */
+@utility bg-image-scale-* {
+  --bg-image-scale: --value([number]);
+}
+
+@utility bg-image-blur-* {
+  --bg-image-blur: --value([length]);
+}
+
+@utility bg-image-opacity-* {
+  --bg-image-opacity: --value([number], [percentage]);
+}

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

@@ -1,3 +0,0 @@
-import React from "react";
-import { ApprovalCardProps } from "./ApprovalCard.types";
-export declare const ApprovalCard: React.FC<ApprovalCardProps>;

package/dist/components/ai/ApprovalCard/ApprovalCard.js

@@ -1,16 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/react/16/solid';
-import { approvalCardTheme } from './ApprovalCard.theme.js';
-import { Card } from '../../core/Card/Card.js';
-import { Badge } from '../../core/Badge/Badge.js';
-import { Button } from '../../core/Button/Button.js';
-import 'react';
-import { cn } from '../../../utils/cn.js';
-
-const ApprovalCard = ({ title, subtitle, variant = "default", riskLevel = "medium", onApprove, onDeny, children, isApproving = false, className, }) => {
-    const riskColor = approvalCardTheme.badgeColors[riskLevel];
-    const riskIcon = riskLevel === "critical" || riskLevel === "high" ? (jsx(ExclamationTriangleIcon, { className: "" })) : (jsx(CheckCircleIcon, { className: "" }));
-    return (jsxs(Card, { className: cn(approvalCardTheme.baseStyle, approvalCardTheme.variants[variant], className), children: [jsx(Card.Header, { children: jsx("div", { className: "flex flex-col items-start", children: jsxs(Badge, { variant: "outline", color: riskColor, size: "sm", iconStart: riskIcon, className: "font-semibold shadow", children: [riskLevel.toUpperCase(), " RISK"] }) }) }), jsxs(Card.Body, { className: "space-y-3", children: [jsxs("div", { className: "space-y-1", children: [jsx(Card.Title, { className: "", children: title }), subtitle && (jsx("p", { className: "text-sm md:text-base text-[var(--color-text-secondary)]/80", children: subtitle }))] }), children && (jsx("div", { className: "bg-[var(--color-background-secondary)] rounded-md p-3 text-sm font-mono border border-[var(--color-border)] overflow-x-auto", children: children }))] }), jsxs(Card.Footer, { className: "justify-end gap-2 mt-3", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: onDeny, children: "Deny" }), jsx(Button, { color: riskColor, size: "sm", state: isApproving ? "loading" : "default", onClick: onApprove, children: "Approve" })] })] }));
-};
-
-export { ApprovalCard };

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.d.ts

@@ -1,13 +0,0 @@
-export declare const approvalCardTheme: {
-    baseStyle: string;
-    variants: {
-        default: string;
-        glass: string;
-    };
-    badgeColors: {
-        readonly low: "success";
-        readonly medium: "warning";
-        readonly high: "danger";
-        readonly critical: "danger";
-    };
-};

package/dist/components/ai/ApprovalCard/ApprovalCard.theme.js

@@ -1,15 +0,0 @@
-const approvalCardTheme = {
-    baseStyle: "overflow-hidden",
-    variants: {
-        default: "border border-[var(--color-border)] bg-white dark:bg-[var(--color-background-secondary)]",
-        glass: "glass-effect",
-    },
-    badgeColors: {
-        low: "success",
-        medium: "warning",
-        high: "danger",
-        critical: "danger",
-    },
-};
-
-export { approvalCardTheme };

package/dist/components/ai/ApprovalCard/ApprovalCard.types.d.ts

@@ -1,43 +0,0 @@
-import { ReactNode } from "react";
-export type ApprovalRiskLevel = "low" | "medium" | "high" | "critical";
-export type ApprovalCardVariant = "default" | "glass";
-export interface ApprovalCardProps {
-    /**
-     * Title of the approval request
-     */
-    title: string;
-    /**
-     * Subtitle or context for the user
-     */
-    subtitle?: string;
-    /**
-     * Risk level determining visual severity
-     * @default "medium"
-     */
-    riskLevel?: ApprovalRiskLevel;
-    /**
-     * Visual style variant
-     * @default "default"
-     */
-    variant?: ApprovalCardVariant;
-    /**
-     * Callback when user approves the action
-     */
-    onApprove: () => void;
-    /**
-     * Callback when user denies/cancels the action
-     */
-    onDeny: () => void;
-    /**
-     * Optional payload to display (e.g. code snippet, JSON)
-     */
-    children?: ReactNode;
-    /**
-     * Loading state for the approve button
-     */
-    isApproving?: boolean;
-    /**
-     * Additional class names
-     */
-    className?: string;
-}

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

@@ -1,2 +0,0 @@
-export * from "./ApprovalCard";
-export * from "./ApprovalCard.types";

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

@@ -1,18 +0,0 @@
-import React from "react";
-import { MessageHistoryProps } from "./MessageHistory.types";
-/**
- * MessageHistory - Virtualized message container with auto-scroll
- *
- * Displays a scrollable list of chat messages with support for
- * auto-scrolling on new messages and optional virtualization.
- *
- * @example
- * ```tsx
- * <MessageHistory
- *   messages={messages}
- *   virtualizeThreshold={50}
- *   autoScroll
- * />
- * ```
- */
-export declare const MessageHistory: React.ForwardRefExoticComponent<MessageHistoryProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ai/MessageHistory/MessageHistory.js

@@ -1,98 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default, { useRef, useCallback, useEffect, useMemo } from 'react';
-import { messageHistoryTheme } from './MessageHistory.theme.js';
-import { Message } from '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Message/MessageBody.js';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * MessageHistory - Virtualized message container with auto-scroll
- *
- * Displays a scrollable list of chat messages with support for
- * auto-scrolling on new messages and optional virtualization.
- *
- * @example
- * ```tsx
- * <MessageHistory
- *   messages={messages}
- *   virtualizeThreshold={50}
- *   autoScroll
- * />
- * ```
- */
-const MessageHistory = React__default.forwardRef(({ messages, virtualizeThreshold = 50, autoScroll = true, showTimestamps = true, renderMessage, onCopyMessage, onRegenerateMessage, className, theme: customTheme = {}, ...props }, ref) => {
-    const scrollRef = useRef(null);
-    const lastMessageCountRef = useRef(0);
-    const userHasScrolledRef = useRef(false);
-    // Determine if virtualization should be enabled
-    const shouldVirtualize = messages.length > virtualizeThreshold;
-    // For simple virtualization, track visible range
-    const [visibleRange, setVisibleRange] = React__default.useState({
-        start: 0,
-        end: 50,
-    });
-    // Merge theme
-    const containerStyle = customTheme.containerStyle || messageHistoryTheme.containerStyle;
-    const scrollAreaStyle = customTheme.scrollAreaStyle || messageHistoryTheme.scrollAreaStyle;
-    const messageListStyle = customTheme.messageListStyle || messageHistoryTheme.messageListStyle;
-    const emptyStateStyle = customTheme.emptyStateStyle || messageHistoryTheme.emptyStateStyle;
-    // Scroll to bottom
-    const scrollToBottom = useCallback(() => {
-        if (scrollRef.current) {
-            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-        }
-    }, []);
-    // Auto-scroll on new messages
-    useEffect(() => {
-        if (autoScroll && messages.length > lastMessageCountRef.current) {
-            // Only auto-scroll if user hasn't manually scrolled up
-            if (!userHasScrolledRef.current) {
-                scrollToBottom();
-            }
-        }
-        lastMessageCountRef.current = messages.length;
-    }, [messages.length, autoScroll, scrollToBottom]);
-    // Track user scroll position
-    const handleScroll = useCallback(() => {
-        if (!scrollRef.current)
-            return;
-        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-        const isAtBottom = scrollHeight - scrollTop - clientHeight < 100;
-        userHasScrolledRef.current = !isAtBottom;
-        // Update visible range for virtualization
-        if (shouldVirtualize) {
-            const itemHeight = 100; // Approximate message height
-            const start = Math.max(0, Math.floor(scrollTop / itemHeight) - 5);
-            const end = Math.min(messages.length, start + Math.ceil(clientHeight / itemHeight) + 10);
-            setVisibleRange({ start, end });
-        }
-    }, [shouldVirtualize, messages.length]);
-    // Initial scroll to bottom
-    useEffect(() => {
-        scrollToBottom();
-    }, [scrollToBottom]);
-    // Get visible messages
-    const visibleMessages = useMemo(() => {
-        if (!shouldVirtualize)
-            return messages;
-        return messages.slice(visibleRange.start, visibleRange.end);
-    }, [messages, shouldVirtualize, visibleRange]);
-    // Default message renderer
-    const defaultRenderMessage = useCallback((message, index) => (jsx(Message, { role: message.role, content: message.content, timestamp: message.timestamp, avatar: message.avatar, showTimestamp: showTimestamps, isStreaming: message.isStreaming, onCopy: onCopyMessage ? () => onCopyMessage(message) : undefined, onRegenerate: onRegenerateMessage ? () => onRegenerateMessage(message) : undefined }, message.id)), [showTimestamps, onCopyMessage, onRegenerateMessage]);
-    // Empty state
-    if (messages.length === 0) {
-        return (jsx("div", { ref: ref, className: cn(containerStyle, className), ...props, children: jsx("div", { className: emptyStateStyle, children: jsx("p", { children: "No messages yet. Start a conversation!" }) }) }));
-    }
-    return (jsx("div", { ref: ref, className: cn(containerStyle, className), ...props, children: jsx("div", { ref: scrollRef, className: scrollAreaStyle, onScroll: handleScroll, role: "log", "aria-label": "Message history", "aria-live": "polite", children: jsx("div", { className: messageListStyle, style: shouldVirtualize
-                    ? {
-                        paddingTop: `${visibleRange.start * 100}px`,
-                        paddingBottom: `${(messages.length - visibleRange.end) * 100}px`,
-                    }
-                    : undefined, children: visibleMessages.map((message, index) => renderMessage
-                    ? renderMessage(message, visibleRange.start + index)
-                    : defaultRenderMessage(message, visibleRange.start + index)) }) }) }));
-});
-MessageHistory.displayName = "MessageHistory";
-
-export { MessageHistory };

package/dist/components/ai/MessageHistory/MessageHistory.theme.d.ts

@@ -1,2 +0,0 @@
-import { MessageHistoryTheme } from "./MessageHistory.types";
-export declare const messageHistoryTheme: MessageHistoryTheme;

package/dist/components/ai/MessageHistory/MessageHistory.theme.js

@@ -1,8 +0,0 @@
-const messageHistoryTheme = {
-    containerStyle: "flex flex-col h-full",
-    scrollAreaStyle: "flex-1 overflow-y-auto scroll-smooth",
-    messageListStyle: "flex flex-col gap-4 p-4",
-    emptyStateStyle: "flex items-center justify-center h-full text-[var(--color-text-muted)]",
-};
-
-export { messageHistoryTheme };

package/dist/components/ai/MessageHistory/MessageHistory.types.d.ts

@@ -1,94 +0,0 @@
-import { ReactNode } from "react";
-import { MessageRole, MessageAvatarProps } from "../../core/Message";
-/**
- * Message data structure for MessageHistory
- */
-export interface ChatMessageData {
-    /**
-     * Unique identifier for the message
-     */
-    id: string;
-    /**
-     * Role of the message sender
-     */
-    role: MessageRole;
-    /**
-     * Message content (text or ReactNode)
-     */
-    content: ReactNode;
-    /**
-     * Timestamp of the message
-     */
-    timestamp?: Date | string;
-    /**
-     * Avatar configuration
-     */
-    avatar?: MessageAvatarProps;
-    /**
-     * Whether the message is currently streaming
-     */
-    isStreaming?: boolean;
-}
-/**
- * MessageHistory component props
- */
-export interface MessageHistoryProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Array of messages to display
-     */
-    messages: ChatMessageData[];
-    /**
-     * Threshold for enabling virtualization
-     * When messages.length > virtualizeThreshold, virtualization is enabled
-     * @default 50
-     */
-    virtualizeThreshold?: number;
-    /**
-     * Whether to auto-scroll to bottom on new messages
-     * @default true
-     */
-    autoScroll?: boolean;
-    /**
-     * Whether to show timestamps
-     * @default true
-     */
-    showTimestamps?: boolean;
-    /**
-     * Custom render function for messages
-     */
-    renderMessage?: (message: ChatMessageData, index: number) => ReactNode;
-    /**
-     * Callback when copy button is clicked
-     */
-    onCopyMessage?: (message: ChatMessageData) => void;
-    /**
-     * Callback when regenerate button is clicked
-     */
-    onRegenerateMessage?: (message: ChatMessageData) => void;
-    /**
-     * Additional className
-     */
-    className?: string;
-    /**
-     * Theme overrides
-     */
-    theme?: MessageHistoryThemeOverrides;
-}
-/**
- * Theme configuration
- */
-export interface MessageHistoryTheme {
-    containerStyle: string;
-    scrollAreaStyle: string;
-    messageListStyle: string;
-    emptyStateStyle: string;
-}
-/**
- * Theme overrides
- */
-export interface MessageHistoryThemeOverrides {
-    containerStyle?: string;
-    scrollAreaStyle?: string;
-    messageListStyle?: string;
-    emptyStateStyle?: string;
-}

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

@@ -1,3 +0,0 @@
-export { MessageHistory } from "./MessageHistory";
-export { messageHistoryTheme } from "./MessageHistory.theme";
-export type { MessageHistoryProps, ChatMessageData, MessageHistoryTheme, MessageHistoryThemeOverrides, } from "./MessageHistory.types";

package/dist/icons/Icon.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-export interface IconProps extends React.SVGProps<SVGSVGElement> {
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
-    color?: string;
-    strokeWidth?: number;
-    className?: string;
-    /**
-     * Force dark mode styling for the icon. Use when placing the icon
-     * on a dark background while the page is in light mode. This applies the
-     * 'dark' class to the container, making the icon use light colors for visibility.
-     * @default false
-     */
-    darkMode?: boolean;
-}
-export interface IconComponent extends React.FC<IconProps> {
-    displayName?: string;
-}
-/**
- * Icon factory function to create consistent icons
- * @param Svg - The SVG component to render
- * @param displayName - The display name for the component
- * @returns A standardized Icon component
- */
-export declare function createIcon(Svg: React.FC<IconProps>, displayName: string): IconComponent;

package/dist/icons/Icon.js

@@ -1,30 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-
-/**
- * Icon factory function to create consistent icons
- * @param Svg - The SVG component to render
- * @param displayName - The display name for the component
- * @returns A standardized Icon component
- */
-function createIcon(Svg, displayName) {
-    const Icon = ({ size = 'md', color = 'currentColor', strokeWidth = 2, className = '', darkMode = false, ...props }) => {
-        // Map size names to pixel values
-        const sizeMap = {
-            xs: '16px',
-            sm: '20px',
-            md: '24px',
-            lg: '32px',
-            xl: '40px',
-        };
-        const pixelSize = typeof size === 'string' ? sizeMap[size] || '24px' : `${size}px`;
-        const svg = (jsx(Svg, { width: pixelSize, height: pixelSize, fill: "none", stroke: color, strokeWidth: strokeWidth, className: className, "aria-hidden": "true", style: { width: pixelSize, height: pixelSize, ...props.style }, ...props }));
-        if (darkMode) {
-            return (jsx("span", { className: "dark inline-flex", children: svg }));
-        }
-        return svg;
-    };
-    Icon.displayName = displayName;
-    return Icon;
-}
-
-export { createIcon };

package/dist/icons/Index.d.ts

@@ -1,16 +0,0 @@
-export * from './Icon';
-export * from './core/PlusIcon';
-export * from './core/MinusIcon';
-export * from './core/SearchIcon';
-export * from './core/LockIcon';
-export * from './core/DollarIcon';
-export * from './core/TickIcon';
-import React from 'react';
-interface IconProps {
-    size?: 'xs' | 'sm' | 'md' | 'lg';
-    className?: string;
-}
-export declare const CalendarIcon: React.FC<IconProps>;
-export declare const ClockIcon: React.FC<IconProps>;
-export declare const ChartBarIcon: React.FC<IconProps>;
-export declare const UserIcon: React.FC<IconProps>;

package/dist/icons/core/ChevronUpDown.d.ts

@@ -1 +0,0 @@
-export declare const ChevronUpDownIcon: import("../Icon").IconComponent;

package/dist/icons/core/ChevronUpDown.js

@@ -1,7 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createIcon } from '../Icon.js';
-
-const ChevronUpDownSvg = (props) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("path", { d: "m7 15 5 5 5-5" }), jsx("path", { d: "m7 9 5-5 5 5" })] }));
-const ChevronUpDownIcon = createIcon(ChevronUpDownSvg, 'ChevronUpDownIcon');
-
-export { ChevronUpDownIcon };

package/dist/icons/core/DollarIcon.d.ts

@@ -1 +0,0 @@
-export declare const DollarIcon: import("../Icon").IconComponent;

package/dist/icons/core/DollarIcon.js

@@ -1,5 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createIcon } from '../Icon.js';
-
-const DollarSvg = (props) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("line", { x1: "12", x2: "12", y1: "2", y2: "22" }), jsx("path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })] }));
-createIcon(DollarSvg, 'DollarIcon');

package/dist/icons/core/LockIcon.d.ts

@@ -1 +0,0 @@
-export declare const LockIcon: import("../Icon").IconComponent;

package/dist/icons/core/LockIcon.js

@@ -1,5 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createIcon } from '../Icon.js';
-
-const LockSvg = (props) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }), jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })] }));
-createIcon(LockSvg, 'LockIcon');

package/dist/icons/core/MinusIcon.d.ts

@@ -1 +0,0 @@
-export declare const MinusIcon: import("../Icon").IconComponent;

package/dist/icons/core/MinusIcon.js

@@ -1,7 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { createIcon } from '../Icon.js';
-
-const MinusSvg = (props) => (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: jsx("path", { d: "M5 12h14" }) }));
-const MinusIcon = createIcon(MinusSvg, 'MinusIcon');
-
-export { MinusIcon };

package/dist/icons/core/PlusIcon.d.ts

@@ -1 +0,0 @@
-export declare const PlusIcon: import("../Icon").IconComponent;

package/dist/icons/core/PlusIcon.js

@@ -1,7 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createIcon } from '../Icon.js';
-
-const PlusSvg = (props) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("path", { d: "M5 12h14" }), jsx("path", { d: "M12 5v14" })] }));
-const PlusIcon = createIcon(PlusSvg, 'PlusIcon');
-
-export { PlusIcon };

package/dist/icons/core/SearchIcon.d.ts

@@ -1 +0,0 @@
-export declare const SearchIcon: import("../Icon").IconComponent;

package/dist/icons/core/SearchIcon.js

@@ -1,7 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createIcon } from '../Icon.js';
-
-const SearchSvg = (props) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", strokeLinecap: "round", strokeLinejoin: "round", ...props, children: [jsx("circle", { cx: "11", cy: "11", r: "8" }), jsx("path", { d: "m21 21-4.3-4.3" })] }));
-const SearchIcon = createIcon(SearchSvg, 'SearchIcon');
-
-export { SearchIcon };