fulldev-ui 0.5.0-beta.8 → 0.6.0-beta.0

package/src/content/pages/{base → docs/components}/section.mdx

@@ -25,7 +25,7 @@ import Section from 'fulldev-ui/components/Section.astro'
       text: 'Installation',
       contrast: true,
     },
-    { variant: 'secondary', href: '/structure/split', text: 'Component' },
+    { variant: 'secondary', href: '#', text: 'Component' },
   ]}
   image={'/images/placeholder-landscape.webp'}
 />

package/src/content/pages/{base → docs/components}/select.mdx

@@ -47,12 +47,3 @@ import Select from 'fulldev-ui/components/Select.astro'
 <Select size="md" options={['Option 1', 'Option 2']} />
 <Select size="lg" options={['Option 1', 'Option 2']} />
 ```
-
-```astro live
----
-import Select from 'fulldev-ui/components/Select.astro'
----
-
-<Select color="base" options={['Option 1', 'Option 2']} />
-<Select color="brand" options={['Option 1', 'Option 2']} />
-```

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

@@ -0,0 +1,95 @@
+---
+presets: [docs]
+
+title: Social
+---
+
+# Social
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `href`
+
+If possible, the platform `icon` will be automatically set based on the `href`. The following platforms are supported:
+
+- X
+- Facebook
+- Instagram
+- LinkedIn
+- YouTube
+- TikTok
+- Twitch
+- GitHub
+- Discord
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" />
+<Social href="https://www.linkedin.com/in/silveltman/" />
+<Social href="https://discord.gg/vXZqMbadm8" />
+<Social href="https://github.com/fulldotdev/ui" />
+```
+
+### `icon`
+
+You can also manually set the `icon`, in which case this component behaves like a regular `<Button/>`.
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social icon="confetti" href="https://x.com/silveltm" />
+```
+
+### `variant`
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" variant="primary" />
+<Social href="https://x.com/silveltm" variant="secondary" />
+<Social href="https://x.com/silveltm" variant="outline" />
+<Social href="https://x.com/silveltm" variant="ghost" />
+```
+
+### `size`
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" size="sm">Small</Social>
+<Social href="https://x.com/silveltm" size="md">Medium</Social>
+<Social href="https://x.com/silveltm" size="lg">Large</Social>
+```
+
+### `text`
+
+```astro live
+---
+import Social from 'fulldev-ui/components/Social.astro'
+---
+
+<Social href="https://x.com/silveltm" text="Follow" />
+```

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

@@ -0,0 +1,103 @@
+---
+presets: [docs]
+
+title: Socials
+---
+
+# Socials
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Socials from 'fulldev-ui/components/Socials.astro'
+---
+
+<Socials
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+    'https://discord.gg/vXZqMbadm8',
+    'https://github.com/fulldotdev/ui',
+  ]}
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Socials from 'fulldev-ui/components/Socials.astro'
+---
+
+<Socials
+  variant="primary"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+    'https://discord.gg/vXZqMbadm8',
+    'https://github.com/fulldotdev/ui',
+  ]}
+/>
+
+<Socials
+  variant="secondary"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+    'https://discord.gg/vXZqMbadm8',
+    'https://github.com/fulldotdev/ui',
+  ]}
+/>
+
+<Socials
+  variant="outline"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+    'https://discord.gg/vXZqMbadm8',
+    'https://github.com/fulldotdev/ui',
+  ]}
+/>
+```
+
+### `size`
+
+```astro live
+---
+import Socials from 'fulldev-ui/components/Socials.astro'
+---
+
+<Socials
+  variant="secondary"
+  size="sm"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+  ]}
+/>
+
+<Socials
+  variant="secondary"
+  size="md"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+  ]}
+/>
+
+<Socials
+  variant="secondary"
+  size="lg"
+  socials={[
+    'https://x.com/silveltm',
+    'https://www.linkedin.com/in/silveltman/',
+  ]}
+/>
+```

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

