@flikk/ui 1.0.0-beta.24 → 1.0.0-beta.25

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

@@ -8,9 +8,9 @@ const accordionTheme = {
     // Item styles for stacked variant (shared borders, no spacing)
     itemStyleStacked: "bg-white border-t border-[var(--color-border)] first-of-type:border-t-0",
     // Trigger styles (shared across variants)
-    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)]",
+    triggerStyle: "flex w-full gap-3 items-center px-4 py-2.5 text-left font-medium transition-all duration-200 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-text-primary)] text-sm",
     // Body styles (shared across variants)
-    bodyStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden",
+    bodyStyle: "data-[state=closed]:max-h-0 data-[state=open]:max-h-[320px] accordion-content overflow-hidden text-sm",
     // Body inner wrapper styles
     bodyInnerStyle: "p-4 pb-2.5 pt-0",
 };

package/dist/components/core/Breadcrumbs/Breadcrumbs.js

@@ -46,7 +46,7 @@ const Breadcrumbs = ({ items, separator, maxItems = 4, variant = "default", clas
     // Render individual breadcrumb item wrapped in its own <li>
     const renderItem = (item, index, isLast) => {
         const isCurrentPage = isLast || !item.href;
-        return (jsxs("li", { className: "flex items-center", children: [isCurrentPage ? (jsx("span", { className: cn("flex items-center text-base", theme.current), "aria-current": "page", children: renderItemContent(item) })) : (jsx("a", { href: item.href, className: cn("flex items-center text-base", theme.link), "aria-label": typeof item.label === 'string' ? `Navigate to ${item.label}` : undefined, children: renderItemContent(item) })), !isLast && (jsx("span", { className: cn("flex items-center ml-1", theme.separator), "aria-hidden": "true", children: SeparatorComponent }))] }, `breadcrumb-${index}`));
+        return (jsxs("li", { className: "flex items-center", children: [isCurrentPage ? (jsx("span", { className: cn("flex items-center text-sm", theme.current), "aria-current": "page", children: renderItemContent(item) })) : (jsx("a", { href: item.href, className: cn("flex items-center text-sm", theme.link), "aria-label": typeof item.label === 'string' ? `Navigate to ${item.label}` : undefined, children: renderItemContent(item) })), !isLast && (jsx("span", { className: cn("flex items-center ml-1", theme.separator), "aria-hidden": "true", children: SeparatorComponent }))] }, `breadcrumb-${index}`));
     };
     // Render ellipsis with dropdown wrapped in its own <li>
     const renderEllipsis = (separatorIndex) => {

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

@@ -10,7 +10,7 @@ const breadcrumbsTheme = {
     link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 font-medium",
     current: "text-[var(--color-text-primary)] font-medium",
     separator: "text-[var(--color-text-muted)] select-none",
-    ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-tertiary)]",
+    ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-tertiary)]",
 };
 /**
  * Variant styles for different breadcrumb appearances
@@ -21,7 +21,7 @@ const breadcrumbsVariants = {
         link: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 font-normal",
         current: "text-[var(--color-text-secondary)] font-normal",
         separator: "text-[var(--color-border)]",
-        ellipsis: "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
+        ellipsis: "text-sm text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] transition-colors duration-150 cursor-pointer p-1 rounded hover:bg-[var(--color-background-secondary)]",
     },
 };
 /**

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

@@ -371,7 +371,7 @@ const Calendar = React__default.forwardRef(({ mode = 'single', value, defaultVal
             }
         }
     }, [minDate, maxDate, customIsDateDisabled, currentMonth, currentYear, onViewDateChange, mode, value, onChange, selectedValue, rangeSelectionState]);
-    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-base font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-base font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, day))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day, index) => {
+    return (jsxs("div", { ref: ref, className: cn(calendarTheme.baseStyle, className), ...props, children: [jsxs("div", { className: calendarTheme.headerStyle, children: [onNavigatePrev !== null && (jsx(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronLeftIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigatePrev === null && jsx("div", { className: "w-8" }), resolvedHeaderMode === 'static' ? (jsxs("h2", { className: calendarTheme.titleStyle, children: [getMonthName(viewDate, months), " ", currentYear] })) : (jsxs("div", { className: calendarTheme.headerDropdownsStyle, children: [(resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (jsx(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "font-medium" })), (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (jsx(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "font-medium" }))] })), onNavigateNext !== null && (jsx(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm", children: jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2 }) })), onNavigateNext === null && jsx("div", { className: "w-8" })] }), jsx("div", { className: calendarTheme.weekdaysStyle, children: weekdays.map((day) => (jsx("div", { className: calendarTheme.weekdayStyle, children: day }, day))) }), jsx("div", { className: calendarTheme.daysGridStyle, children: calendarDays.map((day, index) => {
                     var _a;
                     const dayNumber = day.date.getDate();
                     const isInStrip = day.isRangeStart || day.isRangeEnd || day.isInRange;

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

@@ -182,7 +182,9 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
     }, [activeMonth]);
     // Check if date is selected
     const isDateSelected = useCallback((date) => {
-        return defaultSelectedDate ? isSameDay(date, defaultSelectedDate) : false;
+        return defaultSelectedDate
+            ? isSameDay(date, defaultSelectedDate)
+            : false;
     }, [defaultSelectedDate]);
     // Check if date is today
     const isDateToday = useCallback((date) => {
@@ -242,7 +244,7 @@ const CalendarMini = React__default.forwardRef(({ selectedDate, currentMonth, on
                                                 day: "numeric",
                                             }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button", ...(enableAnimations && {
                                                 whileTap: !disabled ? { scale: 0.95 } : undefined,
-                                            }), children: [jsx("div", { className: "text-base font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
+                                            }), children: [jsx("div", { className: "text-sm font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
                                     }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(Button, { iconOnly: true, color: "neutral", variant: "soft", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month", children: jsx(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }) })] }));
 });
 CalendarMini.displayName = "CalendarMini";

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

@@ -1,5 +1,5 @@
 const calendarMiniTheme = {
-    baseStyle: "flex items-center justify-center gap-1 transition-all duration-300",
+    baseStyle: "flex items-center justify-center gap-1 transition-all duration-300 text-sm",
     monthRowStyle: "flex flex-1 gap-4 overflow-x-auto scrollbar-hide scroll-smooth snap-x snap-mandatory px-4 ml-3",
     monthItemStyle: "font-semibold text-[var(--color-text-secondary)] cursor-pointer transition-colors hover:text-[var(--color-text-primary)] flex-shrink-0 snap-center data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:opacity-100",
     dateRowStyle: "relative overflow-hidden px-4 py-0.5",

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

@@ -5,7 +5,7 @@ const emptyTheme = {
     // Base container styles - customizable spacing, colors, and layout
     baseStyle: "flex flex-col items-center justify-center text-center w-full max-w-md mx-auto space-y-3 py-12 px-6 ",
     // Title text styles - customizable typography and colors
-    titleStyle: "text-base font-semibold text-[var(--color-text-primary)]",
+    titleStyle: "text-sm font-semibold text-[var(--color-text-primary)]",
     // Description text styles - customizable typography and colors
     subtitleStyle: "text-sm text-[var(--color-text-muted)]",
 };

package/dist/components/core/Link/Link.js

@@ -35,7 +35,7 @@ onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _o
         }, [shouldReduceMotion]);
     return (jsx(motion.a, { ref: ref, href: disabled ? undefined : href, className: cn(buttonTheme.baseStyle, themeClasses.colorClasses, themeClasses.variantClasses, themeClasses.sizeClasses, themeClasses.stateClasses, 
         // Special case for link variant to have an underline
-        "underline underline-offset-4 rounded-none font-semibold", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
+        "underline underline-offset-4 rounded-none font-semibold text-sm", className), "data-color": color, "data-variant": resolvedVariant, "data-size": size, "aria-disabled": disabled || undefined, ...(disabled ? {} : animationProps), ...props, children: children }));
 });
 Link.displayName = "Link";
 

package/dist/components/data-display/Timeline/Timeline.animations.d.ts

@@ -4,13 +4,6 @@ import { Variants } from "motion/react";
  * Provides a fade + slide effect when items enter the viewport
  */
 export declare const timelineItemVariants: Variants;
