@vverchonov/web-components 0.1.0

package/dist/table.js

@@ -0,0 +1,2 @@
+import { t as e } from "./table--O5km0Wv.js";
+export { e as Table };

package/dist/tabs-C2lP0uxY.js

@@ -0,0 +1,94 @@
+import { LitElement as e, html as t, nothing as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+var o = ":host{display:block}.tablist{gap:var(--tab-gap);border-bottom:1px solid var(--color-border);scrollbar-width:none;display:flex;overflow-x:auto}.tablist::-webkit-scrollbar{display:none}.tab{padding-block:var(--tab-padding-block);padding-inline:var(--tab-padding-inline);cursor:pointer;font-family:inherit;font-size:var(--tab-font-size);font-weight:var(--tab-font-weight);color:var(--color-text-muted);white-space:nowrap;user-select:none;min-height:2.75rem;transition:color var(--tab-transition-duration) var(--ease-emphasized), background-color var(--tab-transition-duration) var(--ease-emphasized);background:0 0;border:none;justify-content:center;align-items:center;line-height:1.25;display:inline-flex;position:relative}.tab:after{content:\"\";height:var(--tab-indicator-height);border-radius:var(--tab-indicator-height) var(--tab-indicator-height) 0 0;transition:background-color var(--tab-transition-duration) var(--ease-emphasized);background:0 0;position:absolute;bottom:0;left:0;right:0}.tab:hover:not(:disabled){color:var(--color-text);background:var(--color-surface-elevated)}.tab[aria-selected=true]{color:var(--color-primary);font-weight:600}.tab[aria-selected=true]:after{background:var(--color-primary)}.tab:disabled{cursor:not-allowed;opacity:.45}.tab:focus{outline:none}.tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;border-radius:var(--radius-button)}.panel{padding-block-start:var(--tab-panel-padding-block)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+function s(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 c = class extends e {
+	static {
+		this.styles = [r(o)];
+	}
+	_selectTab(e) {
+		if (e.disabled) return;
+		this.value = e.value;
+		let t = new CustomEvent("tab-change", {
+			detail: { value: e.value },
+			bubbles: !0,
+			composed: !0
+		});
+		this.dispatchEvent(t), this.onChange?.(t);
+	}
+	_handleKeydown(e) {
+		let t = this.tabs.filter((e) => !e.disabled), n = t.findIndex((e) => e.value === this.value);
+		if (n === -1) return;
+		let r = null;
+		switch (e.key) {
+			case "ArrowRight":
+				r = (n + 1) % t.length;
+				break;
+			case "ArrowLeft":
+				r = (n - 1 + t.length) % t.length;
+				break;
+			case "Home":
+				r = 0;
+				break;
+			case "End":
+				r = t.length - 1;
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		let i = t[r];
+		this._selectTab(i), (this.shadowRoot?.querySelector(`[data-value="${i.value}"]`))?.focus();
+	}
+	_activeValue() {
+		return this.value && this.tabs.some((e) => e.value === this.value) ? this.value : this.tabs.find((e) => !e.disabled)?.value ?? "";
+	}
+	render() {
+		let e = this._activeValue();
+		return t`
+      <div
+        class="tablist"
+        role="tablist"
+        @keydown=${this._handleKeydown}
+      >
+        ${this.tabs.map((n) => {
+			let r = n.value === e, i = `panel-${n.value}`;
+			return t`
+            <button
+              class="tab"
+              role="tab"
+              id=${`tab-${n.value}`}
+              data-value=${n.value}
+              aria-selected=${r}
+              aria-controls=${i}
+              tabindex=${r ? 0 : -1}
+              ?disabled=${n.disabled}
+              @click=${() => this._selectTab(n)}
+            >${n.label}</button>
+          `;
+		})}
+      </div>
+      <div
+        class="panel"
+        role="tabpanel"
+        id=${`panel-${e}`}
+        aria-labelledby=${e ? `tab-${e}` : n}
+        tabindex="0"
+      >
+        <slot name=${e}></slot>
+      </div>
+    `;
+	}
+	constructor(...e) {
+		super(...e), this.tabs = [], this.value = "";
+	}
+};
+s([a({ attribute: !1 })], c.prototype, "tabs", void 0), s([a({
+	type: String,
+	reflect: !0
+})], c.prototype, "value", void 0), s([a({ attribute: !1 })], c.prototype, "onChange", void 0), c = s([i("app-tabs")], c);
+export { c as t };

package/dist/tabs.js

@@ -0,0 +1,2 @@
+import { t as e } from "./tabs-C2lP0uxY.js";
+export { e as Tabs };

package/dist/toggle-D6UMZ8UZ.js

@@ -0,0 +1,59 @@
+import { LitElement as e, html as t, nothing as n, unsafeCSS as r } from "lit";
+import { customElement as i, property as a } from "lit/decorators.js";
+var o = ":host{display:inline-block}button{align-items:center;gap:var(--toggle-label-gap);cursor:pointer;padding:0;background:0 0;border:none;min-height:2.75rem;padding-block:.625rem;display:inline-flex}button:focus{outline:none}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-button)}button:disabled{cursor:not-allowed;opacity:.45}.label-area{align-items:center;gap:var(--toggle-icon-gap);color:var(--color-text);user-select:none;font-size:.875rem;font-weight:500;line-height:1.25;display:inline-flex}.label-area:not(:has(slot[name=icon] *)):not(:has(.label)){display:none}.label{display:var(--toggle-label-display,inline)}.icon-wrapper{color:var(--color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}.icon-wrapper:not(:has(*)){display:none}.label-area.icon-start .icon-wrapper{order:0}.label-area.icon-start .label{order:1}.label-area.icon-end .label{order:0}.label-area.icon-end .icon-wrapper{order:1}.track{display:var(--toggle-track-display,inline-flex);width:var(--toggle-track-width);height:var(--toggle-track-height);border-radius:var(--radius-full);background:var(--color-border-strong);transition:background-color var(--toggle-transition-duration) var(--ease-emphasized);flex-shrink:0;align-items:center;position:relative}:host([checked]) .track{background:var(--color-primary)}button:hover:not(:disabled) .track{background:var(--color-border-strong);filter:brightness(.9)}:host([checked]) button:hover:not(:disabled) .track{background:var(--color-primary-hover);filter:none}.thumb{left:calc((var(--toggle-track-height) - var(--toggle-thumb-size)) / 2);width:var(--toggle-thumb-size);height:var(--toggle-thumb-size);border-radius:var(--radius-full);background:var(--color-text-inverse);transition:transform var(--toggle-transition-duration) var(--ease-emphasized);position:absolute;transform:translate(0);box-shadow:0 1px 3px oklch(0% 0 0/.2)}:host([checked]) .thumb{transform:translateX(var(--toggle-thumb-travel))}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+function s(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 c = class extends e {
+	static {
+		this.styles = [r(o)];
+	}
+	_handleClick() {
+		if (this.disabled) return;
+		this.checked = !this.checked;
+		let e = new CustomEvent("toggle-change", {
+			detail: { checked: this.checked },
+			bubbles: !0,
+			composed: !0
+		});
+		this.dispatchEvent(e), this.onChange?.(e);
+	}
+	render() {
+		return t`
+      <button
+        role="switch"
+        aria-checked=${this.checked}
+        aria-label=${this.label ? n : "Toggle"}
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+      >
+        <span class="label-area icon-${this.iconPosition}">
+          <span class="icon-wrapper" aria-hidden="true">
+            <slot name="icon"></slot>
+          </span>
+          ${this.label ? t`<span class="label">${this.label}</span>` : n}
+        </span>
+        <span class="track" aria-hidden="true">
+          <span class="thumb"></span>
+        </span>
+      </button>
+    `;
+	}
+	constructor(...e) {
+		super(...e), this.checked = !1, this.disabled = !1, this.label = "", this.iconPosition = "start";
+	}
+};
+s([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "checked", void 0), s([a({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), s([a({ type: String })], c.prototype, "label", void 0), s([a({
+	type: String,
+	attribute: "icon-position"
+})], c.prototype, "iconPosition", void 0), s([a({ attribute: !1 })], c.prototype, "onChange", void 0), c = s([i("app-toggle")], c);
+export { c as t };

package/dist/toggle.js

@@ -0,0 +1,2 @@
+import { t as e } from "./toggle-D6UMZ8UZ.js";
+export { e as Toggle };

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/web-components.js

@@ -0,0 +1,24 @@
+import { t as e } from "./button-DYrT530y.js";
+import "./button.js";
+import { t } from "./table--O5km0Wv.js";
+import "./table.js";
+import { t as n } from "./dropdown-button-B6XNoy4L.js";
+import "./dropdown-button.js";
+import { t as r } from "./menu-DmAFaVi5.js";
+import "./menu.js";
+import { t as i } from "./layout-CYvgu_WE.js";
+import { t as a } from "./form-layout-DCX8X-8-.js";
+import "./layouts.js";
+import { t as o } from "./toggle-D6UMZ8UZ.js";
+import "./toggle.js";
+import { t as s } from "./input-BVlPYqTe.js";
+import "./input.js";
+import { t as c } from "./modal-v1GlqMF_.js";
+import "./modal.js";
+import { t as l } from "./tabs-C2lP0uxY.js";
+import "./tabs.js";
+import { t as u } from "./selector-Bl7Nbkqo.js";
+import "./selector.js";
+import { unsafeCSS as d } from "lit";
+const f = d("/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;--spacing:.25rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:oklch(62.4% .214 264.38);--color-primary-hover:oklch(55.3% .222 265.64);--color-primary-muted:oklch(91% .04 264);--color-surface:oklch(100% 0 0);--color-surface-elevated:oklch(98.5% 0 0);--color-border:oklch(91% .01 264);--color-border-strong:oklch(75% .02 264);--color-text:oklch(21% .02 264);--color-text-muted:oklch(50% .02 264);--color-text-inverse:oklch(99% 0 0);--color-valid:oklch(60% .18 145);--color-invalid:oklch(55% .22 25);--color-invalid-muted:oklch(95% .05 25);--radius-button:.375rem;--radius-card:.5rem;--radius-input:.375rem;--radius-full:9999px;--button-font-size:1rem;--button-font-weight:500;--button-padding-block:.5rem;--button-padding-inline:1rem;--button-margin-block:0;--button-margin-inline:0;--button-transition-duration:.2s;--button-focus-ring-offset:2px;--button-focus-ring-width:2px;--button-icon-gap:.5rem;--table-cell-padding-block:.5rem;--table-cell-padding-inline:.75rem;--table-header-font-weight:600;--table-header-bg:var(--color-surface-elevated);--table-border-color:var(--color-border);--table-body-bg:var(--color-surface);--table-text-color:var(--color-text);--ease-emphasized:cubic-bezier(.2, 0, 0, 1);--ease-emphasized-in:cubic-bezier(.3, 0, 1, 1);--ease-emphasized-out:cubic-bezier(0, 0, .2, 1);--dropdown-padding:.375rem;--dropdown-item-padding-block:.375rem;--dropdown-item-padding-inline:.5rem;--dropdown-item-font-size:.875rem;--dropdown-item-icon-gap:.5rem;--toggle-track-width:2.75rem;--toggle-track-height:1.5rem;--toggle-thumb-size:1.125rem;--toggle-thumb-travel:1.25rem;--toggle-transition-duration:.2s;--toggle-icon-gap:.5rem;--toggle-label-gap:.625rem;--input-font-size:1rem;--input-padding-block:.5rem;--input-padding-inline:.75rem;--input-icon-size:1.125rem;--input-icon-gap:.5rem;--input-transition-duration:.2s;--menu-width:240px;--menu-collapsed-width:3.5rem;--menu-bg:var(--color-surface);--menu-item-padding-block:.5rem;--menu-item-padding-inline:.75rem;--menu-item-font-size:.875rem;--menu-item-icon-gap:.625rem;--menu-indent:1rem;--menu-logo-padding:1rem;--menu-search-padding:.75rem;--tab-padding-block:.625rem;--tab-padding-inline:1rem;--tab-font-size:.875rem;--tab-font-weight:500;--tab-gap:.25rem;--tab-indicator-height:2px;--tab-transition-duration:.2s;--tab-panel-padding-block:1rem;--modal-width:32rem;--modal-padding:1.5rem;--modal-border-radius:var(--radius-card);--modal-backdrop:oklch(0% 0 0/.45);--modal-transition-duration:.2s;--selector-min-height:2.5rem;--selector-chip-gap:.25rem;--selector-chip-padding-block:.125rem;--selector-chip-padding-inline:.5rem;--selector-chip-font-size:.8125rem;--selector-panel-max-height:16rem;--selector-transition-duration:.2s}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.container{width:100%}@media (width>=40rem){.container{max-width:40rem}}@media (width>=48rem){.container{max-width:48rem}}@media (width>=64rem){.container{max-width:64rem}}@media (width>=80rem){.container{max-width:80rem}}@media (width>=96rem){.container{max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-wrap{flex-wrap:wrap}.border{border-style:var(--tw-border-style);border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-primary:oklch(70% .2 264);--color-primary-hover:oklch(78% .19 264);--color-primary-muted:oklch(24% .05 264);--color-surface:oklch(14% .01 264);--color-surface-elevated:oklch(19% .01 264);--color-border:oklch(28% .02 264);--color-border-strong:oklch(40% .03 264);--color-text:oklch(93% .01 264);--color-text-muted:oklch(62% .02 264);--color-text-inverse:oklch(14% .01 264);--color-valid:oklch(68% .18 145);--color-valid-muted:oklch(22% .05 145);--color-invalid:oklch(65% .22 25);--color-invalid-muted:oklch(22% .06 25)}}:root[data-theme=dark]{--color-primary:oklch(70% .2 264);--color-primary-hover:oklch(78% .19 264);--color-primary-muted:oklch(24% .05 264);--color-surface:oklch(14% .01 264);--color-surface-elevated:oklch(19% .01 264);--color-border:oklch(28% .02 264);--color-border-strong:oklch(40% .03 264);--color-text:oklch(93% .01 264);--color-text-muted:oklch(62% .02 264);--color-text-inverse:oklch(14% .01 264);--color-valid:oklch(68% .18 145);--color-valid-muted:oklch(22% .05 145);--color-invalid:oklch(65% .22 25);--color-invalid-muted:oklch(22% .06 25)}@property --tw-rotate-x{syntax:\"*\";inherits:false}@property --tw-rotate-y{syntax:\"*\";inherits:false}@property --tw-rotate-z{syntax:\"*\";inherits:false}@property --tw-skew-x{syntax:\"*\";inherits:false}@property --tw-skew-y{syntax:\"*\";inherits:false}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:\"*\";inherits:false}@property --tw-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:\"*\";inherits:false}@property --tw-inset-shadow-alpha{syntax:\"<percentage>\";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:\"*\";inherits:false}@property --tw-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:\"*\";inherits:false}@property --tw-inset-ring-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:\"*\";inherits:false}@property --tw-ring-offset-width{syntax:\"<length>\";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:\"*\";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:\"*\";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}");
+export { e as Button, n as DropdownButton, a as FormLayout, s as Input, i as Layout, r as Menu, c as Modal, u as Selector, t as Table, l as Tabs, o as Toggle, f as tailwindBase };

package/package.json

@@ -0,0 +1,153 @@
+{
+  "name": "@vverchonov/web-components",
+  "version": "0.1.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "sideEffects": [
+    "./dist/web-components.js",
+    "./dist/button.js",
+    "./dist/table.js",
+    "./dist/dropdown-button.js",
+    "./dist/menu.js",
+    "./dist/layouts.js",
+    "./dist/toggle.js",
+    "./dist/input.js",
+    "./dist/modal.js",
+    "./dist/tabs.js",
+    "./dist/selector.js"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/web-components.js",
+  "module": "./dist/web-components.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/web-components.js"
+    },
+    "./button": {
+      "types": "./dist/components/button/index.d.ts",
+      "import": "./dist/button.js"
+    },
+    "./table": {
+      "types": "./dist/components/table/index.d.ts",
+      "import": "./dist/table.js"
+    },
+    "./dropdown-button": {
+      "types": "./dist/components/dropdown-button/index.d.ts",
+      "import": "./dist/dropdown-button.js"
+    },
+    "./menu": {
+      "types": "./dist/components/menu/index.d.ts",
+      "import": "./dist/menu.js"
+    },
+    "./layouts": {
+      "types": "./dist/components/layouts/index.d.ts",
+      "import": "./dist/layouts.js"
+    },
+    "./toggle": {
+      "types": "./dist/components/toggle/index.d.ts",
+      "import": "./dist/toggle.js"
+    },
+    "./input": {
+      "types": "./dist/components/input/index.d.ts",
+      "import": "./dist/input.js"
+    },
+    "./modal": {
+      "types": "./dist/components/modal/index.d.ts",
+      "import": "./dist/modal.js"
+    },
+    "./tabs": {
+      "types": "./dist/components/tabs/index.d.ts",
+      "import": "./dist/tabs.js"
+    },
+    "./selector": {
+      "types": "./dist/components/selector/index.d.ts",
+      "import": "./dist/selector.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react.js"
+    },
+    "./react/button": {
+      "types": "./dist/react/button.d.ts",
+      "import": "./dist/react/button.js"
+    },
+    "./react/dropdown-button": {
+      "types": "./dist/react/dropdown-button.d.ts",
+      "import": "./dist/react/dropdown-button.js"
+    },
+    "./react/input": {
+      "types": "./dist/react/input.d.ts",
+      "import": "./dist/react/input.js"
+    },
+    "./react/menu": {
+      "types": "./dist/react/menu.d.ts",
+      "import": "./dist/react/menu.js"
+    },
+    "./react/modal": {
+      "types": "./dist/react/modal.d.ts",
+      "import": "./dist/react/modal.js"
+    },
+    "./react/selector": {
+      "types": "./dist/react/selector.d.ts",
+      "import": "./dist/react/selector.js"
+    },
+    "./react/table": {
+      "types": "./dist/react/table.d.ts",
+      "import": "./dist/react/table.js"
+    },
+    "./react/tabs": {
+      "types": "./dist/react/tabs.d.ts",
+      "import": "./dist/react/tabs.js"
+    },
+    "./react/toggle": {
+      "types": "./dist/react/toggle.d.ts",
+      "import": "./dist/react/toggle.js"
+    },
+    "./react/layout": {
+      "types": "./dist/react/layout.d.ts",
+      "import": "./dist/react/layout.js"
+    },
+    "./react/form-layout": {
+      "types": "./dist/react/form-layout.d.ts",
+      "import": "./dist/react/form-layout.js"
+    }
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@lit/react": "^1.0.8"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.1",
+    "lit": "^3.0.0",
+    "@types/react": "^19.2.14",
+    "esbuild": "^0.27.3",
+    "react": "^19.2.4",
+    "tailwindcss": "^4.2.1",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0-beta.13",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-swc-transform": "^1.1.1"
+  },
+  "overrides": {
+    "vite": "^8.0.0-beta.13"
+  }
+}