flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/charts/theme/chart.theme.js

@@ -0,0 +1,73 @@
+/**
+ * Default theme for Chart components
+ * Uses Tailwind classes with CSS variables for consistency with the design system
+ */
+var chartTheme = {
+    baseStyle: {
+        colors: {
+            // Default series colors using your design system colors
+            series: [
+                'fill-[var(--color-primary)] stroke-[var(--color-primary)]', // Primary
+                'fill-[var(--color-warning)] stroke-[var(--color-warning)]', // Warning/Orange
+                'fill-[var(--color-success)] stroke-[var(--color-success)]', // Success/Green
+                'fill-[var(--color-danger)] stroke-[var(--color-danger)]', // Danger/Red
+                'fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]', // Primary lighter
+                'fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]', // Warning lighter
+                'fill-[var(--color-success-400)] stroke-[var(--color-success-400)]', // Success lighter
+                'fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]', // Danger lighter
+            ],
+            // Chart infrastructure colors
+            grid: 'stroke-neutral-200',
+            axis: 'stroke-neutral-300',
+            text: 'fill-[var(--color-text-secondary)]',
+            background: 'fill-white',
+            hover: 'fill-neutral-100',
+            disabled: 'fill-neutral-200',
+        },
+        opacity: {
+            default: 'opacity-100',
+            hover: 'opacity-80',
+            disabled: 'opacity-50',
+        },
+        transitions: {
+            default: 'transition-all duration-200',
+            hover: 'transition-all duration-150',
+        },
+    },
+    variants: {
+        default: {
+            colors: [
+                'fill-[var(--color-primary)] stroke-[var(--color-primary)]',
+                'fill-[var(--color-warning)] stroke-[var(--color-warning)]',
+                'fill-[var(--color-success)] stroke-[var(--color-success)]',
+                'fill-[var(--color-danger)] stroke-[var(--color-danger)]',
+                'fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]',
+                'fill-[var(--color-warning-400)] stroke-[var(--color-warning-400)]',
+                'fill-[var(--color-success-400)] stroke-[var(--color-success-400)]',
+                'fill-[var(--color-danger-400)] stroke-[var(--color-danger-400)]',
+            ],
+        },
+        minimal: {
+            colors: [
+                'fill-neutral-600 stroke-neutral-600',
+                'fill-neutral-500 stroke-neutral-500',
+                'fill-neutral-400 stroke-neutral-400',
+                'fill-neutral-300 stroke-neutral-300',
+                'fill-neutral-700 stroke-neutral-700',
+                'fill-neutral-800 stroke-neutral-800',
+            ],
+        },
+        gradient: {
+            colors: [
+                'fill-[var(--color-primary)] stroke-[var(--color-primary)]',
+                'fill-[var(--color-primary-400)] stroke-[var(--color-primary-400)]',
+                'fill-[var(--color-primary-500)] stroke-[var(--color-primary-500)]',
+                'fill-[var(--color-primary-600)] stroke-[var(--color-primary-600)]',
+                'fill-[var(--color-primary-700)] stroke-[var(--color-primary-700)]',
+                'fill-[var(--color-primary-800)] stroke-[var(--color-primary-800)]',
+            ],
+        },
+    },
+};
+
+export { chartTheme };

package/dist/components/charts/types/chart.types.js

@@ -0,0 +1,31 @@
+// Standardized Chart Defaults
+var CHART_DEFAULTS = {
+    // Display options
+    showGrid: true,
+    showXAxis: true,
+    showYAxis: true,
+    // Visual properties
+    barRadius: 32, // For bar corners (rounded top)
+    dotRadius: 4, // For line/area dot markers
+    cellRadius: 4, // For heatmap cells
+    radius: 20, // @deprecated Use barRadius, dotRadius, or cellRadius instead
+    strokeWidth: 2,
+    gap: 4, // For bars, cells
+    categoryGap: 16, // For bar categories
+    // Line/Area specific
+    curved: true,
+    curveType: 'monotone',
+    fillOpacity: 0.3,
+    showStroke: true,
+    showDots: true,
+    // Bar specific
+    orientation: 'vertical',
+    // Layout
+    stacked: false,
+    // Theme
+    variant: 'default',
+    // Accessibility
+    enableKeyboardNavigation: true,
+};
+
+export { CHART_DEFAULTS };

