@transcodes/ui-components 0.3.4 → 0.3.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 (110) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/dist/controllers/animation.controller.d.ts +48 -0
  3. package/dist/controllers/animation.controller.d.ts.map +1 -0
  4. package/dist/controllers/base.controller.d.ts +14 -0
  5. package/dist/controllers/base.controller.d.ts.map +1 -0
  6. package/dist/controllers/history.controller.d.ts +34 -0
  7. package/dist/controllers/history.controller.d.ts.map +1 -0
  8. package/dist/controllers/index.d.ts +0 -2
  9. package/dist/controllers/index.d.ts.map +1 -0
  10. package/dist/controllers/index.js +10 -12
  11. package/dist/controllers/loading.controller.d.ts +36 -0
  12. package/dist/controllers/loading.controller.d.ts.map +1 -0
  13. package/dist/controllers/match-media.controller.d.ts +32 -0
  14. package/dist/controllers/match-media.controller.d.ts.map +1 -0
  15. package/dist/controllers/message-bus.controller.d.ts +45 -0
  16. package/dist/controllers/message-bus.controller.d.ts.map +1 -0
  17. package/dist/controllers/storage.controller.d.ts +40 -0
  18. package/dist/controllers/storage.controller.d.ts.map +1 -0
  19. package/dist/index.d.ts +4 -295
  20. package/dist/index.d.ts.map +1 -0
  21. package/dist/index.js +48 -64
  22. package/dist/primitives/index.d.ts +1 -0
  23. package/dist/primitives/index.d.ts.map +1 -0
  24. package/dist/primitives/index.js +18 -16
  25. package/dist/primitives/tc-box.d.ts +19 -0
  26. package/dist/primitives/tc-box.d.ts.map +1 -0
  27. package/dist/primitives/tc-box.js +4 -4
  28. package/dist/primitives/tc-button.d.ts +25 -0
  29. package/dist/primitives/tc-button.d.ts.map +1 -0
  30. package/dist/primitives/tc-button.js +21 -20
  31. package/dist/primitives/tc-callout.d.ts +22 -0
  32. package/dist/primitives/tc-callout.d.ts.map +1 -0
  33. package/dist/primitives/tc-callout.js +5 -4
  34. package/dist/primitives/tc-card.d.ts +20 -0
  35. package/dist/primitives/tc-card.d.ts.map +1 -0
  36. package/dist/primitives/tc-card.js +11 -10
  37. package/dist/primitives/tc-chip.d.ts +19 -0
  38. package/dist/primitives/tc-chip.d.ts.map +1 -0
  39. package/dist/primitives/tc-chip.js +18 -16
  40. package/dist/primitives/tc-container.d.ts +20 -0
  41. package/dist/primitives/tc-container.d.ts.map +1 -0
  42. package/dist/primitives/tc-container.js +12 -10
  43. package/dist/primitives/tc-divider.d.ts +22 -0
  44. package/dist/primitives/tc-divider.d.ts.map +1 -0
  45. package/dist/primitives/tc-divider.js +4 -3
  46. package/dist/primitives/tc-error-message.d.ts +23 -0
  47. package/dist/primitives/tc-error-message.d.ts.map +1 -0
  48. package/dist/primitives/tc-error-message.js +13 -9
  49. package/dist/primitives/tc-form-header.d.ts +25 -0
  50. package/dist/primitives/tc-form-header.d.ts.map +1 -0
  51. package/dist/primitives/tc-form-header.js +9 -7
  52. package/dist/primitives/tc-icon.d.ts +20 -0
  53. package/dist/primitives/tc-icon.d.ts.map +1 -0
  54. package/dist/primitives/tc-icon.js +3 -3
  55. package/dist/primitives/tc-input-with-chip.d.ts +38 -0
  56. package/dist/primitives/tc-input-with-chip.d.ts.map +1 -0
  57. package/dist/primitives/tc-input-with-chip.js +12 -8
  58. package/dist/primitives/tc-input.d.ts +45 -0
  59. package/dist/primitives/tc-input.d.ts.map +1 -0
  60. package/dist/primitives/tc-input.js +11 -9
  61. package/dist/primitives/tc-item-button.d.ts +30 -0
  62. package/dist/primitives/tc-item-button.d.ts.map +1 -0
  63. package/dist/primitives/tc-item-button.js +18 -17
  64. package/dist/primitives/tc-item.d.ts +25 -0
  65. package/dist/primitives/tc-item.d.ts.map +1 -0
  66. package/dist/primitives/tc-item.js +13 -12
  67. package/dist/primitives/tc-otp-input.d.ts +38 -0
  68. package/dist/primitives/tc-otp-input.d.ts.map +1 -0
  69. package/dist/primitives/tc-otp-input.js +6 -4
  70. package/dist/primitives/tc-page-decoration.d.ts +19 -0
  71. package/dist/primitives/tc-page-decoration.d.ts.map +1 -0
  72. package/dist/{widgets → primitives}/tc-page-decoration.js +8 -8
  73. package/dist/primitives/tc-section.d.ts +19 -0
  74. package/dist/primitives/tc-section.d.ts.map +1 -0
  75. package/dist/primitives/tc-section.js +15 -13
  76. package/dist/primitives/tc-spinner.d.ts +20 -0
  77. package/dist/primitives/tc-spinner.d.ts.map +1 -0
  78. package/dist/primitives/tc-spinner.js +17 -17
  79. package/dist/primitives/tc-symbol.d.ts +20 -0
  80. package/dist/primitives/tc-symbol.d.ts.map +1 -0
  81. package/dist/primitives/tc-symbol.js +15 -13
  82. package/dist/primitives/tc-text.d.ts +31 -0
  83. package/dist/primitives/tc-text.d.ts.map +1 -0
  84. package/dist/primitives/tc-text.js +3 -3
  85. package/dist/primitives/tc-toast.d.ts +34 -0
  86. package/dist/primitives/tc-toast.d.ts.map +1 -0
  87. package/dist/primitives/tc-toast.js +3 -3
  88. package/dist/screens/index.d.ts.map +1 -0
  89. package/dist/screens/tc-error-screen.d.ts +32 -0
  90. package/dist/screens/tc-error-screen.d.ts.map +1 -0
  91. package/dist/screens/tc-error-screen.js +84 -29
  92. package/dist/screens/tc-loading-screen.d.ts +23 -0
  93. package/dist/screens/tc-loading-screen.d.ts.map +1 -0
  94. package/dist/screens/tc-loading-screen.js +16 -11
  95. package/dist/screens/tc-success-screen.d.ts +31 -0
  96. package/dist/screens/tc-success-screen.d.ts.map +1 -0
  97. package/dist/screens/tc-success-screen.js +19 -13
  98. package/dist/styles/shared.d.ts +20 -0
  99. package/dist/styles/shared.d.ts.map +1 -0
  100. package/package.json +13 -13
  101. package/dist/controllers/form-validation.controller.js +0 -49
  102. package/dist/widgets/index.d.ts +0 -9
  103. package/dist/widgets/index.js +0 -18
  104. package/dist/widgets/tc-authenticator-card.js +0 -213
  105. package/dist/widgets/tc-floating-button.js +0 -132
  106. package/dist/widgets/tc-iframe-modal.js +0 -263
  107. package/dist/widgets/tc-installation-banner.js +0 -234
  108. package/dist/widgets/tc-ios-installation-guide.js +0 -240
  109. package/dist/widgets/tc-notification-modal.js +0 -230
  110. package/dist/widgets/tc-offline-modal.js +0 -202
