acidui-core 1.0.0

package/src/components/AcidVideoText.tsx

@@ -0,0 +1,25 @@
+
+import clsx from 'clsx';
+import './AcidVideoText.css';
+
+export interface AcidVideoTextProps {
+    text: string;
+    videoSrc: string;
+    className?: string;
+}
+
+export const AcidVideoText = ({ text, videoSrc, className }: AcidVideoTextProps) => {
+    return (
+        <div className={clsx('ac-video-text-container', className)}>
+            <video
+                src={videoSrc}
+                autoPlay
+                muted
+                loop
+                playsInline
+                className="ac-video-text-bg"
+            />
+            <h1 className="ac-video-text-mask">{text}</h1>
+        </div>
+    );
+};

package/src/data/sidebar.ts

@@ -0,0 +1,135 @@
+import type { SidebarCategory } from '../components/AcidSidebar';
+
+export const sidebarData: SidebarCategory[] = [
+    {
+        title: 'GETTING_STARTED',
+        items: [
+            { name: 'Introduction' },
+            { name: 'Installation' },
+        ]
+    },
+    {
+        title: 'UI_ELEMENTS',
+        items: [
+            { name: 'Alert' },
+            { name: 'Avatar', isNew: true },
+            { name: 'Badge' },
+            { name: 'Button' },
+            { name: 'Card' },
+            { name: 'Carousel', isNew: true },
+            { name: 'Dialog' },
+            { name: 'Dropdown', isNew: true },
+            { name: 'Progress', isNew: true },
+            { name: 'Skeleton', isNew: true },
+            { name: 'Toast', isNew: true },
+            { name: 'Tooltip' },
+            { name: 'Accordion', isNew: true },
+            { name: 'Tabs', isNew: true },
+            { name: 'Chart', isNew: true },
+            { name: 'Collapsible', isNew: true },
+            { name: 'Context Menu', isNew: true },
+            { name: 'Sheet', isNew: true },
+            { name: 'Drawer', isNew: true },
+            { name: 'Bento Grid', isNew: true },
+            { name: 'Dock', isNew: true },
+            { name: 'Animated Notification', isNew: true },
+            { name: 'Magic Card', isNew: true },
+            { name: 'Electro Border', isNew: true },
+            { name: 'Drag Order List', isNew: true },
+            { name: 'Magic Loader', isNew: true },
+            { name: 'Ripple Loader', isNew: true },
+            { name: 'Trusted Users', isNew: true },
+        ]
+    },
+    {
+        title: 'FORM_CONTROLS',
+        items: [
+            { name: 'Calendar', isNew: true },
+            { name: 'Checkbox', isNew: true },
+            { name: 'Command', isNew: true },
+            { name: 'Form', isNew: true },
+            { name: 'Input' },
+            { name: 'Input Otp', isNew: true },
+            { name: 'Label' },
+            { name: 'Radio Group', isNew: true },
+            { name: 'Select', isNew: true },
+            { name: 'Slider', isNew: true },
+            { name: 'Switch' },
+            { name: 'Textarea', isNew: true },
+            { name: 'Toggle', isNew: true },
+            { name: 'Toggle Group', isNew: true },
+        ]
+    },
+    {
+        title: 'LAYOUT',
+        items: [
+            { name: 'Layout', isNew: true },
+            { name: 'Aspect Ratio', isNew: true },
+            { name: 'Resizable', isNew: true },
+            { name: 'Scroll Area', isNew: true },
+            { name: 'Separator', isNew: true },
+            { name: 'Sidebar', isNew: true },
+            { name: 'Scroll Stack', isNew: true },
+        ]
+    },
+    {
+        title: 'NAVIGATION',
+        items: [
+            { name: 'Breadcrumb', isNew: true },
+            { name: 'Navigation Menu', isNew: true },
+            { name: 'Navbar', isNew: true },
+            { name: 'Dynamic Navbar', isNew: true },
+            { name: 'Pagination', isNew: true },
+        ]
+    },
+    {
+        title: 'DATA_DISPLAY',
+        items: [
+            { name: 'Table', isNew: true },
+            { name: 'Marquee', isNew: true },
+            { name: 'Timeline' },
+            { name: 'Meter' },
+            { name: 'Step List' },
+            { name: 'Count Up', isNew: true },
+            { name: 'Terminal Card', isNew: true },
+            { name: 'Stack List', isNew: true },
+            { name: 'Scroll List', isNew: true },
+        ]
+    },
+    {
+        title: 'UTILITIES',
+        items: [
+            { name: 'Glass Folder', isNew: true },
+            { name: 'Icon Box', isNew: true },
+            { name: 'Link', isNew: true },
+            { name: 'Grid Box' },
+            { name: 'Solid Card' },
+            { name: 'Divider' },
+            { name: 'Top Loader', isNew: true },
+            { name: 'Top Sticky Bar', isNew: true },
+        ]
+    },
+    {
+        title: 'TEXT_EFFECTS',
+        items: [
+            { name: 'Aurora Text', isNew: true },
+            { name: 'Scroll Reveal', isNew: true },
+            { name: 'Shiny Text', isNew: true },
+            { name: 'Text Marquee', isNew: true },
+            { name: 'Typewriter Input', isNew: true },
+            { name: 'Typing Text', isNew: true },
+            { name: 'Video Text', isNew: true },
+        ]
+    },
+    {
+        title: 'PREMIUM_MODULES',
+        items: [
+            { name: 'Border Beam', isNew: true },
+            { name: 'Confetti Button', isNew: true },
+            { name: 'Gradient Button', isNew: true },
+            { name: 'Ripple Button', isNew: true },
+            { name: 'Shine Button', isNew: true },
+            { name: 'Trial Button', isNew: true },
+        ]
+    }
+];

