@krumio/trailhand-ui 1.5.0 → 1.7.0

package/README.md

@@ -94,16 +94,20 @@ npm run build-storybook
 ```
 trailhand-ui/
 ├── src/
-│   ├── components/           # Web components (TypeScript)
-│   │   ├── toggle-switch/
-│   │   ├── data-table/
-│   │   └── action-menu/
-│   ├── design-system/        # Design system stories
+│   ├── components/                 # Components
+│   │   ├── button/                 # Component folder
+│   │   │   ├── button.ts           # Web component
+│   │   │   ├── index.ts            # Export file
+│   │   │   ├── button.stories.ts   # Storybook for documentation and testing
+│   │   │   └── button.test.ts      # Unit tests
+│   │   └── more components/
+│   ├── design-system/              # Design system stories
 │   └── styles/
-│       └── colors.css        # Global color variables
-├── stories/                  # Additional Storybook stories
-├── .storybook/               # Storybook configuration
-├── dist/                     # Compiled output
+│       └── colors.css              # Global color variables
+├── dev/                            # Playground application for development
+├── stories/                        # Additional Storybook stories
+├── .storybook/                     # Storybook configuration
+├── dist/                           # Compiled output
 └── package.json
 ```
 
@@ -128,8 +132,8 @@ A sortable, paginated data table with search and custom actions.
 
 ```html
 <data-table
-  .columns=${columns}
-  .data=${data}
+  .columns="${columns}"
+  .data="${data}"
   searchable
   paginated
 ></data-table>
@@ -148,6 +152,92 @@ A dropdown menu for row-level actions in tables.
 ></action-menu>
 ```
 
+### Button
+
+A simple button with different variations to handle click events.
+
+```html
+<trailhand-button @click="${handleClick}" variant="primary" size="large">
+  <trailhand-icon name="globe" slot="icon-left"></trailhand-icon>
+  Primary
+  <trailhand-icon name="globe" slot="icon-right"></trailhand-icon>
+</trailhand-button>
+```
+
+## Testing
+
+This component library will serve as the foundation for future projects, thus it is important to ensure that these components are well tested. Thankfully, Storybook provides many useful tools to test the components using various methods.
+
+### Render Tests
+
+Render tests (smoke tests), as one might expect, simply tes that the component renders as desired. These tests serve to find any errors that would cause the component to fail on render. Storybook turns each story into a render test. By adding stories to represent the various states of a component, you can confirm that the component will render in that state.
+
+### Interaction Tests
+
+After confirming that a component renders properly, you would likely next want to test that it behaves properly. These interaction tests can be written by adding a new story for the interaction you are testing, and then using the "play" method provided by Storybook to simulate user interactions and make assumptions against expected results.
+
+### Accessibility Tests
+
+Storybook also provides addons to check components against accessibility rules. This ensures components meet certain standards. The configuration for which rules are applied as well as the result of not meeting said rules can be set in .storybook/preview.js. These properties can also be set at the Component and Story levels in case secific rulesets need to be applied or removed.
+
+### Visual Tests
+
+Visual tests compare snapshots taken of components to catch unexpected visual changes. The Storybook developers provide a platform to run and manage these tests called Chromatic.
+
+### Unit Tests
+
+The testing methods listed above are great for ensuring user-visible behavior. However, there may be things that need to be tested that are not captured in the methods above, and for that we can use Vitest unit tests. Storybook can confirm visible outcomes, however, to truly test the buisness logic in the component or in associated helpers unit tests are required.
+
+### Running the tests
+
+Tests can be executed via the Storybook UI or in the command line.
+
+#### Via Storybook
+
+To run tests via the Storybook UI, first run
+
+```bash
+npm run storybook
+```
+
+In the bottom left hand corner of the UI, you can open a menu to run tests and view test results.
+
+![Storybook Testing Menu](/docs/images/image.png)
+
+You can also view test results for specific stories in the playground for that story.
+
+![Interaction Test](/docs/images/image-1.png)
+
+![Visual Tests](/docs/images/image-2.png)
+
+![Accessibility Test](/docs/images/image-3.png)
+
+#### Via the command line
+
+To run render, interaction and accessibility tests via the command line run the following command
+
+```bash
+npm run test:storybook
+```
+
+To run unit tests via the command line run the following command
+
+```bash
+npm run test:unit
+```
+
+To run both storybook and unit tests via the command line run the following command
+
+```bash
+npm run test
+```
+
+To run visual tests via the command line ensure CHROMATIC_PROJECT_TOKEN is added to your env and then run the following command
+
+```bash
+npm run chromatic
+```
+
 ## Tech Stack
 
 - **Lit Element** 3.x - Web component library
