reke-ui 0.1.1 → 0.2.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.
- package/README.md +23 -0
- package/cli/install-skills.mjs +169 -0
- package/custom-elements.json +472 -128
- package/dist/__type-checks__/no-lit-in-public-types.d.ts +2 -0
- package/dist/__type-checks__/no-lit-in-public-types.d.ts.map +1 -0
- package/dist/_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js +9 -0
- package/dist/components/reke-alert/reke-alert.d.ts.map +1 -1
- package/dist/components/reke-alert/reke-alert.js +45 -0
- package/dist/components/reke-alert/reke-alert.styles.d.ts.map +1 -1
- package/dist/components/reke-alert/reke-alert.styles.js +103 -0
- package/dist/components/reke-badge/reke-badge.d.ts +4 -2
- package/dist/components/reke-badge/reke-badge.d.ts.map +1 -1
- package/dist/components/reke-badge/reke-badge.js +30 -0
- package/dist/components/reke-badge/reke-badge.styles.d.ts.map +1 -1
- package/dist/components/reke-badge/reke-badge.styles.js +92 -0
- package/dist/components/reke-button/reke-button.d.ts.map +1 -1
- package/dist/components/reke-button/reke-button.js +53 -0
- package/dist/components/reke-button/reke-button.styles.d.ts.map +1 -1
- package/dist/components/reke-button/reke-button.styles.js +226 -0
- package/dist/components/reke-card/reke-card.d.ts +7 -0
- package/dist/components/reke-card/reke-card.d.ts.map +1 -1
- package/dist/components/reke-card/reke-card.js +50 -0
- package/dist/components/reke-card/reke-card.styles.d.ts.map +1 -1
- package/dist/components/reke-card/reke-card.styles.js +147 -0
- package/dist/components/reke-checkbox/reke-checkbox.js +57 -0
- package/dist/components/reke-checkbox/reke-checkbox.styles.d.ts.map +1 -1
- package/dist/components/reke-checkbox/reke-checkbox.styles.js +79 -0
- package/dist/components/reke-chip/reke-chip.d.ts.map +1 -1
- package/dist/components/reke-chip/reke-chip.js +62 -0
- package/dist/components/reke-chip/reke-chip.styles.d.ts.map +1 -1
- package/dist/components/reke-chip/reke-chip.styles.js +128 -0
- package/dist/components/reke-date-range/reke-date-range.d.ts.map +1 -1
- package/dist/components/reke-date-range/reke-date-range.js +326 -0
- package/dist/components/reke-date-range/reke-date-range.styles.d.ts.map +1 -1
- package/dist/components/reke-date-range/reke-date-range.styles.js +335 -0
- package/dist/components/reke-dialog/reke-dialog.d.ts.map +1 -1
- package/dist/components/reke-dialog/reke-dialog.js +77 -0
- package/dist/components/reke-dialog/reke-dialog.styles.d.ts.map +1 -1
- package/dist/components/reke-dialog/reke-dialog.styles.js +132 -0
- package/dist/components/reke-file-upload/reke-file-upload.d.ts.map +1 -1
- package/dist/components/reke-file-upload/reke-file-upload.js +84 -0
- package/dist/components/reke-file-upload/reke-file-upload.styles.js +104 -0
- package/dist/components/reke-input/reke-input.js +54 -0
- package/dist/components/reke-input/reke-input.styles.d.ts.map +1 -1
- package/dist/components/reke-input/reke-input.styles.js +78 -0
- package/dist/components/reke-select/reke-select.d.ts.map +1 -1
- package/dist/components/reke-select/reke-select.js +89 -0
- package/dist/components/reke-select/reke-select.styles.d.ts.map +1 -1
- package/dist/components/reke-select/reke-select.styles.js +120 -0
- package/dist/components/reke-table/reke-table.d.ts +144 -13
- package/dist/components/reke-table/reke-table.d.ts.map +1 -1
- package/dist/components/reke-table/reke-table.js +291 -0
- package/dist/components/reke-table/reke-table.styles.d.ts.map +1 -1
- package/dist/components/reke-table/reke-table.styles.js +265 -0
- package/dist/components/reke-textarea/reke-textarea.js +54 -0
- package/dist/components/reke-textarea/reke-textarea.styles.js +73 -0
- package/dist/components/reke-toast/reke-toast.d.ts.map +1 -1
- package/dist/components/reke-toast/reke-toast.js +74 -0
- package/dist/components/reke-toast/reke-toast.styles.d.ts.map +1 -1
- package/dist/components/reke-toast/reke-toast.styles.js +183 -0
- package/dist/components/reke-toggle/reke-toggle.js +50 -0
- package/dist/components/reke-toggle/reke-toggle.styles.js +68 -0
- package/dist/components/reke-tooltip/reke-tooltip.js +51 -0
- package/dist/components/reke-tooltip/reke-tooltip.styles.js +64 -0
- package/dist/index.d.ts +23 -23
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +18 -0
- package/dist/node_modules/lit/directives/ref.js +1 -0
- package/dist/node_modules/lit-html/async-directive.js +55 -0
- package/dist/node_modules/lit-html/directive-helpers.js +5 -0
- package/dist/node_modules/lit-html/directive.js +28 -0
- package/dist/node_modules/lit-html/directives/ref.js +30 -0
- package/dist/node_modules/lit-html/lit-html.js +234 -0
- package/dist/react-bridge/table.d.ts +58 -0
- package/dist/react-bridge/table.d.ts.map +1 -0
- package/dist/react-bridge/table.js +115 -0
- package/dist/react.d.ts +12 -26
- package/dist/react.d.ts.map +1 -1
- package/dist/react.js +111 -132
- package/dist/shared/base-element.js +14 -0
- package/dist/shared/tailwind-styles.js +6 -0
- package/dist/shared/tailwind.js +4 -0
- package/dist/tokens/reke-tokens.css +70 -0
- package/package.json +43 -23
- package/dist/reke-chip-DexKxhxn.js +0 -3358
- package/dist/reke-ui.js +0 -20
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { RekeElement as e } from "../../shared/base-element.js";
|
|
2
|
+
import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
|
|
3
|
+
import { styles as n } from "./reke-card.styles.js";
|
|
4
|
+
import { html as r } from "lit";
|
|
5
|
+
import { customElement as i, property as a, state as o } from "lit/decorators.js";
|
|
6
|
+
import { classMap as s } from "lit/directives/class-map.js";
|
|
7
|
+
//#region src/components/reke-card/reke-card.ts
|
|
8
|
+
var c = class extends e {
|
|
9
|
+
constructor(...e) {
|
|
10
|
+
super(...e), this.variant = "default", this.padding = "md", this.interactive = !1, this.accent = "none", this._hasHeader = !1, this._hasFooter = !1;
|
|
11
|
+
}
|
|
12
|
+
static {
|
|
13
|
+
this.styles = n;
|
|
14
|
+
}
|
|
15
|
+
_onSlotChange(e, t) {
|
|
16
|
+
let n = t.target.assignedNodes({ flatten: !0 }).length > 0;
|
|
17
|
+
e === "header" ? this._hasHeader = n : this._hasFooter = n;
|
|
18
|
+
}
|
|
19
|
+
render() {
|
|
20
|
+
return r`
|
|
21
|
+
<div class=${s({
|
|
22
|
+
card: !0,
|
|
23
|
+
[`card--${this.variant}`]: !0,
|
|
24
|
+
[`card--padding-${this.padding}`]: !0,
|
|
25
|
+
"card--interactive": this.interactive,
|
|
26
|
+
[`card--accent-${this.accent}`]: this.accent !== "none"
|
|
27
|
+
})}>
|
|
28
|
+
${this._hasHeader ? r`
|
|
29
|
+
<div class="card-header">
|
|
30
|
+
<slot name="header" @slotchange=${(e) => this._onSlotChange("header", e)}></slot>
|
|
31
|
+
</div>
|
|
32
|
+
` : r`<slot name="header" @slotchange=${(e) => this._onSlotChange("header", e)} style="display:none"></slot>`}
|
|
33
|
+
<div class="card-body">
|
|
34
|
+
<slot></slot>
|
|
35
|
+
</div>
|
|
36
|
+
${this._hasFooter ? r`
|
|
37
|
+
<div class="card-footer">
|
|
38
|
+
<slot name="footer" @slotchange=${(e) => this._onSlotChange("footer", e)}></slot>
|
|
39
|
+
</div>
|
|
40
|
+
` : r`<slot name="footer" @slotchange=${(e) => this._onSlotChange("footer", e)} style="display:none"></slot>`}
|
|
41
|
+
</div>
|
|
42
|
+
`;
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
t([a({ reflect: !0 })], c.prototype, "variant", void 0), t([a({ reflect: !0 })], c.prototype, "padding", void 0), t([a({
|
|
46
|
+
type: Boolean,
|
|
47
|
+
reflect: !0
|
|
48
|
+
})], c.prototype, "interactive", void 0), t([a({ reflect: !0 })], c.prototype, "accent", void 0), t([o()], c.prototype, "_hasHeader", void 0), t([o()], c.prototype, "_hasFooter", void 0), c = t([i("reke-card")], c);
|
|
49
|
+
//#endregion
|
|
50
|
+
export { c as RekeCard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reke-card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-card/reke-card.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"reke-card.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-card/reke-card.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAgJlB,CAAC"}
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
|
|
2
|
+
import { css as t } from "lit";
|
|
3
|
+
//#region src/components/reke-card/reke-card.styles.ts
|
|
4
|
+
var n = [e, t`
|
|
5
|
+
:host {
|
|
6
|
+
display: block;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.card {
|
|
10
|
+
border-radius: var(--reke-radius, 4px);
|
|
11
|
+
font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
|
|
12
|
+
overflow: hidden;
|
|
13
|
+
transition:
|
|
14
|
+
border-color var(--reke-transition-normal, 0.2s ease),
|
|
15
|
+
box-shadow var(--reke-transition-normal, 0.2s ease),
|
|
16
|
+
transform var(--reke-transition-normal, 0.2s ease);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* === Variants === */
|
|
20
|
+
|
|
21
|
+
.card--default {
|
|
22
|
+
background: var(--reke-color-surface, #1A1A1A);
|
|
23
|
+
border: 1px solid var(--reke-color-border, #252525);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.card--elevated {
|
|
27
|
+
background: var(--reke-color-surface, #1A1A1A);
|
|
28
|
+
border: 1px solid var(--reke-color-border, #252525);
|
|
29
|
+
box-shadow: var(--reke-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3));
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.card--outlined {
|
|
33
|
+
background: transparent;
|
|
34
|
+
border: 1px solid var(--reke-color-border, #252525);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* === Interactive hover === */
|
|
38
|
+
|
|
39
|
+
.card--interactive {
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.card--interactive:hover {
|
|
44
|
+
transform: translateY(-2px);
|
|
45
|
+
box-shadow: var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2));
|
|
46
|
+
border-color: var(--reke-color-border-hover, #3A3A3A);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.card--interactive:active {
|
|
50
|
+
transform: translateY(0);
|
|
51
|
+
box-shadow: var(--reke-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* === Accent hover borders === */
|
|
55
|
+
|
|
56
|
+
.card--interactive.card--accent-primary:hover {
|
|
57
|
+
border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 50%, transparent);
|
|
58
|
+
box-shadow:
|
|
59
|
+
var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4)),
|
|
60
|
+
var(--reke-shadow-glow-primary, 0 0 20px rgba(34, 197, 94, 0.15));
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.card--interactive.card--accent-secondary:hover {
|
|
64
|
+
border-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 50%, transparent);
|
|
65
|
+
box-shadow:
|
|
66
|
+
var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4)),
|
|
67
|
+
var(--reke-shadow-glow-secondary, 0 0 20px rgba(59, 130, 246, 0.15));
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.card--interactive.card--accent-danger:hover {
|
|
71
|
+
border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 50%, transparent);
|
|
72
|
+
box-shadow:
|
|
73
|
+
var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4)),
|
|
74
|
+
var(--reke-shadow-glow-danger, 0 0 20px rgba(239, 68, 68, 0.15));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.card--interactive.card--accent-warning:hover {
|
|
78
|
+
border-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 50%, transparent);
|
|
79
|
+
box-shadow:
|
|
80
|
+
var(--reke-shadow-lift, 0 8px 32px rgba(0, 0, 0, 0.4)),
|
|
81
|
+
0 0 20px color-mix(in srgb, var(--reke-color-warning, #F59E0B) 15%, transparent);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* === Padding (applied to .card-body) === */
|
|
85
|
+
|
|
86
|
+
.card--padding-none .card-body {
|
|
87
|
+
padding: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.card--padding-sm .card-body {
|
|
91
|
+
padding: 12px;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.card--padding-md .card-body {
|
|
95
|
+
padding: 16px;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.card--padding-lg .card-body {
|
|
99
|
+
padding: 24px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* === Header === */
|
|
103
|
+
|
|
104
|
+
.card-header {
|
|
105
|
+
border-bottom: 1px solid var(--reke-color-border, #252525);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.card--padding-none .card-header {
|
|
109
|
+
padding: 0;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.card--padding-sm .card-header {
|
|
113
|
+
padding: 12px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.card--padding-md .card-header {
|
|
117
|
+
padding: 16px;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.card--padding-lg .card-header {
|
|
121
|
+
padding: 24px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* === Footer === */
|
|
125
|
+
|
|
126
|
+
.card-footer {
|
|
127
|
+
border-top: 1px solid var(--reke-color-border, #252525);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.card--padding-none .card-footer {
|
|
131
|
+
padding: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.card--padding-sm .card-footer {
|
|
135
|
+
padding: 12px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.card--padding-md .card-footer {
|
|
139
|
+
padding: 16px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.card--padding-lg .card-footer {
|
|
143
|
+
padding: 24px;
|
|
144
|
+
}
|
|
145
|
+
`];
|
|
146
|
+
//#endregion
|
|
147
|
+
export { n as styles };
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { RekeElement as e } from "../../shared/base-element.js";
|
|
2
|
+
import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
|
|
3
|
+
import { styles as n } from "./reke-checkbox.styles.js";
|
|
4
|
+
import { html as r, nothing as i } from "lit";
|
|
5
|
+
import { customElement as a, property as o } from "lit/decorators.js";
|
|
6
|
+
//#region src/components/reke-checkbox/reke-checkbox.ts
|
|
7
|
+
var s = class extends e {
|
|
8
|
+
constructor(...e) {
|
|
9
|
+
super(...e), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.label = "";
|
|
10
|
+
}
|
|
11
|
+
static {
|
|
12
|
+
this.styles = n;
|
|
13
|
+
}
|
|
14
|
+
handleClick() {
|
|
15
|
+
this.disabled || (this.checked = !this.checked, this.indeterminate = !1, this.emit("reke-change", { checked: this.checked }));
|
|
16
|
+
}
|
|
17
|
+
handleKeyDown(e) {
|
|
18
|
+
(e.key === " " || e.key === "Enter") && (e.preventDefault(), this.handleClick());
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
let e = this.indeterminate ? "mixed" : String(this.checked);
|
|
22
|
+
return r`
|
|
23
|
+
<div
|
|
24
|
+
part="container"
|
|
25
|
+
class="container"
|
|
26
|
+
role="checkbox"
|
|
27
|
+
tabindex=${this.disabled ? "-1" : "0"}
|
|
28
|
+
aria-checked=${e}
|
|
29
|
+
aria-disabled=${this.disabled}
|
|
30
|
+
@click=${this.handleClick}
|
|
31
|
+
@keydown=${this.handleKeyDown}
|
|
32
|
+
>
|
|
33
|
+
<span part="box" class="box ${this.checked ? "box--checked" : ""} ${this.indeterminate ? "box--indeterminate" : ""}">
|
|
34
|
+
${this.checked ? r`<svg class="checkmark" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
35
|
+
<path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
36
|
+
</svg>` : i}
|
|
37
|
+
${this.indeterminate && !this.checked ? r`<svg class="indeterminate-mark" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
38
|
+
<path d="M3 6H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
|
39
|
+
</svg>` : i}
|
|
40
|
+
</span>
|
|
41
|
+
${this.label ? r`<span part="label" class="label">${this.label}</span>` : i}
|
|
42
|
+
</div>
|
|
43
|
+
`;
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
t([o({
|
|
47
|
+
type: Boolean,
|
|
48
|
+
reflect: !0
|
|
49
|
+
})], s.prototype, "checked", void 0), t([o({
|
|
50
|
+
type: Boolean,
|
|
51
|
+
reflect: !0
|
|
52
|
+
})], s.prototype, "indeterminate", void 0), t([o({
|
|
53
|
+
type: Boolean,
|
|
54
|
+
reflect: !0
|
|
55
|
+
})], s.prototype, "disabled", void 0), t([o()], s.prototype, "label", void 0), s = t([a("reke-checkbox")], s);
|
|
56
|
+
//#endregion
|
|
57
|
+
export { s as RekeCheckbox };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reke-checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-checkbox/reke-checkbox.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"reke-checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-checkbox/reke-checkbox.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BA4ElB,CAAC"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
|
|
2
|
+
import { css as t } from "lit";
|
|
3
|
+
//#region src/components/reke-checkbox/reke-checkbox.styles.ts
|
|
4
|
+
var n = [e, t`
|
|
5
|
+
:host {
|
|
6
|
+
display: inline-flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
gap: 8px;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:host([disabled]) {
|
|
13
|
+
pointer-events: none;
|
|
14
|
+
opacity: 0.5;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.container {
|
|
18
|
+
display: inline-flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
gap: 8px;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
outline: none;
|
|
23
|
+
min-height: 24px; /* WCAG 2.2 — 2.5.8 Target Size Minimum */
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.native-input {
|
|
27
|
+
position: absolute;
|
|
28
|
+
width: 1px;
|
|
29
|
+
height: 1px;
|
|
30
|
+
margin: -1px;
|
|
31
|
+
padding: 0;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
clip: rect(0, 0, 0, 0);
|
|
34
|
+
white-space: nowrap;
|
|
35
|
+
border: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.box {
|
|
39
|
+
display: inline-flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
width: 16px;
|
|
43
|
+
height: 16px;
|
|
44
|
+
min-width: 16px;
|
|
45
|
+
min-height: 16px;
|
|
46
|
+
background-color: var(--reke-color-surface, #1A1A1A);
|
|
47
|
+
border: 1px solid var(--reke-color-border, #252525);
|
|
48
|
+
border-radius: 3px;
|
|
49
|
+
box-sizing: border-box;
|
|
50
|
+
transition: background-color 0.15s ease, border-color 0.15s ease;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.box--checked,
|
|
54
|
+
.box--indeterminate {
|
|
55
|
+
background-color: var(--reke-color-primary, #22C55E);
|
|
56
|
+
border-color: var(--reke-color-primary, #22C55E);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.container:focus-visible .box {
|
|
60
|
+
outline: 2px solid var(--reke-color-primary, #22C55E);
|
|
61
|
+
outline-offset: 2px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.checkmark,
|
|
65
|
+
.indeterminate-mark {
|
|
66
|
+
width: 12px;
|
|
67
|
+
height: 12px;
|
|
68
|
+
color: var(--reke-color-on-primary, #0A0A0B);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.label {
|
|
72
|
+
font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
|
|
73
|
+
font-size: var(--reke-font-size-sm, 13px);
|
|
74
|
+
color: var(--reke-color-text, #E5E5E5);
|
|
75
|
+
user-select: none;
|
|
76
|
+
}
|
|
77
|
+
`];
|
|
78
|
+
//#endregion
|
|
79
|
+
export { n as styles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reke-chip.d.ts","sourceRoot":"","sources":["../../../src/components/reke-chip/reke-chip.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,QAAS,SAAQ,WAAW;IACvC,OAAgB,MAAM,4BAAU;IAEhC,wCAAwC;IAExC,KAAK,EAAE,SAAS,CAAa;IAE7B,wDAAwD;IAExD,MAAM,UAAS;IAEf,kCAAkC;IAElC,WAAW,UAAS;IAGpB,QAAQ,UAAS;IAEjB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAMb,MAAM;
|
|
1
|
+
{"version":3,"file":"reke-chip.d.ts","sourceRoot":"","sources":["../../../src/components/reke-chip/reke-chip.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,QAAS,SAAQ,WAAW;IACvC,OAAgB,MAAM,4BAAU;IAEhC,wCAAwC;IAExC,KAAK,EAAE,SAAS,CAAa;IAE7B,wDAAwD;IAExD,MAAM,UAAS;IAEf,kCAAkC;IAElC,WAAW,UAAS;IAGpB,QAAQ,UAAS;IAEjB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAMb,MAAM;CAmChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { RekeElement as e } from "../../shared/base-element.js";
|
|
2
|
+
import { __decorate as t } from "../../_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js";
|
|
3
|
+
import { styles as n } from "./reke-chip.styles.js";
|
|
4
|
+
import { html as r, nothing as i } from "lit";
|
|
5
|
+
import { customElement as a, property as o } from "lit/decorators.js";
|
|
6
|
+
import { classMap as s } from "lit/directives/class-map.js";
|
|
7
|
+
//#region src/components/reke-chip/reke-chip.ts
|
|
8
|
+
var c = class extends e {
|
|
9
|
+
constructor(...e) {
|
|
10
|
+
super(...e), this.color = "primary", this.active = !1, this.dismissible = !1, this.disabled = !1;
|
|
11
|
+
}
|
|
12
|
+
static {
|
|
13
|
+
this.styles = n;
|
|
14
|
+
}
|
|
15
|
+
_handleClick() {
|
|
16
|
+
this.disabled || this.emit("reke-click");
|
|
17
|
+
}
|
|
18
|
+
_handleDismiss(e) {
|
|
19
|
+
e.stopPropagation(), !this.disabled && this.emit("reke-dismiss");
|
|
20
|
+
}
|
|
21
|
+
render() {
|
|
22
|
+
return r`
|
|
23
|
+
<button
|
|
24
|
+
part="chip"
|
|
25
|
+
class=${s({
|
|
26
|
+
chip: !0,
|
|
27
|
+
[`chip--${this.color}`]: !0,
|
|
28
|
+
"chip--active": this.active
|
|
29
|
+
})}
|
|
30
|
+
type="button"
|
|
31
|
+
?disabled=${this.disabled}
|
|
32
|
+
aria-pressed=${this.active}
|
|
33
|
+
@click=${this._handleClick}
|
|
34
|
+
>
|
|
35
|
+
<slot></slot>
|
|
36
|
+
${this.dismissible ? r`
|
|
37
|
+
<span
|
|
38
|
+
part="dismiss"
|
|
39
|
+
class="chip__dismiss"
|
|
40
|
+
role="button"
|
|
41
|
+
aria-label="Dismiss"
|
|
42
|
+
@click=${this._handleDismiss}
|
|
43
|
+
>
|
|
44
|
+
<svg viewBox="0 0 24 24" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
|
45
|
+
</span>
|
|
46
|
+
` : i}
|
|
47
|
+
</button>
|
|
48
|
+
`;
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
t([o({ reflect: !0 })], c.prototype, "color", void 0), t([o({
|
|
52
|
+
type: Boolean,
|
|
53
|
+
reflect: !0
|
|
54
|
+
})], c.prototype, "active", void 0), t([o({
|
|
55
|
+
type: Boolean,
|
|
56
|
+
reflect: !0
|
|
57
|
+
})], c.prototype, "dismissible", void 0), t([o({
|
|
58
|
+
type: Boolean,
|
|
59
|
+
reflect: !0
|
|
60
|
+
})], c.prototype, "disabled", void 0), c = t([a("reke-chip")], c);
|
|
61
|
+
//#endregion
|
|
62
|
+
export { c as RekeChip };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reke-chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-chip/reke-chip.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"reke-chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-chip/reke-chip.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BA6HlB,CAAC"}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
|
|
2
|
+
import { css as t } from "lit";
|
|
3
|
+
//#region src/components/reke-chip/reke-chip.styles.ts
|
|
4
|
+
var n = [e, t`
|
|
5
|
+
:host {
|
|
6
|
+
display: inline-block;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
:host([disabled]) {
|
|
10
|
+
pointer-events: none;
|
|
11
|
+
opacity: 0.5;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.chip {
|
|
15
|
+
display: inline-flex;
|
|
16
|
+
align-items: center;
|
|
17
|
+
gap: 6px;
|
|
18
|
+
padding: 4px 10px;
|
|
19
|
+
font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
|
|
20
|
+
font-size: var(--reke-font-size-xs, 12px);
|
|
21
|
+
font-weight: var(--reke-font-weight-medium, 500);
|
|
22
|
+
line-height: 1.4;
|
|
23
|
+
border: 1px solid var(--reke-color-border-subtle, #1F1F1F);
|
|
24
|
+
border-radius: var(--reke-radius, 4px);
|
|
25
|
+
background: transparent;
|
|
26
|
+
color: var(--reke-color-text-ghost, #7A7A7A);
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
transition:
|
|
29
|
+
background-color var(--reke-transition-fast, 0.12s ease),
|
|
30
|
+
border-color var(--reke-transition-fast, 0.12s ease),
|
|
31
|
+
color var(--reke-transition-fast, 0.12s ease),
|
|
32
|
+
box-shadow var(--reke-transition-normal, 0.2s ease);
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
white-space: nowrap;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.chip:focus-visible {
|
|
38
|
+
outline: 2px solid var(--reke-color-primary, #22C55E);
|
|
39
|
+
outline-offset: 2px;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.chip:hover:not(:disabled) {
|
|
43
|
+
color: var(--reke-color-text, #E5E5E5);
|
|
44
|
+
border-color: var(--reke-color-border-hover, #3A3A3A);
|
|
45
|
+
background: var(--reke-color-surface-hover, #202020);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* === Active states by color === */
|
|
49
|
+
|
|
50
|
+
.chip--primary.chip--active {
|
|
51
|
+
border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 60%, transparent);
|
|
52
|
+
background: color-mix(in srgb, var(--reke-color-primary, #22C55E) 12%, transparent);
|
|
53
|
+
color: var(--reke-color-primary, #22C55E);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.chip--primary.chip--active:hover:not(:disabled) {
|
|
57
|
+
background: color-mix(in srgb, var(--reke-color-primary, #22C55E) 18%, transparent);
|
|
58
|
+
box-shadow: 0 0 12px color-mix(in srgb, var(--reke-color-primary, #22C55E) 20%, transparent);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.chip--secondary.chip--active {
|
|
62
|
+
border-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 60%, transparent);
|
|
63
|
+
background: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 12%, transparent);
|
|
64
|
+
color: var(--reke-color-secondary, #3B82F6);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.chip--secondary.chip--active:hover:not(:disabled) {
|
|
68
|
+
background: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 18%, transparent);
|
|
69
|
+
box-shadow: 0 0 12px color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 20%, transparent);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.chip--danger.chip--active {
|
|
73
|
+
border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 60%, transparent);
|
|
74
|
+
background: color-mix(in srgb, var(--reke-color-danger, #EF4444) 12%, transparent);
|
|
75
|
+
color: var(--reke-color-danger, #EF4444);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.chip--danger.chip--active:hover:not(:disabled) {
|
|
79
|
+
background: color-mix(in srgb, var(--reke-color-danger, #EF4444) 18%, transparent);
|
|
80
|
+
box-shadow: 0 0 12px color-mix(in srgb, var(--reke-color-danger, #EF4444) 20%, transparent);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.chip--warning.chip--active {
|
|
84
|
+
border-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 60%, transparent);
|
|
85
|
+
background: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 12%, transparent);
|
|
86
|
+
color: var(--reke-color-warning, #F59E0B);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.chip--warning.chip--active:hover:not(:disabled) {
|
|
90
|
+
background: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 18%, transparent);
|
|
91
|
+
box-shadow: 0 0 12px color-mix(in srgb, var(--reke-color-warning, #F59E0B) 20%, transparent);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* === Dismiss button === */
|
|
95
|
+
|
|
96
|
+
.chip__dismiss {
|
|
97
|
+
display: inline-flex;
|
|
98
|
+
align-items: center;
|
|
99
|
+
justify-content: center;
|
|
100
|
+
width: 16px;
|
|
101
|
+
height: 16px;
|
|
102
|
+
border-radius: 2px;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
opacity: 0.6;
|
|
105
|
+
transition: opacity 0.15s ease;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.chip__dismiss:hover {
|
|
109
|
+
opacity: 1;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.chip__dismiss:focus-visible {
|
|
113
|
+
outline: 2px solid var(--reke-color-primary, #22C55E);
|
|
114
|
+
outline-offset: 1px;
|
|
115
|
+
opacity: 1;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.chip__dismiss svg {
|
|
119
|
+
width: 10px;
|
|
120
|
+
height: 10px;
|
|
121
|
+
stroke: currentColor;
|
|
122
|
+
stroke-width: 2.5;
|
|
123
|
+
stroke-linecap: round;
|
|
124
|
+
fill: none;
|
|
125
|
+
}
|
|
126
|
+
`];
|
|
127
|
+
//#endregion
|
|
128
|
+
export { n as styles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reke-date-range.d.ts","sourceRoot":"","sources":["../../../src/components/reke-date-range/reke-date-range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"reke-date-range.d.ts","sourceRoot":"","sources":["../../../src/components/reke-date-range/reke-date-range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,CAAC;AAwEhD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,aAAc,SAAQ,WAAW;IAC5C,OAAgB,MAAM,4BAAU;IAEhC,+DAA+D;IAE/D,IAAI,EAAE,cAAc,CAAW;IAE/B,+CAA+C;IAE/C,KAAK,SAAM;IAEX,+BAA+B;IAE/B,IAAI,SAAM;IAEV,6BAA6B;IAE7B,EAAE,SAAM;IAGR,KAAK,SAAM;IAGX,WAAW,SAAM;IAEjB,2CAA2C;IAE3C,GAAG,SAAM;IAET,2CAA2C;IAE3C,GAAG,SAAM;IAGT,QAAQ,UAAS;IAGjB,KAAK,UAAS;IAEL,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,UAAU,CAAyB;IAEpD,wEAAwE;IAC/D,OAAO,CAAC,eAAe,CAAS;IAEzC,OAAO,CAAC,kBAAkB,CAAmC;IAEpD,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,UAAU,CAahB;IAEF,OAAO,CAAC,WAAW;IAiBnB,mDAAmD;IACnD,OAAO,CAAC,SAAS;IAiBjB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,UAAU;IAgClB,OAAO,CAAC,QAAQ;IA8BhB,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,cAAc;IAmCtB,OAAO,CAAC,eAAe;IAkBvB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,cAAc;IAQb,MAAM;CA8GhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|