@wakastellar/ui 1.0.10 → 2.0.0

package/dist/components/waka-sla-tracker/index.d.ts

@@ -0,0 +1,65 @@
+import * as React from "react";
+export type SLAPeriod = "day" | "week" | "month" | "quarter" | "year";
+export type SLATrend = "up" | "down" | "stable";
+export type SLAStatus = "healthy" | "warning" | "critical" | "breached";
+export interface SLAErrorBudget {
+    /** Error budget already used (in minutes or percentage) */
+    used: number;
+    /** Total error budget available */
+    total: number;
+}
+export interface WakaSLATrackerProps {
+    /** Current uptime percentage (e.g., 99.95) */
+    uptime: number;
+    /** SLA target percentage (e.g., 99.9) */
+    target: number;
+    /** Time period for the SLA measurement */
+    period: SLAPeriod;
+    /** Total downtime minutes in the period */
+    downtimeMinutes?: number;
+    /** Number of incidents in the period */
+    incidentCount?: number;
+    /** Error budget information */
+    errorBudget?: SLAErrorBudget;
+    /** Trend direction compared to previous period */
+    trend?: SLATrend;
+    /** Callback when period changes */
+    onPeriodChange?: (period: SLAPeriod) => void;
+    /** Visual variant */
+    variant?: "compact" | "detailed" | "card";
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function WakaSLATracker({ uptime, target, period, downtimeMinutes, incidentCount, errorBudget, trend, onPeriodChange, variant, size, className, }: WakaSLATrackerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace WakaSLATracker {
+    var displayName: string;
+}
+export interface UseSLATrackerOptions {
+    /** Initial uptime percentage */
+    initialUptime?: number;
+    /** SLA target percentage */
+    target: number;
+    /** Initial period */
+    initialPeriod?: SLAPeriod;
+    /** Callback when SLA status changes */
+    onStatusChange?: (status: SLAStatus) => void;
+    /** Callback when SLA is breached */
+    onBreach?: (uptime: number, target: number) => void;
+}
+export declare function useSLATracker({ initialUptime, target, initialPeriod, onStatusChange, onBreach, }: UseSLATrackerOptions): {
+    uptime: number;
+    target: number;
+    period: SLAPeriod;
+    status: SLAStatus;
+    trend: SLATrend;
+    downtimeMinutes: number;
+    incidentCount: number;
+    errorBudget: SLAErrorBudget;
+    setPeriod: React.Dispatch<React.SetStateAction<SLAPeriod>>;
+    setUptime: (newUptime: number) => void;
+    recordIncident: (durationMinutes: number) => void;
+    reset: () => void;
+};
+export default WakaSLATracker;

package/dist/components/waka-slider-range/index.d.ts

@@ -0,0 +1,88 @@
+export type ValueFormat = "none" | "currency" | "percentage" | "custom";
+export interface WakaSliderRangeProps {
+    /** Minimum bound of the slider */
+    min?: number;
+    /** Maximum bound of the slider */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Current range values [minValue, maxValue] */
+    value?: [number, number];
+    /** Default range values */
+    defaultValue?: [number, number];
+    /** Callback when values change */
+    onChange?: (value: [number, number]) => void;
+    /** Callback when dragging starts */
+    onChangeStart?: (value: [number, number]) => void;
+    /** Callback when dragging ends */
+    onChangeEnd?: (value: [number, number]) => void;
+    /** Value format type */
+    format?: ValueFormat;
+    /** Currency code for currency format */
+    currencyCode?: string;
+    /** Custom format function */
+    formatValue?: (value: number) => string;
+    /** Show value labels */
+    showLabels?: boolean;
+    /** Label position */
+    labelPosition?: "above" | "handles";
+    /** Show tooltip on drag */
+    showTooltip?: boolean;
+    /** Show tick marks */
+    showTicks?: boolean;
+    /** Custom tick values */
+    tickValues?: number[];
+    /** Tick count when tickValues not provided */
+    tickCount?: number;
+    /** Histogram data for background visualization */
+    histogram?: number[];
+    /** Histogram height in pixels */
+    histogramHeight?: number;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Color variant */
+    variant?: "default" | "primary" | "success" | "warning" | "danger";
+    /** Additional class names */
+    className?: string;
+    /** Aria label for min handle */
+    minAriaLabel?: string;
+    /** Aria label for max handle */
+    maxAriaLabel?: string;
+    /** Minimum distance between handles */
+    minDistance?: number;
+}
+export interface UseSliderRangeOptions {
+    /** Initial range values */
+    initialValue?: [number, number];
+    /** Minimum bound */
+    min?: number;
+    /** Maximum bound */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Minimum distance between handles */
+    minDistance?: number;
+}
+export interface UseSliderRangeReturn {
+    /** Current range values */
+    value: [number, number];
+    /** Set range values */
+    setValue: (value: [number, number]) => void;
+    /** Set minimum value */
+    setMin: (value: number) => void;
+    /** Set maximum value */
+    setMax: (value: number) => void;
+    /** Reset to initial values */
+    reset: () => void;
+    /** Min bound */
+    min: number;
+    /** Max bound */
+    max: number;
+    /** Step */
+    step: number;
+}
+export declare function useSliderRange(options?: UseSliderRangeOptions): UseSliderRangeReturn;
+export declare function WakaSliderRange({ min, max, step, value: controlledValue, defaultValue, onChange, onChangeStart, onChangeEnd, format, currencyCode, formatValue: customFormatValue, showLabels, labelPosition, showTooltip, showTicks, tickValues, tickCount, histogram, histogramHeight, disabled, size, variant, className, minAriaLabel, maxAriaLabel, minDistance, }: WakaSliderRangeProps): import("react/jsx-runtime").JSX.Element;
+export default WakaSliderRange;

package/dist/components/waka-spin-wheel/index.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export interface SpinWheelSegment {
+    /** Unique identifier for the segment */
+    id: string;
+    /** Display label for the segment */
+    label: string;
+    /** Background color for the segment (hex, rgb, or CSS color) */
+    color: string;
+    /** Optional icon to display in the segment */
+    icon?: React.ReactNode;
+    /** Probability weight (higher = more likely to win) */
+    weight?: number;
+    /** Any additional data associated with this segment */
+    value?: unknown;
+}
+export interface WakaSpinWheelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Array of wheel segments */
+    segments: SpinWheelSegment[];
+    /** Callback fired when spin starts */
+    onSpin?: () => void;
+    /** Callback fired when spin completes with the winning segment */
+    onResult?: (segment: SpinWheelSegment) => void;
+    /** Optional callback for tick sound on each segment pass */
+    onTick?: () => void;
+    /** Optional callback when wheel starts slowing down */
+    onSlowDown?: () => void;
+    /** Controlled spinning state */
+    spinning?: boolean;
+    /** Controlled result (id of winning segment) */
+    result?: string;
+    /** Duration of spin animation in milliseconds */
+    spinDuration?: number;
+    /** Number of full rotations before stopping */
+    rotations?: number;
+    /** Size of the wheel */
+    size?: number | "sm" | "md" | "lg";
+    /** Disable the spin button */
+    disabled?: boolean;
+    /** Custom content for the center button */
+    centerContent?: React.ReactNode;
+    /** Additional className for the container */
+    className?: string;
+    /** Show segment labels */
+    showLabels?: boolean;
+    /** Pointer position */
+    pointerPosition?: "top" | "right" | "bottom" | "left";
+    /** Custom pointer element */
+    customPointer?: React.ReactNode;
+}
+export declare const WakaSpinWheel: React.ForwardRefExoticComponent<WakaSpinWheelProps & React.RefAttributes<HTMLDivElement>>;
+export default WakaSpinWheel;

package/dist/components/waka-spotlight/index.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+export type SpotlightResultType = "page" | "action" | "user" | "file" | "setting" | "external";
+export interface SpotlightResult {
+    id: string;
+    title: string;
+    subtitle?: string;
+    type: SpotlightResultType;
+    icon?: React.ReactNode;
+    preview?: React.ReactNode;
+    action?: () => void;
+    href?: string;
+    meta?: string;
+}
+export interface SpotlightFilter {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    type?: SpotlightResultType;
+}
+export interface WakaSpotlightProps {
+    /** Whether spotlight is open */
+    open: boolean;
+    /** Callback when open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Search function - can be async */
+    onSearch: (query: string, filter?: string) => Promise<SpotlightResult[]> | SpotlightResult[];
+    /** Available filters */
+    filters?: SpotlightFilter[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Recently accessed items */
+    recentItems?: SpotlightResult[];
+    /** Quick actions shown when empty */
+    quickActions?: SpotlightResult[];
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Show preview panel */
+    showPreview?: boolean;
+}
+export declare function WakaSpotlight({ open, onOpenChange, onSearch, filters, placeholder, recentItems, quickActions, debounceMs, showPreview, }: WakaSpotlightProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function useSpotlight(): {
+    open: boolean;
+    onOpenChange: React.Dispatch<React.SetStateAction<boolean>>;
+    openSpotlight: () => void;
+    closeSpotlight: () => void;
+    toggleSpotlight: () => void;
+};

package/dist/components/waka-stats-hexagon/index.d.ts

@@ -0,0 +1,149 @@
+import * as React from "react";
+export interface HexagonStat {
+    /** Unique identifier for the stat */
+    id: string;
+    /** Label displayed at the vertex */
+    label: string;
+    /** Current value (0-100 by default) */
+    value: number;
+    /** Maximum value (defaults to 100) */
+    max?: number;
+    /** Optional icon for the stat */
+    icon?: React.ReactNode;
+    /** Optional description for tooltip */
+    description?: string;
+}
+export interface HexagonProfile {
+    /** Unique identifier */
+    id: string;
+    /** Profile name */
+    name: string;
+    /** Stats data (must have exactly 6 values) */
+    stats: number[];
+    /** Color for the profile */
+    color?: string;
+    /** Fill opacity (0-1) */
+    fillOpacity?: number;
+}
+export type HexagonColorTheme = "default" | "blue" | "green" | "purple" | "orange" | "pink" | "cyan" | "gradient";
+export interface WakaStatsHexagonProps {
+    /** Array of exactly 6 stats */
+    stats: HexagonStat[];
+    /** Primary profile data */
+    profile: HexagonProfile;
+    /** Optional comparison profile */
+    comparisonProfile?: HexagonProfile;
+    /** Size of the hexagon in pixels */
+    size?: number;
+    /** Number of grid levels */
+    levels?: number;
+    /** Color theme */
+    theme?: HexagonColorTheme;
+    /** Custom primary color (overrides theme) */
+    primaryColor?: string;
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show stat labels */
+    showLabels?: boolean;
+    /** Show stat values in labels */
+    showValues?: boolean;
+    /** Show data points */
+    showPoints?: boolean;
+    /** Enable tooltips */
+    showTooltips?: boolean;
+    /** Enable animations */
+    animated?: boolean;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Callback when a stat point is clicked */
+    onStatClick?: (stat: HexagonStat, value: number) => void;
+}
+export interface UseStatsHexagonOptions {
+    /** Initial stats */
+    initialStats?: HexagonStat[];
+    /** Initial profile */
+    initialProfile?: HexagonProfile;
+    /** Animation enabled */
+    animated?: boolean;
+}
+export interface UseStatsHexagonReturn {
+    /** Current stats */
+    stats: HexagonStat[];
+    /** Update stats */
+    setStats: React.Dispatch<React.SetStateAction<HexagonStat[]>>;
+    /** Current profile */
+    profile: HexagonProfile;
+    /** Update profile */
+    setProfile: React.Dispatch<React.SetStateAction<HexagonProfile>>;
+    /** Comparison profile */
+    comparisonProfile: HexagonProfile | null;
+    /** Set comparison profile */
+    setComparisonProfile: React.Dispatch<React.SetStateAction<HexagonProfile | null>>;
+    /** Update a single stat value */
+    updateStat: (id: string, value: number) => void;
+    /** Update all profile stats at once */
+    updateProfileStats: (stats: number[]) => void;
+    /** Reset to initial values */
+    reset: () => void;
+    /** Active/hovered stat index */
+    activeStatIndex: number | null;
+    /** Set active stat */
+    setActiveStatIndex: React.Dispatch<React.SetStateAction<number | null>>;
+    /** Comparison mode enabled */
+    isComparing: boolean;
+    /** Toggle comparison mode */
+    toggleComparison: () => void;
+}
+export declare function useStatsHexagon(options?: UseStatsHexagonOptions): UseStatsHexagonReturn;
+export declare function WakaStatsHexagon({ stats, profile, comparisonProfile, size, levels, theme, primaryColor, showGrid, showLabels, showValues, showPoints, showTooltips, animated, animationDuration, showLegend, className, onStatClick, }: WakaStatsHexagonProps): import("react/jsx-runtime").JSX.Element | null;
+export interface WakaStatsHexagonSimpleProps extends Omit<WakaStatsHexagonProps, "stats" | "profile"> {
+    /** Simple data format: array of { label, value } */
+    data: Array<{
+        label: string;
+        value: number;
+        max?: number;
+    }>;
+    /** Profile name */
+    profileName?: string;
+}
+export declare function WakaStatsHexagonSimple({ data, profileName, ...props }: WakaStatsHexagonSimpleProps): import("react/jsx-runtime").JSX.Element;
+export interface CharacterStats {
+    strength: number;
+    dexterity: number;
+    intelligence: number;
+    wisdom: number;
+    charisma: number;
+    constitution: number;
+}
+export interface WakaStatsHexagonRPGProps extends Omit<WakaStatsHexagonProps, "stats" | "profile" | "comparisonProfile"> {
+    /** Character stats */
+    characterStats: CharacterStats;
+    /** Character name */
+    characterName?: string;
+    /** Optional comparison character */
+    comparisonStats?: CharacterStats;
+    /** Comparison character name */
+    comparisonName?: string;
+    /** Max stat value (default 20 for D&D style) */
+    maxStat?: number;
+}
+export declare function WakaStatsHexagonRPG({ characterStats, characterName, comparisonStats, comparisonName, maxStat, theme, ...props }: WakaStatsHexagonRPGProps): import("react/jsx-runtime").JSX.Element;
+export interface WakaStatsHexagonSkillsProps extends Omit<WakaStatsHexagonProps, "stats" | "profile"> {
+    /** Skill categories with values 0-100 */
+    skills: {
+        technical: number;
+        communication: number;
+        leadership: number;
+        problemSolving: number;
+        creativity: number;
+        teamwork: number;
+    };
+    /** Person/team name */
+    name?: string;
+}
+export declare function WakaStatsHexagonSkills({ skills, name, theme, ...props }: WakaStatsHexagonSkillsProps): import("react/jsx-runtime").JSX.Element;
+export default WakaStatsHexagon;

package/dist/components/waka-status-matrix/index.d.ts

@@ -0,0 +1,38 @@
+export type StatusType = "up" | "down" | "degraded" | "maintenance";
+export type ViewType = "year" | "quarter" | "month" | "week";
+export type ColorScheme = "green" | "blue" | "purple" | "orange" | "status";
+export type CellSize = "sm" | "md" | "lg";
+export interface StatusMatrixDataPoint {
+    /** Date for the data point */
+    date: string | Date;
+    /** Value (typically 0-100 or count) */
+    value: number;
+    /** Status for uptime view */
+    status?: StatusType;
+}
+export interface WakaStatusMatrixProps {
+    /** Data points for the matrix */
+    data: StatusMatrixDataPoint[];
+    /** Start date for the range */
+    startDate?: Date;
+    /** End date for the range */
+    endDate?: Date;
+    /** View type */
+    view?: ViewType;
+    /** Color scheme */
+    colorScheme?: ColorScheme;
+    /** Cell size */
+    cellSize?: CellSize;
+    /** Show month/week labels */
+    showLabels?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Callback when a cell is clicked */
+    onCellClick?: (date: Date, value: number) => void;
+    /** Color for empty cells */
+    emptyColor?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+export declare function WakaStatusMatrix({ data, startDate, endDate, view, colorScheme, cellSize, showLabels, showLegend, onCellClick, emptyColor, className, }: WakaStatusMatrixProps): import("react/jsx-runtime").JSX.Element;
+export default WakaStatusMatrix;

package/dist/components/waka-streak-counter/index.d.ts

@@ -0,0 +1,27 @@
+export interface WakaStreakCounterProps {
+    /** Current streak count */
+    count: number;
+    /** Label for the streak */
+    label?: string;
+    /** Size variant */
+    size?: "sm" | "default" | "lg" | "xl";
+    /** Visual variant */
+    variant?: "flame" | "lightning" | "trophy" | "star";
+    /** Show animation when count changes */
+    animate?: boolean;
+    /** Show milestone celebration */
+    milestones?: number[];
+    /** Best streak for comparison */
+    bestStreak?: number;
+    /** Custom className */
+    className?: string;
+    /** Show confetti on milestone */
+    confetti?: boolean;
+}
+export declare function WakaStreakCounter({ count, label, size, variant, animate, milestones, bestStreak, className, confetti, }: WakaStreakCounterProps): import("react/jsx-runtime").JSX.Element;
+export interface WakaMiniStreakProps {
+    count: number;
+    variant?: "flame" | "lightning" | "trophy" | "star";
+    className?: string;
+}
+export declare function WakaMiniStreak({ count, variant, className }: WakaMiniStreakProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/waka-success-explosion/index.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export interface WakaSuccessExplosionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Trigger the explosion animation */
+    trigger?: boolean;
+    /** Callback when animation completes */
+    onComplete?: () => void;
+    /** Number of confetti particles */
+    particleCount?: number;
+    /** Duration of the animation in ms */
+    duration?: number;
+    /** Size of the explosion area */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** Primary color for particles (CSS color or Tailwind class) */
+    primaryColor?: string;
+    /** Secondary color for particles (CSS color or Tailwind class) */
+    secondaryColor?: string;
+    /** Accent color for particles (CSS color or Tailwind class) */
+    accentColor?: string;
+    /** Show the checkmark animation */
+    showCheckmark?: boolean;
+    /** Checkmark color */
+    checkmarkColor?: string;
+    /** Auto-hide after animation completes */
+    autoHide?: boolean;
+}
+export interface WakaSuccessExplosionRef {
+    /** Trigger the explosion animation */
+    explode: () => void;
+    /** Reset the component to its initial state */
+    reset: () => void;
+}
+export declare const WakaSuccessExplosion: React.ForwardRefExoticComponent<WakaSuccessExplosionProps & React.RefAttributes<WakaSuccessExplosionRef>>;
+export interface UseSuccessExplosionOptions {
+    particleCount?: number;
+    duration?: number;
+    size?: WakaSuccessExplosionProps["size"];
+    primaryColor?: string;
+    secondaryColor?: string;
+    accentColor?: string;
+    showCheckmark?: boolean;
+    checkmarkColor?: string;
+    autoHide?: boolean;
+    onComplete?: () => void;
+}
+export declare function useSuccessExplosion(options?: UseSuccessExplosionOptions): {
+    ref: React.RefObject<WakaSuccessExplosionRef>;
+    isExploding: boolean;
+    explode: () => void;
+    reset: () => void;
+    ExplosionComponent: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/waka-swipe-card/index.d.ts

@@ -0,0 +1,64 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+export type SwipeDirection = "left" | "right" | "up" | "down";
+export interface SwipeCardData {
+    id: string | number;
+    [key: string]: unknown;
+}
+export interface WakaSwipeCardProps<T extends SwipeCardData> extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof swipeCardVariants> {
+    /** Array of card data to display */
+    cards: T[];
+    /** Render function for each card */
+    renderCard: (card: T, index: number) => React.ReactNode;
+    /** Called when a card is swiped */
+    onSwipe?: (card: T, direction: SwipeDirection) => void;
+    /** Called when swiping starts */
+    onSwipeStart?: (card: T, direction: SwipeDirection) => void;
+    /** Called during swipe with progress (0-1) */
+    onSwipeProgress?: (card: T, direction: SwipeDirection, progress: number) => void;
+    /** Threshold to trigger swipe (0-1, default 0.3) */
+    swipeThreshold?: number;
+    /** Enable/disable specific swipe directions */
+    allowedDirections?: SwipeDirection[];
+    /** Show overlay indicators during swipe */
+    showOverlay?: boolean;
+    /** Custom overlay content for each direction */
+    overlayContent?: Partial<Record<SwipeDirection, React.ReactNode>>;
+    /** Number of visible cards in stack */
+    stackSize?: number;
+    /** Scale factor for stacked cards */
+    stackScale?: number;
+    /** Vertical offset for stacked cards */
+    stackOffset?: number;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Enable haptic feedback (if available) */
+    hapticFeedback?: boolean;
+    /** Disable interactions */
+    disabled?: boolean;
+    /** Called when all cards are swiped */
+    onEmpty?: () => void;
+}
+export interface WakaSwipeCardRef {
+    swipe: (direction: SwipeDirection) => void;
+    rewind: () => void;
+    getCurrentCard: () => SwipeCardData | null;
+}
+declare const swipeCardVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "full" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export declare const WakaSwipeCard: <T extends SwipeCardData>(props: WakaSwipeCardProps<T> & {
+    ref?: React.ForwardedRef<WakaSwipeCardRef>;
+}) => React.ReactElement;
+export interface WakaSwipeCardActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Reference to the SwipeCard component */
+    swipeCardRef: React.RefObject<WakaSwipeCardRef>;
+    /** Show rewind button */
+    showRewind?: boolean;
+    /** Allowed directions to show buttons for */
+    directions?: SwipeDirection[];
+    /** Button size */
+    size?: "sm" | "default" | "lg";
+}
+export declare function WakaSwipeCardActions({ swipeCardRef, showRewind, directions, size, className, ...props }: WakaSwipeCardActionsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/waka-tabs-morph/index.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+export interface TabItem {
+    /** Unique identifier */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Icon element */
+    icon?: React.ReactNode;
+    /** Badge content (number or text) */
+    badge?: number | string;
+    /** Disable the tab */
+    disabled?: boolean;
+    /** Tab content (for controlled usage) */
+    content?: React.ReactNode;
+}
+export interface WakaTabsMorphProps {
+    /** Tab items */
+    tabs: TabItem[];
+    /** Currently active tab id */
+    activeTab?: string;
+    /** Default active tab id */
+    defaultTab?: string;
+    /** Callback when tab changes */
+    onChange?: (tabId: string) => void;
+    /** Orientation */
+    orientation?: "horizontal" | "vertical";
+    /** Size variant */
+    size?: "sm" | "md" | "lg";
+    /** Style variant */
+    variant?: "default" | "pills" | "underline" | "enclosed";
+    /** Full width tabs */
+    fullWidth?: boolean;
+    /** Animation duration in ms */
+    animationDuration?: number;
+    /** Custom className for the tab list */
+    className?: string;
+    /** Custom className for the tab content */
+    contentClassName?: string;
+    /** Render function for tab content */
+    renderContent?: (tab: TabItem) => React.ReactNode;
+}
+export declare function WakaTabsMorph({ tabs, activeTab, defaultTab, onChange, orientation, size, variant, fullWidth, animationDuration, className, contentClassName, renderContent, }: WakaTabsMorphProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTabs(tabs: TabItem[], initialTab?: string): {
+    activeTab: string;
+    activeTabData: TabItem | undefined;
+    setActiveTab: React.Dispatch<React.SetStateAction<string>>;
+    goToTab: (tabId: string) => void;
+    goToNext: () => void;
+    goToPrevious: () => void;
+    goToFirst: () => void;
+    goToLast: () => void;
+};
+export interface WakaTabPanelProps {
+    /** Tab id this panel corresponds to */
+    tabId: string;
+    /** Current active tab id */
+    activeTab: string;
+    /** Panel content */
+    children: React.ReactNode;
+    /** Keep panel mounted when not active */
+    keepMounted?: boolean;
+    /** Custom className */
+    className?: string;
+}
+export declare function WakaTabPanel({ tabId, activeTab, children, keepMounted, className, }: WakaTabPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export default WakaTabsMorph;