@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

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

@@ -0,0 +1,276 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+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": "lg: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": "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,72 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+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": "",
+    "title": "text-3xl sm:text-4xl text-pretty tracking-tight font-bold text-highlighted",
+    "description": "text-base sm:text-lg text-muted",
+    "links": "mt-8 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": "lg: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,31 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative",
+    "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"
+      }
+    },
+    "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,46 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+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": "",
+    "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",
+    "links": "mt-10 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-marquee.ts

@@ -0,0 +1,66 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+export default {
+  "slots": {
+    "root": "group relative flex items-center overflow-hidden gap-(--gap) [--gap:--spacing(16)] [--duration:20s]",
+    "content": "flex items-center shrink-0 justify-around gap-(--gap) min-w-max"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "content": "w-full"
+      },
+      "vertical": {
+        "content": "h-full"
+      }
+    },
+    "pauseOnHover": {
+      "true": {
+        "content": "group-hover:[animation-play-state:paused]"
+      }
+    },
+    "reverse": {
+      "true": {
+        "content": "[animation-direction:reverse]"
+      }
+    },
+    "overlay": {
+      "true": {
+        "root": "before:absolute before:pointer-events-none before:content-[\"\"] before:z-2 before:from-default before:to-transparent after:absolute after:pointer-events-none after:content-[\"\"] after:z-2 after:from-default after:to-transparent"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "class": {
+        "root": "flex-row",
+        "content": "flex-row animate-[marquee_var(--duration)_linear_infinite] rtl:animate-[marquee-rtl_var(--duration)_linear_infinite] backface-hidden"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "overlay": true,
+      "class": {
+        "root": "before:inset-y-0 before:left-0 before:h-full before:w-1/3 before:bg-gradient-to-r after:inset-y-0 after:right-0 after:h-full after:w-1/3 after:bg-gradient-to-l backface-hidden"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "class": {
+        "root": "flex-col",
+        "content": "flex-col animate-[marquee-vertical_var(--duration)_linear_infinite] rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] h-[fit-content] backface-hidden"
+      }
+    },
+    {
+      "orientation": "vertical" as typeof orientation[number],
+      "overlay": true,
+      "class": {
+        "root": "before:inset-x-0 before:top-0 before:w-full before:h-1/3 before:bg-gradient-to-b after:inset-x-0 after:bottom-0 after:w-full after:h-1/3 after:bg-gradient-to-t backface-hidden"
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,88 @@
+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": "lg:order-last"
+      }
+    },
+    "headline": {
+      "true": {
+        "headline": "font-semibold text-primary flex items-center gap-1.5"
+      }
+    },
+    "title": {
+      "true": {
+        "description": "mt-6"
+      }
+    },
+    "description": {
+      "true": ""
+    },
+    "body": {
+      "true": ""
+    },
+    "features": {
+      "true": "",
+      "false": ""
+    }
+  },
+  "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"
+      }
+    }
+  ]
+}