@helpwave/hightide 0.6.7 → 0.6.8

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.
@@ -2832,7 +2832,7 @@
2832
2832
  }
2833
2833
  }
2834
2834
  @layer components {
2835
- [data-name="input"]:not(.default-style-none) {
2835
+ [data-name="input"] {
2836
2836
  height: calc(var(--spacing) * 10);
2837
2837
  &:focus-visible {
2838
2838
  border-style: var(--tw-border-style);
@@ -2891,7 +2891,7 @@
2891
2891
  padding-inline: calc(var(--spacing) * 3);
2892
2892
  padding-block: calc(var(--spacing) * 2);
2893
2893
  }
2894
- [data-name="select-button"]:not(.default-style-none) {
2894
+ [data-name="select-button"] {
2895
2895
  display: flex;
2896
2896
  flex-direction: row;
2897
2897
  column-gap: calc(var(--spacing) * 2);
@@ -2961,7 +2961,7 @@
2961
2961
  }
2962
2962
  }
2963
2963
  }
2964
- [data-name="select-button-chips"]:not(.default-style-none) {
2964
+ [data-name="select-button-chips"] {
2965
2965
  display: flex;
2966
2966
  &:focus-visible {
2967
2967
  border-style: var(--tw-border-style);
@@ -3067,6 +3067,7 @@
3067
3067
  text-overflow: ellipsis;
3068
3068
  }
3069
3069
  .table-header-cell {
3070
+ position: relative;
3070
3071
  padding-inline: calc(var(--spacing) * 3);
3071
3072
  padding-block: calc(var(--spacing) * 2.5);
3072
3073
  &:first-child {
@@ -3106,6 +3107,13 @@
3106
3107
  background-color: var(--color-table-row-hover-background);
3107
3108
  }
3108
3109
  }
3110
+ &[data-clickable] {
3111
+ &:hover {
3112
+ @media (hover: hover) {
3113
+ cursor: pointer;
3114
+ }
3115
+ }
3116
+ }
3109
3117
  }
3110
3118
  .table-body-filler-row {
3111
3119
  &:hover {
@@ -3755,7 +3763,7 @@
3755
3763
  }
3756
3764
  }
3757
3765
  @layer components {
3758
- [data-name="expandable-root"]:not(.default-style-none) {
3766
+ [data-name="expandable-root"] {
3759
3767
  display: flex;
3760
3768
  flex-direction: column;
3761
3769
  row-gap: calc(var(--spacing) * 0);
@@ -3782,7 +3790,7 @@
3782
3790
  cursor: pointer;
3783
3791
  }
3784
3792
  }
3785
- [data-name="expandable-header"]:not(.default-style-none) {
3793
+ [data-name="expandable-header"] {
3786
3794
  display: flex;
3787
3795
  flex-direction: row;
3788
3796
  column-gap: calc(var(--spacing) * 2);
@@ -3838,7 +3846,7 @@
3838
3846
  --coloring-text-hover: transparent;
3839
3847
  }
3840
3848
  }
3841
- [data-name="expandable-content"]:not(.default-style-none) {
3849
+ [data-name="expandable-content"] {
3842
3850
  display: flex;
3843
3851
  flex-direction: column;
3844
3852
  row-gap: calc(var(--spacing) * 2);
@@ -3873,7 +3881,7 @@
3873
3881
  }
3874
3882
  }
3875
3883
  @layer components {
3876
- [data-name="expansion-icon"]:not(.default-style-none) {
3884
+ [data-name="expansion-icon"] {
3877
3885
  display: flex;
3878
3886
  flex-direction: column;
3879
3887
  row-gap: calc(var(--spacing) * 0);
@@ -3903,7 +3911,7 @@
3903
3911
  }
3904
3912
  }
3905
3913
  @layer components {
3906
- [data-name="checkbox"]:not(.default-style-none) {
3914
+ .checkbox {
3907
3915
  display: flex;
3908
3916
  flex-direction: column;
3909
3917
  row-gap: calc(var(--spacing) * 0);
@@ -3979,19 +3987,31 @@
3979
3987
  }
3980
3988
  }
3981
3989
  &[data-size="sm"] {
3982
- width: calc(var(--spacing) * 5);
3983
3990
  height: calc(var(--spacing) * 5);
3991
+ min-height: calc(var(--spacing) * 5);
3992
+ max-height: calc(var(--spacing) * 5);
3993
+ width: calc(var(--spacing) * 5);
3994
+ min-width: calc(var(--spacing) * 5);
3995
+ max-width: calc(var(--spacing) * 5);
3984
3996
  }
3985
3997
  &[data-size="md"] {
3986
- width: calc(var(--spacing) * 6);
3987
3998
  height: calc(var(--spacing) * 6);
3999
+ min-height: calc(var(--spacing) * 6);
4000
+ max-height: calc(var(--spacing) * 6);
4001
+ width: calc(var(--spacing) * 6);
4002
+ min-width: calc(var(--spacing) * 6);
4003
+ max-width: calc(var(--spacing) * 6);
3988
4004
  }
3989
4005
  &[data-size="lg"] {
3990
- width: calc(var(--spacing) * 8);
3991
4006
  height: calc(var(--spacing) * 8);
4007
+ min-height: calc(var(--spacing) * 8);
4008
+ max-height: calc(var(--spacing) * 8);
4009
+ width: calc(var(--spacing) * 8);
4010
+ min-width: calc(var(--spacing) * 8);
4011
+ max-width: calc(var(--spacing) * 8);
3992
4012
  }
3993
4013
  }
3994
- [data-name="checkbox-indicator"]:not(.default-style-none) {
4014
+ .checkbox-indicator {
3995
4015
  height: 100%;
3996
4016
  width: 100%;
3997
4017
  &[data-size="sm"] {
@@ -4310,7 +4330,7 @@
4310
4330
  }
4311
4331
  }
4312
4332
  @layer components {
4313
- [data-name="textarea"]:not(.default-style-none) {
4333
+ [data-name="textarea"] {
4314
4334
  height: calc(var(--spacing) * 32);
4315
4335
  width: 100%;
4316
4336
  &:focus-visible {
@@ -4567,13 +4587,13 @@
4567
4587
  }
4568
4588
  }
4569
4589
  @layer components {
4570
- [data-name="property-root"]:not(.default-style-none) {
4590
+ [data-name="property-root"] {
4571
4591
  display: flex;
4572
4592
  flex-direction: row;
4573
4593
  column-gap: calc(var(--spacing) * 0);
4574
4594
  border-radius: var(--radius-xl);
4575
4595
  }
4576
- [data-name="property-root"]:not(.default-style-none) {
4596
+ [data-name="property-root"] {
4577
4597
  transition: outline-offset var(--animation-duration-in, 250ms);
4578
4598
  outline-offset: 0;
4579
4599
  &:hover {
@@ -4598,7 +4618,7 @@
4598
4618
  }
4599
4619
  }
4600
4620
  }
4601
- [data-name="property-title"]:not(.default-style-none) {
4621
+ [data-name="property-title"] {
4602
4622
  display: flex;
4603
4623
  flex-direction: row;
4604
4624
  column-gap: calc(var(--spacing) * 2);
@@ -4624,11 +4644,11 @@
4624
4644
  color: var(--color-on-warning);
4625
4645
  }
4626
4646
  }
4627
- [data-name="property-title-icon"]:not(.default-style-none) {
4647
+ [data-name="property-title-icon"] {
4628
4648
  max-width: calc(var(--spacing) * 6);
4629
4649
  min-width: calc(var(--spacing) * 6);
4630
4650
  }
4631
- [data-name="property-title-text"]:not(.default-style-none) {
4651
+ [data-name="property-title-text"] {
4632
4652
  min-width: calc(var(--spacing) * 0);
4633
4653
  overflow: hidden;
4634
4654
  text-overflow: ellipsis;
@@ -4636,7 +4656,7 @@
4636
4656
  --tw-font-weight: var(--font-weight-semibold);
4637
4657
  font-weight: var(--font-weight-semibold);
4638
4658
  }
4639
- [data-name="property-content"]:not(.default-style-none) {
4659
+ [data-name="property-content"] {
4640
4660
  display: flex;
4641
4661
  flex-direction: row;
4642
4662
  column-gap: calc(var(--spacing) * 2);
@@ -4661,14 +4681,14 @@
4661
4681
  background-color: var(--color-surface-warning);
4662
4682
  }
4663
4683
  }
4664
- [data-name="property-actions"]:not(.default-style-none) {
4684
+ [data-name="property-actions"] {
4665
4685
  display: flex;
4666
4686
  flex-direction: row;
4667
4687
  column-gap: calc(var(--spacing) * 2);
4668
4688
  align-items: center;
4669
4689
  gap: calc(var(--spacing) * 1);
4670
4690
  }
4671
- [data-name="property-input-wrapper"]:not(.default-style-none) {
4691
+ [data-name="property-input-wrapper"] {
4672
4692
  position: relative;
4673
4693
  display: flex;
4674
4694
  flex-direction: row;
@@ -4682,7 +4702,7 @@
4682
4702
  }
4683
4703
  }
4684
4704
  }
4685
- [data-name="property-input"]:not(.default-style-none) {
4705
+ [data-name="property-input"] {
4686
4706
  border-radius: 0.25rem;
4687
4707
  padding: calc(var(--spacing) * 1);
4688
4708
  &[data-invalid] {
@@ -4692,7 +4712,7 @@
4692
4712
  }
4693
4713
  }
4694
4714
  }
4695
- [data-name="property-suffix"]:not(.default-style-none) {
4715
+ [data-name="property-suffix"] {
4696
4716
  position: absolute;
4697
4717
  top: calc(1/2 * 100%);
4698
4718
  right: calc(var(--spacing) * 2);
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-name="checkbox"]:not(.default-style-none) {
2
+ .checkbox {
3
3
  @apply flex-col-0 items-center justify-center rounded border-2;
4
4
  &:not([data-disabled]) {
5
5
  @apply hover:cursor-pointer;
@@ -25,16 +25,17 @@
25
25
  }
26
26
 
27
27
  &[data-size="sm"] {
28
- @apply size-5;
28
+ @apply size-force-5;
29
29
  }
30
30
  &[data-size="md"] {
31
- @apply size-6;
31
+ @apply size-force-6;
32
32
  }
33
33
  &[data-size="lg"] {
34
- @apply size-8;
34
+ @apply size-force-8;
35
35
  }
36
36
  }
37
- [data-name="checkbox-indicator"]:not(.default-style-none) {
37
+
38
+ .checkbox-indicator{
38
39
  @apply w-full h-full;
39
40
  &[data-size="sm"] {
40
41
  @apply stroke-3;
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-name="expandable-root"]:not(.default-style-none) {
2
+ [data-name="expandable-root"] {
3
3
  @apply flex-col-0 surface coloring-solid rounded-lg shadow-sm;
4
4
 
5
5
  &:not([data-disabled])[data-containertoggleable] {
@@ -7,7 +7,7 @@
7
7
  }
8
8
  }
9
9
 
10
- [data-name="expandable-header"]:not(.default-style-none) {
10
+ [data-name="expandable-header"] {
11
11
  @apply flex-row-2 justify-between items-center py-2 px-4 rounded-lg select-none;
12
12
 
13
13
  &:not([data-disabled]) {
@@ -19,7 +19,7 @@
19
19
  }
20
20
  }
21
21
 
22
- [data-name="expandable-content"]:not(.default-style-none) {
22
+ [data-name="expandable-content"] {
23
23
  @apply flex-col-2 px-4 transition-all ease-in-out h-24;
24
24
 
25
25
  &[data-state="opening"],
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-name="expansion-icon"]:not(.default-style-none) {
2
+ [data-name="expansion-icon"] {
3
3
  @apply flex-col-0 items-center justify-center size-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out;
4
4
 
5
5
  &[data-expanded] {
@@ -33,18 +33,18 @@
33
33
 
34
34
  /* input-elements */
35
35
  @layer components {
36
- [data-name="input"]:not(.default-style-none) {
36
+ [data-name="input"] {
37
37
  @apply px-3 py-2 rounded-md h-10 input-element;
38
38
  }
39
39
 
40
- [data-name="select-button"]:not(.default-style-none) {
40
+ [data-name="select-button"] {
41
41
  @apply flex-row-2 items-center justify-between rounded-md px-3 py-2 input-element;
42
42
  &:not([data-disabled]) {
43
43
  @apply hover:cursor-pointer;
44
44
  }
45
45
  }
46
46
 
47
- [data-name="select-button-chips"]:not(.default-style-none) {
47
+ [data-name="select-button-chips"] {
48
48
  @apply flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5 input-element;
49
49
  &:not([data-disabled]) {
50
50
  @apply hover:cursor-pointer;
@@ -1,9 +1,9 @@
1
1
  @layer components {
2
- [data-name="property-root"]:not(.default-style-none) {
2
+ [data-name="property-root"] {
3
3
  @apply flex-row-0 rounded-xl;
4
4
  }
5
5
 
6
- [data-name="property-root"]:not(.default-style-none) {
6
+ [data-name="property-root"] {
7
7
  transition: outline-offset var(--animation-duration-in, 250ms);
8
8
  outline-offset: 0;
9
9
 
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
 
37
- [data-name="property-title"]:not(.default-style-none) {
37
+ [data-name="property-title"] {
38
38
  @apply flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center justify-between rounded-l-xl border-2 border-r-0;
39
39
 
40
40
  &:not([data-invalid]) {
@@ -47,15 +47,15 @@
47
47
  }
48
48
 
49
49
 
50
- [data-name="property-title-icon"]:not(.default-style-none) {
50
+ [data-name="property-title-icon"] {
51
51
  @apply max-w-6 min-w-6;
52
52
  }
53
53
 
54
- [data-name="property-title-text"]:not(.default-style-none) {
54
+ [data-name="property-title-text"] {
55
55
  @apply font-semibold truncate min-w-0;
56
56
  }
57
57
 
58
- [data-name="property-content"]:not(.default-style-none) {
58
+ [data-name="property-content"] {
59
59
  @apply flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15;
60
60
 
61
61
  &:not([data-invalid]) {
@@ -67,11 +67,11 @@
67
67
  }
68
68
  }
69
69
 
70
- [data-name="property-actions"]:not(.default-style-none) {
70
+ [data-name="property-actions"] {
71
71
  @apply flex-row-2 items-center gap-1;
72
72
  }
73
73
 
74
- [data-name="property-input-wrapper"]:not(.default-style-none) {
74
+ [data-name="property-input-wrapper"] {
75
75
  @apply relative flex-row-2 w-full;
76
76
 
77
77
  &[data-invalid] {
@@ -84,7 +84,7 @@
84
84
  }
85
85
  }
86
86
 
87
- [data-name="property-input"]:not(.default-style-none) {
87
+ [data-name="property-input"] {
88
88
  @apply rounded p-1;
89
89
 
90
90
  &[data-invalid] {
@@ -92,7 +92,7 @@
92
92
  }
93
93
  }
94
94
 
95
- [data-name="property-suffix"]:not(.default-style-none) {
95
+ [data-name="property-suffix"] {
96
96
  @apply absolute top-1/2 -translate-y-1/2 right-2;
97
97
 
98
98
  &[data-invalid] {
@@ -17,6 +17,7 @@
17
17
  }
18
18
 
19
19
  .table-header-cell {
20
+ @apply relative;
20
21
  @apply px-3 first:pl-6 last:pr-6 py-2.5;
21
22
  @apply border-y-1 first:border-l-1 last:border-r-1;
22
23
  @apply first:rounded-tl-lg last:rounded-tr-lg;
@@ -29,6 +30,9 @@
29
30
 
30
31
  .table-body-row {
31
32
  @apply hover:bg-table-row-hover-background;
33
+ &[data-clickable] {
34
+ @apply hover:cursor-pointer;
35
+ }
32
36
  }
33
37
 
34
38
  .table-body-filler-row {
@@ -1,5 +1,5 @@
1
1
  @layer components {
2
- [data-name="textarea"]:not(.default-style-none) {
2
+ [data-name="textarea"] {
3
3
  @apply w-full h-32 py-2 px-3 rounded-md resize-none overflow-y-scroll input-element;
4
4
  }
5
5
  }
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "url": "git+https://github.com/helpwave/hightide.git"
8
8
  },
9
9
  "license": "MPL-2.0",
10
- "version": "0.6.7",
10
+ "version": "0.6.8",
11
11
  "files": [
12
12
  "dist"
13
13
  ],