@helpwave/hightide 0.8.0 → 0.8.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.
- package/dist/index.d.mts +47 -23
- package/dist/index.d.ts +47 -23
- package/dist/index.js +363 -310
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +538 -478
- package/dist/index.mjs.map +1 -1
- package/dist/style/globals.css +78 -0
- package/dist/style/uncompiled/theme/components/date-time-input.css +7 -0
- package/dist/style/uncompiled/theme/components/index.css +2 -1
- package/package.json +1 -1
package/dist/style/globals.css
CHANGED
|
@@ -958,6 +958,9 @@
|
|
|
958
958
|
.gap-4 {
|
|
959
959
|
gap: calc(var(--spacing) * 4);
|
|
960
960
|
}
|
|
961
|
+
.gap-8 {
|
|
962
|
+
gap: calc(var(--spacing) * 8);
|
|
963
|
+
}
|
|
961
964
|
.gap-x-1 {
|
|
962
965
|
column-gap: calc(var(--spacing) * 1);
|
|
963
966
|
}
|
|
@@ -5081,6 +5084,81 @@
|
|
|
5081
5084
|
}
|
|
5082
5085
|
}
|
|
5083
5086
|
}
|
|
5087
|
+
@layer components {
|
|
5088
|
+
[data-name="date-time-input"] {
|
|
5089
|
+
display: flex;
|
|
5090
|
+
flex-direction: row;
|
|
5091
|
+
column-gap: calc(var(--spacing) * 2);
|
|
5092
|
+
height: var(--spacing-element-md);
|
|
5093
|
+
width: 100%;
|
|
5094
|
+
border-style: var(--tw-border-style);
|
|
5095
|
+
border-width: 2px;
|
|
5096
|
+
--focus-outline: none;
|
|
5097
|
+
--focus-outline-offset: 0;
|
|
5098
|
+
--focus-outline-transition: none;
|
|
5099
|
+
--focus-box-shadow: none;
|
|
5100
|
+
--focus-border-color: inherit;
|
|
5101
|
+
--focus-border-color: var(--color-focus);
|
|
5102
|
+
--focus-box-shadow: 0 0 8px 2px color-mix(in srgb, #694BB4 70%, transparent);
|
|
5103
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
5104
|
+
--focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, transparent);
|
|
5105
|
+
}
|
|
5106
|
+
&:not([data-disabled]):not([data-invalid]) {
|
|
5107
|
+
background-color: var(--color-input-background);
|
|
5108
|
+
&:hover {
|
|
5109
|
+
@media (hover: hover) {
|
|
5110
|
+
border-color: var(--color-primary-hover);
|
|
5111
|
+
}
|
|
5112
|
+
}
|
|
5113
|
+
&:not([data-value]) {
|
|
5114
|
+
color: var(--color-placeholder);
|
|
5115
|
+
}
|
|
5116
|
+
&[data-value] {
|
|
5117
|
+
color: var(--color-input-text);
|
|
5118
|
+
}
|
|
5119
|
+
}
|
|
5120
|
+
&:not([data-disabled])[data-invalid] {
|
|
5121
|
+
border-color: var(--color-negative);
|
|
5122
|
+
background-color: color-mix(in srgb, #DC576D 20%, transparent);
|
|
5123
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
5124
|
+
background-color: color-mix(in oklab, var(--color-negative) 20%, transparent);
|
|
5125
|
+
}
|
|
5126
|
+
&:hover {
|
|
5127
|
+
@media (hover: hover) {
|
|
5128
|
+
border-color: var(--color-negative-hover);
|
|
5129
|
+
}
|
|
5130
|
+
}
|
|
5131
|
+
--color-focus: var(--color-negative);
|
|
5132
|
+
&[data-value] {
|
|
5133
|
+
color: var(--color-negative);
|
|
5134
|
+
}
|
|
5135
|
+
&:not([data-value]) {
|
|
5136
|
+
color: var(--color-placeholder);
|
|
5137
|
+
}
|
|
5138
|
+
}
|
|
5139
|
+
&[data-disabled] {
|
|
5140
|
+
cursor: not-allowed;
|
|
5141
|
+
border-color: var(--color-disabled);
|
|
5142
|
+
background-color: var(--color-disabled);
|
|
5143
|
+
color: var(--color-on-disabled);
|
|
5144
|
+
&::placeholder {
|
|
5145
|
+
color: transparent;
|
|
5146
|
+
}
|
|
5147
|
+
}
|
|
5148
|
+
align-items: center;
|
|
5149
|
+
justify-content: space-between;
|
|
5150
|
+
border-radius: var(--radius-md);
|
|
5151
|
+
padding-inline: calc(var(--spacing) * 3);
|
|
5152
|
+
padding-right: calc(var(--spacing) * 10);
|
|
5153
|
+
&:hover {
|
|
5154
|
+
cursor: pointer;
|
|
5155
|
+
}
|
|
5156
|
+
&[type="date"]::-webkit-calendar-picker-indicator, &[type="datetime-local"]::-webkit-calendar-picker-indicator, &[type="time"]::-webkit-calendar-picker-indicator {
|
|
5157
|
+
display: none;
|
|
5158
|
+
-webkit-appearance: none;
|
|
5159
|
+
}
|
|
5160
|
+
}
|
|
5161
|
+
}
|
|
5084
5162
|
:root {
|
|
5085
5163
|
--spacing: 0.25rem;
|
|
5086
5164
|
--drawer-indent: calc(4 * var(--spacing));
|
|
@@ -5,5 +5,12 @@
|
|
|
5
5
|
&:hover {
|
|
6
6
|
@apply cursor-pointer;
|
|
7
7
|
}
|
|
8
|
+
|
|
9
|
+
&[type="date"]::-webkit-calendar-picker-indicator,
|
|
10
|
+
&[type="datetime-local"]::-webkit-calendar-picker-indicator,
|
|
11
|
+
&[type="time"]::-webkit-calendar-picker-indicator {
|
|
12
|
+
display: none;
|
|
13
|
+
-webkit-appearance: none;
|
|
14
|
+
}
|
|
8
15
|
}
|
|
9
16
|
}
|