-/**
- * Get directional slide variants based on alignment side
- * Items slide in from the opposite direction of their placement
- *
- * @param side - 'left' slides from left, 'right' slides from right
- */
-export declare const getDirectionalVariants: (side: "left" | "right") => Variants;
 /**
  * Horizontal layout item entry animation
  * Items fade in from below

package/dist/components/data-display/Timeline/Timeline.animations.js

@@ -20,32 +20,6 @@ const timelineItemVariants = {
         },
     },
 };
-/**
- * Get directional slide variants based on alignment side
- * Items slide in from the opposite direction of their placement
- *
- * @param side - 'left' slides from left, 'right' slides from right
- */
-const getDirectionalVariants = (side) => ({
-    hidden: {
-        opacity: 0,
-        x: side === "left" ? -30 : 30,
-        y: 10,
-        transition: {
-            duration: 0.3,
-            ease: "easeOut",
-        },
-    },
-    visible: {
-        opacity: 1,
-        x: 0,
-        y: 0,
-        transition: {
-            duration: 0.5,
-            ease: [0.04, 0.62, 0.23, 0.98],
-        },
-    },
-});
 /**
  * Horizontal layout item entry animation
  * Items fade in from below
@@ -89,4 +63,4 @@ const timelineMarkerVariants = {
     },
 };
 
-export { getDirectionalVariants, timelineHorizontalItemVariants, timelineItemVariants, timelineMarkerVariants };
+export { timelineHorizontalItemVariants, timelineItemVariants, timelineMarkerVariants };

package/dist/components/data-display/Timeline/Timeline.js

@@ -14,7 +14,7 @@ const useTimelineContext = () => {
         throw new Error("Timeline compound components must be used within <Timeline>");
     return ctx;
 };
-const TimelineRoot = React__default.forwardRef(({ children, className, layout = "vertical", align = "left", theme: themeOverrides, ...props }, ref) => {
+const TimelineRoot = React__default.forwardRef(({ children, className, layout = "vertical", theme: themeOverrides, ...props }, ref) => {
     // Merge theme with any overrides
     const theme = useMemo(() => ({
         ...timelineTheme,
@@ -29,12 +29,11 @@ const TimelineRoot = React__default.forwardRef(({ children, className, layout =
     // Context value to be provided to children
     const contextValue = useMemo(() => ({
         layout,
-        align,
         theme,
         totalItems,
-    }), [layout, align, theme, totalItems]);
+    }), [layout, theme, totalItems]);
     const isHorizontal = layout === "horizontal";
-    return (jsx(TimelineContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(isHorizontal ? theme.baseStyleHorizontal : theme.baseStyle, className), "data-layout": layout, "data-align": align, role: "list", "aria-label": "Timeline", ...props, children: children }) }));
+    return (jsx(TimelineContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(isHorizontal ? theme.baseStyleHorizontal : theme.baseStyle, className), "data-layout": layout, role: "list", "aria-label": "Timeline", ...props, children: children }) }));
 });
 TimelineRoot.displayName = "Timeline";
 // Attach compound subcomponents

package/dist/components/data-display/Timeline/Timeline.types.d.ts

@@ -3,13 +3,6 @@ import React from "react";
  * Layout orientation for the Timeline
  */
 export type TimelineLayout = "vertical" | "horizontal";
