@phila/phila-ui-button 0.0.1-beta.0

package/README.md

@@ -0,0 +1,113 @@
+# Phila Button Component
+
+A simple, customizable Vue 3 button component built with TypeScript and Vite.
+
+## Features
+
+- 🎨 Multiple variants: primary, secondary, outline, ghost
+- 📏 Three sizes: small, medium, large
+- ♿ Accessibility features: focus states, disabled state
+- 🎯 TypeScript support with full type definitions
+- 🎨 Modern, clean design with hover effects
+- 📦 Tree-shakeable and lightweight
+
+## Installation
+
+```bash
+npm install @phila/phila-ui-button
+# or
+yarn add @phila/phila-ui-button
+# or
+pnpm add @phila/phila-ui-button
+```
+
+## Usage
+
+```vue
+<template>
+  <Button variant="primary" size="medium" @click="handleClick"> Click me! </Button>
+</template>
+
+<script setup lang="ts">
+import { Button } from "@phila/phila-ui-button";
+
+const handleClick = () => {
+  console.log("Button clicked!");
+};
+</script>
+```
+
+## Props
+
+| Prop       | Type                                               | Default     | Description                    |
+| ---------- | -------------------------------------------------- | ----------- | ------------------------------ |
+| `variant`  | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` | The visual style variant       |
+| `size`     | `'small' \| 'medium' \| 'large'`                   | `'medium'`  | The button size                |
+| `disabled` | `boolean`                                          | `false`     | Whether the button is disabled |
+
+## Events
+
+| Event   | Payload      | Description                                                 |
+| ------- | ------------ | ----------------------------------------------------------- |
+| `click` | `MouseEvent` | Emitted when the button is clicked (only when not disabled) |
+
+## Examples
+
+### All Variants
+
+```vue
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+```
+
+### All Sizes
+
+```vue
+<Button size="small">Small</Button>
+<Button size="medium">Medium</Button>
+<Button size="large">Large</Button>
+```
+
+### Disabled State
+
+```vue
+<Button disabled>Disabled Button</Button>
+```
+
+### With Click Handler
+
+```vue
+<Button @click="handleClick">Click Me!</Button>
+```
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Run Demo
+
+```bash
+pnpm dev
+```
+
+### Build Library
+
+```bash
+pnpm build
+```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## License
+
+MIT

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),i=require("@phila/phila-ui-core"),r=["disabled"],u=e.defineComponent({__name:"PhlButton",props:{disabled:{type:Boolean,default:!1}},emits:["click"],setup(s,{emit:n}){const o=s,l=n,a=e.computed(()=>i.cn("phila-button",o.className)),c=t=>{o.disabled||l("click",t)};return(t,d)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(a.value),disabled:t.disabled,onClick:c},[e.renderSlot(t.$slots,"default")],10,r))}});exports.Button=u;

package/dist/index.mjs

@@ -0,0 +1,24 @@
+import { defineComponent as c, computed as i, createElementBlock as r, openBlock as d, normalizeClass as m, renderSlot as u } from "vue";
+import { cn as p } from "@phila/phila-ui-core";
+const b = ["disabled"], h = /* @__PURE__ */ c({
+  __name: "PhlButton",
+  props: {
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(o, { emit: s }) {
+    const t = o, n = s, l = i(() => p("phila-button", t.className)), a = (e) => {
+      t.disabled || n("click", e);
+    };
+    return (e, f) => (d(), r("button", {
+      class: m(l.value),
+      disabled: e.disabled,
+      onClick: a
+    }, [
+      u(e.$slots, "default")
+    ], 10, b));
+  }
+});
+export {
+  h as Button
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@phila/phila-ui-button",
+  "version": "0.0.1-beta.0",
+  "description": "Button component for Phila UI library",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui",
+    "button",
+    "vue",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "@phila/phila-ui-core": "1.0.25-beta.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vue": "^3.5.18",
+    "vue-tsc": "^3.0.5"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src/**/*.{ts,vue}",
+    "lint:fix": "eslint src/**/*.{ts,vue} --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}