xc-computent 0.1.0

package/README.md

@@ -0,0 +1,121 @@
+# Computent Component Library
+
+A premium, responsive, and performance-focused Vue 3 component library built with Vite, TypeScript, and native CSS custom properties.
+
+---
+
+## Features
+
+- ⚡ **Vite-powered**: Extremely fast hot-module replacement (HMR) for development and rollup-based bundles.
+- 📦 **Tree-shakeable**: Import only the components you use.
+- 🎨 **Premium Styling**: Sleek, customizable modern dark-theme/slate design tokens.
+- 🏷️ **Type Safe**: First-class TypeScript support with auto-generated declaration (`.d.ts`) files.
+- 🧩 **Zero Globals Leakage**: Component isolation scoped styles.
+
+---
+
+## 🛠️ Local Development & Playground
+
+To run the interactive component playground and test your changes:
+
+### 1. Install Dependencies
+```bash
+pnpm install
+```
+
+### 2. Run Local Development Server
+Starts the playground on `http://localhost:5173` using Vite:
+```bash
+pnpm dev
+```
+
+### 3. Build the Library
+Bundles the components into ESM and UMD formats under the `dist/` folder, and generates all `.d.ts` declaration files:
+```bash
+pnpm build
+```
+
+### 4. Local Build Preview
+Previews the bundled output locally:
+```bash
+pnpm preview
+```
+
+---
+
+## 🚀 How to Publish to npm
+
+Follow these step-by-step instructions to publish this library to the npm registry:
+
+### Step 1: Customize Your Package Name
+Before publishing, open `package.json` and change the `"name"` property to your desired name (e.g. `"my-awesome-components"`). Ensure the name is unique on npm.
+```json
+{
+  "name": "computent",
+  "version": "0.1.0",
+  ...
+}
+```
+
+### Step 2: Log In to npm
+Run the following command in your terminal and follow the prompts to log in (or register):
+```bash
+npm login
+```
+
+### Step 3: Run the Build
+Always compile the latest code before publishing:
+```bash
+pnpm build
+```
+
+### Step 4: Publish to the Registry
+Publish the package to the npm registry. Since we configured `"files": ["dist"]` in `package.json`, only the bundled production code will be uploaded:
+```bash
+npm publish
+```
+*Note: If you are using a scoped package name (e.g. `@my-org/computent`), you should publish it as public using:*
+```bash
+npm publish --access public
+```
+
+---
+
+## 📦 How to Use the Published Library
+
+### 1. Installation
+Install the package from npm (replace `computent` with your published package name):
+```bash
+npm install computent
+```
+
+### 2. Usage Option A: Global Registration (Vue Plugin)
+Import the library and its styles in your `main.ts` / `main.js`:
+```typescript
+import { createApp } from 'vue';
+import App from './App.vue';
+
+// Import the component library & its styles
+import Computent from 'computent';
+import 'computent/dist/style.css';
+
+const app = createApp(App);
+app.use(Computent); // Registers <CButton> and <CBadge> globally
+app.mount('#app');
+```
+
+### 3. Usage Option B: Individual Import (Tree-shaking)
+Import only the components you need directly inside your `.vue` files:
+```html
+<template>
+  <div>
+    <Button variant="primary" size="md">Click Me</Button>
+    <Badge type="success" dot>Online</Badge>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Button, Badge } from 'computent';
+import 'computent/dist/style.css'; // Don't forget to import styles!
+</script>
+```

package/dist/components/Badge/Badge.vue.d.ts

@@ -0,0 +1,45 @@
+interface BadgeProps {
+    type?: 'default' | 'success' | 'warning' | 'danger' | 'info';
+    variant?: 'filled' | 'subtle' | 'outline';
+    dot?: boolean;
+}
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
+    type: string;
+    variant: string;
+    dot: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BadgeProps>, {
+    type: string;
+    variant: string;
+    dot: boolean;
+}>>> & Readonly<{}>, {
+    type: "default" | "success" | "warning" | "danger" | "info";
+    variant: "filled" | "subtle" | "outline";
+    dot: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Badge } from './Badge.vue';
+
+export { Badge };
+export default Badge;

package/dist/components/Button/Button.vue.d.ts

@@ -0,0 +1,54 @@
+interface ButtonProps {
+    variant?: 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
+    size?: 'sm' | 'md' | 'lg';
+    loading?: boolean;
+    disabled?: boolean;
+}
+declare function __VLS_template(): {
+    icon?(_: {}): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
+    variant: string;
+    size: string;
+    loading: boolean;
+    disabled: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ButtonProps>, {
+    variant: string;
+    size: string;
+    loading: boolean;
+    disabled: boolean;
+}>>> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    variant: "primary" | "secondary" | "outline" | "text" | "danger";
+    size: "sm" | "md" | "lg";
+    loading: boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Button/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Button } from './Button.vue';
+
+export { Button };
+export default Button;

