ketekny-ui-kit 1.0.5 → 1.0.6

package/README.md

@@ -1,185 +1,154 @@
 # Ketekny UI Kit
 
-A comprehensive Vue 3 UI component library built with Tailwind CSS. This library provides a set of reusable, customizable components for modern web applications.
-
+Vue 3 UI component library styled with Tailwind CSS.
 
 ## Installation
 
+1. Install the package:
+
 ```bash
 npm install ketekny-ui-kit
 ```
 
-## Tailwind Configuration
+2. Ensure required peer/runtime dependencies exist in your app:
+
+```bash
+npm install vue tailwindcss postcss autoprefixer
+```
+
+If your project already has Vue + Tailwind configured, you can skip step 2.
 
-Add the preset to your `tailwind.config.js`:
+## Tailwind Setup (Required)
 
-```javascript
-// tailwind.config.js
-const preset = require('ketekny-ui-kit/tailwind-preset.js')
+Use the provided Tailwind preset so semantic colors and component color tokens are always available.
 
-module.exports = {
-  presets: [preset],
+### `tailwind.config.js` (ESM)
+
+```js
+import tailwindPreset from "ketekny-ui-kit/tailwind-preset.js";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [tailwindPreset],
   content: [
-    './src/**/*.{vue,js,ts}',
-    './node_modules/ketekny-ui-kit/**/*.{vue,js,ts}'
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./node_modules/ketekny-ui-kit/**/*.{vue,js,ts,jsx,tsx}",
   ],
-  safelist: [
-    { pattern: /text-semantic-(success|danger|info|warning)-text/ },
-    { pattern: /border-semantic-(success|danger|info|warning)-border/ },
-    { pattern: /bg-semantic-(success|warning|error|info)-(bg|disabled|button)/ },
-  ],
-}
+};
 ```
 
-## Components
-
-### UI Components
-- `kButton` - Versatile button component
-- `kInput` - Input field with validation
-- `kDateSelector` - Date picker with year/month modes
-- `kSelect` - Dropdown select component
-- `kToggle` - Toggle switch
-- `kChip` - Tag/label component
-- `kSpinner` - Loading spinner
-- `kIcon` - Icon component using Lucide icons
-- `kMessage` - Alert/message component
-- `kCode` - Code display component
-- `kSearch` - Search input component
-- `kTags` - Tag input component
-- `kSelectButton` - Button group select
-- `kArrayList` - Array/list management
-- `kToolbar` - Toolbar component
-- `kUploader` - File upload component
-- `kEditor` - Rich text editor
-- `kDialog` - Modal dialog
-- `kDrawer` - Slide-out drawer
-- `kTabs` - Tab navigation
-- `kTable` - Data table
-- `kDatatable` - Advanced data table
-
-### Layout Components
-- `kAppHeader` - Application header
-- `kAppFooter` - Application footer
-- `kAppMain` - Main content area
-- `kHero` - Hero section
-
-### Plugins
-- `toastPlugin` - Toast notifications
-- `confirmPlugin` - Confirmation dialogs
-- `alertPlugin` - Alert dialogs
-- `inputDialogPlugin` - Input dialogs
-- `tooltipPlugin` - Tooltip functionality
-
-## Usage
-
-```javascript
-// main.js
-import { createApp } from 'vue'
-import App from './App.vue'
-
-// Import components
-import {
-  kButton,
-  kInput,
-  kDateSelector,
-  kSelect,
-  kToggle
-} from 'ketekny-ui-kit'
+### `tailwind.config.cjs` (CommonJS)
+
+```js
+const tailwindPreset = require("ketekny-ui-kit/tailwind-preset.js").default;
 
-// Import plugins
-import toastPlugin from 'ketekny-ui-kit'
-import confirmPlugin from 'ketekny-ui-kit'
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [tailwindPreset],
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+    "./node_modules/ketekny-ui-kit/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+};
+```
 
-const app = createApp(App)
+Notes:
+- The preset contains the semantic color definitions and safelist patterns used by dynamic classes (alerts/toasts/button intents).
+- If you replace `safelist` in your own config, keep equivalent patterns or dynamic semantic classes may be purged.
 
-// Register components globally
-app.component('kButton', kButton)
-app.component('kInput', kInput)
-app.component('kDateSelector', kDateSelector)
-app.component('kSelect', kSelect)
-app.component('kToggle', kToggle)
+## App CSS Setup
 