@@ -162,6 +252,7 @@ A dropdown menu for row-level actions in tables.
 This library uses **Lit Element** for building fast, lightweight web components. Web components are framework-agnostic and work with any JavaScript framework or vanilla JS.
 
 ### Benefits
+
 - Framework agnostic
 - Encapsulated styles and functionality
 - Reusable across projects

package/dist/components/button/button.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult } from 'lit';
+export interface ButtonProps {
+    variant: 'primary' | 'secondary' | 'alternate' | 'destructive' | 'confirmation';
+    size: 'small' | 'medium' | 'large';
+    disabled: boolean;
+    type: 'button' | 'submit' | 'reset';
+    name: string;
+}
+export declare class Button extends LitElement {
+    variant: 'primary' | 'secondary' | 'alternate' | 'destructive' | 'confirmation';
+    size: 'small' | 'medium' | 'large';
+    name: string;
+    disabled: boolean;
+    type: 'button' | 'submit' | 'reset';
+    static styles: import("lit").CSSResult;
+    updated(): void;
+    private handleClick;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,MAAM,WAAW,WAAW;IAC1B,OAAO,EACH,SAAS,GACT,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,CAAC;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,MAAO,SAAQ,UAAU;IAEpC,OAAO,EACH,SAAS,GACT,WAAW,GACX,WAAW,GACX,aAAa,GACb,cAAc,CAAa;IAG/B,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,IAAI,SAAM;IAGV,QAAQ,UAAS;IAGjB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C,OAAgB,MAAM,0BAwGpB;IAEF,OAAO;IAQP,OAAO,CAAC,WAAW;IAmBV,MAAM,IAAI,cAAc;CA0BlC"}

package/dist/components/button/button.js

@@ -0,0 +1,189 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+export class Button extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'primary';
+        this.size = 'medium';
+        this.name = '';
+        this.disabled = false;
+        this.type = 'button';
+    }
+    updated() {
+        if (this.disabled) {
+            this.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            this.removeAttribute('aria-disabled');
+        }
+    }
+    handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('button-click', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                name: this.name,
+                originalEvent: e,
+            },
+        }));
+    }
+    render() {
+        const styles = {};
+        return html `
+      <button
+        type=${this.type}
+        class="trailhand-button trailhand-button--${this
+            .variant} trailhand-button--${this.size}"
+        style=${styleMap(styles)}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+      >
+        <span class="icon left">
+          <slot name="icon-left"></slot>
+        </span>
+
+        <span class="label">
+          <slot></slot>
+        </span>
+
+        <span class="icon right">
+          <slot name="icon-right"></slot>
+        </span>
+      </button>
+    `;
+    }
+}
+Button.styles = css `
+    :host {
+      display: inline-block;
+    }
+
+    .trailhand-button {
+      font-family: 'Montserrat', system-ui, sans-serif;
+      font-weight: 600;
+      border: 0;
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      line-height: 1;
+      width: 100%;
+    }
+
+    .trailhand-button:disabled {
+      cursor: not-allowed;
+      background-color: var(--button-disabled-bg, #e0e0e0);
+      color: var(--button-disabled-color, #a8a8a8);
+      border: none;
+    }
+
+    .trailhand-button--primary {
+      color: var(--button-primary-color, #fff);
+      background-color: var(--button-primary-bg, #005cb9);
+    }
+
+    .trailhand-button--primary:not(:disabled):hover {
+      background-color: var(--button-primary-bg-hover, #00478e);
+    }
+
+    .trailhand-button--secondary {
+      color: var(--button-secondary-color, #005cb9);
+      background-color: var(--button-secondary-bg, #ffffff);
+      border: 1px solid var(--button-secondary-border, #005cb9);
+    }
+
+    .trailhand-button--secondary:not(:disabled):hover {
+      background-color: var(--button-secondary-bg-hover, #f5faff);
+    }
+
+    .trailhand-button--alternate {
+      color: var(--button-alternate-color, #ffffff);
+      background-color: var(--button-alternate-bg, #3492f1);
+    }
+
+    .trailhand-button--alternate:not(:disabled):hover {
+      background-color: var(--button-alternate-bg-hover, #156ec8);
+    }
+
+    .trailhand-button--destructive {
+      color: var(--button-destructive-color, #fff);
+      background-color: var(--button-destructive-bg, #9f3a3a);
+    }
+
+    .trailhand-button--destructive:not(:disabled):hover {
+      background-color: var(--button-destructive-bg-hover, #731616);
+    }
+
+    .trailhand-button--confirmation {
+      color: var(--button-confirmation-color, #fff);
+      background-color: var(--button-confirmation-bg, #30ac66);
+    }
+
+    .trailhand-button--confirmation:not(:disabled):hover {
+      background-color: var(--button-confirmation-bg-hover, #0f8240);
+    }
+
+    .trailhand-button--small {
+      font-size: 11px;
+      padding: 12px 8px;
+    }
+
+    .trailhand-button--medium {
+      font-size: 12px;
+      padding: 12px 16px;
+    }
+
+    .trailhand-button--large {
+      font-size: 14px;
+      padding: 16px 32px;
+    }
+
+    .icon {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .icon.left {
+      margin-right: 0.25rem;
+    }
+
+    .icon.right {
+      margin-left: 0.25rem;
+    }
+
+    .label {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], Button.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Button.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], Button.prototype, "type", void 0);
+customElements.define('trailhand-button', Button);
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAevD,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAEE,YAAO,GAKc,SAAS,CAAC;QAG/B,SAAI,GAAiC,QAAQ,CAAC;QAG9C,SAAI,GAAG,EAAE,CAAC;QAGV,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAkC,QAAQ,CAAC;IAiKjD,CAAC;IArDC,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,CAAQ;QAC1B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,aAAa,EAAE,CAAC;aACjB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;oDAC4B,IAAI;aAC7C,OAAO,sBAAsB,IAAI,CAAC,IAAI;gBACjC,QAAQ,CAAC,MAAM,CAAC;oBACZ,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,WAAW;;;;;;;;;;;;;;KAc5B,CAAC;IACJ,CAAC;;AA9Je,aAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwG3B,AAxGqB,CAwGpB;AA3HF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAMI;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACoB;AAmKjD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Button } from './button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/button/index.js

@@ -0,0 +1,2 @@
+export { Button } from './button';
+//# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+declare const iconMap: {
+    globe: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    home: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    user: import("@fortawesome/fontawesome-common-types").IconDefinition;
+};
+export declare const availableIcons: (keyof typeof iconMap)[];
+type AvailableIcons = keyof typeof iconMap;
+export interface IconProps {
+    name: AvailableIcons;
+}
+export declare class Icon extends LitElement {
+    name: AvailableIcons;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1> | null;
+}
+export {};
+//# sourceMappingURL=icon.d.ts.map

package/dist/components/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C,QAAA,MAAM,OAAO;;;;CAIZ,CAAC;AAEF,eAAO,MAAM,cAAc,EAA2B,CAAC,MAAM,OAAO,OAAO,CAAC,EAAE,CAAC;AAI/E,KAAK,cAAc,GAAG,MAAM,OAAO,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,cAAc,CAAC;CACtB;AAED,qBAAa,IAAK,SAAQ,UAAU;IACN,IAAI,EAAE,cAAc,CAAU;IAE1D,MAAM,CAAC,MAAM,0BAWX;IAEF,MAAM;CAIP"}

package/dist/components/icon/icon.js

@@ -0,0 +1,44 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { library, icon } from '@fortawesome/fontawesome-svg-core';
+import { faGlobe, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
+const iconMap = {
+    globe: faGlobe,
+    home: faHome,
+    user: faUser,
+};
+export const availableIcons = Object.keys(iconMap);
+library.add(...Object.values(iconMap));
+export class Icon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.name = 'user';
+    }
+    render() {
+        const faIcon = icon({ prefix: 'fas', iconName: this.name });
+        return faIcon ? html `${faIcon.node[0]}` : null;
+    }
+}
+Icon.styles = css `
+    :host {
+      display: inline-flex;
+      width: 1em;
+      height: 1em;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], Icon.prototype, "name", void 0);
+customElements.define('trailhand-icon', Icon);
+//# sourceMappingURL=icon.js.map

