@incodetech/web 0.0.0-dev-20260203-c624c8f → 0.0.0-dev-20260205-bb46959

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/dist/base.css CHANGED
@@ -37,6 +37,9 @@
37
37
  --tw-ease: initial;
38
38
  --tw-duration: initial;
39
39
  --tw-font-weight: initial;
40
+ --tw-translate-x: 0;
41
+ --tw-translate-y: 0;
42
+ --tw-translate-z: 0;
40
43
  --tw-leading: initial;
41
44
  --tw-tracking: initial;
42
45
  }
@@ -293,6 +296,157 @@
293
296
  .IncodeButton.IncodeButtonLink.IncodeButtonLoading .IncodeLoadingIconSecondaryIcon {
294
297
  fill: var(--surface-brand-400-static);
295
298
  }
299
+ .IncodeInput {
300
+ width: 100%;
301
+ max-width: 420px;
302
+ font-family: var(--primitive-typography-family-dm-sans);
303
+ font-size: var(--typography-body-lg-size);
304
+ font-weight: var(--typography-body-lg-weight);
305
+ line-height: var(--typography-body-lg-line-height);
306
+ letter-spacing: var(--typography-body-lg-letter-spacing);
307
+ font-size: var(--text-lg, 1.125rem);
308
+ line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
309
+ --tw-font-weight: var(--font-weight-normal, 400);
310
+ font-weight: var(--font-weight-normal, 400);
311
+ background-color: var(--color-input-surface-default, var(--input-surface-default));
312
+ color: var(--color-input-text-field-default, var(--input-text-field-default));
313
+ border-radius: var(--radius-input, var(--input-border-radius));
314
+ border-style: var(--tw-border-style);
315
+ border-width: 1px;
316
+ border-color: var(--color-input-border-default, var(--input-border-default));
317
+ padding: var(--spacing-16, var(--spacing-16, 16px));
318
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
319
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
320
+ transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
321
+ --tw-duration: .2s;
322
+ --tw-outline-style: none;
323
+ outline-style: none;
324
+ font-family: inherit;
325
+ transition-duration: .2s;
326
+ }
327
+ .IncodeInput::placeholder {
328
+ color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
329
+ font-weight: 500;
330
+ }
331
+ .IncodeInput:disabled {
332
+ border-color: var(--color-input-border-disabled, var(--input-border-disabled));
333
+ background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
334
+ cursor: not-allowed;
335
+ color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
336
+ opacity: 1;
337
+ }
338
+ .IncodeInput:focus {
339
+ border-style: var(--tw-border-style);
340
+ border-width: 2px;
341
+ border-color: var(--color-input-border-focus, var(--input-border-focus));
342
+ background-color: var(--color-input-surface-active, var(--input-surface-active));
343
+ }
344
+ .IncodeInput:active:not(:disabled) {
345
+ border-color: var(--color-input-border-active, var(--input-border-active));
346
+ background-color: var(--color-input-surface-active, var(--input-surface-active));
347
+ }
348
+ .IncodeInput[aria-invalid="true"] {
349
+ border-color: var(--color-input-border-negative, var(--input-border-negative));
350
+ }
351
+ .IncodeInput[type="date"] {
352
+ appearance: none;
353
+ -moz-appearance: textfield;
354
+ color: var(--color-input-text-field-default, var(--input-text-field-default));
355
+ min-height: 57px;
356
+ padding-right: 44px;
357
+ }
358
+ .IncodeInput[type="date"]::-webkit-calendar-picker-indicator {
359
+ opacity: 0;
360
+ pointer-events: none;
361
+ }
362
+ .IncodeInput[type="date"]::-webkit-inner-spin-button {
363
+ display: none;
364
+ }
365
+ .IncodeInput[type="date"]::-webkit-clear-button {
366
+ display: none;
367
+ }
368
+ .IncodeInput[type="date"]::-webkit-datetime-edit {
369
+ opacity: 1;
370
+ color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
371
+ }
372
+ .IncodeInput[type="date"]:focus::-webkit-datetime-edit {
373
+ color: var(--color-input-text-field-default, var(--input-text-field-default));
374
+ }
375
+ .IncodeInput[type="date"][data-has-value="true"]::-webkit-datetime-edit {
376
+ color: var(--color-input-text-field-default, var(--input-text-field-default));
377
+ }
378
+ .IncodeInput[type="date"][data-has-value="true"] {
379
+ color: var(--color-input-text-field-default, var(--input-text-field-default));
380
+ }
381
+ .IncodeInputComposed {
382
+ width: 100%;
383
+ max-width: 420px;
384
+ }
385
+ .IncodeInputComposedLabel {
386
+ font-size: var(--text-14, var(--primitive-typography-size-14));
387
+ --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
388
+ font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
389
+ color: var(--color-input-text-label-default, var(--input-text-label-default));
390
+ margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
391
+ font-family: inherit;
392
+ display: inline-block;
393
+ }
394
+ .IncodeInputComposedWrapper {
395
+ position: relative;
396
+ }
397
+ .IncodeInputComposedClearButton {
398
+ top: 50%;
399
+ right: var(--spacing-24, var(--spacing-24, 24px));
400
+ --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
401
+ translate: var(--tw-translate-x) var(--tw-translate-y);
402
+ border-style: var(--tw-border-style);
403
+ border-width: var(--border-width-none, var(--border-none));
404
+ --tw-border-style: none;
405
+ cursor: pointer;
406
+ padding: var(--spacing-0, var(--spacing-none, 0px));
407
+ z-index: 10000;
408
+ transition-property: opacity;
409
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
410
+ transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
411
+ --tw-duration: .2s;
412
+ background-color: #0000;
413
+ border-style: none;
414
+ transition-duration: .2s;
415
+ position: absolute;
416
+ }
417
+ .IncodeInputComposedClearButton:hover {
418
+ opacity: .7;
419
+ }
420
+ .IncodeInputComposedClearButton:active {
421
+ opacity: .5;
422
+ }
423
+ .IncodeInputComposedErrorWrapper, .IncodeInputComposedHelperWrapper {
424
+ margin-top: var(--spacing-8, var(--spacing-8, 8px));
425
+ align-items: center;
426
+ display: flex;
427
+ }
428
+ .IncodeInputComposedIconWrapper {
429
+ margin-right: var(--spacing-8, var(--spacing-8, 8px));
430
+ display: inline-block;
431
+ }
432
+ .IncodeInputComposedError {
433
+ margin: var(--spacing-0, var(--spacing-none, 0px));
434
+ color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
435
+ font-size: var(--text-14, var(--primitive-typography-size-14));
436
+ --tw-font-weight: var(--font-weight-normal, 400);
437
+ font-weight: var(--font-weight-normal, 400);
438
+ font-family: inherit;
439
+ display: inline-block;
440
+ }
441
+ .IncodeInputComposedHelper {
442
+ margin: var(--spacing-0, var(--spacing-none, 0px));
443
+ color: var(--color-input-text-helper-default, var(--input-text-helper-default));
444
+ font-size: var(--text-14, var(--primitive-typography-size-14));
445
+ --tw-font-weight: var(--font-weight-normal, 400);
446
+ font-weight: var(--font-weight-normal, 400);
447
+ font-family: inherit;
448
+ display: inline-block;
449
+ }
296
450
  .IncodeOtpInput {
297
451
  flex-direction: column;
298
452
  flex: 1;
@@ -933,6 +1087,126 @@
933
1087
  height: 840px;
934
1088
  }
