sdga-ui 1.0.6 → 1.0.8

package/sdga-ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "sdga-ui",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "start": "next start",
+    "types:check": "fumadocs-mdx && tsc --noEmit",
+    "postinstall": "fumadocs-mdx"
+  },
+  "dependencies": {
+    "fumadocs-core": "16.2.2",
+    "fumadocs-mdx": "14.0.4",
+    "fumadocs-ui": "16.2.2",
+    "lucide-react": "^0.552.0",
+    "next": "16.0.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "sdga-ui": "^1.0.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.16",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.16",
+    "typescript": "^5.9.3"
+  }
+}

package/sdga-ui/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/sdga-ui/source.config.ts

@@ -0,0 +1,27 @@
+import {
+  defineConfig,
+  defineDocs,
+  frontmatterSchema,
+  metaSchema,
+} from 'fumadocs-mdx/config';
+
+// You can customise Zod schemas for frontmatter and `meta.json` here
+// see https://fumadocs.dev/docs/mdx/collections
+export const docs = defineDocs({
+  dir: 'content/docs',
+  docs: {
+    schema: frontmatterSchema,
+    postprocess: {
+      includeProcessedMarkdown: true,
+    },
+  },
+  meta: {
+    schema: metaSchema,
+  },
+});
+
+export default defineConfig({
+  mdxOptions: {
+    // MDX options
+  },
+});

package/sdga-ui/src/app/(home)/layout.tsx

@@ -0,0 +1,6 @@
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+import { baseOptions } from '@/lib/layout.shared';
+
+export default function Layout({ children }: LayoutProps<'/'>) {
+  return <HomeLayout {...baseOptions()}>{children}</HomeLayout>;
+}

package/sdga-ui/src/app/(home)/page.tsx

