astro-component-kit 0.4.1 → 0.5.0

package/src/data/registry/index.ts

@@ -0,0 +1,64 @@
+// src/data/registry/index.ts
+import { buttons } from './buttons';
+import { forms } from './forms';
+import { cards } from './cards';
+import { feedback } from './feedback';
+import { navigation } from './navigation';
+import { layout } from './layout';
+import { overlays } from './overlays';
+import { data } from './data';
+import { typography } from './typography';
+import { sections, sectionCategories, getSectionsByCategory, getSectionCategoryById } from './sections';
+import { charts } from './charts';
+import { chartsSvg } from './charts-svg';
+import { ecommerce } from './ecommerce';
+import { app } from './app';
+
+import { type ComponentDoc, type Category, type SectionCategory } from './types';
+export type { ComponentDoc, Category, SectionCategory };
+export { sectionCategories, getSectionsByCategory, getSectionCategoryById };
+
+export const categories: Category[] = [
+  { id: 'buttons', name: 'Buttons', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="8" rx="4"/><circle cx="12" cy="12" r="1"/></svg>`, description: 'Interactive button components with premium styles and animations.' },
+  { id: 'forms', name: 'Forms', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg>`, description: 'Form elements with clean animations and validation states.' },
+  { id: 'cards', name: 'Cards', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="4"/><path d="M3 15h18"/></svg>`, description: 'Versatile card containers for content display.' },
+  { id: 'feedback', name: 'Feedback', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`, description: 'Badges, alerts, and notification components.' },
+  { id: 'navigation', name: 'Navigation', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12h18M3 6h18M3 18h18"/></svg>`, description: 'Navbars, tabs, breadcrumbs and navigation patterns.' },
+  { id: 'layout', name: 'Layout', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>`, description: 'Grids, containers, and structural sections.' },
+  { id: 'overlays', name: 'Overlays', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 4v16"/></svg>`, description: 'Modals, drawers, and popovers.' },
+  { id: 'data', name: 'Data Display', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>`, description: 'Stats, tables, and visualization elements.' },
+  { id: 'typography', name: 'Typography', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/></svg>`, description: 'Headings and text patterns.' },
+  { id: 'charts', name: 'Charts', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>`, description: 'Charts and statistics: SVG line, bar, pie, funnel, heatmap, KPI and more.' },
+  { id: 'ecommerce', name: 'E-commerce', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 7h12l-1 13H7z"/><path d="M9 7V6a3 3 0 0 1 6 0v1"/></svg>`, description: 'Shop building blocks: product cards, cart drawer, filters, product page and checkout.' },
+  { id: 'app', name: 'App & Dashboard', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M9 9h12"/></svg>`, description: 'SaaS building blocks: sidebar, topbar, data table, boards, settings and auth.' },
+  { id: 'sections', name: 'Sections', icon: `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>`, description: 'Complete page sections: heroes, features, pricing, CTAs, and more.' },
+];
+
+export const components: ComponentDoc[] = [
+  ...buttons,
+  ...forms,
+  ...cards,
+  ...feedback,
+  ...navigation,
+  ...layout,
+  ...overlays,
+  ...data,
+  ...typography,
+  ...charts,
+  ...chartsSvg,
+  ...ecommerce,
+  ...app,
+  ...sections,
+];
+
+export function getComponentsByCategory(categoryId: string): ComponentDoc[] {
+  return (components || []).filter((c) => c && c.category === categoryId);
+}
+
+export function getComponentBySlug(slug: string): ComponentDoc | undefined {
+  return (components || []).find((c) => c && c.slug === slug);
+}
+
+export function getFeaturedComponents(): ComponentDoc[] {
+  return (components || []).filter((c) => c && c.featured);
+}

package/src/data/registry/layout.ts

@@ -0,0 +1,206 @@
+// src/data/registry/layout.ts
+import type { ComponentDoc } from './types';
+import { source } from './sources';
+
+export const layout: ComponentDoc[] = [
+  {
+    slug: 'centered-container',
+    name: 'Centered Container',
+    description: 'A responsive container that limits content width and centers it.',
+    category: 'layout',
+    tags: ['layout', 'container', 'grid'],
+    code: source('layout/CenteredContainer.astro'),
+    usage: `<CenteredContainer maxWidth="1200px">Content</CenteredContainer>`,
+  },
+  {
+    slug: 'glass-card-grid',
+    name: 'Glass Card Grid',
+    description: 'A responsive grid specifically designed for card layouts with auto-fill columns.',
+    category: 'layout',
+    tags: ['layout', 'grid', 'cards'],
+    code: source('layout/GlassCardGrid.astro'),
+    usage: `<GlassCardGrid>Content</GlassCardGrid>`,
+  },
+  {
+    slug: 'split-screen-layout',
+    name: 'Split Screen',
+    description: 'A layout divided into two equal halves, perfect for landing pages.',
+    category: 'layout',
+    tags: ['layout', 'split', 'landing'],
+    code: source('layout/SplitScreenLayout.astro'),
+    usage: `<SplitScreenLayout>Content</SplitScreenLayout>`,
+  },
+  {
+    slug: 'masonry-grid',
+    name: 'Masonry Layout',
+    description: 'A CSS-based masonry layout for items of varying heights.',
+    category: 'layout',
+    tags: ['layout', 'masonry', 'columns'],
+    code: source('layout/MasonryGrid.astro'),
+    usage: `<MasonryGrid>Content</MasonryGrid>`,
+  },
+  {
+    slug: 'section-divider-text',
+    name: 'Divider with Text',
+    description: 'A minimalist line divider with a label in the middle.',
+    category: 'layout',
+    tags: ['layout', 'divider', 'typography'],
+    code: source('layout/SectionDividerText.astro'),
+    usage: `<SectionDividerText>Content</SectionDividerText>`,
+  },
+  {
+    slug: 'feature-hero',
+    name: 'Feature Hero Section',
+    description: 'Impactful header section with large typography and CTA buttons.',
+    category: 'layout',
+    tags: ['hero', 'layout', 'landing'],
+    code: source('layout/FeatureHero.astro'),
+    usage: `<FeatureHero>Content</FeatureHero>`,
+  },
+  {
+    slug: 'vertical-stack',
+    name: 'Auto-Stack (Vertical)',
+    description: 'Utility layout for stacking elements with consistent spacing.',
+    category: 'layout',
+    tags: ['layout', 'stack', 'spacing'],
+    code: source('layout/VerticalStack.astro'),
+    usage: `<VerticalStack gap="1.5rem">Content</VerticalStack>`,
+  },
+  {
+    slug: 'sidebar-layout-wrapper',
+    name: 'Sidebar Page Layout',
+    description: 'Two-column layout with fixed-width sidebar and liquid content.',
+    category: 'layout',
+    tags: ['layout', 'sidebar', 'dashboard'],
+    code: source('layout/SidebarLayoutWrapper.astro'),
+    usage: `<SidebarLayoutWrapper>Content</SidebarLayoutWrapper>`,
+  },
+  {
+    slug: 'bento-grid-3',
+    name: 'Bento Grid (3 Column)',
+    description: 'Modern dashboard grid inspired by Bento-box layouts.',
+    category: 'layout',
+    tags: ['layout', 'grid', 'dashboard'],
+    code: source('layout/BentoGrid3.astro'),
+    usage: `<BentoGrid3>Content</BentoGrid3>`,
+  },
+  {
+    slug: 'glass-section-header',
+    name: 'Glass Section Header',
+    description: 'Visual header for page sections with a blurred underline.',
+    category: 'layout',
+    tags: ['layout', 'header', 'glass'],
+    code: source('layout/GlassSectionHeader.astro'),
+    usage: `<GlassSectionHeader title="Example" subtitle="A description">Content</GlassSectionHeader>`,
+  },
+  {
+    slug: 'full-bleed-section',
+    name: 'Full Bleed Section',
+    description: 'Section that breaks out of the container to hit viewport edges.',
+    category: 'layout',
+    tags: ['layout', 'full-width', 'design'],
+    code: source('layout/FullBleedSection.astro'),
+    usage: `<FullBleedSection>Content</FullBleedSection>`,
+  },
+  {
+    slug: 'minimal-footer-grid',
+    name: 'Modern Footer Layout',
+    description: 'Multi-column grid footer for project links and brand info.',
+    category: 'layout',
+    tags: ['layout', 'footer', 'grid'],
+    code: source('layout/MinimalFooterGrid.astro'),
+    usage: `<MinimalFooterGrid>Content</MinimalFooterGrid>`,
+  },
+  {
+    slug: 'scroll-snap-section',
+    name: 'Scroll Snap Page',
+    description: 'Layout wrapper that snaps sections to the full viewport height.',
+    category: 'layout',
+    tags: ['layout', 'scroll-snap', 'ux'],
+    code: source('layout/ScrollSnapSection.astro'),
+    usage: `<ScrollSnapSection>Content</ScrollSnapSection>`,
+  },
+  {
+    slug: 'sticky-sidebar-wrapper',
+    name: 'Sticky Side Column',
+    description: 'Main content area with a side column that remains fixed while scrolling.',
+    category: 'layout',
+    tags: ['layout', 'sticky', 'sidebar'],
+    code: source('layout/StickySidebarWrapper.astro'),
+    usage: `<StickySidebarWrapper>Content</StickySidebarWrapper>`,
+  },
+  {
+    slug: 'cluster-horizontal',
+    name: 'Horizontal Cluster',
+    description: 'Auto-wrapping flex row for buttons, badges, or list items.',
+    category: 'layout',
+    tags: ['layout', 'flex', 'spacing'],
+    code: source('layout/ClusterHorizontal.astro'),
+    usage: `<ClusterHorizontal>Content</ClusterHorizontal>`,
+  },
+  {
+    slug: 'center-fixed-box',
+    name: 'Absolute Center Box',
+    description: 'Overlay or layout utility to fix content exactly in the screen center.',
+    category: 'layout',
+    tags: ['layout', 'utility', 'absolute'],
+    code: source('layout/CenterFixedBox.astro'),
+    usage: `<CenterFixedBox>Content</CenterFixedBox>`,
+  },
+  {
+    slug: 'gallery-grid-4',
+    name: '4-Column Portfolio Grid',
+    description: 'Square aspect-ratio grid for visual galleries and photos.',
+    category: 'layout',
+    tags: ['layout', 'grid', 'gallery'],
+    code: source('layout/GalleryGrid4.astro'),
+    usage: `<GalleryGrid4>Content</GalleryGrid4>`,
+  },
+  {
+    slug: 'step-layout-vertical',
+    name: 'Vertical Progress Steps',
+    description: 'Large scale vertical steps with space for detailed descriptions.',
+    category: 'layout',
+    tags: ['layout', 'onboarding', 'steps'],
+    code: source('layout/StepLayoutVertical.astro'),
+    usage: `<StepLayoutVertical>Content</StepLayoutVertical>`,
+  },
+  {
+    slug: 'landing-section-split',
+    name: 'Split Media Section',
+    description: 'Landing page section with text on one side and a large media placeholder on the other.',
+    category: 'layout',
+    tags: ['layout', 'landing', 'media'],
+    code: source('layout/LandingSectionSplit.astro'),
+    usage: `<LandingSectionSplit>Content</LandingSectionSplit>`,
+  },
+  {
+    slug: 'footer-centered-minimal',
+    name: 'Bottom Brand Footer',
+    description: 'Extremely simple centered footer for portfolio or personal sites.',
+    category: 'layout',
+    tags: ['layout', 'footer', 'personal'],
+    code: source('layout/FooterCenteredMinimal.astro'),
+    usage: `<FooterCenteredMinimal>Content</FooterCenteredMinimal>`,
+  },
+  {
+    slug: 'holy-grail-grid',
+    name: 'Holy Grail Grid',
+    description: 'Modern CSS grid-based responsive layout with header, collapsible left sidebar, dynamic main content area, right aside, and footer.',
+    category: 'layout',
+    tags: ["layout","grid","holygrail","dashboard","structure"],
+    featured: true,
+    code: source('layout/HolyGrailGrid.astro'),
+    usage: `<HolyGrailGrid><div slot="header">Header</div><div slot="left">Sidebar</div><div slot="main">Content</div><div slot="footer">Footer</div></HolyGrailGrid>`,
+  },
+  {
+    slug: 'diagonal-section-divider',
+    name: 'Diagonal Section Divider',
+    description: 'SVG slant angle section separator creating dynamic non-rectangular transitions between landing page sections.',
+    category: 'layout',
+    tags: ["layout","divider","diagonal","slant","separator"],
+    featured: false,
+    code: source('layout/DiagonalSectionDivider.astro'),
+    usage: `<DiagonalSectionDivider angle="slant-down" fill="var(--c-bg-subtle)" height={60} />`,
+  },
+];