@ertugrulozcan97/apexui 0.1.0 → 0.1.1

package/README.md

@@ -1,38 +1,147 @@
-# .
+# ApexUI
 
-This template should help get you started developing with Vue 3 in Vite.
+A Vue 3 UI component library built with Tailwind CSS v4 and TypeScript.
 
-## Recommended IDE Setup
+## Requirements
 
-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+- Vue ≥ 3.4
+- Tailwind CSS ≥ 4.0 (with `@tailwindcss/vite`)
+- `@lucide/vue` ≥ 1.0
 
-## Recommended Browser Setup
+## Installation
 
-- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
-- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+```bash
+npm install @ertugrulozcan97/apexui
+```
+
+## Setup
+
+### 1. Import styles
+
+In your `main.css` (or equivalent), import the library's design tokens and your Tailwind base **before** your own styles:
+
+```css
+@import "tailwindcss";
+@import "@ertugrulozcan97/apexui/style";
+```
+
+### 2. Register the plugin
+
+```ts
+// main.ts
+import { createApp } from "vue"
+import App from "./App.vue"
+import ApexUI from "@ertugrulozcan97/apexui"
+
+const app = createApp(App)
+app.use(ApexUI)
+app.mount("#app")
+```
+
+### 3. Add providers
+
+Place these once in your root `App.vue` template. They are required for toasts and dialogs to work:
+
+```vue
+<template>
+	<UToastProvider />
+	<UDialogProvider />
+	<RouterView />
+</template>
+```
 
-## Customize configuration
+## À la carte usage
 
-See [Vite Configuration Reference](https://vite.dev/config/).
+Import only what you need instead of registering the full plugin:
 
-## Project Setup
+```ts
+import { UButton, UInput, useToast, useDialog } from "@ertugrulozcan97/apexui"
+```
+
+## Components
+
+| Component            | Description                                                                         |
+| -------------------- | ----------------------------------------------------------------------------------- |
+| `UBadge`             | Status badge with variants: `success`, `warning`, `danger`, `info`, `neutral`       |
+| `UButton`            | Button with variants `primary`, `secondary`, `danger`, `ghost` and sizes `md`, `sm` |
+| `UCheckbox`          | Checkbox with label and v-model support                                             |
+| `UDialog`            | Programmatic confirmation dialog (used with `useDialog`)                            |
+| `UDialogProvider`    | Required provider — mount once in root                                              |
+| `UDrawer`            | Slide-over panel, supports `left`, `right`, `top`, `bottom` sides                   |
+| `UDropzone`          | File drag-and-drop upload area                                                      |
+| `UEmptyState`        | Empty state placeholder with icon, title, and description                           |
+| `UFormRow`           | Form field wrapper with label and hint                                              |
+| `UIcon`              | Lucide icon wrapper with color and size props                                       |
+| `UIconButton`        | Square icon-only button                                                             |
+| `UInput`             | Text input, textarea, or select — controlled via `v-model`                          |
+| `UListCard`          | Card container for list items                                                       |
+| `UListCardCell`      | Cell inside a `UListCard`                                                           |
+| `ULogoMark`          | Brand logo mark                                                                     |
+| `UModal`             | Modal dialog with slot-based content                                                |
+| `UPageLayout`        | Two-column page layout (sidebar + content)                                          |
+| `URadio`             | Radio button with label                                                             |
+| `USelect`            | Dropdown select with `v-model`                                                      |
+| `USidebar`           | Navigation sidebar with sections, items, and nested children                        |
+| `UStatCard`          | Statistic card with label, value, and trend                                         |
+| `USwitch`            | Toggle switch with sizes `md`, `sm`                                                 |
+| `UTabs`              | Tab bar with active tab tracking                                                    |
+| `UTable`             | Data table with sorting, pagination, and column toggling                            |
+| `UTableColumnToggle` | Popover to show/hide table columns                                                  |
+| `UTablePager`        | Pagination controls for `UTable`                                                    |
+| `UTableRow`          | Row wrapper for `UTable`                                                            |
+| `UToastProvider`     | Required provider — mount once in root                                              |
+| `UTopBar`            | Top navigation bar                                                                  |
+
+## Composables
+
+### `useToast`
+
+```ts
+import { useToast } from "@ertugrulozcan97/apexui"
+
+const toast = useToast()
 
-```sh
-npm install
+toast.success("Saved successfully")
+toast.error("Something went wrong")
+toast.warning("Check your input")
+toast.info("New update available")
 ```
 
-### Compile and Hot-Reload for Development
+### `useDialog`
 
-```sh
-npm run dev
+```ts
+import { useDialog } from "@ertugrulozcan97/apexui"
+
+const dialog = useDialog()
+
+const confirmed = await dialog.confirm({
+	title: "Delete item",
+	message: "This action cannot be undone.",
+	variant: "danger",
+})
 ```
 
-### Compile and Minify for Production
+## Example
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue"
+import { UButton, UInput, useToast } from "@ertugrulozcan97/apexui"
+
+const name = ref("")
+const toast = useToast()
 
-```sh
-npm run build
+function submit() {
+	toast.success(`Hello, ${name.value}!`)
+}
+</script>
+
+<template>
+	<UInput v-model="name" label="Name" placeholder="Enter your name" />
+	<UButton @click="submit">Submit</UButton>
+</template>
 ```
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ertugrulozcan97/apexui",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"private": false,
 	"type": "module",
 	"files": [
@@ -27,7 +27,6 @@
 		"tailwindcss": ">=4.0.0",
 		"vue": ">=3.4.0"
 	},
-	"dependencies": {},
 	"devDependencies": {
 		"@lucide/vue": "^1.14.0",
 		"@tailwindcss/vite": "^4.3.0",
@@ -36,7 +35,6 @@
 		"tailwindcss": "^4.3.0",
 		"typescript": "^6.0.3",
 		"vite": "^8.0.8",
-		"vite-plugin-vue-devtools": "^8.1.1",
 		"vue": "^3.5.32",
 		"vue-tsc": "^3.2.8"
 	},