@@ -0,0 +1,202 @@
+import Link from 'next/link';
+import { ArrowRight, Code2, Palette, Zap, Globe, Sparkles, BookOpen } from 'lucide-react';
+
+export default function HomePage() {
+  return (
+    <div className="flex flex-col">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden">
+        <div className="absolute inset-0 bg-linear-to-br from-blue-50 via-indigo-50 to-purple-50 dark:from-blue-950/20 dark:via-indigo-950/20 dark:to-purple-950/20" />
+        <div className="absolute inset-0 opacity-[0.02]" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, rgb(0 0 0 / 0.5) 1px, transparent 0)', backgroundSize: '40px 40px' }} />
+        
+        <div className="relative container mx-auto px-4 py-24 md:py-32">
+          <div className="flex flex-col items-center text-center max-w-4xl mx-auto">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/80 dark:bg-neutral-900/80 backdrop-blur-sm border border-neutral-200 dark:border-neutral-800 mb-6 shadow-sm">
+              <Sparkles className="w-4 h-4 text-indigo-600 dark:text-indigo-400" />
+              <span className="text-sm font-medium">Saudi Digital Government Authority</span>
+            </div>
+            
+            <h1 className="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-linear-to-r from-indigo-600 via-purple-600 to-pink-600 dark:from-indigo-400 dark:via-purple-400 dark:to-pink-400">
+              SDGA UI
+            </h1>
+            
+            <p className="text-xl md:text-2xl text-neutral-600 dark:text-neutral-400 mb-8 max-w-2xl">
+              A beautiful, accessible, and customizable component library built for modern web applications
+            </p>
+            
+            <div className="flex flex-wrap items-center justify-center gap-4 mb-12">
+              <Link 
+                href="/docs" 
+                className="inline-flex items-center gap-2 px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-semibold transition-all hover:scale-105 hover:shadow-xl shadow-lg"
+              >
+                Get Started
+                <ArrowRight className="w-5 h-5" />
+              </Link>
+              
+              <Link 
+                href="/docs" 
+                className="inline-flex items-center gap-2 px-8 py-4 bg-white dark:bg-neutral-900 hover:bg-neutral-50 dark:hover:bg-neutral-800 text-neutral-900 dark:text-white rounded-lg font-semibold border border-neutral-200 dark:border-neutral-800 transition-all hover:shadow-lg"
+              >
+                <BookOpen className="w-5 h-5" />
+                View Documentation
+              </Link>
+            </div>
+            
+            {/* Stats */}
+            <div className="grid grid-cols-3 gap-8 md:gap-12 pt-8 border-t border-neutral-200 dark:border-neutral-800 w-full max-w-2xl">
+              <div>
+                <div className="text-3xl md:text-4xl font-bold text-indigo-600 dark:text-indigo-400 mb-1">50+</div>
+                <div className="text-sm text-neutral-600 dark:text-neutral-400">Components</div>
+              </div>
+              <div>
+                <div className="text-3xl md:text-4xl font-bold text-purple-600 dark:text-purple-400 mb-1">100%</div>
+                <div className="text-sm text-neutral-600 dark:text-neutral-400">Accessible</div>
+              </div>
+              <div>
+                <div className="text-3xl md:text-4xl font-bold text-pink-600 dark:text-pink-400 mb-1">RTL</div>
+                <div className="text-sm text-neutral-600 dark:text-neutral-400">Support</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-24 px-4">
+        <div className="container mx-auto max-w-6xl">
+          <div className="text-center mb-16">
+            <h2 className="text-4xl md:text-5xl font-bold mb-4">Why Choose SDGA UI?</h2>
+            <p className="text-lg text-neutral-600 dark:text-neutral-400 max-w-2xl mx-auto">
+              Built with modern technologies and best practices to help you create stunning interfaces faster
+            </p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <FeatureCard
+              icon={<Zap className="w-8 h-8" />}
+              title="Lightning Fast"
+              description="Optimized for performance with minimal bundle size and zero runtime overhead"
+              gradient="from-yellow-500 to-orange-500"
+            />
+            
+            <FeatureCard
+              icon={<Palette className="w-8 h-8" />}
+              title="Fully Customizable"
+              description="Extensive theming system with CSS variables and SCSS support for complete control"
+              gradient="from-pink-500 to-rose-500"
+            />
+            
+            <FeatureCard
+              icon={<Code2 className="w-8 h-8" />}
+              title="Developer Friendly"
+              description="Clean API, TypeScript support, and comprehensive documentation for seamless integration"
+              gradient="from-blue-500 to-cyan-500"
+            />
+            
+            <FeatureCard
+              icon={<Globe className="w-8 h-8" />}
+              title="RTL Support"
+              description="Built-in right-to-left language support for Arabic and other RTL languages"
+              gradient="from-green-500 to-emerald-500"
+            />
+            
+            <FeatureCard
+              icon={<Sparkles className="w-8 h-8" />}
+              title="Modern Design"
+              description="Contemporary UI patterns and components that follow the latest design trends"
+              gradient="from-purple-500 to-indigo-500"
+            />
+            
+            <FeatureCard
+              icon={<BookOpen className="w-8 h-8" />}
+              title="Rich Documentation"
+              description="Detailed guides, examples, and interactive demos for every component"
+              gradient="from-orange-500 to-red-500"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* Code Preview Section */}
+      <section className="py-24 px-4 bg-neutral-50 dark:bg-neutral-900/50">
+        <div className="container mx-auto max-w-5xl">
+          <div className="text-center mb-12">
+            <h2 className="text-4xl font-bold mb-4">Simple to Use</h2>
+            <p className="text-lg text-neutral-600 dark:text-neutral-400">
+              Get started in minutes with our intuitive component API
+            </p>
+          </div>
+          
+          <div className="bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl border border-neutral-200 dark:border-neutral-800 overflow-hidden">
+            <div className="bg-neutral-100 dark:bg-neutral-800 px-6 py-4 border-b border-neutral-200 dark:border-neutral-700 flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-red-500" />
+              <div className="w-3 h-3 rounded-full bg-yellow-500" />
+              <div className="w-3 h-3 rounded-full bg-green-500" />
+              <span className="ml-4 text-sm text-neutral-600 dark:text-neutral-400 font-mono">example.html</span>
+            </div>
+            <pre className="p-6 overflow-x-auto">
+              <code className="text-sm font-mono text-neutral-800 dark:text-neutral-200">
+{`<!-- Import SDGA UI -->
+<link rel="stylesheet" href="sdga-ui.css">
+
+<!-- Use components -->
+<button class="btn btn-primary">
+  Click me
+</button>
+
+<div class="alert alert-success">
+  Success! Your changes have been saved.
+</div>`}
+              </code>
+            </pre>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-24 px-4">
+        <div className="container mx-auto max-w-4xl text-center">
+          <div className="bg-linear-to-r from-indigo-600 to-purple-600 rounded-3xl p-12 md:p-16 shadow-2xl">
+            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
+              Ready to Build Something Amazing?
+            </h2>
+            <p className="text-xl text-indigo-100 mb-8 max-w-2xl mx-auto">
+              Start creating beautiful, accessible interfaces with SDGA UI today
+            </p>
+            <Link 
+              href="/docs" 
+              className="inline-flex items-center gap-2 px-8 py-4 bg-white text-indigo-600 rounded-lg font-semibold hover:bg-indigo-50 transition-all hover:scale-105 shadow-lg"
+            >
+              Explore Documentation
+              <ArrowRight className="w-5 h-5" />
+            </Link>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function FeatureCard({ 
+  icon, 
+  title, 
+  description, 
+  gradient 
+}: { 
+  icon: React.ReactNode; 
+  title: string; 
+  description: string; 
+  gradient: string;
+}) {
+  return (
+    <div className="group relative p-8 rounded-2xl bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all hover:shadow-xl">
+      <div className={`inline-flex p-3 rounded-xl bg-linear-to-br ${gradient} text-white mb-4 group-hover:scale-110 transition-transform`}>
+        {icon}
+      </div>
+      <h3 className="text-xl font-bold mb-2">{title}</h3>
+      <p className="text-neutral-600 dark:text-neutral-400 leading-relaxed">
+        {description}
+      </p>
+    </div>
+  );
+}

