fulldev-ui 0.3.36 → 0.4.0-beta.0

package/src/content/pages/_segment/header.mdx

@@ -0,0 +1,210 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Header
+---
+
+# Header
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Header from 'fulldev-ui/components/Header.astro'
+---
+
+<Header
+  heading="Fulldev UI"
+  buttons={[
+    {
+      variant: 'ghost',
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+  ]}
+  frame="fill"
+  position="relative"
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Header from 'fulldev-ui/components/Header.astro'
+---
+
+<Header
+  heading="Fulldev UI"
+  buttons={[
+    {
+      variant: 'ghost',
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+  ]}
+  frame="fill"
+  position="relative"
+/>
+<Header
+  heading="Fulldev UI"
+  buttons={[
+    {
+      variant: 'ghost',
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+      contrast: true,
+    },
+  ]}
+  frame="fill"
+  position="relative"
+/>
+
+<Header
+  heading="Fulldev UI"
+  buttons={[
+    {
+      variant: 'ghost',
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+      contrast: true,
+    },
+  ]}
+  frame="panel"
+  position="relative"
+/>
+```
+
+```astro live
+---
+import Header from 'fulldev-ui/components/Header.astro'
+---
+
+<Header
+  heading="Fulldev UI"
+  size="sm"
+  position="relative"
+  buttons={[
+    {
+      variant: 'ghost',
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+      contrast: true,
+    },
+  ]}
+/>
+
+<Header
+  heading="Fulldev UI"
+  size="md"
+  position="relative"
+  buttons={[
+    {
+      variant: 'ghost',
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+      contrast: true,
+    },
+  ]}
+/>
+
+<Header
+  heading="Fulldev UI"
+  size="lg"
+  position="relative"
+  buttons={[
+    {
+      variant: 'ghost',
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+      contrast: true,
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Header from 'fulldev-ui/components/Header.astro'
+---
+
+<Header
+  heading="Fulldev UI"
+  buttons={[
+    {
+      variant: 'ghost',
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+  ]}
+  frame="fill"
+  position="relative"
+  color="base"
+/>
+
+<Header
+  heading="Fulldev UI"
+  buttons={[
+    {
+      variant: 'ghost',
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+  ]}
+  frame="fill"
+  position="relative"
+  color="brand"
+/>
+```

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

@@ -0,0 +1,17 @@
+---
+_layout: ComponentLayout
+settings: components
+
+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/base/_drawer.mdx

@@ -0,0 +1,17 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Drawer
+---
+
+```astro live
+---
+import Drawer from 'fulldev-ui/components/Drawer.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+---
+
+<Drawer label="Open Drawer">
+  <Heading>Hello, World!</Heading>
+</Drawer>
+```

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

@@ -0,0 +1,14 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Image
+---
+
+```astro live
+---
+import Image from 'fulldev-ui/components/Image.astro'
+---
+
+<Image src="/images/placeholder-landscape.webp" />
+```

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

@@ -0,0 +1,33 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Switch
+---
+
+```astro live
+---
+import Switch from 'fulldev-ui/components/Switch.astro'
+---
+
+<Switch size="sm" />
+<Switch size="md" />
+<Switch size="lg" />
+```
+
+```astro live
+---
+import Switch from 'fulldev-ui/components/Switch.astro'
+---
+
+<Switch trueLabel="On" falseLabel="Off" />
+```
+
+```astro live
+---
+import Switch from 'fulldev-ui/components/Switch.astro'
+---
+
+<Switch color="base" trueLabel="On" falseLabel="Off" />
+<Switch color="brand" trueLabel="On" falseLabel="Off" />
+```

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

@@ -0,0 +1,70 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Badge
+---
+
+# Badge
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Badge from 'fulldev-ui/components/Badge.astro'
+---
+
+<Badge>Badge</Badge>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Badge from 'fulldev-ui/components/Badge.astro'
+---
+
+<Badge size="sm">Badge</Badge>
+<Badge size="md">Badge</Badge>
+<Badge size="lg">Badge</Badge>
+```
+
+```astro live
+---
+import Badge from 'fulldev-ui/components/Badge.astro'
+---
+
+<Badge color="base">Badge</Badge>
+<Badge color="brand">Badge</Badge>
+```
+
+```astro live
+---
+import Badge from 'fulldev-ui/components/Badge.astro'
+---
+
+<Badge>Badge</Badge>
+<Badge contrast>Badge</Badge>
+```
+
+```astro live
+---
+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" set:html="Badge" />
+```

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

@@ -0,0 +1,71 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Button
+---
+
+# Button
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button color="brand">Button</Button>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button variant="primary">Button</Button>
+<Button variant="secondary">Button</Button>
+<Button variant="tertiary">Button</Button>
+```
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button icon="circle" set:html="Button" set:html="Buttontje" />
+```
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button size="sm" set:html="Button" />
+<Button size="md" set:html="Button" />
+<Button size="lg" set:html="Button" />
+```
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button color="base" set:html="Button" />
+<Button color="brand" set:html="Button" />
+```
+
+```astro live
+---
+import Button from 'fulldev-ui/components/Button.astro'
+---
+
+<Button radius="none" set:html="Button" />
+<Button radius="auto" set:html="Button" />
+<Button radius="full" set:html="Button" />
+```

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

@@ -0,0 +1,114 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Card
+---
+
+# Card
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Card from 'fulldev-ui/components/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."
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+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"
+  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/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."
+/>
+```
+
+```astro live
+---
+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

@@ -0,0 +1,43 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Checkbox
+---
+
+# Checkbox
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Checkbox from 'fulldev-ui/components/Checkbox.astro'
+---
+
+<Checkbox label="Label" name="checkbox" color="base" />
+```
+
+```astro live
+---
+import Checkbox from 'fulldev-ui/components/Checkbox.astro'
+---
+
+<Checkbox name="checkbox" label="Base" color="base" />
+<Checkbox name="checkbox" label="Brand" color="brand" />
+```
+
+```astro live
+---
+import Checkbox from 'fulldev-ui/components/Checkbox.astro'
+---
+
+<Checkbox name="checkbox" size="sm" />
+<Checkbox name="checkbox" size="md" />
+<Checkbox name="checkbox" size="lg" />
+```

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

@@ -0,0 +1,54 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Icon
+---
+
+# Icon
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon name="code" color="brand" size="lg" />
+```
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon name="circle" />
+<Icon name="arrow-right" />
+<Icon name="brand-x" />
+<Icon name="brand-github" />
+```
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon size="sm" name="circle" />
+<Icon size="md" name="circle" />
+<Icon size="lg" name="circle" />
+```
+
+```astro live
+---
+import Icon from 'fulldev-ui/components/Icon.astro'
+---
+
+<Icon color="base" name="circle" />
+<Icon color="brand" name="circle" />
+```

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

@@ -0,0 +1,67 @@
+---
+_layout: ComponentLayout
+settings: components
+
+title: Input
+---
+
+# Input
+
+import PropsTable from 'fulldev-ui/components/docs/PropsTable.astro'
+
+```astro live
+---
+import Input from 'fulldev-ui/components/Input.astro'
+---
+
+<Input
+  label="Email"
+  icon="mail"
+  name="input"
+  type="email"
+  placeholder="This is an input"
+/>
+```
+
+## Props
+
+<PropsTable />
+
+## Examples
+
+```astro live
+---
+import Input from 'fulldev-ui/components/Input.astro'
+---
+
+<Input label="Name" icon="mail" name="name" type="email" />
+```
+
+```astro live
+---
+import Input from 'fulldev-ui/components/Input.astro'
+---
+
+<Input size="sm" name="name" />
+<Input size="md" name="name" />
+<Input size="lg" name="name" />
+```
+
+```astro live
+---
+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" />
+```