@lukso/web-components 1.102.1 → 1.102.2

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 (70) hide show
  1. package/dist/components/index.cjs +4 -4
  2. package/dist/components/index.js +4 -4
  3. package/dist/components/lukso-button/index.cjs +1 -1
  4. package/dist/components/lukso-button/index.js +1 -1
  5. package/dist/components/lukso-card/index.cjs +3 -3
  6. package/dist/components/lukso-card/index.js +3 -3
  7. package/dist/components/lukso-checkbox/index.cjs +1 -1
  8. package/dist/components/lukso-checkbox/index.js +1 -1
  9. package/dist/components/lukso-color-picker/index.cjs +2 -2
  10. package/dist/components/lukso-color-picker/index.js +2 -2
  11. package/dist/components/lukso-dropdown/index.cjs +4 -4
  12. package/dist/components/lukso-dropdown/index.js +4 -4
  13. package/dist/components/lukso-dropdown-option/index.cjs +3 -3
  14. package/dist/components/lukso-dropdown-option/index.js +3 -3
  15. package/dist/components/lukso-footer/index.cjs +1 -1
  16. package/dist/components/lukso-footer/index.js +1 -1
  17. package/dist/components/lukso-icon/index.cjs +2 -2
  18. package/dist/components/lukso-icon/index.js +2 -2
  19. package/dist/components/lukso-image/index.cjs +2 -2
  20. package/dist/components/lukso-image/index.js +2 -2
  21. package/dist/components/lukso-input/index.cjs +2 -2
  22. package/dist/components/lukso-input/index.js +2 -2
  23. package/dist/components/lukso-modal/index.cjs +1 -1
  24. package/dist/components/lukso-modal/index.js +1 -1
  25. package/dist/components/lukso-navbar/index.cjs +3 -3
  26. package/dist/components/lukso-navbar/index.js +3 -3
  27. package/dist/components/lukso-pagination/index.cjs +2 -2
  28. package/dist/components/lukso-pagination/index.js +2 -2
  29. package/dist/components/lukso-profile/index.cjs +2 -2
  30. package/dist/components/lukso-profile/index.js +2 -2
  31. package/dist/components/lukso-progress/index.cjs +2 -2
  32. package/dist/components/lukso-progress/index.js +2 -2
  33. package/dist/components/lukso-sanitize/index.cjs +1 -1
  34. package/dist/components/lukso-sanitize/index.js +1 -1
  35. package/dist/components/lukso-search/index.cjs +4 -4
  36. package/dist/components/lukso-search/index.js +4 -4
  37. package/dist/components/lukso-select/index.cjs +72 -73
  38. package/dist/components/lukso-select/index.d.ts.map +1 -1
  39. package/dist/components/lukso-select/index.js +72 -73
  40. package/dist/components/lukso-share/index.cjs +23 -26
  41. package/dist/components/lukso-share/index.js +23 -26
  42. package/dist/components/lukso-switch/index.cjs +7 -10
  43. package/dist/components/lukso-switch/index.js +7 -10
  44. package/dist/components/lukso-tag/index.cjs +31 -34
  45. package/dist/components/lukso-tag/index.js +31 -34
  46. package/dist/components/lukso-terms/index.cjs +5 -8
  47. package/dist/components/lukso-terms/index.js +5 -8
  48. package/dist/components/lukso-test/index.cjs +12 -15
  49. package/dist/components/lukso-test/index.js +12 -15
  50. package/dist/components/lukso-textarea/index.cjs +81 -84
  51. package/dist/components/lukso-textarea/index.js +81 -84
  52. package/dist/components/lukso-tooltip/index.cjs +33 -36
  53. package/dist/components/lukso-tooltip/index.js +33 -36
  54. package/dist/components/lukso-username/index.cjs +49 -52
  55. package/dist/components/lukso-username/index.js +49 -52
  56. package/dist/components/lukso-wizard/index.cjs +41 -44
  57. package/dist/components/lukso-wizard/index.js +41 -44
  58. package/dist/{index-6349a8aa.js → index-15b30335.js} +1 -1
  59. package/dist/{index-474fac60.cjs → index-1ce46c50.cjs} +1 -1
  60. package/dist/{index-8ccda1e9.cjs → index-89eb56eb.cjs} +3 -5
  61. package/dist/{index-17879e5a.cjs → index-b9bc3bbb.cjs} +1 -1
  62. package/dist/{index-d89cc6bc.js → index-c154a31c.js} +3 -5
  63. package/dist/{index-7e82dcae.js → index-f62a47db.js} +1 -1
  64. package/dist/index.cjs +4 -4
  65. package/dist/index.js +4 -4
  66. package/dist/shared/tailwind-element/index.cjs +1 -1
  67. package/dist/shared/tailwind-element/index.js +1 -1
  68. package/dist/{style-map-12def811.cjs → style-map-3dd58f82.cjs} +1 -1
  69. package/dist/{style-map-cf4f4350.js → style-map-d46cc789.js} +1 -1
  70. package/package.json +1 -1
