nntc-ui 0.0.82 → 0.0.83

package/index.css

@@ -643,14 +643,31 @@
 
 /* src/components/common/DateTime/dateTime.module.css */
 .dateTime_root {
-  position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   max-width: 320px;
 }
+.dateTime_fullWidth {
+  max-width: 100%;
+}
 .dateTime_medium {
-  height: 40px;
+  gap: 8px;
 }
 .dateTime_small {
+  gap: 4px;
+}
+.dateTime_label {
+  color: var(--theme-text-secondary);
+}
+.dateTime_wrapper {
+  position: relative;
+  width: 100%;
+}
+.dateTime_medium > .dateTime_wrapper {
+  height: 40px;
+}
+.dateTime_small > .dateTime_wrapper {
   height: 32px;
 }
 .dateTime_input {
@@ -667,11 +684,11 @@
   border-radius: 4px;
   outline: none;
 }
-.dateTime_medium > .dateTime_input {
+.dateTime_medium > .dateTime_wrapper > .dateTime_input {
   height: 40px;
   padding: 8px 48px 8px 16px;
 }
-.dateTime_small > .dateTime_input {
+.dateTime_small > .dateTime_wrapper > .dateTime_input {
   height: 32px;
   padding: 4px 48px 4px 16px;
 }
@@ -705,10 +722,10 @@
   height: 24px;
   cursor: pointer;
 }
-.dateTime_medium > .dateTime_icon {
+.dateTime_medium > .dateTime_wrapper > .dateTime_icon {
   top: 8px;
 }
-.dateTime_small > .dateTime_icon {
+.dateTime_small > .dateTime_wrapper > .dateTime_icon {
   top: 4px;
 }
 .dateTime_icon > svg {
@@ -722,15 +739,40 @@
   width: 100%;
   height: 0;
 }
+.dateTime_popoverContent {
+  max-width: none;
+}
 
 /* src/components/common/DateTime/ui/CalendarPopover/calendarPopover.module.css */
 .calendarPopover_root {
   display: flex;
   flex-direction: column;
-  gap: 24px;
-  width: 368px;
+}
+.calendarPopover_root.calendarPopover_dateTimeMode {
+  flex-direction: row;
+  align-items: stretch;
+  width: auto;
+}
+.calendarPopover_medium {
   padding: 24px 16px;
 }
+.calendarPopover_small {
+  padding: 20px 12px;
+}
+.calendarPopover_calendarContainer {
+  display: flex;
+  flex-direction: column;
+  width: 336px;
+}
+.calendarPopover_medium > .calendarPopover_calendarContainer {
+  gap: 24px;
+}
+.calendarPopover_small > .calendarPopover_calendarContainer {
+  gap: 20px;
+}
+.calendarPopover_small .calendarPopover_calendarContainer.calendarPopover_monthView {
+  width: 282px;
+}
 .calendarPopover_buttonsContainer {
   display: block;
 }
@@ -782,7 +824,19 @@
 }
 .calendarPopover_cell.calendarPopover_month {
   width: 84px;
-  height: 64px;
+}
+.calendarPopover_cell.calendarPopover_year {
+  width: 48px;
+}
+.calendarPopover_small .calendarPopover_cell {
+  width: 40px;
+  height: 40px;
+}
+.calendarPopover_small .calendarPopover_cell.calendarPopover_month {
+  width: 84px;
+}
+.calendarPopover_small .calendarPopover_cell.calendarPopover_year {
+  width: 48px;
 }
 .calendarPopover_cellData {
   position: relative;
@@ -799,6 +853,12 @@
   background-color: var(--theme-focus);
   border-radius: 50%;
 }
+.calendarPopover_small .calendarPopover_cellCircle {
+  top: 2px;
+  left: 2px;
+  width: 36px;
+  height: 36px;
+}
 .calendarPopover_cellCircle ~ .calendarPopover_cellData {
   color: var(--theme-text-button-invert);
 }
@@ -812,6 +872,10 @@
   height: 44px;
   background-color: var(--theme-date-range);
 }
+.calendarPopover_small .calendarPopover_cellSelection {
+  top: 2px;
+  height: 36px;
+}
 .calendarPopover_cellSelectionFirst {
   left: 50%;
   width: 50%;
@@ -821,7 +885,7 @@
 }
 .calendarPopover_monthCellSelection {
   position: absolute;
-  top: 10px;
+  top: 2px;
   left: 0;
   z-index: 1;
   display: block;
@@ -829,6 +893,10 @@
   height: 44px;
   background-color: var(--theme-date-range);
 }
+.calendarPopover_small .calendarPopover_monthCellSelection {
+  top: 2px;
+  height: 36px;
+}
 .calendarPopover_monthCellSelectionFirst {
   left: 50%;
   width: 50%;
@@ -836,6 +904,69 @@
 .calendarPopover_monthCellSelectionLast {
   width: 50%;
 }
+.calendarPopover_timeContainer {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 116px;
+  padding-left: 16px;
+  margin-left: 16px;
+  overflow: hidden;
+  border-left: 1px solid var(--theme-input-border);
+}
+.calendarPopover_timeSelectionMarker {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 16px;
+  z-index: 0;
+  height: 36px;
+  pointer-events: none;
+  background-color: var(--theme-focus);
+  border-radius: 8px;
+  transform: translateY(-50%);
+}
+.calendarPopover_timeDivider {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  width: 16px;
+  color: var(--theme-text-button-invert);
+  text-align: center;
+}
+
+/* src/components/common/DateTime/ui/TimeWheelColumn/timeWheelColumn.module.css */
+.timeWheelColumn_timeWheel {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  height: 252px;
+  padding: 108px 0;
+  overflow-y: auto;
+  scroll-snap-type: y mandatory;
+}
+.timeWheelColumn_timeWheel::-webkit-scrollbar {
+  display: none;
+}
+.timeWheelColumn_timeWheelButton {
+  color: var(--theme-text-primary);
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+.timeWheelColumn_timeWheelItem {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  cursor: pointer;
+  scroll-snap-align: center;
+}
+.timeWheelColumn_timeWheelItemActive {
+  color: var(--theme-text-button-invert);
+}
 
 /* src/components/common/ColorPicker/colorPicker.module.css */
 .colorPicker_root {
@@ -956,6 +1087,9 @@
   width: 100%;
   max-width: 320px;
 }
+.input_fullWidth {
+  max-width: 100%;
+}
 .input_medium {
   gap: 8px;
 }
@@ -991,6 +1125,15 @@
 .input_input:disabled {
   color: var(--theme-text-inactive);
 }
+.input_input[type=number] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.input_input[type=number]::-webkit-inner-spin-button,
+.input_input[type=number]::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
 .input_medium > .input_wrapper > .input_input {
   height: 40px;
   padding: 8px 16px 8px 16px;
@@ -999,6 +1142,15 @@
   height: 32px;
   padding: 4px 16px 4px 16px;
 }
+.input_filled > .input_input {
+  background-color: var(--theme-input-filled);
+}
+.input_filled:hover > .input_input:not(:disabled):not(:focus) {
+  background-color: var(--theme-input-filled-hover);
+}
+.input_filled > .input_input:focus {
+  background-color: var(--theme-input-filled-hover);
+}
 .input_outlined > .input_input {
   background-color: transparent;
   outline: 1px solid var(--theme-input-border);

package/index.d.ts

@@ -72,6 +72,14 @@ interface DayjsInstance {
     format(template?: string): string;
     year(): number;
     month(): number;
+    hour(): number;
+    hour(value: number): DayjsInstance;
+    minute(): number;
+    minute(value: number): DayjsInstance;
+    second(): number;
+    second(value: number): DayjsInstance;
+    millisecond(): number;
+    millisecond(value: number): DayjsInstance;
     startOf(unit: string): DayjsInstance;
     valueOf(): number;
     daysInMonth(): number;
@@ -83,13 +91,14 @@ type DayjsFactory = (date?: DayjsConfigType) => DayjsInstance;
 
 type Variant$6 = 'filled' | 'outlined';
 type Size$9 = 'medium' | 'small';
-type ValueType = 'date' | 'year';
+type ValueType = 'date' | 'year' | 'dateTime';
 interface Props$k {
     variant?: Variant$6;
     isPeriod?: boolean;
     valueType?: ValueType;
     componentSize?: Size$9;
     fullWidth?: boolean;
+    label?: string;
     placeholder?: string;
     values?: (string | undefined)[];
     defaultValues?: (string | undefined)[];
@@ -97,7 +106,9 @@ interface Props$k {
     onValueChange?: (values: (string | undefined)[]) => void;
     dayjs?: DayjsFactory;
 }
-declare function DateTime(props: UiProps<Props$k> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): react_jsx_runtime.JSX.Element;
+declare const DateTime: React.ForwardRefExoticComponent<Props$k & {
+    classes?: PropsObject;
+} & InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 
 type Variant$5 = 'outlined';
 type Size$8 = 'medium' | 'small';
@@ -110,7 +121,7 @@ interface Props$j {
 }
 declare const ColorPicker: (props: UiProps<Props$j> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
 
-type Variant$4 = 'outlined';
+type Variant$4 = 'filled' | 'outlined';
 type Size$7 = 'medium' | 'small';
 interface Props$i {
     variant?: Variant$4;
@@ -118,7 +129,9 @@ interface Props$i {
     fullWidth?: boolean;
     label?: string;
 }
-declare const Input: (props: UiProps<Props$i> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => react_jsx_runtime.JSX.Element;
+declare const Input: React.ForwardRefExoticComponent<Props$i & {
+    classes?: PropsObject;
+} & InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
 
 type Variant$3 = 'filled' | 'outlined';
 type Size$6 = 'medium' | 'small';