@falcondev-oss/nuxt-layers-base 0.1.0

package/.nuxt/ui/page-card.ts

@@ -0,0 +1,274 @@
+const variant = [
+  "solid",
+  "outline",
+  "soft",
+  "subtle",
+  "ghost",
+  "naked"
+] as const
+
+const highlightColor = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+const spotlightColor = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative flex rounded-lg",
+    "spotlight": "absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90",
+    "container": "relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6",
+    "wrapper": "flex flex-col flex-1 items-start",
+    "header": "mb-4",
+    "body": "flex-1",
+    "footer": "pt-4 mt-auto",
+    "leading": "inline-flex items-center mb-2.5",
+    "leadingIcon": "size-5 shrink-0 text-primary",
+    "title": "text-base text-pretty font-semibold text-highlighted",
+    "description": "text-[15px] text-pretty"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "container": "lg:grid-cols-2 lg:items-center"
+      },
+      "vertical": {
+        "container": ""
+      }
+    },
+    "reverse": {
+      "true": {
+        "wrapper": "order-last"
+      }
+    },
+    "variant": {
+      "solid": {
+        "root": "bg-inverted text-inverted",
+        "title": "text-inverted",
+        "description": "text-dimmed"
+      },
+      "outline": {
+        "root": "bg-default ring ring-default",
+        "description": "text-muted"
+      },
+      "soft": {
+        "root": "bg-elevated/50",
+        "description": "text-toned"
+      },
+      "subtle": {
+        "root": "bg-elevated/50 ring ring-default",
+        "description": "text-toned"
+      },
+      "ghost": {
+        "description": "text-muted"
+      },
+      "naked": {
+        "container": "p-0 sm:p-0",
+        "description": "text-muted"
+      }
+    },
+    "to": {
+      "true": {
+        "root": [
+          "has-focus-visible:ring-2 has-focus-visible:ring-primary",
+          "transition"
+        ]
+      }
+    },
+    "title": {
+      "true": {
+        "description": "mt-1"
+      }
+    },
+    "highlight": {
+      "true": {
+        "root": "ring-2"
+      }
+    },
+    "highlightColor": {
+      "primary": "",
+      "secondary": "",
+      "success": "",
+      "info": "",
+      "warning": "",
+      "error": "",
+      "neutral": ""
+    },
+    "spotlight": {
+      "true": {
+        "root": "[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]"
+      }
+    },
+    "spotlightColor": {
+      "primary": "",
+      "secondary": "",
+      "success": "",
+      "info": "",
+      "warning": "",
+      "error": "",
+      "neutral": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "variant": "solid" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-inverted/90"
+      }
+    },
+    {
+      "variant": "outline" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-elevated/50"
+      }
+    },
+    {
+      "variant": "soft" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-elevated"
+      }
+    },
+    {
+      "variant": "subtle" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-elevated"
+      }
+    },
+    {
+      "variant": "subtle" as typeof variant[number],
+      "to": true,
+      "highlight": false,
+      "class": {
+        "root": "hover:ring-accented"
+      }
+    },
+    {
+      "variant": "ghost" as typeof variant[number],
+      "to": true,
+      "class": {
+        "root": "hover:bg-elevated/50"
+      }
+    },
+    {
+      "highlightColor": "primary" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-primary"
+      }
+    },
+    {
+      "highlightColor": "secondary" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-secondary"
+      }
+    },
+    {
+      "highlightColor": "success" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-success"
+      }
+    },
+    {
+      "highlightColor": "info" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-info"
+      }
+    },
+    {
+      "highlightColor": "warning" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-warning"
+      }
+    },
+    {
+      "highlightColor": "error" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-error"
+      }
+    },
+    {
+      "highlightColor": "neutral" as typeof highlightColor[number],
+      "highlight": true,
+      "class": {
+        "root": "ring-inverted"
+      }
+    },
+    {
+      "spotlightColor": "primary" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-primary)]"
+      }
+    },
+    {
+      "spotlightColor": "secondary" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-secondary)]"
+      }
+    },
+    {
+      "spotlightColor": "success" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-success)]"
+      }
+    },
+    {
+      "spotlightColor": "info" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-info)]"
+      }
+    },
+    {
+      "spotlightColor": "warning" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-warning)]"
+      }
+    },
+    {
+      "spotlightColor": "error" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-error)]"
+      }
+    },
+    {
+      "spotlightColor": "neutral" as typeof spotlightColor[number],
+      "spotlight": true,
+      "class": {
+        "root": "[--spotlight-color:var(--ui-bg-inverted)]"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "variant": "outline" as typeof variant[number],
+    "highlightColor": "primary" as typeof highlightColor[number],
+    "spotlightColor": "primary" as typeof spotlightColor[number]
+  }
+}

