fulldev-ui 0.6.0-beta.7 → 0.6.0-beta.8

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

@@ -3,12 +3,8 @@ _layout: doc
 title: Menu
 ---
 
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
-import Card from 'fulldev-ui/components/Card.astro'
-
-# Menu
-
-<aside>This component is experimental and likely to change</aside>
+import Props from 'fulldev-ui/components/docs/Props.astro'
+import Card from 'fulldev-ui/structures/Card.astro'
 
 ```astro live
 ---
@@ -16,30 +12,18 @@ import Menu from 'fulldev-ui/components/Menu.astro'
 ---
 
 <Menu
-  groups={[
-    {
-      heading: 'First',
-      links: [
-        { text: 'First', href: '#' },
-        { text: 'Second', href: '#' },
-        { text: 'Third', href: '#' },
-      ],
-    },
-    {
-      heading: 'Second',
-      links: [
-        { text: 'First', href: '#' },
-        { text: 'Second', href: '#' },
-        { text: 'Third', href: '#' },
-      ],
-    },
+  heading="Heading"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
+    { text: 'Third', href: '#' },
   ]}
 />
 ```
 
 ## Props
 
-<PropsTable />
+<Props />
 
 ## Examples
 
@@ -52,38 +36,26 @@ import Menu from 'fulldev-ui/components/Menu.astro'
 
 <Menu
   size="sm"
-  groups={[
-    {
-      heading: 'First',
-      links: [
-        { text: 'First', href: '#' },
-        { text: 'Second', href: '#' },
-      ],
-    },
+  heading="First"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
   ]}
 />
 <Menu
   size="md"
-  groups={[
-    {
-      heading: 'First',
-      links: [
-        { text: 'First', href: '#' },
-        { text: 'Second', href: '#' },
-      ],
-    },
+  heading="First"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
   ]}
 />
 <Menu
   size="lg"