-// Use plugins
-app.use(toastPlugin)
-app.use(confirmPlugin)
+Import the kit stylesheet in your app entry (`main.js` / `main.ts`):
 
-app.mount('#app')
+```js
+import "ketekny-ui-kit/styles.css";
 ```
 
-## Example Component Usage
-
-```vue
-<template>
-  <div class="p-4 space-y-4">
-    <!-- Button -->
-    <k-button @click="handleClick" variant="primary">
-      Click me
-    </k-button>
-
-    <!-- Input -->
-    <k-input
-      v-model="email"
-      label="Email"
-      placeholder="Enter your email"
-      type="email"
-    />
-
-    <!-- Date Selector -->
-    <k-date-selector
-      v-model="date"
-      label="Select Date"
-      type="date"
-    />
-
-    <!-- Select -->
-    <k-select
-      v-model="selectedOption"
-      :options="options"
-      label="Choose option"
-    />
-  </div>
-</template>
-
-<script>
-import { kButton, kInput, kDateSelector, kSelect } from 'ketekny-ui-kit'
+## Vue Setup
 
-export default {
-  components: {
-    kButton,
-    kInput,
-    kDateSelector,
-    kSelect
-  },
-  data() {
-    return {
-      email: '',
-      date: null,
-      selectedOption: null,
-      options: [
-        { value: 'option1', label: 'Option 1' },
-        { value: 'option2', label: 'Option 2' }
-      ]
-    }
-  },
-  methods: {
-    handleClick() {
-      // Handle button click
-    }
-  }
-}
-</script>
-```
+`main.js` / `main.ts` example:
 
-## Dependencies
+```js
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./style.css";
+
+import {
+  kButton,
+  kInput,
+  kSelect,
+  kDateSelector,
+  kToggle,
+  toastPlugin,
+  confirmPlugin,
+  alertPlugin,
+  inputDialogPlugin,
+  tooltipPlugin,
+} from "ketekny-ui-kit";
+
+const app = createApp(App);
+
+app.component("kButton", kButton);
+app.component("kInput", kInput);
+app.component("kSelect", kSelect);
+app.component("kDateSelector", kDateSelector);
+app.component("kToggle", kToggle);
+
+app.use(toastPlugin);
+app.use(confirmPlugin);
+app.use(alertPlugin);
+app.use(inputDialogPlugin);
+app.use(tooltipPlugin);
+
+app.mount("#app");
+```
 
-This library depends on:
-- Vue 3.x
-- Tailwind CSS 3.x
-- Lucide Vue Next (icons)
-- Vue Datepicker
-- Moment.js
-- PrimeVue
-- Quill (rich text editor)
+## Available Plugins
+
+- `toastPlugin` adds `$toast` (`success`, `error`, `warning`, `info`, `show`)
+- `confirmPlugin` adds `$confirm(options)`
+- `alertPlugin` adds `$alert.success|warning|error|info(...)`
+- `inputDialogPlugin` adds `$prompt(options)`
+- `tooltipPlugin` registers `v-tooltip`
+
+## Available Exports
+
+### Components
+
+- `kMessage`
+- `kButton`
+- `kChip`
+- `kCode`
+- `kDialog`
+- `kDrawer`
+- `kInput`
+- `kDateSelector`
+- `kToolbar`
+- `kSelect`
+- `kTable`
+- `kTabs`
+- `kToggle`
+- `kUploader`
+- `kEditor`
+- `kSpinner`
+- `kSelectButton`
+- `kDatatable`
+- `kIcon`
+- `kMenu`
+- `kTags`
+- `kSearch`
+- `kArrayList`
+- `kSkeleton`
+- `kAppHeader`
+- `kAppFooter`
+- `kAppMain`
+- `kHero`
+
+### Tailwind preset export
+
+- `tailwindPreset`
 
 ## License
 
@@ -187,4 +156,4 @@ ISC
 
 ## Links
 