package/.nuxt/ui/page-columns.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "relative column-1 md:columns-2 lg:columns-3 gap-8 space-y-8 *:break-inside-avoid-column *:will-change-transform"
+}

package/.nuxt/ui/page-cta.ts

@@ -0,0 +1,70 @@
+const variant = [
+  "solid",
+  "outline",
+  "soft",
+  "subtle",
+  "naked"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative isolate rounded-xl overflow-hidden",
+    "container": "flex flex-col lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
+    "wrapper": "",
+    "header": "",
+    "title": "text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted",
+    "description": "text-base sm:text-lg text-muted",
+    "body": "mt-8",
+    "footer": "mt-8",
+    "links": "flex flex-wrap gap-x-6 gap-y-3"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "container": "lg:grid-cols-2 lg:items-center",
+        "description": "text-pretty"
+      },
+      "vertical": {
+        "container": "",
+        "title": "text-center",
+        "description": "text-center text-balance",
+        "links": "justify-center"
+      }
+    },
+    "reverse": {
+      "true": {
+        "wrapper": "order-last"
+      }
+    },
+    "variant": {
+      "solid": {
+        "root": "bg-inverted text-inverted",
+        "title": "text-inverted",
+        "description": "text-dimmed"
+      },
+      "outline": {
+        "root": "bg-default ring ring-default",
+        "description": "text-muted"
+      },
+      "soft": {
+        "root": "bg-elevated/50",
+        "description": "text-toned"
+      },
+      "subtle": {
+        "root": "bg-elevated/50 ring ring-default",
+        "description": "text-toned"
+      },
+      "naked": {
+        "description": "text-muted"
+      }
+    },
+    "title": {
+      "true": {
+        "description": "mt-6"
+      }
+    }
+  },
+  "defaultVariants": {
+    "variant": "outline" as typeof variant[number]
+  }
+}

package/.nuxt/ui/page-feature.ts

@@ -0,0 +1,34 @@
+export default {
+  "slots": {
+    "root": "relative rounded-sm",
+    "wrapper": "",
+    "leading": "inline-flex items-center justify-center",
+    "leadingIcon": "size-5 shrink-0 text-primary",
+    "title": "text-base text-pretty font-semibold text-highlighted",
+    "description": "text-[15px] text-pretty text-muted"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "flex items-start gap-2.5",
+        "leading": "p-0.5"
+      },
+      "vertical": {
+        "leading": "mb-2.5"
+      }
+    },
+    "to": {
+      "true": {
+        "root": [
+          "has-focus-visible:ring-2 has-focus-visible:ring-primary",
+          "transition"
+        ]
+      }
+    },
+    "title": {
+      "true": {
+        "description": "mt-1"
+      }
+    }
+  }
+}

package/.nuxt/ui/page-grid.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"
+}

package/.nuxt/ui/page-header.ts

@@ -0,0 +1,18 @@
+export default {
+  "slots": {
+    "root": "relative border-b border-default py-8",
+    "container": "",
+    "wrapper": "flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4",
+    "headline": "mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5",
+    "title": "text-3xl sm:text-4xl text-pretty font-bold text-highlighted",
+    "description": "text-lg text-pretty text-muted",
+    "links": "flex flex-wrap items-center gap-1.5"
+  },
+  "variants": {
+    "title": {
+      "true": {
+        "description": "mt-4"
+      }
+    }
+  }
+}

package/.nuxt/ui/page-hero.ts

@@ -0,0 +1,44 @@
+export default {
+  "slots": {
+    "root": "relative isolate",
+    "container": "flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
+    "wrapper": "",
+    "header": "",
+    "headline": "mb-4",
+    "title": "text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted",
+    "description": "text-lg sm:text-xl/8 text-muted",
+    "body": "mt-10",
+    "footer": "mt-10",
+    "links": "flex flex-wrap gap-x-6 gap-y-3"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "container": "lg:grid-cols-2 lg:items-center",
+        "description": "text-pretty"
+      },
+      "vertical": {
+        "container": "",
+        "headline": "justify-center",
+        "wrapper": "text-center",
+        "description": "text-balance",
+        "links": "justify-center"
+      }
+    },
+    "reverse": {
+      "true": {
+        "wrapper": "order-last"
+      }
+    },
+    "headline": {
+      "true": {
+        "headline": "font-semibold text-primary flex items-center gap-1.5"
+      }
+    },
+    "title": {
+      "true": {
+        "description": "mt-6"
+      }
+    }
+  }
+}

