@lovince/ui-core 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/my-button.d.ts +14 -0
  2. package/dist/components/my-button.js +109 -0
  3. package/dist/components/my-button.js.map +1 -0
  4. package/dist/components/my-input.d.ts +15 -0
  5. package/dist/components/my-input.js +92 -0
  6. package/dist/components/my-input.js.map +1 -0
  7. package/dist/index.d.ts +24 -0
  8. package/dist/index.js +186 -0
  9. package/dist/index.js.map +1 -0
  10. package/package.json +39 -0
package/dist/components/my-button.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import * as lit_html from 'lit-html';
2
+ import * as lit from 'lit';
3
+ import { LitElement } from 'lit';
4
+
5
+ declare class MyButton extends LitElement {
6
+ static styles: lit.CSSResult;
7
+ variant: "primary" | "secondary";
8
+ disabled: boolean;
9
+ size: "sm" | "md" | "lg";
10
+ private handleClick;
11
+ render(): lit_html.TemplateResult<1>;
12
+ }
13
+
14
+ export { MyButton };
package/dist/components/my-button.js ADDED
@@ -0,0 +1,109 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
4
+ var __decorateClass = (decorators, target, key, kind) => {
5
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
6
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
7
+ if (decorator = decorators[i])
8
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
9
+ if (kind && result) __defProp(target, key, result);
10
+ return result;
11
+ };
12
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
13
+
14
+ // src/components/my-button.ts
15
+ import { LitElement, html, css } from "lit";
16
+ import { customElement, property } from "lit/decorators.js";
17
+ var MyButton = class extends LitElement {
18
+ variant = "primary";
19
+ disabled = false;
20
+ size = "md";
21
+ handleClick() {
22
+ if (this.disabled) return;
23
+ this.dispatchEvent(
24
+ new CustomEvent("button-click", {
25
+ detail: { variant: this.variant },
26
+ bubbles: true,
27
+ composed: true
28
+ })
29
+ );
30
+ }
31
+ render() {
32
+ return html`
33
+ <button
34
+ class="${this.variant} ${this.size}"
35
+ ?disabled="${this.disabled}"
36
+ @click="${this.handleClick}"
37
+ >
38
+ <slot></slot>
39
+ </button>
40
+ `;
41
+ }
42
+ };
43
+ __publicField(MyButton, "styles", css`
44
+ :host {
45
+ display: inline-block;
46
+ }
47
+
48
+ button {
49
+ padding: 0.5rem 1rem;
50
+ border: none;
51
+ border-radius: 4px;
52
+ cursor: pointer;
53
+ font-family: inherit;
54
+ font-size: inherit;
55
+ transition: all 0.2s ease;
56
+ }
57
+
58
+ button:disabled {
59
+ opacity: 0.6;
60
+ cursor: not-allowed;
61
+ }
62
+
63
+ .primary {
64
+ background-color: #007bff;
65
+ color: white;
66
+ }
67
+
68
+ .primary:hover:not(:disabled) {
69
+ background-color: #0056b3;
70
+ }
71
+
72
+ .secondary {
73
+ background-color: #6c757d;
74
+ color: white;
75
+ }
76
+
77
+ .secondary:hover:not(:disabled) {
78
+ background-color: #545b62;
79
+ }
80
+
81
+ .sm {
82
+ padding: 0.25rem 0.5rem;
83
+ font-size: 0.875rem;
84
+ }
85
+
86
+ .lg {
87
+ padding: 0.75rem 1.5rem;
88
+ font-size: 1.125rem;
89
+ }
90
+ `);
91
+ __decorateClass([
92
+ property({ type: String })
93
+ ], MyButton.prototype, "variant", 2);
94
+ __decorateClass([
95
+ property({ type: Boolean })
96
+ ], MyButton.prototype, "disabled", 2);
97
+ __decorateClass([
98
+ property({ type: String })
99
+ ], MyButton.prototype, "size", 2);
100
+ MyButton = __decorateClass([
101
+ customElement("my-button")
102
+ ], MyButton);
103
+ if (!customElements.get("my-button")) {
104
+ customElements.define("my-button", MyButton);
105
+ }
106
+ export {
107
+ MyButton
108
+ };
109
+ //# sourceMappingURL=my-button.js.map
package/dist/components/my-button.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/my-button.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MyButtonProps } from '@lovince/ui-shared';\n\n@customElement(\"my-button\")\nexport class MyButton extends LitElement {\n static styles = css`\n :host {\n display: inline-block;\n }\n \n button {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n transition: all 0.2s ease;\n }\n \n button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n \n .primary {\n background-color: #007bff;\n color: white;\n }\n \n .primary:hover:not(:disabled) {\n background-color: #0056b3;\n }\n \n .secondary {\n background-color: #6c757d;\n color: white;\n }\n \n .secondary:hover:not(:disabled) {\n background-color: #545b62;\n }\n \n .sm {\n padding: 0.25rem 0.5rem;\n font-size: 0.875rem;\n }\n \n .lg {\n padding: 0.75rem 1.5rem;\n font-size: 1.125rem;\n }\n `;\n\n @property({ type: String }) variant: \"primary\" | \"secondary\" = \"primary\";\n @property({ type: Boolean }) disabled = false;\n @property({ type: String }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n private handleClick() {\n if (this.disabled) return;\n \n this.dispatchEvent(\n new CustomEvent(\"button-click\", {\n detail: { variant: this.variant },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n render() {\n return html`\n <button \n class=\"${this.variant} ${this.size}\"\n ?disabled=\"${this.disabled}\"\n @click=\"${this.handleClick}\"\n >\n <slot></slot>\n </button>\n `;\n }\n}\n\n// SSR-safe element registration\nif (!customElements.get(\"my-button\")) {\n customElements.define(\"my-button\", MyButton);\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,MAAM,WAAW;AACtC,SAAS,eAAe,gBAAgB;AAIjC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAkDX,UAAmC;AAAA,EAClC,WAAW;AAAA,EACZ,OAA2B;AAAA,EAE/C,cAAc;AACpB,QAAI,KAAK,SAAU;AAEnB,SAAK;AAAA,MACH,IAAI,YAAY,gBAAgB;AAAA,QAC9B,QAAQ,EAAE,SAAS,KAAK,QAAQ;AAAA,QAChC,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,iBAEM,KAAK,OAAO,IAAI,KAAK,IAAI;AAAA,qBACrB,KAAK,QAAQ;AAAA,kBAChB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhC;AACF;AA5EE,cADW,UACJ,UAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDY;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlDf,SAkDiB;AACC;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GAnDhB,SAmDkB;AACD;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApDf,SAoDiB;AApDjB,WAAN;AAAA,EADN,cAAc,WAAW;AAAA,GACb;AAgFb,IAAI,CAAC,eAAe,IAAI,WAAW,GAAG;AACpC,iBAAe,OAAO,aAAa,QAAQ;AAC7C;","names":[]}
package/dist/components/my-input.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import * as lit_html from 'lit-html';
2
+ import * as lit from 'lit';
3
+ import { LitElement } from 'lit';
4
+
5
+ declare class MyInput extends LitElement {
6
+ static styles: lit.CSSResult;
7
+ value: string;
8
+ placeholder: string;
9
+ disabled: boolean;
10
+ type: "text" | "email" | "password";
11
+ private handleInput;
12
+ render(): lit_html.TemplateResult<1>;
13
+ }
14
+
15
+ export { MyInput };
package/dist/components/my-input.js ADDED
@@ -0,0 +1,92 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
4
+ var __decorateClass = (decorators, target, key, kind) => {
5
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
6
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
7
+ if (decorator = decorators[i])
8
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
9
+ if (kind && result) __defProp(target, key, result);
10
+ return result;
11
+ };
12
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
13
+
14
+ // src/components/my-input.ts
15
+ import { LitElement, html, css } from "lit";
16
+ import { customElement, property } from "lit/decorators.js";
17
+ var MyInput = class extends LitElement {
18
+ value = "";
19
+ placeholder = "";
20
+ disabled = false;
21
+ type = "text";
22
+ handleInput(event) {
23
+ const target = event.target;
24
+ this.value = target.value;
25
+ this.dispatchEvent(
26
+ new CustomEvent("input-change", {
27
+ detail: { value: this.value },
28
+ bubbles: true,
29
+ composed: true
30
+ })
31
+ );
32
+ }
33
+ render() {
34
+ return html`
35
+ <input
36
+ .value="${this.value}"
37
+ placeholder="${this.placeholder}"
38
+ ?disabled="${this.disabled}"
39
+ type="${this.type}"
40
+ @input="${this.handleInput}"
41
+ />
42
+ `;
43
+ }
44
+ };
45
+ __publicField(MyInput, "styles", css`
46
+ :host {
47
+ display: block;
48
+ }
49
+
50
+ input {
51
+ width: 100%;
52
+ padding: 0.5rem;
53
+ border: 1px solid #ccc;
54
+ border-radius: 4px;
55
+ font-family: inherit;
56
+ font-size: inherit;
57
+ transition: border-color 0.2s ease;
58
+ }
59
+
60
+ input:focus {
61
+ outline: none;
62
+ border-color: #007bff;
63
+ }
64
+
65
+ input:disabled {
66
+ background-color: #f8f9fa;
67
+ opacity: 0.6;
68
+ cursor: not-allowed;
69
+ }
70
+ `);
71
+ __decorateClass([
72
+ property({ type: String })
73
+ ], MyInput.prototype, "value", 2);
74
+ __decorateClass([
75
+ property({ type: String })
76
+ ], MyInput.prototype, "placeholder", 2);
77
+ __decorateClass([
78
+ property({ type: Boolean })
79
+ ], MyInput.prototype, "disabled", 2);
80
+ __decorateClass([
81
+ property({ type: String })
82
+ ], MyInput.prototype, "type", 2);
83
+ MyInput = __decorateClass([
84
+ customElement("my-input")
85
+ ], MyInput);
86
+ if (!customElements.get("my-input")) {
87
+ customElements.define("my-input", MyInput);
88
+ }
89
+ export {
90
+ MyInput
91
+ };
92
+ //# sourceMappingURL=my-input.js.map
package/dist/components/my-input.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/components/my-input.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MyInputProps } from '@lovince/ui-shared';\n\n@customElement(\"my-input\")\nexport class MyInput extends LitElement {\n static styles = css`\n :host {\n display: block;\n }\n \n input {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-family: inherit;\n font-size: inherit;\n transition: border-color 0.2s ease;\n }\n \n input:focus {\n outline: none;\n border-color: #007bff;\n }\n \n input:disabled {\n background-color: #f8f9fa;\n opacity: 0.6;\n cursor: not-allowed;\n }\n `;\n\n @property({ type: String }) value = \"\";\n @property({ type: String }) placeholder = \"\";\n @property({ type: Boolean }) disabled = false;\n @property({ type: String }) type: \"text\" | \"email\" | \"password\" = \"text\";\n\n private handleInput(event: Event) {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n \n this.dispatchEvent(\n new CustomEvent(\"input-change\", {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n render() {\n return html`\n <input\n .value=\"${this.value}\"\n placeholder=\"${this.placeholder}\"\n ?disabled=\"${this.disabled}\"\n type=\"${this.type}\"\n @input=\"${this.handleInput}\"\n />\n `;\n }\n}\n\n// SSR-safe element registration\nif (!customElements.get(\"my-input\")) {\n customElements.define(\"my-input\", MyInput);\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,SAAS,YAAY,MAAM,WAAW;AACtC,SAAS,eAAe,gBAAgB;AAIjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EA4BV,QAAQ;AAAA,EACR,cAAc;AAAA,EACb,WAAW;AAAA,EACZ,OAAsC;AAAA,EAE1D,YAAY,OAAc;AAChC,UAAM,SAAS,MAAM;AACrB,SAAK,QAAQ,OAAO;AAEpB,SAAK;AAAA,MACH,IAAI,YAAY,gBAAgB;AAAA,QAC9B,QAAQ,EAAE,OAAO,KAAK,MAAM;AAAA,QAC5B,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,kBAEO,KAAK,KAAK;AAAA,uBACL,KAAK,WAAW;AAAA,qBAClB,KAAK,QAAQ;AAAA,gBAClB,KAAK,IAAI;AAAA,kBACP,KAAK,WAAW;AAAA;AAAA;AAAA,EAGhC;AACF;AAxDE,cADW,SACJ,UAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BY;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5Bf,QA4BiB;AACA;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Bf,QA6BiB;AACC;AAAA,EAA5B,SAAS,EAAE,MAAM,QAAQ,CAAC;AAAA,GA9BhB,QA8BkB;AACD;AAAA,EAA3B,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA/Bf,QA+BiB;AA/BjB,UAAN;AAAA,EADN,cAAc,UAAU;AAAA,GACZ;AA4Db,IAAI,CAAC,eAAe,IAAI,UAAU,GAAG;AACnC,iBAAe,OAAO,YAAY,OAAO;AAC3C;","names":[]}
package/dist/index.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import * as lit_html from 'lit-html';
2
+ import * as lit from 'lit';
3
+ import { LitElement } from 'lit';
4
+
5
+ declare class MyButton extends LitElement {
6
+ static styles: lit.CSSResult;
7
+ variant: "primary" | "secondary";
8
+ disabled: boolean;
9
+ size: "sm" | "md" | "lg";
10
+ private handleClick;
11
+ render(): lit_html.TemplateResult<1>;
12
+ }
13
+
14
+ declare class MyInput extends LitElement {
15
+ static styles: lit.CSSResult;
16
+ value: string;
17
+ placeholder: string;
18
+ disabled: boolean;
19
+ type: "text" | "email" | "password";
20
+ private handleInput;
21
+ render(): lit_html.TemplateResult<1>;
22
+ }
23
+
24
+ export { MyButton, MyInput };
package/dist/index.js ADDED
@@ -0,0 +1,186 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
4
+ var __decorateClass = (decorators, target, key, kind) => {
5
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
6
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
7
+ if (decorator = decorators[i])
8
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
9
+ if (kind && result) __defProp(target, key, result);
10
+ return result;
11
+ };
12
+ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
13
+
14
+ // src/components/my-button.ts
15
+ import { LitElement, html, css } from "lit";
16
+ import { customElement, property } from "lit/decorators.js";
17
+ var MyButton = class extends LitElement {
18
+ variant = "primary";
19
+ disabled = false;
20
+ size = "md";
21
+ handleClick() {
22
+ if (this.disabled) return;
23
+ this.dispatchEvent(
24
+ new CustomEvent("button-click", {
25
+ detail: { variant: this.variant },
26
+ bubbles: true,
27
+ composed: true
28
+ })
29
+ );
30
+ }
31
+ render() {
32
+ return html`
33
+ <button
34
+ class="${this.variant} ${this.size}"
35
+ ?disabled="${this.disabled}"
36
+ @click="${this.handleClick}"
37
+ >
38
+ <slot></slot>
39
+ </button>
40
+ `;
41
+ }
42
+ };
43
+ __publicField(MyButton, "styles", css`
44
+ :host {
45
+ display: inline-block;
46
+ }
47
+
48
+ button {
49
+ padding: 0.5rem 1rem;
50
+ border: none;
51
+ border-radius: 4px;
52
+ cursor: pointer;
53
+ font-family: inherit;
54
+ font-size: inherit;
55
+ transition: all 0.2s ease;
56
+ }
57
+
58
+ button:disabled {
59
+ opacity: 0.6;
60
+ cursor: not-allowed;
61
+ }
62
+
63
+ .primary {
64
+ background-color: #007bff;
65
+ color: white;
66
+ }
67
+
68
+ .primary:hover:not(:disabled) {
69
+ background-color: #0056b3;
70
+ }
71
+
72
+ .secondary {
73
+ background-color: #6c757d;
74
+ color: white;
75
+ }
76
+
77
+ .secondary:hover:not(:disabled) {
78
+ background-color: #545b62;
79
+ }
80
+
81
+ .sm {
82
+ padding: 0.25rem 0.5rem;
83
+ font-size: 0.875rem;
84
+ }
85
+
86
+ .lg {
87
+ padding: 0.75rem 1.5rem;
88
+ font-size: 1.125rem;
89
+ }
90
+ `);
91
+ __decorateClass([
92
+ property({ type: String })
93
+ ], MyButton.prototype, "variant", 2);
94
+ __decorateClass([
95
+ property({ type: Boolean })
96
+ ], MyButton.prototype, "disabled", 2);
97
+ __decorateClass([
98
+ property({ type: String })
99
+ ], MyButton.prototype, "size", 2);
100
+ MyButton = __decorateClass([
101
+ customElement("my-button")
102
+ ], MyButton);
103
+ if (!customElements.get("my-button")) {
104
+ customElements.define("my-button", MyButton);
105
+ }
106
+
107
+ // src/components/my-input.ts
108
+ import { LitElement as LitElement2, html as html2, css as css2 } from "lit";
109
+ import { customElement as customElement2, property as property2 } from "lit/decorators.js";
110
+ var MyInput = class extends LitElement2 {
111
+ value = "";
112
+ placeholder = "";
113
+ disabled = false;
114
+ type = "text";
115
+ handleInput(event) {
116
+ const target = event.target;
117
+ this.value = target.value;
118
+ this.dispatchEvent(
119
+ new CustomEvent("input-change", {
120
+ detail: { value: this.value },
121
+ bubbles: true,
122
+ composed: true
123
+ })
124
+ );
125
+ }
126
+ render() {
127
+ return html2`
128
+ <input
129
+ .value="${this.value}"
130
+ placeholder="${this.placeholder}"
131
+ ?disabled="${this.disabled}"
132
+ type="${this.type}"
133
+ @input="${this.handleInput}"
134
+ />
135
+ `;
136
+ }
137
+ };
138
+ __publicField(MyInput, "styles", css2`
139
+ :host {
140
+ display: block;
141
+ }
142
+
143
+ input {
144
+ width: 100%;
145
+ padding: 0.5rem;
146
+ border: 1px solid #ccc;
147
+ border-radius: 4px;
148
+ font-family: inherit;
149
+ font-size: inherit;
150
+ transition: border-color 0.2s ease;
151
+ }
152
+
153
+ input:focus {
154
+ outline: none;
155
+ border-color: #007bff;
156
+ }
157
+
158
+ input:disabled {
159
+ background-color: #f8f9fa;
160
+ opacity: 0.6;
161
+ cursor: not-allowed;
162
+ }
163
+ `);
164
+ __decorateClass([
165
+ property2({ type: String })
166
+ ], MyInput.prototype, "value", 2);
167
+ __decorateClass([
168
+ property2({ type: String })
169
+ ], MyInput.prototype, "placeholder", 2);
170
+ __decorateClass([
171
+ property2({ type: Boolean })
172
+ ], MyInput.prototype, "disabled", 2);
173
+ __decorateClass([
174
+ property2({ type: String })
175
+ ], MyInput.prototype, "type", 2);
176
+ MyInput = __decorateClass([
177
+ customElement2("my-input")
178
+ ], MyInput);
179
+ if (!customElements.get("my-input")) {
180
+ customElements.define("my-input", MyInput);
181
+ }
182
+ export {
183
+ MyButton,
184
+ MyInput
185
+ };
186
+ //# sourceMappingURL=index.js.map
package/dist/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/my-button.ts","../src/components/my-input.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MyButtonProps } from '@lovince/ui-shared';\n\n@customElement(\"my-button\")\nexport class MyButton extends LitElement {\n static styles = css`\n :host {\n display: inline-block;\n }\n \n button {\n padding: 0.5rem 1rem;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-family: inherit;\n font-size: inherit;\n transition: all 0.2s ease;\n }\n \n button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n \n .primary {\n background-color: #007bff;\n color: white;\n }\n \n .primary:hover:not(:disabled) {\n background-color: #0056b3;\n }\n \n .secondary {\n background-color: #6c757d;\n color: white;\n }\n \n .secondary:hover:not(:disabled) {\n background-color: #545b62;\n }\n \n .sm {\n padding: 0.25rem 0.5rem;\n font-size: 0.875rem;\n }\n \n .lg {\n padding: 0.75rem 1.5rem;\n font-size: 1.125rem;\n }\n `;\n\n @property({ type: String }) variant: \"primary\" | \"secondary\" = \"primary\";\n @property({ type: Boolean }) disabled = false;\n @property({ type: String }) size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n private handleClick() {\n if (this.disabled) return;\n \n this.dispatchEvent(\n new CustomEvent(\"button-click\", {\n detail: { variant: this.variant },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n render() {\n return html`\n <button \n class=\"${this.variant} ${this.size}\"\n ?disabled=\"${this.disabled}\"\n @click=\"${this.handleClick}\"\n >\n <slot></slot>\n </button>\n `;\n }\n}\n\n// SSR-safe element registration\nif (!customElements.get(\"my-button\")) {\n customElements.define(\"my-button\", MyButton);\n}\n","import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MyInputProps } from '@lovince/ui-shared';\n\n@customElement(\"my-input\")\nexport class MyInput extends LitElement {\n static styles = css`\n :host {\n display: block;\n }\n \n input {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #ccc;\n border-radius: 4px;\n font-family: inherit;\n font-size: inherit;\n transition: border-color 0.2s ease;\n }\n \n input:focus {\n outline: none;\n border-color: #007bff;\n }\n \n input:disabled {\n background-color: #f8f9fa;\n opacity: 0.6;\n cursor: not-allowed;\n }\n `;\n\n @property({ type: String }) value = \"\";\n @property({ type: String }) placeholder = \"\";\n @property({ type: Boolean }) disabled = false;\n @property({ type: String }) type: \"text\" | \"email\" | \"password\" = \"text\";\n\n private handleInput(event: Event) {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n \n this.dispatchEvent(\n new CustomEvent(\"input-change\", {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n render() {\n return html`\n <input\n .value=\"${this.value}\"\n placeholder=\"${this.placeholder}\"\n ?disabled=\"${this.disabled}\"\n type=\"${this.type}\"\n @input=\"${this.handleInput}\"\n />\n `;\n }\n}\n\n// SSR-safe element registration\nif (!customElements.get(\"my-input\")) {\n customElements.define(\"my-input\", MyInput);\n}\n"],"mappings":"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","names":["LitElement","html","css","customElement","property","LitElement","html","css","property","customElement"]}
package/package.json ADDED
@@ -0,0 +1,39 @@
1
+ {
2
+ "name": "@lovince/ui-core",
3
+ "version": "1.0.0",
4
+ "description": "Framework-agnostic UI components built with Lit",
5
+ "type": "module",
6
+ "sideEffects": false,
7
+ "main": "./dist/index.js",
8
+ "types": "./dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js"
13
+ },
14
+ "./my-button": {
15
+ "types": "./dist/components/my-button.d.ts",
16
+ "import": "./dist/components/my-button.js"
17
+ },
18
+ "./my-input": {
19
+ "types": "./dist/components/my-input.d.ts",
20
+ "import": "./dist/components/my-input.js"
21
+ }
22
+ },
23
+ "files": [
24
+ "dist"
25
+ ],
26
+ "scripts": {
27
+ "build": "tsup",
28
+ "dev": "tsup --watch"
29
+ },
30
+ "peerDependencies": {
31
+ "lit": "^3.0.0"
32
+ },
33
+ "devDependencies": {
34
+ "@lovince/ui-shared": "^1.0.0",
35
+ "lit": "^3.3.2",
36
+ "tsup": "^8.5.1",
37
+ "typescript": "^5.9.3"
38
+ }
39
+ }