astro-component-kit 0.1.1 → 0.3.0

package/src/components/lib/charts/AreaChart.astro

@@ -0,0 +1,210 @@
+---
+/**
+ * AreaChart — A premium, smooth area chart component.
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  categories?: any[];
+  series?: any[];
+  height?: number | string;
+  colors?: string[];
+  showGrid?: boolean;
+  className?: string;
+}
+
+const {
+  title,
+  subtitle,
+  categories = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  series = [{ name: 'Data', data: [31, 40, 28, 51, 42, 109, 100] }],
+  height = 350,
+  colors = ['var(--c-accent, #b8860b)', 'var(--c-primary, #1e40af)', '#3b82f6'],
+  showGrid = true,
+  className = '',
+} = Astro.props;
+
+const chartConfig = {
+  categories,
+  series,
+  height,
+  colors,
+  showGrid,
+};
+---
+
+<div class={`premium-chart-card ${className}`} data-chart-type="area" data-config={JSON.stringify(chartConfig)}>
+  {(title || subtitle) && (
+    <div class="premium-chart-card__header">
+      {title && <h3 class="premium-chart-card__title">{title}</h3>}
+      {subtitle && <p class="premium-chart-card__subtitle">{subtitle}</p>}
+    </div>
+  )}
+  <div class="premium-chart-card__body">
+    <div class="chart-container"></div>
+    <div class="chart-fallback">Loading Chart...</div>
+  </div>
+</div>
+
+<style>
+  .premium-chart-card {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 24px);
+    padding: var(--sp-6, 24px);
+    overflow: hidden;
+    width: 100%;
+    min-width: 300px;
+    color: white;
+  }
+
+  .premium-chart-card__header {
+    margin-bottom: var(--sp-6, 24px);
+  }
+
+  .premium-chart-card__title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--c-text-1, #ffffff);
+    margin: 0;
+  }
+
+  .premium-chart-card__subtitle {
+    font-size: 0.875rem;
+    color: var(--c-text-2, #94a3b8);
+    margin: var(--sp-1, 4px) 0 0;
+  }
+
+  .premium-chart-card__body {
+    width: 100%;
+    position: relative;
+    min-height: 200px;
+  }
+
+  .chart-container {
+    width: 100%;
+    position: relative;
+    z-index: 2;
+  }
+
+  .chart-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    color: var(--c-text-3, #64748b);
+    z-index: 1;
+  }
+
+  :global(.apexcharts-tooltip) {
+    background: rgba(15, 23, 42, 0.9) !important;
+    backdrop-filter: blur(8px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 12px !important;
+    color: #fff !important;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3) !important;
+  }
+</style>
+
+<script>
+  async function initCharts() {
+    const charts = document.querySelectorAll('.premium-chart-card[data-chart-type="area"]');
+    if (charts.length === 0) return;
+
+    // Dynamic import to handle SSR and bundling better in production
+    let ApexChartsModule;
+    try {
+      ApexChartsModule = await import('apexcharts');
+    } catch (e) {
+      console.error('ApexCharts failed to load:', e);
+      return;
+    }
+    
+    const ApexCharts = ApexChartsModule.default || ApexChartsModule;
+    
+    charts.forEach(container => {
+      if (container.getAttribute('data-initialized')) return;
+      
+      const configStr = container.getAttribute('data-config');
+      if (!configStr) return;
+      
+      const config = JSON.parse(configStr);
+      const target = container.querySelector('.chart-container');
+      const fallback = container.querySelector('.chart-fallback');
+      
+      if (!target) return;
+
+      const options = {
+        series: config.series,
+        chart: {
+          type: 'area',
+          height: config.height,
+          toolbar: { show: false },
+          zoom: { enabled: false },
+          background: 'transparent',
+          fontFamily: 'Inter, sans-serif',
+          animations: {
+            enabled: true,
+            easing: 'easeinout',
+            speed: 800,
+          }
+        },
+        colors: config.colors,
+        dataLabels: { enabled: false },
+        stroke: { curve: 'smooth', width: 3 },
+        fill: {
+          type: 'gradient',
+          gradient: {
+            shadeIntensity: 1,
+            opacityFrom: 0.45,
+            opacityTo: 0.05,
+            stops: [20, 100],
+          },
+        },
+        xaxis: {
+          categories: config.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: { style: { colors: '#64748b', fontSize: '12px' } },
+        },
+        yaxis: {
+          labels: { style: { colors: '#64748b', fontSize: '12px' } },
+        },
+        grid: {
+          show: config.showGrid,
+          borderColor: 'rgba(255, 255, 255, 0.05)',
+          strokeDashArray: 4,
+        },
+        legend: {
+          show: true,
+          position: 'top',
+          horizontalAlign: 'right',
+          labels: { colors: '#94a3b8' },
+        },
+        tooltip: { theme: 'dark' },
+        theme: { mode: 'dark' }
+      };
+
+      try {
+        const chart = new ApexCharts(target, options);
+        chart.render().then(() => {
+          if (fallback) (fallback as HTMLElement).style.display = 'none';
+        });
+        container.setAttribute('data-initialized', 'true');
+      } catch (err) {
+        console.error('Failed to render chart:', err);
+        if (fallback) fallback.textContent = 'Failed to load chart';
+      }
+    });
+  }
+
+  // Initial load
+  initCharts();
+
+  // Handle navigations
+  document.addEventListener('astro:page-load', initCharts);
+  document.addEventListener('astro:after-swap', initCharts);
+</script>

package/src/components/lib/charts/BarChart.astro

@@ -0,0 +1,190 @@
+---
+/**
+ * BarChart — A premium bar chart component.
+ */
+interface Props {
+  title?: string;
+  subtitle?: string;
+  categories?: any[];
+  series?: any[];
+  height?: number | string;
+  colors?: string[];
+  horizontal?: boolean;
+  stacked?: boolean;
+  className?: string;
+}
+
+const {
+  title,
+  subtitle,
+  categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+  series = [{ name: 'Sessions', data: [44, 55, 41, 67, 22] }],
+  height = 350,
+  colors = ['var(--c-accent, #b8860b)', '#3b82f6', '#10b981'],
+  horizontal = false,
+  stacked = false,
+  className = '',
+} = Astro.props;
+
+const chartConfig = {
+  categories,
+  series,
+  height,
+  colors,
+  horizontal,
+  stacked,
+};
+---
+
+<div class={`premium-chart-card ${className}`} data-chart-type="bar" data-config={JSON.stringify(chartConfig)}>
+  {(title || subtitle) && (
+    <div class="premium-chart-card__header">
+      {title && <h3 class="premium-chart-card__title">{title}</h3>}
+      {subtitle && <p class="premium-chart-card__subtitle">{subtitle}</p>}
+    </div>
+  )}
+  <div class="premium-chart-card__body">
+    <div class="chart-container"></div>
+    <div class="chart-fallback">Loading Chart...</div>
+  </div>
+</div>
+
+<style>
+  .premium-chart-card {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 24px);
+    padding: var(--sp-6, 24px);
+    width: 100%;
+    min-width: 300px;
+  }
+
+  .premium-chart-card__header {
+    margin-bottom: var(--sp-6, 24px);
+  }
+
+  .premium-chart-card__title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--c-text-1, #ffffff);
+    margin: 0;
+  }
+
+  .premium-chart-card__subtitle {
+    font-size: 0.875rem;
+    color: var(--c-text-2, #94a3b8);
+    margin: var(--sp-1, 4px) 0 0;
+  }
+
+  .premium-chart-card__body {
+    width: 100%;
+    position: relative;
+    min-height: 200px;
+  }
+
+  .chart-container {
+    width: 100%;
+    position: relative;
+    z-index: 2;
+  }
+
+  .chart-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    color: var(--c-text-3, #64748b);
+    z-index: 1;
+  }
+</style>
+
+<script>
+  async function initCharts() {
+    const charts = document.querySelectorAll('.premium-chart-card[data-chart-type="bar"]');
+    if (charts.length === 0) return;
+
+    let ApexChartsModule;
+    try {
+      ApexChartsModule = await import('apexcharts');
+    } catch (e) {
+      console.error('ApexCharts failed to load:', e);
+      return;
+    }
+    
+    const ApexCharts = ApexChartsModule.default || ApexChartsModule;
+    
+    charts.forEach(container => {
+      if (container.getAttribute('data-initialized')) return;
+      
+      const configStr = container.getAttribute('data-config');
+      if (!configStr) return;
+      
+      const config = JSON.parse(configStr);
+      const target = container.querySelector('.chart-container');
+      const fallback = container.querySelector('.chart-fallback');
+      
+      if (!target) return;
+
+      const options = {
+        series: config.series,
+        chart: {
+          type: 'bar',
+          height: config.height,
+          stacked: config.stacked,
+          toolbar: { show: false },
+          background: 'transparent',
+          fontFamily: 'Inter, sans-serif',
+        },
+        plotOptions: {
+          bar: {
+            horizontal: config.horizontal,
+            columnWidth: '55%',
+            borderRadius: 8,
+            borderRadiusApplication: 'end',
+          },
+        },
+        colors: config.colors,
+        dataLabels: { enabled: false },
+        xaxis: {
+          categories: config.categories,
+          axisBorder: { show: false },
+          axisTicks: { show: false },
+          labels: { style: { colors: '#64748b', fontSize: '12px' } },
+        },
+        yaxis: {
+          labels: { style: { colors: '#64748b', fontSize: '12px' } },
+        },
+        grid: {
+          borderColor: 'rgba(255, 255, 255, 0.05)',
+          strokeDashArray: 4,
+        },
+        legend: {
+          show: true,
+          position: 'top',
+          horizontalAlign: 'right',
+          labels: { colors: '#94a3b8' },
+        },
+        tooltip: { theme: 'dark' },
+        theme: { mode: 'dark' }
+      };
+
+      try {
+        const chart = new ApexCharts(target, options);
+        chart.render().then(() => {
+          if (fallback) (fallback as HTMLElement).style.display = 'none';
+        });
+        container.setAttribute('data-initialized', 'true');
+      } catch (err) {
+        console.error('Failed to render chart:', err);
+        if (fallback) fallback.textContent = 'Failed to load chart';
+      }
+    });
+  }
+
+  initCharts();
+  document.addEventListener('astro:page-load', initCharts);
+  document.addEventListener('astro:after-swap', initCharts);
+</script>

package/src/components/lib/charts/DonutChart.astro

@@ -0,0 +1,177 @@
+---
+/**
+ * DonutChart — A minimalist donut chart component.
+ */
+interface Props {
+  title?: string;
+  labels?: string[];
+  series?: number[];
+  height?: number | string;
+  colors?: string[];
+  centerLabel?: string;
+  pie?: boolean;
+  className?: string;
+}
+
+const {
+  title,
+  labels = ['Direct', 'Social', 'Referral'],
+  series = [44, 33, 23],
+  height = 350,
+  colors = ['var(--c-accent, #b8860b)', '#3b82f6', '#10b981', '#f59e0b', '#ef4444'],
+  centerLabel = 'Total',
+  pie = false,
+  className = '',
+} = Astro.props;
+
+const chartConfig = {
+  labels,
+  series,
+  height,
+  colors,
+  centerLabel,
+  pie,
+};
+---
+
+<div class={`premium-chart-card ${className}`} data-chart-type="donut" data-config={JSON.stringify(chartConfig)}>
+  {title && (
+    <div class="premium-chart-card__header">
+      <h3 class="premium-chart-card__title">{title}</h3>
+    </div>
+  )}
+  <div class="premium-chart-card__body">
+    <div class="chart-container"></div>
+    <div class="chart-fallback">Loading Chart...</div>
+  </div>
+</div>
+
+<style>
+  .premium-chart-card {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--r-xl, 24px);
+    padding: var(--sp-6, 24px);
+    width: 100%;
+    min-width: 300px;
+  }
+
+  .premium-chart-card__header {
+    margin-bottom: var(--sp-6, 24px);
+  }
+
+  .premium-chart-card__title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--c-text-1, #ffffff);
+    margin: 0;
+  }
+
+  .premium-chart-card__body {
+    width: 100%;
+    position: relative;
+    min-height: 200px;
+  }
+
+  .chart-container {
+    width: 100%;
+    position: relative;
+    z-index: 2;
+  }
+
+  .chart-fallback {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.8rem;
+    color: var(--c-text-3, #64748b);
+    z-index: 1;
+  }
+</style>
+
+<script>
+  async function initCharts() {
+    const charts = document.querySelectorAll('.premium-chart-card[data-chart-type="donut"]');
+    if (charts.length === 0) return;
+
+    let ApexChartsModule;
+    try {
+      ApexChartsModule = await import('apexcharts');
+    } catch (e) {
+      console.error('ApexCharts failed to load:', e);
+      return;
+    }
+    
+    const ApexCharts = ApexChartsModule.default || ApexChartsModule;
+    
+    charts.forEach(container => {
+      if (container.getAttribute('data-initialized')) return;
+      
+      const configStr = container.getAttribute('data-config');
+      if (!configStr) return;
+      
+      const config = JSON.parse(configStr);
+      const target = container.querySelector('.chart-container');
+      const fallback = container.querySelector('.chart-fallback');
+      
+      if (!target) return;
+
+      const options = {
+        series: config.series,
+        labels: config.labels,
+        chart: {
+          type: config.pie ? 'pie' : 'donut',
+          height: config.height,
+          background: 'transparent',
+          fontFamily: 'Inter, sans-serif',
+        },
+        colors: config.colors,
+        stroke: { show: false },
+        dataLabels: { enabled: false },
+        plotOptions: {
+          pie: {
+            donut: {
+              size: '75%',
+              labels: {
+                show: !config.pie,
+                name: { show: true, color: '#94a3b8', fontSize: '14px' },
+                value: { show: true, color: '#ffffff', fontSize: '24px', fontWeight: 800 },
+                total: {
+                  show: true,
+                  label: config.centerLabel,
+                  color: '#94a3b8',
+                  formatter: (w: any) => w.globals.seriesGlobals.reduce((a: any, b: any) => a + b, 0),
+                },
+              },
+            },
+          },
+        },
+        legend: {
+          show: true,
+          position: 'bottom',
+          labels: { colors: '#94a3b8' },
+        },
+        tooltip: { theme: 'dark' },
+        theme: { mode: 'dark' }
+      };
+
+      try {
+        const chart = new ApexCharts(target, options);
+        chart.render().then(() => {
+          if (fallback) (fallback as HTMLElement).style.display = 'none';
+        });
+        container.setAttribute('data-initialized', 'true');
+      } catch (err) {
+        console.error('Failed to render chart:', err);
+        if (fallback) fallback.textContent = 'Failed to load chart';
+      }
+    });
+  }
+
+  initCharts();
+  document.addEventListener('astro:page-load', initCharts);
+  document.addEventListener('astro:after-swap', initCharts);
+</script>

package/src/components/lib/charts/index.ts

@@ -0,0 +1,6 @@
+// src/components/lib/charts/index.ts
+// Barrel export for chart components
+
+export { default as AreaChart } from './AreaChart.astro';
+export { default as BarChart } from './BarChart.astro';
+export { default as DonutChart } from './DonutChart.astro';

package/src/components/lib/data/index.ts

@@ -1,3 +1,6 @@
+// src/components/lib/data/index.ts
+// Barrel export for data display components
+
 export { default as AccordionGroupGlass } from './AccordionGroupGlass.astro';
 export { default as AvatarGroupStack } from './AvatarGroupStack.astro';
 export { default as CalendarGridView } from './CalendarGridView.astro';

package/src/components/lib/feedback/index.ts

@@ -1,3 +1,6 @@
+// src/components/lib/feedback/index.ts
+// Barrel export for feedback components
+
 export { default as AnimatedCheckmark } from './AnimatedCheckmark.astro';
 export { default as Badge } from './Badge.astro';
 export { default as CircleProgress } from './CircleProgress.astro';

package/src/components/lib/forms/index.ts

@@ -1,3 +1,6 @@
+// src/components/lib/forms/index.ts
+// Barrel export for form components
+
 export { default as AnimatedInput } from './AnimatedInput.astro';
 export { default as ChipInput } from './ChipInput.astro';
 export { default as ColorPickerInput } from './ColorPickerInput.astro';

package/src/components/lib/index.ts

@@ -1,6 +1,17 @@
-export { default as AnimatedInput } from './AnimatedInput.astro';
-export { default as Badge } from './Badge.astro';
-export { default as GlassButton } from './GlassButton.astro';
-export { default as GlassCard } from './GlassCard.astro';
-export { default as GlassNavbar } from './GlassNavbar.astro';
-export { default as GlowButton } from './GlowButton.astro';
+// Re-export all category components
+export * from './buttons/index';
+export * from './cards/index';
+export * from './charts/index';
+export * from './data/index';
+export * from './feedback/index';
+export * from './forms/index';
+export * from './layout/index';
+export * from './navigation/index';
+export * from './overlays/index';
+export * from './sections/index';
+export * from './typography/index';
+
+// Unique root-level components (no category folder)
+export { default as AnimatedGalaxy } from './AnimatedGalaxy.astro';
+export { default as Galaxy3D } from './Galaxy3D.astro';
+export { default as LogoWithGalaxy } from './LogoWithGalaxy.astro';