free-astro-components 0.0.9 → 0.0.11

package/README.md

@@ -1 +1,47 @@
-# Free Astro Components
+# Free Astro Components
+
+Welcome to the **Free Astro Components** repository! This project offers a collection of free, open-source components designed to enhance your Astro.js projects.
+
+## Overview
+
+Explore and utilize a variety of components that can help you build your web projects faster and more efficiently. Whether you’re a beginner or a seasoned developer, these components are crafted to fit a range of needs and use cases.
+
+## Components
+
+### Available Components
+
+- **Icons**
+  - A set of customizable icons for various uses.
+- **Buttons**
+  - Stylish and functional buttons for your web applications.
+- **Controls**
+  - **Checkbox**: A customizable checkbox component.
+  - **Radio**: A flexible radio button component.
+  - **Switch**: A toggle switch component for user interactions.
+
+## Getting Started
+
+1. **Visit the Website:**
+   - [Explore the Collection](https://free-astro-components.vercel.app/)
+
+2. **Installation:**
+   - To use these components in your Astro.js project, follow the instructions on the website.
+
+3. **Usage:**
+   - Detailed documentation and code examples are available on the website to help you integrate and customize each component.
+
+## Documentation
+
+I’m currently working on comprehensive documentation for the components. Please check back soon for detailed guides and information.
+
+## Credits
+
+- **Icons Design:** The icons used in this collection are designed by [Ananthanath A](https://nathdesign.in/). Thank you for providing these fantastic resources! You can explore more at [Figma Community File](https://www.figma.com/community/file/1071678557813409125).
+
+## License
+
+This project is licensed under the MIT License.
+
+## Contact
+
+For any questions or support, please reach out to [dventura017@gmail.com] or open an issue on the [GitHub repository](https://github.com/denv17/free-astro-components.git).

package/package.json

@@ -3,7 +3,7 @@
   "description": "A collection of free Astro components",
   "author": "Denis Ventura",
   "type": "module",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "exports": {
     ".": {
       "import": {

package/src/components/Switch.astro

@@ -77,6 +77,8 @@ const switchClasses = ['ac-switch', className].filter(Boolean).join(' ')
   .ac-switch-dot {
     background-color: rgb(var(--ac-white));
     border-radius: var(--ac-rounded-full);
+    box-shadow: 0 0 var(--ac-spacing-0-5) var(--ac-border)
+      rgba(var(--ac-primary), 0.4);
     height: var(--ac-spacing-5);
     left: var(--ac-spacing-0-5);
     pointer-events: none;
@@ -85,8 +87,6 @@ const switchClasses = ['ac-switch', className].filter(Boolean).join(' ')
     transform: translateY(-50%);
     transition: all 0.3s ease-in-out;
     width: var(--ac-spacing-5);
-    box-shadow: 0 0 var(--ac-spacing-0-5) var(--ac-border)
-      rgba(var(--ac-primary), 0.25);
   }
 
   .ac-switch-label {

package/src/data/icons.ts

@@ -238,5 +238,35 @@ export const icons = [
     category: 'edit',
     name: 'delete',
     path: '<path d="M10 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 11V17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 7H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6 7H12H18V18C18 19.6569 16.6569 21 15 21H9C7.34315 21 6 19.6569 6 18V7Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V7H9V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+  },
+  {
+    category: 'shapes',
+    name: 'ellipse',
+    path: '<circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+  },
+  {
+    category: 'shapes',
+    name: 'triangle',
+    path: '<path d="M3.83827 18.5097L11.1284 5.54947C11.5107 4.86982 12.4893 4.86982 12.8716 5.54947L20.1617 18.5097C20.5367 19.1763 20.055 20 19.2902 20H4.70985C3.94502 20 3.46331 19.1763 3.83827 18.5097Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+  },
+  {
+    category: 'shapes',
+    name: 'square',
+    path: '<rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+  },
+  {
+    category: 'shapes',
+    name: 'pentagon',
+    path: '<path d="M11.4122 4.42705C11.7627 4.17241 12.2373 4.17241 12.5878 4.42705L19.9717 9.7918C20.3222 10.0464 20.4689 10.4978 20.335 10.9098L17.5146 19.5902C17.3807 20.0022 16.9968 20.2812 16.5635 20.2812H7.43647C7.00325 20.2812 6.61929 20.0022 6.48542 19.5902L3.66501 10.9098C3.53113 10.4978 3.67779 10.0464 4.02828 9.7918L11.4122 4.42705Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+  },
+  {
+    category: 'shapes',
+    name: 'hexagon',
+    path: '<path d="M11.5 4.28868C11.8094 4.11004 12.1906 4.11004 12.5 4.28868L18.4282 7.71132C18.7376 7.88996 18.9282 8.22008 18.9282 8.57735V15.4226C18.9282 15.7799 18.7376 16.11 18.4282 16.2887L12.5 19.7113C12.1906 19.89 11.8094 19.89 11.5 19.7113L5.5718 16.2887C5.2624 16.11 5.0718 15.7799 5.0718 15.4226V8.57735C5.0718 8.22008 5.2624 7.88996 5.5718 7.71132L11.5 4.28868Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+  },
+  {
+    category: 'shapes',
+    name: 'star',
+    path: '<path d="M11.0489 4.92705C11.3483 4.00574 12.6517 4.00574 12.9511 4.92705L14.2451 8.90983C14.379 9.32185 14.763 9.60081 15.1962 9.60081H19.3839C20.3527 9.60081 20.7554 10.8404 19.9717 11.4098L16.5838 13.8713C16.2333 14.126 16.0866 14.5773 16.2205 14.9894L17.5146 18.9721C17.8139 19.8934 16.7595 20.6596 15.9757 20.0902L12.5878 17.6287C12.2373 17.374 11.7627 17.374 11.4122 17.6287L8.02426 20.0902C7.24054 20.6596 6.18607 19.8934 6.48542 18.9721L7.7795 14.9894C7.91338 14.5773 7.76672 14.126 7.41623 13.8713L4.02827 11.4098C3.24456 10.8404 3.64734 9.60081 4.61606 9.60081H8.8038C9.23703 9.60081 9.62099 9.32185 9.75486 8.90983L11.0489 4.92705Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
   }
-]
+]

package/src/pages/combos.astro

@@ -0,0 +1,72 @@
+---
+import Layout from '../layouts/Layout.astro'
+import Checkbox from '../components/Checkbox.astro'
+import Radio from '../components/Radio.astro'
+import Switch from '../components/Switch.astro'
+---
+
+<Layout title="Welcome to Astro.">
+  <main class="content">
+    <h1>Controls</h1>
+
+    <div>
+      <h2>Checkbox</h2>
+      <div>
+        <Checkbox label="Checkbox" />
+        <br />
+        <br />
+        <Checkbox label="Checkbox checked" checked />
+        <br />
+        <br />
+        <Checkbox label="Checkbox disabled" disabled />
+        <br />
+        <br />
+        <Checkbox label="Checkbox checked disabled" checked disabled />
+        <br />
+        <br />
+        <Checkbox label="Checkbox error" error />
+      </div>
+    </div>
+    <div>
+      <h2>Radiobutton</h2>
+      <div>
+        <Radio label="Radiobutton" />
+        <br />
+        <br />
+        <Radio label="Radiobutton checked" checked />
+        <br />
+        <br />
+        <Radio label="Radiobutton disabled" disabled />
+        <br />
+        <br />
+        <Radio label="Radiobutton checked disabled" checked disabled />
+        <br />
+        <br />
+        <Radio label="Radiobutton error" error />
+      </div>
+    </div>
+    <div>
+      <h2>Switch</h2>
+      <div>
+        <Switch label="Switch Off" />
+        <br />
+        <br />
+        <Switch label="Switch On" checked />
+        <br />
+        <br />
+        <Switch label="Switch Off disabled" disabled />
+        <br />
+        <br />
+        <Switch label="Switch On disabled" checked disabled />
+      </div>
+    </div>
+  </main>
+</Layout>
+
+<style>
+  /*@import '../css/preflight.css';*/
+
+  .content {
+    padding: var(--ac-spacing-8);
+  }
+</style>

package/tailwind.config.mjs

@@ -1,60 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-  theme: {
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#FFFFFF',
-      primary: {
-        100: '#73C5FF',
-        200: '#3EACFA',
-        300: '#0E91EF',
-        400: '#0B83D9',
-      },
-      secondary: {
-        100: '#5865BA',
-        200: '#263699',
-        300: '#000F73',
-        400: '#000C58',
-      },
-      tertiary: {
-        100: '#FFA96A',
-        200: '#FF9040',
-        300: '#FF661A',
-        400: '#F26C0C',
-      },
-      neutral: {
-        100: '#F7F8FA',
-        200: '#E1E2E6',
-        300: '#98A1B3',
-        400: '#666E80',
-        500: '#17181A',
-      },
-      success: {
-        100: '#9CF0BD',
-        200: '#07D95A',
-      },
-      error: {
-        100: '#FCA3B2',
-        200: '#F8183E',
-      },
-      warning: {
-        100: '#FFD06E',
-        200: '#FFB800',
-      },
-    },
-    fontSize: {
-      xxs: '0.75rem',
-      xs: '0.813rem',
-      sm: '0.875rem',
-      base: '1rem',
-      lg: '1.125rem',
-      xl: '1.25rem',
-      '2xl': '1.5rem',
-      '3xl': '2rem',
-    },
-    extend: {},
-  },
-  plugins: [],
-}