@rgrmdesign/rgrm-ds-elements 0.1.1 → 0.2.0

package/dist/button/index.d.ts

@@ -0,0 +1,11 @@
+export { ButtonVariant, buttonClassNames } from '@rgrmdesign/rgrm-ds-core/button';
+
+declare const RGRM_BUTTON_TAG = "rgrm-button";
+declare class RgrmButtonElement extends HTMLElement {
+    #private;
+    static readonly observedAttributes: string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+}
+
+export { RGRM_BUTTON_TAG, RgrmButtonElement };

package/dist/button/index.js

@@ -0,0 +1,11 @@
+import {
+  RGRM_BUTTON_TAG,
+  RgrmButtonElement,
+  buttonClassNames
+} from "../chunk-YFBMGNKK.js";
+export {
+  RGRM_BUTTON_TAG,
+  RgrmButtonElement,
+  buttonClassNames
+};
+//# sourceMappingURL=index.js.map

package/dist/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-YFBMGNKK.js

@@ -0,0 +1,53 @@
+// src/button/index.ts
+import "@rgrmdesign/rgrm-ds-css/button";
+import { buttonClassNames as buttonClassNames2 } from "@rgrmdesign/rgrm-ds-core/button";
+
+// src/button/button-element.ts
+import { buttonClassNames } from "@rgrmdesign/rgrm-ds-core/button";
+var RGRM_BUTTON_TAG = "rgrm-button";
+var DEFAULT_VARIANT = "primary";
+function parseVariantAttribute(value) {
+  return value === "primary" ? value : DEFAULT_VARIANT;
+}
+var RgrmButtonElement = class extends HTMLElement {
+  static observedAttributes = ["variant"];
+  #inner = document.createElement("button");
+  connectedCallback() {
+    if (!this.#inner.type) {
+      this.#inner.type = "button";
+    }
+    this.#mountInner();
+    this.#render();
+  }
+  attributeChangedCallback(name) {
+    if (name === "variant") {
+      this.#render();
+    }
+  }
+  #mountInner() {
+    if (this.#inner.parentNode === this) {
+      return;
+    }
+    while (this.firstChild) {
+      this.#inner.appendChild(this.firstChild);
+    }
+    this.appendChild(this.#inner);
+  }
+  #render() {
+    this.#inner.className = buttonClassNames(
+      parseVariantAttribute(this.getAttribute("variant"))
+    );
+  }
+};
+
+// src/button/index.ts
+if (!customElements.get(RGRM_BUTTON_TAG)) {
+  customElements.define(RGRM_BUTTON_TAG, RgrmButtonElement);
+}
+
+export {
+  RGRM_BUTTON_TAG,
+  RgrmButtonElement,
+  buttonClassNames2 as buttonClassNames
+};
+//# sourceMappingURL=chunk-YFBMGNKK.js.map

