npm - @actabldesign/bellhop-core - Versions diffs - 0.0.8 → 0.0.12 - Mend

@actabldesign/bellhop-core 0.0.8 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (466) hide show

package/README.md CHANGED Viewed

@@ -1,15 +1,11 @@
 # @actabldesign/bellhop-core
-Bellhop Web Components Library built with StencilJS.
-## Overview
-This package provides framework-agnostic web components that can be used in any frontend application, including vanilla JavaScript, React, Angular, and Vue.
+Bellhop Web Components Library built with StencilJS. Framework-agnostic web components that can be used in any frontend application.
 ## Installation
 ```bash
-npm install @actabldesign/bellhop-core
+npm install @actabldesign/bellhop-core @actabldesign/bellhop-styles
 ```
 ## Usage
@@ -19,12 +15,19 @@ npm install @actabldesign/bellhop-core
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <script type="module" src="node_modules/@actabldesign/bellhop-core/dist/bellhop-core/bellhop-core.esm.js"></script>
-</head>
-<body>
-  <bh-button label="Click Me" hierarchy="primary"></bh-button>
-</body>
+  <head>
+    <link
+      rel="stylesheet"
+      href="node_modules/@actabldesign/bellhop-styles/index.css"
+    />
+    <script
+      type="module"
+      src="node_modules/@actabldesign/bellhop-core/dist/bellhop-core/bellhop-core.esm.js"
+    ></script>
+  </head>
+  <body>
+    <bh-button label="Click Me" hierarchy="primary"></bh-button>
+  </body>
 </html>
 ```
@@ -60,13 +63,13 @@ import { defineCustomElements } from '@actabldesign/bellhop-core/loader';
 defineCustomElements();
 ```
-Add `CUSTOM_ELEMENTS_SCHEMA` to your module:
+Add `CUSTOM_ELEMENTS_SCHEMA` to your module or component:
 ```typescript
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 @NgModule({
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule {}
 ```
@@ -74,14 +77,115 @@ export class AppModule {}
 Use in templates:
 ```html
-<bh-button label="Click Me" hierarchy="primary" (bhClick)="handleClick($event)"></bh-button>
+<bh-button
+  label="Click Me"
+  hierarchy="primary"
+  (bhClick)="handleClick($event)"
+></bh-button>
 ```
 ## Available Components
