free-astro-components 0.0.1

package/.prettierrc.mjs

@@ -0,0 +1,8 @@
+const config = {
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+  plugins: ["prettier-plugin-astro"],
+}
+
+export default config

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

package/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

package/README.md

@@ -0,0 +1 @@
+# Free Astro Components

package/astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+import tailwind from "@astrojs/tailwind";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [tailwind()]
+});

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "free-astro-components",
+  "description": "A collection of free Astro components",
+  "author": "Denis Ventura",
+  "type": "module",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./src/types/index.d.ts",
+        "default": "./src/index.js"
+      }
+    }
+  },
+  "main": "./src/index.js",
+  "types": "./src/types/index.d.ts",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.8.2",
+    "@astrojs/tailwind": "^5.1.0",
+    "astro": "^4.12.2",
+    "tailwindcss": "^3.4.6",
+    "typescript": "^5.5.3"
+  },
+  "devDependencies": {
+    "prettier": "^3.3.3"
+  }
+}

package/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

package/src/components/Button.astro

@@ -0,0 +1,93 @@
+---
+import Icon from './Icon.astro'
+
+interface Props {
+  href?: string
+  icon?: string
+  label?: string
+  type?:
+    | 'primary'
+    | 'primary-outline'
+    | 'secondary'
+    | 'secondary-outline'
+    | 'tertiary'
+    | 'tertiary-outline'
+  iconPosition?: 'left' | 'right'
+  size?: 'small' | 'medium' | 'large'
+}
+
+const {
+  href,
+  icon,
+  label,
+  type = 'primary',
+  iconPosition = 'right',
+  size = 'medium',
+  ...props
+} = Astro.props
+
+const typeClasses = {
+  primary:
+    'bg-primary-300 border-primary-300 text-white shadow-primary-400/15 hover:bg-primary-200 hover:border-primary-200 active:bg-primary-400 active:border-primary-400 hover:shadow-primary-400/15 active:shadow-primary-400/15',
+  'primary-outline':
+    'bg-white border-primary-300 text-primary-300 shadow-primary-400/15 hover:border-primary-200 hover:text-primary-200 active:border-primary-400 active:text-primary-400 hover:shadow-primary-400/15 active:shadow-primary-400/15',
+  secondary:
+    'bg-secondary-300 border-secondary-300 text-white shadow-secondary-400/15 hover:bg-secondary-200 hover:border-secondary-200 active:bg-secondary-400 active:border-secondary-400 hover:shadow-secondary-400/15 active:shadow-secondary-400/15',
+  'secondary-outline':
+    'bg-white border-secondary-300 text-secondary-300 shadow-secondary-400/15 hover:border-secondary-200 hover:text-secondary-200 active:border-secondary-400 active:text-secondary-400 hover:shadow-secondary-400/15 active:shadow-secondary-400/15',
+  tertiary:
+    'bg-tertiary-300 border-tertiary-300 text-white shadow-tertiary-400/15 hover:bg-tertiary-200 hover:border-tertiary-200 active:bg-tertiary-400 active:border-tertiary-400 hover:shadow-tertiary-400/15 active:shadow-tertiary-400/15',
+  'tertiary-outline':
+    'bg-white border-tertiary-300 text-tertiary-300 shadow-tertiary-400/15 hover:border-tertiary-200 hover:text-tertiary-200 active:border-tertiary-400 active:text-tertiary-400 hover:shadow-tertiary-400/15 active:shadow-tertiary-400/15',
+}[type]
+
+const sizeClasses = {
+  small: 'text-xs px-4 h-8',
+  medium: 'text-sm px-6 h-10',
+  large: 'text-sm px-8 h-12',
+}[size]
+
+const onlyIconClasses = {
+  small: 'w-8 h-8',
+  medium: 'w-10 h-10',
+  large: 'w-12 h-12',
+}[size]
+
+const buttonClasses = [
+  'inline-flex justify-center items-center gap-2 text-sm font-bold border shadow-md rounded-lg transition duration-300 ease-in-out hover:shadow-lg active:shadow-md',
+  typeClasses,
+  label ? sizeClasses : onlyIconClasses,
+]
+  .filter(Boolean)
+  .join(' ')
+
+const iconClasses = {
+  small: 'w-5 h-5',
+  medium: 'w-6 h-6',
+  large: 'w-6 h-6',
+}[size]
+---
+
+{
+  href ? (
+    <a class={buttonClasses} href={href} {...props}>
+      {icon && iconPosition === 'left' && (
+        <Icon icon={icon} class={iconClasses} />
+      )}
+      {label && <span>{label}</span>}
+      {icon && iconPosition === 'right' && (
+        <Icon icon={icon} class={iconClasses} />
+      )}
+    </a>
+  ) : (
+    <button class={buttonClasses} {...props}>
+      {icon && iconPosition === 'left' && (
+        <Icon icon={icon} class={iconClasses} />
+      )}
+      {label && <span>{label}</span>}
+      {icon && iconPosition === 'right' && (
+        <Icon icon={icon} class={iconClasses} />
+      )}
+    </button>
+  )
+}

package/src/components/Icon.astro

@@ -0,0 +1,19 @@
+---
+import { icons } from '../data/icons.ts'
+
+interface Props {
+  icon: string
+}
+
+const { icon, ...props } = Astro.props
+const iconPath = icons.find((i) => i.name === icon)?.path
+---
+
+<svg
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  set:html={iconPath}
+  {...props}
+/>

