fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.10

package/src/components/Tagline.astro

@@ -1,60 +1,49 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
-import Avatar from 'fulldev-ui/components/Avatar.astro'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Icon from 'fulldev-ui/components/Icon.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
-
-interface Props
-  extends GlobalProps,
-    HTMLAttributes<'span'>,
-    HTMLAttributes<'a'> {
-  as?: HTMLTag
-  icon?: ComponentProps<typeof Icon>['name']
-  avatar?: ComponentProps<typeof Avatar>['src']
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
+
+interface Props extends HTMLAttributes<'p'> {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined
+  muted?: boolean | undefined
   text?: string | undefined
-  variant?: 'secondary' | 'outline' | 'link' | undefined
 }
 
-const {
-  slug,
-  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
-  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
-  as = href ? 'a' : 'a',
-  target = href?.toString().startsWith('http') ? '_blank' : undefined,
-  icon,
-  ...rest
-} = Astro.props
+const { text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list={'tagline'}
-  {href}
-  {as}
-  {target}
+  class:list="tagline"
+  as="p"
   {...rest}
 >
-  <slot />
-  <Icon name={icon} />
   <Fragment set:html={text} />
+  <slot />
 </Element>
 
 <style is:global>
   @layer fulldev {
     .tagline {
-      @apply text-primary font-semibold;
+      @apply font-semibold leading-tight text-primary;
+
+      &.size-xs {
+        @apply text-xs;
+      }
 
       &.size-sm {
         @apply text-sm;
       }
 
+      &.size-md {
+        @apply text-base;
+      }
+
       &.size-lg {
         @apply text-lg;
       }
+
+      &.size-xl {
+        @apply text-xl;
+      }
     }
   }
 </style>

package/src/components/Textarea.astro

@@ -1,11 +1,11 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Label from 'fulldev-ui/components/Label.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'textarea'> {
-  label?: ComponentProps<typeof Label>['text']
+interface Props extends HTMLAttributes<'textarea'> {
+  size?: 'sm' | 'md' | 'lg' | undefined
+  label?: string | undefined
 }
 
 const {
@@ -33,7 +33,7 @@ const {
   <Element
     class:list="textarea-textarea"
     as="textarea"
-    if={id}
+    show={id}
     {id}
     {name}
     {placeholder}

package/src/components/Themer.astro

@@ -1,9 +1,9 @@
 ---
-import Button from './Button.astro'
-import Icon from './Icon.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
 
 interface Props {
-  if?: any
+  show?: any
   size?: any
   variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
 }

package/src/components/Toc.astro

@@ -1,22 +1,23 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
+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 Links from './Links.astro'
+import Link from 'fulldev-ui/components/Link.astro'
 
-interface Props extends GlobalProps, HTMLAttributes<'div'> {
-  heading?: ComponentProps<typeof Heading>['text']
-  render?: CollectionEntry<'pages'>['render'] | undefined
+interface Props extends HTMLAttributes<'div'> {
+  headings?: MarkdownHeading[] | undefined
+  heading?: string | undefined
 }
 
-const { size = 'sm', heading = 'On this page', render, ...rest } = Astro.props
+const { headings, heading, ...rest } = Astro.props
 
-const headings = render ? (await render())?.headings : []
 const filteredHeadings = headings?.filter(
   (heading: any) => heading.depth >= 2 && heading.depth <= 4
 )
+
+const h1 = headings?.find((heading: any) => heading.depth === 1)
+
 const links = filteredHeadings?.map((button: any) => ({
   text: button.text,
   href: `#${button.slug}`,
@@ -25,32 +26,28 @@ const links = filteredHeadings?.map((button: any) => ({
 ---
 
 <Element
-  if={filteredHeadings?.length > 1}
   class:list="toc"
-  {size}
+  show={filteredHeadings?.length}
   {...rest}
 >
-  <Heading
-    level={5}
-    text={heading}
-    {size}
-  />
-  <Links
-    direction="column"
-    {links}
-    {size}
-  />
+  <Heading text={h1?.text || heading} />
+  {
+    links?.map((link) => (
+      <Link
+        variant="muted"
+        size="sm"
+        {...link}
+      />
+    ))
+  }
 </Element>
 
 <style is:global>
   @layer fulldev {
     .toc {
-      @apply sticky bottom-0 z-10 -mt-14 hidden w-52 shrink-0 flex-col items-start justify-start gap-3 overflow-y-auto py-14 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;
 
-      top: var(--header-height, 0px);
-      max-height: calc(100vh - var(--header-height, 0px));
-
       .depth-3 {
         @apply pl-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

@@ -0,0 +1,79 @@
+<!-- ---
+// @ts-nocheck
+import type { ImageMetadata } from 'astro'
+import type { HTMLAttributes } from 'astro/types'
+import { Image as AstroImage } from 'astro:assets'
+import { getEntry } from 'astro:content'
+
+interface Props extends GlobalProps, HTMLAttributes<'img'> {
+  id?: any
+  size?: 'sm' | 'md' | 'lg' | undefined
+  position?: 'background' | 'cover' | 'inset' | undefined
+}
+
+const { id } = Astro.props
+const entry = id ? (await getEntry('images', id))?.data : {}
+
+const {
+  width = 1920,
+  height = 1920,
+  position,
+  src,
+  alt,
+  size,
+  ...rest
+} = {
+  ...entry,
+  ...Astro.props,
+}
+
+function getAltBySrc() {
+  if (!src) return
+  const filename = src?.split('/').pop()
+  const slug = filename && filename.split('.')[0]
+  const unslugged = slug?.replace(/-/g, ' ')
+  return unslugged || ''
+}
+
+const images = import.meta.glob<{ default: ImageMetadata }>('/src/images/*')
+const image = images[src as keyof typeof images]
+---
+
+{
+  (image || src) && (
+    <AstroImage
+      class:list={[
+        'image',
+        {
+          [`size-${size}`]: size,
+          [`position-${position}`]: position,
+        },
+      ]}
+      alt={alt || getAltBySrc()}
+      src={image ? image() : src}
+      width={width ? Number(width) : undefined}
+      height={height ? Number(height) : undefined}
+      {...rest}
+    />
+  )
+}
+
+<style is:global>
+  @layer fulldev {
+    .image {
+      @apply block;
+
+      &.position-contain {
+        @apply h-auto w-full object-contain;
+      }
+
+      &.position-cover {
+        @apply h-full w-full object-cover;
+      }
+
+      &.position-background {
+        @apply absolute inset-0 h-full max-h-none w-full max-w-none object-cover opacity-30;
+      }
+    }
+  }
+</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/config.ts

@@ -1,20 +1,13 @@
 import { defineCollection } from 'astro:content'
-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'
+import { pageSchema } from 'fulldev-ui/schemas/page.ts'
 
 export const collections = {
   pages: defineCollection({
     type: 'content',
     schema: pageSchema,
   }),
-  presets: defineCollection({
+  layouts: defineCollection({
     type: 'data',
-    schema: presetSchema,
-  }),
-  images: defineCollection({
-    loader: imageLoader,
-    schema: imageSchema,
+    schema: pageSchema,
   }),
 }

package/src/content/layouts/base.yml

@@ -0,0 +1,159 @@
+head:
+  title: Fulldev UI - Astro component and block library, open-source
+  image:
+    src: /images/og-image.png
+  theme: system
+  code: |
+    <script is:inline>
+      !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+      posthog.init('phc_mVacbe8Xydu0UZlh4bNw5EGisvzyRcpqXEEuEEp5lOY',{api_host:'https://eu.i.posthog.com', person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
+        })
+    </script>
+
+banner:
+  text: 'Introducing v0.6: full pagebuilding 🎉'
+
+header:
+  search: true
+  themer: true
+  logo:
+    image: /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/
+  socials:
+    - https://github.com/fulldotdev/ui
+    - https://discord.gg/vXZqMbadm8
+
+sidebar:
+  - heading: Get Started
+    links:
+      - text: Introduction
+        href: /docs/
+      - text: Installation
+        href: /docs/installation/
+      - text: Customization
+        href: /docs/customization/
+      - text: Integrating frameworks
+        href: /docs/frameworks/
+      - text: Using components
+        href: /docs/components/
+      - text: Using structures
+        href: /docs/structures/
+      - text: Using blocks
+        href: /docs/blocks/
+  - heading: Components
+    links:
+      - text: Badge
+        href: /docs/components/badge/
+      - 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: 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/

package/src/content/pages/_showcase/anti-slip-profiles.md

@@ -0,0 +1,5 @@
+---
+title: Anti Slip Profiles
+image: 'anti-slip-profiles.webp'
+slug: 'https://antislipprofiles.com'
+---

package/src/content/pages/{showcase → _showcase}/fulldev-ui.md

@@ -1,5 +1,5 @@
 ---
-heading: Fulldev UI
+title: Fulldev UI
 image: fulldev-ui.webp
 href: 'https://ui.ull.dev'
 ---

package/src/content/pages/{showcase → _showcase}/lavis-detailing.md

@@ -1,5 +1,5 @@
 ---
-heading: Lavis Detailing
+title: Lavis Detailing
 image: lavis-detailing.webp
 href: 'https://lavisdetailing.nl'
 ---

package/src/content/pages/{showcase → _showcase}/leren-trainingsacteren.md

@@ -1,5 +1,5 @@
 ---
-heading: Leren Trainingsacteren
+title: Leren Trainingsacteren
 image: leren-trainingsacteren.webp
 href: 'https://lerentrainingsacteren.nl'
 ---

package/src/content/pages/{showcase → _showcase}/miele-witgoedcenter-amsterdam.md

@@ -1,5 +1,5 @@
 ---
-heading: Miele Witgoedcenter Amsterdam
+title: Miele Witgoedcenter Amsterdam
 image: miele-witgoedcenter-amsterdam.webp
 href: 'https://witgoedcenteramsterdam.nl'
 ---

package/src/content/pages/{showcase → _showcase}/sloepverhuur-bolsward.md

@@ -1,5 +1,5 @@
 ---
-heading: Sloepverhuur Bolsward
+title: Sloepverhuur Bolsward
 image: sloepverhuur-bolsward.webp
 href: 'https://sloepverhuurbolsward.nl'
 ---

package/src/content/pages/_showcase/stark-vulcanising-products.md

@@ -0,0 +1,4 @@
+---
+title: Stark Vulcanising Products
+image: stark-vulcanising-products.webp
+---

package/src/content/pages/{showcase → _showcase}/the-gym-haren.md

@@ -1,5 +1,5 @@
 ---
-heading: The Gym Haren
+title: The Gym Haren
 image: the-gym-haren.webp
 href: 'https://thegymharen.nl'
 ---

package/src/content/pages/{showcase → _showcase}/van-dillen-antieke-bouwmaterialen.md

@@ -1,5 +1,5 @@
 ---
-heading: Van Dillen Antieke Bouwmaterialen
+title: Van Dillen Antieke Bouwmaterialen
 image: van-dillen-antieke-bouwmaterialen.webp
 href: 'https://vdabouwmaterialen.nl'
 ---

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

@@ -0,0 +1,28 @@
+---
+_block: Content7
+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} />
+```