@affinda/wc 0.0.1 → 0.0.3

package/dist/collection/components/af-button/af-button.js

@@ -1,30 +1,39 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class AfButton {
     constructor() {
-        /** Visual style of the button */
+        /**
+         * The visual variant of the button
+         */
         this.variant = 'primary';
-        /** Size of the button */
-        this.size = 'md';
-        /** Disabled state */
+        /**
+         * The size of the button
+         */
+        this.size = 'default';
+        /**
+         * Whether the button is disabled
+         */
         this.disabled = false;
-        /** Loading state */
-        this.loading = false;
-        this.handleClick = (event) => {
-            if (this.disabled || this.loading) {
-                event.preventDefault();
-                event.stopPropagation();
-                return;
-            }
-            this.afClick.emit(event);
-        };
+        /**
+         * Button type (when not using href)
+         */
+        this.type = 'button';
     }
     render() {
         const classes = {
+            'button': true,
             [`variant-${this.variant}`]: true,
             [`size-${this.size}`]: true,
-            'is-loading': this.loading
+            'disabled': this.disabled
         };
-        return (h("button", { key: '11e06f0158591b7aaf60633fa12e91a2904d2f57', class: classes, part: "base", disabled: this.disabled || this.loading, onClick: this.handleClick }, h("span", { key: 'bdea09a13233b2e9c682e3c0a3d02fc8fe791668', class: "spinner", part: "spinner", "aria-hidden": !this.loading }), h("span", { key: '24a80ba696aecacda181203379345b28e741583c', class: "content", part: "label" }, h("slot", { key: 'bdd3731c9c98091503e1c87a7fe940bb72579d27' }))));
+        const content = [
+            h("span", { class: "icon-left" }, h("slot", { name: "icon-left" })),
+            h("span", { class: "label" }, h("slot", null)),
+            h("span", { class: "icon-right" }, h("slot", { name: "icon-right" }))
+        ];
+        if (this.href && !this.disabled) {
+            return (h(Host, null, h("a", { href: this.href, class: classes }, content)));
+        }
+        return (h(Host, null, h("button", { type: this.type, disabled: this.disabled, class: classes }, content)));
     }
     static get is() { return "af-button"; }
     static get encapsulation() { return "shadow"; }
@@ -44,15 +53,15 @@ export class AfButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'ghost'",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | 'outline' | 'ghost'",
+                    "resolved": "\"ghost\" | \"outline\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual style of the button"
+                    "text": "The visual variant of the button"
                 },
                 "getter": false,
                 "setter": false,
@@ -64,21 +73,21 @@ export class AfButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'md' | 'lg'",
-                    "resolved": "\"lg\" | \"md\"",
+                    "original": "'default' | 'small'",
+                    "resolved": "\"default\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Size of the button"
+                    "text": "The size of the button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "size",
-                "defaultValue": "'md'"
+                "defaultValue": "'default'"
             },
             "disabled": {
                 "type": "boolean",
@@ -92,58 +101,54 @@ export class AfButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled state"
+                    "text": "Whether the button is disabled"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
+                "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "loading": {
-                "type": "boolean",
+            "href": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Loading state"
+                    "text": "Optional href to render as a link"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true,
-                "attribute": "loading",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "afClick",
-                "name": "afClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Fired when the button is clicked while enabled"
+                    "text": "Button type (when not using href)"
                 },
-                "complexType": {
-                    "original": "MouseEvent",
-                    "resolved": "MouseEvent",
-                    "references": {
-                        "MouseEvent": {
-                            "location": "global",
-                            "id": "global::MouseEvent"
-                        }
-                    }
-                }
-            }];
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            }
+        };
     }
 }
 //# sourceMappingURL=af-button.js.map

