@nexus-cross/design-system 1.0.8 → 1.0.10
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/chunks/{chunk-OE5BAEBE.js → chunk-6MT6Y6OF.js} +1 -1
- package/dist/chunks/{chunk-22O6YUYH.mjs → chunk-BMYFRG3M.mjs} +1 -1
- package/dist/chunks/chunk-FBC53TOS.mjs +99 -0
- package/dist/chunks/{chunk-2N2EPBO4.js → chunk-LTS674LF.js} +45 -43
- package/dist/chunks/{chunk-7G65JBTN.js → chunk-OX5MEJ7B.js} +2 -0
- package/dist/chunks/{chunk-DO6VK2QQ.mjs → chunk-QOREDNWO.mjs} +2 -0
- package/dist/components/DatePicker.d.ts.map +1 -1
- package/dist/components/Select.d.ts.map +1 -1
- package/dist/date-picker.js +2 -2
- package/dist/date-picker.mjs +1 -1
- package/dist/index.js +7 -7
- package/dist/index.mjs +2 -2
- package/dist/select.js +5 -5
- package/dist/select.mjs +1 -1
- package/dist/styles/.generated/built.d.ts +1 -1
- package/dist/styles/.generated/built.d.ts.map +1 -1
- package/dist/styles/layer.js +2 -2
- package/dist/styles/layer.mjs +1 -1
- package/dist/styles.css +137 -50
- package/dist/styles.js +2 -2
- package/dist/styles.layered.css +137 -50
- package/dist/styles.mjs +1 -1
- package/package.json +2 -2
- package/dist/chunks/chunk-FUIBYZZ4.mjs +0 -98
package/dist/styles/layer.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk6MT6Y6OF_js = require('../chunks/chunk-6MT6Y6OF.js');
|
|
4
4
|
require('../chunks/chunk-JNMCYWGY.js');
|
|
5
5
|
|
|
6
6
|
// src/styles/inject-layer.ts
|
|
@@ -9,7 +9,7 @@ var __nexus_styles_injected__ = typeof document !== "undefined" && !document.get
|
|
|
9
9
|
const style = document.createElement("style");
|
|
10
10
|
style.id = STYLE_ID;
|
|
11
11
|
style.textContent = `@layer nexus {
|
|
12
|
-
${
|
|
12
|
+
${chunk6MT6Y6OF_js.built_default}
|
|
13
13
|
}`;
|
|
14
14
|
document.head.appendChild(style);
|
|
15
15
|
return true;
|
package/dist/styles/layer.mjs
CHANGED
package/dist/styles.css
CHANGED
|
@@ -1993,7 +1993,14 @@
|
|
|
1993
1993
|
transition-duration: 200ms;
|
|
1994
1994
|
}
|
|
1995
1995
|
.nexus-select-trigger:hover {
|
|
1996
|
-
border-color: var(--color-border-
|
|
1996
|
+
border-color: var(--color-border-default-hover);
|
|
1997
|
+
box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
|
|
1998
|
+
}
|
|
1999
|
+
.nexus-select-trigger--open,
|
|
2000
|
+
.nexus-select-trigger:focus-within {
|
|
2001
|
+
outline: none;
|
|
2002
|
+
border-color: var(--color-accent-primary);
|
|
2003
|
+
box-shadow: 0 0 0 0.5px var(--color-accent-primary);
|
|
1997
2004
|
}
|
|
1998
2005
|
.nexus-select-trigger:has(:disabled) {
|
|
1999
2006
|
cursor: not-allowed;
|
|
@@ -3901,27 +3908,34 @@
|
|
|
3901
3908
|
═══════════════════════════════════════════ */
|
|
3902
3909
|
|
|
3903
3910
|
.nexus-datepicker {
|
|
3904
|
-
position: relative;
|
|
3905
3911
|
display: inline-block;
|
|
3906
3912
|
}
|
|
3913
|
+
|
|
3914
|
+
/* — Trigger — */
|
|
3907
3915
|
.nexus-datepicker__trigger {
|
|
3908
3916
|
display: inline-flex;
|
|
3909
3917
|
align-items: center;
|
|
3910
3918
|
gap: var(--spacing-gap-sm, 0.5rem);
|
|
3911
3919
|
padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
|
|
3912
|
-
border: var(--border-width-stroke-default, 1px) solid
|
|
3913
|
-
var(--color-border-default);
|
|
3920
|
+
border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
|
|
3914
3921
|
border-radius: var(--radius-corner-md, 0.5rem);
|
|
3915
3922
|
background: var(--color-surface-default);
|
|
3916
3923
|
font: inherit;
|
|
3917
3924
|
font-size: var(--text-text-sm, 0.875rem);
|
|
3918
3925
|
color: var(--color-text-primary);
|
|
3919
3926
|
cursor: pointer;
|
|
3920
|
-
transition: border-color 150ms;
|
|
3927
|
+
transition: border-color 150ms, box-shadow 150ms;
|
|
3921
3928
|
min-width: 10rem;
|
|
3922
3929
|
}
|
|
3923
3930
|
.nexus-datepicker__trigger:hover {
|
|
3924
3931
|
border-color: var(--color-border-default-hover);
|
|
3932
|
+
box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
|
|
3933
|
+
}
|
|
3934
|
+
.nexus-datepicker__trigger:focus-visible,
|
|
3935
|
+
.nexus-datepicker__trigger[data-state='open'] {
|
|
3936
|
+
outline: none;
|
|
3937
|
+
border-color: var(--color-accent-primary);
|
|
3938
|
+
box-shadow: 0 0 0 0.5px var(--color-accent-primary);
|
|
3925
3939
|
}
|
|
3926
3940
|
.nexus-datepicker__trigger:disabled {
|
|
3927
3941
|
opacity: var(--opacity-disabled-element, 0.4);
|
|
@@ -3930,126 +3944,199 @@
|
|
|
3930
3944
|
.nexus-datepicker__trigger--placeholder span {
|
|
3931
3945
|
color: var(--color-text-muted);
|
|
3932
3946
|
}
|
|
3947
|
+
.nexus-datepicker__trigger--has-value {
|
|
3948
|
+
border-color: var(--color-border-default-hover);
|
|
3949
|
+
}
|
|
3933
3950
|
.nexus-datepicker__icon {
|
|
3934
3951
|
width: var(--size-icon-sm, 1rem);
|
|
3935
3952
|
height: var(--size-icon-sm, 1rem);
|
|
3936
3953
|
flex-shrink: 0;
|
|
3937
3954
|
color: var(--color-icon-secondary);
|
|
3955
|
+
transition: color 150ms;
|
|
3938
3956
|
}
|
|
3957
|
+
|
|
3958
|
+
/* — Popover (Radix Portal 기반 — position은 Radix가 인라인으로 처리) — */
|
|
3939
3959
|
.nexus-datepicker__popover {
|
|
3940
|
-
position: absolute;
|
|
3941
|
-
top: calc(100% + 4px);
|
|
3942
|
-
left: 0;
|
|
3943
3960
|
z-index: var(--z-index-layer-popover, 30);
|
|
3944
3961
|
background: var(--color-surface-default);
|
|
3945
|
-
border: var(--border-width-stroke-default, 1px) solid
|
|
3946
|
-
var(--color-border-default);
|
|
3962
|
+
border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
|
|
3947
3963
|
border-radius: var(--radius-corner-lg, 0.75rem);
|
|
3948
|
-
box-shadow: var(--shadow-
|
|
3949
|
-
padding: var(--spacing-padding-sm, 0.75rem);
|
|
3950
|
-
animation: nexus-
|
|
3964
|
+
box-shadow: var(--shadow-xl, 0 4px 15px -3px rgb(0 0 0 / 0.12));
|
|
3965
|
+
padding: var(--spacing-padding-sm, 0.75rem) var(--spacing-padding-md, 1rem) var(--spacing-padding-md, 1rem);
|
|
3966
|
+
animation: nexus-datepicker-enter-bottom 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
3951
3967
|
}
|
|
3952
3968
|
|
|
3969
|
+
/* — Calendar — */
|
|
3953
3970
|
.nexus-calendar {
|
|
3971
|
+
position: relative;
|
|
3954
3972
|
font-size: var(--text-text-sm, 0.875rem);
|
|
3955
3973
|
}
|
|
3956
3974
|
.nexus-calendar__months {
|
|
3957
3975
|
display: flex;
|
|
3958
3976
|
flex-direction: column;
|
|
3959
|
-
gap: var(--spacing-gap-sm, 0.5rem);
|
|
3960
3977
|
}
|
|
3978
|
+
|
|
3979
|
+
/* — Caption (Month/Year) — 왼쪽 정렬, nav과 같은 줄 */
|
|
3961
3980
|
.nexus-calendar__caption {
|
|
3962
3981
|
display: flex;
|
|
3963
|
-
justify-content: center;
|
|
3964
3982
|
align-items: center;
|
|
3965
|
-
|
|
3966
|
-
font-weight: var(--font-weight-
|
|
3983
|
+
height: 2.5rem;
|
|
3984
|
+
font-weight: var(--font-weight-heading-h6, 600);
|
|
3985
|
+
font-size: var(--text-text-base, 1rem);
|
|
3967
3986
|
color: var(--color-text-primary);
|
|
3987
|
+
letter-spacing: -0.01em;
|
|
3968
3988
|
}
|
|
3989
|
+
|
|
3990
|
+
/* — Nav Buttons — 오른쪽, 캡션과 수직 중앙 정렬 */
|
|
3969
3991
|
.nexus-calendar__nav {
|
|
3992
|
+
position: absolute;
|
|
3993
|
+
top: 0;
|
|
3994
|
+
right: 0;
|
|
3995
|
+
height: 2.5rem;
|
|
3970
3996
|
display: flex;
|
|
3997
|
+
align-items: center;
|
|
3971
3998
|
gap: var(--spacing-gap-xs, 0.25rem);
|
|
3972
3999
|
}
|
|
3973
4000
|
.nexus-calendar__nav-btn {
|
|
3974
4001
|
display: inline-flex;
|
|
3975
4002
|
align-items: center;
|
|
3976
4003
|
justify-content: center;
|
|
3977
|
-
width:
|
|
3978
|
-
height:
|
|
4004
|
+
width: 2rem;
|
|
4005
|
+
height: 2rem;
|
|
3979
4006
|
border: none;
|
|
3980
4007
|
background: transparent;
|
|
3981
|
-
border-radius: var(--radius-corner-
|
|
4008
|
+
border-radius: var(--radius-corner-full, 9999px);
|
|
3982
4009
|
cursor: pointer;
|
|
3983
|
-
color: var(--color-icon-
|
|
3984
|
-
transition: background 150ms;
|
|
4010
|
+
color: var(--color-icon-tertiary);
|
|
4011
|
+
transition: background 150ms, color 150ms;
|
|
4012
|
+
}
|
|
4013
|
+
.nexus-calendar__nav-btn svg {
|
|
4014
|
+
width: 1.125rem;
|
|
4015
|
+
height: 1.125rem;
|
|
4016
|
+
stroke-width: 2;
|
|
3985
4017
|
}
|
|
3986
4018
|
.nexus-calendar__nav-btn:hover {
|
|
3987
|
-
background: var(--color-
|
|
4019
|
+
background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
|
|
4020
|
+
color: var(--color-accent-primary);
|
|
3988
4021
|
}
|
|
4022
|
+
.nexus-calendar__nav-btn:active {
|
|
4023
|
+
background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
|
|
4024
|
+
}
|
|
4025
|
+
|
|
4026
|
+
/* — Grid — table 고유 레이아웃 사용 (빈 셀도 너비 유지) */
|
|
3989
4027
|
.nexus-calendar__grid {
|
|
3990
4028
|
width: 100%;
|
|
3991
|
-
border-collapse:
|
|
3992
|
-
|
|
3993
|
-
.nexus-calendar__head-row {
|
|
3994
|
-
display: flex;
|
|
4029
|
+
border-collapse: separate;
|
|
4030
|
+
border-spacing: 0 2px;
|
|
3995
4031
|
}
|
|
4032
|
+
|
|
4033
|
+
/* — Weekday Header — */
|
|
3996
4034
|
.nexus-calendar__head-cell {
|
|
3997
|
-
width:
|
|
4035
|
+
width: 2.5rem;
|
|
4036
|
+
height: 2.25rem;
|
|
3998
4037
|
text-align: center;
|
|
4038
|
+
vertical-align: middle;
|
|
3999
4039
|
font-size: var(--text-text-xs, 0.75rem);
|
|
4000
|
-
font-weight: var(--font-weight-
|
|
4001
|
-
color: var(--color-text-
|
|
4002
|
-
padding: var(--spacing-padding-2xs, 0.25rem) 0;
|
|
4003
|
-
}
|
|
4004
|
-
.nexus-calendar__row {
|
|
4005
|
-
display: flex;
|
|
4040
|
+
font-weight: var(--font-weight-label-md, 500);
|
|
4041
|
+
color: var(--color-text-secondary);
|
|
4006
4042
|
}
|
|
4043
|
+
|
|
4044
|
+
/* — Day Cell — */
|
|
4007
4045
|
.nexus-calendar__cell {
|
|
4008
4046
|
text-align: center;
|
|
4047
|
+
vertical-align: middle;
|
|
4048
|
+
padding: 0;
|
|
4009
4049
|
}
|
|
4050
|
+
|
|
4051
|
+
/* — Day Button — */
|
|
4010
4052
|
.nexus-calendar__day {
|
|
4011
4053
|
display: inline-flex;
|
|
4012
4054
|
align-items: center;
|
|
4013
4055
|
justify-content: center;
|
|
4014
|
-
width:
|
|
4015
|
-
height:
|
|
4016
|
-
border:
|
|
4056
|
+
width: 2.5rem;
|
|
4057
|
+
height: 2.5rem;
|
|
4058
|
+
border: 2px solid transparent;
|
|
4017
4059
|
background: transparent;
|
|
4018
|
-
border-radius: var(--radius-corner-
|
|
4060
|
+
border-radius: var(--radius-corner-full, 9999px);
|
|
4019
4061
|
cursor: pointer;
|
|
4020
4062
|
font: inherit;
|
|
4021
4063
|
font-size: var(--text-text-sm, 0.875rem);
|
|
4022
4064
|
color: var(--color-text-primary);
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
color 150ms;
|
|
4065
|
+
position: relative;
|
|
4066
|
+
transition: background 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
|
|
4026
4067
|
}
|
|
4027
4068
|
.nexus-calendar__day:hover {
|
|
4028
|
-
background: var(--color-
|
|
4069
|
+
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
|
|
4029
4070
|
}
|
|
4030
|
-
.nexus-calendar__day
|
|
4071
|
+
.nexus-calendar__day:active {
|
|
4072
|
+
background: color-mix(in srgb, var(--color-accent-primary) 18%, transparent);
|
|
4073
|
+
}
|
|
4074
|
+
|
|
4075
|
+
/* Selected — 진한 accent 채움 (selected 클래스는 <td>에 붙으므로 내부 button 대상) */
|
|
4076
|
+
.nexus-calendar__day--selected .nexus-calendar__day {
|
|
4031
4077
|
background: var(--color-accent-primary);
|
|
4032
4078
|
color: var(--color-accent-on-primary);
|
|
4079
|
+
font-weight: var(--font-weight-text-semibold-sm, 600);
|
|
4080
|
+
border-color: transparent;
|
|
4033
4081
|
}
|
|
4034
|
-
.nexus-calendar__day--selected:hover {
|
|
4082
|
+
.nexus-calendar__day--selected .nexus-calendar__day:hover {
|
|
4035
4083
|
background: var(--color-accent-primary-hover);
|
|
4036
4084
|
}
|
|
4037
|
-
|
|
4085
|
+
|
|
4086
|
+
/* Today — 연한 accent 배경 */
|
|
4087
|
+
.nexus-calendar__day--today .nexus-calendar__day {
|
|
4088
|
+
background: color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
|
|
4089
|
+
color: var(--color-accent-primary);
|
|
4038
4090
|
font-weight: var(--font-weight-text-semibold-sm, 600);
|
|
4039
|
-
border: var(--border-width-stroke-default, 1px) solid
|
|
4040
|
-
var(--color-accent-primary);
|
|
4041
4091
|
}
|
|
4042
|
-
.nexus-calendar__day--
|
|
4092
|
+
.nexus-calendar__day--today .nexus-calendar__day:hover {
|
|
4093
|
+
background: color-mix(in srgb, var(--color-accent-primary) 22%, transparent);
|
|
4094
|
+
}
|
|
4095
|
+
.nexus-calendar__day--today.nexus-calendar__day--selected .nexus-calendar__day {
|
|
4096
|
+
background: var(--color-accent-primary);
|
|
4097
|
+
color: var(--color-accent-on-primary);
|
|
4098
|
+
border-color: transparent;
|
|
4099
|
+
}
|
|
4100
|
+
|
|
4101
|
+
/* Outside month */
|
|
4102
|
+
.nexus-calendar__day--outside .nexus-calendar__day {
|
|
4043
4103
|
color: var(--color-text-muted);
|
|
4044
|
-
opacity: 0.
|
|
4104
|
+
opacity: 0.35;
|
|
4045
4105
|
}
|
|
4046
|
-
.nexus-calendar__day--
|
|
4106
|
+
.nexus-calendar__day--outside .nexus-calendar__day:hover {
|
|
4107
|
+
opacity: 0.55;
|
|
4108
|
+
}
|
|
4109
|
+
|
|
4110
|
+
/* Disabled */
|
|
4111
|
+
.nexus-calendar__day--disabled .nexus-calendar__day {
|
|
4047
4112
|
color: var(--color-text-muted);
|
|
4048
4113
|
opacity: var(--opacity-disabled-element, 0.4);
|
|
4049
4114
|
cursor: not-allowed;
|
|
4050
4115
|
pointer-events: none;
|
|
4051
4116
|
}
|
|
4052
4117
|
|
|
4118
|
+
@keyframes nexus-datepicker-enter-bottom {
|
|
4119
|
+
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
|
|
4120
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
4121
|
+
}
|
|
4122
|
+
@keyframes nexus-datepicker-enter-top {
|
|
4123
|
+
from { opacity: 0; transform: translateY(6px) scale(0.98); }
|
|
4124
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
4125
|
+
}
|
|
4126
|
+
.nexus-datepicker__popover[data-side='bottom'] {
|
|
4127
|
+
animation-name: nexus-datepicker-enter-bottom;
|
|
4128
|
+
}
|
|
4129
|
+
.nexus-datepicker__popover[data-side='top'] {
|
|
4130
|
+
animation-name: nexus-datepicker-enter-top;
|
|
4131
|
+
}
|
|
4132
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4133
|
+
.nexus-datepicker__popover { animation: none; }
|
|
4134
|
+
.nexus-calendar__day { transition: none; }
|
|
4135
|
+
.nexus-datepicker__trigger { transition: none; }
|
|
4136
|
+
.nexus-calendar__nav-btn { transition: none; }
|
|
4137
|
+
.nexus-datepicker__icon { transition: none; }
|
|
4138
|
+
}
|
|
4139
|
+
|
|
4053
4140
|
@keyframes nexus-fade-in {
|
|
4054
4141
|
from {
|
|
4055
4142
|
opacity: 0;
|
package/dist/styles.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunk6MT6Y6OF_js = require('./chunks/chunk-6MT6Y6OF.js');
|
|
4
4
|
require('./chunks/chunk-JNMCYWGY.js');
|
|
5
5
|
|
|
6
6
|
// src/styles/inject.ts
|
|
@@ -8,7 +8,7 @@ var STYLE_ID = "__nexus-ds__";
|
|
|
8
8
|
var __nexus_styles_injected__ = typeof document !== "undefined" && !document.getElementById(STYLE_ID) ? (() => {
|
|
9
9
|
const style = document.createElement("style");
|
|
10
10
|
style.id = STYLE_ID;
|
|
11
|
-
style.textContent =
|
|
11
|
+
style.textContent = chunk6MT6Y6OF_js.built_default;
|
|
12
12
|
document.head.appendChild(style);
|
|
13
13
|
return true;
|
|
14
14
|
})() : false;
|
package/dist/styles.layered.css
CHANGED
|
@@ -1994,7 +1994,14 @@
|
|
|
1994
1994
|
transition-duration: 200ms;
|
|
1995
1995
|
}
|
|
1996
1996
|
.nexus-select-trigger:hover {
|
|
1997
|
-
border-color: var(--color-border-
|
|
1997
|
+
border-color: var(--color-border-default-hover);
|
|
1998
|
+
box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
|
|
1999
|
+
}
|
|
2000
|
+
.nexus-select-trigger--open,
|
|
2001
|
+
.nexus-select-trigger:focus-within {
|
|
2002
|
+
outline: none;
|
|
2003
|
+
border-color: var(--color-accent-primary);
|
|
2004
|
+
box-shadow: 0 0 0 0.5px var(--color-accent-primary);
|
|
1998
2005
|
}
|
|
1999
2006
|
.nexus-select-trigger:has(:disabled) {
|
|
2000
2007
|
cursor: not-allowed;
|
|
@@ -3902,27 +3909,34 @@
|
|
|
3902
3909
|
═══════════════════════════════════════════ */
|
|
3903
3910
|
|
|
3904
3911
|
.nexus-datepicker {
|
|
3905
|
-
position: relative;
|
|
3906
3912
|
display: inline-block;
|
|
3907
3913
|
}
|
|
3914
|
+
|
|
3915
|
+
/* — Trigger — */
|
|
3908
3916
|
.nexus-datepicker__trigger {
|
|
3909
3917
|
display: inline-flex;
|
|
3910
3918
|
align-items: center;
|
|
3911
3919
|
gap: var(--spacing-gap-sm, 0.5rem);
|
|
3912
3920
|
padding: var(--spacing-padding-xs, 0.5rem) var(--spacing-padding-sm, 0.75rem);
|
|
3913
|
-
border: var(--border-width-stroke-default, 1px) solid
|
|
3914
|
-
var(--color-border-default);
|
|
3921
|
+
border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
|
|
3915
3922
|
border-radius: var(--radius-corner-md, 0.5rem);
|
|
3916
3923
|
background: var(--color-surface-default);
|
|
3917
3924
|
font: inherit;
|
|
3918
3925
|
font-size: var(--text-text-sm, 0.875rem);
|
|
3919
3926
|
color: var(--color-text-primary);
|
|
3920
3927
|
cursor: pointer;
|
|
3921
|
-
transition: border-color 150ms;
|
|
3928
|
+
transition: border-color 150ms, box-shadow 150ms;
|
|
3922
3929
|
min-width: 10rem;
|
|
3923
3930
|
}
|
|
3924
3931
|
.nexus-datepicker__trigger:hover {
|
|
3925
3932
|
border-color: var(--color-border-default-hover);
|
|
3933
|
+
box-shadow: 0 0 0 0.5px var(--color-border-default-hover);
|
|
3934
|
+
}
|
|
3935
|
+
.nexus-datepicker__trigger:focus-visible,
|
|
3936
|
+
.nexus-datepicker__trigger[data-state='open'] {
|
|
3937
|
+
outline: none;
|
|
3938
|
+
border-color: var(--color-accent-primary);
|
|
3939
|
+
box-shadow: 0 0 0 0.5px var(--color-accent-primary);
|
|
3926
3940
|
}
|
|
3927
3941
|
.nexus-datepicker__trigger:disabled {
|
|
3928
3942
|
opacity: var(--opacity-disabled-element, 0.4);
|
|
@@ -3931,126 +3945,199 @@
|
|
|
3931
3945
|
.nexus-datepicker__trigger--placeholder span {
|
|
3932
3946
|
color: var(--color-text-muted);
|
|
3933
3947
|
}
|
|
3948
|
+
.nexus-datepicker__trigger--has-value {
|
|
3949
|
+
border-color: var(--color-border-default-hover);
|
|
3950
|
+
}
|
|
3934
3951
|
.nexus-datepicker__icon {
|
|
3935
3952
|
width: var(--size-icon-sm, 1rem);
|
|
3936
3953
|
height: var(--size-icon-sm, 1rem);
|
|
3937
3954
|
flex-shrink: 0;
|
|
3938
3955
|
color: var(--color-icon-secondary);
|
|
3956
|
+
transition: color 150ms;
|
|
3939
3957
|
}
|
|
3958
|
+
|
|
3959
|
+
/* — Popover (Radix Portal 기반 — position은 Radix가 인라인으로 처리) — */
|
|
3940
3960
|
.nexus-datepicker__popover {
|
|
3941
|
-
position: absolute;
|
|
3942
|
-
top: calc(100% + 4px);
|
|
3943
|
-
left: 0;
|
|
3944
3961
|
z-index: var(--z-index-layer-popover, 30);
|
|
3945
3962
|
background: var(--color-surface-default);
|
|
3946
|
-
border: var(--border-width-stroke-default, 1px) solid
|
|
3947
|
-
var(--color-border-default);
|
|
3963
|
+
border: var(--border-width-stroke-default, 1px) solid var(--color-border-default);
|
|
3948
3964
|
border-radius: var(--radius-corner-lg, 0.75rem);
|
|
3949
|
-
box-shadow: var(--shadow-
|
|
3950
|
-
padding: var(--spacing-padding-sm, 0.75rem);
|
|
3951
|
-
animation: nexus-
|
|
3965
|
+
box-shadow: var(--shadow-xl, 0 4px 15px -3px rgb(0 0 0 / 0.12));
|
|
3966
|
+
padding: var(--spacing-padding-sm, 0.75rem) var(--spacing-padding-md, 1rem) var(--spacing-padding-md, 1rem);
|
|
3967
|
+
animation: nexus-datepicker-enter-bottom 200ms cubic-bezier(0, 0, 0.2, 1);
|
|
3952
3968
|
}
|
|
3953
3969
|
|
|
3970
|
+
/* — Calendar — */
|
|
3954
3971
|
.nexus-calendar {
|
|
3972
|
+
position: relative;
|
|
3955
3973
|
font-size: var(--text-text-sm, 0.875rem);
|
|
3956
3974
|
}
|
|
3957
3975
|
.nexus-calendar__months {
|
|
3958
3976
|
display: flex;
|
|
3959
3977
|
flex-direction: column;
|
|
3960
|
-
gap: var(--spacing-gap-sm, 0.5rem);
|
|
3961
3978
|
}
|
|
3979
|
+
|
|
3980
|
+
/* — Caption (Month/Year) — 왼쪽 정렬, nav과 같은 줄 */
|
|
3962
3981
|
.nexus-calendar__caption {
|
|
3963
3982
|
display: flex;
|
|
3964
|
-
justify-content: center;
|
|
3965
3983
|
align-items: center;
|
|
3966
|
-
|
|
3967
|
-
font-weight: var(--font-weight-
|
|
3984
|
+
height: 2.5rem;
|
|
3985
|
+
font-weight: var(--font-weight-heading-h6, 600);
|
|
3986
|
+
font-size: var(--text-text-base, 1rem);
|
|
3968
3987
|
color: var(--color-text-primary);
|
|
3988
|
+
letter-spacing: -0.01em;
|
|
3969
3989
|
}
|
|
3990
|
+
|
|
3991
|
+
/* — Nav Buttons — 오른쪽, 캡션과 수직 중앙 정렬 */
|
|
3970
3992
|
.nexus-calendar__nav {
|
|
3993
|
+
position: absolute;
|
|
3994
|
+
top: 0;
|
|
3995
|
+
right: 0;
|
|
3996
|
+
height: 2.5rem;
|
|
3971
3997
|
display: flex;
|
|
3998
|
+
align-items: center;
|
|
3972
3999
|
gap: var(--spacing-gap-xs, 0.25rem);
|
|
3973
4000
|
}
|
|
3974
4001
|
.nexus-calendar__nav-btn {
|
|
3975
4002
|
display: inline-flex;
|
|
3976
4003
|
align-items: center;
|
|
3977
4004
|
justify-content: center;
|
|
3978
|
-
width:
|
|
3979
|
-
height:
|
|
4005
|
+
width: 2rem;
|
|
4006
|
+
height: 2rem;
|
|
3980
4007
|
border: none;
|
|
3981
4008
|
background: transparent;
|
|
3982
|
-
border-radius: var(--radius-corner-
|
|
4009
|
+
border-radius: var(--radius-corner-full, 9999px);
|
|
3983
4010
|
cursor: pointer;
|
|
3984
|
-
color: var(--color-icon-
|
|
3985
|
-
transition: background 150ms;
|
|
4011
|
+
color: var(--color-icon-tertiary);
|
|
4012
|
+
transition: background 150ms, color 150ms;
|
|
4013
|
+
}
|
|
4014
|
+
.nexus-calendar__nav-btn svg {
|
|
4015
|
+
width: 1.125rem;
|
|
4016
|
+
height: 1.125rem;
|
|
4017
|
+
stroke-width: 2;
|
|
3986
4018
|
}
|
|
3987
4019
|
.nexus-calendar__nav-btn:hover {
|
|
3988
|
-
background: var(--color-
|
|
4020
|
+
background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
|
|
4021
|
+
color: var(--color-accent-primary);
|
|
3989
4022
|
}
|
|
4023
|
+
.nexus-calendar__nav-btn:active {
|
|
4024
|
+
background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
|
|
4025
|
+
}
|
|
4026
|
+
|
|
4027
|
+
/* — Grid — table 고유 레이아웃 사용 (빈 셀도 너비 유지) */
|
|
3990
4028
|
.nexus-calendar__grid {
|
|
3991
4029
|
width: 100%;
|
|
3992
|
-
border-collapse:
|
|
3993
|
-
|
|
3994
|
-
.nexus-calendar__head-row {
|
|
3995
|
-
display: flex;
|
|
4030
|
+
border-collapse: separate;
|
|
4031
|
+
border-spacing: 0 2px;
|
|
3996
4032
|
}
|
|
4033
|
+
|
|
4034
|
+
/* — Weekday Header — */
|
|
3997
4035
|
.nexus-calendar__head-cell {
|
|
3998
|
-
width:
|
|
4036
|
+
width: 2.5rem;
|
|
4037
|
+
height: 2.25rem;
|
|
3999
4038
|
text-align: center;
|
|
4039
|
+
vertical-align: middle;
|
|
4000
4040
|
font-size: var(--text-text-xs, 0.75rem);
|
|
4001
|
-
font-weight: var(--font-weight-
|
|
4002
|
-
color: var(--color-text-
|
|
4003
|
-
padding: var(--spacing-padding-2xs, 0.25rem) 0;
|
|
4004
|
-
}
|
|
4005
|
-
.nexus-calendar__row {
|
|
4006
|
-
display: flex;
|
|
4041
|
+
font-weight: var(--font-weight-label-md, 500);
|
|
4042
|
+
color: var(--color-text-secondary);
|
|
4007
4043
|
}
|
|
4044
|
+
|
|
4045
|
+
/* — Day Cell — */
|
|
4008
4046
|
.nexus-calendar__cell {
|
|
4009
4047
|
text-align: center;
|
|
4048
|
+
vertical-align: middle;
|
|
4049
|
+
padding: 0;
|
|
4010
4050
|
}
|
|
4051
|
+
|
|
4052
|
+
/* — Day Button — */
|
|
4011
4053
|
.nexus-calendar__day {
|
|
4012
4054
|
display: inline-flex;
|
|
4013
4055
|
align-items: center;
|
|
4014
4056
|
justify-content: center;
|
|
4015
|
-
width:
|
|
4016
|
-
height:
|
|
4017
|
-
border:
|
|
4057
|
+
width: 2.5rem;
|
|
4058
|
+
height: 2.5rem;
|
|
4059
|
+
border: 2px solid transparent;
|
|
4018
4060
|
background: transparent;
|
|
4019
|
-
border-radius: var(--radius-corner-
|
|
4061
|
+
border-radius: var(--radius-corner-full, 9999px);
|
|
4020
4062
|
cursor: pointer;
|
|
4021
4063
|
font: inherit;
|
|
4022
4064
|
font-size: var(--text-text-sm, 0.875rem);
|
|
4023
4065
|
color: var(--color-text-primary);
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
color 150ms;
|
|
4066
|
+
position: relative;
|
|
4067
|
+
transition: background 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
|
|
4027
4068
|
}
|
|
4028
4069
|
.nexus-calendar__day:hover {
|
|
4029
|
-
background: var(--color-
|
|
4070
|
+
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
|
|
4030
4071
|
}
|
|
4031
|
-
.nexus-calendar__day
|
|
4072
|
+
.nexus-calendar__day:active {
|
|
4073
|
+
background: color-mix(in srgb, var(--color-accent-primary) 18%, transparent);
|
|
4074
|
+
}
|
|
4075
|
+
|
|
4076
|
+
/* Selected — 진한 accent 채움 (selected 클래스는 <td>에 붙으므로 내부 button 대상) */
|
|
4077
|
+
.nexus-calendar__day--selected .nexus-calendar__day {
|
|
4032
4078
|
background: var(--color-accent-primary);
|
|
4033
4079
|
color: var(--color-accent-on-primary);
|
|
4080
|
+
font-weight: var(--font-weight-text-semibold-sm, 600);
|
|
4081
|
+
border-color: transparent;
|
|
4034
4082
|
}
|
|
4035
|
-
.nexus-calendar__day--selected:hover {
|
|
4083
|
+
.nexus-calendar__day--selected .nexus-calendar__day:hover {
|
|
4036
4084
|
background: var(--color-accent-primary-hover);
|
|
4037
4085
|
}
|
|
4038
|
-
|
|
4086
|
+
|
|
4087
|
+
/* Today — 연한 accent 배경 */
|
|
4088
|
+
.nexus-calendar__day--today .nexus-calendar__day {
|
|
4089
|
+
background: color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
|
|
4090
|
+
color: var(--color-accent-primary);
|
|
4039
4091
|
font-weight: var(--font-weight-text-semibold-sm, 600);
|
|
4040
|
-
border: var(--border-width-stroke-default, 1px) solid
|
|
4041
|
-
var(--color-accent-primary);
|
|
4042
4092
|
}
|
|
4043
|
-
.nexus-calendar__day--
|
|
4093
|
+
.nexus-calendar__day--today .nexus-calendar__day:hover {
|
|
4094
|
+
background: color-mix(in srgb, var(--color-accent-primary) 22%, transparent);
|
|
4095
|
+
}
|
|
4096
|
+
.nexus-calendar__day--today.nexus-calendar__day--selected .nexus-calendar__day {
|
|
4097
|
+
background: var(--color-accent-primary);
|
|
4098
|
+
color: var(--color-accent-on-primary);
|
|
4099
|
+
border-color: transparent;
|
|
4100
|
+
}
|
|
4101
|
+
|
|
4102
|
+
/* Outside month */
|
|
4103
|
+
.nexus-calendar__day--outside .nexus-calendar__day {
|
|
4044
4104
|
color: var(--color-text-muted);
|
|
4045
|
-
opacity: 0.
|
|
4105
|
+
opacity: 0.35;
|
|
4046
4106
|
}
|
|
4047
|
-
.nexus-calendar__day--
|
|
4107
|
+
.nexus-calendar__day--outside .nexus-calendar__day:hover {
|
|
4108
|
+
opacity: 0.55;
|
|
4109
|
+
}
|
|
4110
|
+
|
|
4111
|
+
/* Disabled */
|
|
4112
|
+
.nexus-calendar__day--disabled .nexus-calendar__day {
|
|
4048
4113
|
color: var(--color-text-muted);
|
|
4049
4114
|
opacity: var(--opacity-disabled-element, 0.4);
|
|
4050
4115
|
cursor: not-allowed;
|
|
4051
4116
|
pointer-events: none;
|
|
4052
4117
|
}
|
|
4053
4118
|
|
|
4119
|
+
@keyframes nexus-datepicker-enter-bottom {
|
|
4120
|
+
from { opacity: 0; transform: translateY(-6px) scale(0.98); }
|
|
4121
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
4122
|
+
}
|
|
4123
|
+
@keyframes nexus-datepicker-enter-top {
|
|
4124
|
+
from { opacity: 0; transform: translateY(6px) scale(0.98); }
|
|
4125
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
4126
|
+
}
|
|
4127
|
+
.nexus-datepicker__popover[data-side='bottom'] {
|
|
4128
|
+
animation-name: nexus-datepicker-enter-bottom;
|
|
4129
|
+
}
|
|
4130
|
+
.nexus-datepicker__popover[data-side='top'] {
|
|
4131
|
+
animation-name: nexus-datepicker-enter-top;
|
|
4132
|
+
}
|
|
4133
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4134
|
+
.nexus-datepicker__popover { animation: none; }
|
|
4135
|
+
.nexus-calendar__day { transition: none; }
|
|
4136
|
+
.nexus-datepicker__trigger { transition: none; }
|
|
4137
|
+
.nexus-calendar__nav-btn { transition: none; }
|
|
4138
|
+
.nexus-datepicker__icon { transition: none; }
|
|
4139
|
+
}
|
|
4140
|
+
|
|
4054
4141
|
@keyframes nexus-fade-in {
|
|
4055
4142
|
from {
|
|
4056
4143
|
opacity: 0;
|
package/dist/styles.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexus-cross/design-system",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "NEXUS Design System UI Components",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -348,7 +348,7 @@
|
|
|
348
348
|
"typescript": "^5.0.0",
|
|
349
349
|
"vitest": "^1.6.1",
|
|
350
350
|
"zod-to-json-schema": "^3.25.2",
|
|
351
|
-
"@nexus-cross/tokens": "1.0.
|
|
351
|
+
"@nexus-cross/tokens": "1.0.10"
|
|
352
352
|
},
|
|
353
353
|
"scripts": {
|
|
354
354
|
"postinstall": "node scripts/setup-cursor-rules.cjs",
|