935
1089
  }
1090
+ @media (min-width: 40rem) {
1091
+ .IncodePageContainer .IncodePageInner {
1092
+ max-width: 40rem;
1093
+ }
1094
+ }
1095
+ @media (min-width: 48rem) {
1096
+ .IncodePageContainer .IncodePageInner {
1097
+ max-width: 48rem;
1098
+ }
1099
+ }
1100
+ @media (min-width: 64rem) {
1101
+ .IncodePageContainer .IncodePageInner {
1102
+ max-width: 64rem;
1103
+ }
1104
+ }
1105
+ @media (min-width: 80rem) {
1106
+ .IncodePageContainer .IncodePageInner {
1107
+ max-width: 80rem;
1108
+ }
1109
+ }
1110
+ @media (min-width: 96rem) {
1111
+ .IncodePageContainer .IncodePageInner {
1112
+ max-width: 96rem;
1113
+ }
1114
+ }
1115
+ @media (min-width: 48rem) {
1116
+ .IncodePageContainer .IncodePageInner {
1117
+ height: 840px;
1118
+ }
1119
+ }
1120
+ @media (min-width: 40rem) {
1121
+ .IncodePageContainer .IncodePageInner {
1122
+ max-width: 40rem;
1123
+ }
1124
+ }
1125
+ @media (min-width: 48rem) {
1126
+ .IncodePageContainer .IncodePageInner {
1127
+ max-width: 48rem;
1128
+ }
1129
+ }
1130
+ @media (min-width: 64rem) {
1131
+ .IncodePageContainer .IncodePageInner {
1132
+ max-width: 64rem;
1133
+ }
1134
+ }
1135
+ @media (min-width: 80rem) {
1136
+ .IncodePageContainer .IncodePageInner {
1137
+ max-width: 80rem;
1138
+ }
1139
+ }
1140
+ @media (min-width: 96rem) {
1141
+ .IncodePageContainer .IncodePageInner {
1142
+ max-width: 96rem;
1143
+ }
1144
+ }
1145
+ @media (min-width: 48rem) {
1146
+ .IncodePageContainer .IncodePageInner {
1147
+ height: 840px;
1148
+ }
1149
+ }
1150
+ @media (min-width: 40rem) {
1151
+ .IncodePageContainer .IncodePageInner {
1152
+ max-width: 40rem;
1153
+ }
1154
+ }
1155
+ @media (min-width: 48rem) {
1156
+ .IncodePageContainer .IncodePageInner {
1157
+ max-width: 48rem;
1158
+ }
1159
+ }
1160
+ @media (min-width: 64rem) {
1161
+ .IncodePageContainer .IncodePageInner {
1162
+ max-width: 64rem;
1163
+ }
1164
+ }
1165
+ @media (min-width: 80rem) {
1166
+ .IncodePageContainer .IncodePageInner {
1167
+ max-width: 80rem;
1168
+ }
1169
+ }
1170
+ @media (min-width: 96rem) {
1171
+ .IncodePageContainer .IncodePageInner {
1172
+ max-width: 96rem;
1173
+ }
1174
+ }
1175
+ @media (min-width: 48rem) {
1176
+ .IncodePageContainer .IncodePageInner {
1177
+ height: 840px;
1178
+ }
1179
+ }
1180
+ @media (min-width: 40rem) {
1181
+ .IncodePageContainer .IncodePageInner {
1182
+ max-width: 40rem;
1183
+ }
1184
+ }
1185
+ @media (min-width: 48rem) {
1186
+ .IncodePageContainer .IncodePageInner {
1187
+ max-width: 48rem;
1188
+ }
1189
+ }
1190
+ @media (min-width: 64rem) {
1191
+ .IncodePageContainer .IncodePageInner {
1192
+ max-width: 64rem;
1193
+ }
1194
+ }
1195
+ @media (min-width: 80rem) {
1196
+ .IncodePageContainer .IncodePageInner {
1197
+ max-width: 80rem;
1198
+ }
1199
+ }
1200
+ @media (min-width: 96rem) {
1201
+ .IncodePageContainer .IncodePageInner {
1202
+ max-width: 96rem;
1203
+ }
1204
+ }
1205
+ @media (min-width: 48rem) {
1206
+ .IncodePageContainer .IncodePageInner {
1207
+ height: 840px;
1208
+ }
1209
+ }
936
1210
  .IncodePageContainer .IncodePageInner {
937
1211
  width: 100%;
938
1212
  }