package/dist/computent.js

@@ -0,0 +1,82 @@
+import { defineComponent as m, openBlock as a, createElementBlock as s, normalizeClass as u, createCommentVNode as l, renderSlot as i, createElementVNode as r } from "vue";
+const f = ["disabled"], p = {
+  key: 0,
+  class: "comp-btn__spinner"
+}, g = {
+  key: 1,
+  class: "comp-btn__icon"
+}, _ = { class: "comp-btn__content" }, v = /* @__PURE__ */ m({
+  __name: "Button",
+  props: {
+    variant: { default: "primary" },
+    size: { default: "md" },
+    loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(t, { emit: o }) {
+    const e = t, d = o, c = (n) => {
+      !e.disabled && !e.loading && d("click", n);
+    };
+    return (n, z) => (a(), s("button", {
+      class: u([
+        "comp-btn",
+        `comp-btn--${t.variant}`,
+        `comp-btn--${t.size}`,
+        {
+          "comp-btn--loading": t.loading,
+          "comp-btn--disabled": t.disabled || t.loading
+        }
+      ]),
+      disabled: t.disabled || t.loading,
+      onClick: c
+    }, [
+      t.loading ? (a(), s("span", p)) : l("", !0),
+      n.$slots.icon && !t.loading ? (a(), s("span", g, [
+        i(n.$slots, "icon", {}, void 0, !0)
+      ])) : l("", !0),
+      r("span", _, [
+        i(n.$slots, "default", {}, void 0, !0)
+      ])
+    ], 10, f));
+  }
+}), b = (t, o) => {
+  const e = t.__vccOpts || t;
+  for (const [d, c] of o)
+    e[d] = c;
+  return e;
+}, B = /* @__PURE__ */ b(v, [["__scopeId", "data-v-7c40bef2"]]), $ = {
+  key: 0,
+  class: "comp-badge__dot"
+}, h = { class: "comp-badge__content" }, k = /* @__PURE__ */ m({
+  __name: "Badge",
+  props: {
+    type: { default: "default" },
+    variant: { default: "subtle" },
+    dot: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    return (o, e) => (a(), s("span", {
+      class: u([
+        "comp-badge",
+        `comp-badge--${t.type}`,
+        `comp-badge--${t.variant}`,
+        { "comp-badge--has-dot": t.dot }
+      ])
+    }, [
+      t.dot ? (a(), s("span", $)) : l("", !0),
+      r("span", h, [
+        i(o.$slots, "default", {}, void 0, !0)
+      ])
+    ], 2));
+  }
+}), y = /* @__PURE__ */ b(k, [["__scopeId", "data-v-158f78af"]]), C = (t) => {
+  t.component("CButton", B), t.component("CBadge", y);
+}, I = {
+  install: C
+};
+export {
+  y as Badge,
+  B as Button,
+  I as default
+};

package/dist/computent.umd.cjs

@@ -0,0 +1 @@
+(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.Computent={},n.Vue))})(this,function(n,e){"use strict";const r=["disabled"],f={key:0,class:"comp-btn__spinner"},p={key:1,class:"comp-btn__icon"},b={class:"comp-btn__content"},u=e.defineComponent({__name:"Button",props:{variant:{default:"primary"},size:{default:"md"},loading:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:a}){const o=t,d=a,l=c=>{!o.disabled&&!o.loading&&d("click",c)};return(c,y)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["comp-btn",`comp-btn--${t.variant}`,`comp-btn--${t.size}`,{"comp-btn--loading":t.loading,"comp-btn--disabled":t.disabled||t.loading}]),disabled:t.disabled||t.loading,onClick:l},[t.loading?(e.openBlock(),e.createElementBlock("span",f)):e.createCommentVNode("",!0),c.$slots.icon&&!t.loading?(e.openBlock(),e.createElementBlock("span",p,[e.renderSlot(c.$slots,"icon",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("span",b,[e.renderSlot(c.$slots,"default",{},void 0,!0)])],10,r))}}),s=(t,a)=>{const o=t.__vccOpts||t;for(const[d,l]of a)o[d]=l;return o},i=s(u,[["__scopeId","data-v-7c40bef2"]]),B={key:0,class:"comp-badge__dot"},g={class:"comp-badge__content"},m=s(e.defineComponent({__name:"Badge",props:{type:{default:"default"},variant:{default:"subtle"},dot:{type:Boolean,default:!1}},setup(t){return(a,o)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["comp-badge",`comp-badge--${t.type}`,`comp-badge--${t.variant}`,{"comp-badge--has-dot":t.dot}])},[t.dot?(e.openBlock(),e.createElementBlock("span",B)):e.createCommentVNode("",!0),e.createElementVNode("span",g,[e.renderSlot(a.$slots,"default",{},void 0,!0)])],2))}}),[["__scopeId","data-v-158f78af"]]),k={install:t=>{t.component("CButton",i),t.component("CBadge",m)}};n.Badge=m,n.Button=i,n.default=k,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import { default as Button } from './components/Button';
+import { default as Badge } from './components/Badge';
+
+export { Button, Badge };
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/dist/style.css

