@phila/phila-ui-callout 0.0.17 → 0.0.18

package/README.md

@@ -1,30 +1,99 @@
+# Phila Callout Component
+
+A Vue component for displaying important messages and warnings.
+
+## Features
+
+- 💡 Highlight important information or warnings
+- 🎨 Multiple variants: info, warning, error, success
+- 📏 Multiple layouts: with/without icon, dismissible
+- ♿ Accessibility features: focus states, ARIA roles
+
+## Installation
+
+```bash
+npm install @phila/core
+npm install @phila/phila-ui-callout
+# or
+pnpm add @phila/core
+pnpm add @phila/phila-ui-callout
+```
+
+Import core styles and other components in your main entry file (e.g., `main.js|ts`):
+
+```typescript
+import "@phila/core/styles/template-light.css";
+```
+
 ## Usage
 
-#### Import single component...
+Use the callout element with the appropriate classes. You can also apply those classes to other elements to style them as callouts.
+
+```vue
+<template>
+  <callout type="info" :dismissible="true" @close="handleClose"> Informational message </callout>
+</template>
+```
+
+### Variants
+
+### States
+
+## Callout layouts
 
-```js
-import { Callout } from '@phila/phila-ui';
+There are two main layouts for the Phila UI callout:
 
-//register it locally...
-components: {
-  Callout,
-}
+1. **Default**: Displays an icon and message.
+2. **Dismissible**: Displays an icon, message, and a close button. Emits a "close" event when the close button is clicked.
 
-//... or register it globally
-Vue.component('callout', Callout);
+### Default
+
+```vue
+<div class="phila-callout phila-callout--info">
+  <span class="icon"><i class="fas fa-info-circle"></i></span>
+  <span>Informational message</span>
+</div>
+```
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
 ```
 
-#### or import the whole library,
+### Run Storybook demo
+
+```bash
+npm run storybook
+```
 
-```js
-import * as PhilaUI from "@phila/phila-ui";
+### Run lint
 
-//register it globally
-Vue.use(PhilaUI);
+```bash
+npm run lint
 ```
 
-#### then use it in the vue template
+### Create Production Build
+
+```bash
+npm run build
+```
+
+## Test locally in your development environment
+
+```bash
+npm pack
+cp ./dist/*.tgz ~/path/to/your/local/npm/repo
+cd ~/path/to/your/local/npm/repo
+npm install *.tgz
+```
+
+## Publishing to NPM
+
+Follow the [release instructions](../../RELEASE.md) using changesets.
+
+## License
 
-```html
-<callout></callout>
-```
+MIT

package/dist/Callout.vue.d.ts

@@ -1,37 +1,27 @@
-import { CalloutProps } from './types';
-
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CalloutProps>, {
-    messageType: string;
-    message: string;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<CalloutProps>, {
-    messageType: string;
-    message: string;
-}>>> & Readonly<{}>, {
-    message: string;
-    messageType: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
-    default?(_: {}): any;
-}>;
-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;
+import { CalloutProps } from './index';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
     };
+    refs: {};
+    rootEl: HTMLDivElement;
 };
-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_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<CalloutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    dismiss: () => any;
+}, string, import('vue').PublicProps, Readonly<CalloutProps> & Readonly<{
+    onDismiss?: (() => any) | undefined;
+}>, {
+    message: string;
+    type: "info" | "warning" | "error";
+    dismissible: boolean;
+}, {}, {}, {}, string, import('vue').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;
     };
 };
+//# sourceMappingURL=Callout.vue.d.ts.map

package/dist/Callout.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.vue.d.ts","sourceRoot":"","sources":["../src/Callout.vue"],"names":[],"mappings":"AAgDA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA2B5C,iBAAS,cAAc;WAqDT,OAAO,IAA6B;;yBAVrB,GAAG;;;;EAe/B;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;wFASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import { BaseProps } from '@phila/phila-ui-core';
+export { default as Callout } from './Callout.vue';
+export interface CalloutProps extends BaseProps {
+    message?: string;
+    type?: "info" | "warning" | "error";
+    icon?: string;
+    dismissible?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,eAAe,CAAC;AAInD,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB"}