@@ -1051,6 +1325,9 @@
1051
1325
  .IncodeSuccessIcon {
1052
1326
  flex-shrink: 0;
1053
1327
  }
1328
+ .IncodeErrorIcon, .IncodeCloseIcon {
1329
+ display: inline-block;
1330
+ }
1054
1331
  .IncodeSpacerFlex {
1055
1332
  flex: 1;
1056
1333
  }
@@ -1619,6 +1896,21 @@
1619
1896
  syntax: "*";
1620
1897
  inherits: false
1621
1898
  }
1899
+ @property --tw-translate-x {
1900
+ syntax: "*";
1901
+ inherits: false;
1902
+ initial-value: 0;
1903
+ }
1904
+ @property --tw-translate-y {
1905
+ syntax: "*";
1906
+ inherits: false;
1907
+ initial-value: 0;
1908
+ }
1909
+ @property --tw-translate-z {
1910
+ syntax: "*";
1911
+ inherits: false;
1912
+ initial-value: 0;
1913
+ }
1622
1914
  @property --tw-leading {
1623
1915
  syntax: "*";
1624
1916
  inherits: false
@@ -31,6 +31,11 @@
31
31
  --primitive-color-brand-secondary-50: #f2e2fe;
32
32
  --primitive-color-brand-secondary-500: #820ad1;
33
33
 
34
+ /* Color / Focus */
35
+
36
+ --primitive-color-focus-400: #0099ff;
37
+ --primitive-color-focus-500: #006aff;
38
+
34
39
  /* Color / Positive */
35
40
 
36
41
  --primitive-color-positive-50: #e4fbf0;
@@ -310,7 +315,8 @@
310
315
  );
