fulldev-ui 0.2.10 → 0.2.12

package/package.json

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

package/src/components/_Tag.astro

@@ -27,7 +27,8 @@ const {
 } = Astro.props
 
 const slot = await Astro.slots.render('default')
-const hasContent = (str?: string) => str && str.trim().length > 0
+const hasContent = (str?: string) =>
+  typeof str === 'string' && str.trim().length > 0
 const render =
   ifProp == 'content'
     ? hasContent(slot) || hasContent(html) || hasContent(text)

package/src/components/base/Button.astro

@@ -7,7 +7,7 @@ type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
   ComponentProps<typeof Tag> & {
     html?: string
     text?: string
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link'
     icon?: ComponentProps<typeof Icon> | ComponentProps<typeof Icon>['name']
   }
 
@@ -53,6 +53,20 @@ const { as = 'a', variant = 'primary', icon, ...rest } = Astro.props
     text-decoration: none;
     white-space: nowrap;
 
+    &.variant-link {
+      --background: transparent;
+      --hover: transparent;
+      box-shadow: none !important;
+      border-color: transparent;
+      background-color: transparent;
+      padding: 0;
+      font-weight: 400;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
     &:hover {
       background-color: var(--hover);
     }

package/src/components/base/Checkbox.astro

@@ -8,7 +8,7 @@ const { as = 'input', type = 'checkbox', name, ...rest } = Astro.props
 ---
 
 <Tag
-  class:list={['full-checkbox']}
+  class:list={['checkbox']}
   if={true}
   {as}
   type="checkbox"

package/src/components/base/Radio.astro

@@ -8,7 +8,7 @@ const { as = 'input', type = 'radio', name, ...rest } = Astro.props
 ---
 
 <Tag
-  class:list={['full-radio']}
+  class:list={['radio']}
   if={true}
   {as}
   type="radio"

package/src/components/base/Rating.astro

@@ -5,7 +5,7 @@ import Icon from './Icon.astro'
 
 type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
   ComponentProps<typeof Tag> & {
-    value: number | string
+    value?: number | string
   }
 
 const { variant = 'accent', value = Astro.props.html, ...rest } = Astro.props

package/src/components/segment/Card.astro

@@ -4,7 +4,7 @@ import Tag from '../_Tag.astro'
 
 type Props<As extends HTMLTag = 'a'> = Polymorphic<{ as: As }> &
   ComponentProps<typeof Tag> & {
-    structure?: 'stack' | 'group' | 'split' | 'spread'
+    structure?: 'stack' | 'group' | 'split' | 'spread' | 'row'
     align?: 'start' | 'center' | 'end' | 'stretch'
     variant?: 'base' | 'raised' | 'primary'
     frame?: 'fill' | 'panel'
@@ -56,7 +56,6 @@ const {
     }
 
     &.frame-panel {
-      gap: 0;
       border: 1px solid var(--border);
       border-radius: var(--radius-2);
       background-color: var(--background);

package/src/components/structure/Row.astro

@@ -0,0 +1,26 @@
+---
+import type { ComponentProps, HTMLTag, Polymorphic } from 'astro/types'
+import Tag from '../_Tag.astro'
+
+type Props<As extends HTMLTag = 'div'> = Polymorphic<{ as: As }> &
+  ComponentProps<typeof Tag>
+
+const { ...rest } = Astro.props
+---
+
+<Tag
+  class:list={['row']}
+  {...rest}
+>
+  <slot />
+</Tag>
+
+<style is:global lang="scss">
+  @import '../../css/utils.scss';
+
+  @include component('row') {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+  }
+</style>

package/src/components/typography/Label.astro

@@ -9,7 +9,7 @@ type Props<As extends HTMLTag = 'label'> = Polymorphic<{ as: As }> &
     variant?: 'base' | 'muted' | 'accent'
   }
 
-const { as = 'label', text, html, ...rest } = Astro.props
+const { as = 'label', ...rest } = Astro.props
 ---
 
 <Tag

package/src/css/colors.css

@@ -102,7 +102,9 @@
 :where([class*='theme-']),
 .variant-base,
 .variant-base
-  [class*='density-']:not(.variant-base [class*='variant-'] [class*='theme-']) {
+  [class*='density-']:not(
+    .variant-base [class*='variant-'] [class*='theme-']
+  ):not(.variant-base[class*='variant-'][class*='theme-']) {
   --background: var(--base-background);
   --hover: var(--base-hover);
   --border: var(--base-border);
@@ -114,7 +116,7 @@
 .variant-primary
   [class*='density-']:not(
     .variant-primary [class*='variant-'] [class*='theme-']
-  ) {
+  ):not(.variant-primary[class*='variant-'][class*='theme-']) {
   --background: var(--primary-background, var(--base-foreground));
   --hover: var(--primary-hover, var(--base-hover));
   --border: var(--primary-border, transparent);
@@ -126,7 +128,7 @@
 .variant-secondary
   [class*='density-']:not(
     .variant-secondary [class*='variant-'] [class*='theme-']
-  ) {
+  ):not(.variant-secondary[class*='variant-'][class*='theme-']) {
   --background: var(--secondary-background, var(--base-background));
   --hover: var(--secondary-hover, var(--base-hover));
   --border: var(--secondary-border, transparent);
@@ -138,7 +140,7 @@
 .variant-accent
   [class*='density-']:not(
     .variant-accent [class*='variant-'] [class*='theme-']
-  ) {
+  ):not(.variant-accent[class*='variant-'][class*='theme-']) {
   --background: var(--accent-background, var(--base-background));
   --hover: var(--accent-hover, var(--base-hover));
   --border: var(--accent-border, var(--base-border));
@@ -150,7 +152,7 @@
 .variant-muted
   [class*='density-']:not(
     .variant-muted [class*='variant-'] [class*='theme-']
-  ) {
+  ):not(.variant-muted[class*='variant-'][class*='theme-']) {
   --background: var(--muted-background, var(--base-background));
   --hover: var(--muted-hover, var(--base-hover));
   --border: var(--muted-border, var(--base-border));
@@ -162,7 +164,7 @@
 .variant-ghost
   [class*='density-']:not(
     .variant-ghost [class*='variant-'] [class*='theme-']
-  ) {
+  ):not(.variant-ghost[class*='variant-'][class*='theme-']) {
   --background: var(--ghost-background, transparent);
   --hover: var(--ghost-hover, var(--base-hover));
   --border: var(--ghost-border, transparent);
@@ -174,7 +176,7 @@
 .variant-outline
   [class*='density-']:not(
     .variant-outline [class*='variant-'] [class*='theme-']
-  ) {
+  ):not(.variant-outline[class*='variant-'][class*='theme-']) {
   --background: var(--outline-background, transparent);
   --hover: var(--outline-hover, var(--base-hover));
   --border: var(--outline-border, var(--base-border));
@@ -186,7 +188,7 @@
 .variant-raised
   [class*='density-']:not(
     .variant-raised [class*='variant-'] [class*='theme-']
-  ) {
+  ):not(.variant-raised[class*='variant-'][class*='theme-']) {
   --background: var(--raised-background, var(--base-background));
   --hover: var(--raised-hover, var(--base-hover));
   --border: var(--raised-border, var(--base-border));

package/src/css/sizes.css

@@ -135,7 +135,9 @@
 
 .size-sm,
 .size-sm
-  [class*='density-']:not(.size-sm [class*='size-'] [class*='density-']) {
+  [class*='density-']:not(.size-sm [class*='size-'] [class*='density-']):not(
+    .size-sm [class*='size-'][class*='density-']
+  ) {
   --space-1: var(--space-sm-1);
   --space-2: var(--space-sm-2);
   --space-3: var(--space-sm-3);
@@ -162,7 +164,9 @@
 :where([class*='density-']),
 .size-md,
 .size-md
-  [class*='density-']:not(.size-md [class*='size-'] [class*='density-']) {
+  [class*='density-']:not(.size-md [class*='size-'] [class*='density-']):not(
+    .size-md [class*='size-'][class*='density-']
+  ) {
   --space-1: var(--space-md-1);
   --space-2: var(--space-md-2);
   --space-3: var(--space-md-3);
@@ -187,7 +191,9 @@
 
 .size-lg,
 .size-lg
-  [class*='density-']:not(.size-lg [class*='size-'] [class*='density-']) {
+  [class*='density-']:not(.size-lg [class*='size-'] [class*='density-']):not(
+    .size-lg [class*='size-'][class*='density-']
+  ) {
   --space-1: var(--space-lg-1);
   --space-2: var(--space-lg-2);
   --space-3: var(--space-lg-3);

package/src/css/styles.css

@@ -2,7 +2,6 @@
 .full {
   --transition: cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
   --border-width: 1px;
-  --border-radius: 1;
 
   --font-family: 'IBM Plex Sans', sans-serif;
   --font-weight: 400;

package/src/index.ts

@@ -43,6 +43,7 @@ export { default as Carousel } from './components/structure/Carousel.astro'
 export { default as Grid } from './components/structure/Grid.astro'
 export { default as Group } from './components/structure/Group.astro'
 export { default as Masonry } from './components/structure/Masonry.astro'
+export { default as Row } from './components/structure/Row.astro'
 export { default as Split } from './components/structure/Split.astro'
 export { default as Spread } from './components/structure/Spread.astro'
 export { default as Stack } from './components/structure/Stack.astro'

package/src/layouts/Layout.astro

@@ -5,9 +5,9 @@ import Body from '../components/segment/Body.astro'
 import Head from '../components/utility/Head.astro'
 
 interface Props extends ComponentProps<typeof Tag> {
-  title: ComponentProps<typeof Head>['title']
-  description: ComponentProps<typeof Head>['description']
-  image: ComponentProps<typeof Head>['image']
+  title?: ComponentProps<typeof Head>['title']
+  description?: ComponentProps<typeof Head>['description']
+  image?: ComponentProps<typeof Head>['image']
   head?: ComponentProps<typeof Head>
   body?: ComponentProps<typeof Body>
 }