fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/content/pages/overview/frameworks.mdx

@@ -1,198 +0,0 @@
----
-presets: [docs]
-title: Frameworks
----
-
-# Frameworks
-
-Fulldev UI is written in vanilla CSS and .astro files. It is framework agnostic.
-
-## JS frameworks
-
-All styles in Fulldev UI use regular CSS and classes. Classes use the following naming convention:
-
-- Component classes are the same as the component name, like `button` for `<Button>`.
-- Prop classes have the prop name as prefix, like `variant-primary` for `<Button variant="primary">`.
-- If a prop is a boolean the class is added without a prefix, like `contrast`.
-
-This means you can apply Fulldev UI styles to any framework component as follows:
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<a class="button variant-primary contrast">Button</a>
-<Button contrast>Button</Button>
-```
-
-## CSS frameworks
-
-A TailwindCSS plugin and UnoCSS preset is available.
-
-### TailwindCSS
-
-In your `tailwind.config.ts` add the following:
-
-```ts
-// tailwind.config.ts
-import fulldevUI from 'fulldev-ui/tailwind'
-
-export default {
-  plugins: [fulldevUI],
-}
-```
-
-In your `astro.config.ts` add the following:
-
-```ts
-// astro.config.ts
-import tailwind from '@astrojs/tailwind'
-
-export default defineConfig({
-  integrations: [
-    tailwind({
-      // Disable injecting styles, import manually instead
-      applyBaseStyles: false,
-    }),
-  ],
-})
-```
-
-Import the css file file below anywhere in your project.
-
-```css
-@tailwind base layer(base);
-@tailwind components;
-@tailwind utilities;
-```
-
-### UnoCSS
-
-In your `uno.config.ts` add the following:
-
-```ts
-// uno.config.ts
-import fulldevUI from 'fulldev-ui/unocss'
-
-export default defineConfig({
-  injectReset: false,
-  presets: [fulldevUI],
-})
-```
-
-Do not use `injectReset` when using the UnoCSS preset, as it will conflict with the reset provided by Fulldev UI. If you do want a style reset, be sure to import it in the `base` layer, similar to the TailwindCSS example above.
-
-## Utility classes
-
-The following classes are available when using the Tailwind plugin or UnoCSS preset.
-
-### Spacing
-
-The following spacing classes are added to your tailwind/uno config.
-
-You can use them like `p-space-1`, `m-space-1`, `h-space-1`, `w-space-1`, etc.
-
-```ts
-spacing: {
-  'space-1': 'var(--space-1)',
-  'space-2': 'var(--space-2)',
-  'space-3': 'var(--space-3)',
-  'space-4': 'var(--space-4)',
-  'space-5': 'var(--space-5)',
-  'space-6': 'var(--space-6)',
-  'space-7': 'var(--space-7)',
-},
-```
-
-### Font size
-
-The following spacing classes are added to your tailwind/uno config.
-
-You can use them like `text-1`, `text-2`, `text-3`, etc.
-
-```ts
-fontSize: {
-  1: 'var(--text-1)',
-  2: 'var(--text-2)',
-  3: 'var(--text-3)',
-  4: 'var(--text-4)',
-  5: 'var(--text-5)',
-  6: 'var(--text-6)',
-  7: 'var(--text-7)',
-  8: 'var(--text-8)',
-}
-```
-
-### Border radius
-
-The following border radius classes are added to your tailwind/uno config.
-
-You can use them like `rounded-1`, `rounded-2`, `rounded-3`, etc.
-
-```ts
-borderRadius: {
-  1: 'var(--radius-1)',
-  2: 'var(--radius-2)',
-  3: 'var(--radius-3)',
-}
-```
-
-### Color classes
-
-The following color classes are added to your tailwind/uno config.
-
-You can use them like `bg-color-1`, `text-base-2`, `border-base-6`, etc.
-
-```ts
-colors: {
-  color: {
-    1: 'var(--color-1)',
-    2: 'var(--color-2)',
-    3: 'var(--color-3)',
-    4: 'var(--color-4)',
-    5: 'var(--color-5)',
-    6: 'var(--color-6)',
-    7: 'var(--color-7)',
-    8: 'var(--color-8)',
-    9: 'var(--color-9)',
-    10: 'var(--color-10)',
-    11: 'var(--color-11)',
-    12: 'var(--color-12)',
-    contrast: 'var(--color-contrast)',
-    background: 'var(--color-background)',
-  },
-  base: {
-    1: 'var(--color-base-1)',
-    2: 'var(--color-base-2)',
-    3: 'var(--color-base-3)',
-    4: 'var(--color-base-4)',
-    5: 'var(--color-base-5)',
-    6: 'var(--color-base-6)',
-    7: 'var(--color-base-7)',
-    8: 'var(--color-base-8)',
-    9: 'var(--color-base-9)',
-    10: 'var(--color-base-10)',
-    11: 'var(--color-base-11)',
-    12: 'var(--color-base-12)',
-    contrast: 'var(--color-base-contrast)',
-    background: 'var(--color-base-background)',
-  },
-  brand: {
-    1: 'var(--color-brand-1)',
-    2: 'var(--color-brand-2)',
-    3: 'var(--color-brand-3)',
-    4: 'var(--color-brand-4)',
-    5: 'var(--color-brand-5)',
-    6: 'var(--color-brand-6)',
-    7: 'var(--color-brand-7)',
-    8: 'var(--color-brand-8)',
-    9: 'var(--color-brand-9)',
-    10: 'var(--color-brand-10)',
-    11: 'var(--color-brand-11)',
-    12: 'var(--color-brand-12)',
-    contrast: 'var(--color-brand-contrast)',
-    background: 'var(--color-brand-background)',
-  }
-}
-```

package/src/content/pages/overview/installation.mdx

@@ -1,53 +0,0 @@
----
-presets: [docs]
-title: Installation
----
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-# Installation
-
-You can add fulldev-ui to your project, or use the starter template.
-
-## Add to existing project
-
-### Automatic setup
-
-Use the astro add command to automatically install the dependencies and add the integration.
-
-```bash
-npx astro add fulldev-ui
-```
-
-## Manual installation
-
-Install fulldev-ui with your favorite package manager.
-
-```bash
-pnpm i fulldev-ui
-# or
-bun i fulldev-ui
-# or
-yarn add fulldev-ui
-# or
-npm i fulldev-ui
-```
-
-Then setup the integration in your `astro.config.ts` file.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-export default defineConfig({
-  integrations: [fulldev()],
-})
-```
-
-## Using the starter template
-
-The easiest way to get started is to use the [starter template](https://github.com/fulldotdev/starter).
-
-```bash
-pnpm create astro@latest -- --template fulldotdev/starter
-```

package/src/content/pages/overview/introduction.mdx

@@ -1,30 +0,0 @@
----
-presets: [docs]
-title: Introduction
----
-
-# Introduction
-
-**Fulldev UI** is a full-featured UI library and website theme built on the [Astro](https://astro.build/) framework. Whether starting a new project or enhancing an existing one, this guide will help you get set up. For installation details, see the [installation guide](/getting-started/installation).
-
-## Why we built it
-
-We built **Fulldev UI** after repeatedly encountering the same challenges in client projects, covering the core needs of content-focused websites. Initially created for [our own company](https://full.dev), we decided to open-source it for others to use.
-
-## Some features
-
-- Vanilla HTML and CSS.
-- Seamless integration with TailwindCSS and UnoCSS.
-- Minimal JavaScript.
-- Supports Astro's [Content Collections](https://docs.astro.build/en/guides/content-collections/).
-- Customizable via CSS variables.
-- Reusable components for pages and sections.
-- Includes blocks like Hero, CTA, Features, etc.
-- Page-building tools.
-- And more...
-
-## A word of caution
-
-**Fulldev UI** includes a wide range of features, some still experimental. While a narrower focus would improve stability, we built it for flexibility in our projects.
-
-This isn't just a single-purpose library; it's a framework for building blog, marketing, and portfolio websites—similar to how [Starlight](https://starlight.astro.build/) serves documentation. As it evolves, its focus will sharpen. In the meantime, feel free to use it and share feedback on [Discord](https://discord.gg/fulldev)!

package/src/content/pages/overview/theming.mdx

@@ -1,69 +0,0 @@
----
-presets: [docs]
-title: Theming
----
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-# Theming
-
-With the fulldev-ui integration you can easily set a theme and generate a palette based on <Link href="https://www.radix-ui.com/colors">Radix Colors.</Link>
-
-## Configuration
-
-### Generating a color palette
-
-- **css** is the path to your custom css file that applies to all pages on your site.
-- **colors** is an object that defines the colors for your site.
-  - **theme** is the default theme for your site.
-  - **dark** and **light** are objects that define the colors for the dark and light themes, these three properties are used to generate a color pallete using radix colors.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [
-    fulldev({
-      css: '/src/css/custom.css',
-      colors: {
-        theme: 'dark',
-        dark: {
-          background: '#111110',
-          base: '#6F6D66',
-          brand: '#F50',
-        },
-        light: {
-          background: '#EEEEEC',
-          base: '#6F6D66',
-          brand: '#F50',
-        },
-      },
-    }),
-  ],
-})
-```
-
-### Generating favicons
-
-We've integrated <Link href="https://github.com/ACP-CODE/astro-favicons">astro-favicons</Link> into fulldev-ui to generate favicons from a svg file.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [
-    fulldev({
-      favicon: 'src/images/favicon.svg', // can also be png, webp, jpg, etc.
-      // other options here
-    }),
-  ],
-})
-```
-
-## Overwriting styles
-
-Since Fulldev UI uses just regular CSS with low specificity, you can customize anything else using custom CSS.

package/src/content/pages/schemas/page.mdx

@@ -1,17 +0,0 @@
----
-presets: [docs]
-
-title: page
----
-
-# page-schema
-
-Objects in the page schema are used to define the structure of a page. They are used to define the information, content and components that are used to render the page.
-
-import { Code } from 'astro:components'
-import { zodToTs, createTypeAlias, printNode } from 'zod-to-ts'
-import pageSchema from 'fulldev-ui/schemas/pageSchema'
-
-export const identifier = 'Page'
-export const node = zodToTs(pageSchema, identifier)
-export const typeAlias = createTypeAlias(node, identifier)

package/src/content/pages/schemas/preset.mdx

@@ -1,9 +0,0 @@
----
-presets: [docs]
-
-title: preset
----
-
-# preset-schema
-
-import { Code } from 'astro:components'

package/src/content/pages/showcase/record.md

@@ -1,3 +0,0 @@
----
-title: Test
----

package/src/content/pages/typography/heading.mdx

@@ -1,73 +0,0 @@
----
-presets: [docs]
-
-title: Heading
----
-
-# Heading
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading>The quick brown fox jumps</Heading>
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading level={1}>The quick brown fox jumps</Heading>
-<Heading level={2}>The quick brown fox jumps</Heading>
-<Heading level={3}>The quick brown fox jumps</Heading>
-<Heading level={4}>The quick brown fox jumps</Heading>
-<Heading level={5}>The quick brown fox jumps</Heading>
-<Heading level={6}>The quick brown fox jumps</Heading>
-```
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading size="sm">The quick brown fox jumps</Heading>
-<Heading size="md">The quick brown fox jumps</Heading>
-<Heading size="lg">The quick brown fox jumps</Heading>
-```
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading>The quick brown fox jumps</Heading>
-<Heading contrast={false}>The quick brown fox jumps</Heading>
-```
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading color="base">The quick brown fox jumps</Heading>
-<Heading color="brand">The quick brown fox jumps</Heading>
-```
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Heading contrast={false} color="base">The quick brown fox jumps</Heading>
-<Heading contrast={false} color="brand">The quick brown fox jumps</Heading>
-```

package/src/content/pages/typography/list.mdx

@@ -1,51 +0,0 @@
----
-presets: [docs]
-
-title: List
----
-
-# List
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import List from 'fulldev-ui/components/List.astro'
----
-
-<List items={['Item 1', 'Item 2']} />
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import List from 'fulldev-ui/components/List.astro'
----
-
-<List size="sm" items={['Item 1', 'Item 2']} />
-<List size="md" items={['Item 1', 'Item 2']} />
-<List size="lg" items={['Item 1', 'Item 2']} />
-```
-
-```astro live
----
-import List from 'fulldev-ui/components/List.astro'
----
-
-<List color="base" items={['Item 1', 'Item 2']} />
-<List color="brand" items={['Item 1', 'Item 2']} />
-```
-
-```astro live
----
-import List from 'fulldev-ui/components/List.astro'
----
-
-<List items={['Item 1', 'Item 2']} />
-<List contrast items={['Item 1', 'Item 2']} />
-```

package/src/content/pages/typography/text.mdx

@@ -1,61 +0,0 @@
----
-presets: [docs]
-
-title: Text
----
-
-# Text
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-
-```astro live
----
-import Text from 'fulldev-ui/components/Text.astro'
----
-
-<Text>The quick brown fox jumps over the lazy dog</Text>
-```
-
-## Props
-
-<PropsTable />
-
-## Examples
-
-```astro live
----
-import Text from 'fulldev-ui/components/Text.astro'
----
-
-<Text size="sm">The quick brown fox jumps over the lazy dog</Text>
-<Text size="md">The quick brown fox jumps over the lazy dog</Text>
-<Text size="lg">The quick brown fox jumps over the lazy dog</Text>
-```
-
-```astro live
----
-import Text from 'fulldev-ui/components/Text.astro'
----
-
-<Text lead size="sm">The quick brown fox jumps over the lazy dog</Text>
-<Text lead size="md">The quick brown fox jumps over the lazy dog</Text>
-<Text lead size="lg">The quick brown fox jumps over the lazy dog</Text>
-```
-
-```astro live
----
-import Text from 'fulldev-ui/components/Text.astro'
----
-
-<Text color="base">The quick brown fox jumps</Text>
-<Text color="brand">The quick brown fox jumps</Text>
-```
-
-```astro live
----
-import Text from 'fulldev-ui/components/Text.astro'
----
-
-<Text>The quick brown fox jumps</Text>
-<Text contrast>The quick brown fox jumps</Text>
-```

package/src/content/presets/blocks.yml

@@ -1 +0,0 @@
-component: BlockLayout

package/src/content/presets/docs.yml

@@ -1,6 +0,0 @@
-component: DocsLayout
-
-navigation:
-  sidebar: true
-  header: false
-  toc: 'On this page'

package/src/css/space.css

@@ -1,77 +0,0 @@
-.root + .root,
-.root + .box,
-.root + .masonry,
-.root + .carousel,
-.image + .root,
-.icon + .root {
-  --space-auto: var(--space-6);
-}
-
-.root + .group,
-.root + .row,
-.root + .wrap,
-.root + .button,
-.root + .price,
-.root + .switch {
-  --space-auto: var(--space-5);
-}
-
-.card
-  :is(
-    .root + .root,
-    .root + .box,
-    .root + .masonry,
-    .root + .carousel,
-    .image + .root,
-    .icon + .root,
-    .root + .group,
-    .root + .row,
-    .root + .wrap,
-    .root + .button,
-    .root + .price,
-    .root + .switch
-  ) {
-  --space-auto: var(--space-4);
-}
-
-.root + .heading,
-.root + .link,
-.root + .paragraph,
-.root + .text,
-.root + .tagline,
-.root + .input,
-.root + .textarea,
-.root + .select,
-.root + .badge,
-.root + .rating {
-  --space-auto: var(--space-4);
-}
-
-.paragraph + .paragraph,
-.text + .text,
-.button + .button,
-.input + .button {
-  --space-auto: var(--space-3);
-}
-
-.root + .label,
-.label + .input,
-.label + .textarea,
-.label + .select,
-.icon + .icon {
-  --space-auto: var(--space-2);
-}
-
-.rating + .text,
-.text + .rating {
-  --space-auto: var(--space-1);
-}
-
-.image + .root,
-.icon + .root {
-  --space-auto: var(--space-6);
-}
-
-.link + .heading {
-  --space-auto: var(--space-5);
-}

package/src/images/avatar-1.yml

@@ -1 +0,0 @@
-alt: worlddd