package/dist/components/charts/utils/animation-utils.js

@@ -0,0 +1,115 @@
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+
+/**
+ * Animation utilities for chart components
+ *
+ * Provides shared spring animation presets and helper functions
+ * to ensure consistent animations across all chart components.
+ */
+/**
+ * Spring animation presets for circular charts
+ *
+ * These presets define the physics of spring animations:
+ * - stiffness: How quickly the animation reaches its target (higher = faster)
+ * - damping: How much the animation oscillates (lower = more bouncy)
+ */
+var SPRING_PRESETS = {
+    /**
+     * Smooth animation - balanced and natural
+     * Best for: DonutChart, ActivityRings
+     */
+    smooth: {
+        stiffness: 80,
+        damping: 20,
+    },
+    /**
+     * Bouncy animation - more playful with slight overshoot
+     * Best for: GaugeChart needle, interactive elements
+     */
+    bouncy: {
+        stiffness: 60,
+        damping: 15,
+    },
+    /**
+     * Quick animation - fast and snappy
+     * Best for: Small updates, micro-interactions
+     */
+    quick: {
+        stiffness: 120,
+        damping: 25,
+    },
+    /**
+     * Slow animation - gentle and deliberate
+     * Best for: Large value changes, presentations
+     */
+    slow: {
+        stiffness: 50,
+        damping: 25,
+    },
+};
+/**
+ * Get spring animation configuration for circular charts
+ *
+ * @param preset - The animation preset to use
+ * @param shouldReduceMotion - Whether to respect reduced motion preferences
+ * @param delay - Optional delay before animation starts (in seconds)
+ * @returns Animation configuration object for motion components
+ *
+ * @example
+ * ```tsx
+ * const animation = getSpringAnimation('smooth', shouldReduceMotion, 0.2);
+ * <motion.circle
+ *   animate={...}
+ *   transition={animation}
+ * />
+ * ```
+ */
+function getSpringAnimation(preset, shouldReduceMotion, delay) {
+    if (shouldReduceMotion === void 0) { shouldReduceMotion = false; }
+    if (shouldReduceMotion) {
+        return { duration: 0 };
+    }
+    var config = SPRING_PRESETS[preset];
+    return __assign({ type: 'spring', stiffness: config.stiffness, damping: config.damping }, (delay !== undefined && { delay: delay }));
+}
+/**
+ * Create staggered animation delay for multiple elements
+ *
+ * @param index - The element index
+ * @param staggerDelay - The delay between each element (in seconds)
+ * @returns The calculated delay for this element
+ *
+ * @example
+ * ```tsx
+ * rings.map((ring, index) => (
+ *   <motion.circle
+ *     transition={{ ...springConfig, delay: getStaggerDelay(index, 0.1) }}
+ *   />
+ * ))
+ * ```
+ */
+function getStaggerDelay(index, staggerDelay) {
+    if (staggerDelay === void 0) { staggerDelay = 0.1; }
+    return index * staggerDelay;
+}
+/**
+ * Pre-configured animation settings for specific circular chart types
+ */
+var CIRCULAR_CHART_ANIMATIONS = {
+    /**
+     * DonutChart: Smooth spring animation with slight delay
+     */
+    donut: {
+        preset: 'smooth',
+        initialDelay: 0.2,
+    },
+    /**
+     * ActivityRings: Smooth spring with staggered rings
+     */
+    activityRings: {
+        preset: 'smooth',
+        staggerDelay: 0.1,
+        centerLabelDelay: 0.3,
+    }};
+
+export { CIRCULAR_CHART_ANIMATIONS, SPRING_PRESETS, getSpringAnimation, getStaggerDelay };