@@ -0,0 +1,35 @@
+---
+presets: [docs]
+
+title: Switch
+---
+
+# Switch
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Switch from 'fulldev-ui/components/Switch.astro'
+---
+
+<Switch label="Switch" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Switch from 'fulldev-ui/components/Switch.astro'
+---
+
+<Switch size="sm" label="Small" />
+<Switch size="md" label="Medium" />
+<Switch size="lg" label="Large" />
+```

package/src/content/pages/{base → docs/components}/table.mdx

@@ -50,7 +50,6 @@ import Table from 'fulldev-ui/components/Table.astro'
 ---
 
 <Table
-  color="base"
   header={['Product', 'Quantity']}
   body={[
     ['Apple', '2'],
@@ -60,7 +59,6 @@ import Table from 'fulldev-ui/components/Table.astro'
 />
 
 <Table
-  color="brand"
   header={['Product', 'Quantity']}
   body={[
     ['Apple', '2'],

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

@@ -0,0 +1,47 @@
+---
+presets: [docs]
+
+title: Tagline
+---
+
+# Tagline
+
+Text in primary color above a heading.
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+---
+
+<Tagline>Tagline</Tagline>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+---
+
+<Tagline size="sm">Small</Tagline>
+<Tagline size="md">Medium</Tagline>
+<Tagline size="lg">Large</Tagline>
+```
+
+### `text`
+
+```astro live
+---
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+---
+
+<Tagline text="Tagline" />
+```

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

@@ -0,0 +1,35 @@
+---
+presets: [docs]
+
+title: Textarea
+---
+
+# Textarea
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea label="Message" name="message" placeholder="Enter your message.." />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `size`
+
+```astro live
+---
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+---
+
+<Textarea size="sm" label="Small" />
+<Textarea size="md" label="Medium" />
+<Textarea size="lg" label="Large" />
+```

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

@@ -0,0 +1,50 @@
+---
+presets: [docs]
+
+title: Themer
+---
+
+# Themer
+
+<aside>This component is experimental and likely to change</aside>
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Themer from 'fulldev-ui/components/Themer.astro'
+---
+
+<Themer />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+### `variant`
+
+```astro live
+---
+import Themer from 'fulldev-ui/components/Themer.astro'
+---
+
+<Themer variant="primary" />
+<Themer variant="secondary" />
+<Themer variant="outline" />
+<Themer variant="ghost" />
+```
+
+### `size`
+
+```astro live
+---
+import Themer from 'fulldev-ui/components/Themer.astro'
+---
+
+<Themer size="sm" />
+<Themer size="md" />
+<Themer size="lg" />
+```

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

@@ -0,0 +1,40 @@
+---
+presets: [docs]
+title: Components
+---
+
+# Components
+
+Features shared across components.
+
+## Slots versus props
+
+You can use either slots or props. Props are recommended as they are type safe and work better in combination with content collections.
+
+Though, the following examples do the same thing.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button href="#">Click me</Button>
+<Button href="#" text="Click me" />
+```
+
+## Conditional rendering
+
+By default, if no content is passed to a component, it will **NOT** render anything. This helps optimize your code, especially when working with content collections.
+
+You can override this default behavior using the `if` prop, which lets you control component rendering based on a truthy or falsy value.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button text="With content" />
+<Button if={true} />
+<Button if={false} />
+<Button />
+```

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

@@ -0,0 +1,151 @@
+---
+presets: [docs]
+title: Customization
+---
+
+# Customization
+
+Customize styles and components.
+
+## 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/).
+
+###### 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 */
+}
+```
+
+## Overwriting styles
+
+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
+
+Write your own CSS wihtin an Astro component, or anywhere else in your project.
+
+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>
+  .button {
+    border-radius: 999px;
+
+    &.variant-secondary {
+      border: 1px solid rgba(0, 0, 0, 0.3);
+    }
+  }
+</style>
+```
+
+### Using Tailwind
+
+Using Tailwind is **completely optional**, but since all styles match Tailwind's utility values, they work seamlessly together.
+
+Tailwind is pre-installed, so your can use either classes or the `@apply` directive out of the box.
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button class="rounded-full">Button</Button>
+
+<style>
+  .button {
+    @apply rounded-full;
+  }
+</style>
+```
+
+## Customizing components
+
+Components can be copied from the repository and customized, without breaking imports.
+
+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.

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

@@ -0,0 +1,29 @@
+---
+presets: [docs]
+title: 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.
+
+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>
+```