fulldev-ui 0.6.4 → 0.7.0-beta.1

package/src/content/pages/docs/customization.mdx

@@ -1,183 +0,0 @@
----
-_block: Content7
-title: Customization
-description: Customize styles and components.
----
-
-## Overriding styles
-
-While fulldev-ui outputs 100% vanilla CSS, it is also fully compatible with [TailwindCSS](https://tailwindcss.com/) and [Shadcn/ui](https://ui.shadcn.com/).
-
-### Using CSS variables
-
-###### Default colors for backgrounds and text
-
-```
---background: 0 0% 100%;
---foreground: 222.2 47.4% 11.2%;
-```
-
-###### Used for muted backgrounds and text
-
-```
---muted: 210 40% 96.1%;
---muted-foreground: 215.4 16.3% 46.9%;
-```
-
-###### Used for `<Card/>` and other panels
-
-```
---card: 0 0% 100%;
---card-foreground: 222.2 47.4% 11.2%;
-```
-
-###### Default border color
-
-```
---border: 214.3 31.8% 91.4%;
-```
-
-###### Border color for inputs such as `<Input />`, `<Select />`, `<Textarea />`
-
-```
---input: 214.3 31.8% 91.4%;
-```
-
-###### Primary colors for `<Button/>`
-
-```
---primary: 222.2 47.4% 11.2%;
---primary-foreground: 210 40% 98%;
-```
-
-###### Secondary colors for `<Button/>`
-
-```
---secondary: 210 40% 96.1%;
---secondary-foreground: 222.2 47.4% 11.2%;
-```
-
-###### Accent colors ghost and outline `<Button/>`
-
-```
---accent: 210 40% 96.1%;
---accent-foreground: 222.2 47.4% 11.2%;
-```
-
-###### Used for focus ring
-
-```
---ring: 215 20.2% 65.1%;
-```
-
-###### Border radius for cards, panels, input and buttons
-
-```
---radius: 0.5rem;
-```
-
-#### Dark mode
-
-Dark mode colors can be customized by adding them within the `.dark` class:
-
-```css
-:root {
-  /* Regular color go here */
-}
-
-.dark {
-  /* Dark mode colors go here */
-}
-```
-
-### Using vanilla CSS
-
-Components use simple CSS classes that match their names. For example:
-
-- `<Button/>` uses the class `.button`
-- `<Button variant="secondary"/>` adds `.variant-secondary`
-- `<Heading muted/>` adds `.muted`
-
-You can then simply override the styles in your own CSS file like this:
-
-The plugin [postcss-nesting](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting) is pre-installed so you can use the `&` operator to nest your styles.
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button>Button</Button>
-<Button variant="secondary">Secondary</Button>
-
-<style is:global>
-  .button {
-    border-radius: 999px;
-
-    &.variant-secondary {
-      border: 1px solid hsl(var(--primary));
-      background-color: transparent;
-    }
-  }
-</style>
-```
-
-### Using Tailwind classes
-
-Tailwind is pre-installed. You don't have to use it, but you can.
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button class="rounded-full">Button</Button>
-<Button variant="secondary" class="border border-primary bg-transparent">
-  Secondary
-</Button>
-```
-
-### Using Tailwind @apply
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button>Button</Button>
-<Button variant="secondary"> Secondary </Button>
-
-<style>
-  .button {
-    @apply rounded-full;
-
-    &.variant-secondary {
-      @apply border border-primary bg-transparent;
-    }
-  }
-</style>
-```
-
-## Overriding components
-
-All components can be overridden by defining a new path in the integration:
-
-```ts
-// astro.config.ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-export default defineConfig({
-  integrations: [
-    fulldev({
-      override: {
-        Button: 'src/components/Button.astro',
-      },
-    }),
-  ],
-})
-```
-
-Everywhere where the `Button` component is imported, the new component will be used instead.
-
-This not only works for .astro files, but for all files in the entire library. Please check the [repository](https://github.com/fulldotdev/ui) to see what you can override.

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

@@ -1,30 +0,0 @@
----
-_block: Content7
-title: Integrating frameworks
-description: Compatible with all JS and CSS frameworks.
----
-
-## Svelte, Vue React, etc.
-
-While fulldev-ui is built with Tailwind CSS internally, all styles are converted to regular CSS classes using the `@apply` directive. This means all component styles are available globally through standard CSS classes.
-
-You can use these component classes (like `button`, `variant-primary`, etc.) directly in any framework (Svelte, Vue, React, and all other frameworks), similar to how you would use other CSS frameworks like DaisyUI.
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<button class="button size-md variant-primary">Button</button>
-<Button>Button</Button>
-```
-
-## Shadcn/ui
-
-As detailed in the [customization documentation](/overview/customization/), Fulldev UI shares the same styling variables as Shadcn/ui, ensuring complete compatibility between the two libraries.
-
-This means you can seamlessly integrate Shadcn/ui components alongside Fulldev UI components while maintaining consistent styling and behavior.
-
-## TailwindCSS
-
-TailwindCSS comes pre-installed. You don't have to use it, but you can if you want to.

