@eslamdevui/ui 3.2.0 → 3.2.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"
+      }
+    }
+  ]
+}

package/.nuxt/ui/pricing-plan.ts

@@ -0,0 +1,101 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+const variant = [
+  "solid",
+  "outline",
+  "soft",
+  "subtle"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6",
+    "header": "",
+    "body": "flex flex-col min-w-0",
+    "footer": "flex flex-col gap-6 items-center",
+    "titleWrapper": "flex items-center gap-3",
+    "title": "text-highlighted text-2xl sm:text-3xl text-pretty font-semibold",
+    "description": "text-muted text-base text-pretty mt-2",
+    "priceWrapper": "flex items-center gap-1",
+    "price": "text-highlighted text-3xl sm:text-4xl font-semibold",
+    "discount": "text-muted line-through text-xl sm:text-2xl",
+    "billing": "flex flex-col justify-between min-w-0",
+    "billingPeriod": "text-toned truncate text-xs font-medium",
+    "billingCycle": "text-muted truncate text-xs font-medium",
+    "features": "flex flex-col gap-3 flex-1 mt-6 grow-0",
+    "feature": "flex items-center gap-2 min-w-0",
+    "featureIcon": "size-5 shrink-0 text-primary",
+    "featureTitle": "text-muted text-sm truncate",
+    "badge": "",
+    "button": "",
+    "tagline": "text-base font-semibold text-default",
+    "terms": "text-xs/5 text-muted text-center text-balance"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default",
+        "body": "lg:col-span-2 pb-6 lg:pb-0 lg:pr-6 justify-center",
+        "footer": "lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto",
+        "features": "lg:grid lg:grid-cols-2 lg:mt-12"
+      },
+      "vertical": {
+        "footer": "justify-end",
+        "priceWrapper": "mt-6"
+      }
+    },
+    "variant": {
+      "solid": {
+        "root": "bg-inverted",
+        "title": "text-inverted",
+        "description": "text-dimmed",
+        "price": "text-inverted",
+        "discount": "text-dimmed",
+        "billingCycle": "text-dimmed",
+        "billingPeriod": "text-dimmed",
+        "featureTitle": "text-dimmed"
+      },
+      "outline": {
+        "root": "bg-default ring ring-default"
+      },
+      "soft": {
+        "root": "bg-elevated/50"
+      },
+      "subtle": {
+        "root": "bg-elevated/50 ring ring-default"
+      }
+    },
+    "highlight": {
+      "true": {
+        "root": "ring-2 ring-inset ring-primary"
+      }
+    },
+    "scale": {
+      "true": {
+        "root": "lg:scale-[1.1] lg:z-[1]"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "variant": "soft" as typeof variant[number],
+      "class": {
+        "root": "divide-accented"
+      }
+    },
+    {
+      "orientation": "horizontal" as typeof orientation[number],
+      "variant": "subtle" as typeof variant[number],
+      "class": {
+        "root": "divide-accented"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "variant": "outline" as typeof variant[number]
+  }
+}

package/.nuxt/ui/pricing-plans.ts

@@ -0,0 +1,27 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+export default {
+  "base": "flex flex-col gap-y-8",
+  "variants": {
+    "orientation": {
+      "horizontal": "lg:grid lg:grid-cols-[repeat(var(--count),minmax(0,1fr))]",
+      "vertical": ""
+    },
+    "compact": {
+      "false": "gap-x-8"
+    },
+    "scale": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "compact": false,
+      "scale": true,
+      "class": "lg:gap-x-13"
+    }
+  ]
+}

package/.nuxt/ui/pricing-table.ts