package/dist/chunk-YFBMGNKK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button/index.ts","../src/button/button-element.ts"],"sourcesContent":["import '@rgrmdesign/rgrm-ds-css/button';\n\nexport { buttonClassNames, type ButtonVariant } from '@rgrmdesign/rgrm-ds-core/button';\nexport { RGRM_BUTTON_TAG, RgrmButtonElement } from './button-element.js';\n\nimport { RGRM_BUTTON_TAG, RgrmButtonElement } from './button-element.js';\n\nif (!customElements.get(RGRM_BUTTON_TAG)) {\n  customElements.define(RGRM_BUTTON_TAG, RgrmButtonElement);\n}\n","import { buttonClassNames, type ButtonVariant } from '@rgrmdesign/rgrm-ds-core/button';\n\nexport const RGRM_BUTTON_TAG = 'rgrm-button';\n\nconst DEFAULT_VARIANT: ButtonVariant = 'primary';\n\nfunction parseVariantAttribute(value: string | null): ButtonVariant {\n  return value === 'primary' ? value : DEFAULT_VARIANT;\n}\n\nexport class RgrmButtonElement extends HTMLElement {\n  static readonly observedAttributes = ['variant'];\n\n  readonly #inner: HTMLButtonElement = document.createElement('button');\n\n  connectedCallback(): void {\n    if (!this.#inner.type) {\n      this.#inner.type = 'button';\n    }\n    this.#mountInner();\n    this.#render();\n  }\n\n  attributeChangedCallback(name: string): void {\n    if (name === 'variant') {\n      this.#render();\n    }\n  }\n\n  #mountInner(): void {\n    if (this.#inner.parentNode === this) {\n      return;\n    }\n\n    while (this.firstChild) {\n      this.#inner.appendChild(this.firstChild);\n    }\n\n    this.appendChild(this.#inner);\n  }\n\n  #render(): void {\n    this.#inner.className = buttonClassNames(\n      parseVariantAttribute(this.getAttribute('variant')),\n    );\n  }\n}\n"],"mappings":";AAAA,OAAO;AAEP,SAAS,oBAAAA,yBAA4C;;;ACFrD,SAAS,wBAA4C;AAE9C,IAAM,kBAAkB;AAE/B,IAAM,kBAAiC;AAEvC,SAAS,sBAAsB,OAAqC;AAClE,SAAO,UAAU,YAAY,QAAQ;AACvC;AAEO,IAAM,oBAAN,cAAgC,YAAY;AAAA,EACjD,OAAgB,qBAAqB,CAAC,SAAS;AAAA,EAEtC,SAA4B,SAAS,cAAc,QAAQ;AAAA,EAEpE,oBAA0B;AACxB,QAAI,CAAC,KAAK,OAAO,MAAM;AACrB,WAAK,OAAO,OAAO;AAAA,IACrB;AACA,SAAK,YAAY;AACjB,SAAK,QAAQ;AAAA,EACf;AAAA,EAEA,yBAAyB,MAAoB;AAC3C,QAAI,SAAS,WAAW;AACtB,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAAA,EAEA,cAAoB;AAClB,QAAI,KAAK,OAAO,eAAe,MAAM;AACnC;AAAA,IACF;AAEA,WAAO,KAAK,YAAY;AACtB,WAAK,OAAO,YAAY,KAAK,UAAU;AAAA,IACzC;AAEA,SAAK,YAAY,KAAK,MAAM;AAAA,EAC9B;AAAA,EAEA,UAAgB;AACd,SAAK,OAAO,YAAY;AAAA,MACtB,sBAAsB,KAAK,aAAa,SAAS,CAAC;AAAA,IACpD;AAAA,EACF;AACF;;;ADvCA,IAAI,CAAC,eAAe,IAAI,eAAe,GAAG;AACxC,iBAAe,OAAO,iBAAiB,iBAAiB;AAC1D;","names":["buttonClassNames"]}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export { ButtonVariant, buttonClassNames } from '@rgrmdesign/rgrm-ds-core/button';
+export { RGRM_BUTTON_TAG, RgrmButtonElement } from './button/index.js';
 export { HeadingLevel, headingClassNames } from '@rgrmdesign/rgrm-ds-core/heading';
 export { RGRM_HEADING_TAG, RgrmHeadingElement } from './heading/index.js';
 export { ParagraphSize, paragraphClassNames } from '@rgrmdesign/rgrm-ds-core/paragraph';

package/dist/index.js

@@ -1,3 +1,8 @@
+import {
+  RGRM_BUTTON_TAG,
+  RgrmButtonElement,
+  buttonClassNames
+} from "./chunk-YFBMGNKK.js";
 import {
   RGRM_HEADING_TAG,
   RgrmHeadingElement,
@@ -15,12 +20,15 @@ import {
   sectionContainerClassNames
 } from "./chunk-OB3YM7YY.js";
 export {
+  RGRM_BUTTON_TAG,
   RGRM_HEADING_TAG,
   RGRM_PARAGRAPH_TAG,
   RGRM_SECTION_TAG,
+  RgrmButtonElement,
   RgrmHeadingElement,
   RgrmParagraphElement,
   RgrmSectionElement,
+  buttonClassNames,
   headingClassNames,
   paragraphClassNames,
   sectionClassNames,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rgrmdesign/rgrm-ds-elements",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Web Components for the RGRM design system. Styles come from @rgrmdesign/rgrm-ds-css.",
   "license": "MIT",
   "type": "module",
@@ -14,6 +14,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "import": "./dist/button/index.js"
+    },
     "./heading": {
       "types": "./dist/heading/index.d.ts",
       "import": "./dist/heading/index.js"
@@ -33,19 +37,20 @@
   "sideEffects": [
     "@rgrmdesign/rgrm-ds-css",
     "./dist/index.js",
+    "./dist/button/index.js",
     "./dist/heading/index.js",
     "./dist/paragraph/index.js",
     "./dist/section/index.js"
   ],
   "dependencies": {
-    "@rgrmdesign/rgrm-ds-core": "0.1.1",
-    "@rgrmdesign/rgrm-ds-css": "0.1.1"
+    "@rgrmdesign/rgrm-ds-core": "0.2.0",
+    "@rgrmdesign/rgrm-ds-css": "0.2.0"
   },
   "peerDependencies": {
-    "@rgrmdesign/rgrm-ds-tokens": ">=0.5.0"
+    "@rgrmdesign/rgrm-ds-tokens": ">=0.6.0"
   },
   "devDependencies": {
-    "@rgrmdesign/rgrm-ds-tokens": "^0.5.0",
+    "@rgrmdesign/rgrm-ds-tokens": "^0.6.1",
     "rimraf": "^6.0.1",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"