-- [npm](https://www.npmjs.com/package/ketekny-ui-kit)
+- [npm](https://www.npmjs.com/package/ketekny-ui-kit)

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [
     "index.js",
+    "styles.css",
     "src/",
     "dist/",
     "tailwind-preset.js",

package/src/directives/v-tooltip.js

@@ -32,17 +32,18 @@ function createNodes() {
 
   const bubble = document.createElement('div')
   bubble.className = `
-    px-2.5 py-1 rounded-md text-xs font-medium
-    text-white bg-gray-900 shadow-lg ring-1 ring-black/10
+    px-3 py-2 rounded-lg text-sm font-medium leading-5
+    text-slate-50 bg-slate-900 shadow-xl ring-1 ring-black/20
     opacity-0 scale-95 transition duration-150 ease-out
   `.replace(/\s+/g, ' ').trim()
   bubble.style.whiteSpace = 'normal'         // allow wrap when needed
-  bubble.style.maxWidth = 'min(32rem, calc(100vw - 2rem))' // clamp width
+  bubble.style.maxWidth = 'min(36rem, calc(100vw - 1.5rem))' // clamp width
   bubble.style.wordBreak = 'break-word'
+  bubble.style.letterSpacing = '0.01em'
   bubble.style.position = 'relative'
 
   const arrow = document.createElement('div')
-  arrow.className = 'absolute w-2 h-2 rotate-45 bg-gray-900'
+  arrow.className = 'absolute w-2 h-2 rotate-45 bg-slate-900'
   arrow.setAttribute('aria-hidden', 'true')
 
   wrapper.appendChild(bubble)

package/src/plugins/toastPlugin.js

@@ -1,4 +1,4 @@
-import { createApp, h } from 'vue'
+import { createApp } from 'vue'
 import kToast from '../ui/kToast.vue'
 
 export default {
@@ -8,11 +8,22 @@ export default {
     document.body.appendChild(container)
     const toastInstance = toastApp.mount(container)
 
+    const call = (type, messageOrConfig, optionsOrTime) => {
+      // Backward compatible:
+      // 1) $toast.success("msg", 3000)
+      // 2) $toast.success({ message, title, duration, actionLabel, onAction, closable })
+      toastInstance.addToast(type, messageOrConfig, optionsOrTime)
+    }
+
     app.config.globalProperties.$toast = {
-      success: (msg, time) => toastInstance.addToast('success', msg, time),
-      error: (msg, time) => toastInstance.addToast('error', msg, time),
-      info: (msg, time) => toastInstance.addToast('info', msg, time),
-      warning: (msg, time) => toastInstance.addToast('warning', msg, time),
+      success: (messageOrConfig, optionsOrTime) => call('success', messageOrConfig, optionsOrTime),
+      error: (messageOrConfig, optionsOrTime) => call('error', messageOrConfig, optionsOrTime),
+      info: (messageOrConfig, optionsOrTime) => call('info', messageOrConfig, optionsOrTime),
+      warning: (messageOrConfig, optionsOrTime) => call('warning', messageOrConfig, optionsOrTime),
+      show: (config = {}) => {
+        const type = ['success', 'error', 'warning', 'info'].includes(config.type) ? config.type : 'info'
+        call(type, config)
+      },
     }
   }
 }

package/src/ui/componentDescription.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="overflow-hidden border rounded-lg shadow-sm component-card cp-card cp-border">
+    <div class="flex items-center justify-between px-4 py-3 border-b cp-border cp-muted-50">
+      <h3 class="text-lg font-semibold cp-text">{{ componentName }} Description</h3>
+
+      <div class="flex items-center gap-1">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          @click="activeTab = tab.id"
+          :class="['px-3 py-1.5 text-sm font-medium rounded-md transition-colors', activeTab === tab.id ? 'cp-tab-active' : 'cp-tab']">
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="p-4">
+      <div v-show="activeTab === 'props'">
+        <div v-if="props.length > 0" class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="border-b cp-border">
+                <th class="px-4 py-3 font-semibold text-left cp-text">Name</th>
+                <th class="px-4 py-3 font-semibold text-left cp-text">Type</th>
+                <th class="px-4 py-3 font-semibold text-left cp-text">Default</th>
+                <th class="px-4 py-3 font-semibold text-left cp-text">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr v-for="(prop, index) in props" :key="prop.name" :class="index % 2 === 0 ? 'cp-muted-30' : ''">
+                <td class="px-4 py-3">
+                  <code class="text-sm font-mono px-1.5 py-0.5 rounded cp-chip cp-chip-text">{{ prop.name }}</code>
+                </td>
+                <td class="px-4 py-3"><span class="font-mono text-sm text-blue-600">{{ prop.type }}</span></td>
+                <td class="px-4 py-3">
+                  <code v-if="prop.default !== undefined" class="font-mono text-sm text-emerald-600">{{ prop.default }}</code>
+                  <span v-else class="cp-text-muted">-</span>
+                </td>
+                <td class="px-4 py-3 cp-text-muted">{{ prop.description }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-else class="flex items-center justify-center py-8 cp-text-muted">
+          <span>No props defined for this component</span>
+        </div>
+      </div>
+
+      <div v-show="activeTab === 'slots'">
+        <div v-if="slots.length > 0" class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead>
+              <tr class="border-b cp-border">
+                <th class="px-4 py-3 font-semibold text-left cp-text">Name</th>
+                <th class="px-4 py-3 font-semibold text-left cp-text">Scoped</th>
+                <th class="px-4 py-3 font-semibold text-left cp-text">Description</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr v-for="(slot, index) in slots" :key="slot.name" :class="index % 2 === 0 ? 'cp-muted-30' : ''">
+                <td class="px-4 py-3">
+                  <code class="text-sm font-mono px-1.5 py-0.5 rounded cp-chip cp-chip-text">{{ slot.name }}</code>
+                </td>
+                <td class="px-4 py-3">
+                  <span :class="['inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium', slot.scoped ? 'bg-emerald-100 text-emerald-700' : 'cp-badge-muted']">
+                    {{ slot.scoped ? "Yes" : "No" }}
+                  </span>
+                </td>
+                <td class="px-4 py-3 cp-text-muted">{{ slot.description }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div v-else class="flex items-center justify-center py-8 cp-text-muted">
+          <span>No slots defined for this component</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ComponentDescription",
+  props: {
+    componentName: { type: String, required: true },
+    props: { type: Array, default: () => [] },
+    slots: { type: Array, default: () => [] },
+  },
+  data() {
+    return {
+      activeTab: "props",
+      tabs: [
+        { id: "props", label: "Props" },
+        { id: "slots", label: "Slots" },
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.component-card {
+  --cp-foreground: #0a0a0a;
+  --cp-card: #ffffff;
+  --cp-border: #e5e5e5;
+  --cp-muted: #f5f5f5;
+  --cp-muted-foreground: #737373;
+  --cp-primary: #0a0a0a;
+  --cp-primary-foreground: #fafafa;
+  --cp-accent: #f5f5f5;
+  --cp-accent-foreground: #0a0a0a;
+}
+
+.cp-text { color: var(--cp-foreground); }
+.cp-text-muted { color: var(--cp-muted-foreground); }
+.cp-card { background-color: var(--cp-card); }
+.cp-border { border-color: var(--cp-border); }
+.cp-muted-50 { background-color: color-mix(in srgb, var(--cp-muted) 50%, transparent); }
+.cp-muted-30 { background-color: color-mix(in srgb, var(--cp-muted) 30%, transparent); }
+.cp-tab { color: var(--cp-muted-foreground); }
+.cp-tab:hover { color: var(--cp-foreground); background-color: var(--cp-accent); }
+.cp-tab-active { background-color: var(--cp-primary); color: var(--cp-primary-foreground); }
+.cp-chip { background-color: var(--cp-accent); }
+.cp-chip-text { color: var(--cp-accent-foreground); }
+.cp-badge-muted { background-color: var(--cp-muted); color: var(--cp-muted-foreground); }
+</style>

package/src/ui/componentShowcase.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="overflow-hidden border rounded-lg shadow-sm component-card cp-card cp-border">
+    <div class="flex items-center justify-between px-4 py-3 border-b cp-border cp-muted-50">
+      <h3 class="text-lg font-semibold cp-text">{{ componentName }} Preview</h3>
+
+      <div class="flex items-center gap-1">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          @click="activeTab = tab.id"
+          :class="['px-3 py-1.5 text-sm font-medium rounded-md transition-colors', activeTab === tab.id ? 'cp-tab-active' : 'cp-tab']">
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+
+    <div class="p-4">
+      <div v-show="activeTab === 'preview'" class="min-h-[120px] rounded-lg p-6 border cp-muted-30 cp-border-50">
+        <div class="flex justify-end mb-4">
+          <div class="inline-flex p-1 rounded-md cp-muted-50">
+            <button
+              v-for="vp in previewViewports"
+              :key="vp.id"
+              @click="activeViewport = vp.id"
+              :class="['px-3 py-1.5 text-xs font-semibold rounded-md transition-colors', activeViewport === vp.id ? 'cp-tab-active' : 'cp-tab']">
+              {{ vp.label }}
+            </button>
+          </div>
+        </div>
+
+        <div class="flex justify-center w-full">
+          <div :class="['w-full transition-all duration-200', previewViewportClass]">
+            <slot name="preview"></slot>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="activeTab === 'code'" class="relative">
+        <div class="absolute z-10 top-3 right-3">
+          <button @click="copyCode" class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-md transition-colors cp-chip cp-chip-hover cp-chip-text">
+            <svg
+              v-if="!copied"
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round">
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+            </svg>
+
+            <svg
+              v-else
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="text-emerald-600">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+
+            {{ copied ? "Copied!" : "Copy" }}
+          </button>
+        </div>
+
+        <pre class="p-4 overflow-x-auto rounded-lg cp-pre">
+<code class="font-mono text-sm" v-html="highlightedCode"></code>
+        </pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import hljs from "highlight.js/lib/core";
+import xml from "highlight.js/lib/languages/xml";
+
+hljs.registerLanguage("xml", xml);
+
+export default {
+  name: "ComponentShowcase",
+  props: {
+    componentName: { type: String, required: true },
+    code: { type: String, default: "" },
+  },
+  data() {
+    return {
+      activeTab: "preview",
+      copied: false,
+      activeViewport: "desktop",
+      tabs: [
+        { id: "preview", label: "Preview" },
+        { id: "code", label: "Code" },
+      ],
+      previewViewports: [
+        { id: "desktop", label: "Desktop" },
+        { id: "tablet", label: "Tablet" },
+        { id: "mobile", label: "Mobile" },
+      ],
+    };
+  },
+  computed: {
+    highlightedCode() {
+      if (!this.code) return "";
+      try {
+        return hljs.highlight(this.code.trim(), { language: "xml" }).value;
+      } catch {
+        return this.escapeHtml(this.code.trim());
+      }
+    },
+    previewViewportClass() {
+      if (this.activeViewport === "mobile") return "max-w-[430px]";
+      if (this.activeViewport === "tablet") return "max-w-[820px]";
+      return "max-w-none";
+    },
+  },
+  methods: {
+    async copyCode() {
+      try {
+        await navigator.clipboard.writeText(this.code.trim());
+        this.copied = true;
+        setTimeout(() => (this.copied = false), 2000);
+      } catch (err) {
+        console.error("Failed to copy code:", err);
+      }
+    },
+    escapeHtml(text) {
+      const div = document.createElement("div");
+      div.textContent = text;
+      return div.innerHTML;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.component-card {
+  --cp-foreground: #0a0a0a;
+  --cp-card: #ffffff;
+  --cp-border: #e5e5e5;
+  --cp-muted: #f5f5f5;
+  --cp-muted-foreground: #737373;
+  --cp-primary: #0a0a0a;
+  --cp-primary-foreground: #fafafa;
+  --cp-accent: #f5f5f5;
+  --cp-accent-foreground: #0a0a0a;
+}
+
+.cp-text { color: var(--cp-foreground); }
+.cp-card { background-color: var(--cp-card); }
+.cp-border { border-color: var(--cp-border); }
+.cp-border-50 { border-color: color-mix(in srgb, var(--cp-border) 50%, transparent); }
+.cp-muted-50 { background-color: color-mix(in srgb, var(--cp-muted) 50%, transparent); }
+.cp-muted-30 { background-color: color-mix(in srgb, var(--cp-muted) 30%, transparent); }
+.cp-tab { color: var(--cp-muted-foreground); }
+.cp-tab:hover { color: var(--cp-foreground); background-color: var(--cp-accent); }
+.cp-tab-active { background-color: var(--cp-primary); color: var(--cp-primary-foreground); }
+.cp-chip { background-color: var(--cp-accent); }
+.cp-chip-hover:hover { background-color: color-mix(in srgb, var(--cp-accent) 80%, transparent); }
+.cp-chip-text { color: var(--cp-accent-foreground); }
+.cp-pre { background-color: var(--cp-muted); color: var(--cp-foreground); }
+</style>