@jegdev/sema-ui 0.0.5 → 0.0.6

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 (4) hide show
  1. package/package.json +15 -12
  2. package/src/index.d.ts +43 -26
  3. package/dist/sema-ui.es.js +0 -187
  4. package/dist/sema-ui.umd.js +0 -149
package/package.json CHANGED
@@ -1,30 +1,35 @@
1
1
  {
2
2
  "name": "@jegdev/sema-ui",
3
3
  "private": false,
4
- "version": "0.0.5",
4
+ "version": "0.0.6",
5
5
  "description": "Una colección de componentes Lit minimalistas estilo Swiss Design",
6
- "keywords": ["Next", "React", "Angular", "Vue", "Astro", "Lit"],
6
+ "keywords": [
7
+ "Next",
8
+ "React",
9
+ "Angular",
10
+ "Vue",
11
+ "Astro",
12
+ "Lit"
13
+ ],
7
14
  "type": "module",
8
-
9
15
  "files": [
10
16
  "dist",
11
17
  "src/index.d.ts"
12
18
  ],
13
-
14
19
  "license": "MIT",
15
20
  "author": "JEG Dev Studios",
16
- "contributors": ["JhonnDevJS", "JasubiPL"],
17
-
21
+ "contributors": [
22
+ "JhonnDevJS",
23
+ "JasubiPL"
24
+ ],
18
25
  "main": "./dist/sema-ui.umd.js",
19
26
  "module": "./dist/sema-ui.es.js",
20
27
  "types": "./src/index.d.ts",
21
-
22
28
  "homepage": "https://github.com/JEGDevStudios/Sema-UI",
23
29
  "repository": {
24
30
  "type": "git",
25
31
  "url": "https://github.com/JEGDevStudios/Sema-UI"
26
32
  },
27
-
28
33
  "exports": {
29
34
  ".": {
30
35
  "types": "./src/index.d.ts",
@@ -32,11 +37,9 @@
32
37
  "require": "./dist/sema-ui.umd.js"
33
38
  }
34
39
  },
35
-
36
40
  "publishConfig": {
37
41
  "access": "public"
38
42
  },
39
-
40
43
  "scripts": {
41
44
  "dev": "vite",
42
45
  "build": "vite build"
@@ -45,6 +48,6 @@
45
48
  "lit": "^3.0.0"
46
49
  },
47
50
  "devDependencies": {
48
- "vite": "^5.0.0"
51
+ "vite": "^7.3.1"
49
52
  }
50
- }
53
+ }
package/src/index.d.ts CHANGED
@@ -1,31 +1,48 @@
1
- declare module '@jegdev/sema-ui' {
2
- import { LitElement } from 'lit';
1
+ import { LitElement } from 'lit';
3
2
 
4
- export class SemaButton extends LitElement {
5
- // Coincide con 'mode' en tu JS.
6
- // Agregamos '' porque es tu default para el botón primario.
7
- mode: 'outline' | 'ghost' | '' | string;
3
+ export class SemaButton extends LitElement {
4
+ mode: 'outline' | 'ghost' | '' | string;
5
+ kind: 'link' | 'button' | string;
6
+ custom: 'on' | 'off' | string;
7
+ firstColor: string;
8
+ secondaryColor: string;
9
+ size: 'sm' | 'md' | 'lg' | 'full' | string;
10
+ fontSize: 'sm' | 'md' | 'lg' | 'xl' | string;
11
+ url: string;
12
+ target: '_blank' | '_self' | '_parent' | '_top' | string;
13
+ altText: string;
14
+ }
8
15
 
9
- // Coincide con 'kind' (link o button)
10
- kind: 'link' | 'button' | string;
11
-
12
- // Coincide con 'custom' ('on' | 'off')
13
- custom: 'on' | 'off' | string;
14
-
15
- // Colores personalizados
16
- firstColor: string;
17
- secondaryColor: string;
18
-
19
- // Tamaños exactos según tu lógica JS
20
- size: 'sm' | 'md' | 'lg' | 'full' | string;
21
-
22
- // Tamaños de fuente exactos según tu lógica JS
23
- fontSize: 'sm' | 'md' | 'lg' | 'xl' | string;
16
+ declare global {
17
+ interface HTMLElementTagNameMap {
18
+ "sema-button": SemaButton;
19
+ }
24
20
 
25
- // Contenido y enlaces
26
- textLabel: string;
27
- url: string;
28
- target: '_blank' | '_self' | '_parent' | '_top' | string;
29
- altText: string;
21
+ namespace JSX {
22
+ interface IntrinsicElements {
23
+ "sema-button": {
24
+ mode?: 'outline' | 'ghost' | '' | string;
25
+ kind?: 'link' | 'button' | string;
26
+ custom?: 'on' | 'off' | string;
27
+ firstColor?: string;
28
+ "first-color"?: string;
29
+
30
+ secondaryColor?: string;
31
+ "secondary-color"?: string;
32
+
33
+ size?: 'sm' | 'md' | 'lg' | 'full' | string;
34
+
35
+ fontSize?: 'sm' | 'md' | 'lg' | 'xl' | string;
36
+ "font-size"?: string;
37
+
38
+ url?: string;
39
+ target?: string;
40
+
41
+ altText?: string;
42
+ "alt-text"?: string;
43
+ children?: any;
44
+ [key: string]: any;
45
+ };
46
+ }
30
47
  }
31
48
  }
package/dist/sema-ui.es.js DELETED
@@ -1,187 +0,0 @@
1
- import { css as a, LitElement as b, html as s } from "lit";
2
- const c = a`
3
- /* ---------------- GENERAL STYLES ------------------- */
4
-
5
- a {
6
- text-decoration: none;
7
- }
8
-
9
- .btn {
10
- display: inline-flex;
11
- align-items: center;
12
- justify-content: center;
13
- border-radius: 8px;
14
- cursor: pointer;
15
- font-weight: 600;
16
- outline: none;
17
- padding: 0.6rem 1.2rem;
18
- font-size: var(--btn-font-size);
19
- border: 1px solid transparent;
20
- width: var(--btn-width);
21
- font-family:
22
- "Inter",
23
- system-ui,
24
- -apple-system,
25
- sans-serif;
26
- }
27
-
28
- .btn:hover {
29
- border: 1px solid #b3b3b3;
30
- }
31
-
32
- /* ---------------- PRIMARY BUTTON STYLES ------------------- */
33
-
34
- .btn-primary {
35
- background: #ef4444;
36
- color: #f9fafb;
37
- }
38
-
39
- .btn-primary:hover {
40
- background: #f9fafb;
41
- color: #ef4444;
42
- }
43
-
44
- .btn-custom {
45
- background: var(--btn-primary-color);
46
- color: var(--btn-secondary-color);
47
- }
48
- .btn-custom:hover {
49
- background: var(--btn-secondary-color);
50
- color: var(--btn-primary-color);
51
- }
52
-
53
- /* ---------------- OUTLINE BUTTON STYLES ------------------- */
54
-
55
- .btn-outline {
56
- background: #f9fafb;
57
- color: #ef4444;
58
- border: 1.5px solid #ef4444;
59
- }
60
-
61
- .btn-outline:hover {
62
- background: #ef4444;
63
- color: #f9fafb;
64
- border: 1.5px solid #ef4444;
65
- }
66
-
67
- .btn-outline-custom {
68
- background: var(--btn-secondary-color);
69
- color: var(--btn-primary-color);
70
- border: 1.5px solid var(--btn-primary-color, currentColor);
71
- }
72
-
73
- .btn-outline-custom:hover {
74
- background: var(--btn-primary-color);
75
- color: var(--btn-secondary-color);
76
- border: 1.5px solid var(--btn-primary-color, currentColor);
77
- }
78
-
79
- /* ---------------- GHOST BUTTON STYLES ------------------- */
80
-
81
- .btn-ghost {
82
- color: #999999;
83
- }
84
-
85
- .btn-ghost:hover {
86
- color: #ef4444;
87
- }
88
-
89
- .btn-ghost-custom {
90
- color: var(--btn-primary-color);
91
- }
92
-
93
- .btn-ghost-custom:hover {
94
- color: var(--btn-secondary-color);
95
- }
96
- `;
97
- class l extends b {
98
- static get is() {
99
- return "sema-button";
100
- }
101
- static styles = [c];
102
- static properties = {
103
- mode: { type: String },
104
- kind: { type: String },
105
- custom: { type: String },
106
- firstColor: { type: String },
107
- secondaryColor: { type: String },
108
- size: { type: String },
109
- fontSize: { type: String },
110
- textLabel: { type: String },
111
- url: { type: String },
112
- target: { type: String },
113
- altText: { type: String }
114
- };
115
- constructor() {
116
- super(), this.mode = "", this.kind = "", this.custom = "off", this.firstColor = "", this.secondaryColor = "", this.size = "", this.fontSize = "", this.textLabel, this.url, this.altText, this.target;
117
- }
118
- render() {
119
- const n = this.custom === "on", t = n ? `--btn-primary-color: ${this.firstColor}; --btn-secondary-color: ${this.secondaryColor};` : "";
120
- let r = "120px";
121
- this.size === "sm" ? r = "80px" : this.size === "md" ? r = "120px" : this.size === "lg" ? r = "160px" : this.size === "full" && (r = "100%");
122
- const o = `--btn-width: ${r};`;
123
- let i = "1rem";
124
- this.fontSize === "sm" ? i = "0.8rem" : this.fontSize === "md" ? i = "1rem" : this.fontSize === "lg" ? i = "1.5rem" : this.fontSize === "xl" && (i = "2rem");
125
- const e = `--btn-font-size: ${i}`;
126
- return this.mode === "outline" ? this.kind === "link" ? s`
127
- <a
128
- style="${t}${o}${e}"
129
- href="${this.url}"
130
- alt="${this.altText}"
131
- title="${this.altText}"
132
- target="${this.target}"
133
- class="btn ${n ? "btn-outline-custom" : "btn-outline"}"
134
- >${this.textLabel}
135
- </a>
136
- ` : s`
137
- <button
138
- style="${t}${o}${e}"
139
- class="btn ${n ? "btn-outline-custom" : "btn-outline"}"
140
- title="${this.textLabel}"
141
- >
142
- ${this.textLabel}
143
- </button>
144
- ` : this.mode === "ghost" ? this.kind === "link" ? s`
145
- <a
146
- style="${t}${o}${e}"
147
- href="${this.url}"
148
- alt="${this.altText}"
149
- title="${this.altText}"
150
- target="${this.target}"
151
- class="btn ${this.custom === "on" ? "btn-ghost-custom" : "btn-ghost"}"
152
- >${this.textLabel}
153
- </a>
154
- ` : s`
155
- <button
156
- style="${t}${o}${e}"
157
- class="btn ${this.custom === "on" ? "btn-ghost-custom" : "btn-ghost"}"
158
- title="${this.textLabel}"
159
- >
160
- ${this.textLabel}
161
- </button>
162
- ` : this.kind === "link" ? s`
163
- <a
164
- style="${t}${o}${e}"
165
- href="${this.url}"
166
- alt="${this.altText}"
167
- title="${this.altText}"
168
- target="${this.target}"
169
- class="btn ${this.custom === "on" ? "btn-custom" : "btn-primary"}"
170
- >${this.textLabel}
171
- </a>
172
- ` : s`
173
- <button
174
- style="${t}${o}${e}"
175
- class="btn ${this.custom === "on" ? "btn-custom" : "btn-primary"}"
176
- title="${this.textLabel}"
177
- >
178
- ${this.textLabel}
179
- </button>
180
- `;
181
- }
182
- }
183
- customElements.define(l.is, l);
184
- const m = "0.0.1";
185
- export {
186
- m as version
187
- };
package/dist/sema-ui.umd.js DELETED
@@ -1,149 +0,0 @@
1
- (function(e,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("lit")):typeof define=="function"&&define.amd?define(["exports","lit"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.SemaUI={},e.lit))})(this,(function(e,t){"use strict";const c=t.css`
2
- /* ---------------- GENERAL STYLES ------------------- */
3
-
4
- a {
5
- text-decoration: none;
6
- }
7
-
8
- .btn {
9
- display: inline-flex;
10
- align-items: center;
11
- justify-content: center;
12
- border-radius: 8px;
13
- cursor: pointer;
14
- font-weight: 600;
15
- outline: none;
16
- padding: 0.6rem 1.2rem;
17
- font-size: var(--btn-font-size);
18
- border: 1px solid transparent;
19
- width: var(--btn-width);
20
- font-family:
21
- "Inter",
22
- system-ui,
23
- -apple-system,
24
- sans-serif;
25
- }
26
-
27
- .btn:hover {
28
- border: 1px solid #b3b3b3;
29
- }
30
-
31
- /* ---------------- PRIMARY BUTTON STYLES ------------------- */
32
-
33
- .btn-primary {
34
- background: #ef4444;
35
- color: #f9fafb;
36
- }
37
-
38
- .btn-primary:hover {
39
- background: #f9fafb;
40
- color: #ef4444;
41
- }
42
-
43
- .btn-custom {
44
- background: var(--btn-primary-color);
45
- color: var(--btn-secondary-color);
46
- }
47
- .btn-custom:hover {
48
- background: var(--btn-secondary-color);
49
- color: var(--btn-primary-color);
50
- }
51
-
52
- /* ---------------- OUTLINE BUTTON STYLES ------------------- */
53
-
54
- .btn-outline {
55
- background: #f9fafb;
56
- color: #ef4444;
57
- border: 1.5px solid #ef4444;
58
- }
59
-
60
- .btn-outline:hover {
61
- background: #ef4444;
62
- color: #f9fafb;
63
- border: 1.5px solid #ef4444;
64
- }
65
-
66
- .btn-outline-custom {
67
- background: var(--btn-secondary-color);
68
- color: var(--btn-primary-color);
69
- border: 1.5px solid var(--btn-primary-color, currentColor);
70
- }
71
-
72
- .btn-outline-custom:hover {
73
- background: var(--btn-primary-color);
74
- color: var(--btn-secondary-color);
75
- border: 1.5px solid var(--btn-primary-color, currentColor);
76
- }
77
-
78
- /* ---------------- GHOST BUTTON STYLES ------------------- */
79
-
80
- .btn-ghost {
81
- color: #999999;
82
- }
83
-
84
- .btn-ghost:hover {
85
- color: #ef4444;
86
- }
87
-
88
- .btn-ghost-custom {
89
- color: var(--btn-primary-color);
90
- }
91
-
92
- .btn-ghost-custom:hover {
93
- color: var(--btn-secondary-color);
94
- }
95
- `;class a extends t.LitElement{static get is(){return"sema-button"}static styles=[c];static properties={mode:{type:String},kind:{type:String},custom:{type:String},firstColor:{type:String},secondaryColor:{type:String},size:{type:String},fontSize:{type:String},textLabel:{type:String},url:{type:String},target:{type:String},altText:{type:String}};constructor(){super(),this.mode="",this.kind="",this.custom="off",this.firstColor="",this.secondaryColor="",this.size="",this.fontSize="",this.textLabel,this.url,this.altText,this.target}render(){const l=this.custom==="on",o=l?`--btn-primary-color: ${this.firstColor}; --btn-secondary-color: ${this.secondaryColor};`:"";let i="120px";this.size==="sm"?i="80px":this.size==="md"?i="120px":this.size==="lg"?i="160px":this.size==="full"&&(i="100%");const s=`--btn-width: ${i};`;let n="1rem";this.fontSize==="sm"?n="0.8rem":this.fontSize==="md"?n="1rem":this.fontSize==="lg"?n="1.5rem":this.fontSize==="xl"&&(n="2rem");const r=`--btn-font-size: ${n}`;return this.mode==="outline"?this.kind==="link"?t.html`
96
- <a
97
- style="${o}${s}${r}"
98
- href="${this.url}"
99
- alt="${this.altText}"
100
- title="${this.altText}"
101
- target="${this.target}"
102
- class="btn ${l?"btn-outline-custom":"btn-outline"}"
103
- >${this.textLabel}
104
- </a>
105
- `:t.html`
106
- <button
107
- style="${o}${s}${r}"
108
- class="btn ${l?"btn-outline-custom":"btn-outline"}"
109
- title="${this.textLabel}"
110
- >
111
- ${this.textLabel}
112
- </button>
113
- `:this.mode==="ghost"?this.kind==="link"?t.html`
114
- <a
115
- style="${o}${s}${r}"
116
- href="${this.url}"
117
- alt="${this.altText}"
118
- title="${this.altText}"
119
- target="${this.target}"
120
- class="btn ${this.custom==="on"?"btn-ghost-custom":"btn-ghost"}"
121
- >${this.textLabel}
122
- </a>
123
- `:t.html`
124
- <button
125
- style="${o}${s}${r}"
126
- class="btn ${this.custom==="on"?"btn-ghost-custom":"btn-ghost"}"
127
- title="${this.textLabel}"
128
- >
129
- ${this.textLabel}
130
- </button>
131
- `:this.kind==="link"?t.html`
132
- <a
133
- style="${o}${s}${r}"
134
- href="${this.url}"
135
- alt="${this.altText}"
136
- title="${this.altText}"
137
- target="${this.target}"
138
- class="btn ${this.custom==="on"?"btn-custom":"btn-primary"}"
139
- >${this.textLabel}
140
- </a>
141
- `:t.html`
142
- <button
143
- style="${o}${s}${r}"
144
- class="btn ${this.custom==="on"?"btn-custom":"btn-primary"}"
145
- title="${this.textLabel}"
146
- >
147
- ${this.textLabel}
148
- </button>
149
- `}}customElements.define(a.is,a);const b="0.0.1";e.version=b,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));