package/src/data/snippets.ts

@@ -0,0 +1,13 @@
+export const componentSnippets: Record<string, string> = {
+    'button': `import React from 'react';\nimport { motion, type HTMLMotionProps } from 'framer-motion';\nimport clsx from 'clsx';\nimport './AcidButton.css';\n\nexport interface AcidButtonProps extends HTMLMotionProps<"button"> {\n  variant?: 'primary' | 'secondary' | 'ghost' | 'outline';\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const AcidButton = React.forwardRef<HTMLButtonElement, AcidButtonProps>(\n  ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => {\n    return (\n      <motion.button\n        ref={ref}\n        whileHover={{ y: -2, boxShadow: '0 4px 12px rgba(244, 67, 54, 0.2)' }}\n        whileTap={{ scale: 0.98 }}\n        className={clsx(\n          'ac-button',\n          \`ac-btn-\${variant}\`,\n          \`ac-btn-size-\${size}\`,\n          className\n        )}\n        {...props}\n      >\n        <span className="ac-btn-text">{children as React.ReactNode}</span>\n      </motion.button>\n    );\n  }\n);`,
+    'card': `import React from 'react';\nimport { motion, type HTMLMotionProps } from 'framer-motion';\nimport clsx from 'clsx';\nimport './AcidCard.css';\n\nexport interface AcidCardProps extends HTMLMotionProps<"div"> {\n    variant?: 'flat' | 'outline' | 'dashed';\n}\n\nexport const AcidCard = React.forwardRef<HTMLDivElement, AcidCardProps>(\n    ({ className, variant = 'outline', children, ...props }, ref) => {\n        return (\n            <motion.div\n                ref={ref}\n                initial={{ opacity: 0, y: 10 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                viewport={{ once: true }}\n                transition={{ duration: 0.3, ease: 'easeOut' }}\n                whileHover={{ y: -4, borderColor: 'var(--ac-brand)' }}\n                className={clsx('ac-card', \`ac-card-\${variant}\`, className)}\n                {...props}\n            >\n                {children}\n            </motion.div>\n        );\n    }\n);`,
+    'glass-folder': `import React from "react";\nimport { cn } from "../lib/utils"; \nimport "./AcidGlassFolder.css";\n\ntype GlassFolderProps = {\n  icon?: React.ReactNode;\n  title?: string;\n  className?: string;\n};\n\nexport const AcidGlassFolder: React.FC<GlassFolderProps> = ({ icon, title, className }) => {\n  return (\n    <section className={cn("ac-glass-folder-group", className)}>\n      <div className="ac-folder-container">\n        <div className="ac-folder-tab"></div>\n        <div className="ac-folder-front">\n          <div className="ac-folder-icon">{icon}</div>\n          <div className="ac-folder-title">{title}</div>\n        </div>\n        <div className="ac-folder-back"></div>\n      </div>\n    </section>\n  );\n};`,
+    'table': `import clsx from 'clsx';\nimport './AcidTable.css';\n\ninterface Column {\n  header: string;\n  accessor: string;\n}\n\ninterface AcidTableProps {\n  columns: Column[];\n  data: any[];\n  className?: string;\n}\n\nexport const AcidTable = ({ columns, data, className }: AcidTableProps) => {\n  return (\n    <div className={clsx('ac-table-wrapper', className)}>\n      <table className="ac-table">\n        <thead className="ac-table-thead">\n          <tr>\n            {columns.map((col, i) => (\n              <th key={i} className="ac-table-th">{col.header}</th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((row, i) => (\n            <tr key={i} className="ac-table-tr">\n              {columns.map((col, j) => (\n                <td key={j} className="ac-table-td">\n                   {row[col.accessor]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};`,
+    'input': `import React from 'react';\nimport clsx from 'clsx';\nimport './AcidInput.css';\n\ninterface AcidInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  variant?: 'outline' | 'filled' | 'terminal';\n}\n\nexport const AcidInput = ({ variant = 'outline', className, ...props }: AcidInputProps) => {\n  return (\n    <div className={clsx('ac-input-wrapper', \`ac-input-\${variant}\`, className)}>\n      {variant === 'terminal' && <span className="ac-input-prompt">></span>}\n      <input className="ac-input-field" {...props} />\n    </div>\n  );\n};`,
+    'grid-box': `import React from 'react';\nimport clsx from 'clsx';\nimport './AcidGridBox.css';\n\nexport const AcidGridBox = ({ children, className, style }: any) => {\n  return (\n    <div className={clsx('ac-grid-box', className)} style={style}>\n      <div className="ac-grid-corner tl" />\n      <div className="ac-grid-corner tr" />\n      <div className="ac-grid-corner bl" />\n      <div className="ac-grid-corner br" />\n      {children}\n    </div>\n  );\n};`,
+    'label': `import React from 'react';\nimport clsx from 'clsx';\nimport './AcidLabel.css';\n\nexport const AcidLabel = ({ children, color = 'default', className }: any) => {\n  return (\n    <span className={clsx('ac-label', \`ac-label-\${color}\`, className)}>\n      {children}\n    </span>\n  );\n};`,
+    'solid-card': `import React from 'react';\nimport clsx from 'clsx';\nimport './AcidSolidCard.css';\n\nexport const AcidSolidCard = ({ label, title, children, className }: any) => {\n  return (\n    <div className={clsx('ac-solid-card', className)}>\n      <div className="ac-solid-header">\n        <span className="ac-solid-label">{label}</span>\n      </div>\n      <div className="ac-solid-body">\n        <h3 className="ac-solid-title">{title}</h3>\n        {children}\n      </div>\n    </div>\n  );\n};`,
+    'timeline': `import React from 'react';\nimport clsx from 'clsx';\nimport './AcidTimeline.css';\n\nexport const AcidTimeline = ({ data, className }: any) => {\n  return (\n    <div className={clsx('ac-timeline', className)}>\n      {data.map((item, i) => (\n        <div className="ac-timeline-item" key={i}>\n          <div className="ac-timeline-point" />\n          <div className="ac-timeline-content">\n            <h4 className="ac-timeline-title">{item.title}</h4>\n            <p className="ac-timeline-desc">{item.content}</p>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};`,
+    'dialog': `import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport clsx from 'clsx';\nimport './AcidDialog.css';\n\nexport const AcidDialog = ({ trigger, title, description, children, footer, ...props }: any) => {\n  const [isOpen, setIsOpen] = useState(false);\n  return (\n    <>\n      <div onClick={() => setIsOpen(true)}>{trigger}</div>\n      <AnimatePresence>\n        {isOpen && (\n          <div className="ac-dialog-overlay-wrapper" onClick={() => setIsOpen(false)}>\n            <motion.div \n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              className="ac-dialog"\n              onClick={(e) => e.stopPropagation()}\n            >\n              <div className="ac-dialog-header">\n                 <h3>{title}</h3>\n                 <X onClick={() => setIsOpen(false)} />\n              </div>\n              <div className="ac-dialog-body">{children}</div>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </>\n  );\n};`,
+    'meter': `import React from 'react';\nimport clsx from 'clsx';\nimport { motion } from 'framer-motion';\nimport './AcidMeter.css';\n\nexport const AcidMeter = ({ value, label, orientation = 'vertical' }: any) => {\n  return (\n    <div className={clsx('ac-meter', \`ac-meter-\${orientation}\`)}>\n       {label && <span className="ac-meter-label">{label}</span>}\n       <div className="ac-meter-track">\n          <motion.div \n             initial={orientation === 'vertical' ? { height: 0 } : { width: 0 }}\n             animate={orientation === 'vertical' ? { height: \`\${value}%\` } : { width: \`\${value}%\` }}\n             className="ac-meter-fill"\n          />\n       </div>\n    </div>\n  );\n};`
+};

