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.
Files changed (86) hide show
  1. package/README.md +23 -0
  2. package/cli/install-skills.mjs +169 -0
  3. package/custom-elements.json +472 -128
  4. package/dist/__type-checks__/no-lit-in-public-types.d.ts +2 -0
  5. package/dist/__type-checks__/no-lit-in-public-types.d.ts.map +1 -0
  6. package/dist/_virtual/_@oxc-project_runtime@0.137.0/helpers/esm/decorate.js +9 -0
  7. package/dist/components/reke-alert/reke-alert.d.ts.map +1 -1
  8. package/dist/components/reke-alert/reke-alert.js +45 -0
  9. package/dist/components/reke-alert/reke-alert.styles.d.ts.map +1 -1
  10. package/dist/components/reke-alert/reke-alert.styles.js +103 -0
  11. package/dist/components/reke-badge/reke-badge.d.ts +4 -2
  12. package/dist/components/reke-badge/reke-badge.d.ts.map +1 -1
  13. package/dist/components/reke-badge/reke-badge.js +30 -0
  14. package/dist/components/reke-badge/reke-badge.styles.d.ts.map +1 -1
  15. package/dist/components/reke-badge/reke-badge.styles.js +92 -0
  16. package/dist/components/reke-button/reke-button.d.ts.map +1 -1
  17. package/dist/components/reke-button/reke-button.js +53 -0
  18. package/dist/components/reke-button/reke-button.styles.d.ts.map +1 -1
  19. package/dist/components/reke-button/reke-button.styles.js +226 -0
  20. package/dist/components/reke-card/reke-card.d.ts +7 -0
  21. package/dist/components/reke-card/reke-card.d.ts.map +1 -1
  22. package/dist/components/reke-card/reke-card.js +50 -0
  23. package/dist/components/reke-card/reke-card.styles.d.ts.map +1 -1
  24. package/dist/components/reke-card/reke-card.styles.js +147 -0
  25. package/dist/components/reke-checkbox/reke-checkbox.js +57 -0
  26. package/dist/components/reke-checkbox/reke-checkbox.styles.d.ts.map +1 -1
  27. package/dist/components/reke-checkbox/reke-checkbox.styles.js +79 -0
  28. package/dist/components/reke-chip/reke-chip.d.ts.map +1 -1
  29. package/dist/components/reke-chip/reke-chip.js +62 -0
  30. package/dist/components/reke-chip/reke-chip.styles.d.ts.map +1 -1
  31. package/dist/components/reke-chip/reke-chip.styles.js +128 -0
  32. package/dist/components/reke-date-range/reke-date-range.d.ts.map +1 -1
  33. package/dist/components/reke-date-range/reke-date-range.js +326 -0
  34. package/dist/components/reke-date-range/reke-date-range.styles.d.ts.map +1 -1
  35. package/dist/components/reke-date-range/reke-date-range.styles.js +335 -0
  36. package/dist/components/reke-dialog/reke-dialog.d.ts.map +1 -1
  37. package/dist/components/reke-dialog/reke-dialog.js +77 -0
  38. package/dist/components/reke-dialog/reke-dialog.styles.d.ts.map +1 -1
  39. package/dist/components/reke-dialog/reke-dialog.styles.js +132 -0
  40. package/dist/components/reke-file-upload/reke-file-upload.d.ts.map +1 -1
  41. package/dist/components/reke-file-upload/reke-file-upload.js +84 -0
  42. package/dist/components/reke-file-upload/reke-file-upload.styles.js +104 -0
  43. package/dist/components/reke-input/reke-input.js +54 -0
  44. package/dist/components/reke-input/reke-input.styles.d.ts.map +1 -1
  45. package/dist/components/reke-input/reke-input.styles.js +78 -0
  46. package/dist/components/reke-select/reke-select.d.ts.map +1 -1
  47. package/dist/components/reke-select/reke-select.js +89 -0
  48. package/dist/components/reke-select/reke-select.styles.d.ts.map +1 -1
  49. package/dist/components/reke-select/reke-select.styles.js +120 -0
  50. package/dist/components/reke-table/reke-table.d.ts +144 -13
  51. package/dist/components/reke-table/reke-table.d.ts.map +1 -1
  52. package/dist/components/reke-table/reke-table.js +291 -0
  53. package/dist/components/reke-table/reke-table.styles.d.ts.map +1 -1
  54. package/dist/components/reke-table/reke-table.styles.js +265 -0
  55. package/dist/components/reke-textarea/reke-textarea.js +54 -0
  56. package/dist/components/reke-textarea/reke-textarea.styles.js +73 -0
  57. package/dist/components/reke-toast/reke-toast.d.ts.map +1 -1
  58. package/dist/components/reke-toast/reke-toast.js +74 -0
  59. package/dist/components/reke-toast/reke-toast.styles.d.ts.map +1 -1
  60. package/dist/components/reke-toast/reke-toast.styles.js +183 -0
  61. package/dist/components/reke-toggle/reke-toggle.js +50 -0
  62. package/dist/components/reke-toggle/reke-toggle.styles.js +68 -0
  63. package/dist/components/reke-tooltip/reke-tooltip.js +51 -0
  64. package/dist/components/reke-tooltip/reke-tooltip.styles.js +64 -0
  65. package/dist/index.d.ts +23 -23
  66. package/dist/index.d.ts.map +1 -1
  67. package/dist/index.js +18 -0
  68. package/dist/node_modules/lit/directives/ref.js +1 -0
  69. package/dist/node_modules/lit-html/async-directive.js +55 -0
  70. package/dist/node_modules/lit-html/directive-helpers.js +5 -0
  71. package/dist/node_modules/lit-html/directive.js +28 -0
  72. package/dist/node_modules/lit-html/directives/ref.js +30 -0
  73. package/dist/node_modules/lit-html/lit-html.js +234 -0
  74. package/dist/react-bridge/table.d.ts +58 -0
  75. package/dist/react-bridge/table.d.ts.map +1 -0
  76. package/dist/react-bridge/table.js +115 -0
  77. package/dist/react.d.ts +12 -26
  78. package/dist/react.d.ts.map +1 -1
  79. package/dist/react.js +111 -132
  80. package/dist/shared/base-element.js +14 -0
  81. package/dist/shared/tailwind-styles.js +6 -0
  82. package/dist/shared/tailwind.js +4 -0
  83. package/dist/tokens/reke-tokens.css +70 -0
  84. package/package.json +43 -23
  85. package/dist/reke-chip-DexKxhxn.js +0 -3358
  86. 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,2BA6FlB,CAAC"}
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,2BA2ElB,CAAC"}
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;CAiChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
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,2BA8FlB,CAAC"}
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;AA0DhD;;;;;;;;;;;;;;;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"}
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"}