@geckoui/geckoui 0.0.1-beta0

package/README.md

@@ -0,0 +1,145 @@
+<p align="center">
+  <img src="https://github.com/geckoui/geckoui/raw/develop/GeckoUI.png" alt="Gecko UI" width="120" />
+</p>
+
+<h1 align="center">Gecko UI</h1>
+
+<p align="center">
+  The only thing our Gecko 🦎 eats is bugs! 🐛<br />
+</p>
+
+📚 **Documentation**: [Gecko](https://gecko.productionbug.com)
+
+## Installation
+
+```bash
+npm install @geckoui/geckoui
+# or
+pnpm add @geckoui/geckoui
+# or
+yarn add @geckoui/geckoui
+```
+
+## Quick Start
+
+### 1. Import Styles
+
+Import the component styles in your app:
+
+```tsx
+import "@geckoui/geckoui/styles.css";
+```
+
+> If you use `tailwindcss`, make sure to import the css inside `layer` directive to correctly override the styles:
+
+```css title="src/global.css"
+@import "tailwindcss";
+
+@layer components {
+  @import "@geckoui/geckoui/styles.css";
+}
+```
+
+### 2. Use Components
+
+```tsx
+import { Alert, Button, Input } from "@geckoui/geckoui";
+
+function App() {
+  return (
+    <div>
+      <Button variant="contained" color="primary">
+        Click me
+      </Button>
+
+      <Input placeholder="Enter your name" />
+
+      <Alert variant="success" title="Operation completed successfully!" />
+    </div>
+  );
+}
+```
+
+## Theming
+
+GeckoUI uses a powerful CSS variable-based theming system that automatically adapts all components when you change the theme class.
+
+### Applying Themes
+
+Simply add a theme class to your root element:
+
+```tsx
+// Light theme (default)
+<div className="light">
+  <App />
+</div>
+
+// Dark theme
+<div className="dark">
+  <App />
+</div>
+
+// Custom theme
+<div className="neon">
+  <App />
+</div>
+```
+
+### Built-in Themes
+
+- **Light** (default) - Clean, bright interface
+- **Dark** - Easy on the eyes
+
+### Creating Custom Themes
+
+Create a CSS file with your theme:
+
+```css
+/* my-theme.css */
+.my-theme {
+  /* Override any other CSS variables as needed */
+}
+```
+
+Import it and use it:
+
+```tsx
+import "./my-theme.css";
+
+<div className="my-theme">
+  <App />
+</div>;
+```
+
+## Advanced Usage
+
+### Custom Styling with BEM
+
+All components use BEM (Block Element Modifier) naming for easy customization:
+
+```css
+/* Target specific component parts */
+.GeckoUIButton--contained-primary {
+  /* Your custom styles */
+}
+
+.GeckoUIInput__input {
+  /* Style the inner input element */
+}
+```
+
+## TypeScript
+
+All components are fully typed. Import types as needed:
+
+```tsx
+import type { ButtonProps, InputProps } from "@geckoui/geckoui";
+```
+
+## License
+
+This project is licensed under the MIT License.
+
+## Support
+
+For issues and feature requests, please visit our [@geckoui/geckoui](https://github.com/geckoui/geckoui).

package/dist/components/Markdown/Markdown.css

@@ -0,0 +1,138 @@
+/* src/components/Markdown/Markdown.scss */
+.GeckoUIMarkdown h1 {
+  font-size: 36px;
+  font-weight: 700;
+  line-height: 1.2;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+.GeckoUIMarkdown h2 {
+  font-size: 30px;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+.GeckoUIMarkdown h3 {
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+.GeckoUIMarkdown h4 {
+  font-size: 20px;
+  font-weight: 600;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+.GeckoUIMarkdown h5 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+.GeckoUIMarkdown h6 {
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+.GeckoUIMarkdown p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.GeckoUIMarkdown a {
+  --tw-text-opacity: 1;
+  color: rgb(var(--gecko-ui-primary-600) / var(--tw-text-opacity, 1));
+  text-decoration: underline;
+}
+.GeckoUIMarkdown ul {
+  list-style-position: inside;
+  padding-left: 8px;
+}
+.GeckoUIMarkdown ol {
+  list-style-position: inside;
+  padding-left: 8px;
+}
+.GeckoUIMarkdown ul {
+  list-style-type: disc;
+}
+.GeckoUIMarkdown ol {
+  list-style-type: decimal;
+}
+.GeckoUIMarkdown li {
+  line-height: 1.5;
+  padding-left: 2px;
+  margin-left: 8px;
+  list-style-position: outside;
+}
+.GeckoUIMarkdown blockquote {
+  border-left-width: 4px;
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--gecko-ui-border-primary) / var(--tw-border-opacity, 1));
+  padding-left: 1rem;
+  --tw-text-opacity: 1;
+  color: rgb(var(--gecko-ui-text-muted) / var(--tw-text-opacity, 1));
+  margin-top: 16px;
+  margin-bottom: 16px;
+  font-style: italic;
+}
+.GeckoUIMarkdown table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.GeckoUIMarkdown th {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--gecko-ui-border-primary) / var(--tw-border-opacity, 1));
+  padding: 12px;
+  text-align: left;
+}
+.GeckoUIMarkdown td {
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--gecko-ui-border-primary) / var(--tw-border-opacity, 1));
+  padding: 12px;
+  text-align: left;
+}
+.GeckoUIMarkdown img {
+  max-width: 100%;
+  height: auto;
+}
+.GeckoUIMarkdown hr {
+  border: 0;
+  border-top-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--gecko-ui-border-primary) / var(--tw-border-opacity, 1));
+  margin: 16px 0;
+}
+.GeckoUIMarkdown pre {
+  font-family: monospace;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--gecko-ui-surface-tertiary) / var(--tw-bg-opacity, 1));
+  padding: 16px;
+  border-radius: 8px;
+  overflow-x: auto;
+}
+.GeckoUIMarkdown code {
+  display: inline-block;
+  font-family: monospace;
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--gecko-ui-surface-tertiary) / var(--tw-bg-opacity, 1));
+  padding: 3.2px 6.4px;
+  border-radius: 4px;
+}
+.GeckoUIMarkdown pre code {
+  background: transparent;
+}
+.GeckoUIMarkdown p:first-child {
+  margin-top: 0;
+}
+.GeckoUIMarkdown li > p:first-of-type {
+  display: inline;
+}