package/dist/components/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAE5E,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAA6B,CAAC;AAE/E,OAAO,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;AAQvC,MAAM,OAAO,IAAK,SAAQ,UAAU;IAApC;;QAC8B,SAAI,GAAmB,MAAM,CAAC;IAmB5D,CAAC;IAJC,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5D,OAAO,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;IACjD,CAAC;;AAhBM,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAWlB,AAXY,CAWX;AAb0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kCAA+B;AAqB5D,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Icon } from './icon';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/components/icon/index.js

@@ -0,0 +1,2 @@
+export { Icon } from './icon';
+//# sourceMappingURL=index.js.map

package/dist/components/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * from './components/toggle-switch';
 export * from './components/action-menu';
 export * from './components/data-table';
+export * from './components/button';
+export * from './components/icon';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -2,4 +2,6 @@
 export * from './components/toggle-switch';
 export * from './components/action-menu';
 export * from './components/data-table';
+export * from './components/button';
+export * from './components/icon';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}

package/dist/styles/colors.css

@@ -0,0 +1,132 @@
+/**
+ * TrailHand UI Global Color Variables
+ * Based on Figma Design System Color Palette
+ *
+ * Usage: Import this file in your application root, then use CSS variables
+ * Example: color: var(--color-primary);
+ */
+
+:root {
+  /* Color Palette */
+  /* Primary Blues */
+  --color-primary: #3d98d3; /* Primary brand color */
+  --color-light-primary: #e6f3ff; /* Light variant for backgrounds */
+  --color-dark-primary: #005cb9; /* Dark variant for buttons/links */
+
+  /* Black + White */
+  --color-black: #000000;
+  --color-white: #ffffff;
+
+  /* Greyscale */
+  --color-grey-100: #fafafa;
+  --color-grey-200: #ebebeb;
+  --color-grey-300: #d7d7d7;
+  --color-grey-400: #bababa;
+  --color-grey-500: #8d8d8d;
+  --color-grey-600: #636363;
+  --color-grey-700: #303131;
+  --color-grey-800: #212121;
+
+  /* Status Colors */
+  --color-light-red: #fee2e2;
+  --color-red: #9f3a3a;
+  --color-dark-red: #731616;
+
+  --color-light-green: #d2fdd2;
+  --color-green: #30ac66;
+  --color-dark-green: #0f8240;
+
+  --color-light-yellow: #fffeb4;
+  --color-yellow: #d3c255;
+  --color-dark-yellow: #a89939;
+
+  --color-light-blue: #e6f3ff;
+  --color-blue: #0085ff;
+  --color-dark-blue: #005cb9;
+
+  /* Semantic Aliases - for common use cases */
+  /* Text */
+  --color-text-primary: var(--color-grey-800);
+  --color-text-secondary: var(--color-grey-600);
+  --color-text-muted: var(--color-grey-500);
+  --color-text-inverse: var(--color-white);
+
+  /* Backgrounds */
+  --color-background: var(--color-white);
+  --color-background-muted: var(--color-grey-100);
+  --color-background-hover: var(--color-grey-200);
+
+  /* Borders */
+  --color-border: var(--color-grey-300);
+  --color-border-light: var(--color-grey-200);
+
+  --color-error-outline: var(--color-red);
+  --color-success-outline: var(--color-green);
+  --color-warning-outline: var(--color-yellow);
+  --color-info-outline: var(--color-blue);
+
+  --color-error-fill: var(--color-light-red);
+  --color-success-fill: var(--color-light-green);
+  --color-warning-fill: var(--color-light-yellow);
+  --color-info-fill: var(--color-light-blue);
+
+  /* Component-specific variables (mapped to palette) */
+  /* Links */
+  --color-link: var(--color-primary);
+  --color-link-hover: var(--color-primary);
+  /* Buttons */
+  --button-disabled-bg: var(--color-grey-200);
+  --button-disabled-color: var(--color-grey-500);
+
+  --button-primary-bg: var(--color-primary);
+  --button-primary-bg-hover: var(--color-dark-primary);
+  --button-primary-color: var(--color-white);
+
+  --button-secondary-bg: var(--color-white);
+  --button-secondary-bg-hover: var(--color-light-primary);
+  --button-secondary-color: var(--color-primary);
+  --button-secondary-border: var(--color-primary);
+
+  --button-alternate-bg: var(--color-blue);
+  --button-alternate-bg-hover: var(--color-dark-blue);
+  --button-alternate-color: var(--color-white);
+
+  --button-destructive-bg: var(--color-red);
+  --button-destructive-bg-hover: var(--color-dark-red);
+  --button-destructive-color: var(--color-white);
+
+  --button-confirmation-bg: var(--color-green);
+  --button-confirmation-bg-hover: var(--color-dark-green);
+  --button-confirmation-color: var(--color-white);
+
+  /* Shadow colors using opacity */
+  --color-shadow: rgba(0, 0, 0, 0.1);
+  --color-shadow-medium: rgba(0, 0, 0, 0.15);
+}
+
+/* Dark Theme Overrides */
+[data-theme='dark'] {
+  /* Text */
+  --color-text-primary: var(--color-grey-100);
+  --color-text-secondary: var(--color-grey-300);
+  --color-text-muted: var(--color-grey-500);
+
+  /* Backgrounds */
+  --color-background: var(--color-grey-800);
+  --color-background-muted: var(--color-grey-700);
+  --color-background-hover: var(--color-grey-600);
+
+  /* Borders */
+  --color-border: var(--color-grey-700);
+
+  /* Buttons */
+  --button-primary-bg: var(--color-dark-primary);
+  --button-primary-bg-hover: var(--color-primary);
+
+  --button-secondary-bg: var(--color-grey-800);
+  --button-secondary-bg-hover: var(--color-grey-700);
+  --button-secondary-color: var(--color-primary);
+
+  --button-disabled-bg: var(--color-grey-700);
+  --button-disabled-color: var(--color-grey-500);
+}