-/**
- * Alignment mode for vertical timeline items
- * - left: all items on the left side of the line
- * - right: all items on the right side of the line
- * - alternate: items alternate between left and right
- */
-export type TimelineAlign = "left" | "right" | "alternate";
 /**
  * Status of an individual timeline item
  * - completed: item is finished (success color)
@@ -41,11 +34,6 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
      * @default 'vertical'
      */
     layout?: TimelineLayout;
-    /**
-     * Alignment of items relative to the timeline line (vertical only)
-     * @default 'left'
-     */
-    align?: TimelineAlign;
     /**
      * Theme overrides for customizing styles
      */
@@ -60,7 +48,6 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export interface TimelineContextValue {
     layout: TimelineLayout;
-    align: TimelineAlign;
     theme: TimelineThemeOverrides & {
         baseStyle: string;
         baseStyleHorizontal: string;

package/dist/components/data-display/Timeline/TimelineContent.js

@@ -5,16 +5,12 @@ import { useTimelineContext } from './Timeline.js';
 import { useTimelineItemContext } from './TimelineItem.js';
 
 const TimelineContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
-    const { theme, layout, align } = useTimelineContext();
-    const { isLast, index } = useTimelineItemContext();
+    const { theme, layout } = useTimelineContext();
+    const { isLast } = useTimelineItemContext();
     const isHorizontal = layout === "horizontal";
-    // For alternate layout, determine text alignment
-    const isAlternateRight = align === "alternate" && index % 2 !== 0;
     return (jsx("div", { ref: ref, className: cn(isHorizontal ? theme.contentStyleHorizontal : theme.contentStyle, 
         // Remove bottom padding on last item
-        !isHorizontal && isLast && "pb-0", 
-        // Align text based on side in alternate mode
-        !isHorizontal && isAlternateRight && "text-right", !isHorizontal && align === "right" && "text-right", className), ...props, children: children }));
+        !isHorizontal && isLast && "pb-0", className), ...props, children: children }));
 });
 TimelineContent.displayName = "TimelineContent";
 

