fulldev-ui 0.6.0-beta.9 → 0.6.1

package/src/components/Chip.astro

@@ -0,0 +1,73 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
+  variant?: 'primary' | 'secondary' | 'outline' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
+  text?: string | undefined
+  icon?: string | undefined
+}
+
+const { variant = 'outline', size = 'md', text, icon, ...rest } = Astro.props
+---
+
+<Element
+  class:list="chip"
+  as={rest.href ? 'a' : 'div'}
+  {variant}
+  {size}
+  {...rest}
+>
+  <Icon
+    size="sm"
+    name={icon}
+  />
+  <Element as="span">
+    <Fragment set:html={text} />
+    <slot />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .chip {
+      @apply inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-full text-sm font-medium leading-none ring-offset-background transition-colors;
+      @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+      @apply disabled:pointer-events-none disabled:opacity-50;
+
+      &.size-sm {
+        @apply h-6 min-w-6 px-2;
+      }
+
+      &.size-md {
+        @apply h-7 min-w-7 px-3;
+      }
+
+      &.size-lg {
+        @apply h-8 min-w-8 px-3.5;
+      }
+
+      &.variant-primary {
+        @apply bg-primary text-primary-foreground hover:bg-primary-hover;
+      }
+
+      &.variant-secondary {
+        @apply bg-secondary text-secondary-foreground hover:bg-secondary-hover;
+      }
+
+      &.variant-outline {
+        @apply border border-input text-accent-foreground hover:bg-accent;
+      }
+
+      .icon {
+        @apply first:last:absolute;
+      }
+
+      span {
+        @apply text-inherit;
+      }
+    }
+  }
+</style>

package/src/components/Element.astro

@@ -66,4 +66,5 @@ const render = show === 'content' ? slot?.trim().length > 0 : show
   @import 'tailwindcss/base' layer(fulldev);
   @import 'fulldev-ui/css/theme' layer(fulldev);
   @import 'tailwindcss/components';
+  @import 'tailwindcss/utilities';
 </style>

package/src/components/Field.astro

@@ -0,0 +1,33 @@
+---
+import Input from 'fulldev-ui/components/Input.astro'
+import Select from 'fulldev-ui/components/Select.astro'
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+
+interface Props {
+  label?: string | undefined
+  placeholder?: string | undefined
+  value?: string | undefined
+  required?: boolean | undefined
+  disabled?: boolean | undefined
+  type?: keyof typeof components | undefined
+}
+
+const { type = 'text', ...rest } = Astro.props
+
+const components = {
+  select: Select,
+  textarea: Textarea,
+  text: Input,
+  number: Input,
+  tel: Input,
+  email: Input,
+  password: Input,
+}
+
+const Component = components[type]
+---
+
+<Component
+  class:list="field"
+  {...rest}
+/>

package/src/components/Fields.astro

@@ -0,0 +1,20 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Field from 'fulldev-ui/components/Field.astro'
+
+interface Props extends ComponentProps<typeof Field> {
+  field?: ComponentProps<typeof Field> | undefined
+  fields?: ComponentProps<typeof Field>[] | undefined
+}
+
+const { field, fields, ...rest } = Astro.props
+---
+
+{
+  [field, ...(fields || [])].filter(Boolean).map((field) => (
+    <Field
+      {...rest}
+      {...field}
+    />
+  ))
+}

package/src/components/Heading.astro

@@ -5,8 +5,8 @@ import Element from 'fulldev-ui/components/Element.astro'
 interface Props
   extends HTMLAttributes<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'> {
   as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined
+  depth?: 1 | 2 | 3 | 4 | 5 | 6 | number | undefined
   text?: string | undefined
-  muted?: boolean | undefined
   size?:
     | 'xs'
     | 'sm'
@@ -21,7 +21,7 @@ interface Props
     | undefined
 }
 
-const { as = 'h2', text, ...rest } = Astro.props
+const { depth = 2, as = `h${depth}`, text, ...rest } = Astro.props
 ---
 
 <Element
@@ -34,11 +34,12 @@ const { as = 'h2', text, ...rest } = Astro.props
 </Element>
 
 <style is:global>
