webcoreui 0.0.2 → 0.0.5

package/README.md

@@ -1,47 +1,136 @@
-# Astro Starter Kit: Minimal
+<p>
+    <a href="https://webcoreui.dev">
+      <img
+            alt="Webcore - Frontend components for Astro, Svelte, and React"
+            src="https://raw.githubusercontent.com/Frontendland/webcoreui/main/public/img/banner.png"
+        />
+    </a>
+</p>
 
-```sh
-npm create astro@latest -- --template minimal
+<p align="center">
+    <a href="https://github.com/Frontendland/webcoreui/releases">
+        <img
+            src="https://img.shields.io/npm/v/webcoreui.svg?label=Latest%20Release"
+            alt="Latest Release"
+        />
+    </a>
+    <a href="https://github.com/Frontendland/webcoreui/blob/main/LICENSE">
+        <img
+            src="https://img.shields.io/badge/license-MIT-blue"
+            alt="License"
+        />
+    </a>
+</p>
+
+> [!IMPORTANT]
+> This library is still in early development. New changes can break existing functionality, and no functionality should be considered final. The library will be considered stable once it reaches v1.0.
+
+---
+## Table of Contents
+
+- [Table of Contents](#table-of-contents)
+- [Documentation](#documentation)
+- [Getting started](#getting-started)
+    - [Prerequisites](#prerequisites)
+    - [Installation](#installation)
+    - [Setup](#setup)
+    - [Using Components](#using-components)
+- [Components](#components)
+
+## Documentation
+
+Full documentation coming soon on [webcoreui.dev/docs](https://webcoreui.dev/docs).
+
+## Getting Started
+
+Webcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems.
+
+### Prerequisites
+
+> [!NOTE]
+> Before getting started, make sure you have a package manager installed, such as <a href="https://nodejs.org/en/" rel="noreferrer">Node</a>.
+
+Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
+
+- [Sass](https://www.npmjs.com/package/sass) - `v1.77` and above
+- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4` and above
+
+Depending on your project setup, you'll also need the following packages:
+
+- **For Astro projects**
+    - [Astro](https://www.npmjs.com/package/astro) - `v4.10` and above
+- **For Svelte projects**
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2` and above
+- **For React projects**
+    - [React](https://www.npmjs.com/package/react) - `v18.3` and above
+    - [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3` and above
+
+### Installation
+
+Install Webcore as a dependency by running one of the following command:
+
+```bash
+# Using NPM
+npm i webcoreui
+
+# Using Yarn
+yarn add webcoreui
 ```
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+### Setup
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+1. Add the following to your `tsconfig.json` to include TypeScript types:
 
-## 🚀 Project Structure
+```json
+{
+  "include": ["webcoreui"]
+}
+```
 
-Inside of your Astro project, you'll see the following folders and files:
+2. Setup default styles and fonts by calling the following in your global SCSS file:
 
-```text
-/
-├── public/
-├── src/
-│   └── pages/
-│       └── index.astro
-└── package.json
+```scss
+@import 'webcoreui/styles';
+@include Setup((
+    // Define paths for your fonts
+    fontRegular: '/fonts/Inter-Regular.woff2',
+    fontBold: '/fonts/Inter-Bold.woff2'
+));
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+> [!TIP]
+> You can download the fonts Webcore uses from the [`public/fonts`](https://github.com/Frontendland/webcoreui/tree/main/public/fonts) directory.
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+The `Setup` mixin can also accept the following options:
 
-Any static assets, like images, can be placed in the `public/` directory.
 
-## 🧞 Commands
+| Property  | Default value | Purpose |
+|-----------|---------------|---------|
+| `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |
+| `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). |
 
-All commands are run from the root of the project, from a terminal:
+### Using Components
 
-| Command                   | Action                                           |
-| :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+Start using Webcore components in your code by importing them:
+
+```astro
+---
+// Import the component relevant to your project
+// How to import Astro components
+import { Accordion } from 'webcoreui/astro'
+
+// How to import Svelte components
+import { Accordion } from 'webcoreui/svelte'
+
+// How to import React components
+import { Accordion } from 'webcoreui/react'
+---
+
+<Accordion items={[{ ... }]} />
+```
 
-## 👀 Want to learn more?
+## Components
 
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
+- [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
+- [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
+- [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)

package/astro.d.ts

@@ -0,0 +1,5 @@
+declare module 'webcoreui/astro' {
+    import type { AccordionProps } from './components/Accordion/accordion'
+
+    export function Accordion(_props: AccordionProps): any
+}

package/astro.js

@@ -0,0 +1,7 @@
+import AccordionComponent from './components/Accordion/Accordion.astro'
+import ButtonComponent from './components/Button/Button.astro'
+import CardComponent from './components/Card/Card.astro'
+
+export const Accordion = AccordionComponent
+export const Button = ButtonComponent
+export const Card = CardComponent

package/components/Accordion/Accordion.astro

@@ -0,0 +1,48 @@
+---
+import type { AccordionProps } from './accordion'
+
+interface Props extends AccordionProps {}
+
+const {
+    items
+} = Astro.props
+---
+
+<ul data-id="accordion">
+    {items.map(item => (
+        <li>
+            <div class="accordion-title">
+                {item.title}
+                <img
+                    src="/icons/arrow-down.svg"
+                    alt="GitHub"
+                    width={15}
+                    height={15}
+                />
+            </div>
+            <div class="accordion-wrapper">
+                <div class="accordion-content">
+                    <Fragment set:html={item.content} />
+                </div>
+            </div>
+        </li>
+    ))}
+</ul>
+
+<script>
+    const accordions = document.querySelectorAll('[data-id="accordion"]')
+
+    Array.from(accordions).forEach(element => {
+        element.addEventListener('click', event => {
+            const target = event.target as HTMLDivElement
+
+            if (target.classList.contains('accordion-title')) {
+                target.classList.toggle('open')
+            }
+        })
+    })
+</script>
+
+<style lang="scss">
+    @import './accordion.scss';
+</style>

package/components/Accordion/Accordion.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import type { AccordionProps } from './accordion'
+
+    export let items: AccordionProps['items']
+
+    let state = Array(items.length).fill(false)
+
+    const toggle = (index: number) => {
+        state = state.map((_, i) => index === i
+            ? !state[i]
+            : state[i]
+        )
+    }
+</script>
+
+<ul>
+    {#each items as item, index}
+        <li>
+            <div
+                class="accordion-title"
+                class:open={state[index]}
+                on:click={() => toggle(index)}
+            >
+                {item.title}
+                <img
+                    src="/icons/arrow-down.svg"
+                    alt="GitHub"
+                    width={15}
+                    height={15}
+                />
+            </div>
+            <div class="accordion-wrapper">
+                <div class="accordion-content">
+                    {@html item.content}
+                </div>
+            </div>
+        </li>
+    {/each}
+</ul>
+
+<style lang="scss">
+    @import './accordion.scss';
+</style>

package/components/Accordion/Accordion.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import type { AccordionProps } from './accordion'
+import './accordion.scss'
+
+export const Accordion = ({ items }: AccordionProps) => {
+    const [state, setState] = useState(Array(items.length).fill(false))
+
+    const toggle = (index: number) => {
+        setState(state.map((_, i) => index === i
+            ? !state[i]
+            : state[i]
+        ))
+    }
+
+    return (
+        <ul data-id="accordion">
+            {items.map((item, index) => (
+                <li key={index}>
+                    <div
+                        className={state[index] ? 'accordion-title open' : 'accordion-title'}
+                        onClick={() => toggle(index)}
+                    >
+                        {item.title}
+                        <img
+                            src="/icons/arrow-down.svg"
+                            alt="GitHub"
+                            width={15}
+                            height={15}
+                        />
+                    </div>
+                    <div className="accordion-wrapper">
+                        <div className="accordion-content">
+                            <div dangerouslySetInnerHTML={{ __html: item.content }} />
+                        </div>
+                    </div>
+                </li>
+            ))}
+        </ul>
+    )
+}

package/components/Accordion/accordion.scss

@@ -0,0 +1,60 @@
+@import '../../scss/config.scss';
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+        border-bottom: 1px solid #252525;
+        padding: 10px 0;
+        font-size: 16px;
+
+        &:first-child {
+            padding-top: 0;
+        }
+
+        &:last-child {
+            border-bottom: 0;
+            padding-bottom: 0;
+        }
+
+        .accordion-title {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            cursor: pointer;
+
+            img {
+                @include Transition(transform);
+                filter: brightness(.7);
+            }
+
+            &.open {
+                img {
+                    transform: rotate(180deg);
+                }
+
+                + .accordion-wrapper {
+                    grid-template-rows: 1fr;
+        
+                    .accordion-content {
+                        padding: 10px 0;
+                    }
+                }
+            }
+        }
+
+        .accordion-wrapper {
+            @include Transition(grid-template-rows);
+            display: grid;
+            grid-template-rows: 0fr;
+        }
+
+        .accordion-content {
+            @include Transition();
+            overflow: hidden;
+            color: #BBB;
+        }
+    }
+}

package/components/Accordion/accordion.ts

@@ -0,0 +1,6 @@
+export type AccordionProps = {
+    items: {
+        title: string
+        content: string
+    }[]
+}

package/components/Button/Button.astro

@@ -0,0 +1,32 @@
+---
+import type { ButtonProps } from './button'
+
+interface Props extends ButtonProps {}
+
+const {
+    theme,
+    bold,
+    href,
+    ...rest
+} = Astro.props
+
+const classes = [
+    'w-button',
+    bold && 'bold',
+    theme
+].filter(Boolean).join(' ')
+---
+
+{href ? (
+    <a {...rest} href={href} class={classes || null}>
+        <slot />
+    </a>
+) : (
+    <button {...rest} class={classes || null}>
+        <slot />
+    </button>
+)}
+
+<style lang="scss">
+    @import './button.scss';
+</style>

package/components/Button/Button.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { ButtonProps } from './button'
+
+    export let theme: ButtonProps['theme'] = null
+    export let bold: ButtonProps['bold'] = false
+    export let href: ButtonProps['href'] = ''
+    export let onClick: ButtonProps['onClick'] = () => {}
+
+    const classes = [
+        'w-button',
+        bold && 'bold',
+        theme
+    ].filter(Boolean).join(' ')
+</script>
+
+
+{#if href}
+    <a {...$$restProps} href={href} class={classes || null}>
+        <slot />
+    </a>
+{:else}
+    <button {...$$restProps} class={classes || null} on:click={onClick}>
+        <slot />
+    </button>
+{/if}
+
+<style lang="scss">
+    @import './button.scss';
+</style>

package/components/Button/Button.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { ButtonProps } from './button'
+import './button.scss'
+
+export const Button = ({
+    theme,
+    bold,
+    href,
+    children,
+    onClick,
+    ...rest
+}: ButtonProps) => {
+    const classes = [
+        'w-button',
+        bold && 'bold',
+        theme
+    ].filter(Boolean).join(' ')
+
+    if (href) {
+        return (
+            <a {...rest} href={href} className={classes || undefined}>
+                {children}
+            </a>
+        )
+    }
+
+    return (
+        <button {...rest} className={classes || undefined} onClick={onClick}>
+            {children}
+        </button>
+    )
+}

package/components/Button/button.scss

@@ -0,0 +1,92 @@
+@import '../../scss/config.scss';
+
+.w-button {
+    @include Transition();
+    padding: 10px 15px;
+    border-radius: 5px;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 16px;
+    font-family: Regular;
+    cursor: pointer;
+    border: 0;
+    background: #FFF;
+    color: #252525;
+
+    &[disabled] {
+        cursor: no-drop;
+        background: #BBB;
+    }
+
+    &:hover {
+        background: #BBB;
+    }
+    
+    &.secondary {
+        background: #252525;
+        color: #FFF;
+
+        &:hover {
+            background: #333;
+        }
+    }
+
+    &.outline {
+        background: #000;
+        color: #FFF;
+        box-shadow: inset 0px 0px 0px 1px #FFF;
+
+        &:hover {
+            color: #BBB;
+            box-shadow: inset 0px 0px 0px 1px #BBB;
+        }
+    }
+
+    &.flat {
+        background: #000;
+        color: #FFF;
+
+        &:hover {
+            background: #333;
+        }
+    }
+
+    &.info {
+        background: #0abde3;
+
+        &:hover {
+            background: #48dbfb;
+        }
+    }
+
+    &.success {
+        background: #10ac84;
+
+        &:hover {
+            background: #1dd1a1;
+        }
+    }
+
+    &.warning {
+        background: #ff9f43;
+
+        &:hover {
+            background: #f7aa61;
+        }
+    }
+
+    &.alert {
+        background: #e73f40;
+        color: #fff;
+
+        &:hover {
+            background: #ee5253;
+        }
+    }
+
+    &.bold {
+        font-family: Bold;
+    }
+}

package/components/Button/button.ts

@@ -0,0 +1,14 @@
+export type ButtonProps = {
+    theme?: 'secondary'
+        | 'outline'
+        | 'flat'
+        | 'info'
+        | 'success'
+        | 'warning'
+        | 'alert'
+        | null
+    bold?: boolean
+    href?: string
+    onClick?: () => any
+    [key: string]: any
+}

package/components/Card/Card.astro

@@ -0,0 +1,50 @@
+---
+interface Props {
+    element?: string
+    title?: string
+    compact?: boolean
+    className?: string
+    secondary?: boolean
+    [key: string]: any
+}
+
+const {
+    element = 'section',
+    title,
+    titleTag = 'span',
+    compact,
+    className,
+    secondary,
+    ...rest
+} = Astro.props
+
+const classes = [
+    className,
+    secondary && 'secondary',
+    'card'
+].filter(Boolean).join(' ')
+
+const props = {
+    class: classes
+}
+
+const Component = element
+const Title = titleTag
+---
+
+<Component {...props} {...rest}>
+    {title && (
+        <Title class="card-title">{title}</Title>
+    )}
+    <div class="card-body" class:list={[compact && 'compact']}>
+        {compact && !secondary ? (
+            <div class="card-wrapper"><slot /></div>
+        ) : (
+            <slot />
+        )}
+    </div>
+</Component>
+
+<style lang="scss">
+    @import './card.scss';
+</style>

package/components/Card/card.scss

@@ -0,0 +1,36 @@
+.card {
+    border: 1px solid #252525;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+
+    &.secondary {
+        background: #111;
+
+        .card-title {
+            background: #000;
+        }
+    }
+
+    .card-title {
+        padding: 20px;
+        display: block;
+        border-bottom: 1px solid #252525;
+        font-size: 16px;
+    }
+
+    .card-body {
+        padding: 20px;
+        height: 100%;
+
+        &.compact {
+            background: #111;
+        }
+    }
+
+    .card-wrapper {
+        background: #000;
+        padding: 40px;
+        height: 100%;
+    }
+}

package/package.json

@@ -1,27 +1,65 @@
-{
-    "name": "webcoreui",
-    "type": "module",
-    "version": "0.0.2",
-    "scripts": {
-        "dev": "astro dev",
-        "build": "astro check && astro build",
-        "build:package": "node scripts/build.js",
-        "test": "echo \"Error: no test specified\""
-    },
-    "dependencies": {
-        "@astrojs/check": "0.7.0",
-        "@astrojs/svelte": "5.5.0",
-        "astro": "4.10.2",
-        "sass": "1.77.5",
-        "svelte": "4.2.18",
-        "typescript": "5.4.5"
-    },
-    "exports": {
-        "./astro": "./astro.js",
-        "./styles": "./scss/index.scss",
-        "./config": "./scss/config.scss"
-    },
-    "files": [
-        "dist"
-    ]
-}
+{
+    "name": "webcoreui",
+    "type": "module",
+    "version": "0.0.5",
+    "scripts": {
+        "dev": "astro dev",
+        "build": "astro check && astro build",
+        "build:package": "node scripts/build.js",
+        "test": "echo \"Error: no test specified\""
+    },
+    "dependencies": {
+        "@astrojs/check": "0.7.0",
+        "@astrojs/react": "3.5.0",
+        "@astrojs/svelte": "5.5.0",
+        "astro": "4.10.2",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "sass": "1.77.5",
+        "svelte": "4.2.18",
+        "typescript": "5.4.5"
+    },
+    "exports": {
+        "./astro": "./astro.js",
+        "./svelte": "./svelte.js",
+        "./react": "./react.js",
+        "./styles": "./scss/index.scss",
+        "./config": "./scss/config.scss"
+    },
+    "files": [
+        "components",
+        "public",
+        "scss",
+        "astro.d.ts",
+        "astro.js",
+        "svelte.d.ts",
+        "svelte.js",
+        "react.d.ts",
+        "react.js",
+        "README.md",
+        "LICENSE"
+    ],
+    "license": "MIT",
+    "description": "UI component and template library for Astro, Svelte, and React apps styled with Sass.",
+    "keywords": [
+        "webcore",
+        "component",
+        "components",
+        "ui components",
+        "component library",
+        "astro components",
+        "svelte components",
+        "react components",
+        "frontend",
+        "library",
+        "sass"
+    ],
+    "homepage": "https://webcoreui.dev",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Frontendland/webcoreui.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Frontendland/webcoreui/issues"
+    }
+}

package/public/icons/arrow-down.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.360618 6.42142C0.864272 5.88419 1.70806 5.85699 2.24526 6.36062L12 15.5057L21.7547 6.36062C22.292 5.85699 23.1358 5.88419 23.6395 6.42142C24.143 6.95865 24.1158 7.80243 23.5787 8.30606L12.9119 18.3062C12.3991 18.787 11.601 18.787 11.0881 18.3062L0.421418 8.30606C-0.11581 7.80243 -0.143009 6.95865 0.360618 6.42142Z" fill="white" />
+</svg>

package/public/icons/github.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.3903 6.12641C21.3172 4.24172 19.8617 2.74961 18.0232 1.64975C16.1845 0.549822 14.1772 0 11.9999 0C9.82282 0 7.81486 0.54999 5.97655 1.64975C4.13797 2.74956 2.68246 4.24172 1.60939 6.12641C0.536482 8.01104 0 10.0691 0 12.3005C0 14.9808 0.762885 17.3911 2.28904 19.5319C3.81503 21.6728 5.78638 23.1543 8.20293 23.9764C8.48422 24.0299 8.69245 23.9923 8.82785 23.8644C8.96329 23.7364 9.03093 23.5761 9.03093 23.3841C9.03093 23.3521 9.02825 23.0639 9.02305 22.5193C9.01812 22.0442 9.01549 21.5691 9.01517 21.094L8.65579 21.1577C8.42665 21.2008 8.13758 21.219 7.78859 21.2138C7.43977 21.2088 7.07764 21.1714 6.70271 21.1017C6.32762 21.0326 5.97874 20.8725 5.6558 20.6215C5.33302 20.3706 5.10388 20.0422 4.96844 19.6367L4.81219 19.2681C4.70805 19.0227 4.54409 18.7502 4.32009 18.4514C4.0961 18.1523 3.86959 17.9496 3.64045 17.8428L3.53105 17.7625C3.45816 17.7092 3.39051 17.6448 3.32796 17.5702C3.26546 17.4955 3.21867 17.4208 3.18742 17.346C3.15612 17.2711 3.18206 17.2096 3.26552 17.1614C3.34898 17.1133 3.4998 17.0899 3.71865 17.0899L4.03103 17.1377C4.23937 17.1805 4.49708 17.3084 4.80448 17.522C5.11171 17.7356 5.36427 18.0131 5.56222 18.3547C5.80192 18.7926 6.09071 19.1262 6.42941 19.3559C6.76784 19.5855 7.10906 19.7001 7.45274 19.7001C7.79642 19.7001 8.09325 19.6734 8.34335 19.6202C8.59318 19.5668 8.82757 19.4866 9.04642 19.3799C9.14017 18.6642 9.39541 18.1143 9.81193 17.73C9.21826 17.6661 8.68452 17.5697 8.21042 17.4417C7.7366 17.3134 7.24697 17.1053 6.74184 16.8167C6.23645 16.5285 5.81719 16.1707 5.48396 15.7438C5.15068 15.3166 4.87715 14.7559 4.66378 14.062C4.45029 13.3678 4.34352 12.5671 4.34352 11.6595C4.34352 10.3673 4.75506 9.26765 5.57798 8.35997C5.19249 7.38846 5.22888 6.29936 5.68727 5.0928C5.98936 4.99659 6.43735 5.06879 7.03102 5.30894C7.6248 5.54921 8.05954 5.75504 8.33569 5.92569C8.61184 6.09629 8.8331 6.24085 8.99979 6.3581C9.96872 6.08058 10.9686 5.94179 11.9998 5.94179C13.0309 5.94179 14.0311 6.08058 15 6.3581L15.5938 5.97388C15.9998 5.71751 16.4792 5.48257 17.031 5.269C17.5831 5.05555 18.0052 4.99675 18.297 5.09296C18.7656 6.29959 18.8074 7.38863 18.4217 8.36014C19.2446 9.26782 19.6563 10.3677 19.6563 11.6597C19.6563 12.5673 19.5492 13.3705 19.336 14.07C19.1226 14.7696 18.8467 15.3298 18.5083 15.7518C18.1695 16.1737 17.7475 16.5288 17.2424 16.8169C16.7372 17.1052 16.2474 17.3134 15.7735 17.4416C15.2995 17.5698 14.7658 17.6662 14.1721 17.7303C14.7136 18.2106 14.9843 18.9688 14.9843 20.0045V23.3837C14.9843 23.5756 15.0495 23.7359 15.1798 23.864C15.31 23.9918 15.5156 24.0295 15.7969 23.9759C18.2138 23.1539 20.1851 21.6724 21.7111 19.5314C23.2368 17.3907 24 14.9804 24 12.3C23.9995 10.0689 23.4627 8.01104 22.3903 6.12641Z" fill="white"/>
+</svg>

package/public/img/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/react.d.ts

@@ -0,0 +1,5 @@
+declare module 'webcoreui/react' {
+    import type { AccordionProps } from './components/Accordion/accordion'
+
+    export function Accordion(_props: AccordionProps): any
+}

package/react.js

@@ -0,0 +1,7 @@
+import { Accordion as AccordionComponent } from './components/Accordion/Accordion.tsx'
+import { Button as ButtonComponent } from './components/Button/Button.tsx'
+import { Card as CardComponent } from './components/Card/Card.tsx'
+
+export const Accordion = AccordionComponent
+export const Button = ButtonComponent
+export const Card = CardComponent

package/scss/config/mixins.scss

@@ -0,0 +1,16 @@
+@mixin Transition($property: all, $speed: .3s) {
+    transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+@mixin Media($size: 'xs') {
+    $sizes: (
+        'xs':   600px,
+        'sm':   800px,
+        'md':   1024px,
+        'lg':   1200px
+    );
+
+    @media (min-width: #{map-get($sizes, $size)}) {
+        @content;
+    }
+}

package/scss/config.scss

@@ -0,0 +1 @@
+@import './config/mixins.scss';

package/scss/global/elements.scss

@@ -0,0 +1,11 @@
+@import '../config';
+
+@mixin Elements() {
+    code {
+        display: inline-block;
+        padding: 2px 10px;
+        border-radius: 5px;
+        border: 1px solid #252525;
+        font-size: 14px;
+    }
+}

package/scss/global/utility.scss

@@ -0,0 +1,42 @@
+@import '../config';
+
+@mixin Utility() {
+    .container {
+        margin: 0 auto;
+        max-width: 1200px;
+        padding: 0 20px;
+    }
+
+    .grid {
+        display: grid;
+        gap: 20px;
+    }
+
+    @include Media('md') {
+        .grid.md-2 {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        .grid.md-3 {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+
+        .grid.md-4 {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+    }
+
+    @include Media('lg') {
+        .grid.lg-2 {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+
+        .grid.lg-3 {
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+
+        .grid.lg-4 {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+    }
+}

package/scss/global.scss

@@ -0,0 +1,2 @@
+@import './global/elements.scss';
+@import './global/utility.scss';

package/scss/index.scss

@@ -0,0 +1,3 @@
+@import './setup';
+@import './resets';
+@import './global';

package/scss/resets.scss

@@ -0,0 +1,44 @@
+@mixin Resets() {
+    @if (config('fontRegular')) {
+        @font-face {
+            font-family: Regular;
+            font-display: swap;
+            src: url(#{config('fontRegular')}) format('woff2');
+        }
+    }
+
+    @if (config('fontBold')) {
+        @font-face {
+            font-family: Bold;
+            font-display: swap;
+            src: url(#{config('fontBold')}) format('woff2');
+        }
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+    
+    body {
+        background: #000;
+        color: #FFF;
+        margin: 0;
+        font-size: 18px;
+        font-family: Regular, sans-serif;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    strong {
+        font-family: Bold, sans-serif;
+    }
+
+    a {
+        color: #FFF;
+        text-decoration: none;
+    }
+}    

package/scss/setup.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+
+$config: (
+    includeResets: true,
+    includeHelperClasses: true,
+    includeElementStyles: true
+);
+
+@function config($key) {
+    @return map.get($config, $key);
+}
+
+@mixin Setup($customConfig: ()) {
+    $config: map.merge($config, $customConfig) !global;
+
+    @if (config('includeResets')) {
+        @include Resets();
+    }
+
+    @if (config('includeHelperClasses')) {
+        @include Utility();
+    }
+
+    @if (config('includeElementStyles')) {
+        @include Elements();
+    }
+}

package/svelte.d.ts

@@ -0,0 +1,5 @@
+declare module 'webcoreui/svelte' {
+    import type { AccordionProps } from './components/Accordion/accordion'
+
+    export function Accordion(_props: AccordionProps): any
+}

package/svelte.js

@@ -0,0 +1,7 @@
+import AccordionComponent from './components/Accordion/Accordion.svelte'
+import ButtonComponent from './components/Button/Button.svelte'
+import CardComponent from './components/Card/Card.svelte'
+
+export const Accordion = AccordionComponent
+export const Button = ButtonComponent
+export const Card = CardComponent

package/dist/env.d.ts

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