@lukso/web-components 1.119.0 → 1.119.1

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 (83) hide show
  1. package/dist/components/index.cjs +8 -7
  2. package/dist/components/index.js +8 -7
  3. package/dist/components/lukso-button/index.cjs +3 -3
  4. package/dist/components/lukso-button/index.js +3 -3
  5. package/dist/components/lukso-card/index.cjs +6 -6
  6. package/dist/components/lukso-card/index.js +6 -6
  7. package/dist/components/lukso-checkbox/index.cjs +3 -3
  8. package/dist/components/lukso-checkbox/index.js +3 -3
  9. package/dist/components/lukso-color-picker/index.cjs +4 -4
  10. package/dist/components/lukso-color-picker/index.js +4 -4
  11. package/dist/components/lukso-dropdown/index.cjs +151 -12
  12. package/dist/components/lukso-dropdown/index.js +156 -8
  13. package/dist/components/lukso-dropdown-option/index.cjs +2 -2
  14. package/dist/components/lukso-dropdown-option/index.js +2 -2
  15. package/dist/components/lukso-footer/index.cjs +2 -2
  16. package/dist/components/lukso-footer/index.js +2 -2
  17. package/dist/components/lukso-icon/index.cjs +3 -3
  18. package/dist/components/lukso-icon/index.js +3 -3
  19. package/dist/components/lukso-image/index.cjs +4 -4
  20. package/dist/components/lukso-image/index.js +4 -4
  21. package/dist/components/lukso-input/index.cjs +4 -4
  22. package/dist/components/lukso-input/index.js +4 -4
  23. package/dist/components/lukso-modal/index.cjs +2 -2
  24. package/dist/components/lukso-modal/index.js +2 -2
  25. package/dist/components/lukso-navbar/index.cjs +5 -5
  26. package/dist/components/lukso-navbar/index.js +5 -5
  27. package/dist/components/lukso-pagination/index.cjs +4 -4
  28. package/dist/components/lukso-pagination/index.js +4 -4
  29. package/dist/components/lukso-profile/index.cjs +5 -5
  30. package/dist/components/lukso-profile/index.js +5 -5
  31. package/dist/components/lukso-progress/index.cjs +3 -3
  32. package/dist/components/lukso-progress/index.js +3 -3
  33. package/dist/components/lukso-sanitize/index.cjs +2 -2
  34. package/dist/components/lukso-sanitize/index.js +2 -2
  35. package/dist/components/lukso-search/index.cjs +8 -7
  36. package/dist/components/lukso-search/index.js +8 -7
  37. package/dist/components/lukso-select/index.cjs +76 -75
  38. package/dist/components/lukso-select/index.js +76 -75
  39. package/dist/components/lukso-share/index.cjs +24 -27
  40. package/dist/components/lukso-share/index.js +24 -27
  41. package/dist/components/lukso-switch/index.cjs +120 -38
  42. package/dist/components/lukso-switch/index.d.ts +12 -4
  43. package/dist/components/lukso-switch/index.d.ts.map +1 -1
  44. package/dist/components/lukso-switch/index.js +120 -38
  45. package/dist/components/lukso-switch/lukso-switch.stories.d.ts +8 -0
  46. package/dist/components/lukso-switch/lukso-switch.stories.d.ts.map +1 -1
  47. package/dist/components/lukso-tag/index.cjs +32 -35
  48. package/dist/components/lukso-tag/index.js +32 -35
  49. package/dist/components/lukso-terms/index.cjs +7 -10
  50. package/dist/components/lukso-terms/index.js +7 -10
  51. package/dist/components/lukso-test/index.cjs +13 -16
  52. package/dist/components/lukso-test/index.js +13 -16
  53. package/dist/components/lukso-textarea/index.cjs +83 -86
  54. package/dist/components/lukso-textarea/index.js +83 -86
  55. package/dist/components/lukso-tooltip/index.cjs +35 -38
  56. package/dist/components/lukso-tooltip/index.js +35 -38
  57. package/dist/components/lukso-username/index.cjs +50 -53
  58. package/dist/components/lukso-username/index.js +50 -53
  59. package/dist/components/lukso-wizard/index.cjs +42 -45
  60. package/dist/components/lukso-wizard/index.js +42 -45
  61. package/dist/index-11ee2a36.cjs +46 -0
  62. package/dist/{index-3926da18.cjs → index-28b795be.cjs} +1 -1
  63. package/dist/{index-7bb28a79.js → index-5e0baae9.js} +1 -1
  64. package/dist/{index-ff8d75cd.js → index-6e86d3a6.js} +2 -2
  65. package/dist/index-be30d9db.js +37 -0
  66. package/dist/{index-67915f32.cjs → index-d95aa803.cjs} +2 -2
  67. package/dist/index.cjs +8 -7
  68. package/dist/index.js +8 -7
  69. package/dist/{property-eaa52bd9.js → property-23ddd718.js} +1 -1
  70. package/dist/{property-bf2eee83.cjs → property-c2b27afb.cjs} +1 -1
  71. package/dist/shared/tailwind-element/index.cjs +1 -1
  72. package/dist/shared/tailwind-element/index.js +1 -1
  73. package/dist/{state-375dfffc.cjs → state-88ac4aa9.cjs} +1 -1
  74. package/dist/{state-1fc9a224.js → state-f46a7e17.js} +1 -1
  75. package/dist/{style-map-5aef4b6f.js → style-map-129fa2d5.js} +1 -1
  76. package/dist/{style-map-8e54f508.cjs → style-map-6e0d4ef7.cjs} +1 -1
  77. package/dist/uniq-id-ce2d165c.js +6 -0
  78. package/dist/uniq-id-f0b18085.cjs +8 -0
  79. package/package.json +1 -1
  80. package/dist/index-104cf124.cjs +0 -161
  81. package/dist/index-12775596.js +0 -159
  82. package/dist/index-68c61387.cjs +0 -48
  83. package/dist/index-92dc158d.js +0 -39