package/sdga-ui/src/app/api/search/route.ts

@@ -0,0 +1,7 @@
+import { source } from '@/lib/source';
+import { createFromSource } from 'fumadocs-core/search/server';
+
+export const { GET } = createFromSource(source, {
+  // https://docs.orama.com/docs/orama-js/supported-languages
+  language: 'english',
+});

package/sdga-ui/src/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,54 @@
+import { getPageImage, source } from '@/lib/source';
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from 'fumadocs-ui/layouts/docs/page';
+import { notFound } from 'next/navigation';
+import { getMDXComponents } from '@/mdx-components';
+import type { Metadata } from 'next';
+import { createRelativeLink } from 'fumadocs-ui/mdx';
+
+export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX
+          components={getMDXComponents({
+            // this allows you to link to other pages with relative file paths
+            a: createRelativeLink(source, page),
+          })}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(
+  props: PageProps<'/docs/[[...slug]]'>,
+): Promise<Metadata> {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+    openGraph: {
+      images: getPageImage(page).url,
+    },
+  };
+}

package/sdga-ui/src/app/docs/layout.tsx

@@ -0,0 +1,11 @@
+import { source } from '@/lib/source';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import { baseOptions } from '@/lib/layout.shared';
+
+export default function Layout({ children }: LayoutProps<'/docs'>) {
+  return (
+    <DocsLayout tree={source.pageTree} {...baseOptions()}>
+      {children}
+    </DocsLayout>
+  );
+}

package/sdga-ui/src/app/global.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';

package/sdga-ui/src/app/layout.tsx

@@ -0,0 +1,25 @@
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import './global.css';
+import { Inter } from 'next/font/google';
+import Script from 'next/script';
+
+const inter = Inter({
+  subsets: ['latin'],
+});
+
+export default function Layout({ children }: LayoutProps<'/'>) {
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider>{children}</RootProvider>
+        {/* Bootstrap JS for interactive components */}
+        <Script
+          src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
+          integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+          crossOrigin="anonymous"
+          strategy="afterInteractive"
+        />
+      </body>
+    </html>
+  );
+}

package/sdga-ui/src/app/llms-full.txt/route.ts

@@ -0,0 +1,10 @@
+import { getLLMText, source } from '@/lib/source';
+
+export const revalidate = false;
+
+export async function GET() {
+  const scan = source.getPages().map(getLLMText);
+  const scanned = await Promise.all(scan);
+
+  return new Response(scanned.join('\n\n'));
+}

package/sdga-ui/src/app/og/docs/[...slug]/route.tsx

@@ -0,0 +1,34 @@
+import { getPageImage, source } from '@/lib/source';
+import { notFound } from 'next/navigation';
+import { ImageResponse } from 'next/og';
+import { generate as DefaultImage } from 'fumadocs-ui/og';
+
+export const revalidate = false;
+
+export async function GET(
+  _req: Request,
+  { params }: RouteContext<'/og/docs/[...slug]'>,
+) {
+  const { slug } = await params;
+  const page = source.getPage(slug.slice(0, -1));
+  if (!page) notFound();
+
+  return new ImageResponse(
+    <DefaultImage
+      title={page.data.title}
+      description={page.data.description}
+      site="My App"
+    />,
+    {
+      width: 1200,
+      height: 630,
+    },
+  );
+}
+
+export function generateStaticParams() {
+  return source.getPages().map((page) => ({
+    lang: page.locale,
+    slug: getPageImage(page).segments,
+  }));
+}

package/sdga-ui/src/app/sdga-scoped.css

@@ -0,0 +1,7 @@
+/* Isolate SDGA UI styles to .sdga-preview container */
+@import 'sdga-ui/css/dga-ui.css';
+
+/* Ensure proper isolation */
+.sdga-preview {
+  isolation: isolate;
+}