package/src/index.css

@@ -0,0 +1,136 @@
+:root {
+  /* Minimalist Technical Palette - DARK (Default) */
+  --ac-bg: #000000;
+  --ac-surface: #0a0a0a;
+  --ac-surface-hover: #121212;
+
+  --ac-text-primary: #ededed;
+  --ac-text-secondary: #a0a0a0;
+  --ac-text-muted: #666666;
+
+  --ac-border-muted: #1f1f1f;
+  --ac-border-bright: #333333;
+  --ac-border-active: #ffffff;
+
+  /* Aliases for compatibility */
+  --ac-border: var(--ac-border-muted);
+  --ac-text: var(--ac-text-primary);
+
+  /* Brand Accent */
+  --ac-brand: #f44336;
+  --ac-brand-rgb: 244, 67, 54;
+
+  /* Technical Indicators */
+  --ac-success: #27c93f;
+  --ac-lime: #27c93f;
+  --ac-warning: #ffbd2e;
+  --ac-error: #ff5f57;
+  --ac-info: #00f0ff;
+  --ac-cyan: #00f0ff;
+
+  /* Typography */
+  --font-primary: 'Space Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --font-mono: 'Space Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+
+  /* Radii */
+  --ac-radius-sm: 4px;
+  --ac-radius-md: 8px;
+  --ac-radius-lg: 12px;
+  --ac-radius-full: 99px;
+
+  /* Background Effects */
+  --ac-grid-opacity: 0.05;
+}
+
+[data-theme='light'] {
+  --ac-bg: #ffffff;
+  --ac-surface: #f7f7f7;
+  --ac-surface-hover: #eeeeee;
+
+  --ac-text-primary: #121212;
+  --ac-text-secondary: #555555;
+  --ac-text-muted: #999999;
+
+  --ac-border-muted: #e5e5e5;
+  --ac-border-bright: #cccccc;
+  --ac-border-active: #000000;
+
+  /* Aliases for compatibility */
+  --ac-border: var(--ac-border-muted);
+  --ac-text: var(--ac-text-primary);
+
+  /* Technical Indicators */
+  --ac-success: #1a8a2a;
+  --ac-lime: #1a8a2a;
+  --ac-warning: #b38600;
+  --ac-error: #cc3300;
+  --ac-info: #007780;
+  --ac-cyan: #007780;
+
+  --ac-grid-opacity: 0.1;
+  --ac-brand-rgb: 244, 67, 54;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-primary);
+  background-color: var(--ac-bg);
+  color: var(--ac-text-primary);
+  min-height: 100vh;
+  overflow-x: hidden;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-family: var(--font-primary);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+}
+
+p {
+  margin: 0;
+}
+
+/* Base Utility Classes for Layout */
+.ac-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.ac-grid {
+  display: grid;
+  gap: 1px;
+  /* 1px gap for grid lines */
+  background: var(--ac-border-muted);
+  border: 1px solid var(--ac-border-muted);
+}
+
+.ac-grid>* {
+  background: var(--ac-bg);
+}
+
+.ac-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Selection */
+::selection {
+  background: var(--ac-text-primary);
+  color: var(--ac-bg);
+}

package/src/main.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+);