@@ -0,0 +1 @@
+.comp-btn[data-v-7c40bef2]{display:inline-flex;align-items:center;justify-content:center;font-family:var(--comp-font-sans, system-ui, sans-serif);font-weight:600;border-radius:var(--comp-radius-md, 8px);border:1px solid transparent;cursor:pointer;outline:none;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;transition:all var(--comp-transition-fast, .2s)}.comp-btn--sm[data-v-7c40bef2]{padding:6px 12px;font-size:13px;border-radius:var(--comp-radius-sm, 6px)}.comp-btn--md[data-v-7c40bef2]{padding:10px 18px;font-size:14px;border-radius:var(--comp-radius-md, 10px)}.comp-btn--lg[data-v-7c40bef2]{padding:14px 24px;font-size:16px;border-radius:var(--comp-radius-lg, 14px)}.comp-btn--primary[data-v-7c40bef2]{background-color:var(--comp-primary);color:#fff;box-shadow:var(--comp-shadow-sm)}.comp-btn--primary[data-v-7c40bef2]:hover:not(.comp-btn--disabled){background-color:var(--comp-primary-hover);box-shadow:var(--comp-shadow-glow);transform:translateY(-1px)}.comp-btn--primary[data-v-7c40bef2]:active:not(.comp-btn--disabled){background-color:var(--comp-primary-active);transform:translateY(0)}.comp-btn--secondary[data-v-7c40bef2]{background-color:var(--comp-bg-card);border-color:var(--comp-border);color:var(--comp-text-primary)}.comp-btn--secondary[data-v-7c40bef2]:hover:not(.comp-btn--disabled){background-color:var(--comp-bg-hover);border-color:var(--comp-border-hover);transform:translateY(-1px)}.comp-btn--secondary[data-v-7c40bef2]:active:not(.comp-btn--disabled){background-color:var(--comp-bg-card);transform:translateY(0)}.comp-btn--outline[data-v-7c40bef2]{background-color:transparent;border-color:var(--comp-primary);color:var(--comp-primary)}.comp-btn--outline[data-v-7c40bef2]:hover:not(.comp-btn--disabled){background-color:#6366f114;transform:translateY(-1px)}.comp-btn--outline[data-v-7c40bef2]:active:not(.comp-btn--disabled){background-color:#6366f129;transform:translateY(0)}.comp-btn--text[data-v-7c40bef2]{background-color:transparent;border-color:transparent;color:var(--comp-text-secondary)}.comp-btn--text[data-v-7c40bef2]:hover:not(.comp-btn--disabled){color:var(--comp-text-primary);background-color:#ffffff0d}.comp-btn--text[data-v-7c40bef2]:active:not(.comp-btn--disabled){background-color:#ffffff1a}.comp-btn--danger[data-v-7c40bef2]{background-color:var(--comp-danger);color:#fff}.comp-btn--danger[data-v-7c40bef2]:hover:not(.comp-btn--disabled){background-color:var(--comp-danger-hover);transform:translateY(-1px)}.comp-btn--danger[data-v-7c40bef2]:active:not(.comp-btn--disabled){background-color:var(--comp-danger-active);transform:translateY(0)}.comp-btn--disabled[data-v-7c40bef2]{opacity:.6;cursor:not-allowed;transform:none!important;box-shadow:none!important}.comp-btn__icon[data-v-7c40bef2]{display:inline-flex;align-items:center;justify-content:center;margin-right:6px;font-size:1.1em}.comp-btn__content[data-v-7c40bef2]{display:inline-flex;align-items:center}.comp-btn__spinner[data-v-7c40bef2]{width:14px;height:14px;border:2px solid currentColor;border-bottom-color:transparent;border-radius:50%;display:inline-block;margin-right:8px;animation:comp-spin-7c40bef2 .75s linear infinite}@keyframes comp-spin-7c40bef2{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.comp-badge[data-v-158f78af]{display:inline-flex;align-items:center;justify-content:center;font-family:var(--comp-font-sans, system-ui, sans-serif);font-weight:600;font-size:11px;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:var(--comp-radius-full, 9999px);line-height:1;border:1px solid transparent;-webkit-user-select:none;user-select:none;transition:all var(--comp-transition-fast, .2s)}.comp-badge--default.comp-badge--filled[data-v-158f78af]{background-color:var(--comp-text-secondary);color:var(--comp-bg-main)}.comp-badge--default.comp-badge--subtle[data-v-158f78af]{background-color:var(--comp-bg-hover);color:var(--comp-text-primary);border-color:var(--comp-border)}.comp-badge--default.comp-badge--outline[data-v-158f78af]{background-color:transparent;border-color:var(--comp-text-muted);color:var(--comp-text-secondary)}.comp-badge--success.comp-badge--filled[data-v-158f78af]{background-color:var(--comp-success);color:#fff}.comp-badge--success.comp-badge--subtle[data-v-158f78af]{background-color:#10b9811f;color:#34d399;border-color:#10b98133}.comp-badge--success.comp-badge--outline[data-v-158f78af]{background-color:transparent;border-color:var(--comp-success);color:var(--comp-success)}.comp-badge--warning.comp-badge--filled[data-v-158f78af]{background-color:var(--comp-warning);color:#fff}.comp-badge--warning.comp-badge--subtle[data-v-158f78af]{background-color:#f59e0b1f;color:#fbbf24;border-color:#f59e0b33}.comp-badge--warning.comp-badge--outline[data-v-158f78af]{background-color:transparent;border-color:var(--comp-warning);color:var(--comp-warning)}.comp-badge--danger.comp-badge--filled[data-v-158f78af]{background-color:var(--comp-danger);color:#fff}.comp-badge--danger.comp-badge--subtle[data-v-158f78af]{background-color:#ef44441f;color:#fca5a5;border-color:#ef444433}.comp-badge--danger.comp-badge--outline[data-v-158f78af]{background-color:transparent;border-color:var(--comp-danger);color:var(--comp-danger)}.comp-badge--info.comp-badge--filled[data-v-158f78af]{background-color:var(--comp-info);color:#fff}.comp-badge--info.comp-badge--subtle[data-v-158f78af]{background-color:#06b6d41f;color:#22d3ee;border-color:#06b6d433}.comp-badge--info.comp-badge--outline[data-v-158f78af]{background-color:transparent;border-color:var(--comp-info);color:var(--comp-info)}.comp-badge__dot[data-v-158f78af]{width:6px;height:6px;border-radius:50%;margin-right:5px;background-color:currentColor;display:inline-block;box-shadow:0 0 4px currentColor}.comp-badge[data-v-158f78af]:hover{transform:translateY(-.5px);filter:brightness(1.08)}:root{--comp-primary: #6366f1;--comp-primary-hover: #4f46e5;--comp-primary-active: #4338ca;--comp-primary-light: #e0e7ff;--comp-success: #10b981;--comp-success-hover: #059669;--comp-success-light: #d1fae5;--comp-warning: #f59e0b;--comp-warning-hover: #d97706;--comp-warning-light: #fef3c7;--comp-danger: #ef4444;--comp-danger-hover: #dc2626;--comp-danger-active: #b91c1c;--comp-danger-light: #fee2e2;--comp-info: #06b6d4;--comp-info-hover: #0891b2;--comp-info-light: #ecfeff;--comp-bg-main: #0b0f19;--comp-bg-card: #151d30;--comp-bg-hover: #1f293d;--comp-text-primary: #f3f4f6;--comp-text-secondary: #9ca3af;--comp-text-muted: #6b7280;--comp-border: #2d3748;--comp-border-hover: #4a5568;--comp-font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--comp-radius-sm: 6px;--comp-radius-md: 10px;--comp-radius-lg: 16px;--comp-radius-full: 9999px;--comp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--comp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);--comp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .3), 0 4px 6px -4px rgba(0, 0, 0, .3);--comp-shadow-glow: 0 0 15px rgba(99, 102, 241, .3);--comp-transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--comp-transition-normal: .25s cubic-bezier(.4, 0, .2, 1)}.comp-lib-root,.comp-lib-root *,.comp-lib-root *:before,.comp-lib-root *:after{box-sizing:border-box;font-family:var(--comp-font-sans)}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "xc-computent",
+  "version": "0.1.0",
+  "description": "A premium Vue 3 component library built with Vite and TypeScript",
+  "type": "module",
+  "main": "./dist/computent.umd.cjs",
+  "module": "./dist/computent.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/computent.js",
+      "require": "./dist/computent.umd.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "node vite-shim.js",
+    "build": "vue-tsc --noEmit && node vite-shim.js build",
+    "preview": "node vite-shim.js preview"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "component",
+    "library",
+    "vite",
+    "typescript"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.1",
+    "vue": "^3.4.27",
+    "vue-tsc": "^2.0.19"
+  }
+}