package/dist/components/charts/utils/chart-validation.js

@@ -0,0 +1,301 @@
+/**
+ * Safe math operations to prevent division by zero and other edge cases
+ */
+var SafeMath = /** @class */ (function () {
+    function SafeMath() {
+    }
+    /**
+     * Safe division that returns 0 when dividing by zero
+     */
+    SafeMath.divide = function (numerator, denominator, fallback) {
+        if (fallback === void 0) { fallback = 0; }
+        if (denominator === 0 || !isFinite(denominator)) {
+            return fallback;
+        }
+        var result = numerator / denominator;
+        return isFinite(result) ? result : fallback;
+    };
+    /**
+     * Safe percentage calculation
+     */
+    SafeMath.percentage = function (value, total, fallback) {
+        if (fallback === void 0) { fallback = 0; }
+        return this.divide(value * 100, total, fallback);
+    };
+    /**
+     * Safe Math.max that handles empty arrays
+     */
+    SafeMath.max = function (values, fallback) {
+        if (fallback === void 0) { fallback = 0; }
+        if (!Array.isArray(values) || values.length === 0) {
+            return fallback;
+        }
+        var filtered = values.filter(function (v) { return isFinite(v); });
+        return filtered.length > 0 ? Math.max.apply(Math, filtered) : fallback;
+    };
+    /**
+     * Safe Math.min that handles empty arrays
+     */
+    SafeMath.min = function (values, fallback) {
+        if (fallback === void 0) { fallback = 0; }
+        if (!Array.isArray(values) || values.length === 0) {
+            return fallback;
+        }
+        var filtered = values.filter(function (v) { return isFinite(v); });
+        return filtered.length > 0 ? Math.min.apply(Math, filtered) : fallback;
+    };
+    /**
+     * Safe scale calculation for chart positioning
+     */
+    SafeMath.scale = function (value, min, max, targetMin, targetMax) {
+        if (targetMin === void 0) { targetMin = 0; }
+        if (targetMax === void 0) { targetMax = 1; }
+        var range = max - min;
+        if (range === 0) {
+            return targetMin + (targetMax - targetMin) / 2; // Return middle of target range
+        }
+        var ratio = this.divide(value - min, range);
+        return targetMin + ratio * (targetMax - targetMin);
+    };
+    /**
+     * Clamp a value between min and max
+     */
+    SafeMath.clamp = function (value, min, max) {
+        return Math.min(Math.max(value, min), max);
+    };
+    return SafeMath;
+}());
+/**
+ * Validates chart data array
+ */
+function validateChartData(data) {
+    var errors = [];
+    var warnings = [];
+    // Check if data exists
+    if (!data) {
+        errors.push({
+            type: 'data',
+            message: 'Chart data is required but was not provided',
+            field: 'data'
+        });
+        return { isValid: false, errors: errors, warnings: warnings };
+    }
+    // Check if data is an array
+    if (!Array.isArray(data)) {
+        errors.push({
+            type: 'data',
+            message: 'Chart data must be an array',
+            field: 'data'
+        });
+        return { isValid: false, errors: errors, warnings: warnings };
+    }
+    // Check if data is empty
+    if (data.length === 0) {
+        warnings.push({
+            type: 'data',
+            message: 'Chart data array is empty',
+            field: 'data'
+        });
+    }
+    // Validate each data item
+    data.forEach(function (item, index) {
+        if (!item || typeof item !== 'object') {
+            errors.push({
+                type: 'data',
+                message: "Data item at index ".concat(index, " must be an object"),
+                field: "data[".concat(index, "]")
+            });
+            return;
+        }
+        // Check for at least one numeric value
+        var hasNumericValue = Object.values(item).some(function (value) {
+            return typeof value === 'number' && isFinite(value);
+        });
+        // Only warn about missing numeric values if there are no valid numeric values 
+        // in the entire dataset. Individual items with null/undefined values are 
+        // handled gracefully by chart components (e.g., using averages for bar charts)
+        if (!hasNumericValue) {
+            var allDataHasNumericValues = data.some(function (dataItem) {
+                return dataItem && typeof dataItem === 'object' &&
+                    Object.values(dataItem).some(function (value) { return typeof value === 'number' && isFinite(value); });
+            });
+            if (!allDataHasNumericValues) {
+                warnings.push({
+                    type: 'data',
+                    message: "Data item at index ".concat(index, " has no valid numeric values"),
+                    field: "data[".concat(index, "]")
+                });
+            }
+        }
+    });
+    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+}
+/**
+ * Validates chart configuration
+ */
+function validateChartConfig(config) {
+    var errors = [];
+    var warnings = [];
+    // Check if config exists
+    if (!config) {
+        errors.push({
+            type: 'config',
+            message: 'Chart config is required but was not provided',
+            field: 'config'
+        });
+        return { isValid: false, errors: errors, warnings: warnings };
+    }
+    // Check if config is an object
+    if (typeof config !== 'object') {
+        errors.push({
+            type: 'config',
+            message: 'Chart config must be an object',
+            field: 'config'
+        });
+        return { isValid: false, errors: errors, warnings: warnings };
+    }
+    // Check if config has any keys
+    var configKeys = Object.keys(config);
+    if (configKeys.length === 0) {
+        warnings.push({
+            type: 'config',
+            message: 'Chart config is empty - no data series will be displayed',
+            field: 'config'
+        });
+    }
+    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+}
+/**
+ * Validates that data and config are compatible
+ */
+function validateDataConfigCompatibility(data, config) {
+    var errors = [];
+    var warnings = [];
+    var configKeys = Object.keys(config);
+    var dataKeys = data.length > 0 ? Object.keys(data[0]) : [];
+    // Check if any config keys exist in data
+    var validKeys = configKeys.filter(function (key) {
+        return dataKeys.includes(key) &&
+            data.some(function (item) { return typeof item[key] === 'number' && isFinite(item[key]); });
+    });
+    if (validKeys.length === 0) {
+        errors.push({
+            type: 'config',
+            message: 'No config keys match valid numeric data fields',
+            field: 'config'
+        });
+    }
+    // Warn about config keys that don't exist in data
+    var missingKeys = configKeys.filter(function (key) { return !dataKeys.includes(key); });
+    missingKeys.forEach(function (key) {
+        warnings.push({
+            type: 'config',
+            message: "Config key \"".concat(key, "\" not found in data"),
+            field: "config.".concat(key)
+        });
+    });
+    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+}
+/**
+ * Sanitizes chart data by removing invalid entries and normalizing values
+ */
+function sanitizeChartData(data) {
+    if (!Array.isArray(data)) {
+        return [];
+    }
+    return data
+        .filter(function (item) { return item && typeof item === 'object'; })
+        .map(function (item) {
+        var sanitized = {};
+        Object.entries(item).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            if (typeof value === 'number') {
+                // Replace NaN and Infinity with null
+                sanitized[key] = isFinite(value) ? value : null;
+            }
+            else if (typeof value === 'string') {
+                // Keep string values (like names, categories)
+                sanitized[key] = value;
+            }
+            else if (value === null || value === undefined) {
+                // Keep explicit null/undefined
+                sanitized[key] = null;
+            }
+            // Skip other types (objects, arrays, etc.)
+        });
+        return sanitized;
+    });
+}
+/**
+ * Calculates safe min/max values for chart scales
+ */
+function calculateSafeScaleRange(data, config, options) {
+    if (options === void 0) { options = {}; }
+    var propMin = options.minValue, propMax = options.maxValue, _a = options.includeZero, includeZero = _a === void 0 ? true : _a, _b = options.padding, padding = _b === void 0 ? 0.1 : _b;
+    // If both min and max are provided, use them
+    if (propMin !== undefined && propMax !== undefined) {
+        return {
+            min: propMin,
+            max: propMax,
+            hasValidData: true
+        };
+    }
+    var configKeys = Object.keys(config);
+    var allValues = [];
+    // Extract all numeric values
+    data.forEach(function (item) {
+        configKeys.forEach(function (key) {
+            var value = item[key];
+            if (typeof value === 'number' && isFinite(value)) {
+                allValues.push(value);
+            }
+        });
+    });
+    // No valid data found
+    if (allValues.length === 0) {
+        return {
+            min: propMin !== null && propMin !== void 0 ? propMin : 0,
+            max: propMax !== null && propMax !== void 0 ? propMax : 100,
+            hasValidData: false
+        };
+    }
+    var min = propMin !== null && propMin !== void 0 ? propMin : SafeMath.min(allValues);
+    var max = propMax !== null && propMax !== void 0 ? propMax : SafeMath.max(allValues);
+    // Include zero if requested
+    if (includeZero) {
+        min = Math.min(min, 0);
+        max = Math.max(max, 0);
+    }
+    // Add padding if min and max are the same
+    if (min === max) {
+        var absValue = Math.abs(min);
+        var paddingValue = absValue > 0 ? absValue * padding : 1;
+        min -= paddingValue;
+        max += paddingValue;
+    }
+    return { min: min, max: max, hasValidData: true };
+}
+/**
+ * Comprehensive chart validation that combines all checks
+ */
+function validateChart(data, config) {
+    var errors = [];
+    var warnings = [];
+    // Validate data
+    var dataValidation = validateChartData(data);
+    errors.push.apply(errors, dataValidation.errors);
+    warnings.push.apply(warnings, dataValidation.warnings);
+    // Validate config
+    var configValidation = validateChartConfig(config);
+    errors.push.apply(errors, configValidation.errors);
+    warnings.push.apply(warnings, configValidation.warnings);
+    // If basic validation passes, check compatibility
+    if (dataValidation.isValid && configValidation.isValid) {
+        var compatibilityValidation = validateDataConfigCompatibility(data, config);
+        errors.push.apply(errors, compatibilityValidation.errors);
+        warnings.push.apply(warnings, compatibilityValidation.warnings);
+    }
+    return { isValid: errors.length === 0, errors: errors, warnings: warnings };
+}
+
+export { SafeMath, calculateSafeScaleRange, sanitizeChartData, validateChart, validateChartConfig, validateChartData, validateDataConfigCompatibility };