package/.nuxt/ui/page-links.ts

@@ -0,0 +1,25 @@
+export default {
+  "slots": {
+    "root": "flex flex-col gap-3",
+    "title": "text-sm font-semibold flex items-center gap-1.5",
+    "list": "flex flex-col gap-2",
+    "item": "relative",
+    "link": "group text-sm flex items-center gap-1.5 focus-visible:outline-primary",
+    "linkLeadingIcon": "size-5 shrink-0",
+    "linkLabel": "truncate",
+    "linkLabelExternalIcon": "size-3 absolute top-0 text-dimmed"
+  },
+  "variants": {
+    "active": {
+      "true": {
+        "link": "text-primary font-medium"
+      },
+      "false": {
+        "link": [
+          "text-muted hover:text-default",
+          "transition-colors"
+        ]
+      }
+    }
+  }
+}

package/.nuxt/ui/page-list.ts

@@ -0,0 +1,8 @@
+export default {
+  "base": "relative flex flex-col",
+  "variants": {
+    "divide": {
+      "true": "*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px"
+    }
+  }
+}

package/.nuxt/ui/page-logos.ts

@@ -0,0 +1,15 @@
+export default {
+  "slots": {
+    "root": "relative overflow-hidden",
+    "title": "text-lg text-center font-semibold text-highlighted",
+    "logos": "mt-10",
+    "logo": "size-10 shrink-0"
+  },
+  "variants": {
+    "marquee": {
+      "false": {
+        "logos": "flex items-center shrink-0 justify-around gap-(--gap) [--gap:--spacing(16)]"
+      }
+    }
+  }
+}

package/.nuxt/ui/page-section.ts

@@ -0,0 +1,84 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative isolate",
+    "container": "flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+    "wrapper": "",
+    "header": "",
+    "leading": "flex items-center mb-6",
+    "leadingIcon": "size-10 shrink-0 text-primary",
+    "headline": "mb-3",
+    "title": "text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted",
+    "description": "text-base sm:text-lg text-muted",
+    "body": "mt-8",
+    "features": "grid",
+    "footer": "mt-8",
+    "links": "flex flex-wrap gap-x-6 gap-y-3"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "container": "lg:grid-cols-2 lg:items-center",
+        "description": "text-pretty",
+        "features": "gap-4"
+      },
+      "vertical": {
+        "container": "",
+        "headline": "justify-center",
+        "leading": "justify-center",
+        "title": "text-center",
+        "description": "text-center text-balance",
+        "links": "justify-center",
+        "features": "sm:grid-cols-2 lg:grid-cols-3 gap-8"
+      }
+    },
+    "reverse": {
+      "true": {
+        "wrapper": "order-last"
+      }
+    },
+    "headline": {
+      "true": {
+        "headline": "font-semibold text-primary flex items-center gap-1.5"
+      }
+    },
+    "title": {
+      "true": {
+        "description": "mt-6"
+      }
+    },
+    "description": {
+      "true": ""
+    },
+    "body": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "title": true,
+      "class": {
+        "body": "mt-16"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "description": true,
+      "class": {
+        "body": "mt-16"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "body": true,
+      "class": {
+        "footer": "mt-16"
+      }
+    }
+  ]
+}

package/.nuxt/ui/page.ts

@@ -0,0 +1,32 @@
+export default {
+  "slots": {
+    "root": "flex flex-col lg:grid lg:grid-cols-10 lg:gap-10",
+    "left": "lg:col-span-2",
+    "center": "lg:col-span-8",
+    "right": "lg:col-span-2 order-first lg:order-last"
+  },
+  "variants": {
+    "left": {
+      "true": ""
+    },
+    "right": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "left": true,
+      "right": true,
+      "class": {
+        "center": "lg:col-span-6"
+      }
+    },
+    {
+      "left": false,
+      "right": false,
+      "class": {
+        "center": "lg:col-span-10"
+      }
+    }
+  ]
+}

package/.nuxt/ui/pagination.ts

@@ -0,0 +1,13 @@
+export default {
+  "slots": {
+    "root": "",
+    "list": "flex items-center gap-1",
+    "ellipsis": "pointer-events-none",
+    "label": "min-w-5 text-center",
+    "first": "",
+    "prev": "",
+    "item": "",
+    "next": "",
+    "last": ""
+  }
+}