portal-design-system 0.0.89 → 0.0.90

package/README.md

@@ -1,42 +1,42 @@
+
 # Portal Design System
 
-A type-safe Vue 3 UI component library built with Tailwind CSS, featuring isolated styles and custom fonts.
+A type-safe Vue 3 UI component library built with Tailwind CSS and isolated styles for easy integration into projects.
 
-## Features
+## Quick Overview
 
-- ✨ **Vue 3** - Built with the Composition API
-- 🎨 **Tailwind CSS** - Utility-first styling with custom configuration
-- 🔒 **Style Isolation** - Prefixed classes (`pds-`) prevent global style conflicts
-- 🎯 **TypeScript** - Fully type-safe with comprehensive type definitions
-- 🖋️ **Custom Fonts** - Inter and JetBrains Mono fonts included
-- 📦 **Tree-shakeable** - Only import what you need
-- 🚀 **Zero Config** - Works out of the box
+- Framework: Vue 3 (Composition API)
+- Styling: Tailwind CSS (prefixed utilities for isolation)
+- Language: TypeScript
+- Distribution: ESM / CJS + CSS + types
 
 ## Installation
 
+Install the package from npm (or use your preferred package manager):
+
 ```bash
 npm install portal-design-system
 # or
 yarn add portal-design-system
 # or
 pnpm add portal-design-system
-# or
-bun add portal-design-system
 ```
 
-## Usage
+If you use Bun:
+
+```bash
+bun add portal-design-system
+```
 
-### Import Styles
+## Quick Start
 
-Import the CSS file in your main entry file (e.g., `main.ts`):
+1. Import the compiled CSS (one-time in your app entry, e.g. `main.ts`):
 
-```typescript
+```ts
 import 'portal-design-system/styles'
 ```
 
-### Using Components
-
-Wrap your components with the `portal-design-system` class to ensure style isolation when used as Vue components:
+2. Use components in your Vue app:
 
 ```vue
 <script setup lang="ts">
@@ -45,100 +45,80 @@ import { Button } from 'portal-design-system'
 
 <template>
   <div class="portal-design-system">
-    <Button variant="primary" size="md">Click me</Button>
-    <Button variant="secondary">Secondary Button</Button>
-    <Button variant="danger" :disabled="true">Disabled</Button>
+    <Button variant="primary">Primary</Button>
   </div>
 </template>
 ```
 
-### Using as a Web Component (Shadow DOM)
+### Web Components (optional)
 
-You can also register web components that mount each Vue component into its own ShadowRoot, which fully isolates styles without requiring globally-prefixed utilities.
+The library can expose Web Components (Shadow DOM) for full style encapsulation. Register them when needed:
 
 ```html
 <script type="module">
   import { defineCustomElements } from 'portal-design-system'
-  // Register all provided web components (e.g., <pds-button>)
   defineCustomElements()
 </script>
 
 <pds-button variant="primary">Shadow Button</pds-button>
 ```
 
-Notes:
-- Web components inject the library's compiled CSS directly into each ShadowRoot, so you don't need to import `portal-design-system/styles` globally for Shadow DOM usage.
-- Attributes on the custom element are parsed as props (boolean and numbers are coerced when reasonable).
-- The web component tag for Button is `<pds-button>`.
-
-### TypeScript Support
-
-The library is fully typed. You'll get autocomplete and type checking for all props:
+## Development
 
-```vue
-<script setup lang="ts">
-import { Button, type ButtonProps } from 'portal-design-system'
+Common development tasks (scripts available in `package.json`):
 
-const props: ButtonProps = {
-  variant: 'primary',
-  size: 'lg',
-  disabled: false
-}
-</script>
-```
+```bash
+# Start dev server
+npm run dev
 
-## Components
+# Build library
+npm run build
 
-### Button
+# Type check
+npm run type-check
 
-A versatile button component with multiple variants and sizes.
+# Preview production build
+npm run preview
+```
 
-**Props:**
+If you prefer Bun, you can run `bun` equivalents where appropriate.
 
-- `variant` - `'primary' | 'secondary' | 'danger'` (default: `'primary'`)
-- `size` - `'sm' | 'md' | 'lg'` (default: `'md'`)
-- `disabled` - `boolean` (default: `false`)
+## Package Exports
 
-**Example:**
+The package exposes the components and styles. Import styles directly with:
 
-```vue
-<Button variant="primary" size="lg">Large Primary Button</Button>
-<Button variant="secondary" size="sm">Small Secondary</Button>
-<Button variant="danger" :disabled="true">Disabled Danger</Button>
+```ts
+import 'portal-design-system/styles'
 ```
 
-## Style Isolation
+Import components by name from the package root.
 
-This library uses several techniques to prevent style conflicts:
+## Included Components (high level)
 
-1. **CSS Prefix**: All Tailwind utilities are prefixed with `pds-`
-2. **Scoped Wrapper**: The `.portal-design-system` class provides style isolation
-3. **Custom Fonts**: Inter and JetBrains Mono are loaded independently
+- `Button`
+- `Input`, `Select`, `CountryCode` (inputs)
+- `Tabs`, `Badge`, `Dialog`, `Dropdown`, `DataGrid`, `DurationTimeline`, `Text`, `Iconsax`
 
-## Development
+See the `src/components` folder for the full list and examples.
 
-```bash
-# Install dependencies
-bun install
+## Contributing
 
-# Type check
-bun run type-check
-
-# Build library
-bun run build
+Contributions are welcome. Typical workflow:
 
-# Preview build
-bun run preview
-```
+1. Fork the repo and create a branch for your change.
+2. Install dependencies and run the dev server.
+3. Add tests or examples for new components.
+4. Open a PR with a clear description of your change.
 
-## Building
+Please run the type checker before opening a PR:
 
-The library is built using Vite and outputs:
-- ES modules (`dist/index.js`)
-- CommonJS (`dist/index.cjs`)
-- TypeScript declarations (`dist/index.d.ts`)
-- Compiled CSS (`dist/styles.css`)
+```bash
+npm run type-check
+```
 
 ## License
 
 MIT
+
+---
+If you'd like any extra sections (changelog, CI badges, examples), tell me which details to include.

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

@@ -24,8 +24,15 @@ type __VLS_Props = {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Partial<Record<string, (_: any) => any>> & {
+        customRefreshButton?(_: {
+            refresh: () => Promise<void> | undefined;
+        }): any;
+        exportButton?(_: {}): any;
         createButton?(_: {}): any;
         toolbarLeft?(_: {}): any;
+        customColumnChooser?(_: {
+            onClick: () => void;
+        }): any;
         toolbarRight?(_: {}): any;
     };
     refs: {

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

@@ -1,5 +1,6 @@
 import { SelectOptionType, SvgBasedIconName } from '../types';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { DefineProps, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
+import { LooseRequired } from '@vue/shared';
 type __VLS_Props = {
     id: string;
     label?: string;
@@ -16,9 +17,28 @@ type __VLS_Props = {
 type __VLS_PublicProps = {
     modelValue?: any;
 } & __VLS_Props;
-declare const _default: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        select?(_: {
+            selected: any;
+            props: DefineProps<LooseRequired<__VLS_Props>, "disabled">;
+            onUpdate: (value: any) => void;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (value: any) => any;
 }, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};