@@ -1,7 +1,7 @@
1
- import { T as TailwindStyledElement, x } from '../../index-92dc158d.js';
2
- import { n, t } from '../../property-eaa52bd9.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-be30d9db.js';
2
+ import { n, t } from '../../property-23ddd718.js';
3
3
  import { c as ce } from '../../index-d14b6a34.js';
4
- import { c as customStyleMap } from '../../index-7bb28a79.js';
4
+ import { c as customStyleMap } from '../../index-5e0baae9.js';
5
5
  import '../../directive-2bb7789e.js';
6
6
 
7
7
  const style = ":host {\n display: inline-flex\n}";
@@ -18,39 +18,36 @@ var __decorateClass = (decorators, target, key, kind) => {
18
18
  return result;
19
19
  };
20
20
  let LuksoTag = class extends TailwindStyledElement(style) {
21
- constructor() {
22
- super(...arguments);
23
- this.size = "small";
24
- this.isRounded = false;
25
- this.backgroundColor = "";
26
- this.borderColor = "";
27
- this.textColor = "";
28
- this.tagStyles = ce({
29
- base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
30
- variants: {
31
- size: {
32
- "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
33
- small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
34
- large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
35
- },
36
- isRounded: {
37
- true: "rounded-[56px]"
38
- }
21
+ size = "small";
22
+ isRounded = false;
23
+ backgroundColor = "";
24
+ borderColor = "";
25
+ textColor = "";
26
+ tagStyles = ce({
27
+ base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
28
+ variants: {
29
+ size: {
30
+ "x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
31
+ small: "paragraph-inter-12-medium h-[28px] px-2 rounded-8",
32
+ large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
39
33
  },
40
- compoundVariants: [
41
- {
42
- size: "small",
43
- isRounded: true,
44
- class: "px-3"
45
- },
46
- {
47
- size: "x-small",
48
- isRounded: true,
49
- class: "px-2"
50
- }
51
- ]
52
- });
53
- }
34
+ isRounded: {
35
+ true: "rounded-[56px]"
36
+ }
37
+ },
38
+ compoundVariants: [
39
+ {
40
+ size: "small",
41
+ isRounded: true,
42
+ class: "px-3"
43
+ },
44
+ {
45
+ size: "x-small",
46
+ isRounded: true,
47
+ class: "px-2"
48
+ }
49
+ ]
50
+ });
54
51
  resolveBorderColor() {
55
52
  if (this.borderColor) {
56
53
  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-68c61387.cjs');
6
- const property = require('../../property-bf2eee83.cjs');
7
- const state = require('../../state-375dfffc.cjs');
5
+ const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
6
+ const property = require('../../property-c2b27afb.cjs');
7
+ const state = require('../../state-88ac4aa9.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-8e54f508.cjs');
12
+ require('../../style-map-6e0d4ef7.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-92dc158d.js';
2
- import { n, t } from '../../property-eaa52bd9.js';
3
- import { r } from '../../state-1fc9a224.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-be30d9db.js';
2
+ import { n, t } from '../../property-23ddd718.js';
3
+ import { r } from '../../state-f46a7e17.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-5aef4b6f.js';
8
+ import '../../style-map-129fa2d5.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,8 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-68c61387.cjs');
6
- const property = require('../../property-bf2eee83.cjs');
5
+ const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
6
+ const property = require('../../property-c2b27afb.cjs');
7
7
  const directive = require('../../directive-8278ab14.cjs');
8
8
 
9
9
  /**
@@ -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,5 +1,5 @@
1
- import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-92dc158d.js';
2
- import { n as n$3, t as t$4 } from '../../property-eaa52bd9.js';
1
+ import { b as T$1, T as TailwindStyledElement, x as x$1 } from '../../index-be30d9db.js';
2
+ import { n as n$3, t as t$4 } from '../../property-23ddd718.js';
3
3
  import { e as e$3, i as i$3, t as t$3 } from '../../directive-2bb7789e.js';
4
4
 
5
5
  /**
@@ -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,14 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-68c61387.cjs');
6
- const property = require('../../property-bf2eee83.cjs');
7
- const state = require('../../state-375dfffc.cjs');
5
+ const shared_tailwindElement_index = require('../../index-11ee2a36.cjs');
6
+ const property = require('../../property-c2b27afb.cjs');
7
+ const state = require('../../state-88ac4aa9.cjs');
8
8
  const index = require('../../index-2b104ecb.cjs');
9
9
  require('../../tailwind-config.cjs');
10
10
  const cn = require('../../cn-b6daa995.cjs');
11
11
  require('../lukso-icon/index.cjs');
12
- require('../../style-map-8e54f508.cjs');
12
+ require('../../style-map-6e0d4ef7.cjs');
13
13
  require('../../directive-8278ab14.cjs');
14
14
 
15
15
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
@@ -27,95 +27,92 @@ var __decorateClass = (decorators, target, key, kind) => {
27
27
  };
28
28
  const FOCUS_DELAY_MS = 10;
29
29
  exports.LuksoTextarea = class LuksoTextarea extends shared_tailwindElement_index.TailwindStyledElement(style) {
30
- constructor() {
31
- super(...arguments);
32
- this.value = "";
33
- this.name = "";
34
- this.placeholder = "";
35
- this.label = "";
36
- this.id = "";
37
- this.ref = void 0;
38
- this.description = "";
39
- this.error = "";
40
- this.customClass = "";
41
- this.isFullWidth = false;
42
- this.isReadonly = false;
43
- this.isDisabled = false;
44
- this.autofocus = false;
45
- this.borderless = false;
46
- this.isNonResizable = false;
47
- this.keepFocusOnEscape = false;
48
- this.size = "medium";
49
- this.rows = 4;
50
- this.hasFocus = false;
51
- this.hasHighlight = false;
52
- this.styles = index.ce({
53
- slots: {
54
- wrapper: "group flex",
55
- input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
30
+ value = "";
31
+ name = "";
32
+ placeholder = "";
33
+ label = "";
34
+ id = "";
35
+ ref = void 0;
36
+ description = "";
37
+ error = "";
38
+ customClass = "";
39
+ isFullWidth = false;
40
+ isReadonly = false;
41
+ isDisabled = false;
42
+ autofocus = false;
43
+ borderless = false;
44
+ isNonResizable = false;
45
+ keepFocusOnEscape = false;
46
+ size = "medium";
47
+ rows = 4;
48
+ hasFocus = false;
49
+ hasHighlight = false;
50
+ styles = index.ce({
51
+ slots: {
52
+ wrapper: "group flex",
53
+ input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
56
54
  outline-none transition transition-all duration-150 appearance-none`
57
- },
58
- variants: {
59
- hasError: {
60
- true: {
61
- input: "border-red-85"
62
- },
63
- false: {
64
- input: "border-neutral-90"
65
- }
66
- },
67
- hasHighlight: {
68
- true: {
69
- input: "border-neutral-35"
70
- }
71
- },
72
- borderless: {
73
- true: { input: "border-0" },
74
- false: { input: "border" }
55
+ },
56
+ variants: {
57
+ hasError: {
58
+ true: {
59
+ input: "border-red-85"
75
60
  },
76
- isReadonly: {
77
- true: { input: "cursor-not-allowed" }
78
- },
79
- isDisabled: {
80
- true: {
81
- input: "text-neutral-60 cursor-not-allowed"
82
- },
83
- false: { input: "text-neutral-20" }
84
- },
85
- isFullWidth: {
86
- true: { wrapper: "w-full" },
87
- false: { wrapper: "w-[350px]" }
61
+ false: {
62
+ input: "border-neutral-90"
63
+ }
64
+ },
65
+ hasHighlight: {
66
+ true: {
67
+ input: "border-neutral-35"
68
+ }
69
+ },
70
+ borderless: {
71
+ true: { input: "border-0" },
72
+ false: { input: "border" }
73
+ },
74
+ isReadonly: {
75
+ true: { input: "cursor-not-allowed" }
76
+ },
77
+ isDisabled: {
78
+ true: {
79
+ input: "text-neutral-60 cursor-not-allowed"
88
80
  },
89
- size: {
90
- small: {
91
- input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
92
- },
93
- medium: {
94
- input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
95
- }
81
+ false: { input: "text-neutral-20" }
82
+ },
83
+ isFullWidth: {
84
+ true: { wrapper: "w-full" },
85
+ false: { wrapper: "w-[350px]" }
86
+ },
87
+ size: {
88
+ small: {
89
+ input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
96
90
  },
97
- isNonResizable: {
98
- true: {
99
- input: "resize-none"
100
- }
91
+ medium: {
92
+ input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
101
93
  }
102
94
  },
103
- compoundVariants: [
104
- {
105
- isFullWidth: false,
106
- size: "small",
107
- class: { wrapper: "w-[210px]" }
108
- },
109
- {
110
- hasHighlight: true,
111
- hasError: true,
112
- class: {
113
- input: "border-red-65"
114
- }
95
+ isNonResizable: {
96
+ true: {
97
+ input: "resize-none"
115
98
  }
116
- ]
117
- });
118
- }
99
+ }
100
+ },
101
+ compoundVariants: [
102
+ {
103
+ isFullWidth: false,
104
+ size: "small",
105
+ class: { wrapper: "w-[210px]" }
106
+ },
107
+ {
108
+ hasHighlight: true,
109
+ hasError: true,
110
+ class: {
111
+ input: "border-red-65"
112
+ }
113
+ }
114
+ ]
115
+ });
119
116
  connectedCallback() {
120
117
  super.connectedCallback();
121
118
  if (this.autofocus) {
@@ -1,11 +1,11 @@
1
- import { T as TailwindStyledElement, x, E } from '../../index-92dc158d.js';
2
- import { n, t } from '../../property-eaa52bd9.js';
3
- import { r } from '../../state-1fc9a224.js';
1
+ import { T as TailwindStyledElement, x, E } from '../../index-be30d9db.js';
2
+ import { n, t } from '../../property-23ddd718.js';
3
+ import { r } from '../../state-f46a7e17.js';
4
4
  import { c as ce } from '../../index-d14b6a34.js';
5
5
  import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-90c03edf.js';
7
7
  import '../lukso-icon/index.js';
8
- import '../../style-map-5aef4b6f.js';
8
+ import '../../style-map-129fa2d5.js';
9
9
  import '../../directive-2bb7789e.js';
10
10
 
11
11
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
@@ -23,95 +23,92 @@ var __decorateClass = (decorators, target, key, kind) => {
23
23
  };
24
24
  const FOCUS_DELAY_MS = 10;
25
25
  let LuksoTextarea = class extends TailwindStyledElement(style) {
26
- constructor() {
27
- super(...arguments);
28
- this.value = "";
29
- this.name = "";
30
- this.placeholder = "";
31
- this.label = "";
32
- this.id = "";
33
- this.ref = void 0;
34
- this.description = "";
35
- this.error = "";
36
- this.customClass = "";
37
- this.isFullWidth = false;
38
- this.isReadonly = false;
39
- this.isDisabled = false;
40
- this.autofocus = false;
41
- this.borderless = false;
42
- this.isNonResizable = false;
43
- this.keepFocusOnEscape = false;
44
- this.size = "medium";
45
- this.rows = 4;
46
- this.hasFocus = false;
47
- this.hasHighlight = false;
48
- this.styles = ce({
49
- slots: {
50
- wrapper: "group flex",
51
- input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
26
+ value = "";
27
+ name = "";
28
+ placeholder = "";
29
+ label = "";
30
+ id = "";
31
+ ref = void 0;
32
+ description = "";
33
+ error = "";
34
+ customClass = "";
35
+ isFullWidth = false;
36
+ isReadonly = false;
37
+ isDisabled = false;
38
+ autofocus = false;
39
+ borderless = false;
40
+ isNonResizable = false;
41
+ keepFocusOnEscape = false;
42
+ size = "medium";
43
+ rows = 4;
44
+ hasFocus = false;
45
+ hasHighlight = false;
46
+ styles = ce({
47
+ slots: {
48
+ wrapper: "group flex",
49
+ input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
52
50
  outline-none transition transition-all duration-150 appearance-none`
53
- },
54
- variants: {
55
- hasError: {
56
- true: {
57
- input: "border-red-85"
58
- },
59
- false: {
60
- input: "border-neutral-90"
61
- }
62
- },
63
- hasHighlight: {
64
- true: {
65
- input: "border-neutral-35"
66
- }
67
- },
68
- borderless: {
69
- true: { input: "border-0" },
70
- false: { input: "border" }
51
+ },
52
+ variants: {
53
+ hasError: {
54
+ true: {
55
+ input: "border-red-85"
71
56
  },
72
- isReadonly: {
73
- true: { input: "cursor-not-allowed" }
74
- },
75
- isDisabled: {
76
- true: {
77
- input: "text-neutral-60 cursor-not-allowed"
78
- },
79
- false: { input: "text-neutral-20" }
80
- },
81
- isFullWidth: {
82
- true: { wrapper: "w-full" },
83
- false: { wrapper: "w-[350px]" }
57
+ false: {
58
+ input: "border-neutral-90"
59
+ }
60
+ },
61
+ hasHighlight: {
62
+ true: {
63
+ input: "border-neutral-35"
64
+ }
65
+ },
66
+ borderless: {
67
+ true: { input: "border-0" },
68
+ false: { input: "border" }
69
+ },
70
+ isReadonly: {
71
+ true: { input: "cursor-not-allowed" }
72
+ },
73
+ isDisabled: {
74
+ true: {
75
+ input: "text-neutral-60 cursor-not-allowed"
84
76
  },
85
- size: {
86
- small: {
87
- input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
88
- },
89
- medium: {
90
- input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
91
- }
77
+ false: { input: "text-neutral-20" }
78
+ },
79
+ isFullWidth: {
80
+ true: { wrapper: "w-full" },
81
+ false: { wrapper: "w-[350px]" }
82
+ },
83
+ size: {
84
+ small: {
85
+ input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
92
86
  },
93
- isNonResizable: {
94
- true: {
95
- input: "resize-none"
96
- }
87
+ medium: {
88
+ input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
97
89
  }
98
90
  },
99
- compoundVariants: [
100
- {
101
- isFullWidth: false,
102
- size: "small",
103
- class: { wrapper: "w-[210px]" }
104
- },
105
- {
106
- hasHighlight: true,
107
- hasError: true,
108
- class: {
109
- input: "border-red-65"
110
- }
91
+ isNonResizable: {
92
+ true: {
93
+ input: "resize-none"
111
94
  }
112
- ]
113
- });
114
- }
95
+ }
96
+ },
97
+ compoundVariants: [
98
+ {
99
+ isFullWidth: false,
100
+ size: "small",
101
+ class: { wrapper: "w-[210px]" }
102
+ },
103
+ {
104
+ hasHighlight: true,
105
+ hasError: true,
106
+ class: {
107
+ input: "border-red-65"
108
+ }
109
+ }
110
+ ]
111
+ });
115
112
  connectedCallback() {
116
113
  super.connectedCallback();
117
114
  if (this.autofocus) {