fulldev-ui 0.2.11 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.2.11",
+  "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/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'

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/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>
 }