-  .heading {
+  .heading,
+  .prose > :is(h1, h2, h3, h4, h5, h6) {
     @apply scroll-mt-20 font-bold tracking-tight text-foreground;
 
-    &.muted {
-      @apply text-muted-foreground;
+    code {
+      @apply rounded-sm bg-muted px-1 py-0.5 font-mono;
     }
 
     &.size-xs {
@@ -49,22 +50,27 @@ const { as = 'h2', text, ...rest } = Astro.props
       @apply text-sm;
     }
 
+    &:where(.prose > h6),
     &.size-md {
       @apply text-base;
     }
 
+    &:where(.prose > h5),
     &.size-lg {
       @apply text-lg;
     }
 
+    &:where(.prose > h4),
     &.size-xl {
       @apply text-xl;
     }
 
+    &:where(.prose > h3),
     &.size-2xl {
       @apply text-2xl;
     }
 
+    &:where(.prose > h2),
     &.size-3xl {
       @apply text-3xl;
     }
@@ -73,6 +79,7 @@ const { as = 'h2', text, ...rest } = Astro.props
       @apply text-4xl;
     }
 
+    &:where(.prose > h1),
     &.size-5xl {
       @apply text-4xl lg:text-5xl;
     }

package/src/components/Image.astro

@@ -42,7 +42,7 @@ const {
 <style is:global>
   @layer fulldev {
     .image {
-      @apply block;
+      @apply block rounded-md;
     }
   }
 </style>

package/src/components/Link.astro

@@ -30,7 +30,7 @@ const { variant = 'muted', size = 'md', text, icon, ...rest } = Astro.props
   @layer fulldev {
     .link,
     .prose-content > *:not(.prose-footer) > a {
-      @apply ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+      @apply cursor-pointer ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
 
       &.variant-primary,
       &:is(.prose-content > *:not(.prose-footer) > a) {

package/src/components/Menu.astro

@@ -19,11 +19,15 @@ const { size = 'md', heading, links, ...rest } = Astro.props
   class:list="menu"
   {...rest}
 >
-  <Heading
-    text={heading}
-    as="h6"
-    {size}
-  />
+  {
+    links && links.length > 0 && (
+      <Heading
+        text={heading}
+        as="h6"
+        {size}
+      />
+    )
+  }
   <Links
     {size}
     {links}

package/src/components/Proof.astro

@@ -0,0 +1,52 @@
+---
+import type { ComponentProps, HTMLAttributes } from 'astro/types'
+import Avatars from 'fulldev-ui/components/Avatars.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Label from 'fulldev-ui/components/Label.astro'
+import Rating from 'fulldev-ui/components/Rating.astro'
+
+interface Props extends HTMLAttributes<'div'> {
+  avatar?: ComponentProps<typeof Avatars>['avatar']
+  avatars?: ComponentProps<typeof Avatars>['avatars']
+  rating?: number | undefined
+  text?: string | undefined
+}
+
+const { avatar, avatars, rating, text, ...rest } = Astro.props
+---
+
+<Element
+  class:list="proof"
+  {...rest}
+>
+  <Avatars
+    {avatar}
+    {avatars}
+  />
+  <Element class="proof-segment">
+    <Rating
+      score={rating}
+      size="sm"
+    />
+    <Label
+      size="md"
+      text={text}
+    />
+  </Element>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .proof {
+      @apply flex items-center;
+
+      > .avatar {
+        @apply -mr-5 last-of-type:mr-2;
+      }
+
+      .proof-segment {
+        @apply flex flex-col gap-1;
+      }
+    }
+  }
+</style>

package/src/components/Select.astro

@@ -5,7 +5,7 @@ import Icon from 'fulldev-ui/components/Icon.astro'
 import Label from 'fulldev-ui/components/Label.astro'
 
 interface Props extends HTMLAttributes<'select'> {
-  show?: any
+  size?: 'sm' | 'md' | 'lg' | undefined
   label?: string | undefined
   placeholder?: string | undefined
   options?: string[] | undefined

package/src/components/Tagline.astro

@@ -23,26 +23,26 @@ const { text, ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .tagline {
-      @apply font-semibold leading-tight text-primary;
+      @apply font-medium text-primary;
 
       &.size-xs {
-        @apply text-xs;
+        @apply text-xs leading-tight;
       }
 
       &.size-sm {
-        @apply text-sm;
+        @apply text-sm leading-tight;
       }
 
       &.size-md {
-        @apply text-base;
+        @apply text-base leading-tight;
       }
 
       &.size-lg {
-        @apply text-lg;
+        @apply text-lg leading-tight;
       }
 
       &.size-xl {
-        @apply text-xl;
+        @apply text-xl leading-tight;
       }
     }
   }

package/src/components/Toc.astro

@@ -3,20 +3,17 @@ 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 Link from 'fulldev-ui/components/Link.astro'
+import Links from './Links.astro'
 
 interface Props extends HTMLAttributes<'div'> {
-  headings?: MarkdownHeading[] | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
   heading?: string | undefined
+  headings?: MarkdownHeading[] | undefined
 }
 
-const { headings, heading, ...rest } = Astro.props
-
-const filteredHeadings = headings?.filter(
-  (heading: any) => heading.depth >= 2 && heading.depth <= 4
-)
+const { size = 'md', heading, headings, ...rest } = Astro.props
 
-const h1 = headings?.find((heading: any) => heading.depth === 1)
+const filteredHeadings = headings?.filter((heading: any) => heading.depth <= 4)
 
 const links = filteredHeadings?.map((button: any) => ({
   text: button.text,
@@ -27,34 +24,39 @@ const links = filteredHeadings?.map((button: any) => ({
 
 <Element
   class:list="toc"
-  show={filteredHeadings?.length}
   {...rest}
 >
-  <Heading text={h1?.text || heading} />
   {
-    links?.map((link) => (
-      <Link
-        variant="muted"
+    (links?.length || 0) > 0 && (
+      <Heading
+        as="h6"
+        text={heading}
         size="sm"
-        {...link}
       />
-    ))
+    )
   }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .toc {
-      @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 {
-        @apply pl-3;
-      }
-
-      .depth-4 {
-        @apply relative pl-6;
+  <Links
+    {size}
+    {links}
+  />
+
+  <style is:global>
+    @layer fulldev {
+      .toc {
+        @apply flex flex-col gap-2;
+
+        .link:first-child {
+          @apply font-bold text-foreground;
+        }
+
+        .link.depth-3 {
+          @apply pl-3;
+        }
+
+        .link.depth-4 {
+          @apply pl-6;
+        }
       }
     }
-  }
-</style>
+  </style>
+</Element>

package/src/content/config.ts

@@ -1,4 +1,5 @@
 import { defineCollection } from 'astro:content'
+import { cardSchema } from 'fulldev-ui/schemas/card.ts'
 import { pageSchema } from 'fulldev-ui/schemas/page.ts'
 
 export const collections = {
@@ -10,4 +11,8 @@ export const collections = {
     type: 'data',
     schema: pageSchema,
   }),
+  records: defineCollection({
+    type: 'data',
+    schema: cardSchema,
+  }),
 }