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

package/src/components/Toc.astro

@@ -3,14 +3,14 @@ import type { MarkdownHeading } from 'astro'
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-import Link from './Link.astro'
+import Link from 'fulldev-ui/components/Link.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
+interface Props extends HTMLAttributes<'div'> {
   headings?: MarkdownHeading[] | undefined
+  heading?: string | undefined
 }
 
-const { headings, ...rest } = Astro.props
+const { headings, heading, ...rest } = Astro.props
 
 const filteredHeadings = headings?.filter(
   (heading: any) => heading.depth >= 2 && heading.depth <= 4
@@ -27,14 +27,10 @@ const links = filteredHeadings?.map((button: any) => ({
 
 <Element
   class:list="toc"
-  if={filteredHeadings?.length}
+  show={filteredHeadings?.length}
   {...rest}
 >
-  <Heading
-    as="a"
-    href="#"
-    {...h1}
-  />
+  <Heading text={h1?.text || heading} />
   {
     links?.map((link) => (
       <Link
@@ -49,7 +45,7 @@ const links = filteredHeadings?.map((button: any) => ({
 <style is:global>
   @layer fulldev {
     .toc {
-      @apply lg:top-sticky-16 sticky bottom-0 z-10 hidden w-48 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto md:flex;
+      @apply sticky bottom-0 top-sticky-16 z-10 hidden w-48 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto md:flex;
       @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
 
       .depth-3 {

package/src/components/Toggle.astro

@@ -0,0 +1,45 @@
+---
+import type { Polymorphic } from 'astro/types'
+import { uid } from 'radash'
+import Button from './Button.astro'
+
+type Props<As extends 'label'> = Polymorphic<{ as: As }> & {
+  color?: 'base' | 'brand' | undefined
+  id?: string | undefined
+  name?: string | undefined
+  icon?: string | undefined
+  html?: string | undefined
+  text?: string | undefined
+  toggled: boolean | undefined
+}
+
+const { id = uid(7), toggled, name, ...rest } = Astro.props
+---
+
+<input
+  class="toggle-checkbox"
+  checked={toggled}
+  type="checkbox"
+  id={id}
+  name={name ?? id}
+/>
+
+<Button
+  class:list="toggle"
+  variant="tertiary"
+  as="label"
+  for={id}
+  {...rest}
+/>
+
+<style is:global>
+  @layer fulldev {
+    .toggle-checkbox {
+      @apply hidden;
+
+      &:checked + .toggle {
+        @apply bg-accent text-foreground;
+      }
+    }
+  }
+</style>

package/src/components/{Breadcrumb.astro → _Breadcrumb.astro}

@@ -1,5 +1,5 @@
----
-import type { HTMLAttributes, HTMLTag } from 'astro/types'
+<!-- ---
+import type { HTMLAttributes,HTMLTag } from 'astro/types'
 import type { CollectionEntry } from 'astro:content'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
@@ -55,4 +55,4 @@ const { size = 'sm', slug, ...rest } = Astro.props
       }
     }
   }
-</style>
+</style> -->

package/src/components/_Image.astro

@@ -1,4 +1,4 @@
----
+<!-- ---
 // @ts-nocheck
 import type { ImageMetadata } from 'astro'
 import type { HTMLAttributes } from 'astro/types'
@@ -76,4 +76,4 @@ const image = images[src as keyof typeof images]
       }
     }
   }
-</style>
+</style> -->

package/src/components/docs/Props.astro

@@ -0,0 +1,21 @@
+---
+import Link from 'fulldev-ui/components/Link.astro'
+
+const slug = Astro.params.page
+const folder = slug?.split('/').slice(-2, -1)[0]
+const component = slug
+  ?.split('/')
+  .pop()
+  ?.replace(/^\w/, (c) => c.toUpperCase())
+const path = `src/${folder}/${component}.astro`
+---
+
+<p>
+  Please reference
+  <Link
+    target="_blank"
+    href={`https://github.com/fulldotdev/ui/blob/main/${path}`}
+  >
+    {path}
+  </Link> for now.
+</p>

package/src/content/layouts/base.yml

@@ -1,6 +1,7 @@
 head:
   title: Fulldev UI - Astro component and block library, open-source
-  image: /images/og-image.png
+  image:
+    src: /images/og-image.png
   theme: system
   code: |
     <script is:inline>
@@ -14,18 +15,22 @@ banner:
 
 header:
   search: true
+  themer: true
   logo:
-    image: /src/images/favicon/android-chrome-512x512.png
+    image:
+      src: /favicon/android-chrome-512x512.png
     text: Fulldev UI
   links:
     - text: Docs
       href: /docs/
     - text: Components
       href: /docs/components/badge/
+    - text: Structures
+      href: /docs/structures/container/
     - text: Blocks
       href: /docs/blocks/banner/
-    - text: Showcase
-      href: /showcase/
+    - text: Layouts
+      href: /docs/layouts/page/
   socials:
     - https://github.com/fulldotdev/ui
     - https://discord.gg/vXZqMbadm8
@@ -40,24 +45,131 @@ sidebar:
           href: /docs/installation/
         - text: Customization
           href: /docs/customization/
-        - text: Frameworks
+        - text: Integrating frameworks
           href: /docs/frameworks/
-        - text: Components
+        - text: Using components
           href: /docs/components/
-        - text: Collections
-          href: /docs/collections/
+        - text: Using structures
+          href: /docs/structures/
+        - text: Using blocks
+          href: /docs/blocks/
+        - text: Using layouts
+          href: /docs/layouts/
 
-footer:
-  logo:
-    text: Fulldev UI
-  menus:
-    - heading: Docs
+    - heading: Components
       links:
-        - text: Docs
-          href: /docs/
-        - text: Components
+        - text: Badge
           href: /docs/components/badge/
-        - text: Blocks
+        - text: Badges
+          href: /docs/components/badges/
+        - text: Button
+          href: /docs/components/button/
+        - text: Buttons
+          href: /docs/components/buttons/
+        - text: Channel
+          href: /docs/components/channel/
+        - text: Channels
+          href: /docs/components/channels/
+        - text: Checkbox
+          href: /docs/components/checkbox/
+        - text: Heading
+          href: /docs/components/heading/
+        - text: Icon
+          href: /docs/components/icon/
+        - text: Image
+          href: /docs/components/image/
+        - text: Input
+          href: /docs/components/input/
+        - text: Label
+          href: /docs/components/label/
+        - text: Link
+          href: /docs/components/link/
+        - text: Links
+          href: /docs/components/links/
+        - text: List
+          href: /docs/components/list/
+        - text: Logo
+          href: /docs/components/logo/
+        - text: Menu
+          href: /docs/components/menu/
+        - text: Paragraph
+          href: /docs/components/paragraph/
+        - text: Rating
+          href: /docs/components/rating/
+        - text: Select
+          href: /docs/components/select/
+        - text: Social
+          href: /docs/components/social/
+        - text: Socials
+          href: /docs/components/socials/
+        - text: Switch
+          href: /docs/components/switch/
+        - text: Tagline
+          href: /docs/components/tagline/
+        - text: Textarea
+          href: /docs/components/textarea/
+
+    - heading: Structures
+      links:
+        - text: Container
+          href: /docs/structures/container/
+        - text: Section
+          href: /docs/structures/section/
+        - text: Card
+          href: /docs/structures/card/
+        - text: Matrix
+          href: /docs/structures/matrix/
+        - text: Stack
+          href: /docs/structures/stack/
+        - text: Group
+          href: /docs/structures/group/
+        - text: Masonry
+          href: /docs/structures/masonry/
+        - text: Prose
+          href: /docs/structures/prose/
+        - text: Writeup
+          href: /docs/structures/writeup/
+        - text: Layout
+          href: /docs/structures/layout/
+        - text: Code
+          href: /docs/structures/code/
+        - text: Drawer
+          href: /docs/structures/drawer/
+        - text: Panel
+          href: /docs/structures/panel/
+
+    - heading: Blocks
+      links:
+        - text: Banner
           href: /docs/blocks/banner/
-        - text: Showcase
-          href: /showcase/
+        - text: Colleagues
+          href: /docs/blocks/colleagues/
+        - text: Content
+          href: /docs/blocks/content/
+        - text: Cta
+          href: /docs/blocks/cta/
+        - text: Feature
+          href: /docs/blocks/feature/
+        - text: Features
+          href: /docs/blocks/features/
+        - text: Footer
+          href: /docs/blocks/footer/
+        - text: Header
+          href: /docs/blocks/header/
+        - text: Hero
+          href: /docs/blocks/hero/
+        - text: Intro
+          href: /docs/blocks/intro/
+        - text: Logos
+          href: /docs/blocks/logos/
+        - text: Reviews
+          href: /docs/blocks/reviews/
+        - text: Projects
+          href: /docs/blocks/projects/
+
+    - heading: Layouts
+      links:
+        - text: Doc
+          href: /docs/layouts/doc/
+        - text: Page
+          href: /docs/layouts/page/

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

@@ -0,0 +1,28 @@
+---
+_layout: doc
+title: Toggle
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle text="Click me" icon="click" />
+```
+
+## Props
+
+<Props />
+
+## Examples
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle icon={'code'} text="Auto save" toggled={true} />
+```

package/src/content/pages/{blocks → docs/blocks}/banner.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: block
 title: Banner
 ---
 

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

@@ -0,0 +1,49 @@
+---
+_layout: block
+title: Colleagues
+---
+
+```astro live
+---
+import Colleagues1 from 'fulldev-ui/blocks/Colleagues1.astro'
+---
+
+<Colleagues1
+  heading="Meet the team"
+  paragraph="Our team is made up of experienced professionals."
+  cards={[
+    {
+      image: {
+        src: '/images/avatar-1.jpeg',
+        alt: 'John Doe',
+      },
+      heading: 'John Doe',
+      paragraph: 'Ceo & Founder',
+    },
+    {
+      image: {
+        src: '/images/avatar-2.jpeg',
+        alt: 'Jane Doe',
+      },
+      heading: 'Jane Doe',
+      paragraph: 'Manager',
+    },
+    {
+      image: {
+        src: '/images/avatar-3.jpeg',
+        alt: 'John Smith',
+      },
+      heading: 'John Smith',
+      paragraph: 'Developer',
+    },
+    {
+      image: {
+        src: '/images/avatar-4.jpeg',
+        alt: 'Jane Smith',
+      },
+      heading: 'Jane Smith',
+      paragraph: 'Developer',
+    },
+  ]}
+/>
+```

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

@@ -0,0 +1,155 @@
+---
+_layout: block
+title: Content
+---
+
+## Content1
+
+```astro live
+---
+import Content1 from 'fulldev-ui/blocks/Content1.astro'
+---
+
+<Content1
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <h3>HTML Content Example</h3>
+    <p>This is an example of HTML content inserted into the Content block.</p>
+    <ul>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+    </ul>
+  `
+/>
+```
+
+## Content2
+
+```astro live
+---
+import Content2 from 'fulldev-ui/blocks/Content2.astro'
+---
+
+<Content2
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <h3>HTML Content Example</h3>
+    <p>This is an example of HTML content inserted into the Content2 block. It demonstrates how you can use HTML to structure your content within the block.</p>
+    <ul>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li>Fourth item</li>
+      <li>Fifth item</li>
+    </ul>
+    <p>Adding more content to make it longer. You can include various HTML elements such as headings, paragraphs, lists, images, and more to enrich your content.</p>
+    <p>Here is another paragraph to further extend the content. This allows you to provide more information and details within the Content2 block.</p>
+  `
+/>
+```
+
+## Content3
+
+```astro live
+---
+import Content3 from 'fulldev-ui/blocks/Content3.astro'
+---
+
+<Content3
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <h3>HTML Content Example</h3>
+    <p>This is an example of HTML content inserted into the Content2 block. It demonstrates how you can use HTML to structure your content within the block.</p>
+    <ul>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li>Fourth item</li>
+      <li>Fifth item</li>
+    </ul>
+    <p>Adding more content to make it longer. You can include various HTML elements such as headings, paragraphs, lists, images, and more to enrich your content.</p>
+    <p>Here is another paragraph to further extend the content. This allows you to provide more information and details within the Content2 block.</p>
+  `
+/>
+```
+
+## Content4
+
+```astro live
+---
+import Content4 from 'fulldev-ui/blocks/Content4.astro'
+---
+
+<Content4
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <p>
+      This is an example of HTML content inserted into the Content4 block. Lorem
+      ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla!
+      Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum
+      dolor sit amet consectetur adipisicing elit. Praesent sapien massa,
+      convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget
+      malesuada.
+    </p>
+    <p>
+      This is an example of HTML content inserted into the Content4 block. Lorem
+      ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla!
+      Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum
+      dolor sit amet consectetur adipisicing elit. Praesent sapien massa,
+      convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget
+      malesuada.
+    </p>
+  `
+/>
+```
+
+## Content5
+
+```astro live
+---
+import Content5 from 'fulldev-ui/blocks/Content5.astro'
+---
+
+<Content5
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <p>
+      This is an example of HTML content inserted into the Content4 block. Lorem
+      ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla!
+      Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum
+      dolor sit amet consectetur adipisicing elit. Praesent sapien massa,
+      convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget
+      malesuada.
+    </p>
+    <p>
+      This is an example of HTML content inserted into the Content4 block. Lorem
+      ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla!
+      Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum
+      dolor sit amet consectetur adipisicing elit. Praesent sapien massa,
+      convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget
+      malesuada.
+    </p>
+  `
+/>
+```

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

@@ -0,0 +1,16 @@
+---
+_layout: block
+title: Cta
+---
+
+```astro live
+---
+import Cta1 from 'fulldev-ui/blocks/Cta1.astro'
+---
+
+<Cta1
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur ades"
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+/>
+```

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

@@ -0,0 +1,17 @@
+---
+_layout: block
+title: Feature
+---
+
+```astro live
+---
+import Feature1 from 'fulldev-ui/blocks/Feature1.astro'
+---
+
+<Feature1
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur ades"
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+/>
+```

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

@@ -0,0 +1,35 @@
+---
+_layout: block
+title: Features
+---
+
+```astro live
+---
+import Features1 from 'fulldev-ui/blocks/Features1.astro'
+---
+
+<Features1
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+  cards={[
+    {
+      icon: 'rocket',
+      heading: 'Lorem ipsum',
+      paragraph: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+      button: { text: 'Lorem ipsum', href: '' },
+    },
+    {
+      icon: 'pencil',
+      heading: 'Lorem ipsum',
+      paragraph: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+      button: { text: 'Lorem ipsum', href: '' },
+    },
+    {
+      icon: 'typography',
+      heading: 'Lorem ipsum',
+      paragraph: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+      button: { text: 'Lorem ipsum', href: '' },
+    },
+  ]}
+/>
+```

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

@@ -0,0 +1,46 @@
+---
+_layout: block
+title: Footer
+---
+
+```astro live
+---
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+---
+
+<Footer
+  logo={{
+    image: { src: '/favicon/android-chrome-512x512.png' },
+    text: 'Fulldev UI',
+  }}
+  paragraph="Rapidly build content-driven websites."
+  socials={[
+    'https://github.com/fulldotdev/ui',
+    'https://discord.gg/vXZqMbadm8',
+  ]}
+  channels={[
+    { heading: 'Email', icon: 'mail', text: 'contact@full.dev' },
+    { heading: 'Phone', icon: 'phone', text: '+316 83485163' },
+  ]}
+  menus={[
+    {
+      heading: 'Get Started',
+      links: [
+        { href: '/docs/', text: 'Introduction' },
+        { href: '/docs/installation/', text: 'Installation' },
+        { href: '/docs/customization/', text: 'Customization' },
+        { href: '/docs/frameworks/', text: 'Frameworks' },
+      ],
+    },
+    {
+      heading: 'Docs',
+      links: [
+        { href: '/docs/components/badge/', text: 'Components' },
+        { href: '/docs/structures/Container/', text: 'Wrappers' },
+        { href: '/docs/blocks/banner/', text: 'Blocks' },
+        { href: '/docs/layouts/page/', text: 'Layouts' },
+      ],
+    },
+  ]}
+/>
+```