@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.
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var chunkOE5BAEBE_js = require('../chunks/chunk-OE5BAEBE.js');
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
- ${chunkOE5BAEBE_js.built_default}
12
+ ${chunk6MT6Y6OF_js.built_default}
13
13
  }`;
14
14
  document.head.appendChild(style);
15
15
  return true;
@@ -1,4 +1,4 @@
1
- import { built_default } from '../chunks/chunk-22O6YUYH.mjs';
1
+ import { built_default } from '../chunks/chunk-BMYFRG3M.mjs';
2
2
  import '../chunks/chunk-CVYXRSXT.mjs';
3
3
 
4
4
  // src/styles/inject-layer.ts
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-strong);
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-lg, 0 2px 8px -1px rgb(0 0 0 / 0.12));
3949
- padding: var(--spacing-padding-sm, 0.75rem);
3950
- animation: nexus-fade-in 150ms ease;
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
- padding: var(--spacing-padding-2xs, 0.25rem) 0;
3966
- font-weight: var(--font-weight-text-semibold-sm, 600);
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: var(--size-control-sm, 2rem);
3978
- height: var(--size-control-sm, 2rem);
4004
+ width: 2rem;
4005
+ height: 2rem;
3979
4006
  border: none;
3980
4007
  background: transparent;
3981
- border-radius: var(--radius-corner-sm, 0.25rem);
4008
+ border-radius: var(--radius-corner-full, 9999px);
3982
4009
  cursor: pointer;
3983
- color: var(--color-icon-secondary);
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-surface-default-hover);
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: 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: var(--size-control-sm, 2rem);
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-text-medium-xs, 500);
4001
- color: var(--color-text-tertiary);
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: var(--size-control-sm, 2rem);
4015
- height: var(--size-control-sm, 2rem);
4016
- border: none;
4056
+ width: 2.5rem;
4057
+ height: 2.5rem;
4058
+ border: 2px solid transparent;
4017
4059
  background: transparent;
4018
- border-radius: var(--radius-corner-sm, 0.25rem);
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
- transition:
4024
- background 150ms,
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-surface-default-hover);
4069
+ background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
4029
4070
  }
4030
- .nexus-calendar__day--selected {
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
- .nexus-calendar__day--today {
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--outside {
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.5;
4104
+ opacity: 0.35;
4045
4105
  }
4046
- .nexus-calendar__day--disabled {
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 chunkOE5BAEBE_js = require('./chunks/chunk-OE5BAEBE.js');
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 = chunkOE5BAEBE_js.built_default;
11
+ style.textContent = chunk6MT6Y6OF_js.built_default;
12
12
  document.head.appendChild(style);
13
13
  return true;
14
14
  })() : false;
@@ -1994,7 +1994,14 @@
1994
1994
  transition-duration: 200ms;
1995
1995
  }
1996
1996
  .nexus-select-trigger:hover {
1997
- border-color: var(--color-border-strong);
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-lg, 0 2px 8px -1px rgb(0 0 0 / 0.12));
3950
- padding: var(--spacing-padding-sm, 0.75rem);
3951
- animation: nexus-fade-in 150ms ease;
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
- padding: var(--spacing-padding-2xs, 0.25rem) 0;
3967
- font-weight: var(--font-weight-text-semibold-sm, 600);
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: var(--size-control-sm, 2rem);
3979
- height: var(--size-control-sm, 2rem);
4005
+ width: 2rem;
4006
+ height: 2rem;
3980
4007
  border: none;
3981
4008
  background: transparent;
3982
- border-radius: var(--radius-corner-sm, 0.25rem);
4009
+ border-radius: var(--radius-corner-full, 9999px);
3983
4010
  cursor: pointer;
3984
- color: var(--color-icon-secondary);
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-surface-default-hover);
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: 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: var(--size-control-sm, 2rem);
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-text-medium-xs, 500);
4002
- color: var(--color-text-tertiary);
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: var(--size-control-sm, 2rem);
4016
- height: var(--size-control-sm, 2rem);
4017
- border: none;
4057
+ width: 2.5rem;
4058
+ height: 2.5rem;
4059
+ border: 2px solid transparent;
4018
4060
  background: transparent;
4019
- border-radius: var(--radius-corner-sm, 0.25rem);
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
- transition:
4025
- background 150ms,
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-surface-default-hover);
4070
+ background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
4030
4071
  }
4031
- .nexus-calendar__day--selected {
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
- .nexus-calendar__day--today {
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--outside {
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.5;
4105
+ opacity: 0.35;
4046
4106
  }
4047
- .nexus-calendar__day--disabled {
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
@@ -1,4 +1,4 @@
1
- import { built_default } from './chunks/chunk-22O6YUYH.mjs';
1
+ import { built_default } from './chunks/chunk-BMYFRG3M.mjs';
2
2
  import './chunks/chunk-CVYXRSXT.mjs';
3
3
 
4
4
  // src/styles/inject.ts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nexus-cross/design-system",
3
- "version": "1.0.8",
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.8"
351
+ "@nexus-cross/tokens": "1.0.10"
352
352
  },
353
353
  "scripts": {
354
354
  "postinstall": "node scripts/setup-cursor-rules.cjs",