package/dist/components/data-display/Timeline/TimelineItem.js

@@ -3,7 +3,7 @@ import React__default, { createContext, useRef, useState, useEffect, useContext
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useTimelineContext } from './Timeline.js';
-import { timelineHorizontalItemVariants, getDirectionalVariants, timelineItemVariants } from './Timeline.animations.js';
+import { timelineHorizontalItemVariants, timelineItemVariants } from './Timeline.animations.js';
 
 // Create context for TimelineItem
 const TimelineItemContext = createContext(undefined);
@@ -15,7 +15,7 @@ const useTimelineItemContext = () => {
     return ctx;
 };
 const TimelineItem = React__default.forwardRef(({ children, className, status = "pending", ...props }, ref) => {
-    const { layout, align, theme, totalItems } = useTimelineContext();
+    const { layout, theme, totalItems } = useTimelineContext();
     const shouldReduceMotion = useReducedMotion();
     const itemRef = useRef(null);
     const [isVisible, setIsVisible] = useState(false);
@@ -48,21 +48,12 @@ const TimelineItem = React__default.forwardRef(({ children, className, status =
     const isFirst = index === 0;
     const isLast = index === totalItems - 1;
     const isHorizontal = layout === "horizontal";
-    // Determine which side this item is on for alternate layout
-    const itemSide = align === "alternate"
-        ? index % 2 === 0
-            ? "left"
-            : "right"
-        : align;
-    // Select animation variants based on layout and alignment
+    // Select animation variants based on layout
     const getVariants = () => {
         if (shouldReduceMotion)
             return undefined;
         if (isHorizontal)
             return timelineHorizontalItemVariants;
-        if (align === "alternate") {
-            return getDirectionalVariants(itemSide);
-        }
         return timelineItemVariants;
     };
     // Context value for Marker and Content
@@ -72,14 +63,10 @@ const TimelineItem = React__default.forwardRef(({ children, className, status =
         isFirst,
         isLast,
     };
-    // Build className based on layout
-    const isAlternateRight = align === "alternate" && index % 2 !== 0;
     // Filter out conflicting motion props from rest
     const { onDrag, onDragEnd, onDragStart, onAnimationStart, onAnimationEnd, ...safeProps } = props;
     const variants = getVariants();
-    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, 
-            // For right-aligned or alternate-right, reverse the flex direction
-            !isHorizontal && align === "right" && "flex-row-reverse", !isHorizontal && isAlternateRight && "flex-row-reverse", className), "data-status": status, "data-side": itemSide, "data-layout": layout, role: "listitem", initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
+    return (jsx(TimelineItemContext.Provider, { value: contextValue, children: jsx(motion.div, { ref: ref || itemRef, className: cn(isHorizontal ? theme.itemStyleHorizontal : theme.itemStyle, className), "data-status": status, "data-layout": layout, role: "listitem", initial: variants ? "hidden" : undefined, animate: variants && isVisible ? "visible" : variants ? "hidden" : undefined, variants: variants, ...safeProps, children: children }) }));
 });
 TimelineItem.displayName = "TimelineItem";
 

package/dist/components/data-display/Timeline/index.d.ts

@@ -1,4 +1,4 @@
 import { Timeline } from "./Timeline";
-import { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineAlign, TimelineItemStatus } from "./Timeline.types";
+import { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineItemStatus } from "./Timeline.types";
 export { Timeline };
-export type { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineAlign, TimelineItemStatus, };
+export type { TimelineProps, TimelineItemProps, TimelineMarkerProps, TimelineContentProps, TimelineContextValue, TimelineItemContextValue, TimelineThemeOverrides, TimelineLayout, TimelineItemStatus, };

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

@@ -24,6 +24,8 @@ export { NoiseOverlay } from "./NoiseOverlay";
 export type { NoiseOverlayProps, NoiseBlendMode } from "./NoiseOverlay";
 export { Spotlight } from "./Spotlight";
 export type { SpotlightProps } from "./Spotlight";
+export { SpotlightBorder } from "./SpotlightBorder";
+export type { SpotlightBorderProps, SpotlightBorderVariation, } from "./SpotlightBorder";
 export { ParallaxSection } from "./ParallaxSection";
 export type { ParallaxSectionProps } from "./ParallaxSection";
 export { ScrollReveal } from "./ScrollReveal";
@@ -36,3 +38,8 @@ export { InteractiveCharacters } from "./InteractiveCharacters";
 export type { InteractiveCharactersProps, CharacterState, CharacterSize, } from "./InteractiveCharacters";
 export { InsetCircleButton, InsetPill } from "./Neumorphic";
 export type { InsetCircleButtonProps, InsetPillProps, } from "./Neumorphic";
+export { AIOrb } from "./AIOrb";
+export type { AIOrbProps, OrbState } from "./AIOrb";
+export type { DotSphereProps, LiquidProps, AuraProps } from "./AIOrb";
+export { Particles } from "./Particles";
+export type { ParticlesProps } from "./Particles";

package/dist/components/effects/index.js

@@ -11,6 +11,7 @@ export { GridPattern } from './GridPattern/GridPattern.js';
 export { DotPattern } from './DotPattern/DotPattern.js';
 export { NoiseOverlay } from './NoiseOverlay/NoiseOverlay.js';
 export { Spotlight } from './Spotlight/Spotlight.js';
+export { SpotlightBorder } from './SpotlightBorder/SpotlightBorder.js';
 export { ParallaxSection } from './ParallaxSection/ParallaxSection.js';
 export { ScrollReveal } from './ScrollReveal/ScrollReveal.js';
 export { StickyScroll } from './StickyScroll/StickyScroll.js';
@@ -18,3 +19,5 @@ export { PageTransition } from './PageTransition/PageTransition.js';
 export { InteractiveCharacters } from './InteractiveCharacters/InteractiveCharacters.js';
 export { InsetCircleButton } from './Neumorphic/InsetCircleButton.js';
 export { InsetPill } from './Neumorphic/InsetPill.js';
+export { AIOrb } from './AIOrb/AIOrb.js';
+export { Particles } from './Particles/Particles.js';

package/dist/components/forms/Select/Select.js

@@ -379,7 +379,7 @@ const SelectInner = ({ id, name, size = "md", state = "default", value, displayV
             .filter(Boolean);
         const displayed = selectedOpts.slice(0, maxDisplayedChips);
         const overflow = selectedOpts.length - maxDisplayedChips;
-        return (jsxs("div", { className: theme.chipContainerStyle, children: [jsx(AnimatePresence, { mode: "popLayout", children: displayed.map((opt) => (jsx(Tag, { size: "sm", onRemove: () => removeValue(opt.value), className: "shrink-0 max-w-[120px] truncate rounded-md border-none", children: opt.label }, String(opt.id)))) }), overflow > 0 && (jsxs("span", { className: theme.chipOverflowStyle, children: ["+", overflow, " more"] }))] }));
+        return (jsxs("div", { className: theme.chipContainerStyle, children: [jsx(AnimatePresence, { mode: "popLayout", children: displayed.map((opt) => (jsx(Tag, { size: "sm", onRemove: () => removeValue(opt.value), className: "shrink-0 max-w-[120px] truncate", children: opt.label }, String(opt.id)))) }), overflow > 0 && (jsxs("span", { className: theme.chipOverflowStyle, children: ["+", overflow, " more"] }))] }));
     }, [multiple, selectedValues, options, maxDisplayedChips, theme.chipContainerStyle, theme.chipOverflowStyle, removeValue]);
     const computedDisplayValue = displayValue ||
         (multiple