@@ -0,0 +1,51 @@
+export default {
+  "slots": {
+    "root": "w-full relative",
+    "table": "w-full table-fixed border-separate border-spacing-x-0 hidden md:table",
+    "list": "md:hidden flex flex-col gap-6 w-full",
+    "item": "p-6 flex flex-col border border-default rounded-lg",
+    "caption": "sr-only",
+    "thead": "",
+    "tbody": "",
+    "tr": "",
+    "th": "py-4 font-normal text-left border-b border-default",
+    "td": "px-6 py-4 text-center border-b border-default",
+    "tier": "p-6 text-left font-normal",
+    "tierTitleWrapper": "flex items-center gap-3",
+    "tierTitle": "text-lg font-semibold text-highlighted",
+    "tierDescription": "text-sm font-normal text-muted mt-1",
+    "tierBadge": "truncate",
+    "tierPriceWrapper": "flex items-center gap-1 mt-4",
+    "tierPrice": "text-highlighted text-3xl sm:text-4xl font-semibold",
+    "tierDiscount": "text-muted line-through text-xl sm:text-2xl",
+    "tierBilling": "flex flex-col justify-between min-w-0",
+    "tierBillingPeriod": "text-toned truncate text-xs font-medium",
+    "tierBillingCycle": "text-muted truncate text-xs font-medium",
+    "tierButton": "mt-6",
+    "tierFeatureIcon": "size-5 shrink-0",
+    "section": "mt-6 flex flex-col gap-2",
+    "sectionTitle": "font-semibold text-sm text-highlighted",
+    "feature": "flex items-center justify-between gap-1",
+    "featureTitle": "text-sm text-default",
+    "featureValue": "text-sm text-muted flex justify-center min-w-5"
+  },
+  "variants": {
+    "section": {
+      "true": {
+        "tr": "*:pt-8"
+      }
+    },
+    "active": {
+      "true": {
+        "tierFeatureIcon": "text-primary"
+      }
+    },
+    "highlight": {
+      "true": {
+        "tier": "bg-elevated/50 border-x border-t border-default rounded-t-lg",
+        "td": "bg-elevated/50 border-x border-default",
+        "item": "bg-elevated/50"
+      }
+    }
+  }
+}

package/.nuxt/ui/prose/a.ts

@@ -0,0 +1,6 @@
+export default {
+  "base": [
+    "text-primary border-b border-transparent hover:border-primary font-medium focus-visible:outline-primary [&>code]:border-dashed hover:[&>code]:border-primary hover:[&>code]:text-primary",
+    "transition-colors [&>code]:transition-colors"
+  ]
+}

package/.nuxt/ui/prose/accordion-item.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "pb-4 text-muted *:first:mt-0 *:last:mb-0 *:my-1.5"
+}

package/.nuxt/ui/prose/accordion.ts

@@ -0,0 +1,6 @@
+export default {
+  "slots": {
+    "root": "my-5",
+    "trigger": "text-base"
+  }
+}

package/.nuxt/ui/prose/badge.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "rounded-full"
+}

package/.nuxt/ui/prose/blockquote.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "border-s-4 border-accented ps-4 italic"
+}

package/.nuxt/ui/prose/callout.ts

