@jegdev/sema-ui 0.0.5 → 0.0.7

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/dist/sema-ui.es.js +33 -31
  2. package/dist/sema-ui.umd.js +21 -18
  3. package/package.json +15 -12
  4. package/src/index.d.ts +43 -26
package/dist/sema-ui.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import { css as a, LitElement as b, html as s } from "lit";
2
- const c = a`
1
+ import { css as a, LitElement as c, html as r } from "lit";
2
+ const b = a`
3
3
  /* ---------------- GENERAL STYLES ------------------- */
4
4
 
5
5
  a {
@@ -94,11 +94,11 @@ const c = a`
94
94
  color: var(--btn-secondary-color);
95
95
  }
96
96
  `;
97
- class l extends b {
97
+ class l extends c {
98
98
  static get is() {
99
99
  return "sema-button";
100
100
  }
101
- static styles = [c];
101
+ static styles = [b];
102
102
  static properties = {
103
103
  mode: { type: String },
104
104
  kind: { type: String },
@@ -107,75 +107,77 @@ class l extends b {
107
107
  secondaryColor: { type: String },
108
108
  size: { type: String },
109
109
  fontSize: { type: String },
110
- textLabel: { type: String },
111
110
  url: { type: String },
112
111
  target: { type: String },
113
112
  altText: { type: String }
114
113
  };
115
114
  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;
115
+ super(), this.mode = "", this.kind = "", this.custom = "off", this.firstColor = "", this.secondaryColor = "", this.size = "", this.fontSize = "", this.url, this.altText, this.target;
117
116
  }
118
117
  render() {
119
118
  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};`;
119
+ let e = "120px";
120
+ this.size === "sm" ? e = "80px" : this.size === "md" ? e = "120px" : this.size === "lg" ? e = "160px" : this.size === "full" && (e = "100%");
121
+ const o = `--btn-width: ${e};`;
123
122
  let i = "1rem";
124
123
  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`
124
+ const s = `--btn-font-size: ${i}`;
125
+ return this.mode === "outline" ? this.kind === "link" ? r`
127
126
  <a
128
- style="${t}${o}${e}"
127
+ style="${t}${o}${s}"
129
128
  href="${this.url}"
130
129
  alt="${this.altText}"
131
130
  title="${this.altText}"
132
131
  target="${this.target}"
133
132
  class="btn ${n ? "btn-outline-custom" : "btn-outline"}"
134
- >${this.textLabel}
133
+ >
134
+ <slot></slot>
135
135
  </a>
136
- ` : s`
136
+ ` : r`
137
137
  <button
138
- style="${t}${o}${e}"
138
+ style="${t}${o}${s}"
139
139
  class="btn ${n ? "btn-outline-custom" : "btn-outline"}"
140
- title="${this.textLabel}"
140
+ title="${this.altText}"
141
141
  >
142
- ${this.textLabel}
142
+ <slot></slot>
143
143
  </button>
144
- ` : this.mode === "ghost" ? this.kind === "link" ? s`
144
+ ` : this.mode === "ghost" ? this.kind === "link" ? r`
145
145
  <a
146
- style="${t}${o}${e}"
146
+ style="${t}${o}${s}"
147
147
  href="${this.url}"
148
148
  alt="${this.altText}"
149
149
  title="${this.altText}"
150
150
  target="${this.target}"
151
151
  class="btn ${this.custom === "on" ? "btn-ghost-custom" : "btn-ghost"}"
152
- >${this.textLabel}
152
+ >
153
+ <slot></slot>
153
154
  </a>
154
- ` : s`
155
+ ` : r`
155
156
  <button
156
- style="${t}${o}${e}"
157
+ style="${t}${o}${s}"
157
158
  class="btn ${this.custom === "on" ? "btn-ghost-custom" : "btn-ghost"}"
158
- title="${this.textLabel}"
159
+ title="${this.altText}"
159
160
  >
160
- ${this.textLabel}
161
+ <slot></slot>
161
162
  </button>
162
- ` : this.kind === "link" ? s`
163
+ ` : this.kind === "link" ? r`
163
164
  <a
164
- style="${t}${o}${e}"
165
+ style="${t}${o}${s}"
165
166
  href="${this.url}"
166
167
  alt="${this.altText}"
167
168
  title="${this.altText}"
168
169
  target="${this.target}"
169
170
  class="btn ${this.custom === "on" ? "btn-custom" : "btn-primary"}"
170
- >${this.textLabel}
171
+ >
172
+ <slot></slot>
171
173
  </a>
172
- ` : s`
174
+ ` : r`
173
175
  <button
174
- style="${t}${o}${e}"
176
+ style="${t}${o}${s}"
175
177
  class="btn ${this.custom === "on" ? "btn-custom" : "btn-primary"}"
176
- title="${this.textLabel}"
178
+ title="${this.altText}"
177
179
  >
178
- ${this.textLabel}
180
+ <slot></slot>
179
181
  </button>
180
182
  `;
181
183
  }
package/dist/sema-ui.umd.js CHANGED
@@ -1,4 +1,4 @@
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`
1
+ (function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("lit")):typeof define=="function"&&define.amd?define(["exports","lit"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.SemaUI={},o.lit))})(this,(function(o,t){"use strict";const c=t.css`
2
2
  /* ---------------- GENERAL STYLES ------------------- */
3
3
 
4
4
  a {
@@ -92,58 +92,61 @@
92
92
  .btn-ghost-custom:hover {
93
93
  color: var(--btn-secondary-color);
94
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`
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},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.url,this.altText,this.target}render(){const l=this.custom==="on",e=l?`--btn-primary-color: ${this.firstColor}; --btn-secondary-color: ${this.secondaryColor};`:"";let n="120px";this.size==="sm"?n="80px":this.size==="md"?n="120px":this.size==="lg"?n="160px":this.size==="full"&&(n="100%");const s=`--btn-width: ${n};`;let i="1rem";this.fontSize==="sm"?i="0.8rem":this.fontSize==="md"?i="1rem":this.fontSize==="lg"?i="1.5rem":this.fontSize==="xl"&&(i="2rem");const r=`--btn-font-size: ${i}`;return this.mode==="outline"?this.kind==="link"?t.html`
96
96
  <a
97
- style="${o}${s}${r}"
97
+ style="${e}${s}${r}"
98
98
  href="${this.url}"
99
99
  alt="${this.altText}"
100
100
  title="${this.altText}"
101
101
  target="${this.target}"
102
102
  class="btn ${l?"btn-outline-custom":"btn-outline"}"
103
- >${this.textLabel}
103
+ >
104
+ <slot></slot>
104
105
  </a>
105
106
  `:t.html`
106
107
  <button
107
- style="${o}${s}${r}"
108
+ style="${e}${s}${r}"
108
109
  class="btn ${l?"btn-outline-custom":"btn-outline"}"
109
- title="${this.textLabel}"
110
+ title="${this.altText}"
110
111
  >
111
- ${this.textLabel}
112
+ <slot></slot>
112
113
  </button>
113
114
  `:this.mode==="ghost"?this.kind==="link"?t.html`
114
115
  <a
115
- style="${o}${s}${r}"
116
+ style="${e}${s}${r}"
116
117
  href="${this.url}"
117
118
  alt="${this.altText}"
118
119
  title="${this.altText}"
119
120
  target="${this.target}"
120
121
  class="btn ${this.custom==="on"?"btn-ghost-custom":"btn-ghost"}"
121
- >${this.textLabel}
122
+ >
123
+ <slot></slot>
122
124
  </a>
123
125
  `:t.html`
124
126
  <button
125
- style="${o}${s}${r}"
127
+ style="${e}${s}${r}"
126
128
  class="btn ${this.custom==="on"?"btn-ghost-custom":"btn-ghost"}"
127
- title="${this.textLabel}"
129
+ title="${this.altText}"
128
130
  >
129
- ${this.textLabel}
131
+ <slot></slot>
130
132
  </button>
131
133
  `:this.kind==="link"?t.html`
132
134
  <a
133
- style="${o}${s}${r}"
135
+ style="${e}${s}${r}"
134
136
  href="${this.url}"
135
137
  alt="${this.altText}"
136
138
  title="${this.altText}"
137
139
  target="${this.target}"
138
140
  class="btn ${this.custom==="on"?"btn-custom":"btn-primary"}"
139
- >${this.textLabel}
141
+ >
142
+ <slot></slot>
140
143
  </a>
141
144
  `:t.html`
142
145
  <button
143
- style="${o}${s}${r}"
146
+ style="${e}${s}${r}"
144
147
  class="btn ${this.custom==="on"?"btn-custom":"btn-primary"}"
145
- title="${this.textLabel}"
148
+ title="${this.altText}"
146
149
  >
147
- ${this.textLabel}
150
+ <slot></slot>
148
151
  </button>
149
- `}}customElements.define(a.is,a);const b="0.0.1";e.version=b,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
152
+ `}}customElements.define(a.is,a);const b="0.0.1";o.version=b,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
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.7",
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
  }