-| Component | Tag | Description |
-|-----------|-----|-------------|
-| Button | `<bh-button>` | Versatile button with multiple variants |
+### Layout & Navigation
+| Component       | Tag                    | Description                    |
+| --------------- | ---------------------- | ------------------------------ |
+| Appbar          | `<bh-appbar>`          | Application header bar         |
+| Sidebar         | `<bh-sidebar>`         | Side navigation panel          |
+| Card            | `<bh-card>`            | Content container card         |
+| Card Header     | `<bh-card-header>`     | Card header section            |
+| Card Footer     | `<bh-card-footer>`     | Card footer section            |
+| Modal           | `<bh-modal>`           | Modal dialog                   |
+| Modal Header    | `<bh-modal-header>`    | Modal header section           |
+| Modal Actions   | `<bh-modal-actions>`   | Modal action buttons container |
+| Accordion       | `<bh-accordion>`       | Collapsible content sections   |
+| Accordion Item  | `<bh-accordion-item>`  | Individual accordion section   |
+| Tabs            | `<bh-tabs>`            | Tab navigation                 |
+| Tab Item        | `<bh-tab-item>`        | Individual tab                 |
+| Breadcrumbs     | `<bh-breadcrumbs>`     | Navigation breadcrumbs         |
+| Page Navigation | `<bh-page-navigation>` | In-page navigation             |
+| Pagination      | `<bh-pagination>`      | Page pagination controls       |
+### Form Inputs
+| Component          | Tag                       | Description                           |
+| ------------------ | ------------------------- | ------------------------------------- |
+| Button             | `<bh-button>`             | Primary button component              |
+| Button Icon        | `<bh-button-icon>`        | Icon-only button                      |
+| Input Text         | `<bh-input-text>`         | Text input field                      |
+| Input Password     | `<bh-input-password>`     | Password input with visibility toggle |
+| Input Number       | `<bh-input-number>`       | Numeric input field                   |
+| Input Autocomplete | `<bh-input-autocomplete>` | Autocomplete text input               |
+| Input Verification | `<bh-input-verification>` | Verification code input               |
+| Textarea           | `<bh-textarea>`           | Multi-line text input                 |
+| Checkbox           | `<bh-checkbox>`           | Checkbox input                        |
+| Checkbox Group     | `<bh-checkbox-group>`     | Group of checkboxes                   |
+| Radio Button       | `<bh-radio-button>`       | Radio button input                    |
+| Toggle             | `<bh-toggle>`             | Toggle switch                         |
+| Dropdown           | `<bh-dropdown>`           | Dropdown select                       |
+| Label              | `<bh-label>`              | Form field label                      |
+### Date & Time
+| Component         | Tag                      | Description           |
+| ----------------- | ------------------------ | --------------------- |
+| Date Picker       | `<bh-date-picker>`       | Single date selection |
+| Date Range Picker | `<bh-date-range-picker>` | Date range selection  |
+| Month Picker      | `<bh-month-picker>`      | Month selection       |
+### Data Display
+| Component      | Tag                   | Description                       |
+| -------------- | --------------------- | --------------------------------- |
+| Data Grid      | `<bh-data-grid>`      | Data table with sorting/filtering |
+| Badge          | `<bh-badge>`          | Status badge                      |
+| Badge Dot      | `<bh-badge-dot>`      | Dot indicator badge               |
+| Tag            | `<bh-tag>`            | Label tag                         |
+| Avatar         | `<bh-avatar>`         | User avatar                       |
+| Avatar Add     | `<bh-avatar-add>`     | Add avatar button                 |
+| Avatar Stacked | `<bh-avatar-stacked>` | Stacked avatar group              |
+| Tooltip        | `<bh-tooltip>`        | Tooltip on hover                  |
+| Popover        | `<bh-popover>`        | Popover content                   |
+### Charts
+| Component     | Tag                  | Description             |
+| ------------- | -------------------- | ----------------------- |
+| Bar Chart     | `<bh-bar-chart>`     | Bar chart visualization |
+| Pie Chart     | `<bh-pie-chart>`     | Pie chart visualization |
+| Trend Chart   | `<bh-trend-chart>`   | Trend line chart        |
+| Chart Tooltip | `<bh-chart-tooltip>` | Chart tooltip           |
+### Feedback & Status
+| Component       | Tag                    | Description              |
+| --------------- | ---------------------- | ------------------------ |
+| Notification    | `<bh-notification>`    | Toast notification       |
+| Loader Spinner  | `<bh-loader-spinner>`  | Loading spinner          |
+| Empty State     | `<bh-empty-state>`     | Empty state placeholder  |
+| Skeleton Loader | `<bh-skeleton-loader>` | Content loading skeleton |
+### Branding & Media
+| Component         | Tag                      | Description                 |
+| ----------------- | ------------------------ | --------------------------- |
+| Featured Icon     | `<bh-featured-icon>`     | Highlighted icon display    |
+| Logo Box          | `<bh-logo-box>`          | Logo container              |
+| Illustrations     | `<bh-illustrations>`     | SVG illustration display    |
+| Product Switcher  | `<bh-product-switcher>`  | Product navigation switcher |
+| Property Switcher | `<bh-property-switcher>` | Property selection          |
+## Component Naming Convention
+All components use the `bh-` prefix to avoid conflicts with other libraries.
+## Styling
+Components require the `@actabldesign/bellhop-styles` package for proper styling:
+```css
+@import '@actabldesign/bellhop-styles';
+```
 ## Development
@@ -94,23 +198,18 @@ npm run test
 # Start dev server
 npm run start