-  groups={[
-    {
-      heading: 'First',
-      links: [
-        { text: 'First', href: '#' },
-        { text: 'Second', href: '#' },
-      ],
-    },
+  heading="First"
+  links={[
+    { text: 'First', href: '#' },
+    { text: 'Second', href: '#' },
   ]}
 />
 ```

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

@@ -0,0 +1,44 @@
+---
+_layout: doc
+title: Paragraph
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+```astro live
+---
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+---
+
+<Paragraph>The quick brown fox jumps</Paragraph>
+```
+
+## Props
+
+<Props />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+---
+
+<Paragraph size="xl">The quick brown fox jumps</Paragraph>
+<Paragraph size="lg">The quick brown fox jumps</Paragraph>
+<Paragraph size="md">The quick brown fox jumps</Paragraph>
+<Paragraph size="sm">The quick brown fox jumps</Paragraph>
+<Paragraph size="xs">The quick brown fox jumps</Paragraph>
+```
+
+### `text`
+
+```astro live
+---
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+---
+
+<Paragraph text="The quick brown fox jumps" />
+```

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

@@ -3,47 +3,31 @@ _layout: doc
 title: Rating
 ---
 
-# Rating
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Props from 'fulldev-ui/components/docs/Props.astro'
 
 ```astro live
 ---
 import Rating from 'fulldev-ui/components/Rating.astro'
 ---
 
-<Rating avatar="avatar-1.jpeg" text="John Doe" value={4.5} />
+<Rating avatar="avatar-1.jpeg" text="John Doe" score={4.5} />
 ```
 
 ## Props
 
-<PropsTable />
+<Props />
 
 ## Examples
 
-### `avatars`
+### `score`
 
 ```astro live
 ---
 import Rating from 'fulldev-ui/components/Rating.astro'
 ---
 
-<Rating
-  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
-  text="4.92 out of 236 reviews"
-  value={4.92}
-/>
-```
-
-### `value`
-
-```astro live
----
-import Rating from 'fulldev-ui/components/Rating.astro'
----
-
-<Rating value={3} />
-<Rating value={5} />
+<Rating score={3} />
+<Rating score={5} />
 ```
 
 ### `size`
@@ -53,24 +37,7 @@ import Rating from 'fulldev-ui/components/Rating.astro'
 import Rating from 'fulldev-ui/components/Rating.astro'
 ---
 
-<Rating
-  size="sm"
-  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
-  text="4.92 out of 236 reviews"
-  value={4.92}
-/>
-
-<Rating
-  size="md"
-  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
-  text="4.92 out of 236 reviews"
-  value={4.92}
-/>
-
-<Rating
-  size="lg"
-  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
-  text="4.92 out of 236 reviews"
-  value={4.92}
-/>
+<Rating size="sm" score={4.92} />
+<Rating size="md" score={4.92} />
+<Rating size="lg" score={4.92} />
 ```

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

@@ -3,9 +3,7 @@ _layout: doc
 title: Select
 ---
 
-# Select
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Props from 'fulldev-ui/components/docs/Props.astro'
 
 ```astro live
 ---
@@ -21,7 +19,7 @@ import Select from 'fulldev-ui/components/Select.astro'
 
 ## Props
 
-<PropsTable />
+<Props />
 
 ## Examples
 

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

@@ -3,9 +3,7 @@ _layout: doc
 title: Social
 ---
 
-# Social
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Props from 'fulldev-ui/components/docs/Props.astro'
 
 ```astro live
 ---
@@ -17,7 +15,7 @@ import Social from 'fulldev-ui/components/Social.astro'
 
 ## Props
 
-<PropsTable />
+<Props />
 
 ## Examples
 

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

@@ -1,11 +1,12 @@
 ---
 _layout: doc
 title: Socials
+description: A utility component for displaying multiple socials.
 ---
 
 # Socials
 
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Props from 'fulldev-ui/components/docs/Props.astro'
 
 ```astro live
 ---
@@ -24,7 +25,7 @@ import Socials from 'fulldev-ui/components/Socials.astro'
 
 ## Props
 
-<PropsTable />
+<Props />
 
 ## Examples
 

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

@@ -3,9 +3,7 @@ _layout: doc
 title: Switch
 ---
 
-# Switch
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Props from 'fulldev-ui/components/docs/Props.astro'
 
 ```astro live
 ---
@@ -17,7 +15,7 @@ import Switch from 'fulldev-ui/components/Switch.astro'
 
 ## Props
 
-<PropsTable />
+<Props />
 
 ## Examples
 

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

@@ -3,11 +3,7 @@ _layout: doc
 title: Tagline
 ---
 
-# Tagline
-
-Text in primary color above a heading.
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Props from 'fulldev-ui/components/docs/Props.astro'
 
 ```astro live
 ---
@@ -19,7 +15,7 @@ import Tagline from 'fulldev-ui/components/Tagline.astro'
 
 ## Props
 
-<PropsTable />
+<Props />
 
 ## Examples
 

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

@@ -3,9 +3,7 @@ _layout: doc
 title: Textarea
 ---
 
-# Textarea
-
-import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+import Props from 'fulldev-ui/components/docs/Props.astro'
 
 ```astro live
 ---
@@ -17,7 +15,7 @@ import Textarea from 'fulldev-ui/components/Textarea.astro'
 
 ## Props
 
-<PropsTable />
+<Props />
 
 ## Examples
 

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

@@ -1,7 +1,6 @@
 ---
 _layout: doc
-title: Components
-description: Features shared across components.
+title: Using components
 ---
 
 ## Slots versus props
@@ -31,7 +30,7 @@ import Button from 'fulldev-ui/components/Button.astro'
 ---
 
 <Button text="With content" />
-<Button if={true} />
-<Button if={false} />
+<Button show={true} />
+<Button show={false} />
 <Button />
 ```

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

@@ -1,15 +1,14 @@
 ---
 _layout: doc
 title: Customization
+description: Customize styles and components.
 ---
 
-# Customization
+## Overriding styles
 
-Customize styles and components.
+While fulldev-ui outputs 100% vanilla CSS, it is also fully compatible with [TailwindCSS](https://tailwindcss.com/) and [Shadcn/ui](https://ui.shadcn.com/).
 
-## CSS Variables
-
-While outputting 100% vanilla CSS, the underlying theming variables are based on - and therefore fully compatible with - the popular [Shadcn/ui](https://ui.shadcn.com/).
+### Using CSS variables
 
 ###### Default colors for backgrounds and text
 
@@ -77,7 +76,7 @@ While outputting 100% vanilla CSS, the underlying theming variables are based on
 --radius: 0.5rem;
 ```
 
-### Dark mode
+#### Dark mode
 
 Dark mode colors can be customized by adding them within the `.dark` class:
 
@@ -91,17 +90,15 @@ Dark mode colors can be customized by adding them within the `.dark` class:
 }
 ```
 
-## Overwriting styles
+### 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`
-- `<Card panel={true}/>` or `<Card panel />` adds `.panel`
-
-### Using vanilla CSS
+- `<Heading muted/>` adds `.muted`
 
-Write your own CSS wihtin an Astro component, or anywhere else in your project.
+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.
 
@@ -113,22 +110,21 @@ import Button from 'fulldev-ui/components/Button.astro'
 <Button>Button</Button>
 <Button variant="secondary">Secondary</Button>
 
-<style>
+<style is:global>
   .button {
     border-radius: 999px;
 
     &.variant-secondary {
-      border: 1px solid rgba(0, 0, 0, 0.3);
+      border: 1px solid hsl(var(--primary));
+      background-color: transparent;
     }
   }
 </style>
 ```
 
-### Using Tailwind
-
-Using Tailwind is **completely optional**, but since all styles match Tailwind's utility values, they work seamlessly together.
+### Using Tailwind classes
 
-Tailwind is pre-installed, so your can use either classes or the `@apply` directive out of the box.
+Tailwind is pre-installed. You don't have to use it, but you can.
 
 ```astro live
 ---
@@ -136,16 +132,52 @@ 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>
 ```
 
-## Customizing components
+## 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',
+      },
+    }),
+  ],
+})
+```
 
-Components can be copied from the repository and customized, without breaking imports.
+Everywhere where the `Button` component is imported, the new component will be used instead.
 
-The repositiory is setup like a regular Astro project, so it easy to find your way around, as long as you have basic knowledge of Astro.
+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,18 +1,9 @@
 ---
 _layout: doc
-title: Frameworks
+title: Integrating frameworks
+description: Compatible with all JS and CSS frameworks.
 ---
 
-# Frameworks
-
-Compatible with Shadcn/ui and other frameworks.
-
-## 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.
-
 ## 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.
@@ -27,3 +18,13 @@ 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

@@ -8,13 +8,14 @@ description: Everything you need to rapidly build content-driven websites. Compo
 
 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.
 
-## What makes it special
+## Some features
 
-- Built entirely with `.astro` components
+- 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,14 +1,11 @@
 ---
 _layout: doc
 title: Installation
+description: How to install dependencies and setup the integration.
 ---
 
 import Link from 'fulldev-ui/components/Link.astro'
 
-# Installation
-
-How to install dependencies and setup the integration.
-
 ## Add to existing project
 
 If you don't have an existing project, you can create a new one using the [starter template](https://github.com/fulldotdev/starter).
@@ -23,10 +20,16 @@ npx astro add fulldev-ui
 
 ### Manual setup
 
-Run the following command to add fulldev-ui to your dependencies.
+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.
@@ -41,7 +44,7 @@ export default defineConfig({
 })
 ```
 
-## Create new project
+## Create a new project
 
 Run the following command to setup a new project from the [starter template](https://github.com/fulldotdev/starter).
 

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

@@ -0,0 +1,15 @@
+---
+_layout: doc
+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

@@ -0,0 +1,15 @@
+---
+_layout: doc
+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.