package/src/content/pages/docs/index.mdx

@@ -1,21 +0,0 @@
----
-_block: Content7
-title: Introduction
-description: Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.
----
-
-## Why we built it
-
-After repeatedly encountering the same challenges in [our company's](https://full.dev) client projects, we decided to build this library. After successfully using it in production websites, we decided to open-source it to help others facing similar problems.
-
-## Some features
-
-- Built entirely with Astro components
-- Outputs vanilla CSS, html and minimal JavaScript
-- Compatible with all JS frameworks
-- Compatible with Tailwind and Shadcn/ui
-- Integrates with [content collections](https://docs.astro.build/en/guides/content-collections/)
-- Blocks included, like Hero, CTA and Features
-- Layouts included, like Docs, Post and Product
-- Automatically generated pages
-- And more...

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

@@ -1,30 +0,0 @@
----
-_block: Content7
-title: Installation
----
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-Run any of the following commands to add fulldev-ui to your dependencies.
-
-```bash
-npm i fulldev-ui
-# or
-pnpm i fulldev-ui
-# or
-yarn add fulldev-ui
-# or
-bun add fulldev-ui
-```
-
-Add the integration to your `astro.config.ts` file.
-
-```ts
-// astro.config.ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-export default defineConfig({
-  integrations: [fulldev()],
-})
-```

package/src/content/pages/docs/layouts/doc.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Doc
-description: For documentation pages, just like this one.
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please try it in your own project for now.

package/src/content/pages/docs/layouts/page.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Page
-description: For marketing pages, just like the home page.
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please try it in your own project for now.

package/src/content/pages/docs/pages.mdx

@@ -1,130 +0,0 @@
----
-_block: Content7
-title: Generating Pages
-description: Go a step further than just using components.
----
-
-import Link from 'fulldev-ui/components/Link.astro'
-
-# Generating Pages
-
-With our integration, you can generate pages using content files with type-safe frontmatter, minimal configuration, and an easy-to-understand project structure.
-
-## Starter Template
-
-This is the recommended way to get started with our content layer integration. We've created a <Link href="https://github.com/fulldotdev/starter/tree/main">starter template</Link> with examples of everything you need to get started. This instantly gives you access to generating pages, using presets, internationalization and more without any additional setup.
-
-```bash
-pnpm create astro@latest -- --template fulldotdev/starter
-```
-
-## Manual Setup
-
-To get started with the manual setup, you need to install the <Link href="/overview/installation/">integration</Link> and add `injectRoutes: true` to your `astro.config.ts` file, see <Link href="#type-safe-frontmatter">frontmatter</Link> below for more information on how this generates a site using content files.
-
-```ts
-import { defineConfig } from 'astro/config'
-import fulldev from 'fulldev-ui/integration'
-
-// https://astro.build/config
-export default defineConfig({
-  integrations: [
-    fulldev({
-      // other options
-      injectRoutes: true,
-    }),
-  ],
-})
-```
-
-`injectRoutes` reads your content files and generates routes for them in the generated site. Supporting file types like markdown and MDX.
-
-## Project Structure
-
-To start with, your project structure should look like this:
-
-```md
-.
-├── src/
-│ ├── blocks/
-│ │ └── ...
-│ ├── components/
-│ │ └── ...
-│ ├── layouts/
-│ │ └── ...
-│ ├── images/
-│ │ └── ...
-│ ├── content/
-│ │ ├── pages/
-│ │ │ └── ...
-│ │ ├── presets/
-│ │ │ ├── base.yml
-│ │ │ └── ...
-│ │ └── ...
-│ ├── css/
-│ │ ├── custom.css
-│ │ └── ...
-├── public/
-│ └── ...
-└──
-```
-
-## Creating a page
-
-Creating a page is as simple as creating a new file in the **src/content/pages** directory.
-
-For example,
-
-- **src/content/pages/index.mdx** will be the root of your site.
-- **src/content/pages/about.mdx** will appear at /about.
-- **src/content/pages/team/first-name.mdx** will appear at /team/first-name.
-
-### Using presets
-
-Presets are a way to apply a set of configurations to a page. This can be apply navigation settings, seo and more.
-
-To learn more about presets, see the <Link href="/guides/using-presets/">using presets</Link> guide.
-
-### Using layouts
-
-Layouts are a way to apply styles to a page. Used for having multiple layouts like a blog layout, documentation layout, etc.
-
-To learn more about layouts, see the <Link href="/guides/using-layouts/">using layouts</Link> guide.
-
-### Frontmatter
-
-Each file has a few frontmatter objects that are important to know about. The frontmatter is fully type-safe, so you will know if you use an unavailable option or mistype something. SEO has priority over title and description, however title and description are used in multiple places like cards so they remain important.
-
-```yml
----
-preset: [docs]
-component: DocsLayout
-
-seo:
-  title: Page Title
-  description: This is my page description
-  image: /image.jpg # Open Graph Image
-
-# Information on the page, this is used in places like card, sidebar, etc.
-title: Page Title
-description: This is my page description
-
-sections: # Here you generate the page by adding a component and passing props
-  - component: Hero
-    heading: Page Title
-    text: This is my page description
-    buttons:
-      - text: Button
-        color: brand
-        href: /
-      - text: Button
-        href: /
----
-# This is the prose, you can use markdown here, typically used for blogs, docs, etc.
-```
-
-For all objects avaliable in the frontmatter, see the <Link href="https://ui.full.dev/content-collections/pages/">pages collection</Link>.
-
-## Using custom components
-
-You can use custom components simply creating them in the **src/components**, **src/blocks** or **src/layouts** directory. You can then use those in the component property of the frontmatter. If you want to override a component from the library, see the [overriding components](/guides/overriding-components/) guide.

package/src/content/pages/docs/structures/_card.mdx

@@ -1,84 +0,0 @@
----
-_block: Content7
-title: Card
----
-
-# Card
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-```astro live
----
-import Card from 'fulldev-ui/structures/Card.astro'
----
-
-<Card
-  heading="Lorem ipsum dolor"
-  paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-```
-
-## Props
-
-<Props />
-
-## Examples
-
-```astro live
----
-import Card from 'fulldev-ui/structures/Card.astro'
----
-
-<Card
-  size="sm"
-  heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-
-<Card
-  panel={false}
-  size="sm"
-  heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-```
-
-```astro live
----
-import Card from 'fulldev-ui/structures/Card.astro'
----
-
-<Card
-  size="sm"
-  heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-
-<Card
-  size="md"
-  heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-
-<Card
-  size="lg"
-  heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-```
-
-```astro live
----
-import Card from 'fulldev-ui/structures/Card.astro'
----
-
-<Card
-  heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-
-<Card
-  heading="Lorem ipsum dolor"
-  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-/>
-```

package/src/content/pages/docs/structures/_dialog.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Dialog
----
-
-```astro live
----
-import Dialog from 'fulldev-ui/components/Dialog.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
----
-
-<Dialog label="Open Dialog">
-  <Heading>Hello, World!</Heading>
-</Dialog>
-```

package/src/content/pages/docs/structures/_drawer.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Drawer
----
-
-```astro live
----
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Drawer from 'fulldev-ui/structures/Drawer.astro'
----
-
-<Drawer label="Open Drawer">
-  <Heading>Hello, World!</Heading>
-</Drawer>
-```

package/src/content/pages/docs/structures/card.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Card
-description: A box with a border, padding and rounded corners
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/carousel.mdx

@@ -1,14 +0,0 @@
----
-_block: Content7
-title: Carousel
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/code.mdx

@@ -1,42 +0,0 @@
----
-_block: Content7
-title: Code
-description: Enhanced code component with live preview.
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-import Code from 'fulldev-ui/structures/Code.astro'
-
-```astro live
-<h1>I'm a live preview</h1>
-```
-
-## Usage in html
-
-Use it in the same way as the native Astro `<Code/>` component, which is documented [here](https://docs.astro.build/en/reference/components-reference/#code-).
-
-The following code will translate to the example at the top of this page:
-
-```astro
----
-import Code from 'fulldev-ui/structures/Code.astro'
----
-
-<Code code={`<h1>I'm a live preview</h1>`} />
-```
-
-Will render as:
-
-<Code code={`<h1>I'm a live preview</h1>`} />
-
-## Usage in markdown
-
-Thanks to [this great plugin](https://github.com/mattjennings/astro-live-code) you can also use it directly in markdown files.
-
-The following code will translate to the example at the top of this page:
-
-````html
-```astro live
-<h1>I'm a live preview</h1>
-```
-````

package/src/content/pages/docs/structures/container.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Container
-description: Sets a max-width, padding and centers the content
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/drawer.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Drawer
-description: A panel that slides out from the side of the screen
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the Header blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/group.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Group
-description: Group buttons and similar components
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the blocks for examples on how to use the wrapper components.

package/src/content/pages/docs/structures/layout.mdx

@@ -1,15 +0,0 @@
----
-_block: Content7
-title: Container
-description: Sets a head, body and some base styles
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-## Props
-
-<Props />
-
-## Examples
-
-Please reference the layouts for examples on how to use the wrapper components.