@suchandan_haldar/web-library 0.0.1

package/dist/web-library.es.js

@@ -0,0 +1,213 @@
+import { LitElement as e, html as t } from "lit";
+import { customElement as n, property as r } from "lit/decorators.js";
+//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+function i(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+//#region src/components/Button/Button.ts
+var a = class extends e {
+	constructor(...e) {
+		super(...e), this._originalChildren = [], this.variant = "primary", this.size = "medium";
+	}
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		this._originalChildren.length === 0 && (this._originalChildren = Array.from(this.childNodes)), super.connectedCallback();
+	}
+	render() {
+		return t`
+      <button class="btn ${this.variant} ${this.size}" part="button">
+        ${this._originalChildren}
+      </button>
+    `;
+	}
+};
+i([r({ type: String })], a.prototype, "variant", void 0), i([r({ type: String })], a.prototype, "size", void 0), a = i([n("wc-button")], a);
+//#endregion
+//#region src/components/Link/Link.ts
+var o = class extends e {
+	constructor(...e) {
+		super(...e), this._originalChildren = [], this.href = "#";
+	}
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		this._originalChildren.length === 0 && (this._originalChildren = Array.from(this.childNodes)), super.connectedCallback();
+	}
+	render() {
+		return t`
+      <a class="link" href="${this.href}" target="${this.target || "_self"}" part="link">
+        ${this._originalChildren}
+      </a>
+    `;
+	}
+};
+i([r({ type: String })], o.prototype, "href", void 0), i([r({ type: String })], o.prototype, "target", void 0), o = i([n("wc-link")], o);
+//#endregion
+//#region src/components/Icon/Icon.ts
+var s = class extends e {
+	constructor(...e) {
+		super(...e), this.name = "", this.size = 24, this.color = "";
+	}
+	createRenderRoot() {
+		return this;
+	}
+	render() {
+		if (!this.name) return t``;
+		let e = `
+      ${this.size ? `font-size: ${this.size}px;` : ""}
+      ${this.color ? `color: ${this.color};` : ""}
+    `;
+		return t`
+      <i 
+        class="icon ti ti-${this.name}" 
+        style="${e.trim()}" 
+        part="icon" 
+        aria-hidden="true"
+      ></i>
+    `;
+	}
+};
+i([r({ type: String })], s.prototype, "name", void 0), i([r({ type: Number })], s.prototype, "size", void 0), i([r({ type: String })], s.prototype, "color", void 0), s = i([n("wc-icon")], s);
+//#endregion
+//#region src/components/IconButton/IconButton.ts
+var c = class extends e {
+	constructor(...e) {
+		super(...e), this._originalChildren = [], this.name = "", this.variant = "primary", this.ariaLabel = "";
+	}
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		this._originalChildren.length === 0 && (this._originalChildren = Array.from(this.childNodes)), super.connectedCallback();
+	}
+	render() {
+		return t`
+      <button 
+        class="icon-btn ${this.variant}" 
+        part="button" 
+        aria-label="${this.ariaLabel}"
+        title="${this.ariaLabel}"
+      >
+        ${this.name ? t`<wc-icon name="${this.name}"></wc-icon>` : this._originalChildren}
+      </button>
+    `;
+	}
+};
+i([r({ type: String })], c.prototype, "name", void 0), i([r({ type: String })], c.prototype, "variant", void 0), i([r({ type: String })], c.prototype, "ariaLabel", void 0), c = i([n("wc-icon-button")], c);
+//#endregion
+//#region src/components/Tab/Tab.ts
+var l = class extends e {
+	constructor(...e) {
+		super(...e), this._originalChildren = [], this.active = !1, this.disabled = !1, this.value = "";
+	}
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		this._originalChildren.length === 0 && (this._originalChildren = Array.from(this.childNodes)), super.connectedCallback();
+	}
+	_getPanelScope() {
+		let e = this.closest("[data-wc-tab-group]");
+		if (e) return e;
+		let t = this.parentElement;
+		if (!t) return null;
+		if (t.querySelector("wc-tab-panel")) return t;
+		let n = t.parentElement;
+		return n?.querySelector("wc-tab-panel") ? n : null;
+	}
+	_syncPanelsForActiveValue() {
+		let e = this._getPanelScope();
+		if (!e) return;
+		let t = Array.from(e.querySelectorAll("wc-tab-panel"));
+		for (let e of t) {
+			let t = (e.getAttribute("value") || "") === this.value;
+			e.toggleAttribute("active", t);
+		}
+	}
+	_activateInParentRow() {
+		let e = this.parentElement;
+		if (!e) {
+			this.active = !0;
+			return;
+		}
+		let t = !1;
+		for (let n of Array.from(e.children)) {
+			if (n.tagName.toLowerCase() !== "wc-tab") continue;
+			t = !0;
+			let e = n;
+			e.active = e === this;
+		}
+		t || (this.active = !0);
+	}
+	_onSelect() {
+		this.disabled || (this._activateInParentRow(), this._syncPanelsForActiveValue(), this.dispatchEvent(new CustomEvent("wc-tab-select", {
+			detail: { value: this.value },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	render() {
+		let e = this.disabled ? -1 : this.active ? 0 : -1;
+		return t`
+      <button
+        type="button"
+        class="${`tab ${this.active ? "active" : ""} ${this.disabled ? "disabled" : ""}`.trim()}"
+        part="button"
+        role="tab"
+        aria-selected="${this.active ? "true" : "false"}"
+        aria-disabled="${this.disabled ? "true" : "false"}"
+        tabindex="${e}"
+        ?disabled=${this.disabled}
+        @click=${this._onSelect}
+      >
+        ${this._originalChildren}
+      </button>
+    `;
+	}
+};
+i([r({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "active", void 0), i([r({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), i([r({ type: String })], l.prototype, "value", void 0), l = i([n("wc-tab")], l);
+//#endregion
+//#region src/components/TabPanel/TabPanel.ts
+var u = class extends e {
+	constructor(...e) {
+		super(...e), this._originalChildren = [], this.active = !1, this.value = "";
+	}
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		this._originalChildren.length === 0 && (this._originalChildren = Array.from(this.childNodes)), super.connectedCallback();
+	}
+	render() {
+		return t`
+      <section
+        class="tab-panel ${this.active ? "active" : "inactive"}"
+        part="panel"
+        role="tabpanel"
+        aria-hidden="${this.active ? "false" : "true"}"
+        ?hidden=${!this.active}
+      >
+        ${this._originalChildren}
+      </section>
+    `;
+	}
+};
+i([r({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "active", void 0), i([r({ type: String })], u.prototype, "value", void 0), u = i([n("wc-tab-panel")], u);
+//#endregion
+export { a as WcButton, s as WcIcon, c as WcIconButton, o as WcLink, l as WcTab, u as WcTabPanel };

package/dist/web-library.umd.js

@@ -0,0 +1,52 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("lit"),require("lit/decorators.js")):typeof define==`function`&&define.amd?define([`exports`,`lit`,`lit/decorators.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.WebLibrary={},e.lit,e.litDecorators))})(this,function(e,t,n){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});function r(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var i=class extends t.LitElement{constructor(...e){super(...e),this._originalChildren=[],this.variant=`primary`,this.size=`medium`}createRenderRoot(){return this}connectedCallback(){this._originalChildren.length===0&&(this._originalChildren=Array.from(this.childNodes)),super.connectedCallback()}render(){return t.html`
+      <button class="btn ${this.variant} ${this.size}" part="button">
+        ${this._originalChildren}
+      </button>
+    `}};r([(0,n.property)({type:String})],i.prototype,`variant`,void 0),r([(0,n.property)({type:String})],i.prototype,`size`,void 0),i=r([(0,n.customElement)(`wc-button`)],i);var a=class extends t.LitElement{constructor(...e){super(...e),this._originalChildren=[],this.href=`#`}createRenderRoot(){return this}connectedCallback(){this._originalChildren.length===0&&(this._originalChildren=Array.from(this.childNodes)),super.connectedCallback()}render(){return t.html`
+      <a class="link" href="${this.href}" target="${this.target||`_self`}" part="link">
+        ${this._originalChildren}
+      </a>
+    `}};r([(0,n.property)({type:String})],a.prototype,`href`,void 0),r([(0,n.property)({type:String})],a.prototype,`target`,void 0),a=r([(0,n.customElement)(`wc-link`)],a);var o=class extends t.LitElement{constructor(...e){super(...e),this.name=``,this.size=24,this.color=``}createRenderRoot(){return this}render(){if(!this.name)return t.html``;let e=`
+      ${this.size?`font-size: ${this.size}px;`:``}
+      ${this.color?`color: ${this.color};`:``}
+    `;return t.html`
+      <i 
+        class="icon ti ti-${this.name}" 
+        style="${e.trim()}" 
+        part="icon" 
+        aria-hidden="true"
+      ></i>
+    `}};r([(0,n.property)({type:String})],o.prototype,`name`,void 0),r([(0,n.property)({type:Number})],o.prototype,`size`,void 0),r([(0,n.property)({type:String})],o.prototype,`color`,void 0),o=r([(0,n.customElement)(`wc-icon`)],o);var s=class extends t.LitElement{constructor(...e){super(...e),this._originalChildren=[],this.name=``,this.variant=`primary`,this.ariaLabel=``}createRenderRoot(){return this}connectedCallback(){this._originalChildren.length===0&&(this._originalChildren=Array.from(this.childNodes)),super.connectedCallback()}render(){return t.html`
+      <button 
+        class="icon-btn ${this.variant}" 
+        part="button" 
+        aria-label="${this.ariaLabel}"
+        title="${this.ariaLabel}"
+      >
+        ${this.name?t.html`<wc-icon name="${this.name}"></wc-icon>`:this._originalChildren}
+      </button>
+    `}};r([(0,n.property)({type:String})],s.prototype,`name`,void 0),r([(0,n.property)({type:String})],s.prototype,`variant`,void 0),r([(0,n.property)({type:String})],s.prototype,`ariaLabel`,void 0),s=r([(0,n.customElement)(`wc-icon-button`)],s);var c=class extends t.LitElement{constructor(...e){super(...e),this._originalChildren=[],this.active=!1,this.disabled=!1,this.value=``}createRenderRoot(){return this}connectedCallback(){this._originalChildren.length===0&&(this._originalChildren=Array.from(this.childNodes)),super.connectedCallback()}_getPanelScope(){let e=this.closest(`[data-wc-tab-group]`);if(e)return e;let t=this.parentElement;if(!t)return null;if(t.querySelector(`wc-tab-panel`))return t;let n=t.parentElement;return n?.querySelector(`wc-tab-panel`)?n:null}_syncPanelsForActiveValue(){let e=this._getPanelScope();if(!e)return;let t=Array.from(e.querySelectorAll(`wc-tab-panel`));for(let e of t){let t=(e.getAttribute(`value`)||``)===this.value;e.toggleAttribute(`active`,t)}}_activateInParentRow(){let e=this.parentElement;if(!e){this.active=!0;return}let t=!1;for(let n of Array.from(e.children)){if(n.tagName.toLowerCase()!==`wc-tab`)continue;t=!0;let e=n;e.active=e===this}t||(this.active=!0)}_onSelect(){this.disabled||(this._activateInParentRow(),this._syncPanelsForActiveValue(),this.dispatchEvent(new CustomEvent(`wc-tab-select`,{detail:{value:this.value},bubbles:!0,composed:!0})))}render(){let e=this.disabled?-1:this.active?0:-1;return t.html`
+      <button
+        type="button"
+        class="${`tab ${this.active?`active`:``} ${this.disabled?`disabled`:``}`.trim()}"
+        part="button"
+        role="tab"
+        aria-selected="${this.active?`true`:`false`}"
+        aria-disabled="${this.disabled?`true`:`false`}"
+        tabindex="${e}"
+        ?disabled=${this.disabled}
+        @click=${this._onSelect}
+      >
+        ${this._originalChildren}
+      </button>
+    `}};r([(0,n.property)({type:Boolean,reflect:!0})],c.prototype,`active`,void 0),r([(0,n.property)({type:Boolean,reflect:!0})],c.prototype,`disabled`,void 0),r([(0,n.property)({type:String})],c.prototype,`value`,void 0),c=r([(0,n.customElement)(`wc-tab`)],c);var l=class extends t.LitElement{constructor(...e){super(...e),this._originalChildren=[],this.active=!1,this.value=``}createRenderRoot(){return this}connectedCallback(){this._originalChildren.length===0&&(this._originalChildren=Array.from(this.childNodes)),super.connectedCallback()}render(){return t.html`
+      <section
+        class="tab-panel ${this.active?`active`:`inactive`}"
+        part="panel"
+        role="tabpanel"
+        aria-hidden="${this.active?`false`:`true`}"
+        ?hidden=${!this.active}
+      >
+        ${this._originalChildren}
+      </section>
+    `}};r([(0,n.property)({type:Boolean,reflect:!0})],l.prototype,`active`,void 0),r([(0,n.property)({type:String})],l.prototype,`value`,void 0),l=r([(0,n.customElement)(`wc-tab-panel`)],l),Object.defineProperty(e,"WcButton",{enumerable:!0,get:function(){return i}}),Object.defineProperty(e,"WcIcon",{enumerable:!0,get:function(){return o}}),Object.defineProperty(e,"WcIconButton",{enumerable:!0,get:function(){return s}}),Object.defineProperty(e,"WcLink",{enumerable:!0,get:function(){return a}}),Object.defineProperty(e,"WcTab",{enumerable:!0,get:function(){return c}}),Object.defineProperty(e,"WcTabPanel",{enumerable:!0,get:function(){return l}})});

package/index.d.ts

@@ -0,0 +1 @@
+export * from './dist/index';

package/index.js

@@ -0,0 +1 @@
+export * from './dist/web-library.es.js';

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@suchandan_haldar/web-library",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/web-library.umd.js",
+  "module": "./dist/web-library.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/web-library.es.js",
+      "require": "./dist/web-library.umd.js"
+    },
+    "./style.css": "./dist/web-library.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "index.js",
+    "index.d.ts"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@tabler/icons-webfont": "^3.40.0",
+    "lit": "^3.3.2"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-a11y": "^10.2.19",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/addon-vitest": "^10.2.19",
+    "@storybook/web-components-vite": "^10.2.19",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
+    "playwright": "^1.58.2",
+    "sass": "^1.98.0",
+    "storybook": "^10.2.19",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^5.0.2",
+    "vitest": "^4.1.9"
+  },
+  "overrides": {
+    "esbuild": "^0.28.1"
+  }
+}