@eslamdevui/ui 3.2.0-beta.2 → 3.2.1

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/user.ts

@@ -0,0 +1,106 @@
+const orientation = [
+  "horizontal",
+  "vertical"
+] as const
+
+const size = [
+  "3xs",
+  "2xs",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative group/user",
+    "wrapper": "",
+    "name": "font-medium",
+    "description": "text-muted",
+    "avatar": "shrink-0"
+  },
+  "variants": {
+    "orientation": {
+      "horizontal": {
+        "root": "flex items-center"
+      },
+      "vertical": {
+        "root": "flex flex-col"
+      }
+    },
+    "to": {
+      "true": {
+        "name": [
+          "text-default peer-hover:text-highlighted",
+          "transition-colors"
+        ],
+        "description": [
+          "peer-hover:text-toned",
+          "transition-colors"
+        ],
+        "avatar": "transform transition-transform duration-200 group-hover/user:scale-115"
+      },
+      "false": {
+        "name": "text-highlighted",
+        "description": ""
+      }
+    },
+    "size": {
+      "3xs": {
+        "root": "gap-1",
+        "wrapper": "flex items-center gap-1",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "2xs": {
+        "root": "gap-1.5",
+        "wrapper": "flex items-center gap-1.5",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "xs": {
+        "root": "gap-1.5",
+        "wrapper": "flex items-center gap-1.5",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "sm": {
+        "root": "gap-2",
+        "name": "text-xs",
+        "description": "text-xs"
+      },
+      "md": {
+        "root": "gap-2",
+        "name": "text-sm",
+        "description": "text-xs"
+      },
+      "lg": {
+        "root": "gap-2.5",
+        "name": "text-sm",
+        "description": "text-sm"
+      },
+      "xl": {
+        "root": "gap-2.5",
+        "name": "text-base",
+        "description": "text-sm"
+      },
+      "2xl": {
+        "root": "gap-3",
+        "name": "text-base",
+        "description": "text-base"
+      },
+      "3xl": {
+        "root": "gap-3",
+        "name": "text-lg",
+        "description": "text-base"
+      }
+    }
+  },
+  "defaultVariants": {
+    "size": "md" as typeof size[number]
+  }
+}

package/LICENSE.md

@@ -1,9 +1,9 @@
-MIT License
-
-Copyright (c) 2023 NuxtLabs
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+MIT License
+
+Copyright (c) 2023 NuxtLabs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,147 +1,147 @@
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/91ceab67-89ce-4ef4-8678-4402a92baca5">
-  <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
-  <img alt="Nuxt UI" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
-</picture>
-
-# Nuxt UI
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
-
-> [!NOTE]
-> You are on the `v3` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
-
-> [!TIP]
-> **Looking for more components ?**
-> Check out [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium Vue components, composables, and utilities built on top of Nuxt UI for faster and more powerful app development.
-
-## Documentation
-
-Visit https://ui.nuxt.com to explore the documentation.
-
-## Installation
-
-```bash [pnpm]
-pnpm add @eslamdevui/ui
-```
-
-```bash [yarn]
-yarn add @eslamdevui/ui
-```
-
-```bash [npm]
-npm install @eslamdevui/ui
-```
-
-```bash [bun]
-bun add @eslamdevui/ui
-```
-
-### Nuxt
-
-1. Add the Nuxt UI module in your `nuxt.config.ts`:
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  modules: ['@eslamdevui/ui']
-})
-```
-
-2. Import Tailwind CSS and Nuxt UI in your CSS:
-
-```css [assets/css/main.css]
-@import "tailwindcss";
-@import "@eslamdevui/ui";
-```
-
-Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/nuxt).
-
-### Vue
-
-1. Add the Nuxt UI Vite plugin in your `vite.config.ts`:
-
-```ts [vite.config.ts]
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import ui from '@eslamdevui/ui/vite'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    ui()
-  ]
-})
-```
-
-2. Use the Nuxt UI Vue plugin in your `main.ts`:
-
-```ts [main.ts]
-import { createApp } from 'vue'
-import { createRouter, createWebHistory } from 'vue-router'
-import ui from '@eslamdevui/ui/vue-plugin'
-import App from './App.vue'
-
-const app = createApp(App)
-
-const router = createRouter({
-  routes: [],
-  history: createWebHistory()
-})
-
-app.use(router)
-app.use(ui)
-
-app.mount('#app')
-```
-
-3. Import Tailwind CSS and Nuxt UI in your CSS:
-
-```css [assets/main.css]
-@import "tailwindcss";
-@import "@eslamdevui/ui";
-```
-
-Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).
-
-## Contribution
-
-Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
-
-- Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
-- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contribution) to share your suggestions.
-
-## Local Development
-
-Follow the docs to [set up your local development environment](https://ui.nuxt.com/getting-started/contribution#local-development) and contribute.
-
-## Credits
-
-- [nuxt/nuxt](https://github.com/nuxt/nuxt)
-- [nuxt/icon](https://github.com/nuxt/icon)
-- [nuxt/fonts](https://github.com/nuxt/fonts)
-- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
-- [unovue/reka-ui](https://github.com/unovue/reka-ui)
-- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
-- [vueuse/vueuse](https://github.com/vueuse/vueuse)
-
-## License
-
-Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/@eslamdevui/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/@eslamdevui/ui
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/@eslamdevui/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npm.chart.dev/@eslamdevui/ui
-
-[license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://github.com/nuxt/ui/blob/v3/LICENSE.md
-
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/user-attachments/assets/91ceab67-89ce-4ef4-8678-4402a92baca5">
+  <source media="(prefers-color-scheme: light)" srcset="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
+  <img alt="Nuxt UI" src="https://github.com/user-attachments/assets/51526d6d-e5ec-41b4-aa37-242dec1cdb27">
+</picture>
+
+# Nuxt UI
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Nuxt UI harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
+
+> [!NOTE]
+> You are on the `v3` development branch, check out the [v2 branch](https://github.com/nuxt/ui/tree/v2) for Nuxt UI v2.
+
+> [!TIP]
+> **Looking for more components ?**
+> Check out [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium Vue components, composables, and utilities built on top of Nuxt UI for faster and more powerful app development.
+
+## Documentation
+
+Visit https://ui.nuxt.com to explore the documentation.
+
+## Installation
+
+```bash [pnpm]
+pnpm add @eslamdevui/ui
+```
+
+```bash [yarn]
+yarn add @eslamdevui/ui
+```
+
+```bash [npm]
+npm install @eslamdevui/ui
+```
+
+```bash [bun]
+bun add @eslamdevui/ui
+```
+
+### Nuxt
+
+1. Add the Nuxt UI module in your `nuxt.config.ts`:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@eslamdevui/ui']
+})
+```
+
+2. Import Tailwind CSS and Nuxt UI in your CSS:
+
+```css [assets/css/main.css]
+@import "tailwindcss";
+@import "@eslamdevui/ui";
+```
+
+Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/nuxt).
+
+### Vue
+
+1. Add the Nuxt UI Vite plugin in your `vite.config.ts`:
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@eslamdevui/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui()
+  ]
+})
+```
+
+2. Use the Nuxt UI Vue plugin in your `main.ts`:
+
+```ts [main.ts]
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import ui from '@eslamdevui/ui/vue-plugin'
+import App from './App.vue'
+
+const app = createApp(App)
+
+const router = createRouter({
+  routes: [],
+  history: createWebHistory()
+})
+
+app.use(router)
+app.use(ui)
+
+app.mount('#app')
+```
+
+3. Import Tailwind CSS and Nuxt UI in your CSS:
+
+```css [assets/main.css]
+@import "tailwindcss";
+@import "@eslamdevui/ui";
+```
+
+Learn more in the [installation guide](https://ui.nuxt.com/getting-started/installation/vue).
+
+## Contribution
+
+Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:
+
+- Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
+- Suggestions: Have any thoughts to enhance Nuxt UI? We'd love to hear them! Check out the [contribution guide](https://ui.nuxt.com/getting-started/contribution) to share your suggestions.
+
+## Local Development
+
+Follow the docs to [set up your local development environment](https://ui.nuxt.com/getting-started/contribution#local-development) and contribute.
+
+## Credits
+
+- [nuxt/nuxt](https://github.com/nuxt/nuxt)
+- [nuxt/icon](https://github.com/nuxt/icon)
+- [nuxt/fonts](https://github.com/nuxt/fonts)
+- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
+- [unovue/reka-ui](https://github.com/unovue/reka-ui)
+- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
+- [vueuse/vueuse](https://github.com/vueuse/vueuse)
+
+## License
+
+Licensed under the [MIT license](https://github.com/nuxt/ui/blob/v3/LICENSE.md).
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@eslamdevui/ui/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/@eslamdevui/ui
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/@eslamdevui/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npm.chart.dev/@eslamdevui/ui
+
+[license-src]: https://img.shields.io/github/license/nuxt/ui.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://github.com/nuxt/ui/blob/v3/LICENSE.md
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com