package/sdga-ui/src/components/sdga-preview.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+interface SdgaPreviewProps {
+  html: string;
+  minHeight?: string;
+}
+
+// Preload resources once for all previews
+if (typeof window !== 'undefined') {
+  const preloadCSS = document.createElement('link');
+  preloadCSS.rel = 'preload';
+  preloadCSS.as = 'style';
+  preloadCSS.href = 'https://cdn.jsdelivr.net/npm/sdga-ui@latest/css/dga-ui.css';
+  
+  const preloadJS = document.createElement('link');
+  preloadJS.rel = 'preload';
+  preloadJS.as = 'script';
+  preloadJS.href = 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js';
+  
+  if (!document.querySelector(`link[href="${preloadCSS.href}"]`)) {
+    document.head.appendChild(preloadCSS);
+    document.head.appendChild(preloadJS);
+  }
+}
+
+export function SdgaPreview({ html, minHeight = '150px' }: SdgaPreviewProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Lazy load iframe when it enters viewport
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            observer.disconnect();
+          }
+        });
+      },
+      { rootMargin: '200px' } // Load 200px before entering viewport
+    );
+
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible) return;
+    
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    const content = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sdga-ui@latest/css/dga-ui.css">
+<style>body{margin:0;padding:1.5rem;background:transparent;overflow-x:hidden}</style>
+</head>
+<body>${html}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"><\/script><script>let t;function r(){clearTimeout(t);t=setTimeout(()=>window.parent.postMessage({type:'resize',height:document.body.scrollHeight},'*'),150)}window.addEventListener('load',()=>setTimeout(r,100));if(!window.__RO_DISABLED__){const o=new MutationObserver(()=>requestAnimationFrame(r));o.observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:['class','style']})}<\/script></body></html>`;
+
+    iframe.srcdoc = content;
+  }, [html, isVisible]);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data.type === 'resize' && iframeRef.current) {
+        iframeRef.current.style.height = `${event.data.height + 10}px`;
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return (
+    <div ref={containerRef} style={{ minHeight }}>
+      {isVisible ? (
+        <iframe
+          ref={iframeRef}
+          className="w-full border border-neutral-200 dark:border-neutral-800 rounded-lg"
+          style={{ minHeight, border: '1px solid rgb(229 229 229)', borderRadius: '0.5rem' }}
+          sandbox="allow-scripts allow-same-origin"
+          loading="lazy"
+          title="SDGA UI Preview"
+        />
+      ) : (
+        <div 
+          className="w-full border border-neutral-200 dark:border-neutral-800 rounded-lg flex items-center justify-center"
+          style={{ minHeight, background: '#f9fafb' }}
+        >
+          <span className="text-neutral-400">Loading preview...</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/sdga-ui/src/lib/layout.shared.tsx

@@ -0,0 +1,9 @@
+import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+
+export function baseOptions(): BaseLayoutProps {
+  return {
+    nav: {
+      title: 'My App',
+    },
+  };
+}

package/sdga-ui/src/lib/source.ts

@@ -0,0 +1,27 @@
+import { docs } from 'fumadocs-mdx:collections/server';
+import { type InferPageType, loader } from 'fumadocs-core/source';
+import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';
+
+// See https://fumadocs.dev/docs/headless/source-api for more info
+export const source = loader({
+  baseUrl: '/docs',
+  source: docs.toFumadocsSource(),
+  plugins: [lucideIconsPlugin()],
+});
+
+export function getPageImage(page: InferPageType<typeof source>) {
+  const segments = [...page.slugs, 'image.png'];
+
+  return {
+    segments,
+    url: `/og/docs/${segments.join('/')}`,
+  };
+}
+
+export async function getLLMText(page: InferPageType<typeof source>) {
+  const processed = await page.data.getText('processed');
+
+  return `# ${page.data.title}
+
+${processed}`;
+}

package/sdga-ui/src/mdx-components.tsx

@@ -0,0 +1,9 @@
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import type { MDXComponents } from 'mdx/types';
+
+export function getMDXComponents(components?: MDXComponents): MDXComponents {
+  return {
+    ...defaultMdxComponents,
+    ...components,
+  };
+}

package/sdga-ui/tsconfig.json

@@ -0,0 +1,46 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "fumadocs-mdx:collections/*": [
+        ".source/*"
+      ]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/theme/_variables.scss

@@ -31,17 +31,18 @@
 @import 'components/buttons';
 @import 'components/alerts';
 @import 'components/toasts';
+@import 'components/forms';
+@import 'components/dropdowns';
+@import 'components/cards';
+@import 'components/tables';
+
+@import 'components/navbar';
 @import 'components/modals';
 @import 'components/tooltips';
 @import 'components/popovers';
 @import 'components/offcanvas';
-@import 'components/forms';
-@import 'components/navbar';
-@import 'components/dropdowns';
 @import 'components/pagination';
 @import 'components/breadcrumb';
-@import 'components/cards';
-@import 'components/tables';
 @import 'components/list-group';
 @import 'components/accordion';
 @import 'components/badges';