@@ -0,0 +1,32 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * A full-screen error state with animated icon, message, and retry action.
4
+ *
5
+ * @fires tc-retry - Fired when the retry button is clicked
6
+ * @csspart screen - The screen container
7
+ * @csspart content - The content wrapper
8
+ * @csspart icon - The error icon
9
+ * @csspart title - The error title
10
+ * @csspart message - The error message
11
+ * @csspart action - The action button container
12
+ */
13
+ export declare class TcErrorScreen extends LitElement {
14
+ title: string;
15
+ message: string;
16
+ retryLabel: string;
17
+ showRetry: boolean;
18
+ autoAnimate: boolean;
19
+ private isAnimated;
20
+ private animation;
21
+ static styles: import('lit').CSSResult;
22
+ connectedCallback(): void;
23
+ playAnimation(): Promise<void>;
24
+ private handleRetry;
25
+ render(): import('lit').TemplateResult<1>;
26
+ }
27
+ declare global {
28
+ interface HTMLElementTagNameMap {
29
+ 'tc-error-screen': TcErrorScreen;
30
+ }
31
+ }
32
+ //# sourceMappingURL=tc-error-screen.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tc-error-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-error-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,UAAU;IACf,KAAK,SAA0B;IAC/B,OAAO,SACiB;IACE,UAAU,SAClD;IACwC,SAAS,UAAQ;IACf,WAAW,UAAQ;IAElE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAmFpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,WAAW;IASV,MAAM;CAkChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
@@ -1,13 +1,30 @@
1
- import { LitElement as m, html as p, css as h } from "lit";
2
- import { property as s, customElement as g } from "lit/decorators.js";
3
- var d = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (l, i, a, n) => {
4
- for (var t = n > 1 ? void 0 : n ? y(i, a) : i, c = l.length - 1, o; c >= 0; c--)
5
- (o = l[c]) && (t = (n ? o(i, a, t) : o(t)) || t);
6
- return n && t && d(i, a, t), t;
1
+ import { css as p, LitElement as d, html as m } from "lit";
2
+ import { property as i, state as h, customElement as y } from "lit/decorators.js";
3
+ import { AnimationController as u } from "../controllers/animation.controller.js";
4
+ import "../primitives/tc-icon.js";
5
+ import "../primitives/tc-text.js";
6
+ import "../primitives/tc-button.js";
7
+ import "../primitives/tc-container.js";
8
+ import "../primitives/tc-section.js";
9
+ var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (a, n, o, s) => {
10
+ for (var e = s > 1 ? void 0 : s ? f(n, o) : n, c = a.length - 1, l; c >= 0; c--)
11
+ (l = a[c]) && (e = (s ? l(n, o, e) : l(e)) || e);
12
+ return s && e && g(n, o, e), e;
7
13
  };
8
- let e = class extends m {
14
+ let t = class extends d {
9
15
  constructor() {
10
- super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0;
16
+ super(...arguments), this.title = "Something went wrong", this.message = "An unexpected error occurred. Please try again.", this.retryLabel = "Try Again", this.showRetry = !0, this.autoAnimate = !0, this.isAnimated = !1, this.animation = new u(this, {
17
+ showDuration: 600,
18
+ hideDuration: 300
19
+ });
20
+ }
21
+ connectedCallback() {
22
+ super.connectedCallback(), this.autoAnimate && requestAnimationFrame(() => {
23
+ this.playAnimation();
24
+ });
25
+ }
26
+ async playAnimation() {
27
+ await this.animation.show(), this.isAnimated = !0;
11
28
  }
12
29
  handleRetry() {
13
30
  this.dispatchEvent(
@@ -18,14 +35,15 @@ let e = class extends m {
18
35
  );
19
36
  }
20
37
  render() {
21
- return p`
38
+ const a = this.isAnimated ? "animated" : "";
39
+ return m`
22
40
  <div part="screen" class="screen">
23
41
  <tc-container>
24
42
  <div part="content" class="content">
25
- <div part="icon" class="icon-container">
26
- <tc-icon name="alert-circle" size="2rem"></tc-icon>
43
+ <div part="icon" class="icon-container ${a}">
44
+ <tc-icon name="alert-circle" size="var(--size-icon-xl)"></tc-icon>
27
45
  </div>
28
- <tc-section gap="var(--space-sm)">
46
+ <tc-section gap="var(--space-sm)" class="text-content ${a}">
29
47
  <tc-text part="title" tag="h1" size="xl" weight="600" class="title">
30
48
  ${this.title}
31
49
  </tc-text>
@@ -33,8 +51,8 @@ let e = class extends m {
33
51
  ${this.message}
34
52
  </tc-text>
35
53
  </tc-section>
36
- ${this.showRetry ? p`
37
- <div part="action" class="action">
54
+ ${this.showRetry ? m`
55
+ <div part="action" class="action ${a}">
38
56
  <tc-button variant="primary" @tc-click=${this.handleRetry}>
39
57
  ${this.retryLabel}
40
58
  </tc-button>
@@ -46,12 +64,13 @@ let e = class extends m {
46
64
  `;
47
65
  }
48
66
  };
49
- e.styles = h`
67
+ t.styles = p`
50
68
  :host {
51
69
  display: flex;
52
70
  align-items: center;
53
71
  justify-content: center;
54
72
  width: 100%;
73
+ height: 100%;
55
74
  min-height: inherit;
56
75
  }
57
76
 
@@ -60,6 +79,7 @@ e.styles = h`
60
79
  align-items: center;
61
80
  justify-content: center;
62
81
  width: 100%;
82
+ height: 100%;
63
83
  min-height: inherit;
64
84
  padding: var(--space-lg);
65
85
  box-sizing: border-box;
@@ -79,11 +99,19 @@ e.styles = h`
79
99
  display: flex;
80
100
  align-items: center;
81
101
  justify-content: center;
82
- width: 4rem;
83
- height: 4rem;
102
+ padding: var(--space-md);
84
103
  background: var(--error-bg);
85
104
  border-radius: var(--radius-full);
86
105
  color: var(--error-base);
106
+ transform: scale(0);
107
+ opacity: 0;
108
+ transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
109
+ opacity 0.3s ease;
110
+ }
111
+
112
+ .icon-container.animated {
113
+ transform: scale(1);
114
+ opacity: 1;
87
115
  }
88
116
 
89
117
  .title {
@@ -94,26 +122,53 @@ e.styles = h`
94
122
  color: var(--ink-medium);
95
123
  }
96
124
 
125
+ .text-content {
126
+ opacity: 0;
127
+ transform: translateY(var(--offset-slide-up-md));
128
+ transition: opacity 0.4s ease, transform 0.4s ease;
129
+ transition-delay: 0.4s;
130
+ }
131
+
132
+ .text-content.animated {
133
+ opacity: 1;
134
+ transform: translateY(0);
135
+ }
136
+
97
137
  .action {
98
138
  width: 100%;
99
139
  margin-top: var(--space-md);
140
+ opacity: 0;
141
+ transform: translateY(var(--offset-slide-up-md));
142
+ transition: opacity 0.4s ease, transform 0.4s ease;
143
+ transition-delay: 0.6s;
144
+ }
145
+
146
+ .action.animated {
147
+ opacity: 1;
148
+ transform: translateY(0);
100
149
  }
101
150
  `;
102
151
  r([
103
- s({ type: String })
104
- ], e.prototype, "title", 2);
152
+ i({ type: String })
153
+ ], t.prototype, "title", 2);
154
+ r([
155
+ i({ type: String })
156
+ ], t.prototype, "message", 2);
157
+ r([
158
+ i({ type: String, attribute: "retry-label" })
159
+ ], t.prototype, "retryLabel", 2);
105
160
  r([
106
- s({ type: String })
107
- ], e.prototype, "message", 2);
161
+ i({ type: Boolean, attribute: "show-retry" })
162
+ ], t.prototype, "showRetry", 2);
108
163
  r([
109
- s({ type: String, attribute: "retry-label" })
110
- ], e.prototype, "retryLabel", 2);
164
+ i({ type: Boolean, attribute: "auto-animate" })
165
+ ], t.prototype, "autoAnimate", 2);
111
166
  r([
112
- s({ type: Boolean, attribute: "show-retry" })
113
- ], e.prototype, "showRetry", 2);
114
- e = r([
115
- g("tc-error-screen")
116
- ], e);
167
+ h()
168
+ ], t.prototype, "isAnimated", 2);
169
+ t = r([
170
+ y("tc-error-screen")
171
+ ], t);
117
172
  export {
118
- e as TcErrorScreen
173
+ t as TcErrorScreen
119
174
  };
@@ -0,0 +1,23 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * A full-screen loading state with spinner and optional message.
4
+ *
5
+ * @csspart screen - The screen container
6
+ * @csspart content - The content wrapper
7
+ * @csspart spinner - The spinner element
8
+ * @csspart message - The message text
9
+ */
10
+ export declare class TcLoadingScreen extends LitElement {
11
+ message: string;
12
+ spinnerSize: 'sm' | 'md' | 'lg' | 'auto';
13
+ private loading;
14
+ static styles: import('lit').CSSResult;
15
+ connectedCallback(): void;
16
+ render(): import('lit').TemplateResult<1>;
17
+ }
18
+ declare global {
19
+ interface HTMLElementTagNameMap {
20
+ 'tc-loading-screen': TcLoadingScreen;
21
+ }
22
+ }
23
+ //# sourceMappingURL=tc-loading-screen.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tc-loading-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-loading-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;GAOG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,OAAO,SAAM;IACc,WAAW,EAC9D,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,MAAM,CAAQ;IAElB,OAAO,CAAC,OAAO,CAA+B;IAE9C,OAAgB,MAAM,0BAkCpB;IAEO,iBAAiB;IAKjB,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
@@ -1,14 +1,17 @@
1
- import { LitElement as m, html as p, css as g } from "lit";
2
- import { property as l, customElement as d } from "lit/decorators.js";
3
- import { LoadingController as h } from "../controllers/loading.controller.js";
4
- var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, r, s, n) => {
5
- for (var e = n > 1 ? void 0 : n ? u(r, s) : r, i = o.length - 1, a; i >= 0; i--)
6
- (a = o[i]) && (e = (n ? a(r, s, e) : a(e)) || e);
7
- return n && e && f(r, s, e), e;
1
+ import { css as m, LitElement as g, html as p } from "lit";
2
+ import { property as l, customElement as h } from "lit/decorators.js";
3
+ import { LoadingController as d } from "../controllers/loading.controller.js";
4
+ import "../primitives/tc-spinner.js";
5
+ import "../primitives/tc-text.js";
6
+ import "../primitives/tc-container.js";
7
+ var f = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (o, r, n, i) => {
8
+ for (var e = i > 1 ? void 0 : i ? u(r, n) : r, s = o.length - 1, a; s >= 0; s--)
9
+ (a = o[s]) && (e = (i ? a(r, n, e) : a(e)) || e);
10
+ return i && e && f(r, n, e), e;
8
11
  };
9
- let t = class extends m {
12
+ let t = class extends g {
10
13
  constructor() {
11
- super(...arguments), this.message = "", this.spinnerSize = "3rem", this.loading = new h(this);
14
+ super(...arguments), this.message = "", this.spinnerSize = "md", this.loading = new d(this);
12
15
  }
13
16
  connectedCallback() {
14
17
  super.connectedCallback(), this.loading.start();
@@ -30,12 +33,13 @@ let t = class extends m {
30
33
  `;
31
34
  }
32
35
  };
33
- t.styles = g`
36
+ t.styles = m`
34
37
  :host {
35
38
  display: flex;
36
39
  align-items: center;
37
40
  justify-content: center;
38
41
  width: 100%;
42
+ height: 100%;
39
43
  min-height: inherit;
40
44
  }
41
45
 
@@ -44,6 +48,7 @@ t.styles = g`
44
48
  align-items: center;
45
49
  justify-content: center;
46
50
  width: 100%;
51
+ height: 100%;
47
52
  min-height: inherit;
48
53
  padding: var(--space-lg);
49
54
  box-sizing: border-box;
@@ -70,7 +75,7 @@ c([
70
75
  l({ type: String, attribute: "spinner-size" })
71
76
  ], t.prototype, "spinnerSize", 2);
72
77
  t = c([
73
- d("tc-loading-screen")
78
+ h("tc-loading-screen")
74
79
  ], t);
75
80
  export {
76
81
  t as TcLoadingScreen
@@ -0,0 +1,31 @@
1
+ import { LitElement } from 'lit';
2
+ /**
3
+ * A full-screen success state with animated checkmark and message.
4
+ *
5
+ * @fires tc-action - Fired when the action button is clicked
6
+ * @csspart screen - The screen container
7
+ * @csspart content - The content wrapper
8
+ * @csspart icon - The success icon container
9
+ * @csspart title - The success title
10
+ * @csspart message - The success message
11
+ * @csspart action - The action button container
12
+ */
13
+ export declare class TcSuccessScreen extends LitElement {
14
+ title: string;
15
+ message: string;
16
+ actionLabel: string;
17
+ autoAnimate: boolean;
18
+ private isAnimated;
19
+ private animation;
20
+ static styles: import('lit').CSSResult;
21
+ connectedCallback(): void;
22
+ playAnimation(): Promise<void>;
23
+ private handleAction;
24
+ render(): import('lit').TemplateResult<1>;
25
+ }
26
+ declare global {
27
+ interface HTMLElementTagNameMap {
28
+ 'tc-success-screen': TcSuccessScreen;
29
+ }
30
+ }
31
+ //# sourceMappingURL=tc-success-screen.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tc-success-screen.d.ts","sourceRoot":"","sources":["../../src/screens/tc-success-screen.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAE,MAAM,KAAK,CAAC;AAG5C,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,6BAA6B,CAAC;AAErC;;;;;;;;;;GAUG;AACH,qBACa,eAAgB,SAAQ,UAAU;IACjB,KAAK,SAAc;IACnB,OAAO,SACS;IACW,WAAW,SAAM;IAChB,WAAW,UAAQ;IAElE,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,SAAS,CAGd;IAEH,OAAgB,MAAM,0BAoGpB;IAEO,iBAAiB;IASpB,aAAa;IAKnB,OAAO,CAAC,YAAY;IASX,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
@@ -1,14 +1,19 @@
1
- import { LitElement as p, html as m, css as d } from "lit";
1
+ import { css as p, LitElement as d, html as m } from "lit";
2
2
  import { property as r, state as h, customElement as u } from "lit/decorators.js";
3
- import { AnimationController as y } from "../controllers/animation.controller.js";
4
- var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (a, s, o, n) => {
3
+ import { AnimationController as f } from "../controllers/animation.controller.js";
4
+ import "../primitives/tc-icon.js";
5
+ import "../primitives/tc-text.js";
6
+ import "../primitives/tc-button.js";
7
+ import "../primitives/tc-container.js";
8
+ import "../primitives/tc-section.js";
9
+ var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (a, s, o, n) => {
5
10
  for (var e = n > 1 ? void 0 : n ? g(s, o) : s, c = a.length - 1, l; c >= 0; c--)
6
11
  (l = a[c]) && (e = (n ? l(s, o, e) : l(e)) || e);
7
- return n && e && f(s, o, e), e;
12
+ return n && e && y(s, o, e), e;
8
13
  };
9
- let t = class extends p {
14
+ let t = class extends d {
10
15
  constructor() {
11
- super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new y(this, {
16
+ super(...arguments), this.title = "Success!", this.message = "Your action was completed successfully.", this.actionLabel = "", this.autoAnimate = !0, this.isAnimated = !1, this.animation = new f(this, {
12
17
  showDuration: 600,
13
18
  hideDuration: 300
14
19
  });
@@ -69,12 +74,13 @@ let t = class extends p {
69
74
  `;
70
75
  }
71
76
  };
72
- t.styles = d`
77
+ t.styles = p`
73
78
  :host {
74
79
  display: flex;
75
80
  align-items: center;
76
81
  justify-content: center;
77
82
  width: 100%;
83
+ height: 100%;
78
84
  min-height: inherit;
79
85
  }
80
86
 
@@ -83,6 +89,7 @@ t.styles = d`
83
89
  align-items: center;
84
90
  justify-content: center;
85
91
  width: 100%;
92
+ height: 100%;
86
93
  min-height: inherit;
87
94
  padding: var(--space-lg);
88
95
  box-sizing: border-box;
@@ -102,8 +109,7 @@ t.styles = d`
102
109
  display: flex;
103
110
  align-items: center;
104
111
  justify-content: center;
105
- width: 5rem;
106
- height: 5rem;
112
+ padding: var(--space-md);
107
113
  background: var(--alpha-success10);
108
114
  border-radius: var(--radius-full);
109
115
  color: var(--accent-success);
@@ -119,8 +125,8 @@ t.styles = d`
119
125
  }
120
126
 
121
127
  .checkmark {
122
- width: 2.5rem;
123
- height: 2.5rem;
128
+ width: var(--size-icon-xl);
129
+ height: var(--size-icon-xl);
124
130
  stroke-dasharray: 50;
125
131
  stroke-dashoffset: 50;
126
132
  }
@@ -145,7 +151,7 @@ t.styles = d`
145
151
 
146
152
  .text-content {
147
153
  opacity: 0;
148
- transform: translateY(10px);
154
+ transform: translateY(var(--offset-slide-up-md));
149
155
  transition: opacity 0.4s ease, transform 0.4s ease;
150
156
  transition-delay: 0.4s;
151
157
  }
@@ -159,7 +165,7 @@ t.styles = d`
159
165
  width: 100%;
160
166
  margin-top: var(--space-md);
161
167
  opacity: 0;
162
- transform: translateY(10px);
168
+ transform: translateY(var(--offset-slide-up-md));
163
169
  transition: opacity 0.4s ease, transform 0.4s ease;
164
170
  transition-delay: 0.6s;
165
171
  }
@@ -0,0 +1,20 @@
1
+ import { CSSResult } from 'lit';
2
+ /**
3
+ * Design-tokens component styles as Lit CSSResult
4
+ * Use this in your component's static styles:
5
+ *
6
+ * @example
7
+ * ```ts
8
+ * import { sharedStyles } from '../styles/shared.js';
9
+ *
10
+ * @customElement('my-component')
11
+ * export class MyComponent extends LitElement {
12
+ * static override styles = [sharedStyles, css`
13
+ * // component-specific styles
14
+ * `];
15
+ * }
16
+ * ```
17
+ */
18
+ export declare const sharedStyles: CSSResult;
19
+ export default sharedStyles;
20
+ //# sourceMappingURL=shared.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/styles/shared.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,SAAS,EAAa,MAAM,KAAK,CAAC;AAEhD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY,EAAE,SAAsC,CAAC;AAElE,eAAe,YAAY,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transcodes/ui-components",
3
- "version": "0.3.4",
3
+ "version": "0.3.6",
4
4
  "private": false,
5
5
  "description": "Lit 3.x component library with Reactive Controllers",
6
6
  "keywords": [
@@ -32,7 +32,9 @@
32
32
  "module": "./dist/index.js",
33
33
  "types": "./dist/index.d.ts",
34
34
  "sideEffects": [
35
- "dist/**/*.js"
35
+ "dist/**/*.js",
36
+ "src/**/*.ts",
37
+ "src/**/*.js"
36
38
  ],
37
39
  "exports": {
38
40
  ".": {
@@ -43,10 +45,6 @@
43
45
  "types": "./dist/primitives/index.d.ts",
44
46
  "import": "./dist/primitives/index.js"
45
47
  },
46
- "./widgets": {
47
- "types": "./dist/widgets/index.d.ts",
48
- "import": "./dist/widgets/index.js"
49
- },
50
48
  "./screens": {
51
49
  "types": "./dist/screens/index.d.ts",
52
50
  "import": "./dist/screens/index.js"
@@ -64,7 +62,9 @@
64
62
  ],
65
63
  "scripts": {
66
64
  "build": "tsc && vite build",
65
+ "prebuild-storybook": "cd ../design-tokens && bun run build && cd ../ui-components && cp -r ../design-tokens/build .storybook/design-tokens",
67
66
  "build-storybook": "storybook build",
67
+ "predev": "cd ../design-tokens && bun run build && cd ../ui-components && cp -r ../design-tokens/build .storybook/design-tokens",
68
68
  "clean": "rm -rf dist",
69
69
  "dev": "storybook dev -p 6006",
70
70
  "preview": "vite preview",
@@ -74,16 +74,16 @@
74
74
  "lit": "^3.0.0"
75
75
  },
76
76
  "dependencies": {
77
- "@transcodes/design-tokens": "^0.3.4"
77
+ "@transcodes/design-tokens": "^0.3.6"
78
78
  },
79
79
  "devDependencies": {
80
- "@storybook/addon-a11y": "^10.1.5",
81
- "@storybook/addon-docs": "^10.1.5",
82
- "@storybook/addon-links": "^10.1.5",
83
- "@storybook/web-components": "^10.1.5",
84
- "@storybook/web-components-vite": "^10.1.5",
80
+ "@storybook/addon-a11y": "^10.1.9",
81
+ "@storybook/addon-docs": "^10.1.9",
82
+ "@storybook/addon-links": "^10.1.9",
83
+ "@storybook/web-components": "^10.1.9",
84
+ "@storybook/web-components-vite": "^10.1.9",
85
85
  "lit": "^3.3.1",
86
- "storybook": "^10.1.5",
86
+ "storybook": "^10.1.9",
87
87
  "typescript": "^5.9.3",
88
88
  "vite": "^7.2.7",
89
89
  "vite-plugin-dts": "^4.5.4"
@@ -1,49 +0,0 @@
1
- import { BaseController as o } from "./base.controller.js";
2
- class i extends o {
3
- constructor() {
4
- super(...arguments), this.errors = /* @__PURE__ */ new Map();
5
- }
6
- get isValid() {
7
- return this.errors.size === 0;
8
- }
9
- getError(r) {
10
- return this.errors.get(r);
11
- }
12
- getAllErrors() {
13
- return new Map(this.errors);
14
- }
15
- validate(r, e, s) {
16
- this.clearError(r);
17
- for (const t of s)
18
- if (!this.runRule(e, t))
19
- return this.errors.set(r, t.message), this.host.requestUpdate(), !1;
20
- return !0;
21
- }
22
- clearError(r) {
23
- this.errors.has(r) && (this.errors.delete(r), this.host.requestUpdate());
24
- }
25
- reset() {
26
- this.errors.clear(), this.host.requestUpdate();
27
- }
28
- runRule(r, e) {
29
- switch (e.type) {
30
- case "required":
31
- return r.trim().length > 0;
32
- case "email":
33
- return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r);
34
- case "minLength":
35
- return r.length >= e.value;
36
- case "maxLength":
37
- return r.length <= e.value;
38
- case "pattern":
39
- return e.value.test(r);
40
- case "custom":
41
- return e.validator ? e.validator(r) : !0;
42
- default:
43
- return !0;
44
- }
45
- }
46
- }
47
- export {
48
- i as FormValidationController
49
- };
@@ -1,9 +0,0 @@
1
- export { TcAuthenticatorCard } from './tc-authenticator-card.js';
2
- export { TcFloatingButton } from './tc-floating-button.js';
3
- export { TcIframeModal } from './tc-iframe-modal.js';
4
- export { TcInstallationBanner } from './tc-installation-banner.js';
5
- export { TcIosInstallationGuide } from './tc-ios-installation-guide.js';
6
- export { TcNotificationModal } from './tc-notification-modal.js';
7
- export { TcOfflineModal } from './tc-offline-modal.js';
8
- export { TcPageDecoration } from './tc-page-decoration.js';
9
- //# sourceMappingURL=index.d.ts.map
@@ -1,18 +0,0 @@
1
- import { TcAuthenticatorCard as t } from "./tc-authenticator-card.js";
2
- import { TcFloatingButton as e } from "./tc-floating-button.js";
3
- import { TcIframeModal as n } from "./tc-iframe-modal.js";
4
- import { TcInstallationBanner as i } from "./tc-installation-banner.js";
5
- import { TcIosInstallationGuide as m } from "./tc-ios-installation-guide.js";
6
- import { TcNotificationModal as x } from "./tc-notification-modal.js";
7
- import { TcOfflineModal as d } from "./tc-offline-modal.js";
8
- import { TcPageDecoration as s } from "./tc-page-decoration.js";
9
- export {
10
- t as TcAuthenticatorCard,
11
- e as TcFloatingButton,
12
- n as TcIframeModal,
13
- i as TcInstallationBanner,
14
- m as TcIosInstallationGuide,
15
- x as TcNotificationModal,
16
- d as TcOfflineModal,
17
- s as TcPageDecoration
18
- };