fulldev-ui 0.4.28 → 0.5.0-beta.0

package/src/components/experimental/Prose.astro

@@ -1,19 +1,19 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types'
-import Root from 'fulldev-ui/components/Root.astro'
+import Element from 'fulldev-ui/components/Element.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }>
 
 const { as = 'div', ...rest } = Astro.props
 ---
 
-<Root
+<Element
   class:list="prose"
   {as}
   {...rest}
 >
   <slot />
-</Root>
+</Element>
 
 <style is:global lang="scss">
   @layer fulldev {
@@ -21,10 +21,8 @@ const { as = 'div', ...rest } = Astro.props
       width: 100%;
       scroll-margin-top: var(--space-6);
       color: var(--color-11);
-      font-weight: var(--font-weight);
       font-size: var(--text-3);
       line-height: 1.7;
-      font-family: var(--font-family);
 
       > {
         .astro-code,
@@ -152,5 +150,11 @@ const { as = 'div', ...rest } = Astro.props
         text-decoration: underline;
       }
     }
+
+    p code {
+      background-color: var(--base-12);
+      padding: 0 var(--space-1);
+      color: var(--base-1);
+    }
   }
 </style>

package/src/components/experimental/Video.astro

@@ -2,7 +2,7 @@
 // 
 type Props = any & {
   src: string
-  thumbnail?: string
+  thumbnail?: string | undefined
 }
 
 const { src, thumbnail } = Astro.props

package/src/components/experimental/Window.astro

@@ -28,7 +28,6 @@ const isComponent =
     <div class="block window">
       <div class="button-header">
         <Button
-          as="label"
           for={id}
           variant="secondary"
         >
@@ -64,7 +63,7 @@ const isComponent =
 
         .astro-code {
           margin: 0;
-          background-color: var(--base-2) !important;
+          background-color: #191919 !important;
           padding: var(--space-5);
         }
       }
@@ -88,8 +87,8 @@ const isComponent =
           border-radius: 0px;
 
           .astro-code {
-            border: none;
-            border-radius: 0px;
+            border: none !important;
+            border-radius: 0px !important;
           }
         }
       }

package/src/components/sections.astro