@@ -1,7 +1,7 @@
1
- import { T as TailwindStyledElement, x } from '../../index-d89cc6bc.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-c154a31c.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { c as ce } from '../../index-ca8e900d.js';
4
- import { c as customStyleMap } from '../../index-6349a8aa.js';
4
+ import { c as customStyleMap } from '../../index-15b30335.js';
5
5
  import '../../bundle-mjs-fbc6e2a8.js';
6
6
  import '../../directive-2bb7789e.js';
7
7
 
@@ -19,39 +19,36 @@ var __decorateClass = (decorators, target, key, kind) => {
19
19
  return result;
20
20
  };
21
21
  let LuksoTag = class extends TailwindStyledElement(style) {
22
- constructor() {
23
- super(...arguments);
24
- this.size = "small";
25
- this.isRounded = false;
26
- this.backgroundColor = "";
27
- this.borderColor = "";
28
- this.textColor = "";
29
- this.tagStyles = ce({
30
- base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
31
- variants: {
32
- size: {
33
- "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
34
- small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
35
- large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
36
- },
37
- isRounded: {
38
- true: "rounded-[56px]"
39
- }
22
+ size = "small";
23
+ isRounded = false;
24
+ backgroundColor = "";
25
+ borderColor = "";
26
+ textColor = "";
27
+ tagStyles = ce({
28
+ base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
29
+ variants: {
30
+ size: {
31
+ "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
32
+ small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
33
+ large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
40
34
  },
41
- compoundVariants: [
42
- {
43
- size: "small",
44
- isRounded: true,
45
- class: "px-3"
46
- },
47
- {
48
- size: "x-small",
49
- isRounded: true,
50
- class: "px-2"
51
- }
52
- ]
53
- });
54
- }
35
+ isRounded: {
36
+ true: "rounded-[56px]"
37
+ }
38
+ },
39
+ compoundVariants: [
40
+ {
41
+ size: "small",
42
+ isRounded: true,
43
+ class: "px-3"
44
+ },
45
+ {
46
+ size: "x-small",
47
+ isRounded: true,
48
+ class: "px-2"
49
+ }
50
+ ]
51
+ });
55
52
  resolveBorderColor() {
56
53
  if (this.borderColor) {
57
54
  return this.borderColor;
@@ -2,14 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-8ccda1e9.cjs');
5
+ const shared_tailwindElement_index = require('../../index-89eb56eb.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-sanitize/index.cjs');
11
11
  require('../../directive-8278ab14.cjs');
12
- require('../../style-map-12def811.cjs');
12
+ require('../../style-map-3dd58f82.cjs');
13
13
 
14
14
  const style = ":host {\n display: flex;\n height: 100%\n}";
15
15
 
@@ -25,14 +25,11 @@ var __decorateClass = (decorators, target, key, kind) => {
25
25
  return result;
26
26
  };
27
27
  exports.LuksoTerms = class LuksoTerms extends shared_tailwindElement_index.TailwindStyledElement(style) {
28
- constructor() {
29
- super(...arguments);
30
- this.text = "";
31
- this.hasScrollButton = true;
32
- this.defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
28
+ text = "";
29
+ hasScrollButton = true;
30
+ defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
33
31
  bg-gradient-to-b from-transparent to-neutral-100/80
34
32
  flex justify-center transition-opacity opacity-0`;
35
- }
36
33
  onScrollBottom() {
37
34
  const event = new CustomEvent("on-bottom-scroll", {
38
35
  bubbles: true,
@@ -1,11 +1,11 @@
1
- import { T as TailwindStyledElement, x } from '../../index-d89cc6bc.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-c154a31c.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-sanitize/index.js';
7
7
  import '../../directive-2bb7789e.js';
8
- import '../../style-map-cf4f4350.js';
8
+ import '../../style-map-d46cc789.js';
9
9
 
10
10
  const style = ":host {\n display: flex;\n height: 100%\n}";
11
11
 
@@ -21,14 +21,11 @@ var __decorateClass = (decorators, target, key, kind) => {
21
21
  return result;
22
22
  };
23
23
  let LuksoTerms = class extends TailwindStyledElement(style) {
24
- constructor() {
25
- super(...arguments);
26
- this.text = "";
27
- this.hasScrollButton = true;
28
- this.defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
24
+ text = "";
25
+ hasScrollButton = true;
26
+ defaultStyles = `h-[56px] w-full sticky bottom-0 -mt-[56px]
29
27
  bg-gradient-to-b from-transparent to-neutral-100/80
30
28
  flex justify-center transition-opacity opacity-0`;
31
- }
32
29
  onScrollBottom() {
33
30
  const event = new CustomEvent("on-bottom-scroll", {
34
31
  bubbles: true,
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-8ccda1e9.cjs');
5
+ const shared_tailwindElement_index = require('../../index-89eb56eb.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const directive = require('../../directive-8278ab14.cjs');
8
8
 
@@ -56,21 +56,18 @@ var __decorateClass = (decorators, target, key, kind) => {
56
56
  return result;
57
57
  };
58
58
  exports.LuksoTest = class LuksoTest extends shared_tailwindElement_index.TailwindStyledElement(style) {
59
- constructor() {
60
- super(...arguments);
61
- this.name = "World";
62
- this.clicked = false;
63
- this.disabled = false;
64
- this.duration = 1e3;
65
- this.controller = new t(this, {
66
- defaultOptions: {
67
- keyframeOptions: {
68
- duration: this.duration,
69
- fill: "backwards"
70
- }
59
+ name = "World";
60
+ clicked = false;
61
+ disabled = false;
62
+ duration = 1e3;
63
+ controller = new t(this, {
64
+ defaultOptions: {
65
+ keyframeOptions: {
66
+ duration: this.duration,
67
+ fill: "backwards"
71
68
  }
72
- });
73
- }
69
+ }
70
+ });
74
71
  _onClick() {
75
72
  if (this.disabled) {
76
73
  return;
@@ -1,4 +1,4 @@
1
- import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-d89cc6bc.js';
1
+ import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-c154a31c.js';
2
2
  import { n as n$3, e as e$3 } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { e as e$2, i as i$3, t as t$3 } from '../../directive-2bb7789e.js';
4
4
 
@@ -52,21 +52,18 @@ var __decorateClass = (decorators, target, key, kind) => {
52
52
  return result;
53
53
  };
54
54
  let LuksoTest = class extends TailwindStyledElement(style) {
55
- constructor() {
56
- super(...arguments);
57
- this.name = "World";
58
- this.clicked = false;
59
- this.disabled = false;
60
- this.duration = 1e3;
61
- this.controller = new t(this, {
62
- defaultOptions: {
63
- keyframeOptions: {
64
- duration: this.duration,
65
- fill: "backwards"
66
- }
55
+ name = "World";
56
+ clicked = false;
57
+ disabled = false;
58
+ duration = 1e3;
59
+ controller = new t(this, {
60
+ defaultOptions: {
61
+ keyframeOptions: {
62
+ duration: this.duration,
63
+ fill: "backwards"
67
64
  }
68
- });
69
- }
65
+ }
66
+ });
70
67
  _onClick() {
71
68
  if (this.disabled) {
72
69
  return;
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-8ccda1e9.cjs');
5
+ const shared_tailwindElement_index = require('../../index-89eb56eb.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
8
  const index = require('../../index-1d3f4a5a.cjs');
@@ -10,7 +10,7 @@ require('../../tailwind-config.cjs');
10
10
  const cn = require('../../cn-5ceac001.cjs');
11
11
  require('../lukso-icon/index.cjs');
12
12
  require('../../bundle-mjs-d58a83c6.cjs');
13
- require('../../style-map-12def811.cjs');
13
+ require('../../style-map-3dd58f82.cjs');
14
14
  require('../../directive-8278ab14.cjs');
15
15
 
16
16
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
@@ -28,95 +28,92 @@ var __decorateClass = (decorators, target, key, kind) => {
28
28
  };
29
29
  const FOCUS_DELAY_MS = 10;
30
30
  exports.LuksoTextarea = class LuksoTextarea extends shared_tailwindElement_index.TailwindStyledElement(style) {
31
- constructor() {
32
- super(...arguments);
33
- this.value = "";
34
- this.name = "";
35
- this.placeholder = "";
36
- this.label = "";
37
- this.id = "";
38
- this.ref = void 0;
39
- this.description = "";
40
- this.error = "";
41
- this.customClass = "";
42
- this.isFullWidth = false;
43
- this.isReadonly = false;
44
- this.isDisabled = false;
45
- this.autofocus = false;
46
- this.borderless = false;
47
- this.isNonResizable = false;
48
- this.keepFocusOnEscape = false;
49
- this.size = "medium";
50
- this.rows = 4;
51
- this.hasFocus = false;
52
- this.hasHighlight = false;
53
- this.styles = index.ce({
54
- slots: {
55
- wrapper: "group flex",
56
- input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
31
+ value = "";
32
+ name = "";
33
+ placeholder = "";
34
+ label = "";
35
+ id = "";
36
+ ref = void 0;
37
+ description = "";
38
+ error = "";
39
+ customClass = "";
40
+ isFullWidth = false;
41
+ isReadonly = false;
42
+ isDisabled = false;
43
+ autofocus = false;
44
+ borderless = false;
45
+ isNonResizable = false;
46
+ keepFocusOnEscape = false;
47
+ size = "medium";
48
+ rows = 4;
49
+ hasFocus = false;
50
+ hasHighlight = false;
51
+ styles = index.ce({
52
+ slots: {
53
+ wrapper: "group flex",
54
+ input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
57
55
  outline-none transition transition-all duration-150 appearance-none`
58
- },
59
- variants: {
60
- hasError: {
61
- true: {
62
- input: "border-red-85"
63
- },
64
- false: {
65
- input: "border-neutral-90"
66
- }
67
- },
68
- hasHighlight: {
69
- true: {
70
- input: "border-neutral-35"
71
- }
72
- },
73
- borderless: {
74
- true: { input: "border-0" },
75
- false: { input: "border" }
56
+ },
57
+ variants: {
58
+ hasError: {
59
+ true: {
60
+ input: "border-red-85"
76
61
  },
77
- isReadonly: {
78
- true: { input: "cursor-not-allowed" }
79
- },
80
- isDisabled: {
81
- true: {
82
- input: "text-neutral-60 cursor-not-allowed"
83
- },
84
- false: { input: "text-neutral-20" }
85
- },
86
- isFullWidth: {
87
- true: { wrapper: "w-full" },
88
- false: { wrapper: "w-[350px]" }
62
+ false: {
63
+ input: "border-neutral-90"
64
+ }
65
+ },
66
+ hasHighlight: {
67
+ true: {
68
+ input: "border-neutral-35"
69
+ }
70
+ },
71
+ borderless: {
72
+ true: { input: "border-0" },
73
+ false: { input: "border" }
74
+ },
75
+ isReadonly: {
76
+ true: { input: "cursor-not-allowed" }
77
+ },
78
+ isDisabled: {
79
+ true: {
80
+ input: "text-neutral-60 cursor-not-allowed"
89
81
  },
90
- size: {
91
- small: {
92
- input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
93
- },
94
- medium: {
95
- input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
96
- }
82
+ false: { input: "text-neutral-20" }
83
+ },
84
+ isFullWidth: {
85
+ true: { wrapper: "w-full" },
86
+ false: { wrapper: "w-[350px]" }
87
+ },
88
+ size: {
89
+ small: {
90
+ input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
97
91
  },
98
- isNonResizable: {
99
- true: {
100
- input: "resize-none"
101
- }
92
+ medium: {
93
+ input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
102
94
  }
103
95
  },
104
- compoundVariants: [
105
- {
106
- isFullWidth: false,
107
- size: "small",
108
- class: { wrapper: "w-[210px]" }
109
- },
110
- {
111
- hasHighlight: true,
112
- hasError: true,
113
- class: {
114
- input: "border-red-65"
115
- }
96
+ isNonResizable: {
97
+ true: {
98
+ input: "resize-none"
116
99
  }
117
- ]
118
- });
119
- }
100
+ }
101
+ },
102
+ compoundVariants: [
103
+ {
104
+ isFullWidth: false,
105
+ size: "small",
106
+ class: { wrapper: "w-[210px]" }
107
+ },
108
+ {
109
+ hasHighlight: true,
110
+ hasError: true,
111
+ class: {
112
+ input: "border-red-65"
113
+ }
114
+ }
115
+ ]
116
+ });
120
117
  connectedCallback() {
121
118
  super.connectedCallback();
122
119
  if (this.autofocus) {
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-d89cc6bc.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-c154a31c.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
4
  import { c as ce } from '../../index-ca8e900d.js';
@@ -6,7 +6,7 @@ import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-b54dcc61.js';
7
7
  import '../lukso-icon/index.js';
8
8
  import '../../bundle-mjs-fbc6e2a8.js';
9
- import '../../style-map-cf4f4350.js';
9
+ import '../../style-map-d46cc789.js';
10
10
  import '../../directive-2bb7789e.js';
11
11
 
12
12
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
@@ -24,95 +24,92 @@ var __decorateClass = (decorators, target, key, kind) => {
24
24
  };
25
25
  const FOCUS_DELAY_MS = 10;
26
26
  let LuksoTextarea = class extends TailwindStyledElement(style) {
27
- constructor() {
28
- super(...arguments);
29
- this.value = "";
30
- this.name = "";
31
- this.placeholder = "";
32
- this.label = "";
33
- this.id = "";
34
- this.ref = void 0;
35
- this.description = "";
36
- this.error = "";
37
- this.customClass = "";
38
- this.isFullWidth = false;
39
- this.isReadonly = false;
40
- this.isDisabled = false;
41
- this.autofocus = false;
42
- this.borderless = false;
43
- this.isNonResizable = false;
44
- this.keepFocusOnEscape = false;
45
- this.size = "medium";
46
- this.rows = 4;
47
- this.hasFocus = false;
48
- this.hasHighlight = false;
49
- this.styles = ce({
50
- slots: {
51
- wrapper: "group flex",
52
- input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
27
+ value = "";
28
+ name = "";
29
+ placeholder = "";
30
+ label = "";
31
+ id = "";
32
+ ref = void 0;
33
+ description = "";
34
+ error = "";
35
+ customClass = "";
36
+ isFullWidth = false;
37
+ isReadonly = false;
38
+ isDisabled = false;
39
+ autofocus = false;
40
+ borderless = false;
41
+ isNonResizable = false;
42
+ keepFocusOnEscape = false;
43
+ size = "medium";
44
+ rows = 4;
45
+ hasFocus = false;
46
+ hasHighlight = false;
47
+ styles = ce({
48
+ slots: {
49
+ wrapper: "group flex",
50
+ input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
53
51
  outline-none transition transition-all duration-150 appearance-none`
54
- },
55
- variants: {
56
- hasError: {
57
- true: {
58
- input: "border-red-85"
59
- },
60
- false: {
61
- input: "border-neutral-90"
62
- }
63
- },
64
- hasHighlight: {
65
- true: {
66
- input: "border-neutral-35"
67
- }
68
- },
69
- borderless: {
70
- true: { input: "border-0" },
71
- false: { input: "border" }
52
+ },
53
+ variants: {
54
+ hasError: {
55
+ true: {
56
+ input: "border-red-85"
72
57
  },
73
- isReadonly: {
74
- true: { input: "cursor-not-allowed" }
75
- },
76
- isDisabled: {
77
- true: {
78
- input: "text-neutral-60 cursor-not-allowed"
79
- },
80
- false: { input: "text-neutral-20" }
81
- },
82
- isFullWidth: {
83
- true: { wrapper: "w-full" },
84
- false: { wrapper: "w-[350px]" }
58
+ false: {
59
+ input: "border-neutral-90"
60
+ }
61
+ },
62
+ hasHighlight: {
63
+ true: {
64
+ input: "border-neutral-35"
65
+ }
66
+ },
67
+ borderless: {
68
+ true: { input: "border-0" },
69
+ false: { input: "border" }
70
+ },
71
+ isReadonly: {
72
+ true: { input: "cursor-not-allowed" }
73
+ },
74
+ isDisabled: {
75
+ true: {
76
+ input: "text-neutral-60 cursor-not-allowed"
85
77
  },
86
- size: {
87
- small: {
88
- input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
89
- },
90
- medium: {
91
- input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
92
- }
78
+ false: { input: "text-neutral-20" }
79
+ },
80
+ isFullWidth: {
81
+ true: { wrapper: "w-full" },
82
+ false: { wrapper: "w-[350px]" }
83
+ },
84
+ size: {
85
+ small: {
86
+ input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
93
87
  },
94
- isNonResizable: {
95
- true: {
96
- input: "resize-none"
97
- }
88
+ medium: {
89
+ input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
98
90
  }
99
91
  },
100
- compoundVariants: [
101
- {
102
- isFullWidth: false,
103
- size: "small",
104
- class: { wrapper: "w-[210px]" }
105
- },
106
- {
107
- hasHighlight: true,
108
- hasError: true,
109
- class: {
110
- input: "border-red-65"
111
- }
92
+ isNonResizable: {
93
+ true: {
94
+ input: "resize-none"
112
95
  }
113
- ]
114
- });
115
- }
96
+ }
97
+ },
98
+ compoundVariants: [
99
+ {
100
+ isFullWidth: false,
101
+ size: "small",
102
+ class: { wrapper: "w-[210px]" }
103
+ },
104
+ {
105
+ hasHighlight: true,
106
+ hasError: true,
107
+ class: {
108
+ input: "border-red-65"
109
+ }
110
+ }
111
+ ]
112
+ });
116
113
  connectedCallback() {
117
114
  super.connectedCallback();
118
115
  if (this.autofocus) {