311
316
  }
312
317
  :root,
313
- :host {
318
+ :host,
319
+ [data-incode-theme='light'] {
314
320
  /* Surface / Neutral */
315
321
 
316
322
  --surface-neutral-0: var(--primitive-color-gray-0);
@@ -396,7 +402,7 @@
396
402
  --border-status-warning: var(--primitive-color-warning-500);
397
403
  --border-status-positive: var(--primitive-color-positive-600);
398
404
  --border-status-positive-static: var(--primitive-color-positive-600);
399
- --border-status-focus: var(--primitive-color-brand-500);
405
+ --border-status-focus: var(--primitive-color-focus-500);
400
406
 
401
407
  /* Text / Body */
402
408
 
@@ -495,6 +501,7 @@
495
501
 
496
502
  --border-status-negative: var(--primitive-color-negative-500);
497
503
  --border-status-warning: var(--primitive-color-warning-400);
504
+ --border-status-focus: var(--primitive-color-focus-400);
498
505
 
499
506
  /* Text / Body */
500
507
 
@@ -586,6 +593,8 @@
586
593
  --input-border-active: var(--border-brand-500-static);
587
594
  --input-border-disabled: var(--border-neutral-100);
588
595
  --input-border-negative: var(--border-status-negative);
596
+ --input-border-focus: var(--border-status-focus);
597
+ --input-border-radius: var(--border-radius-small);
589
598
 
590
599
  --input-icon-default: var(--surface-neutral-300);
591
600
  --input-icon-positive: var(--surface-status-positive-600-static);
@@ -686,8 +695,7 @@
686
695
  --toggle-switch-text-negative: var(--text-status-negative);
687
696
  --toggle-switch-text-link: var(--text-accent-brand-static);
688
697
  }
689
- :root,
690
- :host {
698
+ [data-incode-theme='dark'] {
691
699
  /* Surface / Neutral */
692
700
 
693
701
  --surface-neutral-0: var(--primitive-color-gray-1000);
@@ -761,6 +769,7 @@
761
769
  --border-status-warning: var(--primitive-color-warning-400);
762
770
  --border-status-positive: var(--primitive-color-positive-600);
763
771
  --border-status-positive-static: var(--primitive-color-positive-600);
772
+ --border-status-focus: var(--primitive-color-focus-400);
764
773
 
765
774
  /* Text / Body */
766
775
 
@@ -31,6 +31,11 @@
31
31
  --primitive-color-brand-secondary-50: #f2e2fe;
32
32
  --primitive-color-brand-secondary-500: #820ad1;
33
33
 
34
+ /* Color / Focus */
35
+
36
+ --primitive-color-focus-400: #0099ff;
37
+ --primitive-color-focus-500: #006aff;
38
+
34
39
  /* Color / Positive */
35
40
 
36
41
  --primitive-color-positive-50: #e4fbf0;
@@ -310,7 +315,8 @@
310
315
  );
311
316
  }
312
317
  :root,
313
- :host {
318
+ :host,
319
+ [data-incode-theme='light'] {
314
320
  /* Surface / Neutral */
315
321
 
316
322
  --surface-neutral-0: var(--primitive-color-gray-0);
@@ -396,7 +402,7 @@
396
402
  --border-status-warning: var(--primitive-color-warning-500);
397
403
  --border-status-positive: var(--primitive-color-positive-600);
398
404
  --border-status-positive-static: var(--primitive-color-positive-600);
399
- --border-status-focus: var(--primitive-color-brand-500);
405
+ --border-status-focus: var(--primitive-color-focus-500);
400
406
 
401
407
  /* Text / Body */
402
408
 
@@ -495,6 +501,7 @@
495
501
 
496
502
  --border-status-negative: var(--primitive-color-negative-500);
497
503
  --border-status-warning: var(--primitive-color-warning-400);
504
+ --border-status-focus: var(--primitive-color-focus-400);
498
505
 
499
506
  /* Text / Body */
500
507
 
@@ -586,6 +593,8 @@
586
593
  --input-border-active: var(--border-brand-500-static);
587
594
  --input-border-disabled: var(--border-neutral-100);
588
595
  --input-border-negative: var(--border-status-negative);
596
+ --input-border-focus: var(--border-status-focus);
597
+ --input-border-radius: var(--border-radius-small);
589
598
 
590
599
  --input-icon-default: var(--surface-neutral-300);
591
600
  --input-icon-positive: var(--surface-status-positive-600-static);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@incodetech/web",
3
- "version": "0.0.0-dev-20260203-c624c8f",
3
+ "version": "0.0.0-dev-20260205-bb46959",
4
4
  "type": "module",
5
5
  "main": "./dist/index.es.js",
6
6
  "types": "./dist/types/index.d.ts",
@@ -65,11 +65,17 @@
65
65
  "libphonenumber-js": "^1.11.0",
66
66
  "preact-custom-element": "^4.6.0",
67
67
  "tailwindcss": "^4.1.17",
68
- "@incodetech/core": "0.0.0-dev-20260203-c624c8f"
68
+ "@incodetech/core": "0.0.0-dev-20260205-bb46959"
69
69
  },
70
70
  "devDependencies": {
71
71
  "@microsoft/api-extractor": "^7.53.3",
72
72
  "@preact/preset-vite": "^2.10.2",
73
+ "@storybook/addon-a11y": "^8.6.14",
74
+ "@storybook/addon-essentials": "^8.6.14",
75
+ "@storybook/addon-themes": "^8.6.14",
76
+ "@storybook/blocks": "^8.6.14",
77
+ "@storybook/preact": "^8.6.14",
78
+ "@storybook/preact-vite": "^8.6.14",
73
79
  "@tailwindcss/postcss": "^4.1.17",
74
80
  "@testing-library/preact": "^3.2.4",
75
81
  "@types/node": "^22.10.5",
@@ -78,6 +84,7 @@
78
84
  "postcss": "^8.5.6",
79
85
  "postcss-import": "^16.1.1",
80
86
  "preact": "^10.27.2",
87
+ "storybook": "^8.6.14",
81
88
  "typescript": "^5.9.3",
82
89
  "vite": "^7.2.4",
83
90
  "vite-plugin-dts": "^4.5.4",
@@ -95,6 +102,8 @@
95
102
  "lint:fix": "eslint . --fix",
96
103
  "format": "prettier --write .",
97
104
  "format:check": "prettier --check .",
98
- "typecheck": "tsc -p tsconfig.json --noEmit"
105
+ "typecheck": "tsc -p tsconfig.json --noEmit",
106
+ "storybook": "storybook dev -p 6006",
107
+ "build-storybook": "storybook build"
99
108
  }
100
109
  }