package/dist/collection/components/af-button/af-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,QAAQ;IALrB;QAME,iCAAiC;QACzB,YAAO,GAAsC,SAAS,CAAC;QAE/D,yBAAyB;QACjB,SAAI,GAAgB,IAAI,CAAC;QAEjC,qBAAqB;QACI,aAAQ,GAAG,KAAK,CAAC;QAE1C,oBAAoB;QACK,YAAO,GAAG,KAAK,CAAC;QAKjC,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC;KAuBH;IArBC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,YAAY,EAAE,IAAI,CAAC,OAAO;SAC3B,CAAC;QAEF,OAAO,CACL,+DACE,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EACvC,OAAO,EAAE,IAAI,CAAC,WAAW;YAEzB,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,iBAAc,CAAC,IAAI,CAAC,OAAO,GAAS;YACxE,6DAAM,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO;gBAChC,8DAAQ,CACH,CACA,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /** Visual style of the button */\n  @Prop() variant: 'primary' | 'secondary' | 'ghost' = 'primary';\n\n  /** Size of the button */\n  @Prop() size: 'md' | 'lg' = 'md';\n\n  /** Disabled state */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Loading state */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Fired when the button is clicked while enabled */\n  @Event() afClick!: EventEmitter<MouseEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    this.afClick.emit(event);\n  };\n\n  render() {\n    const classes = {\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'is-loading': this.loading\n    };\n\n    return (\n      <button\n        class={classes}\n        part=\"base\"\n        disabled={this.disabled || this.loading}\n        onClick={this.handleClick}\n      >\n        <span class=\"spinner\" part=\"spinner\" aria-hidden={!this.loading}></span>\n        <span class=\"content\" part=\"label\">\n          <slot />\n        </span>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"af-button.js","sourceRoot":"","sources":["../../../src/components/af-button/af-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACK,YAAO,GAAkD,SAAS,CAAC;QAE3E;;WAEG;QACK,SAAI,GAAwB,SAAS,CAAC;QAE9C;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAOlC;;WAEG;QACK,SAAI,GAAkC,QAAQ,CAAC;KAwCxD;IAtCC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI;YACd,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YACjC,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,UAAU,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC;QAEF,MAAM,OAAO,GAAG;YACd,YAAM,KAAK,EAAC,WAAW;gBACrB,YAAM,IAAI,EAAC,WAAW,GAAQ,CACzB;YACP,YAAM,KAAK,EAAC,OAAO;gBACjB,eAAa,CACR;YACP,YAAM,KAAK,EAAC,YAAY;gBACtB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC1B;SACR,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,CACL,EAAC,IAAI;gBACH,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAC/B,OAAO,CACN,CACC,CACR,CAAC;QACJ,CAAC;QAED,OAAO,CACL,EAAC,IAAI;YACH,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,IAC7D,OAAO,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\n\n@Component({\n  tag: 'af-button',\n  styleUrl: 'af-button.css',\n  shadow: true\n})\nexport class AfButton {\n  /**\n   * The visual variant of the button\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'outline' | 'ghost' = 'primary';\n\n  /**\n   * The size of the button\n   */\n  @Prop() size: 'default' | 'small' = 'default';\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Optional href to render as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Button type (when not using href)\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  render() {\n    const classes = {\n      'button': true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      'disabled': this.disabled\n    };\n\n    const content = [\n      <span class=\"icon-left\">\n        <slot name=\"icon-left\"></slot>\n      </span>,\n      <span class=\"label\">\n        <slot></slot>\n      </span>,\n      <span class=\"icon-right\">\n        <slot name=\"icon-right\"></slot>\n      </span>\n    ];\n\n    if (this.href && !this.disabled) {\n      return (\n        <Host>\n          <a href={this.href} class={classes}>\n            {content}\n          </a>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <button type={this.type} disabled={this.disabled} class={classes}>\n          {content}\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-button-group/af-button-group.css

@@ -0,0 +1,22 @@
+:host {
+  display: inline-block;
+}
+
+.button-group {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.direction-horizontal {
+  flex-direction: row;
+}
+
+.direction-vertical {
+  flex-direction: column;
+}
+
+/* Ensure slotted buttons align properly */
+::slotted(*) {
+  flex-shrink: 0;
+}

package/dist/collection/components/af-button-group/af-button-group.js

@@ -0,0 +1,77 @@
+import { h, Host } from "@stencil/core";
+export class AfButtonGroup {
+    constructor() {
+        /**
+         * Layout direction of the button group
+         */
+        this.direction = 'horizontal';
+        /**
+         * Gap between buttons
+         */
+        this.gap = '8px';
+    }
+    render() {
+        const classes = {
+            'button-group': true,
+            [`direction-${this.direction}`]: true
+        };
+        return (h(Host, { key: '9ef4ea3e4429646edb2d14a780763807d35ca438' }, h("div", { key: '8f61ec426b1f01cfd0ed91b6045e01cc1ecb1637', class: classes, style: { gap: this.gap } }, h("slot", { key: '06acb0d36cc96b311c228ba19039899a99d6a35d' }))));
+    }
+    static get is() { return "af-button-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-button-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "direction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout direction of the button group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "direction",
+                "defaultValue": "'horizontal'"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Gap between buttons"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "gap",
+                "defaultValue": "'8px'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-button-group.js.map

package/dist/collection/components/af-button-group/af-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-button-group.js","sourceRoot":"","sources":["../../../src/components/af-button-group/af-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,aAAa;IAL1B;QAME;;WAEG;QACK,cAAS,GAA8B,YAAY,CAAC;QAE5D;;WAEG;QACK,QAAG,GAAW,KAAK,CAAC;KAgB7B;IAdC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,cAAc,EAAE,IAAI;YACpB,CAAC,aAAa,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI;SACtC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE;gBAC3C,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-button-group',\n  styleUrl: 'af-button-group.css',\n  shadow: true\n})\nexport class AfButtonGroup {\n  /**\n   * Layout direction of the button group\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between buttons\n   */\n  @Prop() gap: string = '8px';\n\n  render() {\n    const classes = {\n      'button-group': true,\n      [`direction-${this.direction}`]: true\n    };\n\n    return (\n      <Host>\n        <div class={classes} style={{ gap: this.gap }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-color-swatch/af-color-swatch.css

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+}
+
+.swatch {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #ece6f5;
+  background: white;
+}
+
+.color-preview {
+  width: 100%;
+  height: 120px;
+  flex-shrink: 0;
+}
+
+.size-large .color-preview {
+  height: 140px;
+}
+
+.color-info {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.color-name {
+  font-family: 'NeuSans', 'Inter', system-ui, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  color: #14343B;
+}
+
+.color-value {
+  font-family: 'Helvetica', 'Inter', monospace, system-ui, sans-serif;
+  font-size: 14px;
+  color: #708380;
+}

package/dist/collection/components/af-color-swatch/af-color-swatch.js

@@ -0,0 +1,88 @@
+import { h } from "@stencil/core";
+export class AfColorSwatch {
+    constructor() {
+        /** Size variant */
+        this.size = 'default';
+    }
+    render() {
+        return (h("div", { key: '57a141b5af5c538c5cf842a61173dd391a91d59b', class: {
+                'swatch': true,
+                [`size-${this.size}`]: true
+            }, part: "base" }, h("div", { key: '505252d9fbfb36df24f1907cd5a30278e55bf268', class: "color-preview", part: "preview", style: { backgroundColor: this.color } }), h("div", { key: '095621914872670c129c23825aa012bbba4e33bb', class: "color-info", part: "info" }, h("div", { key: '86b6164f0aed4a938a8faa210651bbc6746dd4f2', class: "color-name", part: "name" }, this.name), h("div", { key: '1d533780d3756b119ae36a6e8fa0c2b6b3acb7b4', class: "color-value", part: "value" }, this.color))));
+    }
+    static get is() { return "af-color-swatch"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-color-swatch.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-color-swatch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color value (hex)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'large'",
+                    "resolved": "\"default\" | \"large\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-color-swatch.js.map

package/dist/collection/components/af-color-swatch/af-color-swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-color-swatch.js","sourceRoot":"","sources":["../../../src/components/af-color-swatch/af-color-swatch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,aAAa;IAL1B;QAYE,mBAAmB;QACX,SAAI,GAAwB,SAAS,CAAC;KAoB/C;IAlBC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE;gBACV,QAAQ,EAAE,IAAI;gBACd,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aAC5B,EAAE,IAAI,EAAC,MAAM;YACZ,4DACE,KAAK,EAAC,eAAe,EACrB,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,EAAE,GACjC;YACP,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM;gBACjC,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,IAAI,CAAO;gBACrD,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAO,CACpD,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'af-color-swatch',\n  styleUrl: 'af-color-swatch.css',\n  shadow: true\n})\nexport class AfColorSwatch {\n  /** Color value (hex) */\n  @Prop() color!: string;\n\n  /** Color name */\n  @Prop() name!: string;\n\n  /** Size variant */\n  @Prop() size: 'default' | 'large' = 'default';\n\n  render() {\n    return (\n      <div class={{\n        'swatch': true,\n        [`size-${this.size}`]: true\n      }} part=\"base\">\n        <div\n          class=\"color-preview\"\n          part=\"preview\"\n          style={{ backgroundColor: this.color }}\n        ></div>\n        <div class=\"color-info\" part=\"info\">\n          <div class=\"color-name\" part=\"name\">{this.name}</div>\n          <div class=\"color-value\" part=\"value\">{this.color}</div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/af-container/af-container.css

@@ -0,0 +1,76 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+
+  /* Mobile first: xsmall breakpoint (320px) */
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+/* Small breakpoint (375px) */
+@media (min-width: 375px) {
+  .container {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+/* Medium breakpoint (768px) */
+@media (min-width: 768px) {
+  .container {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+
+  .max-width-medium {
+    max-width: 768px;
+  }
+}
+
+/* Large breakpoint (1024px) */
+@media (min-width: 1024px) {
+  .container {
+    padding-left: 64px;
+    padding-right: 64px;
+  }
+
+  .max-width-large {
+    max-width: 1024px;
+  }
+
+  .max-width-medium {
+    max-width: 768px;
+  }
+}
+
+/* XLarge breakpoint (1440px) */
+@media (min-width: 1440px) {
+  .container {
+    padding-left: 80px;
+    padding-right: 80px;
+  }
+
+  .max-width-xlarge {
+    max-width: 1440px;
+  }
+
+  .max-width-large {
+    max-width: 1024px;
+  }
+
+  .max-width-medium {
+    max-width: 768px;
+  }
+}
+
+/* Fluid has no max-width */
+.max-width-fluid {
+  max-width: none;
+}

package/dist/collection/components/af-container/af-container.js

@@ -0,0 +1,57 @@
+import { h } from "@stencil/core";
+/**
+ * A responsive container component that provides consistent margins and max-width
+ * constraints based on the Affinda grid system.
+ */
+export class AfContainer {
+    constructor() {
+        /**
+         * Maximum width constraint for the container
+         * - 'xlarge': 1440px container (default)
+         * - 'large': 1024px container
+         * - 'medium': 768px container
+         * - 'fluid': No max-width constraint, full width with margins
+         */
+        this.maxWidth = 'xlarge';
+    }
+    render() {
+        return (h("div", { key: '4a40fad6df79915adeb7273a7c71ed26b327ff8f', class: `container max-width-${this.maxWidth}` }, h("slot", { key: 'a1759c05860511cdb6b916e44925df7f7a80bcf1' })));
+    }
+    static get is() { return "af-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["af-container.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["af-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "maxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xlarge' | 'large' | 'medium' | 'fluid'",
+                    "resolved": "\"fluid\" | \"large\" | \"medium\" | \"xlarge\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width constraint for the container\n- 'xlarge': 1440px container (default)\n- 'large': 1024px container\n- 'medium': 768px container\n- 'fluid': No max-width constraint, full width with margins"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "'xlarge'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=af-container.js.map

package/dist/collection/components/af-container/af-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"af-container.js","sourceRoot":"","sources":["../../../src/components/af-container/af-container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;QAME;;;;;;WAMG;QACK,aAAQ,GAA4C,QAAQ,CAAC;KAStE;IAPC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,QAAQ,EAAE;YAChD,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * A responsive container component that provides consistent margins and max-width\n * constraints based on the Affinda grid system.\n */\n@Component({\n  tag: 'af-container',\n  styleUrl: 'af-container.css',\n  shadow: true\n})\nexport class AfContainer {\n  /**\n   * Maximum width constraint for the container\n   * - 'xlarge': 1440px container (default)\n   * - 'large': 1024px container\n   * - 'medium': 768px container\n   * - 'fluid': No max-width constraint, full width with margins\n   */\n  @Prop() maxWidth: 'xlarge' | 'large' | 'medium' | 'fluid' = 'xlarge';\n\n  render() {\n    return (\n      <div class={`container max-width-${this.maxWidth}`}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}