-```
-## Component Naming Convention
+# Generate new component
+npm run generate
+```
-All components use the `bh-` prefix to avoid conflicts with other libraries:
-- `<bh-button>` - Button component
-- `<bh-input-text>` - Text input (coming soon)
-- `<bh-badge>` - Badge component (coming soon)
+## Related Packages
-## Design Tokens
+- `@actabldesign/bellhop-react` - React component wrappers
+- `@actabldesign/bellhop-angular` - Angular component wrappers
+- `@actabldesign/bellhop-styles` - CSS styles and design tokens
+- `@actabldesign/bellhop-assets` - SVG icons, illustrations, logos
-The components use CSS custom properties for theming. Import the global styles or define your own variables:
+## License
-```css
-:root {
-  --color-brand-600: #4338ca;
-  --color-neutral-600: #475569;
-  /* ... other tokens */
-}
-```
+MIT

package/components/bh-accordion-item.js CHANGED Viewed

@@ -72,7 +72,7 @@ const BhAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class BhAccordionItem
             'accordion-item-animating': this.isAnimating,
         };
         const iconName = this.expanded ? 'expand_less' : 'expand_more';
-        return (h(Host, { key: '0c2f1ecc9d3eb6f6826811e6d3a5597cb024f76b', class: hostClasses }, h("div", { key: '07eac8349ec20a34b56fa216eb0111ccc9b29cb1', class: "accordion-header", part: "header", role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `content-${this.value}`, onClick: this.handleHeaderClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'bba216c5755b48a8f6e41aa7eea3d9a8deb11015', class: "accordion-header-content" }, h("span", { key: '8e6bdb61f7c1f29ed59ef6febca2834ef19c4036', class: "accordion-title", part: "title" }, this.header)), h("span", { key: '41d856e6da6cd64634c67de168f548f4307964e3', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), h("div", { key: 'cd9767f9ab78dd18d2c2e8a93b757a287e02c2d2', id: `content-${this.value}`, class: "accordion-content", part: "content", role: "region", "aria-labelledby": `header-${this.value}`, "aria-hidden": !this.expanded ? 'true' : 'false' }, h("div", { key: '32dbf5b959a5ebd0484344e1070af8e9dbab98ed', class: "accordion-content-inner" }, h("slot", { key: 'cf338a1116f4c2926eba447ca40ae0308f91529e' })))));
+        return (h(Host, { key: 'f842ac74a60bbaebc9c6d8a1c847b8a5dc2611de', class: hostClasses }, h("div", { key: '92262b9e3fec2035888b1bc761f1b0df08a50714', class: "accordion-header", part: "header", role: "button", tabindex: this.disabled ? -1 : 0, "aria-expanded": this.expanded ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-controls": `content-${this.value}`, onClick: this.handleHeaderClick, onKeyDown: this.handleKeyDown }, h("div", { key: '2f2a94ab802a808f74201feb321e2cd3ea509ea7', class: "accordion-header-content" }, h("span", { key: '7af3dc170f4249ac8d968482c9cb66bab5d9a68e', class: "accordion-title", part: "title" }, this.header)), h("span", { key: '75be6a39b8fa1a64316e3853ddfbc0dd6030a4b0', class: "accordion-icon material-symbols-outlined", part: "icon" }, iconName)), h("div", { key: '7449ddf43d5921bddf50e4798934002003e8a3d7', id: `content-${this.value}`, class: "accordion-content", part: "content", role: "region", "aria-labelledby": `header-${this.value}`, "aria-hidden": !this.expanded ? 'true' : 'false' }, h("div", { key: 'd5451eea049596360358354bbe3df957e40c1df4', class: "accordion-content-inner" }, h("slot", { key: 'a09a01d6f299fb52ff7c2c28bf72fcf286b31a97' })))));
     }
     static get watchers() { return {
         "expanded": ["handleExpandedChange"]

package/components/bh-avatar-add.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BhAvatarAdd$1, d as defineCustomElement$1 } from './p-B0vRPcr5.js';
+import { B as BhAvatarAdd$1, d as defineCustomElement$1 } from './p-D8L5XpBP.js';
 const BhAvatarAdd = BhAvatarAdd$1;
 const defineCustomElement = defineCustomElement$1;

package/components/bh-avatar-stacked.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './p-BsHlTsAN.js';
-import { d as defineCustomElement$4 } from './p-CMoGgYqw.js';
-import { d as defineCustomElement$3 } from './p-B0vRPcr5.js';
-import { d as defineCustomElement$2 } from './p-BSok41i-.js';
+import { d as defineCustomElement$4 } from './p-DmELCHDa.js';
+import { d as defineCustomElement$3 } from './p-D8L5XpBP.js';
+import { d as defineCustomElement$2 } from './p-oyeucMe6.js';
 const bhAvatarStackedCss = ":host{display:inline-block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.avatar-stacked{display:flex;align-items:center}.avatar-item{position:relative;display:inline-flex}.avatar-item bh-avatar,.avatar-item bh-avatar-add{box-shadow:0 0 0 2px var(--color-white, #ffffff);border-radius:50%}";

package/components/bh-avatar.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BhAvatar$1, d as defineCustomElement$1 } from './p-CMoGgYqw.js';
+import { B as BhAvatar$1, d as defineCustomElement$1 } from './p-DmELCHDa.js';
 const BhAvatar = BhAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/components/bh-button.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BhButton$1, d as defineCustomElement$1 } from './p-B02xFf1P.js';
+import { B as BhButton$1, d as defineCustomElement$1 } from './p-CiEBtN9j.js';
 const BhButton = BhButton$1;
 const defineCustomElement = defineCustomElement$1;

package/components/bh-card-header.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BsHlTsAN.js';
 import { d as defineCustomElement$4 } from './p-DO_g_QMm.js';
 import { d as defineCustomElement$3 } from './p-BajBGXic.js';
-import { d as defineCustomElement$2 } from './p-h6juyPoa.js';
+import { d as defineCustomElement$2 } from './p-JJSN-gZI.js';
 const bhCardHeaderCss = ":host{display:block}.card-header{display:flex;flex-direction:column;gap:var(--spacing-lg);background:var(--color-white)}.card-header-content{display:flex;gap:var(--spacing-md);align-items:flex-start;padding:var(--spacing-lg) var(--spacing-xl) 0 var(--spacing-xl)}.card-header-text-container{display:flex;flex-direction:column;flex:1 0 0;gap:var(--spacing-xxs);min-width:0}.card-header-title-row{display:flex;align-items:center;gap:var(--spacing-lg)}.card-header-title{font-family:var(--font-inter);font-size:var(--text-md-size);font-weight:var(--weight-semibold);line-height:var(--text-md-line);color:var(--color-neutral-900)}.card-header-supporting-row{display:flex;align-items:center;gap:var(--spacing-lg);width:100%}.card-header-spacer{width:32px;flex-shrink:0}.card-header-supporting-text{flex:1 0 0;font-family:var(--font-inter);font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-header-divider{height:1px;background:var(--color-neutral-200)}";

package/components/bh-card.js CHANGED Viewed

@@ -41,7 +41,7 @@ const BhCard$1 = /*@__PURE__*/ proxyCustomElement(class BhCard extends H {
         const contentStyle = {
             minHeight: `${this.contentMinHeight}px`,
         };
-        return (h(Host, { key: '2f01aa3ee4b9cdeb1d5f0f16a961af880e11d0fb' }, h("div", { key: '4f4542a1f24dc9db216fef1e361efff54cb5f538', class: "card" }, this.showHeader && (h("div", { key: 'c290615fb8b36c965ac6a032963f2b4e78c22a29', class: "card-header-slot" }, h("slot", { key: '35d78f934a0a8486a62ff17897537cc0afd355a7', name: "header" }))), h("div", { key: 'bfd8a8827ea13baad0862ed5d962853ceed4be4e', class: "card-content", style: contentStyle }, h("slot", { key: 'b43aad6dfb675e4fd32f9614ba83f67aac264aa0' }), !this.hasContent && (h("div", { key: 'a9cf30bb2b1a9a0ab4baf6fa9d8514181f1e79c5', class: "card-content-placeholder" }, h("span", { key: '7d46bf5c2246cd8d9bd2d73695d9b55a1ba6112c', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: '5588ba1dcc017c899909917f31961414dc4ffd9e', class: "card-footer-slot" }, h("slot", { key: 'ff28528d0090a67061fc7cd63f7df68662d908a8', name: "footer" }))))));
+        return (h(Host, { key: '31c722ab510a95909c875f389116ff547f3fb119' }, h("div", { key: 'b5390ca668bd29974154f7b0b831a4ce98b45394', class: "card" }, this.showHeader && (h("div", { key: 'df7f16b333cb5b8f651175c6c8299b35b90e16f2', class: "card-header-slot" }, h("slot", { key: '978b518b1ae6087bcb96846aa5c802524748bd14', name: "header" }))), h("div", { key: '7a1b7437e801d9b547d7bcd45639baf0774c34d7', class: "card-content", style: contentStyle }, h("slot", { key: '6c22feff58b21f0aec25c6f547d1443bf1f88f9d' }), !this.hasContent && (h("div", { key: '4b42011a00526f859a967a07fefd028cf9903f41', class: "card-content-placeholder" }, h("span", { key: '25fc157be159aae504164dd4dcb0faa9df632756', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: '115e111772a1446b874e6f02f025fde54becd0a3', class: "card-footer-slot" }, h("slot", { key: '2cd029465310d2db438a684a3f6009e234b14c1b', name: "footer" }))))));
     }
     static get style() { return bhCardCss; }
 }, [769, "bh-card", {

package/components/bh-checkbox-group-item.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BsHlTsAN.js';
-import { d as defineCustomElement$6 } from './p-D0Ba0gOA.js';
-import { d as defineCustomElement$5 } from './p-h6juyPoa.js';
-import { d as defineCustomElement$4 } from './p-Df8KgHhe.js';
-import { d as defineCustomElement$3 } from './p-Cmo_S3fO.js';
-import { d as defineCustomElement$2 } from './p-BSok41i-.js';
+import { d as defineCustomElement$6 } from './p-BqYBdZ7I.js';
+import { d as defineCustomElement$5 } from './p-JJSN-gZI.js';
+import { d as defineCustomElement$4 } from './p-BrIid8rr.js';
+import { d as defineCustomElement$3 } from './p-CiZSLZTA.js';
+import { d as defineCustomElement$2 } from './p-oyeucMe6.js';
 const bhCheckboxGroupItemCss = ":host{display:block}.checkbox-group-item{display:flex;align-items:flex-start;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);cursor:pointer;transition:all 0.2s ease;box-sizing:border-box;font-family:var(--font-inter);outline:none}.checkbox-group-item-sm{padding:var(--spacing-xl);gap:var(--spacing-md)}.checkbox-group-item-md{padding:var(--spacing-xl) var(--spacing-2xl);gap:var(--spacing-lg)}.checkbox-group-item-icon-simple{gap:var(--spacing-lg)}.checkbox-group-item-active{border-color:var(--color-brand-600);box-shadow:inset 0 0 0 1px var(--color-brand-600);background:var(--color-brand-50)}.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){background:var(--color-neutral-50);border-color:var(--color-neutral-300)}.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){box-shadow:0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled){box-shadow:inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-disabled{background:var(--color-neutral-100);border-color:var(--color-neutral-200);cursor:not-allowed;opacity:0.6}.item-content{display:flex;flex-direction:column;flex:1;gap:var(--spacing-xs);min-width:0}.item-text-row{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.item-title{font-size:var(--text-sm-size);font-weight:var(--weight-semibold);line-height:var(--text-sm-line);color:var(--color-neutral-900)}.item-subtitle{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600)}.item-description{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin:0}.checkbox-group-item-disabled .item-title,.checkbox-group-item-disabled .item-subtitle,.checkbox-group-item-disabled .item-description{color:var(--color-neutral-400)}.checkbox-group-item bh-checkbox,.checkbox-group-item bh-radio-button{pointer-events:none}";

package/components/bh-checkbox.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { B as BhCheckbox$1, d as defineCustomElement$1 } from './p-D0Ba0gOA.js';
+import { B as BhCheckbox$1, d as defineCustomElement$1 } from './p-BqYBdZ7I.js';
 const BhCheckbox = BhCheckbox$1;
 const defineCustomElement = defineCustomElement$1;