@@ -0,0 +1,28 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import type { GlobalProps } from 'fulldev-ui/types/global-props'
+import Section from './Section.astro'
+
+interface Props extends GlobalProps, HTMLAttributes<'div'> {
+  sections?: ComponentProps<typeof Section>[] | undefined
+}
+
+const { sections, ...rest } = Astro.props
+---
+
+<Element
+  class:list="sections"
+  {...rest}
+>
+  {sections?.map((section) => <Section {...section} />)}
+</Element>
+
+<style is:global lang="scss">
+  @layer fulldev {
+    .sections {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+</style>

package/src/content/config.ts

@@ -1,17 +1,20 @@
 import { defineCollection } from 'astro:content'
-import { page } from 'fulldev-ui/schemas/page'
+import imageLoader from 'fulldev-ui/loaders/imageLoader.ts'
+import imageSchema from 'fulldev-ui/schemas/imageSchema.ts'
+import pageSchema from 'fulldev-ui/schemas/pageSchema.ts'
+import presetSchema from 'fulldev-ui/schemas/presetSchema.ts'
 
 export const collections = {
   pages: defineCollection({
     type: 'content',
-    schema: page,
+    schema: pageSchema,
   }),
-  records: defineCollection({
+  presets: defineCollection({
     type: 'data',
-    schema: page,
+    schema: presetSchema,
   }),
-  settings: defineCollection({
-    type: 'data',
-    schema: page,
+  images: defineCollection({
+    loader: imageLoader,
+    schema: imageSchema,
   }),
 }

package/src/content/pages/base/_dialog.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Dialog
 ---

package/src/content/pages/base/_drawer.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Drawer
 ---

package/src/content/pages/base/_localeswitcher.mdx

@@ -0,0 +1,17 @@
+---
+presets: [docs]
+
+title: LocaleSwitcher
+---
+
+# Theme Switcher
+
+```astro live
+---
+import LocaleSwitcher from 'fulldev-ui/components/LocaleSwitcher.astro'
+---
+
+<LocaleSwitcher />
+```
+
+## Props

package/src/content/pages/base/_switch.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Switch
 ---

package/src/content/pages/base/badge.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Badge
 ---
@@ -56,15 +55,5 @@ import Badge from 'fulldev-ui/components/Badge.astro'
 import Badge from 'fulldev-ui/components/Badge.astro'
 ---
 
-<Badge radius="none">Badge</Badge>
-<Badge radius="auto">Badge</Badge>
-<Badge radius="full">Badge</Badge>
-```
-
-```astro live
----
-import Badge from 'fulldev-ui/components/Badge.astro'
----
-
 <Badge icon="circle" text="Badge" />
 ```

package/src/content/pages/base/button.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Button
 ---
@@ -59,13 +58,3 @@ import Button from 'fulldev-ui/components/Button.astro'
 <Button color="base" text="Button" />
 <Button color="brand" text="Button" />
 ```
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
----
-
-<Button radius="none" text="Button" />
-<Button radius="auto" text="Button" />
-<Button radius="full" text="Button" />
-```

package/src/content/pages/base/card.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Card
 ---
@@ -32,14 +31,13 @@ import Card from 'fulldev-ui/components/Card.astro'
 ---
 
 <Card
-  frame="panel"
   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
-  frame="fill"
+  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."
@@ -52,21 +50,18 @@ import Card from 'fulldev-ui/components/Card.astro'
 ---
 
 <Card
-  frame="panel"
   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
-  frame="panel"
   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
-  frame="panel"
   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."
@@ -79,36 +74,14 @@ import Card from 'fulldev-ui/components/Card.astro'
 ---
 
 <Card
-  frame="panel"
   color="base"
   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
-  frame="panel"
   color="brand"
   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/components/Card.astro'
----
-
-<Card
-  frame="panel"
-  radius="none"
-  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
-  frame="panel"
-  radius="auto"
-  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/base/checkbox.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Checkbox
 ---
@@ -20,7 +19,7 @@ import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 ---
 
-<Checkbox label="Label" name="checkbox" color="base" />
+<Checkbox label="My Checkbox" color="base" />
 ```
 
 ```astro live
@@ -28,8 +27,8 @@ import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 ---
 
-<Checkbox name="checkbox" label="Base" color="base" />
-<Checkbox name="checkbox" label="Brand" color="brand" />
+<Checkbox label="Base" color="base" />
+<Checkbox label="Brand" color="brand" />
 ```
 
 ```astro live
@@ -37,7 +36,7 @@ import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 import Checkbox from 'fulldev-ui/components/Checkbox.astro'
 ---
 
-<Checkbox name="checkbox" size="sm" />
-<Checkbox name="checkbox" size="md" />
-<Checkbox name="checkbox" size="lg" />
+<Checkbox label="Small" size="sm" />
+<Checkbox label="Medium" size="md" />
+<Checkbox label="Large" size="lg" />
 ```

package/src/content/pages/base/icon.mdx

@@ -1,12 +1,13 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Icon
 ---
 
 # Icon
 
+We use [Tabler Icons](https://tablericons.com/) under the hood, you can use any of those icons by having the `name` prop match one of the icon names.
+
 ```astro live
 ---
 import Icon from 'fulldev-ui/components/Icon.astro'

package/src/content/pages/base/image.mdx

@@ -0,0 +1,42 @@
+---
+presets: [docs]
+
+title: Image
+---
+
+# Image
+
+import Link from 'fulldev-ui/components/Link.astro'
+
+To use content collections for alt texts, see <Link href="/overview/content-layer/#image-alt-collections">generateImageEntries</Link>.
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Image from 'fulldev-ui/components/Image.astro'
+---
+
+<Image src="placeholder-landscape.webp" />
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Image from 'fulldev-ui/components/Image.astro'
+---
+
+{/* image in public/images/ */}
+<Image src="/images/placeholder-landscape.webp" />
+
+{/* optimized image in public/images/ using astro:assets */}
+<Image src="/images/placeholder-landscape.webp" width={600} height={400} />
+
+{/* automatically optimized image in src/images/ using astro:assets */}
+<Image src="placeholder-landscape.webp" />
+```

package/src/content/pages/base/input.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Input
 ---
@@ -55,13 +54,3 @@ import Input from 'fulldev-ui/components/Input.astro'
 <Input color="base" name="name" />
 <Input color="brand" name="name" />
 ```
-
-```astro live
----
-import Input from 'fulldev-ui/components/Input.astro'
----
-
-<Input radius="none" name="name" />
-<Input radius="auto" name="name" />
-<Input radius="full" name="name" />
-```

package/src/content/pages/base/rating.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Rating
 ---
@@ -14,12 +13,7 @@ import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 import Rating from 'fulldev-ui/components/Rating.astro'
 ---
 
-<Rating
-  avatar="/images/avatars/1.jpeg"
-  label="John Doe"
-  value={4}
-  color="brand"
-/>
+<Rating avatar="avatar-1.jpeg" label="John Doe" value={4} color="brand" />
 ```
 
 ## Props
@@ -34,12 +28,7 @@ import Rating from 'fulldev-ui/components/Rating.astro'
 ---
 
 <Rating
-  avatars={[
-    '/images/avatars/1.jpeg',
-    '/images/avatars/2.jpeg',
-    '/images/avatars/3.jpeg',
-    '/images/avatars/4.jpeg',
-  ]}
+  avatars={['avatar-1.jpeg', 'avatar-2.jpeg', 'avatar-3.jpeg', 'avatar-4.jpeg']}
   label="5.0 out of 86 reviews"
   value={5}
   color="brand"

package/src/content/pages/base/section.mdx

@@ -1,79 +1,36 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Section
 ---
 
 # Section
 
+Please see the [blocks page](/blocks) for more examples, since they are built using sections.
+
 import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
 
 ```astro live
 ---
-import Button from 'fulldev-ui/components/Button.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Image from 'fulldev-ui/components/Image.astro'
-import Row from 'fulldev-ui/components/Row.astro'
 import Section from 'fulldev-ui/components/Section.astro'
-import Text from 'fulldev-ui/components/Text.astro'
 ---
 
-<Section>
-  <Heading> A section with equal columns </Heading>
-  <Text>
-    On mobile it's a single column, of course. All without having to think about
-    responsiveness. It just works. Have a look at the code, it's down below.
-  </Text>
-  <Row>
-    <Button href="/overview/installation">Installation</Button>
-    <Button variant="soft" href="/structure/split"> Component </Button>
-  </Row>
-  <Image src="/images/placeholder-landscape.webp" />
-</Section>
+<Section
+  heading="A section with equal columns"
+  text="On mobile it's a single column, of course. All without having to think about responsiveness. It just works. Have a look at the code, it's down below."
+  buttons={[
+    {
+      variant: 'primary',
+      href: '/overview/installation',
+      text: 'Installation',
+      contrast: true,
+    },
+    { variant: 'secondary', href: '/structure/split', text: 'Component' },
+  ]}
+  image={'/images/placeholder-landscape.webp'}
+/>
 ```
 
 ## Props
 
 <PropsTable />
-
-## Examples
-
-```astro live
----
-import Button from 'fulldev-ui/components/Button.astro'
-import Heading from 'fulldev-ui/components/Heading.astro'
-import Section from 'fulldev-ui/components/Section.astro'
-import Text from 'fulldev-ui/components/Text.astro'
----
-
-<Section variant="ghost" frame="panel">
-  <Heading> A section with a ghost variant </Heading>
-  <Text> This section has a ghost variant. </Text>
-  <Button> Button </Button>
-</Section>
-
-<Section variant="subtle" frame="panel">
-  <Heading> A section with a subtle variant </Heading>
-  <Text> This section has a subtle variant. </Text>
-  <Button> Button </Button>
-</Section>
-
-<Section variant="outline" frame="panel">
-  <Heading> A section with an outline variant </Heading>
-  <Text> This section has an outline variant. </Text>
-  <Button> Button </Button>
-</Section>
-
-<Section variant="soft" frame="panel">
-  <Heading> A section with a soft variant </Heading>
-  <Text> This section has a soft variant. </Text>
-  <Button> Button </Button>
-</Section>
-
-<Section variant="surface" frame="panel">
-  <Heading> A section with a surface variant </Heading>
-  <Text> This section has a surface variant. </Text>
-  <Button> Button </Button>
-</Section>
-```

package/src/content/pages/base/select.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Select
 
@@ -65,13 +64,3 @@ import Select from 'fulldev-ui/components/Select.astro'
 <Select color="base" options={['Option 1', 'Option 2']} />
 <Select color="brand" options={['Option 1', 'Option 2']} />
 ```
-
-```astro live
----
-import Select from 'fulldev-ui/components/Select.astro'
----
-
-<Select radius="none" options={['Option 1', 'Option 2']} />
-<Select radius="auto" options={['Option 1', 'Option 2']} />
-<Select radius="full" options={['Option 1', 'Option 2']} />
-```

package/src/content/pages/base/table.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Table
 ---
@@ -105,29 +104,3 @@ import Table from 'fulldev-ui/components/Table.astro'
   footer={['Total', '5']}
 />
 ```
-
-```astro live
----
-import Table from 'fulldev-ui/components/Table.astro'
----
-
-<Table
-  radius="none"
-  header={['Product', 'Quantity']}
-  body={[
-    ['Apple', '2'],
-    ['Banana', '3'],
-  ]}
-  footer={['Total', '5']}
-/>
-
-<Table
-  radius="auto"
-  header={['Product', 'Quantity']}
-  body={[
-    ['Apple', '2'],
-    ['Banana', '3'],
-  ]}
-  footer={['Total', '5']}
-/>
-```

package/src/content/pages/base/textarea.mdx

@@ -1,6 +1,5 @@
 ---
-_layout: ComponentLayout
-settings: components
+presets: [docs]
 
 title: Textarea
 
@@ -62,12 +61,3 @@ import Textarea from 'fulldev-ui/components/Textarea.astro'
 <Textarea color="base" name="message" placeholder="name" />
 <Textarea color="brand" name="message" placeholder="name" />
 ```
-
-```astro live
----
-import Textarea from 'fulldev-ui/components/Textarea.astro'
----
-
-<Textarea radius="none" name="message" placeholder="name" />
-<Textarea radius="auto" name="message" placeholder="name" />
-```

package/src/content/pages/base/theme-select.mdx

@@ -0,0 +1,15 @@
+---
+presets: [docs]
+
+title: ThemeSelect
+---
+
+# ThemeSelect
+
+```astro live
+---
+import ThemeSelect from 'fulldev-ui/components/ThemeSelect.astro'
+---
+
+<ThemeSelect />
+```