@@ -0,0 +1,129 @@
+const color = [
+  "primary",
+  "secondary",
+  "success",
+  "info",
+  "warning",
+  "error",
+  "neutral"
+] as const
+
+export default {
+  "slots": {
+    "base": [
+      "group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-default [&_pre]:bg-default [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 [&>*]:last:!mb-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0",
+      "transition-colors"
+    ],
+    "icon": [
+      "size-4 shrink-0 align-sub me-1.5",
+      "transition-colors"
+    ],
+    "externalIcon": [
+      "size-4 align-top absolute right-2 top-2 pointer-events-none",
+      "transition-colors"
+    ]
+  },
+  "variants": {
+    "color": {
+      "primary": {
+        "base": "border border-primary/25 bg-primary/10 text-primary-600 dark:text-primary-300 [&_a]:text-primary [&_a]:hover:border-primary [&_code]:text-primary-600 dark:[&_code]:text-primary-300 [&_code]:border-primary/25 [&_a]:hover:[&>code]:border-primary [&_a]:hover:[&>code]:text-primary [&>ul]:marker:text-primary/50",
+        "icon": "text-primary",
+        "externalIcon": "text-primary-600 dark:text-primary-300"
+      },
+      "secondary": {
+        "base": "border border-secondary/25 bg-secondary/10 text-secondary-600 dark:text-secondary-300 [&_a]:text-secondary [&_a]:hover:border-secondary [&_code]:text-secondary-600 dark:[&_code]:text-secondary-300 [&_code]:border-secondary/25 [&_a]:hover:[&>code]:border-secondary [&_a]:hover:[&>code]:text-secondary [&>ul]:marker:text-secondary/50",
+        "icon": "text-secondary",
+        "externalIcon": "text-secondary-600 dark:text-secondary-300"
+      },
+      "success": {
+        "base": "border border-success/25 bg-success/10 text-success-600 dark:text-success-300 [&_a]:text-success [&_a]:hover:border-success [&_code]:text-success-600 dark:[&_code]:text-success-300 [&_code]:border-success/25 [&_a]:hover:[&>code]:border-success [&_a]:hover:[&>code]:text-success [&>ul]:marker:text-success/50",
+        "icon": "text-success",
+        "externalIcon": "text-success-600 dark:text-success-300"
+      },
+      "info": {
+        "base": "border border-info/25 bg-info/10 text-info-600 dark:text-info-300 [&_a]:text-info [&_a]:hover:border-info [&_code]:text-info-600 dark:[&_code]:text-info-300 [&_code]:border-info/25 [&_a]:hover:[&>code]:border-info [&_a]:hover:[&>code]:text-info [&>ul]:marker:text-info/50",
+        "icon": "text-info",
+        "externalIcon": "text-info-600 dark:text-info-300"
+      },
+      "warning": {
+        "base": "border border-warning/25 bg-warning/10 text-warning-600 dark:text-warning-300 [&_a]:text-warning [&_a]:hover:border-warning [&_code]:text-warning-600 dark:[&_code]:text-warning-300 [&_code]:border-warning/25 [&_a]:hover:[&>code]:border-warning [&_a]:hover:[&>code]:text-warning [&>ul]:marker:text-warning/50",
+        "icon": "text-warning",
+        "externalIcon": "text-warning-600 dark:text-warning-300"
+      },
+      "error": {
+        "base": "border border-error/25 bg-error/10 text-error-600 dark:text-error-300 [&_a]:text-error [&_a]:hover:border-error [&_code]:text-error-600 dark:[&_code]:text-error-300 [&_code]:border-error/25 [&_a]:hover:[&>code]:border-error [&_a]:hover:[&>code]:text-error [&>ul]:marker:text-error/50",
+        "icon": "text-error",
+        "externalIcon": "text-error-600 dark:text-error-300"
+      },
+      "neutral": {
+        "base": "border border-muted bg-muted text-default",
+        "icon": "text-highlighted",
+        "externalIcon": "text-dimmed"
+      }
+    },
+    "to": {
+      "true": "border-dashed"
+    }
+  },
+  "compoundVariants": [
+    {
+      "color": "primary" as typeof color[number],
+      "to": true,
+      "class": {
+        "base": "hover:border-primary",
+        "externalIcon": "group-hover:text-primary"
+      }
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "to": true,
+      "class": {
+        "base": "hover:border-secondary",
+        "externalIcon": "group-hover:text-secondary"
+      }
+    },
+    {
+      "color": "success" as typeof color[number],
+      "to": true,
+      "class": {
+        "base": "hover:border-success",
+        "externalIcon": "group-hover:text-success"
+      }
+    },
+    {
+      "color": "info" as typeof color[number],
+      "to": true,
+      "class": {
+        "base": "hover:border-info",
+        "externalIcon": "group-hover:text-info"
+      }
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "to": true,
+      "class": {
+        "base": "hover:border-warning",
+        "externalIcon": "group-hover:text-warning"
+      }
+    },
+    {
+      "color": "error" as typeof color[number],
+      "to": true,
+      "class": {
+        "base": "hover:border-error",
+        "externalIcon": "group-hover:text-error"
+      }
+    },
+    {
+      "color": "neutral" as typeof color[number],
+      "to": true,
+      "class": {
+        "base": "hover:border-inverted",
+        "externalIcon": "group-hover:text-highlighted"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "color": "neutral" as typeof color[number]
+  }
+}

package/.nuxt/ui/prose/card-group.ts

@@ -0,0 +1,3 @@
+export default {
+  "base": "grid grid-cols-1 sm:grid-cols-2 gap-5 my-5 *:my-0"
+}