fulldev-ui 0.6.2 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/Contact1.astro

@@ -1,7 +1,5 @@
 ---
-import Button from 'fulldev-ui/components/Button.astro'
 import Channels from 'fulldev-ui/components/Channels.astro'
-import Fields from 'fulldev-ui/components/Fields.astro'
 import Form from 'fulldev-ui/components/Form.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
@@ -58,13 +56,8 @@ const {
       <Form
         action="/thank-you"
         method="POST"
-      >
-        <Fields fields={form?.fields} />
-        <Button
-          type="submit"
-          text={form?.submit}
-        />
-      </Form>
+        {...form}
+      />
       <Image {...image} />
     </Prose>
   </Container>

package/src/blocks/Contact2.astro

@@ -1,7 +1,5 @@
 ---
-import Button from 'fulldev-ui/components/Button.astro'
 import Channels from 'fulldev-ui/components/Channels.astro'
-import Fields from 'fulldev-ui/components/Fields.astro'
 import Form from 'fulldev-ui/components/Form.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
@@ -60,13 +58,8 @@ const {
         <Form
           action="/thank-you"
           method="POST"
-        >
-          <Fields fields={form?.fields} />
-          <Button
-            type="submit"
-            text={form?.submit}
-          />
-        </Form>
+          {...form}
+        />
       </Prose>
       <Image {...image} />
     </Split>

package/src/blocks/Hero1.astro

@@ -1,6 +1,6 @@
 ---
+import Badge from 'fulldev-ui/components/Badge.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
-import Chip from 'fulldev-ui/components/Chip.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
@@ -16,7 +16,7 @@ interface Props extends BlockSchema {}
 
 const {
   depth = 2,
-  chip,
+  badge,
   tagline,
   heading,
   paragraph,
@@ -35,9 +35,9 @@ const {
   <Container class="flex flex-col items-center gap-16">
     <Prose align="center">
       <Proof {...proof} />
-      <Chip
+      <Badge
         size="lg"
-        {...chip}
+        {...badge}
       />
       <Tagline
         size="sm"

package/src/components/Badge.astro

@@ -7,16 +7,27 @@ interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
   size?: 'sm' | 'md' | 'lg' | undefined
   text?: string | undefined
   icon?: string | undefined
+  href?: string | undefined
 }
 
-const { variant = 'outline', size = 'md', text, icon, ...rest } = Astro.props
+const {
+  variant = 'outline',
+  size = 'md',
+  text,
+  icon,
+  href,
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  ...rest
+} = Astro.props
 ---
 
 <Element
   class:list="badge"
-  as={rest.href ? 'a' : 'div'}
+  as={href ? 'a' : 'div'}
   {variant}
   {size}
+  {href}
+  {target}
   {...rest}
 >
   <Fragment set:html={text} />
@@ -27,6 +38,20 @@ const { variant = 'outline', size = 'md', text, icon, ...rest } = Astro.props
   @layer fulldev {
     .badge {
       @apply inline-flex h-6 items-center justify-center whitespace-nowrap rounded-full px-2.5 text-xs font-medium leading-none ring-offset-background;
+      @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;

package/src/components/Button.astro

@@ -11,16 +11,27 @@ interface Props
   size?: 'sm' | 'md' | 'lg' | undefined
   text?: string | undefined
   icon?: string | undefined
+  href?: string | undefined
 }
 
-const { variant = 'primary', size = 'md', text, icon, ...rest } = Astro.props
+const {
+  variant = 'primary',
+  size = 'md',
+  text,
+  icon,
+  href,
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  ...rest
+} = Astro.props
 ---
 
 <Element
   class:list={['button']}
-  as={rest.href ? 'a' : rest.for ? 'label' : 'button'}
+  as={href ? 'a' : rest.for ? 'label' : 'button'}
   {variant}
   {size}
+  {href}
+  {target}
   {...rest}
 >
   <Element as="span">

package/src/components/Checkbox.astro

@@ -12,9 +12,8 @@ interface Props extends HTMLAttributes<'input'> {
 const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
 ---
 
-<Element
+<Label
   class:list="checkbox"
-  as="label"
   for={id}
   {size}
 >
@@ -32,12 +31,8 @@ const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
     name="check"
     {size}
   />
-  <Label
-    for={id}
-    text={label}
-    {size}
-  />
-</Element>
+  <Fragment set:html={label} />
+</Label>
 
 <style is:global>
   @layer fulldev {

package/src/components/Form.astro

@@ -2,24 +2,14 @@
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Input from 'fulldev-ui/components/Input.astro'
-import Select from 'fulldev-ui/components/Select.astro'
-import Textarea from 'fulldev-ui/components/Textarea.astro'
+import Fields from 'fulldev-ui/components/Fields.astro'
 
 interface Props extends HTMLAttributes<'form'> {
-  submit?: ComponentProps<typeof Button>['text']
-  fields?:
-    | (
-        | ComponentProps<typeof Input>
-        | ComponentProps<typeof Select>
-        | (ComponentProps<typeof Textarea> & {
-            type?: 'textarea' | undefined
-          })
-      )[]
-    | undefined
+  fields?: ComponentProps<typeof Fields>['fields']
+  button?: ComponentProps<typeof Button> | undefined
 }
 
-const { fields, submit, ...rest } = Astro.props
+const { fields, button, ...rest } = Astro.props
 ---
 
 <Element
@@ -27,18 +17,11 @@ const { fields, submit, ...rest } = Astro.props
   as="form"
   {...rest}
 >
-  {
-    fields?.map((field) => {
-      if ('options' in field) return <Select {...field} />
-      if ('type' in field && field.type === 'textarea')
-        return <Textarea {...field} />
-      return <Input {...(field as any)} />
-    })
-  }
+  <Fields {fields} />
   <slot />
   <Button
     type="submit"
-    text={submit}
+    {...button}
   />
 </Element>
 

package/src/components/Head.astro

@@ -50,6 +50,7 @@ const src = image?.src && Astro.url.origin + image.src
   />
 
   <Fragment set:html={code} />
+  <slot />
 
   <script is:inline define:vars={{ theme }}>
     function setTheme(document) {

package/src/components/Input.astro

@@ -23,22 +23,13 @@ const {
 } = Astro.props
 ---
 
-<Element
+<Label
   class:list="input"
-  as="label"
   for={id}
   {size}
   {...rest}
 >
-  <Label
-    for={name}
-    text={label}
-    {size}
-  />
-  <Icon
-    name={icon}
-    {size}
-  />
+  <Fragment set:html={label} />
   <Element
     class:list="input-input"
     as="input"
@@ -49,7 +40,11 @@ const {
     {type}
     {value}
   />
-</Element>
+  <Icon
+    name={icon}
+    {size}
+  />
+</Label>
 
 <style is:global>
   @layer fulldev {

package/src/components/Link.astro

@@ -8,17 +8,28 @@ interface Props extends HTMLAttributes<'a'> {
   size?: 'sm' | 'md' | 'lg' | undefined
   text?: string | undefined
   icon?: string | undefined
+  href?: string | undefined
 }
 
-const { variant = 'muted', size = 'md', text, icon, ...rest } = Astro.props
+const {
+  href,
+  variant = 'muted',
+  size = 'md',
+  text,
+  icon,
+  target = href?.startsWith('http') ? '_blank' : undefined,
+  ...rest
+} = Astro.props
 ---
 
 <Element
   class:list="link"
   as="a"
-  current={`/${Astro.params.page}/` === rest.href}
+  current={`/${Astro.params.page}/` === href}
   {variant}
   {size}
+  {href}
+  {target}
   {...rest}
 >
   <Fragment set:html={text} />

package/src/components/List.astro

@@ -23,9 +23,9 @@ const { as = 'ul', items, icon, ...rest } = Astro.props
     items?.map((item) => (
       <Element as="li">
         <Icon name={icon} />
-        <span>
+        <Element as="span">
           <Fragment set:html={item} />
-        </span>
+        </Element>
       </Element>
     ))
   }

package/src/components/Menu.astro

@@ -2,9 +2,8 @@
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
-import type Link from 'fulldev-ui/components/Link.astro'
+import Link from 'fulldev-ui/components/Link.astro'
 import type { ComponentProps } from 'svelte'
-import Links from './Links.astro'
 
 interface Props extends HTMLAttributes<'div'> {
   size?: 'sm' | 'md' | 'lg' | undefined
@@ -17,6 +16,7 @@ const { size = 'md', heading, links, ...rest } = Astro.props
 
 <Element
   class:list="menu"
+  as="menu"
   {...rest}
 >
   {
@@ -28,10 +28,16 @@ const { size = 'md', heading, links, ...rest } = Astro.props
       />
     )
   }
-  <Links
-    {size}
-    {links}
-  />
+  {
+    links?.map((link) => (
+      <Element as="li">
+        <Link
+          {size}
+          {...link}
+        />
+      </Element>
+    ))
+  }
 </Element>
 
 <style is:global>

package/src/components/Select.astro

@@ -24,47 +24,44 @@ const {
 } = Astro.props
 ---
 
-<Element
-  class:list="select"
-  show={options}
-  as="label"
-  for={id}
-  {size}
->
-  <Label
-    for={name}
-    text={label}
-  />
-  <Icon name="chevron-down" />
-  <Element
-    class:list="select-select"
-    as="select"
-    {id}
-    {name}
-    {...rest}
-  >
-    <Element
-      class:list="select-option"
-      as="option"
-      value={placeholder}
-      set:html={placeholder}
-      disabled
-      selected
-    />
-    {
-      options?.map((option: any) => (
+{
+  options && (
+    <Label
+      class:list="select"
+      for={id}
+      {size}
+    >
+      <Fragment set:html={label} />
+      <Element
+        class:list="select-select"
+        as="select"
+        {id}
+        {name}
+        {...rest}
+      >
         <Element
           class:list="select-option"
           as="option"
-          selected={value === option}
-          set:html={option}
-          value={option}
+          value={placeholder}
+          set:html={placeholder}
+          disabled
+          selected
         />
-      ))
-    }
-    <slot />
-  </Element>
-</Element>
+        {options?.map((option: any) => (
+          <Element
+            class:list="select-option"
+            as="option"
+            selected={value === option}
+            set:html={option}
+            value={option}
+          />
+        ))}
+        <slot />
+      </Element>
+      <Icon name="chevron-down" />
+    </Label>
+  )
+}
 
 <style is:global>
   @layer fulldev {

package/src/components/Switch.astro

@@ -11,9 +11,8 @@ interface Props extends Omit<HTMLAttributes<'input'>, 'type'> {
 const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
 ---
 
-<Element
+<Label
   class:list="switch"
-  as="label"
   for={id}
   {size}
 >
@@ -32,12 +31,8 @@ const { label, name = label, id = name, size = 'md', ...rest } = Astro.props
     show={id}
     class="switch-mark"
   />
-  <Label
-    for={id}
-    text={label}
-    {size}
-  />
-</Element>
+  <Fragment set:html={label} />
+</Label>
 
 <style is:global>
   @layer fulldev {

package/src/components/Textarea.astro

@@ -19,17 +19,12 @@ const {
 } = Astro.props
 ---
 
-<Element
+<Label
   class:list="textarea"
-  as="label"
   for={id}
   {size}
 >
-  <Label
-    for={name}
-    text={label}
-    {size}
-  />
+  <Fragment set:html={label} />
   <Element
     class:list="textarea-textarea"
     as="textarea"
@@ -40,7 +35,7 @@ const {
     {rows}
     {...rest}
   />
-</Element>
+</Label>
 
 <style is:global>
   @layer textarea {

package/src/content/layouts/base.yml

@@ -67,8 +67,6 @@ menus:
         href: /docs/components/channels/
       - text: Checkbox
         href: /docs/components/checkbox/
-      - text: Chip
-        href: /docs/components/chip/
       - text: Heading
         href: /docs/components/heading/
       - text: Icon

package/src/content/pages/docs/components/rating.mdx

@@ -37,7 +37,7 @@ import Rating from 'fulldev-ui/components/Rating.astro'
 import Rating from 'fulldev-ui/components/Rating.astro'
 ---
 
-<Rating size="sm" score={4.92} />
-<Rating size="md" score={4.92} />
-<Rating size="lg" score={4.92} />
+<Rating size="sm" score={5} />
+<Rating size="md" score={5} />
+<Rating size="lg" score={5} />
 ```

package/src/content/pages/docs/structures/carousel.mdx

@@ -0,0 +1,14 @@
+---
+_block: Content7
+title: Carousel
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+## Props
+
+<Props />
+
+## Examples
+
+Please reference the blocks for examples on how to use the wrapper components.

package/src/schemas/{chip.ts → badge.ts}

@@ -1,8 +1,8 @@
 import type { ComponentProps } from 'astro/types'
 import { z } from 'astro:content'
-import type Chip from 'fulldev-ui/components/Chip.astro'
+import type Badge from 'fulldev-ui/components/Badge.astro'
 
-export const chipSchema = z
+export const badgeSchema = z
   .object({
     icon: z.string().optional(),
     text: z.string().optional(),
@@ -11,4 +11,4 @@ export const chipSchema = z
     size: z.enum(['sm', 'md', 'lg']).optional(),
     variant: z.enum(['primary', 'secondary', 'outline']).optional(),
   })
-  .strict() satisfies z.ZodType<ComponentProps<typeof Chip>>
+  .strict() satisfies z.ZodType<ComponentProps<typeof Badge>>

package/src/schemas/block.ts

@@ -1,4 +1,5 @@
 import { z } from 'astro:content'
+import { buttonSchema } from 'fulldev-ui/schemas/button.ts'
 import { cardSchema } from 'fulldev-ui/schemas/card.ts'
 import { menuSchema } from 'fulldev-ui/schemas/menu.ts'
 import { pathSchema } from 'fulldev-ui/schemas/path.ts'
@@ -22,7 +23,7 @@ export const blockSchema = cardSchema
     form: z
       .object({
         fields: z.array(z.any()).optional(),
-        submit: z.string().optional(),
+        button: buttonSchema.optional(),
       })
       .strict()
       .optional(),

package/src/schemas/card.ts

@@ -1,7 +1,7 @@
 import { z } from 'astro:content'
+import { badgeSchema } from 'fulldev-ui/schemas/badge.ts'
 import { buttonSchema } from 'fulldev-ui/schemas/button.ts'
 import { channelSchema } from 'fulldev-ui/schemas/channel.ts'
-import { chipSchema } from 'fulldev-ui/schemas/chip.ts'
 import { imageSchema } from 'fulldev-ui/schemas/image.ts'
 import { linkSchema } from 'fulldev-ui/schemas/link.ts'
 import { logoSchema } from 'fulldev-ui/schemas/logo.ts'
@@ -16,6 +16,7 @@ export const cardSchema = z
     dark: z.boolean().optional(),
     text: z.string().optional(),
     content: z.string().optional(),
+    badge: badgeSchema.optional(),
     tagline: z.string().optional(),
     heading: z.string().optional(),
     paragraph: z.string().optional(),
@@ -25,7 +26,6 @@ export const cardSchema = z
     link: linkSchema.optional(),
     links: linkSchema.array().optional(),
     menus: menuSchema.array().optional(),
-    chip: chipSchema.optional(),
     badges: z.string().array().optional(),
     button: buttonSchema.optional(),
     buttons: buttonSchema.array().optional(),

package/src/structures/Drawer.astro

@@ -21,6 +21,7 @@ const render = slot?.trim().length > 0
     <Element class:list="drawer">
       <Button
         class="drawer-button"
+        role="button"
         for={id}
         {variant}
         {size}

package/src/components/Chip.astro

@@ -1,73 +0,0 @@
----
-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/content/pages/docs/components/chip.mdx

@@ -1,75 +0,0 @@
----
-_block: Content7
-title: Chip
----
-
-import Props from 'fulldev-ui/components/docs/Props.astro'
-
-```astro live
----
-import Chip from 'fulldev-ui/components/Chip.astro'
----
-
-<Chip>Chip</Chip>
-```
-
-## Props
-
-<Props />
-
-## Examples
-
-### `variant`
-
-```astro live
----
-import Chip from 'fulldev-ui/components/Chip.astro'
----
-
-<Chip variant="primary">Primary</Chip>
-<Chip variant="secondary">Secondary</Chip>
-<Chip variant="outline">Outline</Chip>
-```
-
-### `size`
-
-```astro live
----
-import Chip from 'fulldev-ui/components/Chip.astro'
----
-
-<Chip size="sm">Small</Chip>
-<Chip size="md">Medium</Chip>
-<Chip size="lg">Large</Chip>
-```
-
-### `icon`
-
-```astro live
----
-import Chip from 'fulldev-ui/components/Chip.astro'
----
-
-<Chip icon="circle" text="Chip" />
-<Chip icon="circle" />
-```
-
-### `href`
-
-```astro live
----
-import Chip from 'fulldev-ui/components/Chip.astro'
----
-
-<Chip href="#">Link</Chip>
-```
-
-### `text`
-
-```astro live
----
-import Chip from 'fulldev-ui/components/Chip.astro'
----
-
-<Chip text="Chip" />
-```