package/src/css/main.css

@@ -0,0 +1,16 @@
+html {
+  @apply text-neutral-500;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-bold text-balance;
+}
+
+p {
+  @apply text-pretty;
+}

package/src/data/icons.ts

@@ -0,0 +1,10 @@
+export const icons = [
+  {
+    name: 'academic-cap',
+    path: '<path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />'
+  },
+  {
+    name: 'arrow-right',
+    path: '<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />'
+  }
+]

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

package/src/index.js

@@ -0,0 +1,2 @@
+export {default as Icon} from './components/Icon.astro';
+export {default as Button} from './components/Button.astro';

package/src/layouts/Layout.astro

@@ -0,0 +1,24 @@
+---
+import '../css/main.css'
+
+interface Props {
+  title: string
+}
+
+const { title } = Astro.props
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

package/src/pages/index.astro

@@ -0,0 +1,131 @@
+---
+import Layout from '../layouts/Layout.astro'
+import Button from '../components/Button.astro'
+---
+<Layout title="Welcome to Astro.">
+  <main class="p-16">
+    <h1 class="text-3xl">Components</h1>
+
+    <div class="flex flex-col gap-4">
+      <h2 class="text-2xl">Buttons</h2>
+      <p>Primary buttons</p>
+      <div class="flex flex-wrap gap-4">
+        <Button size="small" icon="arrow-right" label="Primary Button" />
+        <Button icon="arrow-right" label="Primary Button" />
+        <Button size="large" icon="arrow-right" label="Primary Button" />
+        <Button size="small" icon="arrow-right" />
+        <Button icon="arrow-right" />
+        <Button size="large" icon="arrow-right" />
+      </div>
+      <p>Primary outline buttons</p>
+      <div class="flex flex-wrap gap-4">
+        <Button
+          type="primary-outline"
+          size="small"
+          icon="arrow-right"
+          label="Primary Button"
+        />
+        <Button
+          type="primary-outline"
+          icon="arrow-right"
+          label="Primary Button"
+        />
+        <Button
+          type="primary-outline"
+          size="large"
+          icon="arrow-right"
+          label="Primary Button"
+        />
+
+        <Button type="primary-outline" size="small" icon="arrow-right" />
+        <Button type="primary-outline" icon="arrow-right" />
+        <Button type="primary-outline" size="large" icon="arrow-right" />
+      </div>
+      <p>Secondary buttons</p>
+
+      <div class="flex flex-wrap gap-4">
+        <Button
+          type="secondary"
+          size="small"
+          icon="arrow-right"
+          label="Secondary Button"
+        />
+        <Button type="secondary" icon="arrow-right" label="Secondary Button" />
+        <Button
+          type="secondary"
+          size="large"
+          icon="arrow-right"
+          label="Secondary Button"
+        />
+        <Button type="secondary" size="small" icon="arrow-right" />
+        <Button type="secondary" icon="arrow-right" />
+        <Button type="secondary" size="large" icon="arrow-right" />
+      </div>
+      <p>Secondary outline buttons</p>
+      <div class="flex flex-wrap gap-4">
+        <Button
+          type="secondary-outline"
+          size="small"
+          icon="arrow-right"
+          label="Secondary Button"
+        />
+        <Button
+          type="secondary-outline"
+          icon="arrow-right"
+          label="Secondary Button"
+        />
+        <Button
+          type="secondary-outline"
+          size="large"
+          icon="arrow-right"
+          label="Secondary Button"
+        />
+        <Button type="secondary-outline" size="small" icon="arrow-right" />
+        <Button type="secondary-outline" icon="arrow-right" />
+        <Button type="secondary-outline" size="large" icon="arrow-right" />
+      </div>
+      <p>Tertiary buttons</p>
+      <div class="flex flex-wrap gap-4">
+        <Button
+          type="tertiary"
+          size="small"
+          icon="arrow-right"
+          label="Tertiary Button"
+        />
+        <Button type="tertiary" icon="arrow-right" label="Tertiary Button" />
+        <Button
+          type="tertiary"
+          size="large"
+          icon="arrow-right"
+          label="Tertiary Button"
+        />
+        <Button type="tertiary" size="small" icon="arrow-right" />
+        <Button type="tertiary" icon="arrow-right" />
+        <Button type="tertiary" size="large" icon="arrow-right" />
+      </div>
+      <p>Tertiary outline buttons</p>
+      <div class="flex flex-wrap gap-4">
+        <Button
+          type="tertiary-outline"
+          size="small"
+          icon="arrow-right"
+          label="Tertiary Button"
+        />
+        <Button
+          type="tertiary-outline"
+          icon="arrow-right"
+          label="Tertiary Button"
+        />
+        <Button
+          type="tertiary-outline"
+          size="large"
+          icon="arrow-right"
+          label="Tertiary Button"
+        />
+        <Button type="tertiary-outline" size="small" icon="arrow-right" />
+        <Button type="tertiary-outline" icon="arrow-right" />
+        <Button type="tertiary-outline" size="large" icon="arrow-right" />
+      </div>
+    </div>
+  </main>
+</Layout>

package/src/types/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Button component
+ */
+export type Button = typeof import('../index.js').Button
+export const Button: Button

package/tailwind.config.mjs

@@ -0,0 +1,60 @@
+/** @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: [],
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}