package/dist/components/charts/utils/color-utils.js

@@ -0,0 +1,144 @@
+/**
+ * Color utilities for chart components
+ * Handles color extraction, manipulation, and theme integration
+ */
+/**
+ * Extracts the fill color class from a combined class string
+ * @param classString - Combined class string like "fill-primary-base stroke-primary-base"
+ * @returns The fill class or empty string
+ */
+function extractFillClass(classString) {
+    var classes = classString.split(' ');
+    var fillClass = classes.find(function (cls) { return cls.startsWith('fill-'); });
+    return fillClass || '';
+}
+/**
+ * Extracts the stroke color class from a combined class string
+ * @param classString - Combined class string like "fill-primary-base stroke-primary-base"
+ * @returns The stroke class or empty string
+ */
+function extractStrokeClass(classString) {
+    var classes = classString.split(' ');
+    var strokeClass = classes.find(function (cls) { return cls.startsWith('stroke-'); });
+    return strokeClass || '';
+}
+/**
+ * Converts a Tailwind color class to a CSS variable
+ * @param colorClass - Tailwind color class like "fill-primary-base"
+ * @returns CSS variable string like "var(--color-primary-500)"
+ */
+function colorClassToVariable(colorClass) {
+    // Remove the prefix (fill-, stroke-, bg-, text-, etc.)
+    var colorPart = colorClass.replace(/^(fill-|stroke-|bg-|text-|border-)/, '');
+    // Convert to CSS variable format
+    if (colorPart.includes('-base')) {
+        return "var(--color-".concat(colorPart.replace('-base', '-500'), ")");
+    }
+    return "var(--color-".concat(colorPart, ")");
+}
+/**
+ * Combines multiple Tailwind classes into a single class string
+ * @param classes - Array of class strings
+ * @returns Combined class string
+ */
+function combineClasses() {
+    var classes = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        classes[_i] = arguments[_i];
+    }
+    return classes.filter(Boolean).join(' ');
+}
+/**
+ * Creates a color class string for chart elements
+ * @param baseColor - Base color (e.g., "primary", "warning")
+ * @param type - Type of element ("fill", "stroke", "both")
+ * @param shade - Color shade (e.g., "base", "400", "500")
+ * @returns Tailwind class string
+ */
+function createColorClass(baseColor, type, shade) {
+    if (type === void 0) { type = 'both'; }
+    if (shade === void 0) { shade = 'base'; }
+    var colorName = "".concat(baseColor, "-").concat(shade);
+    switch (type) {
+        case 'fill':
+            return "fill-".concat(colorName);
+        case 'stroke':
+            return "stroke-".concat(colorName);
+        case 'both':
+            return "fill-".concat(colorName, " stroke-").concat(colorName);
+        default:
+            return "fill-".concat(colorName, " stroke-").concat(colorName);
+    }
+}
+/**
+ * Generates a series of color classes for multiple data series
+ * @param baseColors - Array of base color names
+ * @param type - Type of element ("fill", "stroke", "both")
+ * @param shade - Color shade
+ * @returns Array of color class strings
+ */
+function generateSeriesColors(baseColors, type, shade) {
+    if (type === void 0) { type = 'both'; }
+    if (shade === void 0) { shade = 'base'; }
+    return baseColors.map(function (color) { return createColorClass(color, type, shade); });
+}
+/**
+ * Default color palette for charts
+ */
+var DEFAULT_CHART_COLORS = [
+    'primary',
+    'warning',
+    'success',
+    'danger',
+];
+/**
+ * Extended color palette for charts with more options
+ */
+var EXTENDED_CHART_COLORS = [
+    'primary',
+    'warning',
+    'success',
+    'danger',
+    'info',
+    'purple',
+    'pink',
+    'indigo',
+];
+/**
+ * Minimal color palette for subtle charts
+ */
+var MINIMAL_CHART_COLORS = [
+    'neutral',
+    'slate',
+    'gray',
+    'zinc',
+];
+/**
+ * Generate a color palette for charts
+ */
+function generateColorPalette(count, baseHue) {
+    if (baseHue === void 0) { baseHue = 200; }
+    var colors = [];
+    var saturation = 70;
+    var lightness = 50;
+    for (var i = 0; i < count; i++) {
+        var hue = (baseHue + (i * 360) / count) % 360;
+        colors.push("hsl(".concat(hue, ", ").concat(saturation, "%, ").concat(lightness, "%)"));
+    }
+    return colors;
+}
+/**
+ * Get contrast color (black or white) based on background color
+ */
+function getContrastColor(backgroundColor) {
+    // Convert hex to RGB
+    var hex = backgroundColor.replace('#', '');
+    var r = parseInt(hex.substring(0, 2), 16);
+    var g = parseInt(hex.substring(2, 2), 16);
+    var b = parseInt(hex.substring(4, 2), 16);
+    // Calculate luminance
+    var luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+}
+
+export { DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, colorClassToVariable, combineClasses, createColorClass, extractFillClass, extractStrokeClass, generateColorPalette, generateSeriesColors, getContrastColor };

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useContext, createContext, useState, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { accordionTheme } from './Accordion.theme.js';

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

@@ -4,7 +4,7 @@ var accordionTheme = {
     // Base container styles for stacked variant (unified card)
     baseStyleStacked: "w-full max-w-xl border border-[var(--color-border)] rounded-[var(--form-rounded)] overflow-hidden",
     // Item styles for separated variant (individual cards with spacing)
-    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-rounded)] bg-white overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
+    itemStyle: "border border-[var(--color-border)] rounded-[var(--form-rounded)] bg-[var(--color-background)] overflow-hidden mb-2 last-of-type:mb-0 data-[state=open]:shadow-xs",
     // 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)